@extends('layouts.exat')
@section('title', 'Remboursement '.$demande->reference)
@section('subtitle', $demande->planteur->nom ?? '')

@section('content')
<div class="mx-auto max-w-4xl space-y-5">
    <div class="mb-1 flex items-center gap-3">
        <a href="{{ route('remboursements.index') }}" class="rounded-lg p-2 text-slate-500 hover:bg-slate-100" aria-label="Retour">
            <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="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"/></svg>
        </a>
        <div class="flex flex-col leading-tight">
            <span class="font-medium tabular-nums text-slate-800">{{ $demande->reference }}</span>
            @if($demande->numero_pret)<span class="text-[11px] text-slate-400">Réf. ext : {{ $demande->numero_pret }}</span>@endif
        </div>
        <x-statut-badge :statut="$demande->statut" />
        <a href="{{ route('demandes.show', $demande) }}" class="ml-auto text-xs font-medium text-emerald-600 hover:text-emerald-700">Voir la demande</a>
    </div>

    <div class="grid grid-cols-3 gap-3">
        <div class="rounded-xl bg-white p-4 ring-1 ring-slate-200"><div class="text-xs text-slate-500">Montant</div><div class="text-xl font-medium text-slate-900">{{ number_format((float) $demande->montant, 0, ',', ' ') }}</div></div>
        <div class="rounded-xl bg-white p-4 ring-1 ring-slate-200"><div class="text-xs text-slate-500">Remboursé</div><div class="text-xl font-medium text-emerald-600">{{ number_format($total, 0, ',', ' ') }}</div></div>
        <div class="rounded-xl bg-white p-4 ring-1 ring-slate-200"><div class="text-xs text-slate-500">Solde</div><div class="text-xl font-medium text-slate-900">{{ number_format($solde, 0, ',', ' ') }}</div></div>
    </div>

    {{-- Saisie d'un remboursement --}}
    {{-- Saisie manuelle désactivée : les remboursements proviennent de la base externe --}}

    {{-- Échéancier --}}
    <section class="rounded-xl bg-white ring-1 ring-slate-200">
        <h2 class="border-b border-slate-100 px-5 py-3 text-sm font-medium text-slate-900">Échéancier</h2>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead><tr class="bg-slate-50 text-left text-xs text-slate-500">
                    <th class="px-5 py-2.5 font-medium">N°</th>
                    <th class="px-5 py-2.5 font-medium">Échéance</th>
                    <th class="px-5 py-2.5 text-right font-medium">Dû</th>
                    <th class="px-5 py-2.5 text-right font-medium">Réglé</th>
                    <th class="px-5 py-2.5 font-medium">Statut</th>
                </tr></thead>
                <tbody>
                    @forelse($demande->echeancier as $e)
                        @php
                            $meta = [
                                'A_VENIR'  => ['À venir', 'bg-slate-100 text-slate-600'],
                                'PARTIEL'  => ['Partiel', 'bg-amber-50 text-amber-700'],
                                'REGLE'    => ['Réglé', 'bg-emerald-50 text-emerald-700'],
                                'EN_RETARD'=> ['En retard', 'bg-rose-50 text-rose-700'],
                            ][$e->statutAffiche()] ?? [$e->statutAffiche(), 'bg-slate-100 text-slate-600'];
                        @endphp
                        <tr class="border-t border-slate-100">
                            <td class="px-5 py-2.5 text-slate-500">{{ $e->numero }}</td>
                            <td class="px-5 py-2.5 text-slate-700">{{ \Illuminate\Support\Carbon::parse($e->date_echeance)->format('d/m/Y') }}</td>
                            <td class="px-5 py-2.5 text-right tabular-nums text-slate-700">{{ number_format((float) $e->montant_du, 0, ',', ' ') }}</td>
                            <td class="px-5 py-2.5 text-right tabular-nums text-slate-700">{{ number_format((float) $e->montant_regle, 0, ',', ' ') }}</td>
                            <td class="px-5 py-2.5"><span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {{ $meta[1] }}">{{ $meta[0] }}</span></td>
                        </tr>
                    @empty
                        <tr><td colspan="5" class="px-5 py-8 text-center text-sm text-slate-400">Aucune échéance.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>

    {{-- Historique des remboursements --}}
    <section class="rounded-xl bg-white ring-1 ring-slate-200">
        <h2 class="border-b border-slate-100 px-5 py-3 text-sm font-medium text-slate-900">Remboursements</h2>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead><tr class="bg-slate-50 text-left text-xs text-slate-500">
                    <th class="px-5 py-2.5 font-medium">Date</th>
                    <th class="px-5 py-2.5 text-right font-medium">Montant</th>
                    <th class="px-5 py-2.5 font-medium">Source</th>
                    <th class="px-5 py-2.5 font-medium">Référence</th>
                </tr></thead>
                <tbody>
                    @forelse($remboursements as $r)
                        <tr class="border-t border-slate-100">
                            <td class="px-5 py-2.5 text-slate-700">{{ \Illuminate\Support\Carbon::parse($r->date_operation)->format('d/m/Y') }}</td>
                            <td class="px-5 py-2.5 text-right tabular-nums text-emerald-700">{{ number_format((float) $r->montant, 0, ',', ' ') }}</td>
                            <td class="px-5 py-2.5"><span class="rounded-full bg-slate-100 px-2 py-0.5 text-[11px] text-slate-600">{{ $r->source }}</span></td>
                            <td class="px-5 py-2.5 text-slate-500">{{ $r->reference_externe ?? '—' }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="4" class="px-5 py-8 text-center text-sm text-slate-400">Aucun remboursement enregistré.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>
</div>
@endsection