@extends('layouts.app')
@section('title', 'Règlements')
@section('breadcrumb', 'Finance / Règlements')
@section('content')

{{-- ── HEADER ── --}}
<div class="page-header">
    <div>
        <h1 class="page-title"><i class="fas fa-money-check" style="color:var(--info)"></i> Règlements</h1>
        <p class="page-subtitle">Multi-paiement, chèques, traites, retenue à la source</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('reglements.export', request()->query()) }}" class="btn btn-secondary btn-sm">
            <i class="fas fa-download"></i> CSV
        </a>
        <button class="btn btn-success" onclick="window.reglModal && window.reglModal.open('client')">
            <i class="fas fa-plus"></i> Règlement Client
        </button>
        <button class="btn btn-warning" onclick="window.reglModal && window.reglModal.open('fournisseur')">
            <i class="fas fa-plus"></i> Règlement Fournisseur
        </button>
    </div>
</div>

{{-- ── SESSION ── --}}
@if(session('success'))<div class="alert alert-success" style="margin-bottom:12px;">{{ session('success') }}</div>@endif
@if(session('error'))<div class="alert alert-danger" style="margin-bottom:12px;">{{ session('error') }}</div>@endif

{{-- ── TABS ── --}}
<div class="tabs" style="margin-bottom:16px;">
    <a class="tab-btn {{ $tab==='client'?'active':'' }}" href="{{ url()->current() }}?tab=client">
        <i class="fas fa-users"></i> Règlements Clients
        @if($countClient)<span style="background:var(--primary);color:#fff;font-size:10px;padding:1px 6px;border-radius:10px;margin-left:4px;">{{ $countClient }}</span>@endif
    </a>
    <a class="tab-btn {{ $tab==='fournisseur'?'active':'' }}" href="{{ url()->current() }}?tab=fournisseur">
        <i class="fas fa-truck"></i> Règlements Fournisseurs
        @if($countFourn)<span style="background:var(--warning);color:#fff;font-size:10px;padding:1px 6px;border-radius:10px;margin-left:4px;">{{ $countFourn }}</span>@endif
    </a>
    <a class="tab-btn {{ $tab==='cheques'?'active':'' }}" href="{{ url()->current() }}?tab=cheques">
        <i class="fas fa-check-square"></i> Chèques &amp; Traites
        @if($countCheques)<span style="background:var(--info);color:#fff;font-size:10px;padding:1px 6px;border-radius:10px;margin-left:4px;">{{ $countCheques }}</span>@endif
    </a>
</div>

{{-- ── FILTRE ── --}}
<div class="card" style="margin-bottom:16px;"><div class="card-body" style="padding:10px 16px;">
    <form method="GET" style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;">
        <input type="hidden" name="tab" value="{{ $tab }}">
        <input type="text" name="search" value="{{ request('search') }}" class="form-control" placeholder="N° règlement…" style="max-width:200px;">
        <input type="date" name="date_from" value="{{ request('date_from') }}" class="form-control" style="max-width:140px;" title="Date début">
        <input type="date" name="date_to"   value="{{ request('date_to') }}"   class="form-control" style="max-width:140px;" title="Date fin">
        <button type="submit" class="btn btn-primary"><i class="fas fa-filter"></i> Filtrer</button>
        <a href="{{ url()->current() }}?tab={{ $tab }}" class="btn btn-secondary"><i class="fas fa-times"></i></a>
    </form>
</div></div>

{{-- ── LISTE CHÈQUES ── --}}
@if($tab === 'cheques')
<div class="card"><div class="table-wrap"><table class="table">
    <thead><tr>
        <th>Règlement</th><th>Tiers</th><th>Type</th>
        <th>N° Chèque/Traite</th><th>Banque</th><th>Date valeur</th><th>Montant</th><th>Statut</th>
    </tr></thead>
    <tbody>
    @forelse($cheques as $p)
        @php
            $r = $p->reglement;
            $tierNom = $r ? ($r->tiers_type==='client' ? ($clientMap[$r->tiers_id]??'—') : ($fournisseurMap[$r->tiers_id]??'—')) : '—';
            $statColors = ['encaisse'=>'badge-success','rejete'=>'badge-danger'];
            $statLabels = ['encaisse'=>'Encaissé','rejete'=>'Rejeté'];
        @endphp
        <tr>
            <td>@if($r)<a href="{{ route('reglements.show', $r) }}" style="color:var(--primary);font-weight:500;">{{ $r->numero }}</a>@else—@endif</td>
            <td>{{ $tierNom }}</td>
            <td>@if($p->mode)<span class="badge-pill {{ $p->mode->code==='CHQ'?'badge-info':'badge-warning' }}">{{ $p->mode->label }}</span>@endif</td>
            <td>{{ $p->reference ?? '—' }}</td>
            <td>{{ $p->banque ?? '—' }}</td>
            <td>{{ $p->date_valeur?->format('d/m/Y') ?? '—' }}</td>
            <td style="font-weight:700">{{ number_format($p->montant,3,',',' ') }}</td>
            <td><span class="badge-pill {{ $statColors[$p->statut??'']??'badge-warning' }}">{{ $statLabels[$p->statut??'']??'En attente' }}</span></td>
        </tr>
    @empty
        <tr><td colspan="8" class="empty-state">Aucun chèque/traite</td></tr>
    @endforelse
    </tbody>
