@extends('layouts.app')

@section('title', 'Encaisser')
@section('heading', 'Encaissement')
@section('subheading', $enrollment->student->fullName() . ' — ' . $enrollment->schoolClass->name)

@section('content')
    <div class="mb-3">
        <a href="{{ route('students.show', $enrollment) }}" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>Retour au dossier
        </a>
    </div>

    @if ($outstanding->isEmpty())
        <div class="alert alert-success">
            <i class="bi bi-check-circle me-2"></i>
            <strong>{{ $enrollment->student->fullName() }}</strong> est à jour :
            il n'y a plus rien à encaisser pour cette année scolaire.
        </div>
    @else
        <form method="POST" action="{{ route('payments.store', $enrollment) }}" novalidate id="paiement">
            @csrf
            {{-- Clé d'idempotence : rejouer la soumission (double clic, reprise
                 réseau) renvoie le même reçu au lieu d'en créer un second. --}}
            <input type="hidden" name="idempotency_key" value="{{ $idempotencyKey }}">

            <div class="row g-3">
                {{-- Échéances dues --}}
                <div class="col-lg-7">
                    <div class="card">
                        <div class="card-header bg-white d-flex justify-content-between align-items-center">
                            <span class="fw-semibold"><i class="bi bi-list-check me-2"></i>Échéances dues</span>
                            <span class="balance-due">
                                Solde : {{ number_format($balance, 2, ',', ' ') }} HTG
                            </span>
                        </div>
                        <div class="table-responsive" style="max-height: 26rem; overflow-y: auto;">
                            <table class="table table-sm mb-0 align-middle" id="echeances">
                                <thead class="sticky-top bg-white">
                                    <tr>
                                        <th>Frais</th>
                                        <th>Échéance</th>
                                        <th class="text-end">Reste dû</th>
                                        <th class="text-end">Imputé</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($outstanding as $fee)
                                        <tr data-reste="{{ $fee->remaining() }}">
                                            <td class="small">{{ $fee->label }}</td>
                                            <td class="small text-secondary">
                                                {{ $fee->due_date?->format('d/m/Y') ?? '—' }}
                                                @if ($fee->due_date?->isPast())
                                                    <i class="bi bi-exclamation-circle text-danger"
                                                       title="Échéance dépassée"></i>
                                                @endif
                                            </td>
                                            <td class="text-end small">
                                                {{ number_format($fee->remaining(), 2, ',', ' ') }}
                                            </td>
                                            <td class="text-end small fw-semibold text-success impute">—</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="card-footer bg-white small text-secondary">
                            <i class="bi bi-info-circle me-1"></i>
                            L'imputation se fait automatiquement de l'échéance la plus ancienne
                            à la plus récente.
                        </div>
                    </div>
                </div>

                {{-- Saisie --}}
                <div class="col-lg-5">
                    <div class="card">
                        <div class="card-header bg-white fw-semibold">
                            <i class="bi bi-cash-coin me-2"></i>Nouvel encaissement
                        </div>
                        <div class="card-body">
                            @if ($errors->any())
                                <div class="alert alert-danger py-2 small">
                                    @foreach ($errors->all() as $error)
                                        <div>{{ $error }}</div>
                                    @endforeach
                                </div>
                            @endif

                            <div class="row g-3">
                                <div class="col-8">
                                    <label for="amount" class="form-label">Montant <span class="text-danger">*</span></label>
                                    <input id="amount" name="amount" type="number" step="0.01" min="0.01"
                                           class="form-control form-control-lg @error('amount') is-invalid @enderror"
                                           value="{{ old('amount') }}" required autofocus
                                           data-max="{{ $balance }}">
                                    @error('amount')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>

                                <div class="col-4">
                                    <label for="currency" class="form-label">Devise</label>
                                    <select id="currency" name="currency" class="form-select form-select-lg">
                                        <option value="HTG" @selected(old('currency', 'HTG') === 'HTG')>HTG</option>
                                        <option value="USD" @selected(old('currency') === 'USD')>USD</option>
                                    </select>
                                </div>

                                {{-- Masqué tant que la devise est la gourde : demander un
                                     taux systématiquement alourdirait la saisie courante. --}}
                                <div class="col-12 d-none" id="bloc-taux">
                                    <label for="exchange_rate" class="form-label">Taux de change du jour</label>
                                    <div class="input-group">
                                        <span class="input-group-text">1 USD =</span>
                                        <input id="exchange_rate" name="exchange_rate" type="number" step="0.0001"
                                               class="form-control @error('exchange_rate') is-invalid @enderror"
                                               value="{{ old('exchange_rate') }}" placeholder="132.5000">
                                        <span class="input-group-text">HTG</span>
                                        @error('exchange_rate')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                </div>

                                <div class="col-12">
                                    <label for="payment_method" class="form-label">Mode de paiement <span class="text-danger">*</span></label>
                                    <select id="payment_method" name="payment_method"
                                            class="form-select @error('payment_method') is-invalid @enderror" required>
                                        @foreach (\App\Enums\PaymentMethod::cases() as $method)
                                            <option value="{{ $method->value }}"
                                                    data-reference="{{ $method->requiresReference() ? '1' : '0' }}"
                                                    @selected(old('payment_method', 'cash') === $method->value)>
                                                {{ $method->label() }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('payment_method')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>

                                <div class="col-12 d-none" id="bloc-reference">
                                    <label for="reference" class="form-label">Référence <span class="text-danger">*</span></label>
                                    <input id="reference" name="reference" type="text"
                                           class="form-control @error('reference') is-invalid @enderror"
                                           value="{{ old('reference') }}"
                                           placeholder="N° de chèque, ID de transaction…">
                                    @error('reference')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>

                                <div class="col-12">
                                    <label for="paid_by" class="form-label">Versé par</label>
                                    <input id="paid_by" name="paid_by" type="text"
                                           class="form-control @error('paid_by') is-invalid @enderror"
                                           value="{{ old('paid_by', $enrollment->student->financialGuardian()?->fullName()) }}">
                                    @error('paid_by')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>

                                <div class="col-12">
                                    <label for="payment_date" class="form-label">Date</label>
                                    <input id="payment_date" name="payment_date" type="date"
                                           class="form-control @error('payment_date') is-invalid @enderror"
                                           value="{{ old('payment_date', now()->toDateString()) }}"
                                           max="{{ now()->toDateString() }}">
                                    @error('payment_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>

                                <div class="col-12">
                                    <label for="notes" class="form-label">Observation</label>
                                    <textarea id="notes" name="notes" rows="2"
                                              class="form-control">{{ old('notes') }}</textarea>
                                </div>
                            </div>
                        </div>

                        <div class="card-footer bg-white">
                            <div class="d-flex justify-content-between small mb-3" id="resume">
                                <span class="text-secondary">Nouveau solde après encaissement</span>
                                <span class="fw-semibold" id="solde-apres">
                                    {{ number_format($balance, 2, ',', ' ') }} HTG
                                </span>
                            </div>
                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-success btn-lg">
                                    <i class="bi bi-check-lg me-1"></i>Encaisser et imprimer le reçu
                                </button>
                                <a href="{{ route('students.show', $enrollment) }}"
                                   class="btn btn-outline-secondary">Annuler</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <script>
            // Aperçu de l'imputation : l'économe voit quelles échéances seront
            // soldées AVANT de valider. Reproduit la règle du serveur (plus
            // ancienne d'abord) ; le serveur reste seul juge à l'enregistrement.
            (() => {
                const montant = document.getElementById('amount');
                const lignes = [...document.querySelectorAll('#echeances tbody tr')];
                const soldeApres = document.getElementById('solde-apres');
                const soldeInitial = parseFloat(montant.dataset.max);
                const devise = document.getElementById('currency');
                const blocTaux = document.getElementById('bloc-taux');
                const methode = document.getElementById('payment_method');
                const blocRef = document.getElementById('bloc-reference');

                const fmt = (n) => n.toLocaleString('fr-FR', {
                    minimumFractionDigits: 2, maximumFractionDigits: 2,
                });

                function recalculer() {
                    let reste = parseFloat(montant.value) || 0;

                    lignes.forEach((ligne) => {
                        const du = parseFloat(ligne.dataset.reste);
                        const part = Math.min(reste, du);
                        const cellule = ligne.querySelector('.impute');

                        if (part > 0) {
                            cellule.textContent = fmt(part);
                            ligne.classList.add('table-success');
                            reste -= part;
                        } else {
                            cellule.textContent = '—';
                            ligne.classList.remove('table-success');
                        }
                    });

                    const apres = Math.max(0, soldeInitial - (parseFloat(montant.value) || 0));
                    soldeApres.textContent = fmt(apres) + ' HTG';
                    soldeApres.className = 'fw-semibold ' + (apres <= 0 ? 'balance-ok' : 'balance-due');
                }

                function basculerChamps() {
                    blocTaux.classList.toggle('d-none', devise.value !== 'USD');
                    const opt = methode.selectedOptions[0];
                    blocRef.classList.toggle('d-none', opt.dataset.reference !== '1');
                }

                montant.addEventListener('input', recalculer);
                devise.addEventListener('change', basculerChamps);
                methode.addEventListener('change', basculerChamps);
                recalculer();
                basculerChamps();
            })();
        </script>
    @endif
@endsection