@php $fmt = fn ($v) => number_format((float) $v, 0, ',', ' '); @endphp
<div class="flex items-start justify-between border-b border-slate-100 p-4">
    <div>
        <div class="text-[11px] uppercase tracking-wide text-slate-400">Prêt externe</div>
        <div class="text-lg font-semibold tabular-nums text-slate-900">{{ $p['numero_pret'] }}</div>
        <div class="text-sm text-slate-600">{{ $p['nom'] ?: '—' }} <span class="text-slate-400">· {{ $p['code'] }}</span></div>
    </div>
    <button type="button" onclick="fermerDetail()" class="rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600" aria-label="Fermer">
        <svg class="h-5 w-5" 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>
    </button>
</div>

<div class="grid grid-cols-2 gap-x-6 gap-y-3 p-4 text-sm sm:grid-cols-3">
    <div><div class="text-[11px] text-slate-400">Montant du prêt</div><div class="tabular-nums text-slate-800">{{ $fmt($p['montant']) }} FCFA</div></div>
    <div><div class="text-[11px] text-slate-400">Durée</div><div class="text-slate-800">{{ $p['nb_mois'] }} mois</div></div>
    <div><div class="text-[11px] text-slate-400">Début prélèvement</div><div class="text-slate-800">{{ $p['date_debut'] ? \Illuminate\Support\Carbon::parse($p['date_debut'])->format('d/m/Y') : '—' }}</div></div>
    <div><div class="text-[11px] text-slate-400">Mode</div><div class="text-slate-800">{{ $p['mode'] ?: '—' }}</div></div>
    <div><div class="text-[11px] text-slate-400">Réf. paiement</div><div class="text-slate-800">{{ $p['ref_paiement'] ?: '—' }}</div></div>
    <div><div class="text-[11px] text-slate-400">Remboursé / Solde</div><div class="tabular-nums text-slate-800">{{ $fmt($sommeRemb) }} <span class="text-slate-400">/</span> <span class="{{ $solde < 0 ? 'text-red-600' : '' }}">{{ $fmt($solde) }}</span></div></div>
</div>

<div class="px-4 pb-2 text-[11px] font-medium uppercase tracking-wide text-slate-400">Échéancier ({{ count($echeances) }})</div>
<div class="max-h-64 overflow-auto px-4 pb-4">
    <table class="w-full text-sm">
        <thead><tr class="text-left text-xs text-slate-400">
            <th class="py-1.5 font-medium">N°</th>
            <th class="py-1.5 font-medium">Date d'échéance</th>
            <th class="py-1.5 text-right font-medium">Montant dû</th>
        </tr></thead>
        <tbody>
            @forelse($echeances as $i => $e)
                <tr class="border-t border-slate-100">
                    <td class="py-1.5 tabular-nums text-slate-500">{{ $i + 1 }}</td>
                    <td class="py-1.5 text-slate-700">{{ $e['date'] ? \Illuminate\Support\Carbon::parse($e['date'])->format('d/m/Y') : '—' }}</td>
                    <td class="py-1.5 text-right tabular-nums text-slate-800">{{ $fmt($e['montant']) }}</td>
                </tr>
            @empty
                <tr><td colspan="3" class="py-4 text-center text-xs text-slate-400">Aucune échéance externe pour ce prêt (échéancier linéaire à l'import).</td></tr>
            @endforelse
        </tbody>
    </table>
</div>

<div class="px-4 pb-2 text-[11px] font-medium uppercase tracking-wide text-slate-400">Remboursements ({{ count($rembs) }})</div>
<div class="max-h-48 overflow-auto px-4 pb-4">
    <table class="w-full text-sm">
        <thead><tr class="text-left text-xs text-slate-400">
            <th class="py-1.5 font-medium">Date</th>
            <th class="py-1.5 text-right font-medium">Montant</th>
        </tr></thead>
        <tbody>
            @forelse($rembs as $r)
                <tr class="border-t border-slate-100">
                    <td class="py-1.5 text-slate-700">{{ $r['date'] ? \Illuminate\Support\Carbon::parse($r['date'])->format('d/m/Y') : '—' }}</td>
                    <td class="py-1.5 text-right tabular-nums text-slate-800">{{ $fmt($r['montant']) }}</td>
                </tr>
            @empty
                <tr><td colspan="2" class="py-4 text-center text-xs text-slate-400">Aucun remboursement comptabilisé.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>