</table></div>
@if($cheques->hasPages())<div style="padding:12px 16px;border-top:1px solid var(--border);">{{ $cheques->links() }}</div>@endif
</div>

{{-- ── LISTE CLIENT / FOURNISSEUR ── --}}
@else
<div class="card"><div class="table-wrap"><table class="table">
    <thead><tr>
        <th>Numéro</th>
        <th>{{ $tab==='client'?'Client':'Fournisseur' }}</th>
        <th>Date</th>
        <th>Factures réglées</th>
        <th>Montant</th>
        <th>RS</th>
        <th style="color:var(--success)">Net payé</th>
        <th>Modes</th>
        <th>Actions</th>
    </tr></thead>
    <tbody>
    @forelse($reglements as $r)
        @php
            $tierNom   = $tab==='client' ? ($clientMap[$r->tiers_id]??'—') : ($fournisseurMap[$r->tiers_id]??'—');
            $modeCodes = $r->paiements->map(fn($p)=>$p->mode?->code)->filter()->implode(', ');
            $factures  = is_array($r->factures_reglees) ? implode(', ', $r->factures_reglees) : '—';
        @endphp
        <tr>
            <td><strong>{{ $r->numero }}</strong></td>
            <td>{{ $tierNom }}</td>
            <td>{{ $r->date->format('d/m/Y') }}</td>
            <td style="font-size:12px;color:#64748b;">{{ $factures }}</td>
            <td>{{ number_format($r->montant_total,3,',',' ') }}</td>
            <td style="color:var(--danger)">{{ $r->rs > 0 ? number_format($r->rs,3,',',' ') : '—' }}</td>
            <td style="font-weight:700;color:var(--success)">{{ number_format($r->net_paye,3,',',' ') }}</td>
            <td style="font-size:12px">{{ $modeCodes ?: '—' }}</td>
            <td>
                <div class="table-actions">
                    <button type="button" class="action-btn" title="Consulter"
                        onclick="window.dispatchEvent(new CustomEvent('open-view-regl',{detail:{id:{{ $r->id }}}}))">
                        <i class="fas fa-eye"></i>
                    </button>
                    <button type="button" class="action-btn" title="Modifier"
                        onclick="window.reglModal && window.reglModal.openEdit({{ $r->id }})">
                        <i class="fas fa-pen"></i>
                    </button>
                    <button type="button" class="action-btn danger" title="Supprimer"
                        onclick="window.dispatchEvent(new CustomEvent('open-del-regl',{detail:{id:{{ $r->id }},numero:'{{ $r->numero }}'}}))">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </td>
        </tr>
    @empty
        <tr><td colspan="9" class="empty-state">Aucun règlement {{ $tab==='client'?'client':'fournisseur' }}</td></tr>
    @endforelse
    </tbody>
</table></div>
@if($reglements->hasPages())<div style="padding:12px 16px;border-top:1px solid var(--border);">{{ $reglements->links() }}</div>@endif
</div>
@endif

{{-- ══════════════════════════════════════════════════
     MODAL CRÉATION / MODIFICATION
     ══════════════════════════════════════════════════ --}}
