@extends('layouts.app', ['title' => 'Ajuda'])
@section('content')
    <x-ui.page-header title="Ajuda" description="Manual operacional construído com o mesmo conteúdo das ajudas de cada tela." />

    <div class="space-y-8">
        @foreach($groups as $group => $topics)
            <section aria-labelledby="help-group-{{ $loop->index }}">
                <h2 id="help-group-{{ $loop->index }}" class="mb-3 text-lg font-black text-zinc-950">{{ $group }}</h2>
                <div class="grid gap-3 lg:grid-cols-2">
                    @foreach($topics as $topic)
                        <details class="surface group p-5">
                            <summary class="flex cursor-pointer list-none items-center justify-between gap-3 font-extrabold text-zinc-950">
                                <span>{{ $topic['title'] }}</span>
                                <span aria-hidden="true" class="text-brand-500 transition group-open:rotate-45">+</span>
                            </summary>
                            <div class="mt-4 space-y-4 border-t border-zinc-200 pt-4 text-sm leading-6 text-zinc-700">
                                <p>{{ $topic['purpose'] }}</p>
                                @if(($topic['actions'] ?? []) !== [])
                                    <div><h3 class="font-bold text-zinc-950">O que você pode fazer</h3><ul class="mt-1 list-disc space-y-1 pl-5">@foreach($topic['actions'] as $action)<li>{{ $action }}</li>@endforeach</ul></div>
                                @endif
                                @if(($topic['fields'] ?? []) !== [])
                                    <div><h3 class="font-bold text-zinc-950">Campos principais</h3><dl class="mt-1 space-y-2">@foreach($topic['fields'] as $field => $description)<div><dt class="font-semibold text-zinc-900">{{ $field }}</dt><dd>{{ $description }}</dd></div>@endforeach</dl></div>
                                @endif
                                @if(($topic['buttons'] ?? []) !== [])
                                    <div><h3 class="font-bold text-zinc-950">Botões e ações</h3><dl class="mt-1 space-y-2">@foreach($topic['buttons'] as $button => $description)<div><dt class="font-semibold text-zinc-900">{{ $button }}</dt><dd>{{ $description }}</dd></div>@endforeach</dl></div>
                                @endif
                                @if(($topic['workflow'] ?? []) !== [])
                                    <div><h3 class="font-bold text-zinc-950">Fluxo recomendado</h3><ol class="mt-1 list-decimal space-y-1 pl-5">@foreach($topic['workflow'] as $step)<li>{{ $step }}</li>@endforeach</ol></div>
                                @endif
                                @if(($topic['attention'] ?? []) !== [])
                                    <div class="rounded-xl bg-amber-50 p-3 text-amber-950"><strong>Atenção:</strong> {{ implode(' ', $topic['attention']) }}</div>
                                @endif
                                @if(! empty($topic['permissions']))
                                    <p class="text-xs text-zinc-500"><strong>Permissões:</strong> {{ $topic['permissions'] }}</p>
                                @endif
                                @if(! empty($topic['link_route']))
                                    <a href="{{ route($topic['link_route']) }}" wire:navigate class="inline-flex font-bold text-zinc-950 underline decoration-brand-400 decoration-2 underline-offset-4">Abrir esta área</a>
                                @endif
                            </div>
                        </details>
                    @endforeach
                </div>
            </section>
        @endforeach
    </div>
@endsection