@extends('layouts.exat')
@section('title', 'Tableau de bord')
@section('subtitle', 'Vue d\'ensemble des avances')

@php
    $fcfa = fn ($n) => number_format((float) $n, 0, ',', ' ');
    $statutMeta = [
        'BROUILLON'        => ['Brouillon', '#94a3b8'],
        'SOUMISE'          => ['Soumise', '#3b82f6'],
        'EN_VALIDATION'    => ['En validation', '#f59e0b'],
        'VALIDEE'          => ['Validée', '#10b981'],
        'REJETEE'          => ['Rejetée', '#ef4444'],
        'ANNULEE'          => ['Annulée', '#cbd5e1'],
        'DECAISSEE'        => ['Décaissée', '#6366f1'],
        'EN_REMBOURSEMENT' => ['En remboursement', '#06b6d4'],
        'SOLDEE'           => ['Soldée', '#22c55e'],
        'EN_DEFAUT'        => ['En défaut', '#f43f5e'],
    ];
@endphp

@section('content')

    {{-- Filtre date --}}
    <form method="GET" class="mb-4 flex flex-wrap items-end gap-2 rounded-xl bg-white p-3 ring-1 ring-slate-200">
        @include('partials._filtre-date')
        <button class="inline-flex h-9 items-center rounded-lg border border-slate-200 px-3 text-sm text-slate-700 hover:bg-slate-50">Filtrer</button>
        @if(request()->hasAny(['periode', 'date', 'date_debut', 'date_fin', 'semaine', 'mois', 'annee']))
            <a href="{{ route('dashboard') }}" class="inline-flex h-9 items-center px-2 text-sm text-slate-500 hover:text-slate-700">Réinitialiser</a>
        @endif
    </form>

    {{-- Tuiles --}}
    <div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
        <div class="rounded-xl bg-white p-4 ring-1 ring-slate-200">
            <div class="flex items-center gap-2 text-xs text-slate-500">
                <span class="flex h-7 w-7 items-center justify-center rounded-lg bg-slate-100 text-slate-500">
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/></svg>
                </span>
                Total demandes
            </div>
            <div class="mt-2 text-2xl font-medium text-slate-900">{{ $fcfa($total) }}</div>
        </div>
        <div class="rounded-xl bg-white p-4 ring-1 ring-slate-200">
            <div class="text-xs text-slate-500">Montant demandé</div>
            <div class="mt-2 text-2xl font-medium text-slate-900">{{ $fcfa($montantTotal) }}<span class="ml-1 text-sm text-slate-400">FCFA</span></div>
            <div class="mt-1 text-[11px] text-slate-400">{{ $enAttente }} en attente · {{ $validees }} validées</div>
        </div>
        <div class="rounded-xl bg-white p-4 ring-1 ring-slate-200">
            <div class="text-xs text-slate-500">Montant décaissé</div>
            <div class="mt-2 text-2xl font-medium text-indigo-600">{{ $fcfa($montantDecaisse) }}<span class="ml-1 text-sm text-slate-400">FCFA</span></div>
            <div class="mt-1 text-[11px] text-slate-400">Remboursé : {{ $fcfa($montantRembourse) }} FCFA</div>
        </div>
        <div class="rounded-xl bg-white p-4 ring-1 ring-slate-200">
            <div class="text-xs text-slate-500">Taux de recouvrement</div>
            <div class="mt-2 text-2xl font-medium text-emerald-600">{{ number_format($taux, 1, ',', ' ') }} %</div>
            <div class="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-slate-100">
                <div class="h-full rounded-full bg-emerald-500" style="width: {{ min(100, $taux) }}%"></div>
            </div>
        </div>
    </div>

    {{-- Graphes --}}
    <div class="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-2">
        {{-- Donut répartition par statut --}}
        <div class="rounded-xl bg-white p-5 ring-1 ring-slate-200">
            <h2 class="mb-4 text-sm font-medium text-slate-900">Répartition par statut</h2>
            @php $somme = array_sum($repartition); @endphp
            @if($somme > 0)
                <div class="flex items-center gap-6">
                    <svg viewBox="0 0 140 140" class="h-40 w-40 shrink-0">
                        @php $r = 54; $c = 2 * M_PI * $r; $cum = 0; @endphp
                        <circle cx="70" cy="70" r="{{ $r }}" fill="none" stroke="#f1f5f9" stroke-width="20"/>
                        @foreach($repartition as $statut => $n)
                            @php
                                $frac = $n / $somme;
                                $len = $frac * $c;
                                $startDeg = $cum * 360 - 90;
                                $cum += $frac;
                                $color = $statutMeta[$statut][1] ?? '#94a3b8';
                            @endphp
                            <circle cx="70" cy="70" r="{{ $r }}" fill="none" stroke="{{ $color }}" stroke-width="20"
                                    stroke-dasharray="{{ round($len, 2) }} {{ round($c - $len, 2) }}"
                                    transform="rotate({{ round($startDeg, 2) }} 70 70)"/>
                        @endforeach
                        <text x="70" y="66" text-anchor="middle" font-size="22" font-weight="500" fill="#0f172a">{{ $somme }}</text>
                        <text x="70" y="84" text-anchor="middle" font-size="10" fill="#94a3b8">demandes</text>
                    </svg>
                    <div class="flex-1 space-y-1.5">
                        @foreach($repartition as $statut => $n)
                            <div class="flex items-center gap-2 text-xs">
                                <span class="h-2.5 w-2.5 rounded-sm" style="background: {{ $statutMeta[$statut][1] ?? '#94a3b8' }}"></span>
                                <span class="text-slate-600">{{ $statutMeta[$statut][0] ?? $statut }}</span>
                                <span class="ml-auto font-medium text-slate-800">{{ $n }}</span>
                                <span class="w-10 text-right text-slate-400">{{ round($n / $somme * 100) }}%</span>
                            </div>
                        @endforeach
                    </div>
                </div>
            @else
                <p class="py-10 text-center text-sm text-slate-400">Aucune donnée pour le moment.</p>
            @endif
        </div>

        {{-- Barres évolution mensuelle --}}
        <div class="rounded-xl bg-white p-5 ring-1 ring-slate-200">
            <h2 class="mb-4 text-sm font-medium text-slate-900">Évolution mensuelle (montants demandés)</h2>
            @php $maxM = max(array_map(fn ($m) => $m['montant'], $mois)) ?: 1; @endphp
            <svg viewBox="0 0 360 170" class="h-44 w-full">
                <line x1="34" y1="140" x2="356" y2="140" stroke="#e2e8f0" stroke-width="1"/>
                @foreach($mois as $i => $m)
                    @php
                        $bw = 34; $gap = 20; $x = 44 + $i * ($bw + $gap);
                        $h = $maxM > 0 ? round($m['montant'] / $maxM * 108) : 0;
                        $y = 140 - $h;
                    @endphp
                    <rect x="{{ $x }}" y="{{ $y }}" width="{{ $bw }}" height="{{ max($h, 1) }}" rx="4" fill="#10b981"/>
                    <text x="{{ $x + $bw / 2 }}" y="156" text-anchor="middle" font-size="10" fill="#64748b">{{ $m['label'] }}</text>
                    @if($m['montant'] > 0)
                        <text x="{{ $x + $bw / 2 }}" y="{{ $y - 4 }}" text-anchor="middle" font-size="9" fill="#94a3b8">{{ round($m['montant'] / 1000) }}k</text>
                    @endif
                @endforeach
            </svg>
        </div>
    </div>

    {{-- Top objets + récentes --}}
    <div class="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-2">
        <div class="rounded-xl bg-white p-5 ring-1 ring-slate-200">
            <h2 class="mb-4 text-sm font-medium text-slate-900">Top objets (par montant)</h2>
            @php $maxObj = $topObjets->max('m') ?: 1; @endphp
            @forelse($topObjets as $o)
                <div class="mb-3">
                    <div class="mb-1 flex items-center justify-between text-xs">
                        <span class="text-slate-600">{{ $o->objet }}</span>
                        <span class="text-slate-400">{{ $fcfa($o->m) }} FCFA · {{ $o->n }}</span>
                    </div>
                    <div class="h-2 w-full overflow-hidden rounded-full bg-slate-100">
                        <div class="h-full rounded-full bg-emerald-500" style="width: {{ round($o->m / $maxObj * 100) }}%"></div>
                    </div>
                </div>
            @empty
                <p class="py-8 text-center text-sm text-slate-400">Aucun objet renseigné.</p>
            @endforelse
        </div>

        <div class="rounded-xl bg-white p-5 ring-1 ring-slate-200">
            <div class="mb-4 flex items-center justify-between">
                <h2 class="text-sm font-medium text-slate-900">Demandes récentes</h2>
                <a href="{{ route('demandes.index') }}" class="text-xs font-medium text-emerald-600 hover:text-emerald-700">Voir tout</a>
            </div>
            @forelse($recentes as $d)
                <a href="{{ route('demandes.show', $d) }}" class="-mx-2 flex items-center gap-3 rounded-lg px-2 py-2 hover:bg-slate-50">
                    <div class="min-w-0 flex-1">
                        <div class="truncate text-sm text-slate-800">{{ $d->planteur->nom ?? '—' }}</div>
                        <div class="text-[11px] text-slate-400">{{ $d->reference }} · {{ $d->objet ?? '—' }}</div>
                    </div>
                    <div class="text-right">
                        <div class="text-sm tabular-nums text-slate-800">{{ $fcfa($d->montant) }}</div>
                        <div class="mt-0.5"><x-statut-badge :statut="$d->statut" /></div>
                    </div>
                </a>
            @empty
                <p class="py-8 text-center text-sm text-slate-400">Aucune demande.</p>
            @endforelse
        </div>
    </div>
@endsection