<div id="rmWrap" x-data="reglModal()" x-init="init()">

    <div class="modal-overlay" :class="{ open: show }" @click="close()"></div>

    <div class="modal modal-xl" :class="{ open: show }" style="max-height:92vh;">

        {{-- Header --}}
        <div class="modal-header">
            <h3 style="display:flex;align-items:center;gap:8px;">
                <i class="fas fa-money-check" style="color:var(--info)"></i>
                <span x-text="isEdit ? 'Modifier règlement' : (tiersType==='client' ? 'Nouveau règlement client' : 'Nouveau règlement fournisseur')"></span>
            </h3>
            <button @click="close()"
                style="background:none;border:none;font-size:18px;color:var(--text-muted);width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;"
                onmouseover="this.style.background='#fee2e2';this.style.color='#ef4444'"
                onmouseout="this.style.background='none';this.style.color='var(--text-muted)'">
                <i class="fas fa-xmark"></i>
            </button>
        </div>

        {{-- Body --}}
        <div class="modal-body" style="overflow-y:auto;">
            <div x-show="loading" style="text-align:center;padding:60px;color:#94a3b8;">
                <i class="fas fa-spinner fa-spin fa-2x"></i><br><br>Chargement...
            </div>
            <div x-show="!loading">
                <div x-show="errMsg" class="alert alert-danger" x-text="errMsg" style="margin-bottom:16px;"></div>

                {{-- § 1 – Informations générales --}}
                <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:20px;">
                    <div class="form-group">
                        <label class="form-label required" x-text="tiersType==='client' ? 'Client' : 'Fournisseur'"></label>
                        <select class="form-control" x-model="tiersId" @change="onTiersChange()">
                            <option value="">— Sélectionner —</option>
                            <template x-for="t in tiersList" :key="t.id">
                                <option :value="String(t.id)" x-text="t.nom"></option>
                            </template>
                        </select>
                        <span class="form-hint" style="color:var(--danger);font-size:12px;" x-show="errors.tiers_id" x-text="(errors.tiers_id||[])[0]"></span>
                    </div>
                    <div class="form-group">
                        <label class="form-label required">Date</label>
                        <input type="date" class="form-control" x-model="date">
                        <span class="form-hint" style="color:var(--danger);font-size:12px;" x-show="errors.date" x-text="(errors.date||[])[0]"></span>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Notes</label>
                        <input type="text" class="form-control" x-model="notes" placeholder="Note libre…">
                    </div>
                </div>

                {{-- § 2 – Factures à régler --}}
                <div class="form-section-title"><i class="fas fa-file-invoice"></i> Factures à régler</div>
                <div style="margin-bottom:20px;min-height:48px;">
                    <div x-show="!tiersId" class="alert alert-info" style="font-size:13px;margin-bottom:0;">
                        Sélectionnez un <span x-text="tiersType==='client'?'client':'fournisseur'"></span> pour voir ses factures.
                    </div>
                    <div x-show="tiersId && loadingFactures" style="color:#94a3b8;font-size:13px;padding:8px 0;">
                        <i class="fas fa-spinner fa-spin"></i> Chargement des factures…
                    </div>
                    <div x-show="tiersId && !loadingFactures && facturesDisponibles.length === 0" class="alert alert-warning" style="font-size:13px;margin-bottom:0;">
                        Aucune facture disponible pour ce tiers.
                    </div>
                    <div x-show="tiersId && !loadingFactures && facturesDisponibles.length > 0">
                        <div class="table-wrap"><table class="table" style="font-size:13px;">
                            <thead><tr>
                                <th style="width:32px;">
                                    <input type="checkbox"
                                        :checked="facturesReglees.length === facturesDisponibles.length && facturesDisponibles.length > 0"
                                        @change="toggleAllFactures()">
                                </th>
                                <th>N° Facture</th><th>Date</th><th>Total TTC</th>
                            </tr></thead>
                            <tbody>
                                <template x-for="f in facturesDisponibles" :key="f.id">
                                    <tr :style="facturesReglees.includes(f.numero) ? 'background:var(--primary-light);' : ''">
                                        <td><input type="checkbox" :checked="facturesReglees.includes(f.numero)" @change="toggleFacture(f.numero)"></td>
                                        <td><strong x-text="f.numero"></strong></td>
                                        <td x-text="f.date"></td>
                                        <td style="font-weight:600;" x-text="fmtNum(f.total_ttc) + ' TND'"></td>
                                    </tr>
                                </template>
                            </tbody>
                        </table></div>
                    </div>
                </div>

                {{-- § 3 – Modes de paiement --}}
                <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
                    <div class="form-section-title" style="margin:0;"><i class="fas fa-money-bill"></i> Modes de paiement</div>
                    <div style="display:flex;gap:8px;align-items:center;">
                        <label style="font-size:12px;color:#64748b;margin:0;">Diviser en</label>
                        <select class="form-control" style="width:130px;" @change="diviserPaiements(parseInt($event.target.value)); $event.target.value=1">
                            <option value="1">1 paiement</option>
                            <option value="2">2 paiements</option>
                            <option value="3">3 paiements</option>
                            <option value="4">4 paiements</option>
                        </select>
                        <button type="button" class="btn btn-sm btn-primary" @click="addPaiement()">
                            <i class="fas fa-plus"></i> Ajouter
                        </button>
                    </div>
                </div>
                <div x-show="errors.paiements" class="alert alert-danger" style="font-size:12px;padding:8px 12px;margin-bottom:8px;" x-text="(errors.paiements||[])[0]"></div>

                <template x-for="(p, i) in paiements" :key="i">
                    <div style="display:grid;grid-template-columns:180px 1fr 1fr 1fr 1fr 32px;gap:8px;align-items:end;margin-bottom:8px;padding:10px 12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;">
                        <div class="form-group" style="margin:0;">
                            <label class="form-label" style="font-size:11px;">Mode *</label>
                            <select class="form-control" x-model="p.mode_id" @change="calcTotaux()">
                                <option value="">— Mode —</option>
                                @foreach($modes as $m)
                                    <option value="{{ $m->id }}">{{ $m->label }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group" style="margin:0;">
                            <label class="form-label" style="font-size:11px;">Montant *</label>
                            <input type="number" class="form-control" x-model="p.montant" @input="calcTotaux()" step="0.001" min="0">
                        </div>
                        <div class="form-group" style="margin:0;">
                            <label class="form-label" style="font-size:11px;">Référence</label>
                            <input type="text" class="form-control" x-model="p.reference" placeholder="N° chèque/traite">
                        </div>
                        <div class="form-group" style="margin:0;">
                            <label class="form-label" style="font-size:11px;">Banque</label>
                            <input type="text" class="form-control" x-model="p.banque">
                        </div>
                        <div class="form-group" style="margin:0;">
                            <label class="form-label" style="font-size:11px;">Date valeur</label>
                            <input type="date" class="form-control" x-model="p.date_valeur">
                        </div>
                        <button type="button" @click="removePaiement(i)" x-show="paiements.length > 1"
                            style="background:none;border:none;cursor:pointer;color:#ef4444;font-size:16px;padding-bottom:4px;">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </template>

                {{-- § 4 – RS + Total --}}
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px;align-items:start;">
                    <div class="form-group">
                        <label class="form-label"><i class="fas fa-percent"></i> Retenue à la source</label>
                        <select class="form-control" x-model="retenueSourceId" @change="calcTotaux()">
                            <option value="">Aucune RS</option>
                            @foreach($retenues as $ret)
                                <option value="{{ $ret->id }}">{{ $ret->label }} ({{ $ret->taux }}%)</option>
                            @endforeach
                        </select>
                    </div>
                    <div style="background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:16px;">
                        <div style="display:flex;justify-content:space-between;margin-bottom:8px;font-size:13px;">
                            <span>Montant total</span><strong x-text="fmtNum(montantTotal) + ' TND'"></strong>
                        </div>
                        <div x-show="rsAmount > 0" style="display:flex;justify-content:space-between;margin-bottom:8px;font-size:13px;color:var(--danger);">
                            <span>RS</span><strong x-text="'— ' + fmtNum(rsAmount) + ' TND'"></strong>
                        </div>
                        <hr style="border:none;border-top:2px solid var(--border);margin:8px 0;">
                        <div style="display:flex;justify-content:space-between;font-size:16px;font-weight:700;">
                            <span>Net à payer</span>
                            <span style="color:var(--success);" x-text="fmtNum(netPaye) + ' TND'"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Footer --}}
        <div class="modal-footer">
            <button type="button" @click="close()" class="btn btn-secondary" :disabled="saving">Annuler</button>
            <button type="button" @click="submitForm()" class="btn btn-primary" :disabled="saving || loading">
                <i class="fas fa-save"></i>
                <span x-text="saving ? 'Enregistrement…' : 'Enregistrer'"></span>
            </button>
        </div>

    </div>{{-- /modal --}}
