@php
    $d = $demande ?? null;
    $selP = $d ? $planteurs->firstWhere('id', $d->planteur_id) : null;

    $planteursData = $planteurs->mapWithKeys(fn ($p) => [$p->id => [
        'nom' => $p->nom, 'code' => $p->code,
        'cni' => $p->numero_cni,
        'naissance' => optional($p->date_naissance)->format('Y-m-d'),
        'lieu' => $p->lieu_naissance, 'localite' => $p->localite,
        'plantation' => $p->localisation_plantation,
        'superficie' => $p->superficie_saignee_ha,
        'tel_p' => $p->telephone_principal ?? $p->telephone,
        'tel_s' => $p->telephone_secondaire,
    ]]);

    $pontsDispo = \App\Models\PontBascule::where('actif', true)->orderBy('nom')->get();
    $pontsSel = old('pont_ids', $d?->pontsBascules->pluck('id')->all() ?? []);
    $perso = (bool) old('remboursement_personnalise', $d?->remboursement_personnalise ?? false);
    $echInit = old('echeancier', $d?->echeancier_json ?? []);
@endphp

<div class="space-y-5">
    {{-- Section 1 : identification --}}
    <section class="rounded-xl bg-white p-5 ring-1 ring-slate-200">
        <div class="mb-4 flex items-center gap-2">
            <svg class="h-5 w-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0M4.5 20.25a7.5 7.5 0 0 1 15 0"/></svg>
            <h2 class="text-sm font-medium text-slate-900">Identification du planteur</h2>
        </div>

        {{-- Recherche planteur (combobox) --}}
        <div class="mb-3">
            <label class="mb-1 block text-xs text-slate-500">Planteur</label>
            <div class="relative" id="planteur-combo" data-url="{{ url('/planteurs/recherche-externe') }}">
                <input type="hidden" name="planteur_id" id="planteur-id" value="{{ old('planteur_id', $d?->planteur_id ?? '') }}">
                <input type="hidden" name="planteur_code" id="planteur-code" value="{{ old('planteur_code', $selP?->code) }}">
                <input type="hidden" name="planteur_nom" id="planteur-nom" value="{{ old('planteur_nom', $selP?->nom) }}">
                <input type="text" id="planteur-search" autocomplete="off" placeholder="Rechercher par nom ou code…" value="{{ $selP ? trim(($selP->code ?? '').' - '.($selP->nom ?? '')) : '' }}"
                       value="{{ $selP ? $selP->nom.' — '.$selP->code : '' }}"
                       class="w-full rounded-lg border-slate-200 pr-9 text-sm">
                <svg class="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>
                <ul id="planteur-list" class="absolute z-30 mt-1 hidden max-h-60 w-full overflow-auto rounded-lg border border-slate-200 bg-white py-1 text-sm shadow-lg"></ul>
            </div>
        </div>

        {{-- Identité éditable --}}
        <div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
            <div>
                <label class="mb-1 block text-[11px] text-slate-400">N° CNI</label>
                <input id="f-cni" name="numero_cni" value="{{ old('numero_cni', $selP?->numero_cni) }}" class="w-full rounded-lg border-slate-200 text-sm">
            </div>
            <div>
                <label class="mb-1 block text-[11px] text-slate-400">Date de naissance</label>
                <input id="f-naissance" type="date" name="date_naissance" value="{{ old('date_naissance', optional($selP?->date_naissance)->format('Y-m-d')) }}" class="w-full rounded-lg border-slate-200 text-sm">
            </div>
            <div>
                <label class="mb-1 block text-[11px] text-slate-400">Lieu de naissance</label>
                <input id="f-lieu" name="lieu_naissance" value="{{ old('lieu_naissance', $selP?->lieu_naissance) }}" class="w-full rounded-lg border-slate-200 text-sm">
            </div>
            <div>
                <label class="mb-1 block text-[11px] text-slate-400">Localité</label>
                <input id="f-localite" name="localite" value="{{ old('localite', $selP?->localite) }}" class="w-full rounded-lg border-slate-200 text-sm">
            </div>
            <div>
                <label class="mb-1 block text-[11px] text-slate-400">Localisation plantation</label>
                <input id="f-plantation" name="localisation_plantation" value="{{ old('localisation_plantation', $selP?->localisation_plantation) }}" class="w-full rounded-lg border-slate-200 text-sm">
            </div>
            <div>
                <label class="mb-1 block text-[11px] text-slate-400">Superficie saignée (Ha)</label>
                <input id="f-superficie" type="number" step="0.01" name="superficie_saignee_ha" value="{{ old('superficie_saignee_ha', $selP?->superficie_saignee_ha) }}" class="w-full rounded-lg border-slate-200 text-sm">
            </div>
            <div>
                <label class="mb-1 block text-[11px] text-slate-400">N° Tél principal</label>
                <input id="f-tel-p" name="telephone_principal" value="{{ old('telephone_principal', $selP?->telephone_principal ?? $selP?->telephone) }}" class="w-full rounded-lg border-slate-200 text-sm">
            </div>
            <div>
                <label class="mb-1 block text-[11px] text-slate-400">N° Tél secondaire</label>
                <input id="f-tel-s" name="telephone_secondaire" value="{{ old('telephone_secondaire', $selP?->telephone_secondaire) }}" class="w-full rounded-lg border-slate-200 text-sm">
            </div>
        </div>
        <p class="mt-2 flex items-center gap-1.5 text-[11px] text-slate-400">
            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"/></svg>
            Pré-remplie depuis la fiche planteur ; vos modifications mettent à jour cette fiche.
        </p>
    </section>

    {{-- Section 2 : détails --}}
    <section class="rounded-xl bg-white p-5 ring-1 ring-slate-200">
        <div class="mb-4 flex items-center gap-2">
            <svg class="h-5 w-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z"/></svg>
            <h2 class="text-sm font-medium text-slate-900">Détails de l'avance</h2>
        </div>
        <div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
            <div>
                <label class="mb-1 block text-[11px] text-slate-400">Montant demandé (FCFA)</label>
                <input id="montant" type="number" name="montant" value="{{ old('montant', $d?->montant ?? '') }}" class="w-full rounded-lg border-slate-200 text-sm" required>
            </div>
            <div>
                <label class="mb-1 block text-[11px] text-slate-400">Objet</label>
                <input name="objet" value="{{ old('objet', $d?->objet ?? '') }}" list="objets" class="w-full rounded-lg border-slate-200 text-sm">
                <datalist id="objets">
                    @foreach(['ÉQUIPEMENT','TRICYCLE','MOTO','SCOLARITÉ','SANTÉ','COMMERCE','ÉLEVAGE','CONSTRUCTION DE MAISON','BESOIN PERSONNEL'] as $o)<option value="{{ $o }}">@endforeach
                </datalist>
            </div>
            <div>
                <label class="mb-1 block text-[11px] text-slate-400">Mode de paiement</label>
                <select name="mode_paiement" class="w-full rounded-lg border-slate-200 text-sm">
                    <option value="">—</option>
                    @foreach(\App\Models\DemandePret::MODES_PAIEMENT as $m)
                        <option value="{{ $m }}" @selected(old('mode_paiement', $d?->mode_paiement ?? '') === $m)>{{ ucfirst(strtolower($m)) }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="mb-1 block text-[11px] text-slate-400">Usine de réception</label>
                <select name="usine_reception" class="w-full rounded-lg border-slate-200 text-sm">
                    <option value="">—</option>
                    @foreach(\App\Models\DemandePret::USINES_LIB as $code => $lib)
                        <option value="{{ $code }}" @selected(old('usine_reception', $d?->usine_reception ?? '') === $code)>{{ $lib }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="mb-1 block text-[11px] text-slate-400">N° Wave</label>
                <input name="numero_wave" value="{{ old('numero_wave', $d?->numero_wave ?? '') }}" class="w-full rounded-lg border-slate-200 text-sm">
            </div>
            <div>
                <label class="mb-1 block text-[11px] text-slate-400">Durée (mois)</label>
                <input id="duree" type="number" name="duree_mois" value="{{ old('duree_mois', $d?->duree_mois ?? 6) }}" min="1" max="24" class="w-full rounded-lg border-slate-200 text-sm" required>
            </div>
            <div>
                <label class="mb-1 block text-[11px] text-slate-400">Revenu mensuel estimé</label>
                <input type="number" name="revenu_mensuel_estime" value="{{ old('revenu_mensuel_estime', $d?->revenu_mensuel_estime ?? '') }}" class="w-full rounded-lg border-slate-200 text-sm">
            </div>
        </div>

        {{-- Remboursable / mois (mode automatique) --}}
        <div id="remb-auto" class="mt-3 flex items-center justify-between gap-3 rounded-lg bg-emerald-50 px-4 py-3">
            <div class="text-sm text-emerald-700">Montant remboursable / mois <span class="text-slate-400">(montant ÷ durée)</span></div>
            <div id="remb" class="text-lg font-medium tabular-nums text-emerald-700">—</div>
        </div>

        {{-- Pont bascule rattaché --}}
        <div class="mt-3">
            @include('partials._ponts-multi', ['pontsDispo' => $pontsDispo, 'pontsSel' => $pontsSel])
        </div>

        {{-- Personnalisation du remboursement --}}
        <div class="mt-3">
            <label class="inline-flex items-center gap-2 text-sm text-slate-700">
                <input type="hidden" name="remboursement_personnalise" value="0">
                <input id="perso-toggle" type="checkbox" name="remboursement_personnalise" value="1" @checked($perso) class="rounded border-slate-300 text-emerald-600 focus:ring-emerald-500">
                Personnaliser le remboursement (montant et date par échéance)
            </label>
        </div>

        <div id="echeancier-section" class="{{ $perso ? '' : 'hidden' }} mt-3 rounded-lg border border-slate-200">
            <div class="flex items-center justify-between border-b border-slate-100 px-4 py-2">
                <span class="text-xs font-medium text-slate-600">Échéancier personnalisé</span>
                <span class="text-xs text-slate-500">Total : <span id="ech-total" class="font-medium tabular-nums">0</span> / <span id="ech-cible" class="tabular-nums">0</span> FCFA <span id="ech-ok" class="ml-1"></span></span>
            </div>
            <table class="w-full text-sm">
                <thead><tr class="text-left text-[11px] text-slate-400">
                    <th class="px-4 py-2 font-medium">N°</th>
                    <th class="px-4 py-2 font-medium">Date d'échéance</th>
                    <th class="px-4 py-2 font-medium">Montant (FCFA)</th>
                </tr></thead>
                <tbody id="echeancier-grid"></tbody>
            </table>
        </div>

        <div class="mt-3">
            <label class="mb-1 block text-[11px] text-slate-400">Objet / commentaire</label>
            <textarea name="commentaire" rows="2" class="w-full rounded-lg border-slate-200 text-sm">{{ old('commentaire', $d?->commentaire ?? '') }}</textarea>
        </div>
    </section>
</div>

@push('scripts')
<script>
(function () {
    var planteurs = @json($planteursData);
    var echInit = @json(array_values($echInit ?: []));

    // ---------- Combobox planteur (référentiel externe) ----------
    var hidden = document.getElementById('planteur-id');
    var codeH  = document.getElementById('planteur-code');
    var nomH   = document.getElementById('planteur-nom');
    var search = document.getElementById('planteur-search');
    var list   = document.getElementById('planteur-list');
    var combo  = document.getElementById('planteur-combo');
    var url    = combo.getAttribute('data-url');
    var deb    = null;

    function set(elId, v) { var el = document.getElementById(elId); if (el) el.value = (v === null || v === undefined) ? '' : v; }

    function choisir(item) {
        codeH.value = item.value;   // No_
        nomH.value  = item.nom;     // Name
        hidden.value = '';          // sélection externe : planteur local résolu par code
        search.value = item.label;  // "No_ - Name"
        set('f-tel-p', item.phone); // Phone No_ -> N° Tél principal
        set('f-tel-s', item.mobile);// Mobile Phone No_ -> N° Tél secondaire
        list.classList.add('hidden');
    }

    function rendre(items) {
        list.innerHTML = '';
        if (!items || !items.length) {
            var vide = document.createElement('li');
            vide.className = 'px-3 py-2 text-slate-400';
            vide.textContent = 'Aucun planteur';
            list.appendChild(vide);
            list.classList.remove('hidden');
            return;
        }
        items.forEach(function (it) {
            var li = document.createElement('li');
            li.className = 'cursor-pointer px-3 py-2 hover:bg-emerald-50';
            li.textContent = it.label;
            li.addEventListener('mousedown', function (e) { e.preventDefault(); choisir(it); });
            list.appendChild(li);
        });
        list.classList.remove('hidden');
    }

    function chercher(q) {
        fetch(url + '?q=' + encodeURIComponent(q), { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function (r) { return r.json(); })
            .then(rendre)
            .catch(function () {
                list.innerHTML = '<li class="px-3 py-2 text-red-500">Référentiel indisponible</li>';
                list.classList.remove('hidden');
            });
    }

    search.addEventListener('focus', function () { chercher(search.value.trim()); });
    search.addEventListener('input', function () {
        hidden.value = ''; codeH.value = ''; nomH.value = '';
        clearTimeout(deb);
        var q = search.value.trim();
        deb = setTimeout(function () { chercher(q); }, 250);
    });
    document.addEventListener('click', function (e) { if (!combo.contains(e.target)) list.classList.add('hidden'); });

    // ---------- Remboursable / mois + échéancier ----------
    var montant = document.getElementById('montant');
    var duree = document.getElementById('duree');
    var remb = document.getElementById('remb');
    var rembAuto = document.getElementById('remb-auto');
    var toggle = document.getElementById('perso-toggle');
    var section = document.getElementById('echeancier-section');
    var grid = document.getElementById('echeancier-grid');
    var totalEl = document.getElementById('ech-total');
    var cibleEl = document.getElementById('ech-cible');
    var okEl = document.getElementById('ech-ok');

    function fmt(n) { return Math.round(n).toLocaleString('fr-FR').replace(/\u202f/g, ' '); }
    function calcAuto() {
        var m = parseFloat(montant.value) || 0, d = parseInt(duree.value, 10) || 0;
        remb.textContent = d > 0 && m > 0 ? fmt(m / d) + ' FCFA' : '—';
    }
    function addMonths(base, k) {
        var dt = new Date(base.getTime()); dt.setMonth(dt.getMonth() + k);
        return dt.toISOString().slice(0, 10);
    }
    function currentValues() {
        var rows = grid.querySelectorAll('tr');
        var vals = [];
        rows.forEach(function (r) {
            var dd = r.querySelector('input[type=date]'), mm = r.querySelector('input[type=number]');
            vals.push({ date: dd ? dd.value : '', montant: mm ? mm.value : '' });
        });
        return vals;
    }
    function updateTotal() {
        var t = 0;
        grid.querySelectorAll('input[type=number]').forEach(function (i) { t += parseFloat(i.value) || 0; });
        var cible = parseFloat(montant.value) || 0;
        totalEl.textContent = fmt(t); cibleEl.textContent = fmt(cible);
        okEl.textContent = (cible > 0 && Math.round(t) === Math.round(cible)) ? '✓' : '';
        okEl.className = 'ml-1 ' + ((cible > 0 && Math.round(t) === Math.round(cible)) ? 'text-emerald-600' : 'text-rose-500');
    }
    function buildGrid(preset) {
        var n = parseInt(duree.value, 10) || 0;
        var m = parseFloat(montant.value) || 0;
        var defMontant = n > 0 ? Math.round(m / n) : 0;
        var base = new Date();
        grid.innerHTML = '';
        for (var i = 1; i <= n; i++) {
            var pv = preset && preset[i - 1] ? preset[i - 1] : null;
            var tr = document.createElement('tr');
            tr.className = 'border-t border-slate-100';
            tr.innerHTML =
                '<td class="px-4 py-2 text-slate-500">' + i + '</td>' +
                '<td class="px-4 py-2"><input type="date" name="echeancier[' + i + '][date]" value="' + (pv && pv.date ? pv.date : addMonths(base, i)) + '" class="rounded-lg border-slate-200 text-sm"></td>' +
                '<td class="px-4 py-2"><input type="number" name="echeancier[' + i + '][montant]" value="' + (pv && (pv.montant || pv.montant === 0) ? pv.montant : defMontant) + '" class="w-40 rounded-lg border-slate-200 text-sm"></td>';
            grid.appendChild(tr);
        }
        grid.querySelectorAll('input[type=number]').forEach(function (i) { i.addEventListener('input', updateTotal); });
        updateTotal();
    }
    function majMode() {
        if (toggle.checked) {
            section.classList.remove('hidden');
            rembAuto.classList.add('hidden');
            if (!grid.children.length) buildGrid(echInit && echInit.length ? echInit : null);
            updateTotal();
        } else {
            section.classList.add('hidden');
            rembAuto.classList.remove('hidden');
            calcAuto();
        }
    }

    montant.addEventListener('input', function () { calcAuto(); updateTotal(); });
    duree.addEventListener('input', function () {
        calcAuto();
        if (toggle.checked) buildGrid(currentValues()); // conserve les saisies existantes
    });
    toggle.addEventListener('change', majMode);

    // ---------- Contrôle à l'enregistrement / soumission ----------
    // Si le remboursement est personnalisé et que la somme ne correspond pas au montant demandé,
    // on propose de corriger la DERNIÈRE échéance (montant saisi -> montant corrigé).
    var form = montant.closest('form');
    if (form) form.addEventListener('submit', function (e) {
        if (!toggle.checked) return;
        var champs = grid.querySelectorAll('input[type=number]');
        if (!champs.length) return;

        // Contrôle 1 : dates strictement croissantes
        var dates = grid.querySelectorAll('input[type=date]');
        var prec = null;
        for (var j = 0; j < dates.length; j++) {
            var val = dates[j].value;
            if (!val) {
                e.preventDefault();
                alert("Échéance n°" + (j + 1) + " : la date est obligatoire.");
                dates[j].focus();
                return;
            }
            if (prec !== null && val <= prec) {
                e.preventDefault();
                alert("Les dates d'échéance doivent être croissantes.\n\n"
                    + "Échéance n°" + (j + 1) + " (" + val + ") doit être postérieure à "
                    + "l'échéance n°" + j + " (" + prec + ").");
                dates[j].focus();
                return;
            }
            prec = val;
        }

        var total = 0;
        champs.forEach(function (i) { total += parseFloat(i.value) || 0; });
        var cible = parseFloat(montant.value) || 0;
        if (cible <= 0) return;
        if (Math.round(total) === Math.round(cible)) return; // déjà équilibré

        var last = champs[champs.length - 1];
        var lastVal = parseFloat(last.value) || 0;
        var corrige = Math.round(lastVal + (cible - total));

        if (corrige < 0) {
            e.preventDefault();
            alert("La somme des échéances (" + fmt(total) + " FCFA) dépasse le montant demandé ("
                + fmt(cible) + " FCFA).\nCorrigez les montants manuellement avant d'enregistrer.");
            return;
        }

        var ok = confirm(
            "La somme des échéances est de " + fmt(total) + " FCFA, "
            + "mais le montant demandé est " + fmt(cible) + " FCFA.\n\n"
            + "Corriger la dernière échéance (n°" + champs.length + ") :\n"
            + "  • montant saisi   : " + fmt(lastVal) + " FCFA\n"
            + "  • montant corrigé : " + fmt(corrige) + " FCFA ?"
        );
        if (ok) {
            last.value = corrige;
            updateTotal();
            // le formulaire poursuit sa soumission avec le montant corrigé
        } else {
            e.preventDefault(); // l'utilisateur corrige lui-même
        }
    });

    calcAuto();
    if (toggle.checked) { buildGrid(echInit && echInit.length ? echInit : null); majMode(); }
})();
</script>
@endpush