<x-app-layout>
    <x-ui.page-header title="Tableau de bord" :description="'Filiale ' . auth()->user()->filiale->name" />

    <x-alert />

    <div class="mb-8">
        <h2 class="text-lg font-semibold text-slate-800 mb-4 flex items-center gap-2">
            <span class="w-2 h-2 rounded-full bg-amber-500 animate-pulse"></span>
            Formulaires à remplir
        </h2>
        @if($pendingForms->isEmpty())
            <div class="card p-8 text-center text-slate-400">
                Aucun formulaire en attente de première soumission.
            </div>
        @else
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
                @foreach($pendingForms as $form)
                    @php $hasDraft = in_array($form->id, $draftFormIds ?? []); @endphp
                    <div class="card p-6 border-l-4 border-l-transtev-accent hover:shadow-card-hover transition">
                        <div class="flex items-start justify-between gap-2">
                            <h3 class="font-bold text-slate-800">{{ $form->title }}</h3>
                            @if($hasDraft)
                                <span class="badge-info shrink-0">Brouillon enregistré</span>
                            @endif
                        </div>
                        <p class="text-sm text-slate-500 mt-2 line-clamp-2">{{ $form->description }}</p>
                        @if($form->pivot->due_date)
                            <p class="text-xs text-amber-600 mt-3 font-medium">Échéance : {{ \Carbon\Carbon::parse($form->pivot->due_date)->format('d/m/Y') }}</p>
                        @endif
                        <a href="{{ route('filiale.forms.fill', $form) }}" class="btn-primary btn-sm mt-4 w-full justify-center">
                            {{ $hasDraft ? 'Reprendre le brouillon' : 'Remplir le formulaire' }}
                        </a>
                    </div>
                @endforeach
            </div>
        @endif
    </div>

    <div>
        <h2 class="text-lg font-semibold text-slate-800 mb-4">Formulaires soumis</h2>
        @if($submittedForms->isEmpty())
            <div class="card p-6 text-slate-400 text-sm">Aucun formulaire soumis pour le moment.</div>
        @else
            <div class="card divide-y divide-slate-100">
                @foreach($submittedForms as $form)
                    <div class="px-6 py-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                        <div>
                            <span class="font-medium text-slate-700">{{ $form->title }}</span>
                            @if(! $form->is_active)
                                <span class="ml-2 badge-danger">Verrouillé</span>
                            @else
                                <span class="ml-2 badge-success">Soumis</span>
                                <span class="ml-1 badge-info">Modifiable</span>
                            @endif
                        </div>
                        <a href="{{ route('filiale.forms.fill', $form) }}" class="btn-secondary btn-sm shrink-0">
                            {{ $form->is_active ? 'Voir / Modifier' : 'Consulter' }}
                        </a>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
</x-app-layout>
