@extends('layouts.exat')
@section('title', 'Import des prêts — Aperçu')
@section('subtitle', 'Lecture du référentiel externe (aucune écriture)')

@section('content')
@if(session('error'))
    <div class="mb-4 rounded-lg bg-red-50 px-4 py-3 text-sm text-red-700">{{ session('error') }}</div>
@endif

@if($erreur)
    <div class="rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700">{{ $erreur }}</div>
@else
    <div class="sm:sticky sm:top-16 sm:z-20 -mx-4 border-b border-slate-200 bg-slate-50/95 px-4 pb-3 pt-4 backdrop-blur sm:-mx-6 sm:px-6">
    {{-- Statistiques --}}
    <div class="mb-3 grid gap-3 sm:grid-cols-4">
        <div class="rounded-xl bg-white p-4 ring-1 ring-slate-200">
            <div class="text-[11px] text-slate-400">Prêts (filtrés)</div>
            <div class="mt-1 text-2xl font-semibold text-slate-900">{{ $stats['nb'] }}</div>
        </div>
        <div class="rounded-xl bg-white p-4 ring-1 ring-slate-200">
            <div class="text-[11px] text-slate-400">À importer / Importés / À arbitrer</div>
            <div class="mt-1 text-2xl font-semibold text-slate-900">{{ $stats['nouveaux'] }} <span class="text-sm font-normal text-slate-400">/</span> {{ $stats['deja'] }} <span class="text-sm font-normal text-slate-400">/</span> <span class="text-amber-600">{{ $stats['arbitrer'] }}</span></div>
        </div>
        <div class="rounded-xl bg-white p-4 ring-1 ring-slate-200">
            <div class="text-[11px] text-slate-400">Total prêts</div>
            <div class="mt-1 text-xl font-semibold text-slate-900">{{ number_format($stats['total_pret'], 0, ',', ' ') }} <span class="text-xs font-normal text-slate-400">FCFA</span></div>
        </div>
        <div class="rounded-xl bg-white p-4 ring-1 ring-slate-200">
            <div class="text-[11px] text-slate-400">Total remboursé</div>
            <div class="mt-1 text-xl font-semibold text-slate-900">{{ number_format($stats['total_remb'], 0, ',', ' ') }} <span class="text-xs font-normal text-slate-400">FCFA</span></div>
        </div>
    </div>

    {{-- Filtres + outils --}}
        {{-- Filtres --}}
        <form method="GET" class="flex flex-wrap items-end gap-2">
            <div class="min-w-[180px] flex-1">
                <label class="mb-1 block text-[11px] text-slate-400">Recherche</label>
                <input type="text" name="q" value="{{ request('q') }}" placeholder="N° prêt, planteur ou code" class="h-9 w-full rounded-lg border-slate-200 text-sm">
            </div>
            <div>
                <label class="mb-1 block text-[11px] text-slate-400">Mois de prélèvement</label>
                <select name="nb_mois" class="h-9 rounded-lg border-slate-200 text-sm">
                    <option value="">Tous</option>
                    @foreach($moisDispo as $m)
                        <option value="{{ $m }}" @selected((string) request('nb_mois') === (string) $m)>{{ $m }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="mb-1 block text-[11px] text-slate-400">Statut</label>
                <select name="statut" class="h-9 rounded-lg border-slate-200 text-sm">
                    <option value="">Tous</option>
                    <option value="EN_REMBOURSEMENT" @selected(request('statut')==='EN_REMBOURSEMENT')>En remboursement</option>
                    <option value="SOLDEE" @selected(request('statut')==='SOLDEE')>Soldée</option>
                </select>
            </div>
            <div>
                <label class="mb-1 block text-[11px] text-slate-400">État</label>
                <select name="etat" class="h-9 rounded-lg border-slate-200 text-sm">
                    <option value="">Tous</option>
                    <option value="nouveau" @selected(request('etat')==='nouveau')>À importer</option>
                    <option value="importe" @selected(request('etat')==='importe')>Importé</option>
                    <option value="arbitrer" @selected(request('etat')==='arbitrer')>À arbitrer</option>
                </select>
            </div>
            <div>
                <label class="mb-1 block text-[11px] text-slate-400">Date du prêt — du</label>
                <input type="date" name="du" value="{{ request('du') }}" class="h-9 rounded-lg border-slate-200 text-sm">
            </div>
            <div>
                <label class="mb-1 block text-[11px] text-slate-400">au</label>
                <input type="date" name="au" value="{{ request('au') }}" class="h-9 rounded-lg border-slate-200 text-sm">
            </div>
            <div>
                <label class="mb-1 block text-[11px] text-slate-400">Par page</label>
                <select name="par_page" class="h-9 rounded-lg border-slate-200 text-sm">
                    @foreach(['25','50','100','tous'] as $pp)
                        <option value="{{ $pp }}" @selected((string) request('par_page','25') === $pp)>{{ $pp === 'tous' ? 'Tous' : $pp }}</option>
                    @endforeach
                </select>
            </div>
            <button class="inline-flex h-9 items-center rounded-lg border border-slate-200 bg-white px-3 text-sm text-slate-700 hover:bg-slate-50">Filtrer</button>
            <a href="{{ route('import-prets.apercu') }}" class="inline-flex h-9 items-center rounded-lg px-2 text-sm text-slate-500 hover:text-slate-700">Réinitialiser</a>
                        <div class="ml-auto flex items-end gap-2">
                    <a href="{{ route('export.import-prets', array_merge(['format' => 'xlsx'], request()->query())) }}" title="Exporter en Excel"
                       class="inline-flex h-9 items-center gap-1.5 rounded-lg border border-emerald-200 bg-emerald-50 px-3 text-sm font-medium text-emerald-700 hover:bg-emerald-100">
                        <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="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>Excel
                    </a>
                    <a href="{{ route('export.import-prets', array_merge(['format' => 'pdf'], request()->query())) }}" title="Exporter en PDF"
                       class="inline-flex h-9 items-center gap-1.5 rounded-lg border border-red-200 bg-red-50 px-3 text-sm font-medium text-red-700 hover:bg-red-100">
                        <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>PDF
                    </a>
                </div>
            </form>

        {{-- Outils d'import --}}
        <div class="mt-3 flex items-center justify-between border-t border-slate-200 pt-3">
            <label class="inline-flex items-center gap-2 text-sm text-slate-600">
                <input type="checkbox" id="tout" onclick="document.querySelectorAll('.chk').forEach(c=>c.checked=this.checked)" class="rounded border-slate-300 text-emerald-600 focus:ring-emerald-500">
                Tout sélectionner (cette page){{ request('par_page')==='tous' ? ' — toutes' : '' }}
            </label>
            <button type="submit" form="import-form"
                    class="inline-flex h-9 items-center gap-2 rounded-lg bg-emerald-600 px-4 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="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg>
                Importer la sélection
            </button>
        </div>
    </div>

    {{-- Tableau (dans le formulaire d'import) --}}
    <form method="POST" action="{{ route('import-prets.executer') }}" id="import-form"
          onsubmit="return confirm('Importer les prêts sélectionnés ? Cela crée/actualise les demandes, contrats (Word/PDF) et remboursements.')">
        @csrf
        <div class="mt-3 overflow-hidden rounded-xl bg-white ring-1 ring-slate-200">
            <div class="overflow-x-auto">
                <table class="w-full min-w-[1040px] text-sm">
                    <thead><tr class="bg-slate-50 text-left text-xs text-slate-500">
                        <th class="px-3 py-3"></th>
                        @include('partials.th-tri', ['col' => 'numero', 'label' => 'N° Prêt'])
                        @include('partials.th-tri', ['col' => 'date', 'label' => 'Date du prêt'])
                        @include('partials.th-tri', ['col' => 'planteur', 'label' => 'Planteur'])
                        @include('partials.th-tri', ['col' => 'mois', 'label' => 'Mois', 'align' => 'center'])
                        @include('partials.th-tri', ['col' => 'montant', 'label' => 'Montant prêt', 'align' => 'right'])
                        @include('partials.th-tri', ['col' => 'nb_remb', 'label' => 'Nb remb.', 'align' => 'center'])
                        @include('partials.th-tri', ['col' => 'rembourse', 'label' => 'Remboursé', 'align' => 'right'])
                        @include('partials.th-tri', ['col' => 'solde', 'label' => 'Solde', 'align' => 'right'])
                        @include('partials.th-tri', ['col' => 'statut', 'label' => 'Statut'])
                        @include('partials.th-tri', ['col' => 'etat', 'label' => 'Correspondance / Action'])
                    </tr></thead>
                    <tbody>
                        @forelse($page as $l)
                            <tr class="border-t border-slate-100 hover:bg-slate-50/60">
                                <td class="px-3 py-3">
                                    @if($l['etat'] === 'arbitrer')
                                        <select name="decision[{{ $l['numero_pret'] }}]" form="import-form" class="w-44 rounded-lg border-amber-300 bg-amber-50 text-xs">
                                            <option value="">— Ne rien faire —</option>
                                            <option value="creer">Créer une nouvelle</option>
                                            @foreach($l['candidats'] as $c)
                                                <option value="rattacher:{{ $c['id'] }}">Rattacher à {{ $c['reference'] }}</option>
                                            @endforeach
                                        </select>
                                    @else
                                        <input type="checkbox" class="chk rounded border-slate-300 text-emerald-600 focus:ring-emerald-500" name="numeros[]" value="{{ $l['numero_pret'] }}">
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-4 py-3">
                                    <div class="font-medium tabular-nums text-slate-800">{{ $l['numero_pret'] }}</div>
                                    <button type="button" onclick="ouvrirDetail('{{ route('import-prets.detail', $l['numero_pret']) }}')" class="text-[11px] text-emerald-600 hover:text-emerald-700 hover:underline">Détails</button>
                                </td>
                                <td class="whitespace-nowrap px-4 py-3 text-slate-500">{{ $l['date_debut'] ? \Illuminate\Support\Carbon::parse($l['date_debut'])->format('d/m/Y') : '—' }}</td>
                                <td class="px-4 py-3"><div class="text-slate-800">{{ $l['nom'] ?: '—' }}</div><div class="text-[11px] text-slate-400">{{ $l['code'] }}</div></td>
                                <td class="px-4 py-3 text-center tabular-nums text-slate-600">{{ $l['nb_mois'] }}</td>
                                <td class="whitespace-nowrap px-4 py-3 text-right tabular-nums text-slate-800">{{ number_format($l['montant'], 0, ',', ' ') }}</td>
                                <td class="px-4 py-3 text-center tabular-nums text-slate-600">{{ $l['nb_remb'] }}</td>
                                <td class="whitespace-nowrap px-4 py-3 text-right tabular-nums text-slate-600">{{ number_format($l['somme_remb'], 0, ',', ' ') }}</td>
                                <td class="whitespace-nowrap px-4 py-3 text-right tabular-nums font-medium {{ $l['solde'] < 0 ? 'text-red-600' : 'text-slate-800' }}">{{ number_format($l['solde'], 0, ',', ' ') }}</td>
                                <td class="px-4 py-3">
                                    @if($l['statut'] === 'SOLDEE')
                                        <span class="inline-flex items-center rounded-full bg-emerald-50 px-2 py-0.5 text-[11px] font-medium text-emerald-700">Soldée</span>
                                    @else
                                        <span class="inline-flex items-center rounded-full bg-sky-50 px-2 py-0.5 text-[11px] font-medium text-sky-700">En remboursement</span>
                                    @endif
                                </td>
                                <td class="px-4 py-3">
                                    @if($l['etat'] === 'importe')
                                        <span class="inline-flex items-center gap-1 text-[11px] font-medium text-emerald-600"><svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2.2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/></svg>Importé</span>
                                    @elseif($l['etat'] === 'arbitrer')
                                        <span class="inline-flex items-center rounded-full bg-amber-50 px-2 py-0.5 text-[11px] font-medium text-amber-700">À arbitrer</span>
                                        <div class="mt-0.5 text-[11px] text-slate-400">Corresp. : {{ collect($l['candidats'])->pluck('reference')->join(', ') }}</div>
                                    @else
                                        <span class="text-[11px] text-slate-400">Nouveau</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="11" class="px-4 py-12 text-center text-sm text-slate-400">Aucun prêt ne correspond aux filtres.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if($page && $page->total() > 0)
                <div class="border-t border-slate-100 px-4 py-3">
                    @include('partials.pagination', ['paginator' => $page])
                </div>
            @endif
        </div>
    </form>

    <p class="mt-3 text-[11px] text-slate-400">Un solde négatif signale une incohérence (remboursements &gt; montant du prêt) à vérifier avant import. « Tout sélectionner » ne coche que la page courante. Les lignes <b>À arbitrer</b> (un prêt qui ressemble à une demande interne non soldée : même planteur, montant et durée) demandent un choix explicite — <i>Rattacher</i> ou <i>Créer</i> ; sans choix, la ligne est ignorée.</p>
@endif

{{-- Pop-up détail du prêt --}}
<div id="detail-modal" class="fixed inset-0 z-40 hidden items-center justify-center bg-slate-900/40 p-4" onclick="if(event.target===this)fermerDetail()">
    <div class="max-h-[85vh] w-full max-w-2xl overflow-auto rounded-xl bg-white shadow-xl">
        <div id="detail-content"></div>
    </div>
</div>
<script>
    function ouvrirDetail(url) {
        var m = document.getElementById('detail-modal');
        var c = document.getElementById('detail-content');
        c.innerHTML = '<div class="p-6 text-sm text-slate-400">Chargement…</div>';
        m.classList.remove('hidden'); m.classList.add('flex');
        fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function (r) { return r.text(); })
            .then(function (h) { c.innerHTML = h; })
            .catch(function () { c.innerHTML = '<div class="p-6 text-sm text-red-600">Erreur de chargement.</div>'; });
    }
    function fermerDetail() {
        var m = document.getElementById('detail-modal');
        m.classList.add('hidden'); m.classList.remove('flex');
    }
    document.addEventListener('keydown', function (e) { if (e.key === 'Escape') fermerDetail(); });
</script>
@endsection