@extends('layouts.app')
@section('title', 'Clients')
@section('page-title', 'Fichiers de base — Clients')

@section('content')
<style>
/* ── Layout deux colonnes ── */
.clients-layout { display:grid; grid-template-columns:300px 1fr; gap:18px; align-items:start; }

/* ── Panneau liste gauche ── */
.list-panel { background:#fff; border:1px solid var(--border); border-radius:10px; overflow:hidden; position:sticky; top:16px; }
.list-header { padding:12px 14px; border-bottom:1px solid var(--border); background:#f4f6fb; display:flex; flex-direction:column; gap:8px; }
.list-title  { font-size:13px; font-weight:800; color:var(--navy); display:flex; align-items:center; justify-content:space-between; }
.search-wrap { position:relative; }
.search-wrap svg { position:absolute; left:9px; top:50%; transform:translateY(-50%); pointer-events:none; }
.search-input { width:100%; height:32px; padding:0 10px 0 30px; border:1px solid var(--border); border-radius:6px; font-size:12px; font-family:inherit; color:var(--text); background:#fff; }
.search-input:focus { outline:none; border-color:var(--navy); }

.client-list { max-height:calc(100vh - 220px); overflow-y:auto; }
.client-item { padding:9px 14px; cursor:pointer; border-bottom:1px solid #f0f2f7; transition:background .12s; display:flex; align-items:center; gap:8px; }
.client-item:last-child { border-bottom:none; }
.client-item:hover  { background:#f5f7fc; }
.client-item.active { background:rgba(26,35,64,.06); border-left:3px solid var(--navy); }
.client-item .ci-name { font-size:12px; font-weight:700; color:var(--navy); line-height:1.3; }
.client-item .ci-sub  { font-size:11px; color:var(--text-muted); }
.ci-badge { font-size:9px; font-weight:800; padding:1px 5px; border-radius:3px; }
.ci-tap     { background:#EBF8FF; color:#2B6CB0; }
.ci-libre   { background:#F0FFF4; color:#276749; }
.ci-contrat { background:#FFF5F5; color:#E53E3E; }
.list-footer { padding:8px 14px; font-size:11px; color:var(--text-muted); background:#f8f9fb; border-top:1px solid var(--border); }

/* ── Fiche droite ── */
.fiche-panel { background:#fff; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.fiche-empty { padding:60px 40px; text-align:center; color:var(--text-muted); }
.fiche-empty svg { stroke:#d0d4de; fill:none; stroke-width:1.5; stroke-linecap:round; margin-bottom:14px; }

/* En-tête fiche */
.fiche-head { padding:14px 20px; background:#f4f6fb; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.fiche-head-title { font-size:14px; font-weight:800; color:var(--navy); }

/* Checkboxes type client */
.type-row { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.chk-label { display:flex; align-items:center; gap:6px; cursor:pointer; font-size:13px; font-weight:700; color:var(--text); }
.chk-label input { display:none; }
.chk-box { width:16px; height:16px; border:2px solid var(--border); border-radius:3px; background:#fff; display:inline-flex; align-items:center; justify-content:center; transition:all .15s; flex-shrink:0; }
.chk-label input:checked + .chk-box { background:var(--navy); border-color:var(--navy); }
.chk-label input:checked + .chk-box::after { content:''; width:4px; height:7px; border:2px solid #fff; border-top:none; border-left:none; transform:rotate(45deg) translateY(-1px); display:block; }

/* Body fiche */
.fiche-body { padding:16px 20px; overflow-y:auto; max-height:calc(100vh - 220px); }
.sec-label { font-size:10px; font-weight:800; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; padding-bottom:7px; border-bottom:1px solid #f0f2f7; margin:14px 0 10px; }
.sec-label:first-child { margin-top:0; }

.fg  { display:flex; flex-direction:column; gap:4px; }
.fg label { font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; }
.fc  { height:34px; padding:0 10px; border:1px solid var(--border); border-radius:6px; font-size:13px; font-family:inherit; color:var(--text); background:#f8f9fb; width:100%; transition:border-color .2s,background .2s; }
.fc:focus { outline:none; border-color:var(--navy); background:#fff; }
select.fc { cursor:pointer; }

.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.grid4 { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:10px; }
.span2 { grid-column:span 2; }
.span3 { grid-column:1/-1; }

/* INSEE */
.insee-row { display:grid; grid-template-columns:1fr 52px; gap:6px; align-items:end; }
#f-insee { font-family:monospace; letter-spacing:.08em; }
#f-insee.insee-ok      { border-color:#22C55E; background:#F0FDF4; }
#f-insee.insee-partiel { border-color:#F59E0B; background:#FFFBEB; }
#f-cle { font-family:monospace; font-weight:800; text-align:center; background:#EEF2FF; color:var(--navy); cursor:default; }
#f-cle:focus { background:#EEF2FF; border-color:var(--border); }
#insee-hint { font-weight:600; text-transform:none; letter-spacing:0; color:var(--text-muted); }
#insee-hint.hint-err { color:#DC2626; }

/* Onglet Données Libre/Contrat */
.tab-section { margin-top:16px; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.tab-section-header { padding:9px 14px; background:#f4f6fb; font-size:12px; font-weight:800; color:var(--navy); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:6px; }
.tab-section-body { padding:14px; }
.grid-remise { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* Barre d'actions */
.fiche-actions { padding:12px 20px; border-top:1px solid var(--border); background:#f8f9fb; display:flex; align-items:center; gap:8px; }
.btn { height:34px; padding:0 16px; border-radius:6px; font-size:13px; font-weight:700; cursor:pointer; border:none; display:inline-flex; align-items:center; gap:5px; transition:all .15s; }
.btn-save   { background:var(--yellow); color:var(--navy); }
.btn-save:hover   { background:#e0b000; }
.btn-new    { background:transparent; border:1.5px solid var(--navy); color:var(--navy); }
.btn-new:hover    { background:var(--navy); color:#fff; }
.btn-del    { background:transparent; border:1.5px solid #E53E3E; color:#E53E3E; margin-left:auto; }
.btn-del:hover    { background:#E53E3E; color:#fff; }

.alert { padding:10px 14px; border-radius:7px; font-size:13px; font-weight:600; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.alert-success { background:#F0FFF4; border:1px solid #9AE6B4; color:#276749; }
</style>

@if(session('success'))
<div class="alert alert-success">
    <svg viewBox="0 0 24 24" width="14" height="14" style="stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;flex-shrink:0;"><polyline points="20 6 9 17 4 12"/></svg>
    {{ session('success') }}
</div>
@endif

<div class="clients-layout">

    {{-- ── Panneau liste gauche ── --}}
    <div class="list-panel">
        <div class="list-header">
            <div class="list-title">
                <span>Clients <span style="font-weight:400;color:var(--text-muted);">({{ $clients->count() }})</span></span>
                <button class="btn btn-new" style="height:28px;padding:0 10px;font-size:11px;" onclick="nouveauClient()">+ Nouveau</button>
            </div>
            <div class="search-wrap">
                <svg viewBox="0 0 24 24" width="13" height="13" style="stroke:#aaa;fill:none;stroke-width:2;stroke-linecap:round;"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                <input type="text" class="search-input" id="search-input" placeholder="Rechercher..." oninput="filterList()">
            </div>
        </div>

        <div class="client-list" id="client-list">
            @forelse($clients as $c)
            <div class="client-item {{ $selected && $selected->id === $c->id ? 'active' : '' }}"
                 id="item-{{ $c->id }}"
                 data-id="{{ $c->id }}"
                 data-search="{{ strtolower($c->nom_patronymique.' '.($c->prenom ?? '').' '.($c->commune ?? '')) }}"
                 onclick="selectClient({{ $c->id }})">
                <div style="flex:1;min-width:0;">
                    <div class="ci-name">{{ $c->nom_patronymique }}{{ $c->prenom ? ', '.$c->prenom : '' }}</div>
                    <div class="ci-sub">{{ $c->code_postal ? $c->code_postal.' ' : '' }}{{ $c->commune ?? '' }}</div>
                </div>
                <div style="display:flex;flex-direction:column;gap:2px;align-items:flex-end;">
                    @if($c->is_tap)    <span class="ci-badge ci-tap">TAP</span> @endif
                    @if($c->is_libre)  <span class="ci-badge ci-libre">LIBRE</span> @endif
                    @if($c->is_contrat)<span class="ci-badge ci-contrat">CONTRAT</span> @endif
                </div>
            </div>
            @empty
            <div style="padding:24px;text-align:center;font-size:12px;color:var(--text-muted);">Aucun client</div>
            @endforelse
        </div>
        <div class="list-footer" id="list-footer">{{ $clients->count() }} client{{ $clients->count()>1?'s':'' }}</div>
    </div>

    {{-- ── Fiche droite ── --}}
    <div class="fiche-panel" id="fiche-panel">

        {{-- État vide --}}
        <div class="fiche-empty" id="fiche-empty">
            <svg viewBox="0 0 24 24" width="48" height="48"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
            <p style="font-size:13px;font-weight:600;">Sélectionnez un client ou créez-en un nouveau</p>
        </div>

        {{-- Formulaire --}}
        <div id="fiche-form" style="display:none;">
            <div class="fiche-head">
                <div class="fiche-head-title" id="fiche-title">Nouveau client</div>
                <div id="fiche-badges"></div>
            </div>

            <form id="client-form" method="POST" action="{{ route('clients.store') }}" autocomplete="off">
                @csrf
                <input type="hidden" name="_method" id="form-method" value="POST">

                <div class="fiche-body" id="fiche-body">

                    {{-- Type de client --}}
                    <div class="sec-label">Type de client</div>
                    <div style="display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:10px;">
                        <label class="chk-label">
                            <input type="checkbox" name="is_tap"     id="f-tap"     value="1" onchange="updateTypeVis()">
                            <span class="chk-box"></span> Client TAP
                        </label>
                        <label class="chk-label">
                            <input type="checkbox" name="is_libre"   id="f-libre"   value="1" onchange="updateTypeVis()">
                            <span class="chk-box"></span> Client Libre
                        </label>
                        <label class="chk-label">
                            <input type="checkbox" name="is_contrat" id="f-contrat" value="1" onchange="updateTypeVis()">
                            <span class="chk-box"></span> Client Contrat
                        </label>
                        <div class="fg" style="margin-left:auto;">
                            <label>Type de client</label>
                            <select name="type_client" id="f-type-client" class="fc" style="width:160px;">
                                <option value="particulier">Particulier</option>
                                <option value="professionnel">Professionnel</option>
                                <option value="organisme">Organisme</option>
                            </select>
                        </div>
                        <label class="chk-label">
                            <input type="checkbox" name="decede" id="f-decede" value="1" onchange="toggleDecede()">
                            <span class="chk-box"></span> Décédé le
                        </label>
                        <input type="date" name="decede_le" id="f-decede-le" class="fc" style="width:140px;display:none;">
                        <label class="chk-label">
                            <input type="checkbox" name="mis_en_exception" id="f-misex" value="1">
                            <span class="chk-box"></span> Client mis en ex.
                        </label>
                    </div>

                    {{-- Identité --}}
                    <div class="sec-label">Identité</div>
                    <div class="grid4" style="margin-bottom:10px;">
                        <div class="fg">
                            <label>Civilité</label>
                            <select name="civilite" id="f-civilite" class="fc">
                                <option value="">—</option>
                                <option value="M.">M.</option>
                                <option value="Mme">Mme</option>
                                <option value="Dr">Dr</option>
                                <option value="Pr">Pr</option>
                            </select>
                        </div>
                        <div class="fg span2">
                            <label>Nom Patronymique (naissance) *</label>
                            <input type="text" name="nom_patronymique" id="f-nom" class="fc" required autocomplete="off">
                        </div>
                        <div class="fg">
                            <label>Prénom</label>
                            <input type="text" name="prenom" id="f-prenom" class="fc" autocomplete="off">
                        </div>
                    </div>
                    <div class="grid4" style="margin-bottom:10px;">
                        <div class="fg span2">
                            <label>Nom d'usage (marital)</label>
                            <input type="text" name="nom_usage" id="f-nom-usage" class="fc" autocomplete="off">
                        </div>
                        <div class="fg" style="grid-column:3/5;">
                            <label>No INSEE <span id="insee-hint">(13 caractères)</span></label>
                            <div class="insee-row">
                                <input type="text" name="no_insee" id="f-insee" class="fc" maxlength="13"
                                       inputmode="numeric" autocomplete="off" placeholder="1 85 03 75 114 042"
                                       oninput="formatInsee()" onblur="formatInsee()">
                                <input type="text" name="cle_insee" id="f-cle" class="fc" maxlength="2"
                                       placeholder="Clé" autocomplete="off" readonly tabindex="-1"
                                       title="Clé calculée automatiquement">
                            </div>
                        </div>
                    </div>
                    <div style="display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:10px;">
                        <label class="chk-label">
                            <input type="checkbox" name="client_etranger" id="f-etranger" value="1">
                            <span class="chk-box"></span> Client Étranger
                        </label>
                        <div class="fg">
                            <label>Date de naissance</label>
                            <input type="date" name="date_naissance" id="f-ddn" class="fc" style="width:160px;">
                        </div>
                        <div class="fg">
                            <label>Rang naissance</label>
                            <input type="number" name="rang_naissance" id="f-rang" class="fc" style="width:80px;" min="1" value="1">
                        </div>
                    </div>

                    {{-- Caisse / Mutuelle / Type contrat --}}
                    <div class="sec-label">Caisse & Couverture</div>
                    <div class="grid3" style="margin-bottom:10px;">
                        <div class="fg">
                            <label>Caisse</label>
                            <select name="caisse_id" id="f-caisse" class="fc">
                                <option value="">— Sélectionner —</option>
                                @foreach($caisses as $caisse)
                                <option value="{{ $caisse->id }}">{{ $caisse->nom }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="fg">
                            <label>Mutuelle</label>
                            <select name="mutuelle_id" id="f-mutuelle" class="fc">
                                <option value="">— Sélectionner —</option>
                                @foreach($mutuelles as $mut)
                                <option value="{{ $mut->id }}">{{ $mut->nom }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="fg">
                            <label>Dpt CRAM</label>
                            <select name="dpt_cram" id="f-dpt" class="fc">
                                <option value="">—</option>
                                @foreach($departments as $code => $nom)
                                <option value="{{ $code }}">{{ $code }} – {{ $nom }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="grid3" style="margin-bottom:10px;">
                        <div class="fg span3">
                            <label>Type de contrat</label>
                            <select name="type_contrat_id" id="f-type-contrat" class="fc">
                                <option value="">— Sélectionner —</option>
                                @foreach($typesContrat as $tc)
                                <option value="{{ $tc->id }}">{{ $tc->code }} – {{ $tc->libelle }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    {{-- Adresse --}}
                    <div class="sec-label">Adresse</div>
                    <div class="grid2" style="margin-bottom:10px;">
                        <div class="fg span2">
                            <label>Adresse ligne 1</label>
                            <input type="text" name="adresse1" id="f-adr1" class="fc" autocomplete="off">
                        </div>
                        <div class="fg span2">
                            <label>Adresse ligne 2</label>
                            <input type="text" name="adresse2" id="f-adr2" class="fc" autocomplete="off">
                        </div>
                        <div class="fg">
                            <label>Code postal</label>
                            <input type="text" name="code_postal" id="f-cp" class="fc" maxlength="10" autocomplete="off" oninput="suggestCommune()">
                        </div>
                        <div class="fg">
                            <label>Commune</label>
                            <select name="commune" id="f-commune" class="fc">
                                <option value="">—</option>
                            </select>
                        </div>
                    </div>

                    {{-- Contacts --}}
                    <div class="sec-label">Contacts</div>
                    <div class="grid4" style="margin-bottom:10px;">
                        <div class="fg">
                            <label>Téléphone</label>
                            <input type="text" name="telephone" id="f-tel" class="fc" autocomplete="off">
                        </div>
                        <div class="fg">
                            <label>Portable</label>
                            <input type="text" name="portable" id="f-portable" class="fc" autocomplete="off">
                        </div>
                        <div class="fg">
                            <label>Fax</label>
                            <input type="text" name="fax" id="f-fax" class="fc" autocomplete="off">
                        </div>
                        <div class="fg">
                            <label>Email</label>
                            <input type="email" name="email" id="f-email" class="fc" autocomplete="off">
                        </div>
                    </div>

                    {{-- Remarques --}}
                    <div class="sec-label">Remarques</div>
                    <div class="grid2" style="margin-bottom:10px;">
                        <div class="fg">
                            <label>Remarque 1</label>
                            <input type="text" name="remarque1" id="f-rem1" class="fc" autocomplete="off">
                        </div>
                        <div class="fg">
                            <label>Remarque 2</label>
                            <input type="text" name="remarque2" id="f-rem2" class="fc" autocomplete="off">
                        </div>
                    </div>

                    {{-- Onglet Données Libre / Contrat (visible si libre ou contrat coché) --}}
                    <div class="tab-section" id="tab-libre-contrat" style="display:none;">
                        <div class="tab-section-header">
                            <svg viewBox="0 0 24 24" width="13" height="13" style="stroke:var(--navy);fill:none;stroke-width:2;stroke-linecap:round;"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                            Données Libre / Contrat
                        </div>
                        <div class="tab-section-body">
                            <div class="grid3" style="margin-bottom:10px;">
                                <div class="fg">
                                    <label>Échéance</label>
                                    <select name="echeance" id="f-echeance" class="fc">
                                        <option value="parametre_general">Échéance paramètre général</option>
                                        <option value="nombre_jours">Nombre de jours</option>
                                        <option value="30_jours_fm">30 jours fin de mois</option>
                                        <option value="45_jours_fm">45 jours fin de mois</option>
                                    </select>
                                </div>
                                <div class="fg">
                                    <label>Saisie facture libre</label>
                                    <select name="saisie_facture_libre" id="f-saisie" class="fc">
                                        <option value="ttc">en TTC</option>
                                        <option value="ht">en HT</option>
                                    </select>
                                </div>
                            </div>
                            <div class="grid-remise">
                                <div class="fg">
                                    <label>Type de remise facture libre</label>
                                    <select name="type_remise" id="f-remise" class="fc">
                                        <option value="pas_remise">Pas de Remise</option>
                                        <option value="remise_ligne">Remise par Ligne</option>
                                        <option value="remise_fin">Remise en Fin de Facture</option>
                                    </select>
                                </div>
                                <div class="fg">
                                    <label>Code prestataire contrat</label>
                                    <input type="text" name="code_prestataire_contrat" id="f-code-prest" class="fc" autocomplete="off">
                                </div>
                                <div class="fg">
                                    <label>Taux de remise facture libre (%)</label>
                                    <input type="number" name="taux_remise_facture" id="f-taux-fact" class="fc" step="0.01" min="0" max="100">
                                </div>
                                <div class="fg">
                                    <label>Taux de remise facture d'avoir (%)</label>
                                    <input type="number" name="taux_remise_avoir" id="f-taux-avoir" class="fc" step="0.01" min="0" max="100">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>{{-- /fiche-body --}}

                <div class="fiche-actions">
                    <button type="submit" class="btn btn-save">
                        <svg viewBox="0 0 24 24" width="13" height="13" style="stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;"><polyline points="20 6 9 17 4 12"/></svg>
                        Enregistrer
                    </button>
                    <button type="button" class="btn btn-new" onclick="nouveauClient()">Nouveau</button>
                    <form id="del-form" method="POST" style="display:inline;margin-left:auto;">
                        @csrf
                        @method('DELETE')
                        <button type="button" class="btn btn-del" id="btn-del" style="display:none" onclick="supprimerClient()">Supprimer</button>
                    </form>
                </div>
            </form>
        </div>
    </div>

</div>{{-- /clients-layout --}}

@push('scripts')
<script>
const allClients = @json($clients->keyBy('id'));
let currentId = null;

// Codes INSEE par CP pour suggestion commune
const inseeData = @json(
    \App\Models\CodeInsee::whereIn('code_postal',
        $clients->pluck('code_postal')->filter()->unique()->values()->toArray()
    )->get(['code_postal','commune'])->groupBy('code_postal')
    ?? collect()
);

@if($selected)
document.addEventListener('DOMContentLoaded', () => selectClient({{ $selected->id }}));
@endif

// ── Filtrage liste ──────────────────────────────────────
function filterList() {
    const q = document.getElementById('search-input').value.toLowerCase();
    let n = 0;
    document.querySelectorAll('.client-item').forEach(el => {
        const show = el.dataset.search.includes(q);
        el.style.display = show ? '' : 'none';
        if (show) n++;
    });
    document.getElementById('list-footer').textContent = n + ' client' + (n>1?'s':'');
}

// ── Sélection ──────────────────────────────────────────
function selectClient(id) {
    currentId = id;
    const c = allClients[id];
    if (!c) return;

    document.querySelectorAll('.client-item').forEach(el => el.classList.remove('active'));
    document.getElementById('item-' + id)?.classList.add('active');
    showForm();

    document.getElementById('fiche-title').textContent =
        (c.prenom ? c.prenom + ' ' : '') + c.nom_patronymique;

    document.getElementById('form-method').value = 'PUT';
    document.getElementById('client-form').action = '/clients/' + id;
    document.getElementById('btn-del').style.display = 'flex';
    document.getElementById('del-form').action = '/clients/' + id;

    // Remplissage
    setv('f-tap',       c.is_tap,       'chk');
    setv('f-libre',     c.is_libre,     'chk');
    setv('f-contrat',   c.is_contrat,   'chk');
    setv('f-type-client', c.type_client);
    setv('f-civilite',  c.civilite);
    setv('f-nom',       c.nom_patronymique);
    setv('f-prenom',    c.prenom);
    setv('f-nom-usage', c.nom_usage);
    setv('f-insee',     c.no_insee);
    formatInsee(); // normalise et recalcule la clé
    setv('f-etranger',  c.client_etranger, 'chk');
    setv('f-ddn',       c.date_naissance ? c.date_naissance.substring(0,10) : '');
    setv('f-rang',      c.rang_naissance ?? 1);
    setv('f-decede',    c.decede, 'chk');
    setv('f-decede-le', c.decede_le ? c.decede_le.substring(0,10) : '');
    setv('f-misex',     c.mis_en_exception, 'chk');
    setv('f-adr1',      c.adresse1);
    setv('f-adr2',      c.adresse2);
    setv('f-cp',        c.code_postal);
    setv('f-tel',       c.telephone);
    setv('f-portable',  c.portable);
    setv('f-fax',       c.fax);
    setv('f-email',     c.email);
    setv('f-rem1',      c.remarque1);
    setv('f-rem2',      c.remarque2);
    setv('f-caisse',    c.caisse_id);
    setv('f-mutuelle',  c.mutuelle_id);
    setv('f-type-contrat', c.type_contrat_id);
    setv('f-dpt',       c.dpt_cram);
    setv('f-echeance',  c.echeance);
    setv('f-saisie',    c.saisie_facture_libre);
    setv('f-remise',    c.type_remise);
    setv('f-taux-fact', c.taux_remise_facture);
    setv('f-taux-avoir',c.taux_remise_avoir);
    setv('f-code-prest',c.code_prestataire_contrat);

    // Commune
    setCommune(c.code_postal, c.commune);

    toggleDecede();
    updateTypeVis();
    document.getElementById('fiche-body').scrollTop = 0;
}

function setv(id, val, type) {
    const el = document.getElementById(id);
    if (!el) return;
    if (type === 'chk') el.checked = !!val;
    else el.value = val ?? '';
}

// ── Nouveau ────────────────────────────────────────────
function nouveauClient() {
    currentId = null;
    document.querySelectorAll('.client-item').forEach(el => el.classList.remove('active'));
    showForm();
    document.getElementById('fiche-title').textContent = 'Nouveau client';
    document.getElementById('form-method').value = 'POST';
    document.getElementById('client-form').action = '{{ route('clients.store') }}';
    document.getElementById('btn-del').style.display = 'none';
    document.getElementById('client-form').reset();
    formatInsee(); // remet la clé et l'état visuel à zéro
    document.getElementById('f-rang').value = 1;
    document.getElementById('tab-libre-contrat').style.display = 'none';
    document.getElementById('f-decede-le').style.display = 'none';
    document.getElementById('fiche-body').scrollTop = 0;
}

function showForm() {
    document.getElementById('fiche-empty').style.display = 'none';
    document.getElementById('fiche-form').style.display  = '';
}

// ── No INSEE (NIR) : format + clé automatique ──────────
// Structure du NIR (13 caractères) :
//   [0]    sexe (1,2 — 3,4,7,8 provisoires)
//   [1-2]  année de naissance
//   [3-4]  mois de naissance
//   [5-6]  département (01-95, 2A/2B Corse, 96-99 né à l'étranger)
//   [7-9]  code commune INSEE
//   [10-12] numéro d'ordre
function formatInsee() {
    const inp = document.getElementById('f-insee');
    const src = inp.value.toUpperCase();
    let out = '';
    for (const ch of src) {
        if (out.length >= 13) break;
        if (/[0-9]/.test(ch)) out += ch;
        // A/B uniquement en 7e position (Corse : 2A / 2B)
        else if ((ch === 'A' || ch === 'B') && out.length === 6 && out[5] === '2') out += ch;
    }
    if (inp.value !== out) inp.value = out;
    majCleInsee();
}

function majCleInsee() {
    const nir  = document.getElementById('f-insee').value;
    const cle  = document.getElementById('f-cle');
    const inp  = document.getElementById('f-insee');
    const hint = document.getElementById('insee-hint');

    inp.classList.remove('insee-ok', 'insee-partiel');
    hint.classList.remove('hint-err');

    if (nir.length === 0) {
        cle.value = '';
        hint.textContent = '(13 caractères)';
        return;
    }
    if (nir.length < 13) {
        cle.value = '';
        inp.classList.add('insee-partiel');
        hint.textContent = '(' + nir.length + '/13)';
        return;
    }

    // Corse : 2A → 19, 2B → 18 avant calcul
    const dept = nir.substring(5, 7);
    let num = nir;
    if      (dept === '2A') num = nir.substring(0, 5) + '19' + nir.substring(7);
    else if (dept === '2B') num = nir.substring(0, 5) + '18' + nir.substring(7);

    if (!/^\d{13}$/.test(num)) {
        cle.value = '';
        hint.textContent = '(format invalide)';
        hint.classList.add('hint-err');
        return;
    }

    cle.value = String(97 - (Number(num) % 97)).padStart(2, '0');
    inp.classList.add('insee-ok');
    hint.textContent = '(valide)';
}

// ── Toggle décédé ──────────────────────────────────────
function toggleDecede() {
    const checked = document.getElementById('f-decede').checked;
    document.getElementById('f-decede-le').style.display = checked ? '' : 'none';
}

// ── Onglet Libre/Contrat ────────────────────────────────
function updateTypeVis() {
    const libre   = document.getElementById('f-libre').checked;
    const contrat = document.getElementById('f-contrat').checked;
    document.getElementById('tab-libre-contrat').style.display =
        (libre || contrat) ? '' : 'none';
}

// ── Suggestion commune par code postal ─────────────────
function suggestCommune(forceValue) {
    const cp  = document.getElementById('f-cp').value.trim();
    const sel = document.getElementById('f-commune');
    sel.innerHTML = '<option value="">—</option>';
    if (cp.length >= 4 && inseeData[cp]) {
        inseeData[cp].forEach(row => {
            const opt = document.createElement('option');
            opt.value = row.commune;
            opt.textContent = row.commune;
            if (forceValue && row.commune === forceValue) opt.selected = true;
            sel.appendChild(opt);
        });
    } else if (forceValue) {
        const opt = document.createElement('option');
        opt.value = forceValue; opt.textContent = forceValue; opt.selected = true;
        sel.appendChild(opt);
    }
}

function setCommune(cp, commune) {
    document.getElementById('f-cp').value = cp ?? '';
    suggestCommune(commune);
}

// ── Suppression ────────────────────────────────────────
function supprimerClient() {
    if (!currentId) return;
    if (confirm('Supprimer ce client ? Cette action est irréversible.')) {
        document.getElementById('del-form').submit();
    }
}
</script>
@endpush
@endsection