</div>{{-- /rmWrap --}}

{{-- ══════════════════════════════════════════════════
     MODAL CONSULTATION
     ══════════════════════════════════════════════════ --}}
<div x-data="{
    show: false, loading: false, reg: null,
    async open(id) {
        this.show = true; this.loading = true; this.reg = null;
        try {
            const r = await fetch('/reglements/' + id + '/json-data', { headers:{'X-Requested-With':'XMLHttpRequest'} });
            this.reg = await r.json();
        } finally { this.loading = false; }
    },
    close() { this.show = false; this.reg = null; }
}" @open-view-regl.window="open($event.detail.id)">
    <div class="modal-overlay" :class="{ open: show }" @click="close()"></div>
    <div class="modal" :class="{ open: show }" style="max-width:600px;">
        <div class="modal-header">
            <h3><i class="fas fa-money-check" style="color:var(--info)"></i>
                Règlement <span x-text="reg?.numero ?? ''"></span></h3>
            <button class="modal-close" @click="close()"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
            <div x-show="loading" style="text-align:center;padding:40px;"><i class="fas fa-spinner fa-spin fa-2x"></i></div>
            <template x-if="reg && !loading">
                <div>
                    <div style="display:flex;gap:24px;margin-bottom:16px;flex-wrap:wrap;">
                        <div>
                            <div style="font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:.05em;">Net payé</div>
                            <div style="font-size:22px;font-weight:700;color:var(--success);" x-text="rmFmt(reg.net_paye) + ' TND'"></div>
                        </div>
                        <div>
                            <div style="font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:.05em;">Date</div>
                            <div style="font-size:14px;font-weight:600;" x-text="reg.date"></div>
                        </div>
                        <div x-show="reg.rs > 0">
                            <div style="font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:.05em;">RS</div>
                            <div style="font-size:14px;font-weight:600;color:var(--danger);" x-text="rmFmt(reg.rs) + ' TND'"></div>
                        </div>
                        <div x-show="reg.factures_reglees && reg.factures_reglees.length">
                            <div style="font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:.05em;">Factures</div>
                            <div style="font-size:13px;" x-text="reg.factures_reglees.join(', ')"></div>
                        </div>
                    </div>
                    <table class="table" style="font-size:13px;">
                        <thead><tr><th>Mode</th><th>Montant</th><th>Référence</th><th>Banque</th><th>Date valeur</th></tr></thead>
                        <tbody>
                            <template x-for="(p, i) in reg.paiements" :key="i">
                                <tr>
                                    <td><span class="badge-pill badge-info" x-text="rmModeName(p.mode_id)"></span></td>
                                    <td style="font-weight:600;" x-text="rmFmt(p.montant) + ' TND'"></td>
                                    <td x-text="p.reference || '—'"></td>
                                    <td x-text="p.banque || '—'"></td>
                                    <td x-text="p.date_valeur || '—'"></td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </template>
        </div>
        <div class="modal-footer">
            <button @click="close()" class="btn btn-secondary">Fermer</button>
            <template x-if="reg">
                <a :href="'/reglements/' + reg.id" class="btn btn-primary"><i class="fas fa-eye"></i> Détail complet</a>
            </template>
        </div>
    </div>
