<x-app-layout>
    <x-ui.page-header :title="$form->title" :description="$readOnly ? 'Consultation seule — formulaire verrouillé par l\'administrateur' : ($submission ? 'Vous pouvez modifier vos réponses' : 'Remplissez tous les champs obligatoires')" />

    <x-alert />

    @if($readOnly)
        <div class="mb-6 flex items-center gap-3 rounded-xl bg-slate-100 border border-slate-200 px-4 py-3 text-sm text-slate-700">
            <svg class="w-5 h-5 text-slate-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
            Ce formulaire a été désactivé par l'administrateur. Les réponses sont en lecture seule.
        </div>
    @elseif($submission && $submission->status === 'draft')
        <div class="mb-6 flex items-center gap-3 rounded-xl bg-amber-50 border border-amber-200 px-4 py-3 text-sm text-amber-800">
            <svg class="w-5 h-5 text-amber-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
            Brouillon en cours — vos réponses sont enregistrées mais pas encore soumises à l'administrateur.
        </div>
    @elseif($submission)
        <div class="mb-6 flex items-center gap-3 rounded-xl bg-blue-50 border border-blue-200 px-4 py-3 text-sm text-blue-800">
            <svg class="w-5 h-5 text-blue-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
            Formulaire déjà soumis — vous pouvez modifier vos réponses tant que l'administrateur ne l'a pas désactivé.
        </div>
    @endif

    <div class="card p-6 w-full">
        @if($form->description)
            <p class="text-slate-600 mb-4 pb-4 border-b border-slate-100">{{ $form->description }}</p>
        @endif
        @if($assignment->pivot->due_date)
            <div class="mb-6 flex items-center gap-2 text-amber-700 bg-amber-50 rounded-lg px-4 py-2 text-sm">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                Date limite : {{ \Carbon\Carbon::parse($assignment->pivot->due_date)->format('d/m/Y') }}
            </div>
        @endif

        @if($readOnly)
            @include('partials.dynamic-fields-list', ['fields' => $fieldsTree, 'readOnly' => true, 'prefilled' => $prefilled, 'scopeId' => 'root'])
            <div class="mt-8 pt-6 border-t border-slate-100">
                <a href="{{ route('filiale.dashboard') }}" class="btn-secondary">Retour au tableau de bord</a>
            </div>
        @else
            <form method="POST" action="{{ route('filiale.forms.fill.store', $form) }}" enctype="multipart/form-data">
                @csrf
                @include('partials.dynamic-fields-list', ['fields' => $fieldsTree, 'readOnly' => false, 'prefilled' => $prefilled, 'scopeId' => 'root'])
                <div class="flex flex-wrap gap-3 mt-8 pt-6 border-t border-slate-100">
                    <button type="submit" name="action" value="submit" class="btn-primary">
                        {{ $submission && $submission->status === 'submitted' ? 'Enregistrer les modifications' : 'Soumettre le formulaire' }}
                    </button>
                    <button type="submit" name="action" value="draft" class="btn-secondary" formnovalidate>
                        Enregistrer le brouillon
                    </button>
                    <a href="{{ route('filiale.dashboard') }}" class="btn-secondary">Annuler</a>
                </div>
                <p class="mt-3 text-xs text-slate-500">
                    Le brouillon enregistre votre progression sans soumettre le formulaire à l'administrateur.
                </p>
            </form>
        @endif
    </div>
</x-app-layout>
