@extends('layouts.exat')
@section('title', 'Validation')
@section('subtitle', $demandes->count().' demande(s) à traiter')

@section('content')
<div class="space-y-3">
    @forelse($demandes as $d)
        <div class="rounded-xl bg-white p-5 ring-1 ring-slate-200">
            <div class="flex flex-wrap items-start justify-between gap-3">
                <div>
                    <div class="flex items-center gap-2">
                        <span class="font-medium tabular-nums text-slate-800">{{ $d->reference }}</span>
                        <x-statut-badge :statut="$d->statut" />
                        <span class="rounded-full bg-slate-100 px-2 py-0.5 text-[11px] text-slate-600">{{ $d->circuit->libelle ?? 'Circuit —' }} · Étape : {{ $d->etapeCourante->libelle ?? '—' }}</span>
                    </div>
                    <div class="mt-1 text-sm text-slate-800">{{ $d->planteur->nom ?? '—' }} <span class="text-slate-400">· {{ $d->planteur->code ?? '' }}</span></div>
                    <div class="mt-0.5 text-xs text-slate-500">
                        {{ $d->objet ?? '—' }} · <span class="font-medium text-slate-700">{{ number_format((float) $d->montant, 0, ',', ' ') }} FCFA</span> · {{ $d->duree_mois }} mois
                    </div>
                    @php $liste = $prochains[$d->id] ?? []; $seq = ($d->etapeCourante->mode ?? '') === 'SEQUENTIEL'; @endphp
                    @if(!empty($liste))
                        <div class="mt-1 text-xs">
                            <span class="text-slate-400">{{ $seq ? 'Prochain approbateur' : 'Approbateurs' }} :</span>
                            <span class="font-medium text-slate-600">{{ implode(', ', $liste) }}</span>
                        </div>
                    @endif
                    @if($d->date_soumission)
                        <div class="mt-1 text-xs text-slate-400">Envoyée en approbation le {{ \Illuminate\Support\Carbon::parse($d->date_soumission)->format('d/m/Y à H:i') }}</div>
                    @endif
                </div>
                <a href="{{ route('demandes.show', $d) }}" class="text-xs font-medium text-emerald-600 hover:text-emerald-700">Détail</a>
            </div>

            @if($peutValider[$d->id] ?? false)
            <form method="POST" action="{{ route('validation.approuver', $d) }}" class="mt-4">
                @csrf
                <textarea name="commentaire" rows="2" placeholder="Commentaire (facultatif pour approuver, obligatoire pour rejeter)"
                          class="w-full rounded-lg border-slate-200 text-sm"></textarea>
                <div class="mt-2 flex items-center justify-end gap-2">
                    <button type="submit" formaction="{{ route('validation.rejeter', $d) }}"
                            onclick="return confirm('Confirmer le rejet de la demande {{ $d->reference }} ? Un motif (commentaire) est obligatoire.')"
                            class="inline-flex h-9 items-center gap-1.5 rounded-lg border border-red-200 px-3 text-sm font-medium text-red-700 hover:bg-red-50">
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
                        Rejeter
                    </button>
                    <button type="submit"
                            onclick="return confirm('Confirmer l\'approbation de la demande {{ $d->reference }} ?')"
                            class="inline-flex h-9 items-center gap-1.5 rounded-lg bg-emerald-600 px-3 text-sm font-medium text-white hover:bg-emerald-700">
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/></svg>
                        Approuver
                    </button>
                </div>
            </form>
            @else
                <p class="mt-4 text-xs text-slate-400">Demande visible en supervision — vous ne pouvez l'approuver que si elle est à votre niveau.</p>
            @endif
        </div>
    @empty
        <div class="rounded-xl bg-white p-12 text-center ring-1 ring-slate-200">
            <div class="mx-auto mb-2 flex h-10 w-10 items-center justify-center rounded-full bg-emerald-50 text-emerald-600">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/></svg>
            </div>
            <p class="text-sm text-slate-500">Aucune demande en attente de votre validation.</p>
        </div>
    @endforelse
</div>
@endsection