</div>

{{-- ══════════════════════════════════════════════════
     MODAL SUPPRESSION
     ══════════════════════════════════════════════════ --}}
<div x-data="{
    show: false, reglId: null, numero: '',
    open(d) { this.show = true; this.reglId = d.id; this.numero = d.numero; },
    close() { this.show = false; }
}" @open-del-regl.window="open($event.detail)">
    <div class="modal-overlay" :class="{ open: show }" @click="close()"></div>
    <div class="modal modal-sm" :class="{ open: show }" style="max-width:420px;">
        <div class="modal-header">
            <h3><i class="fas fa-trash" style="color:var(--danger)"></i> Supprimer règlement</h3>
            <button class="modal-close" @click="close()"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body" style="font-size:14px;">
            Supprimer définitivement le règlement <strong x-text="numero"></strong> ?
            <p style="color:#64748b;font-size:12px;margin-top:8px;">Cette action est irréversible.</p>
        </div>
        <div class="modal-footer">
            <button @click="close()" class="btn btn-secondary">Annuler</button>
            <form method="POST" :action="'/reglements/' + reglId" style="display:inline;">
                @csrf @method('DELETE')
                <button type="submit" class="btn btn-danger"><i class="fas fa-trash"></i> Supprimer</button>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
/* ── données globales ── */
const RM_DATA = {
    csrf:         '{{ csrf_token() }}',
    clients:      {!! $clients->map(fn($c) => ['id'=>$c->id,'nom'=>$c->nom])->toJson() !!},
    fournisseurs: {!! $fournisseurs->map(fn($f) => ['id'=>$f->id,'nom'=>$f->nom])->toJson() !!},
    modes:        {!! $modes->map(fn($m) => ['id'=>$m->id,'code'=>$m->code,'label'=>$m->label])->toJson() !!},
    retenues:     {!! $retenues->map(fn($r) => ['id'=>$r->id,'taux'=>(float)$r->taux,'label'=>$r->label])->toJson() !!},
    tiersTypeInit:'{{ $tab !== "cheques" ? $tab : "client" }}',
};

