@extends('layouts.app')
@section('title', $client ? 'Modifier un assuré' : 'Nouvel assuré')
@section('page-title', 'Fichiers de base — Clients')

@push('styles')
<style>
    .c-card { background:#fff; border-radius:12px; border:1px solid var(--border); padding:18px 22px; margin-bottom:14px; }
    .f-label { font-size:12px; font-weight:700; color:var(--text-muted); white-space:nowrap; }
    .f-input  { border:1.5px solid var(--border); border-radius:7px; padding:5px 9px; font-family:'Nunito',sans-serif; font-size:13px; font-weight:600; color:var(--text); background:#fff; outline:none; transition:border-color 0.2s; }
    .f-input:focus { border-color:var(--yellow); }
    .f-select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; background-size:14px; padding-right:28px; }
    .check-lbl { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--text); cursor:pointer; white-space:nowrap; }
    .check-lbl input { accent-color:var(--navy); cursor:pointer; }

    .frow { display:grid; align-items:center; gap:6px 10px; margin-bottom:8px; }
    .frow-1 { grid-template-columns: 160px 1fr; }
    .frow-2 { grid-template-columns: 160px 1fr 160px 1fr; }
    .frow-3 { grid-template-columns: 160px 1fr 160px 1fr 160px 1fr; }

    .s-title { font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:1px; color:var(--navy); border-bottom:2px solid var(--yellow); padding-bottom:5px; margin-bottom:12px; }

    .tab-bar { display:flex; gap:0; border-bottom:2.5px solid var(--yellow); margin-bottom:14px; }
    .tab-btn { padding:8px 22px; font-family:'Nunito',sans-serif; font-size:13px; font-weight:800; border:none; background:none; cursor:pointer; border-radius:8px 8px 0 0; color:var(--text-muted); transition:background 0.15s, color 0.15s; }
    .tab-btn.active { background:var(--yellow); color:var(--navy); }
    .tab-pane { display:none; }
    .tab-pane.active { display:block; }

    .benef-table { width:100%; border-collapse:collapse; }
    .benef-table th { background:#F4F6FB; padding:7px 8px; font-size:11px; font-weight:800; color:var(--text-muted); text-align:left; border-bottom:1.5px solid var(--border); white-space:nowrap; }
    .benef-table td { padding:4px 6px; font-size:12px; font-weight:600; color:var(--text); border-bottom:1px solid var(--border); vertical-align:middle; }
    .benef-table td input[type="text"],
    .benef-table td input[type="date"],
    .benef-table td select { border:1px solid var(--border); border-radius:5px; padding:3px 6px; font-size:12px; font-family:'Nunito',sans-serif; font-weight:600; width:100%; box-sizing:border-box; }
    .benef-table td input[type="number"] { border:1px solid var(--border); border-radius:5px; padding:3px 6px; font-size:12px; width:40px; text-align:center; }
    .benef-table td input[type="checkbox"] { accent-color:var(--navy); width:16px; height:16px; cursor:pointer; }
    .benef-wrap { border:1.5px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:10px; }
    .btn-add-ben { background:var(--navy); color:#fff; border:none; border-radius:20px; padding:6px 16px; font-family:'Nunito',sans-serif; font-size:12px; font-weight:800; cursor:pointer; display:inline-flex; align-items:center; gap:6px; margin-top:6px; }

    .action-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; border-top:2px solid var(--border); padding-top:14px; margin-top:4px; }
    .act-left  { display:flex; gap:10px; align-items:center; }
    .act-right { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
    .btn-y     { background:var(--yellow); color:var(--navy); border:none; border-radius:20px; padding:8px 22px; font-family:'Nunito',sans-serif; font-size:13px; font-weight:800; cursor:pointer; }
    .btn-y:hover { background:var(--yellow-dark); }
    .btn-navy  { background:var(--navy); color:#fff; border:none; border-radius:20px; padding:8px 22px; font-family:'Nunito',sans-serif; font-size:13px; font-weight:800; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:7px; }
    .btn-navy:hover { background:var(--navy-light); color:#fff; }
    .btn-ghost { background:#fff; color:var(--text-muted); border:1.5px solid var(--border); border-radius:20px; padding:7px 18px; font-family:'Nunito',sans-serif; font-size:13px; font-weight:700; cursor:pointer; text-decoration:none; }
    .btn-ghost:hover { background:#F4F6FB; }
    .btn-danger { background:#fff; color:#E53E3E; border:1.5px solid #E53E3E; border-radius:20px; padding:7px 18px; font-family:'Nunito',sans-serif; font-size:13px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
    .btn-danger:hover { background:#FFF5F5; }
    .icon-btn  { background:none; border:none; cursor:pointer; padding:4px 7px; border-radius:5px; display:inline-flex; align-items:center; transition:background 0.15s; }
    .icon-btn:hover { background:#F4F6FB; }
    .note-print { font-size:11px; font-weight:600; color:var(--text-muted); font-style:italic; }
</style>
@endpush

@section('content')

@php $c = $client; @endphp

<form method="POST" action="{{ $c ? route('clients.update', $c->id) : route('clients.store') }}" autocomplete="off">
@csrf
@if($c) @method('PUT') @endif

{{-- ===== En-tête type client ===== --}}
<div class="c-card">
    <div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;">
        <h2 style="font-size:16px; font-weight:900; color:var(--navy); margin:0;">
            {{ $c ? ($c->nom_patronymique.($c->prenom ? ', '.$c->prenom : '')) : 'Nouvel assuré' }}
        </h2>
        <div style="display:flex; gap:10px; align-items:center; flex-wrap:wrap;">
            <label class="check-lbl"><input type="checkbox" name="is_tap"     value="1" {{ $c?->is_tap     ? 'checked' : '' }}> Client TAP</label>
            <label class="check-lbl"><input type="checkbox" name="is_libre"   value="1" id="chk-libre"   {{ $c?->is_libre   ? 'checked' : '' }} onchange="updateTabs()"> Client Libre</label>
            <label class="check-lbl"><input type="checkbox" name="is_contrat" value="1" id="chk-contrat" {{ $c?->is_contrat ? 'checked' : '' }} onchange="updateTabs()"> Client contrat</label>
            <div style="display:flex; align-items:center; gap:6px;">
                <span class="f-label">Type de client</span>
                <select name="type_client" class="f-input f-select">
                    <option value="particulier"  {{ ($c?->type_client ?? 'particulier') === 'particulier'   ? 'selected' : '' }}>Particulier</option>
                    <option value="professionnel"{{ ($c?->type_client) === 'professionnel' ? 'selected' : '' }}>Professionnel</option>
                    <option value="organisme"    {{ ($c?->type_client) === 'organisme'    ? 'selected' : '' }}>Organisme</option>
                </select>
            </div>
            <label class="check-lbl">
                <input type="checkbox" name="decede" value="1" id="chk-decede" {{ $c?->decede ? 'checked' : '' }} onchange="toggleDecede()"> Décédé le
            </label>
            <input type="date" name="decede_le" id="inp-decede-le" class="f-input" style="width:140px;{{ $c?->decede ? '' : 'display:none;' }}" value="{{ $c?->decede_le?->format('Y-m-d') }}">
            <label class="check-lbl"><input type="checkbox" name="mis_en_exception" value="1" {{ $c?->mis_en_exception ? 'checked' : '' }}> Client mis en ex.</label>
        </div>
    </div>
</div>

{{-- ===== Identité ===== --}}
<div class="c-card">
    <div class="s-title">Identité</div>
    <div class="frow frow-2">
        <label class="f-label">Civilité</label>
        <select name="civilite" class="f-input f-select" style="max-width:180px;">
            <option value="">Sélectionnez la civilité</option>
            @foreach(['M.','Mme','Mlle','Dr','Pr'] as $civ)
            <option value="{{ $civ }}" {{ ($c?->civilite) === $civ ? 'selected' : '' }}>{{ $civ }}</option>
            @endforeach
        </select>
        <label class="f-label">No INSEE <span id="insee-hint" style="font-size:10px;font-weight:600;color:var(--text-muted);">(13 caractères)</span></label>
        <div style="display:flex; gap:6px; align-items:center;">
            <input type="text" name="no_insee" id="f-insee" class="f-input" style="width:160px;font-family:monospace;letter-spacing:.06em;"
                   value="{{ $c?->no_insee }}" placeholder="No INSEE" maxlength="13" inputmode="numeric" autocomplete="off">
            <svg viewBox="0 0 24 24" style="width:18px;height:18px;stroke:var(--text-muted);fill:none;stroke-width:2;flex-shrink:0;"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
            <input type="text" name="cle_insee" id="f-cle" class="f-input" style="width:60px;font-family:monospace;font-weight:800;text-align:center;background:#EEF2FF;"
                   value="{{ $c?->cle_insee }}" placeholder="Clé" maxlength="2" readonly tabindex="-1" title="Clé calculée automatiquement">
        </div>
    </div>
    <div class="frow frow-2">
        <label class="f-label">Nom Patronymique <span style="font-size:10px;">(naissance)</span> *</label>
        <input type="text" name="nom_patronymique" class="f-input" value="{{ $c?->nom_patronymique }}" required>
        <label class="f-label">Prénom</label>
        <input type="text" name="prenom" class="f-input" value="{{ $c?->prenom }}">
    </div>
    <div class="frow frow-2">
        <label class="f-label">Nom d'usage <span style="font-size:10px;">(marital)</span></label>
        <input type="text" name="nom_usage" class="f-input" value="{{ $c?->nom_usage }}">
        <label class="f-label">
            <label class="check-lbl"><input type="checkbox" name="client_etranger" value="1" {{ $c?->client_etranger ? 'checked' : '' }}> Client Étranger</label>
        </label>
    </div>
    <div class="frow frow-2">
        <label class="f-label">Date de naissance</label>
        <input type="date" name="date_naissance" class="f-input" style="width:160px;" value="{{ $c?->date_naissance?->format('Y-m-d') }}">
        <label class="f-label">Rang naissance</label>
        <input type="number" name="rang_naissance" class="f-input" style="width:70px;" min="1" value="{{ $c?->rang_naissance ?? 1 }}">
    </div>
</div>

{{-- ===== Adresse + Contact ===== --}}
<div class="c-card">
    <div style="display:grid; grid-template-columns:1fr 1fr; gap:20px;">
        <div>
            <div class="s-title">Adresse</div>
            <div style="display:flex; align-items:center; gap:8px; margin-bottom:8px;">
                <label class="f-label" style="width:90px;">Adresse</label>
                <input type="text" name="adresse1" class="f-input" style="flex:1;" value="{{ $c?->adresse1 }}">
            </div>
            <div style="display:flex; align-items:center; gap:8px; margin-bottom:8px;">
                <label class="f-label" style="width:90px;"></label>
                <input type="text" name="adresse2" class="f-input" style="flex:1;" value="{{ $c?->adresse2 }}">
            </div>
            <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px;">
                <label class="f-label" style="width:90px;">Code Postal</label>
                <input type="text" name="code_postal" class="f-input" style="width:80px;" value="{{ $c?->code_postal }}">
                <label class="f-label">Commune</label>
                <input type="text" name="commune" class="f-input" style="min-width:160px;flex:1;" value="{{ $c?->commune }}" placeholder="Commune">
            </div>
            <div style="display:flex; align-items:center; gap:8px;">
                <label class="f-label" style="width:90px;">Recherche</label>
                <input type="text" class="f-input" style="flex:1;" placeholder="Chercher une ville…" id="commune-search">
                <button type="button" class="icon-btn">
                    <svg viewBox="0 0 24 24" style="width:15px;height:15px;stroke:var(--text-muted);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>
                </button>
            </div>
        </div>
        <div>
            <div class="s-title">Contact</div>
            <div style="display:flex; align-items:center; gap:8px; margin-bottom:8px;">
                <label class="f-label" style="width:90px;">Téléphone</label>
                <input type="tel" name="telephone" class="f-input" style="max-width:180px;" value="{{ $c?->telephone }}">
            </div>
            <div style="display:flex; align-items:center; gap:8px; margin-bottom:8px;">
                <label class="f-label" style="width:90px;">Portable</label>
                <input type="tel" name="portable" class="f-input" style="max-width:180px;" value="{{ $c?->portable }}">
            </div>
            <div style="display:flex; align-items:center; gap:8px; margin-bottom:8px;">
                <label class="f-label" style="width:90px;">Fax</label>
                <input type="tel" name="fax" class="f-input" style="max-width:180px;" value="{{ $c?->fax }}">
            </div>
            <div style="display:flex; align-items:center; gap:8px;">
                <label class="f-label" style="width:90px;">Email</label>
                <input type="email" name="email" class="f-input" value="{{ $c?->email }}">
            </div>
        </div>
    </div>
</div>

{{-- ===== Remarques ===== --}}
<div class="c-card">
    <div class="s-title">Remarques</div>
    <div style="display:flex; align-items:center; gap:8px; margin-bottom:8px;">
        <label class="f-label" style="width:90px;">Remarque 1</label>
        <input type="text" name="remarque1" class="f-input" style="flex:1;" value="{{ $c?->remarque1 }}">
    </div>
    <div style="display:flex; align-items:center; gap:8px;">
        <label class="f-label" style="width:90px;">Remarque 2</label>
        <input type="text" name="remarque2" class="f-input" style="flex:1;" value="{{ $c?->remarque2 }}">
    </div>
</div>

{{-- ===== Onglets ===== --}}
<div class="c-card">
    <div class="tab-bar">
        <button type="button" class="tab-btn active" onclick="switchTab('tap', this)">Données TAP</button>
        <button type="button" class="tab-btn" id="tab-btn-libre" style="{{ ($c?->is_libre || $c?->is_contrat) ? '' : 'display:none;' }}" onclick="switchTab('libre', this)">Données Libre / Contrat</button>
    </div>

    {{-- ---- TAP ---- --}}
    <div class="tab-pane active" id="tab-tap">
        {{-- Ligne 1 --}}
        <div style="display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px;">
            <label class="f-label">Date de fin de droit</label>
            <input type="date" name="date_fin_droit" class="f-input" style="width:150px;" value="{{ $c?->date_fin_droit?->format('Y-m-d') }}">
            <label class="f-label" style="margin-left:8px;">Taux de prise en charge</label>
            <input type="text"   name="taux_prise_en_charge" class="f-input" style="width:55px;" value="{{ $c?->taux_prise_en_charge }}">
            <label class="f-label" style="margin-left:8px;">Code affiliation</label>
            <input type="text"   name="code_affiliation" class="f-input" style="width:110px;" value="{{ $c?->code_affiliation }}">
            <label class="f-label" style="margin-left:8px;">Situation Particulière</label>
            <select name="situation_particuliere" class="f-input f-select" style="width:180px;">
                <option value=""></option>
                @foreach(['ALD','Maternité','Accident du travail','Invalidité','CMU','C2S'] as $sp)
                <option value="{{ $sp }}" {{ ($c?->situation_particuliere) === $sp ? 'selected' : '' }}>{{ $sp }}</option>
                @endforeach
            </select>
        </div>
        {{-- Ligne 2 --}}
        <div style="display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px;">
            <label class="f-label">Caisse</label>
            <select name="caisse_id" class="f-input f-select" style="min-width:200px;">
                <option value="">— Sélectionner —</option>
                @foreach($caisses as $caisse)
                <option value="{{ $caisse->id }}" {{ ($c?->caisse_id) == $caisse->id ? 'selected' : '' }}>{{ $caisse->nom }}</option>
                @endforeach
            </select>
            <label class="f-label" style="margin-left:8px;">Dpt de la CRAM</label>
            <select name="dpt_cram" class="f-input f-select" style="width:110px;">
                <option value="">—</option>
                @foreach($departments as $code => $nom)
                <option value="{{ $code }}" {{ ($c?->dpt_cram) === $code ? 'selected' : '' }}>{{ $code }}</option>
                @endforeach
            </select>
            <label class="f-label" style="margin-left:8px;">No CRAM</label>
            <input type="text" name="no_cram" class="f-input" style="width:55px;" value="{{ $c?->no_cram }}">
            <label class="f-label" style="margin-left:8px;">Type Contrat</label>
            <select name="type_contrat_id" class="f-input f-select" style="width:180px;">
                <option value="">— Sélectionner —</option>
                @foreach($typesContrat as $tc)
                <option value="{{ $tc->id }}" {{ ($c?->type_contrat_id) == $tc->id ? 'selected' : '' }}>{{ $tc->code }} – {{ $tc->libelle }}</option>
                @endforeach
            </select>
        </div>
        {{-- Ligne 3 --}}
        <div style="display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px;">
            <label class="f-label">Mutuelle</label>
            <select name="mutuelle_id" class="f-input f-select" style="min-width:200px;">
                <option value="">— Sélectionner —</option>
                @foreach($mutuelles as $mut)
                <option value="{{ $mut->id }}" {{ ($c?->mutuelle_id) == $mut->id ? 'selected' : '' }}>{{ $mut->nom }}</option>
                @endforeach
            </select>
            <label class="f-label" style="margin-left:8px;">No adhérent à la mutuelle</label>
            <input type="text" name="no_adherent_mutuelle" class="f-input" style="width:130px;" value="{{ $c?->no_adherent_mutuelle }}">
            <label class="f-label" style="margin-left:8px;">No org. compl.</label>
            <input type="text" name="no_org_compl" class="f-input" style="width:130px;" value="{{ $c?->no_org_compl }}">
        </div>

        {{-- Bénéficiaires --}}
        <div class="s-title" style="margin-top:6px;">Bénéficiaires</div>
        <div class="benef-wrap">
            <table class="benef-table">
                <thead>
                    <tr>
                        <th style="width:70px;">Civilité</th>
                        <th>Nom</th>
                        <th>Prénom</th>
                        <th style="width:120px;">Date Naiss.</th>
                        <th style="width:55px; text-align:center;">Naiss. Et.</th>
                        <th style="width:45px; text-align:center;">Rang</th>
                        <th style="width:120px;">Lien assuré</th>
                        <th style="width:65px; text-align:center;">Ex client</th>
                        <th style="width:55px; text-align:center;">Décédé</th>
                        <th style="width:30px;"></th>
                    </tr>
                </thead>
                <tbody id="benef-body">
                    @php
                    $bens = $c ? $c->beneficiaires : collect();
                    $nbLignes = max($bens->count(), 3);
                    @endphp
                    @for($i = 0; $i < $nbLignes; $i++)
                    @php $b = $bens->get($i); @endphp
                    <tr>
                        <td><select name="ben_civilite[{{ $i }}]" class="f-input f-select" style="padding-right:20px; font-size:12px;">
                            <option value=""></option>
                            @foreach(['M.','Mme','Mlle','Dr'] as $civ)
                            <option value="{{ $civ }}" {{ ($b?->civilite) === $civ ? 'selected':'' }}>{{ $civ }}</option>
                            @endforeach
                        </select></td>
                        <td><input type="text" name="ben_nom[{{ $i }}]" value="{{ $b?->nom }}"></td>
                        <td><input type="text" name="ben_prenom[{{ $i }}]" value="{{ $b?->prenom }}"></td>
                        <td><input type="date" name="ben_date_naissance[{{ $i }}]" value="{{ $b?->date_naissance?->format('Y-m-d') }}"></td>
                        <td style="text-align:center;"><input type="checkbox" name="ben_naissance_etranger[{{ $i }}]" {{ $b?->naissance_etranger ? 'checked':'' }}></td>
                        <td><input type="number" name="ben_rang[{{ $i }}]" value="{{ $b?->rang ?? ($i+1) }}" min="1"></td>
                        <td><input type="text" name="ben_lien[{{ $i }}]" value="{{ $b?->lien_assure }}"></td>
                        <td style="text-align:center;"><input type="checkbox" name="ben_ex_client[{{ $i }}]" {{ $b?->ex_client ? 'checked':'' }}></td>
                        <td style="text-align:center;"><input type="checkbox" name="ben_decede[{{ $i }}]" {{ $b?->decede ? 'checked':'' }}></td>
                        <td><button type="button" onclick="this.closest('tr').remove()" style="background:none;border:none;cursor:pointer;color:#E53E3E;font-size:18px;line-height:1;padding:0 4px;">×</button></td>
                    </tr>
                    @endfor
                </tbody>
            </table>
        </div>
        <button type="button" class="btn-add-ben" onclick="addBeneficiaire()">
            <svg viewBox="0 0 24 24" style="width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            Ajouter un bénéficiaire
        </button>
    </div>

    {{-- ---- Libre / Contrat ---- --}}
    <div class="tab-pane" id="tab-libre">
        <div class="s-title">Données Libre / Contrat</div>
        <div class="frow frow-2">
            <label class="f-label">Échéance</label>
            <select name="echeance" class="f-input f-select">
                <option value="parametre_general" {{ ($c?->echeance ?? 'parametre_general') === 'parametre_general' ? 'selected' : '' }}>Échéance paramètre général</option>
                <option value="nombre_jours"  {{ ($c?->echeance) === 'nombre_jours'  ? 'selected' : '' }}>Nombre de jours</option>
                <option value="30_jours_fm"   {{ ($c?->echeance) === '30_jours_fm'   ? 'selected' : '' }}>30 jours fin de mois</option>
                <option value="45_jours_fm"   {{ ($c?->echeance) === '45_jours_fm'   ? 'selected' : '' }}>45 jours fin de mois</option>
            </select>
            <label class="f-label">Saisie facture libre</label>
            <select name="saisie_facture_libre" class="f-input f-select" style="width:140px;">
                <option value="ttc" {{ ($c?->saisie_facture_libre ?? 'ttc') === 'ttc' ? 'selected' : '' }}>en TTC</option>
                <option value="ht"  {{ ($c?->saisie_facture_libre) === 'ht'           ? 'selected' : '' }}>en HT</option>
            </select>
        </div>
        <div class="frow frow-2">
            <label class="f-label">Type de remise facture libre</label>
            <select name="type_remise" class="f-input f-select">
                <option value="pas_remise"   {{ ($c?->type_remise ?? 'pas_remise') === 'pas_remise'   ? 'selected' : '' }}>Pas de Remise</option>
                <option value="remise_ligne" {{ ($c?->type_remise) === 'remise_ligne' ? 'selected' : '' }}>Remise par Ligne</option>
                <option value="remise_fin"   {{ ($c?->type_remise) === 'remise_fin'   ? 'selected' : '' }}>Remise en Fin de Facture</option>
            </select>
            <label class="f-label">Code prestataire contrat</label>
            <input type="text" name="code_prestataire_contrat" class="f-input" value="{{ $c?->code_prestataire_contrat }}">
        </div>
        <div class="frow frow-2">
            <label class="f-label">Taux remise facture libre (%)</label>
            <input type="number" name="taux_remise_facture" class="f-input" style="width:90px;" step="0.01" min="0" max="100" value="{{ $c?->taux_remise_facture }}">
            <label class="f-label">Taux remise facture d'avoir (%)</label>
            <input type="number" name="taux_remise_avoir"   class="f-input" style="width:90px;" step="0.01" min="0" max="100" value="{{ $c?->taux_remise_avoir }}">
        </div>
    </div>
</div>

{{-- ===== Actions ===== --}}
<div class="c-card">
    <div class="action-bar">
        <div class="act-left">
            <button type="submit" class="btn-y">
                <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:var(--navy);fill:none;stroke-width:2.5;stroke-linecap:round;vertical-align:middle;margin-right:5px;"><polyline points="20 6 9 17 4 12"/></svg>Valider
            </button>
            <button type="button" class="btn-navy" onclick="ouvrirPec()">PEC +</button>
            @if($c)
            <button type="button" class="btn-danger" onclick="document.getElementById('del-form').submit()">
                <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:#E53E3E;fill:none;stroke-width:2;stroke-linecap:round;"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/><path d="M9 6V4h6v2"/></svg>Supprimer
            </button>
            @endif
            <a href="{{ route('clients.index') }}" class="btn-ghost">Quitter</a>
        </div>
        <div class="act-right">
            <button type="button" class="icon-btn" title="Envoyer par email">
                <svg viewBox="0 0 24 24" style="width:22px;height:22px;stroke:var(--navy);fill:none;stroke-width:2;stroke-linecap:round;"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
            </button>
            <button type="button" class="icon-btn" title="Imprimer">
                <svg viewBox="0 0 24 24" style="width:22px;height:22px;stroke:var(--navy);fill:none;stroke-width:2;stroke-linecap:round;"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
            </button>
            <button type="button" class="icon-btn" title="Attestation de transport" style="display:flex;align-items:center;gap:7px;padding:5px 12px;border-radius:20px;border:1.5px solid var(--border);">
                <svg viewBox="0 0 24 24" style="width:16px;height:16px;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>
                <span style="font-size:12px;font-weight:700;color:var(--navy);white-space:nowrap;">Attestation de transport client</span>
            </button>
            <span class="note-print">ATTENTION l'impression va valider les modifications effectuées</span>
        </div>
    </div>
</div>

</form>

@if($c)
<form id="del-form" method="POST" action="{{ route('clients.destroy', $c->id) }}" onsubmit="return confirm('Supprimer cet assuré ?')">
    @csrf @method('DELETE')
</form>
@endif

{{-- Champs cachés PEC+ (soumis avec le formulaire principal) --}}
<input type="hidden" name="pec_date_prescription" id="pec_date_prescription" value="{{ old('pec_date_prescription', $c?->pec_date_prescription?->format('Y-m-d')) }}">
<input type="hidden" name="pec_type_prestation"   id="pec_type_prestation"   value="{{ old('pec_type_prestation',   $c?->pec_type_prestation ?? 'TXI') }}">
<input type="hidden" name="pec_date_realisation"  id="pec_date_realisation"  value="{{ old('pec_date_realisation',  $c?->pec_date_realisation?->format('Y-m-d')) }}">
<input type="hidden" name="pec_code_grand_regime" id="pec_code_grand_regime" value="{{ old('pec_code_grand_regime', $c?->pec_code_grand_regime ?? '01') }}">
<input type="hidden" name="pec_ald"               id="pec_ald"               value="{{ old('pec_ald',               $c?->pec_ald ?? true) ? '1' : '0' }}">
<input type="hidden" name="pec_100pct"            id="pec_100pct"            value="{{ old('pec_100pct',            $c?->pec_100pct ?? true) ? '1' : '0' }}">
<input type="hidden" name="pec_l115"              id="pec_l115"              value="{{ old('pec_l115',              $c?->pec_l115 ?? false) ? '1' : '0' }}">
<input type="hidden" name="pec_accident_travail"  id="pec_accident_travail"  value="{{ old('pec_accident_travail',  $c?->pec_accident_travail ?? false) ? '1' : '0' }}">

{{-- MODAL PEC+ --}}
<div id="modalPec" style="display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(26,35,64,0.5);z-index:99999;align-items:center;justify-content:center;">
    <div style="background:#D6E8F7;border-radius:14px;padding:0;width:480px;max-width:95vw;box-shadow:0 8px 40px rgba(26,35,64,0.25);overflow:hidden">

        {{-- Titre --}}
        <div style="background:linear-gradient(135deg,#7B9DC8,#A8C4E0);padding:16px 24px;text-align:center">
            <div style="font-size:15px;font-weight:800;color:#1A2340">Gestion du Téléservice PEC+</div>
        </div>

        <div style="padding:20px 28px;display:flex;flex-direction:column;gap:12px">

            {{-- Nom patient --}}
            <div style="font-size:15px;font-weight:800;color:#1A2340;margin-bottom:4px" id="pecNomPatient"></div>

            {{-- NIR + Clé --}}
            <div style="display:flex;align-items:center;gap:10px">
                <span style="font-size:12px;font-weight:700;color:#1A2340;width:130px">NIR</span>
                <input type="text" id="pec_nir_disp" style="flex:1;padding:5px 9px;border:1.5px solid #A8C4E0;border-radius:6px;background:#fff;font-size:12px">
                <span style="font-size:12px;font-weight:700;color:#1A2340">Clé</span>
                <input type="text" id="pec_cle_disp" style="width:44px;padding:5px 9px;border:1.5px solid #A8C4E0;border-radius:6px;background:#fff;font-size:12px;text-align:center">
            </div>

            {{-- Client étranger --}}
            <div style="display:flex;align-items:center;gap:8px">
                <input type="checkbox" id="pec_etranger_disp" disabled style="width:14px;height:14px">
                <label style="font-size:12px;color:#1A2340">Client étranger</label>
            </div>

            {{-- Date naissance + Rang --}}
            <div style="display:flex;align-items:center;gap:10px">
                <span style="font-size:12px;font-weight:700;color:#1A2340;width:130px">Date de Naissance</span>
                <input type="date" id="pec_naissance_disp" style="width:150px;padding:5px 9px;border:1.5px solid #A8C4E0;border-radius:6px;background:#fff;font-size:12px">
                <span style="font-size:12px;font-weight:700;color:#1A2340;margin-left:10px">Rang</span>
                <input type="number" id="pec_rang_disp" min="1" style="width:54px;padding:5px 9px;border:1.5px solid #A8C4E0;border-radius:6px;background:#fff;font-size:12px;text-align:center">
            </div>

            {{-- Date de Prescription --}}
            <div style="display:flex;align-items:center;gap:10px">
                <span style="font-size:12px;font-weight:700;color:#1A2340;width:130px">Date de Prescription</span>
                <input type="date" id="pec_date_prescription_inp" style="padding:5px 9px;border:1.5px solid #A8C4E0;border-radius:6px;background:#fff;font-size:12px">
            </div>

            {{-- Type prestation --}}
            <div style="display:flex;align-items:center;gap:10px">
                <span style="font-size:12px;font-weight:700;color:#1A2340;width:130px">Type prestation</span>
                <select id="pec_type_prestation_inp" style="padding:5px 9px;border:1.5px solid #A8C4E0;border-radius:6px;background:#fff;font-size:12px">
                    <option value="TXI">TXI</option>
                    <option value="TAM">TAM</option>
                    <option value="VSL">VSL</option>
                </select>
            </div>

            {{-- Date de réalisation --}}
            <div style="display:flex;align-items:center;gap:10px">
                <span style="font-size:12px;font-weight:700;color:#1A2340;width:130px">Date de réalisation</span>
                <input type="date" id="pec_date_realisation_inp" style="padding:5px 9px;border:1.5px solid #A8C4E0;border-radius:6px;background:#fff;font-size:12px">
            </div>

            {{-- Code grand régime --}}
            <div style="display:flex;align-items:center;gap:10px">
                <span style="font-size:12px;font-weight:700;color:#1A2340;width:130px">Code grand régime</span>
                <input type="text" id="pec_code_grand_regime_inp" maxlength="5" style="width:70px;padding:5px 9px;border:1.5px solid #A8C4E0;border-radius:6px;background:#fff;font-size:12px;text-align:center">
            </div>

            {{-- Questions Oui/Non --}}
            @php
            $questions = [
                ['id'=>'pec_ald_inp',              'label'=>"S'agit-il de soins en rapport avec une Affection Longue Durée ?", 'defaut'=>true],
                ['id'=>'pec_100pct_inp',            'label'=>"S'agit-il d'une prise en charge à 100% ?", 'defaut'=>true],
                ['id'=>'pec_l115_inp',              'label'=>"S'agit-il de soins en rapport avec article L115 ?", 'defaut'=>false],
                ['id'=>'pec_accident_travail_inp',  'label'=>"S'agit-il de soins en rapport avec un Accident de Travail ?", 'defaut'=>false],
            ];
            @endphp
            @foreach($questions as $q)
            <div style="font-size:12px;color:#1A2340">
                <div style="margin-bottom:4px;font-weight:600">{{ $q['label'] }}</div>
                <div style="display:flex;gap:24px">
                    <label style="display:flex;align-items:center;gap:6px">
                        <input type="radio" name="{{ $q['id'] }}" value="1" {{ $q['defaut'] ? 'checked' : '' }}>
                        Oui
                    </label>
                    <label style="display:flex;align-items:center;gap:6px">
                        <input type="radio" name="{{ $q['id'] }}" value="0" {{ !$q['defaut'] ? 'checked' : '' }}>
                        Non
                    </label>
                </div>
            </div>
            @endforeach

        </div>

        {{-- Boutons --}}
        <div style="display:flex;justify-content:center;gap:20px;padding:16px 28px 20px">
            <button type="button" onclick="validerPec()"
                    style="background:#F5C518;color:#1A2340;border:none;border-radius:22px;padding:9px 28px;font-size:13px;font-weight:800;cursor:pointer">
                Appel PEC
            </button>
            <button type="button" onclick="fermerPec()"
                    style="background:#E8ECF8;color:#1A2340;border:none;border-radius:22px;padding:9px 28px;font-size:13px;font-weight:700;cursor:pointer">
                Retour
            </button>
        </div>

    </div>
</div>

@endsection

@push('scripts')
<script>
// ── No INSEE (NIR) : format strict + clé calculée en direct ─────────────
// 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
// Nettoie la saisie : 13 caractères max, chiffres uniquement
// (+ A/B en 7e position précédée d'un 2, pour la Corse 2A/2B)
function nettoyerNir(valeur) {
    let out = '';
    for (const ch of valeur.toUpperCase()) {
        if (out.length >= 13) break;
        if (/[0-9]/.test(ch)) out += ch;
        else if ((ch === 'A' || ch === 'B') && out.length === 6 && out[5] === '2') out += ch;
    }
    return out;
}

// Clé de sécurité sociale : 97 − (NIR mod 97), sur 2 chiffres.
// Retourne '' si le NIR n'est pas complet/valide.
function calculerCleNir(nir) {
    if (nir.length !== 13) return '';
    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)) return '';
    return String(97 - (Number(num) % 97)).padStart(2, '0');
}

// Applique format + clé sur un couple (champ NIR, champ clé), avec retour visuel
function majNir(idNir, idCle, idHint) {
    const inp = document.getElementById(idNir);
    const cle = document.getElementById(idCle);
    if (!inp || !cle) return;

    const nir = nettoyerNir(inp.value);
    if (inp.value !== nir) inp.value = nir;
    cle.value = calculerCleNir(nir);

    const hint = idHint ? document.getElementById(idHint) : null;
    if (hint) hint.style.color = 'var(--text-muted)';
    inp.style.borderColor = '';
    inp.style.background  = '';

    if (nir.length === 0) {
        if (hint) hint.textContent = '(13 caractères)';
    } else if (nir.length < 13) {
        inp.style.borderColor = '#F59E0B';
        inp.style.background  = '#FFFBEB';
        if (hint) hint.textContent = '(' + nir.length + '/13)';
    } else if (cle.value === '') {
        if (hint) { hint.textContent = '(format invalide)'; hint.style.color = '#DC2626'; }
    } else {
        inp.style.borderColor = '#22C55E';
        inp.style.background  = '#F0FDF4';
        if (hint) hint.textContent = '(valide)';
    }
}

function formatInsee()    { majNir('f-insee', 'f-cle', 'insee-hint'); }
function formatInseePec() { majNir('pec_nir_disp', 'pec_cle_disp', null); }

// Branchement des écouteurs (le script est chargé en fin de body, DOM déjà prêt)
[['f-insee', formatInsee], ['pec_nir_disp', formatInseePec]].forEach(([id, fn]) => {
    const inp = document.getElementById(id);
    if (!inp) return;
    inp.setAttribute('maxlength', '13');
    inp.addEventListener('input', fn);
    inp.addEventListener('blur',  fn);
    inp.addEventListener('paste', () => setTimeout(fn, 0));
    fn(); // état initial
});

// La clé PEC+ est calculée, pas saisie
document.getElementById('pec_cle_disp')?.setAttribute('readonly', 'readonly');

function switchTab(name, btn) {
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));
    btn.classList.add('active');
    document.getElementById('tab-' + name).classList.add('active');
}
function updateTabs() {
    const show = document.getElementById('chk-libre').checked || document.getElementById('chk-contrat').checked;
    document.getElementById('tab-btn-libre').style.display = show ? '' : 'none';
}
function toggleDecede() {
    document.getElementById('inp-decede-le').style.display = document.getElementById('chk-decede').checked ? '' : 'none';
}
let benRow = {{ ($c && $c->beneficiaires->count()) ? max($c->beneficiaires->count(), 3) : 3 }};
function addBeneficiaire() {
    const i = benRow++;
    const civOpts = ['','M.','Mme','Mlle','Dr'].map(v => `<option value="${v}">${v}</option>`).join('');
    const tr = document.createElement('tr');
    tr.innerHTML = `
        <td><select name="ben_civilite[${i}]" style="border:1px solid #dde3ef;border-radius:5px;padding:3px 6px;font-size:12px;width:100%;">${civOpts}</select></td>
        <td><input type="text" name="ben_nom[${i}]" style="border:1px solid #dde3ef;border-radius:5px;padding:3px 6px;font-size:12px;width:100%;"></td>
        <td><input type="text" name="ben_prenom[${i}]" style="border:1px solid #dde3ef;border-radius:5px;padding:3px 6px;font-size:12px;width:100%;"></td>
        <td><input type="date" name="ben_date_naissance[${i}]" style="border:1px solid #dde3ef;border-radius:5px;padding:3px 6px;font-size:12px;width:100%;"></td>
        <td style="text-align:center;"><input type="checkbox" name="ben_naissance_etranger[${i}]" style="width:16px;height:16px;accent-color:var(--navy);"></td>
        <td><input type="number" name="ben_rang[${i}]" value="${i+1}" min="1" style="border:1px solid #dde3ef;border-radius:5px;padding:3px;font-size:12px;width:40px;text-align:center;"></td>
        <td><input type="text" name="ben_lien[${i}]" style="border:1px solid #dde3ef;border-radius:5px;padding:3px 6px;font-size:12px;width:100%;"></td>
        <td style="text-align:center;"><input type="checkbox" name="ben_ex_client[${i}]" style="width:16px;height:16px;accent-color:var(--navy);"></td>
        <td style="text-align:center;"><input type="checkbox" name="ben_decede[${i}]" style="width:16px;height:16px;accent-color:var(--navy);"></td>
        <td><button type="button" onclick="this.closest('tr').remove()" style="background:none;border:none;cursor:pointer;color:#E53E3E;font-size:18px;line-height:1;padding:0 4px;">×</button></td>
    `;
    document.getElementById('benef-body').appendChild(tr);
}

// ── Modal PEC+ ────────────────────────────────────────────────────────────────
function ouvrirPec() {
    const modal = document.getElementById('modalPec');

    // Déplacer dans body pour échapper aux conteneurs parents
    if (modal.parentElement !== document.body) document.body.appendChild(modal);

    // Rappel patient
    const prenom = document.querySelector('[name=prenom]')?.value || '';
    const nom    = document.querySelector('[name=nom_patronymique]')?.value || '';
    document.getElementById('pecNomPatient').textContent = (prenom + ' ' + nom).trim().toUpperCase();

    // Champs lecture seule depuis la fiche
    document.getElementById('pec_nir_disp').value       = document.querySelector('[name=no_insee]')?.value || '';
    formatInseePec(); // recalcule la clé côté PEC+
    document.getElementById('pec_etranger_disp').checked= !!document.querySelector('[name=client_etranger]')?.checked;
    document.getElementById('pec_naissance_disp').value = document.querySelector('[name=date_naissance]')?.value || '';
    document.getElementById('pec_rang_disp').value       = document.querySelector('[name=rang_naissance]')?.value || '1';

    // Champs éditables — charger valeurs sauvegardées
    document.getElementById('pec_date_prescription_inp').value  = document.getElementById('pec_date_prescription').value || '';
    document.getElementById('pec_type_prestation_inp').value    = document.getElementById('pec_type_prestation').value || 'TXI';
    document.getElementById('pec_date_realisation_inp').value   = document.getElementById('pec_date_realisation').value || '';
    document.getElementById('pec_code_grand_regime_inp').value  = document.getElementById('pec_code_grand_regime').value || '01';

    const setRadio = (name, val) => {
        document.querySelectorAll(`input[name="${name}"]`).forEach(r => r.checked = (r.value == val));
    };
    setRadio('pec_ald_inp',             document.getElementById('pec_ald').value);
    setRadio('pec_100pct_inp',          document.getElementById('pec_100pct').value);
    setRadio('pec_l115_inp',            document.getElementById('pec_l115').value);
    setRadio('pec_accident_travail_inp',document.getElementById('pec_accident_travail').value);

    // Centrer par rapport au contenu (hors sidebar)
    const sidebarW = document.querySelector('.sidebar')?.offsetWidth || 0;
    modal.style.left = sidebarW + 'px';
    modal.style.display = 'flex';
}

function fermerPec() {
    document.getElementById('modalPec').style.display = 'none';
}

function validerPec() {
    // Sync NIR vers la fiche client — la clé est recalculée automatiquement
    const nirFiche = document.querySelector('[name=no_insee]');
    if (nirFiche) {
        nirFiche.value = document.getElementById('pec_nir_disp').value;
        formatInsee();
        document.getElementById('pec_cle_disp').value = document.getElementById('f-cle').value;
    }

    const naissanceFiche = document.querySelector('[name=date_naissance]');
    const rangFiche      = document.querySelector('[name=rang_naissance]');
    if (naissanceFiche) naissanceFiche.value = document.getElementById('pec_naissance_disp').value;
    if (rangFiche)      rangFiche.value      = document.getElementById('pec_rang_disp').value;

    // Sync vers les champs cachés
    document.getElementById('pec_date_prescription').value = document.getElementById('pec_date_prescription_inp').value;
    document.getElementById('pec_type_prestation').value   = document.getElementById('pec_type_prestation_inp').value;
    document.getElementById('pec_date_realisation').value  = document.getElementById('pec_date_realisation_inp').value;
    document.getElementById('pec_code_grand_regime').value = document.getElementById('pec_code_grand_regime_inp').value;

    const getRadio = name => document.querySelector(`input[name="${name}"]:checked`)?.value ?? '0';
    document.getElementById('pec_ald').value              = getRadio('pec_ald_inp');
    document.getElementById('pec_100pct').value           = getRadio('pec_100pct_inp');
    document.getElementById('pec_l115').value             = getRadio('pec_l115_inp');
    document.getElementById('pec_accident_travail').value = getRadio('pec_accident_travail_inp');

    fermerPec();

    // Soumettre le formulaire principal pour sauvegarder
    document.querySelector('form#client-form, form').submit();
}

document.getElementById('modalPec').addEventListener('click', e => {
    if (e.target === e.currentTarget) fermerPec();
});
</script>
@endpush