function rmFmt(n) {
    return parseFloat(n||0).toLocaleString('fr-TN',{minimumFractionDigits:3,maximumFractionDigits:3});
}
function rmModeName(id) {
    const m = RM_DATA.modes.find(x => String(x.id) === String(id));
    return m ? m.label : '—';
}

/* ── composant Alpine principal ── */
function reglModal() {
    return {
        /* état modal */
        show: false, loading: false, saving: false, isEdit: false, editId: null,

        /* champs */
        tiersType: RM_DATA.tiersTypeInit,
        tiersId: '', date: '', retenueSourceId: '', notes: '',
        facturesReglees: [], facturesDisponibles: [], loadingFactures: false,
        paiements: [{ mode_id:'', montant:0, reference:'', banque:'', date_valeur:'' }],

        /* totaux */
        montantTotal: 0, rsAmount: 0, netPaye: 0,

        /* erreurs */
        errors: {}, errMsg: '',

        /* computed */
        get tiersList() {
            return this.tiersType === 'client' ? RM_DATA.clients : RM_DATA.fournisseurs;
        },

        /* helpers exposés au template */
        fmtNum: rmFmt,
        getModeName: rmModeName,

        /* ── ouverture ── */
        open(tiersType) {
            this.isEdit = false; this.editId = null;
            this.tiersType = tiersType || RM_DATA.tiersTypeInit;
            this._reset();
            this.show = true;
            document.body.style.overflow = 'hidden';
        },
        async openEdit(id) {
            this.isEdit = true; this.editId = id;
            this.loading = true; this.show = true;
            this.errors = {}; this.errMsg = '';
            document.body.style.overflow = 'hidden';
            try {
                const r = await fetch('/reglements/' + id + '/json-data', { headers:{'X-Requested-With':'XMLHttpRequest'} });
                const d = await r.json();
                this.tiersType        = d.tiers_type;
                this.tiersId          = String(d.tiers_id || '');
                this.date             = d.date;
                this.retenueSourceId  = String(d.retenue_source_id || '');
                this.notes            = d.notes || '';
                this.facturesReglees  = d.factures_reglees || [];
                this.paiements        = d.paiements.length
                    ? d.paiements.map(p => ({
                        mode_id: String(p.mode_id), montant: parseFloat(p.montant)||0,
                        reference: p.reference||'', banque: p.banque||'', date_valeur: p.date_valeur||''
                      }))
                    : [{ mode_id:'', montant:0, reference:'', banque:'', date_valeur:'' }];
                this.calcTotaux();
                await this.loadFactures();
            } catch(e) {
                this.errMsg = 'Erreur lors du chargement.';
            } finally {
                this.loading = false;
            }
        },

        /* ── fermeture ── */
        close() {
            this.show = false; this.errors = {}; this.errMsg = '';
            document.body.style.overflow = '';
        },

        /* ── reset ── */
        _reset() {
            this.tiersId = ''; this.date = new Date().toISOString().slice(0,10);
            this.retenueSourceId = ''; this.notes = '';
            this.facturesReglees = []; this.facturesDisponibles = [];
            this.paiements = [{ mode_id:'', montant:0, reference:'', banque:'', date_valeur:'' }];
            this.montantTotal = 0; this.rsAmount = 0; this.netPaye = 0;
            this.errors = {}; this.errMsg = '';
        },

        /* ── factures ── */
        async loadFactures() {
            if (!this.tiersId) { this.facturesDisponibles = []; return; }
            this.loadingFactures = true;
            try {
                const r = await fetch('/reglements-factures?tiers_type=' + this.tiersType + '&tiers_id=' + this.tiersId);
                this.facturesDisponibles = await r.json();
            } catch(e) { this.facturesDisponibles = []; }
            finally { this.loadingFactures = false; }
        },
        onTiersChange() {
            this.facturesReglees = [];
            this.loadFactures();
        },
        toggleFacture(numero) {
            const idx = this.facturesReglees.indexOf(numero);
            if (idx >= 0) this.facturesReglees.splice(idx, 1);
            else { this.facturesReglees.push(numero); this._autoFillMontant(); }
        },
        toggleAllFactures() {
            if (this.facturesReglees.length === this.facturesDisponibles.length) {
                this.facturesReglees = [];
            } else {
                this.facturesReglees = this.facturesDisponibles.map(f => f.numero);
                this._autoFillMontant();
            }
        },
        _autoFillMontant() {
            const total = this.facturesDisponibles
                .filter(f => this.facturesReglees.includes(f.numero))
                .reduce((s, f) => s + (parseFloat(f.total_ttc)||0), 0);
            if (total > 0 && this.paiements.length === 1 && !this.paiements[0].montant) {
                this.paiements[0].montant = Math.round(total * 1000) / 1000;
                this.calcTotaux();
            }
        },

        /* ── paiements ── */
        addPaiement() {
            this.paiements.push({ mode_id:'', montant:0, reference:'', banque:'', date_valeur:'' });
        },
        removePaiement(i) {
            if (this.paiements.length > 1) { this.paiements.splice(i, 1); this.calcTotaux(); }
        },
        diviserPaiements(n) {
            if (n < 1) return;
            const total = this.paiements.reduce((s,p)=>s+(parseFloat(p.montant)||0),0) || 0;
            if (!total) return;
            const part = Math.round(total / n * 1000) / 1000;
            const base = this.paiements[0]?.mode_id || '';
            this.paiements = Array.from({length:n}, () => ({ mode_id:base, montant:part, reference:'', banque:'', date_valeur:'' }));
            this.calcTotaux();
        },

        /* ── calculs ── */
        calcTotaux() {
            const total = this.paiements.reduce((s,p)=>s+(parseFloat(p.montant)||0), 0);
            const ret   = RM_DATA.retenues.find(r => String(r.id) === String(this.retenueSourceId));
            const rs    = ret ? Math.round(total * ret.taux / 100 * 1000) / 1000 : 0;
            this.montantTotal = Math.round(total * 1000) / 1000;
            this.rsAmount     = rs;
            this.netPaye      = Math.round((total - rs) * 1000) / 1000;
        },

        /* ── soumission AJAX ── */
        async submitForm() {
            this.saving = true; this.errors = {}; this.errMsg = '';
            const fd = new FormData();
            fd.append('_token',            RM_DATA.csrf);
            if (this.isEdit) fd.append('_method', 'PUT');
            fd.append('tiers_type',        this.tiersType);
            fd.append('tiers_id',          this.tiersId);
            fd.append('date',              this.date);
            fd.append('retenue_source_id', this.retenueSourceId || '');
            fd.append('notes',             this.notes || '');
            this.facturesReglees.forEach((f,i) => fd.append('factures_reglees['+i+']', f));
            this.paiements.forEach((p,i) => {
                fd.append('paiements['+i+'][mode_id]',    p.mode_id || '');
                fd.append('paiements['+i+'][montant]',    p.montant || 0);
                fd.append('paiements['+i+'][reference]',  p.reference || '');
                fd.append('paiements['+i+'][banque]',     p.banque || '');
                fd.append('paiements['+i+'][date_valeur]',p.date_valeur || '');
            });
            const url = this.isEdit ? '/reglements/' + this.editId : '/reglements';
            try {
                const r    = await fetch(url, { method:'POST', body:fd, headers:{'X-Requested-With':'XMLHttpRequest','Accept':'application/json'} });
                const data = await r.json();
                if (r.ok && data.success) { this.close(); window.location.reload(); }
                else if (data.errors)     { this.errors = data.errors; this.errMsg = data.message || 'Veuillez corriger les erreurs.'; }
                else                      { this.errMsg = data.message || 'Une erreur est survenue.'; }
            } catch(e) {
                this.errMsg = 'Erreur de connexion au serveur.';
            } finally {
                this.saving = false;
            }
        },

        /* ── init ── */
        init() {
            window.reglModal = this;
            document.addEventListener('keydown', e => { if (e.key === 'Escape' && this.show) this.close(); });
        },
    };
}
</script>
@endpush

@endsection