@extends('layouts.app')
@section('title', 'Paramètres')
@section('page-title', 'Boite à outils — Paramètres')

@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);}
    .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:14px;}

    /* === En-tête société === */
    .soc-header-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin-bottom:18px;}
    .soc-name{font-size:22px;font-weight:900;color:var(--navy);margin-bottom:12px;}
    .soc-field{display:flex;align-items:center;gap:8px;margin-bottom:8px;}

    /* === Tabs === */
    .tab-bar{display:flex;gap:0;border-bottom:2.5px solid var(--yellow);margin-bottom:18px;flex-wrap:wrap;}
    .tab-btn{padding:8px 18px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;border:none;background:#F4F6FB;cursor:pointer;border-radius:8px 8px 0 0;color:var(--text-muted);transition:background 0.15s,color 0.15s;border:1px solid var(--border);border-bottom:none;margin-right:2px;}
    .tab-btn.active{background:var(--yellow);color:var(--navy);border-color:var(--yellow);}
    .tab-pane{display:none;}
    .tab-pane.active{display:block;}

    /* === Petites tables TVA === */
    .tva-wrap{border:1.5px solid var(--border);border-radius:8px;overflow:hidden;width:220px;}
    .tva-table{width:100%;border-collapse:collapse;}
    .tva-table thead th{background:#E8EAF6;padding:6px 10px;font-size:11px;font-weight:800;color:var(--navy);text-align:right;border-bottom:1.5px solid var(--border);}
    .tva-table thead th:first-child{text-align:left;}
    .tva-table tbody td{padding:5px 10px;font-size:12px;font-weight:600;text-align:right;border-bottom:1px solid var(--border);}
    .tva-table tbody td:first-child{text-align:left;}
    .tva-table tbody tr:last-child td{border-bottom:none;}

    /* === Stepper +/- === */
    .stepper{display:flex;align-items:center;gap:4px;}
    .stepper input{width:60px;text-align:center;}
    .step-btn{background:#E8EAF6;border:1px solid var(--border);border-radius:4px;width:22px;height:22px;font-size:14px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--navy);}
    .step-btn:hover{background:#D0D3E8;}

    /* === Éditeur impressions === */
    .editor-toolbar{display:flex;align-items:center;gap:2px;padding:5px 8px;background:#F4F6FB;border:1.5px solid var(--border);border-bottom:none;border-radius:8px 8px 0 0;flex-wrap:wrap;}
    .tb-select{border:1.5px solid var(--border);border-radius:5px;padding:3px 22px 3px 6px;font-family:'Nunito',sans-serif;font-size:12px;font-weight:600;background:#fff;outline:none;cursor:pointer;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 4px center;background-size:12px;}
    .tb-btn{background:none;border:1px solid transparent;border-radius:4px;padding:3px 7px;cursor:pointer;font-family:'Nunito',sans-serif;font-size:12px;font-weight:700;color:var(--text);transition:background 0.15s;}
    .tb-btn:hover{background:#E2E8F0;}
    .tb-sep{width:1px;height:18px;background:var(--border);margin:0 3px;}
    .editor-area{min-height:120px;border:1.5px solid var(--border);border-radius:0 0 8px 8px;padding:10px 12px;font-family:'Nunito',sans-serif;font-size:13px;color:var(--text);outline:none;background:#fff;line-height:1.6;}
    .editor-area:focus{border-color:var(--yellow);}
    .editor-area:empty::before{content:attr(data-placeholder);color:var(--text-muted);}

    /* === Upload === */
    .upload-zone{border:2px dashed var(--border);border-radius:8px;padding:16px;text-align:center;cursor:pointer;transition:border-color 0.2s;background:#FAFBFF;}
    .upload-zone:hover{border-color:var(--yellow);}
    .progress-bar{height:10px;background:#E8EAF6;border-radius:5px;overflow:hidden;margin-top:8px;}
    .progress-fill{height:100%;background:var(--yellow);width:0%;transition:width 0.3s;}

    /* === Actions === */
    .action-bar{display:flex;align-items:center;justify-content:center;gap:40px;border-top:2px solid var(--border);padding-top:16px;margin-top:4px;}
    .btn-y{background:var(--yellow);color:var(--navy);border:none;border-radius:20px;padding:8px 28px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
    .btn-y:hover{background:var(--yellow-dark);}
    .btn-ghost{background:#fff;color:var(--text-muted);border:1.5px solid var(--border);border-radius:20px;padding:7px 22px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;}
    .btn-ghost:hover{background:#F4F6FB;}
    .icon-btn{background:none;border:none;cursor:pointer;padding:4px 6px;border-radius:5px;display:inline-flex;align-items:center;}
    .icon-btn:hover{background:#F4F6FB;}
</style>
@endpush

@section('content')

@if(session('success'))
<div style="background:#F0FFF4;border:1.5px solid #68D391;border-radius:8px;padding:10px 18px;margin-bottom:14px;font-size:13px;font-weight:700;color:#276749;">
    ✓ {{ session('success') }}
</div>
@endif

<form method="POST" action="{{ route('parametres.update') }}" enctype="multipart/form-data" id="mainForm">
@csrf

<div class="c-card">
    {{-- En-tête société --}}
    <div class="soc-header-grid">
        {{-- Colonne gauche --}}
        <div>
            <div class="soc-name">
                <input type="text" name="soc_nom" class="f-input" style="font-size:22px;font-weight:900;color:var(--navy);border:none;border-bottom:2px solid var(--border);border-radius:0;padding-left:0;width:100%;background:transparent;" value="{{ old('soc_nom', $p->soc_nom) }}" placeholder="Nom de la société">
            </div>
            <div class="soc-field">
                <label class="f-label" style="min-width:90px;">No licence</label>
                <input type="text" name="soc_no_licence" class="f-input" style="width:90px;" value="{{ old('soc_no_licence', $p->soc_no_licence) }}">
            </div>
            <div class="soc-field">
                <label class="f-label" style="min-width:90px;">No siret</label>
                <input type="text" name="soc_siret" class="f-input" style="width:180px;" value="{{ old('soc_siret', $p->soc_siret) }}">
            </div>
            <div class="soc-field">
                <label class="f-label" style="min-width:90px;">Agréments</label>
                <input type="text" name="soc_agrement" class="f-input" style="width:180px;" value="{{ old('soc_agrement', $p->soc_agrement) }}" placeholder="ex: Taxi, VSL…">
            </div>
            <div class="soc-field">
                <label class="f-label" style="min-width:90px;">Email de contact</label>
                <input type="email" name="soc_email" class="f-input" style="width:220px;" value="{{ old('soc_email', $p->soc_email) }}">
            </div>
        </div>
        {{-- Colonne droite --}}
        <div>
            <div class="soc-field" style="margin-top:4px;">
                <label class="f-label" style="min-width:70px;">Adresse</label>
                <input type="text" name="soc_adresse1" class="f-input" style="flex:1;" value="{{ old('soc_adresse1', $p->soc_adresse1) }}">
            </div>
            <div class="soc-field">
                <label class="f-label" style="min-width:70px;"></label>
                <input type="text" name="soc_adresse2" class="f-input" style="flex:1;" value="{{ old('soc_adresse2', $p->soc_adresse2) }}">
            </div>
            <div class="soc-field">
                <label class="f-label" style="min-width:70px;"></label>
                <input type="text" name="soc_adresse3" class="f-input" style="flex:1;" value="{{ old('soc_adresse3', $p->soc_adresse3) }}">
            </div>
            <div class="soc-field" style="flex-wrap:wrap;gap:8px;">
                <label class="f-label">C. Postal</label>
                <input type="text" name="soc_cp" class="f-input" style="width:70px;" value="{{ old('soc_cp', $p->soc_cp) }}">
                <label class="f-label">Commune</label>
                <input type="text" name="soc_commune" class="f-input" style="min-width:160px;" value="{{ old('soc_commune', $p->soc_commune) }}" placeholder="Commune">
            </div>
        </div>
    </div>

    {{-- Onglets --}}
    <div class="tab-bar">
        <button class="tab-btn active" onclick="switchTab('params',this)">Paramètres</button>
        <button class="tab-btn" onclick="switchTab('tele',this)">Télétransmission</button>
        <button class="tab-btn" onclick="switchTab('impressions',this)">Impressions</button>
        <button class="tab-btn" onclick="switchTab('fact-libre',this)">Fact. Libre</button>
        <button class="tab-btn" onclick="switchTab('fact-contrat',this)">Fact. Contrat</button>
        <button class="tab-btn" onclick="switchTab('pec',this)">Pec +</button>
    </div>

    {{-- ===== TAB PARAMÈTRES ===== --}}
    <div class="tab-pane active" id="tab-params">
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px 40px;">
            <div>
                <label class="check-lbl" style="margin-bottom:14px;">
                    <input type="checkbox" name="affich_anniversaires" value="1" {{ $p->affich_anniversaires ? 'checked' : '' }}> Affichage des anniversaires
                </label>

                <div style="display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:10px;">
                    <div class="soc-field"><label class="f-label" style="min-width:130px;">Dernier no facture</label><input type="text" name="dernier_no_facture" class="f-input" style="width:70px;" value="{{ old('dernier_no_facture', $p->dernier_no_facture) }}"></div>
                    <div class="soc-field"><label class="f-label">Initiale facture</label><input type="text" name="initiale_facture" class="f-input" style="width:45px;" value="{{ old('initiale_facture', $p->initiale_facture) }}" maxlength="3"></div>
                </div>
                <div style="display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px;">
                    <div class="soc-field"><label class="f-label" style="min-width:130px;">Dernier no devis</label><input type="text" name="dernier_no_devis" class="f-input" style="width:70px;" value="{{ old('dernier_no_devis', $p->dernier_no_devis) }}"></div>
                    <div class="soc-field"><label class="f-label">Dernier no avoir</label><input type="text" name="dernier_no_avoir" class="f-input" style="width:70px;" value="{{ old('dernier_no_avoir', $p->dernier_no_avoir) }}"></div>
                </div>

                <label class="check-lbl" style="margin-bottom:8px;">
                    <input type="checkbox" name="imp_papier_ordinaire" value="1" {{ $p->imp_papier_ordinaire ? 'checked' : '' }}> Impression sur papier ordinaire (avec la trame)
                </label>
                <label class="check-lbl" style="margin-bottom:8px;">
                    <input type="checkbox" name="imp_detail_facture" value="1" {{ $p->imp_detail_facture ? 'checked' : '' }}> Impression détail sur la facture
                </label>
                <label class="check-lbl" style="margin-bottom:14px;">
                    <input type="checkbox" name="imp_distance_facture" value="1" {{ $p->imp_distance_facture ? 'checked' : '' }}> Impression de la distance sur la facture
                </label>

                <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:14px;">
                    <div>
                        <div class="soc-field" style="margin-bottom:8px;">
                            <label class="f-label" style="min-width:140px;">TVA sur les transports</label>
                            <select name="tva_transports" class="f-input f-select" style="min-width:200px;">
                                @php $tvaOpts=['exonere'=>'Exonéré','taux_normal'=>'Taux Normal','taux_intermediaire'=>'Taux Intermédiaire','taux_reduit'=>'Taux Réduit','taux_normal_corse'=>'Taux Normal Corse','taux_reduit_corse'=>'Taux Réduit Corse','taux_normal_dom'=>'Taux Normal DOM','taux_reduit_dom'=>'Taux Réduit DOM']; @endphp
                                @foreach($tvaOpts as $val=>$lbl)
                                <option value="{{ $val }}" {{ $p->tva_transports===$val?'selected':'' }}>{{ $lbl }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="tva-wrap" style="margin-bottom:10px;">
                            <table class="tva-table">
                                <thead><tr><th>Date</th><th>Taux de TVA</th></tr></thead>
                                <tbody>
                                    <tr><td>01/01/2014</td><td>10,00</td></tr>
                                    <tr><td>01/01/2012</td><td>7,00</td></tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="soc-field" style="margin-bottom:8px;">
                            <label class="f-label" style="min-width:140px;">TVA sur les péages</label>
                            <select name="tva_peages" class="f-input f-select" style="min-width:200px;">
                                @foreach($tvaOpts as $val=>$lbl)
                                <option value="{{ $val }}" {{ $p->tva_peages===$val?'selected':'' }}>{{ $lbl }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="tva-wrap">
                            <table class="tva-table">
                                <thead><tr><th>Date</th><th>Taux de TVA</th></tr></thead>
                                <tbody>
                                    <tr><td>01/01/2014</td><td>10,00</td></tr>
                                    <tr><td>01/01/2012</td><td>7,00</td></tr>
                                </tbody>
                            </table>
                        </div>
                        <label class="check-lbl" style="margin-top:12px;">
                            <input type="checkbox" name="clients_toutes_societes" value="1" {{ $p->clients_toutes_societes ? 'checked' : '' }}> Clients rattachés à toutes les sociétés
                        </label>
                    </div>

                    {{-- Horizontal / Vertical --}}
                    <div>
                        <div style="font-size:12px;font-weight:800;color:var(--navy);margin-bottom:8px;">Horizontal</div>
                        <div class="soc-field" style="margin-bottom:6px;">
                            <label class="f-label" style="min-width:80px;">Décalage</label>
                            <div class="stepper">
                                <button type="button" class="step-btn" onclick="step('hDec',-1)">−</button>
                                <input type="number" name="imp_h_decalage" class="f-input" id="hDec" style="width:60px;text-align:center;" value="{{ old('imp_h_decalage', $p->imp_h_decalage) }}">
                                <button type="button" class="step-btn" onclick="step('hDec',1)">+</button>
                            </div>
                        </div>
                        <div class="soc-field" style="margin-bottom:14px;">
                            <label class="f-label" style="min-width:80px;">Homothétie</label>
                            <div class="stepper">
                                <button type="button" class="step-btn" onclick="step('hHom',-1)">−</button>
                                <input type="number" name="imp_h_homothetie" class="f-input" id="hHom" style="width:60px;text-align:center;" value="{{ old('imp_h_homothetie', $p->imp_h_homothetie) }}">
                                <button type="button" class="step-btn" onclick="step('hHom',1)">+</button>
                            </div>
                        </div>
                        <div style="font-size:12px;font-weight:800;color:var(--navy);margin-bottom:8px;">Vertical</div>
                        <div class="soc-field" style="margin-bottom:6px;">
                            <label class="f-label" style="min-width:80px;">Décalage</label>
                            <div class="stepper">
                                <button type="button" class="step-btn" onclick="step('vDec',-1)">−</button>
                                <input type="number" name="imp_v_decalage" class="f-input" id="vDec" style="width:60px;text-align:center;" value="{{ old('imp_v_decalage', $p->imp_v_decalage) }}">
                                <button type="button" class="step-btn" onclick="step('vDec',1)">+</button>
                            </div>
                        </div>
                        <div class="soc-field">
                            <label class="f-label" style="min-width:80px;">Homothétie</label>
                            <div class="stepper">
                                <button type="button" class="step-btn" onclick="step('vHom',-1)">−</button>
                                <input type="number" name="imp_v_homothetie" class="f-input" id="vHom" style="width:60px;text-align:center;" value="{{ old('imp_v_homothetie', $p->imp_v_homothetie) }}">
                                <button type="button" class="step-btn" onclick="step('vHom',1)">+</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div>
                <label class="check-lbl" style="margin-bottom:14px;">
                    <input type="checkbox" name="affich_fin_droits" value="1" {{ $p->affich_fin_droits ? 'checked' : '' }}> Affichage des fin de droits
                </label>
                <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
                    <label class="f-label" style="min-width:160px;">Nb exemplaire impression</label>
                    <input type="number" name="nb_exemplaires" class="f-input" style="width:60px;" value="{{ old('nb_exemplaires', $p->nb_exemplaires) }}" min="1" max="9">
                </div>
                <label class="check-lbl" style="margin-bottom:8px;">
                    <input type="checkbox" name="gestion_conflits_multisoc" value="1" {{ $p->gestion_conflits_multisoc ? 'checked' : '' }}> Gestion des conflits multi-société
                </label>
                <label class="check-lbl" style="margin-bottom:8px;">
                    <input type="checkbox" name="conflits_attente" value="1" {{ $p->conflits_attente ? 'checked' : '' }}> Prise en compte de l'attente dans les conflits
                </label>
                <label class="check-lbl">
                    <input type="checkbox" name="conflits_retours_vide" value="1" {{ $p->conflits_retours_vide ? 'checked' : '' }}> Prise en compte des retours à vide (C et D)
                </label>
            </div>
        </div>
    </div>

    {{-- ===== TAB TÉLÉTRANSMISSION ===== --}}
    <div class="tab-pane" id="tab-tele">
        <div style="display:grid;grid-template-columns:repeat(5,auto);gap:8px 20px;align-items:center;margin-bottom:14px;flex-wrap:wrap;">
            <div class="soc-field"><label class="f-label">Application B2</label><input type="text" name="tele_appli_b2" class="f-input" style="width:50px;" value="{{ old('tele_appli_b2', $p->tele_appli_b2) }}"></div>
            <div class="soc-field"><label class="f-label">Norme B2</label><input type="text" name="tele_norme_b2" class="f-input" style="width:50px;" value="{{ old('tele_norme_b2', $p->tele_norme_b2) }}"></div>
            <div class="soc-field"><label class="f-label">Compactage B2</label><input type="text" name="tele_compactage_b2" class="f-input" style="width:50px;" value="{{ old('tele_compactage_b2', $p->tele_compactage_b2) }}"></div>
            <div class="soc-field"><label class="f-label">Version Norme B2</label><input type="text" name="tele_version_norme_b2" class="f-input" style="width:50px;" value="{{ old('tele_version_norme_b2', $p->tele_version_norme_b2) }}"></div>
            <div class="soc-field"><label class="f-label">No de version</label><input type="text" name="tele_no_version" class="f-input" style="width:80px;" value="{{ old('tele_no_version', $p->tele_no_version) }}"></div>
        </div>
        <div style="display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:10px;">
            <div class="soc-field"><label class="f-label" style="min-width:130px;">Dernier no lot B2</label><input type="text" name="tele_dernier_no_lot" class="f-input" style="width:80px;" value="{{ old('tele_dernier_no_lot', $p->tele_dernier_no_lot) }}"></div>
            <div class="soc-field"><label class="f-label">Type emetteur</label><input type="text" name="tele_type_emetteur" class="f-input" style="width:50px;" value="{{ old('tele_type_emetteur', $p->tele_type_emetteur) }}"></div>
        </div>
        <div class="soc-field" style="margin-bottom:10px;">
            <label class="f-label" style="min-width:230px;">Code envoi Noemie (TXI ou ATP)</label>
            <input type="text" name="tele_code_envoi_noemie" class="f-input" style="width:70px;" value="{{ old('tele_code_envoi_noemie', $p->tele_code_envoi_noemie) }}">
        </div>
        <div class="soc-field" style="margin-bottom:10px;">
            <label class="f-label" style="min-width:130px;">E-Mail Télétrans</label>
            <input type="email" name="tele_email" class="f-input" style="width:260px;" value="{{ old('tele_email', $p->tele_email) }}">
        </div>
        <div class="soc-field" style="margin-bottom:14px;">
            <label class="f-label" style="min-width:200px;">Fournisseur d'Accès Internet</label>
            <select name="tele_fournisseur_acces" class="f-input f-select" style="width:200px;">
                <option value=""></option>
                @foreach(['Orange','Free','SFR','Bouygues','Autre'] as $fai)
                <option value="{{ $fai }}" {{ old('tele_fournisseur_acces',$p->tele_fournisseur_acces)===$fai?'selected':'' }}>{{ $fai }}</option>
                @endforeach
            </select>
        </div>
        <hr style="border:none;border-top:1px solid var(--border);margin-bottom:14px;">
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px 40px;">
            <div>
                <div class="soc-field" style="margin-bottom:8px;">
                    <label class="f-label" style="min-width:180px;">Adresse serveur Smtp</label>
                    <input type="text" name="tele_smtp_serveur" class="f-input" style="flex:1;" value="{{ old('tele_smtp_serveur', $p->tele_smtp_serveur) }}" placeholder="smtp-relay.sendinblue.com">
                </div>
                <div class="soc-field">
                    <label class="f-label" style="min-width:180px;">Adresse serveur pop</label>
                    <input type="text" name="tele_pop_serveur" class="f-input" style="flex:1;" value="{{ old('tele_pop_serveur', $p->tele_pop_serveur) }}">
                </div>
            </div>
            <div>
                <div style="display:flex;align-items:center;gap:12px;margin-bottom:8px;">
                    <label class="f-label">No Port SMTP</label>
                    <input type="text" name="tele_smtp_port" class="f-input" style="width:60px;" value="{{ old('tele_smtp_port', $p->tele_smtp_port) }}">
                    <label class="check-lbl"><input type="checkbox" name="tele_smtp_auth" value="1" {{ $p->tele_smtp_auth ? 'checked' : '' }}> Authentification SMTP</label>
                </div>
                <div style="display:flex;align-items:center;gap:12px;">
                    <label class="f-label">Port pop</label>
                    <input type="text" name="tele_pop_port" class="f-input" style="width:60px;" value="{{ old('tele_pop_port', $p->tele_pop_port) }}">
                    <label class="check-lbl"><input type="checkbox" name="tele_ssl" value="1" {{ $p->tele_ssl ? 'checked' : '' }}> SSL</label>
                </div>
            </div>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px 40px;margin-top:10px;">
            <div class="soc-field">
                <label class="f-label" style="min-width:200px;">Nom utilisateur boite mail</label>
                <input type="text" name="tele_mail_user" class="f-input" style="flex:1;" value="{{ old('tele_mail_user', $p->tele_mail_user) }}">
            </div>
            <div class="soc-field">
                <label class="f-label" style="min-width:180px;">Mot de passe boite mail</label>
                <input type="password" name="tele_mail_password" class="f-input" style="flex:1;" value="{{ old('tele_mail_password', $p->tele_mail_password) }}">
            </div>
        </div>
        <div class="soc-field" style="margin-top:12px;">
            <label class="f-label" style="min-width:200px;">Affectation des retours Noemie</label>
            <select name="tele_affectation_retours" class="f-input f-select" style="width:200px;">
                @foreach(['Virement','Chèque','Espèces','CB'] as $opt)
                <option value="{{ $opt }}" {{ old('tele_affectation_retours',$p->tele_affectation_retours)===$opt?'selected':'' }}>{{ $opt }}</option>
                @endforeach
            </select>
        </div>
    </div>

    {{-- ===== TAB IMPRESSIONS ===== --}}
    {{-- Champs cachés pour les éditeurs contenteditable --}}
    <input type="hidden" name="imp_entete" id="hiddenEntete">
    <input type="hidden" name="imp_pied_page" id="hiddenPied">
    <div class="tab-pane" id="tab-impressions">
        <div style="display:grid;grid-template-columns:1fr 280px;gap:20px;align-items:start;">
            <div>
                {{-- Entête --}}
                <div style="margin-bottom:14px;">
                    <div class="f-label" style="margin-bottom:6px;">Entête</div>
                    <div class="editor-toolbar">
                        <select class="tb-select">
                            <option>Zone de saisie</option><option>Titre 1</option><option>Titre 2</option>
                        </select>
                        <select class="tb-select" style="width:50px;">
                            @foreach(range(1,7) as $s)<option value="{{$s}}" {{$s==3?'selected':''}}>{{$s}}</option>@endforeach
                        </select>
                        <div class="tb-sep"></div>
                        <button type="button" class="tb-btn" onclick="execFmt('justifyLeft')">
                            <svg viewBox="0 0 24 24" style="width:13px;height:13px;fill:var(--text);"><rect x="3" y="5" width="18" height="2"/><rect x="3" y="10" width="12" height="2"/><rect x="3" y="15" width="18" height="2"/><rect x="3" y="20" width="12" height="2"/></svg>
                        </button>
                        <button type="button" class="tb-btn" onclick="execFmt('justifyCenter')">
                            <svg viewBox="0 0 24 24" style="width:13px;height:13px;fill:var(--text);"><rect x="3" y="5" width="18" height="2"/><rect x="6" y="10" width="12" height="2"/><rect x="3" y="15" width="18" height="2"/><rect x="6" y="20" width="12" height="2"/></svg>
                        </button>
                        <button type="button" class="tb-btn" onclick="execFmt('justifyRight')">
                            <svg viewBox="0 0 24 24" style="width:13px;height:13px;fill:var(--text);"><rect x="3" y="5" width="18" height="2"/><rect x="9" y="10" width="12" height="2"/><rect x="3" y="15" width="18" height="2"/><rect x="9" y="20" width="12" height="2"/></svg>
                        </button>
                        <button type="button" class="tb-btn" onclick="execFmt('justifyFull')">
                            <svg viewBox="0 0 24 24" style="width:13px;height:13px;fill:var(--text);"><rect x="3" y="5" width="18" height="2"/><rect x="3" y="10" width="18" height="2"/><rect x="3" y="15" width="18" height="2"/><rect x="3" y="20" width="18" height="2"/></svg>
                        </button>
                        <div class="tb-sep"></div>
                        <input type="color" style="width:18px;height:18px;border-radius:3px;cursor:pointer;border:2px solid var(--border);" value="#000000" title="Couleur">
                    </div>
                    <div class="editor-area" contenteditable="true" id="editorEntete" data-placeholder="Saisir l'entête…">{!! $p->imp_entete !!}</div>
                </div>

                {{-- Ville + Signature --}}
                <div style="display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap;">
                    <div class="soc-field"><label class="f-label" style="min-width:40px;">Ville</label><input type="text" name="imp_ville" class="f-input" style="width:200px;" value="{{ old('imp_ville', $p->imp_ville) }}"></div>
                    <div class="soc-field"><label class="f-label" style="min-width:70px;">Signature</label><input type="text" name="imp_signature" class="f-input" style="width:200px;" value="{{ old('imp_signature', $p->imp_signature) }}"></div>
                </div>

                {{-- Upload logo --}}
                <div class="upload-zone" onclick="document.getElementById('fileInput').click()">
                    <svg viewBox="0 0 24 24" style="width:24px;height:24px;stroke:var(--text-muted);fill:none;stroke-width:1.5;stroke-linecap:round;margin-bottom:6px;"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                    <div style="font-size:12px;font-weight:600;color:var(--text-muted);">Déposez ici un fichier ou cliquez sur "Envoyer…"</div>
                    <input type="file" name="logo_file" id="fileInput" style="display:none;" accept="image/*" onchange="handleFile(this)">
                    <div class="progress-bar"><div class="progress-fill" id="progressFill"></div></div>
                    <div style="font-size:11px;color:var(--text-muted);margin-top:4px;" id="progressTxt">0%</div>
                </div>

                {{-- Pied de page --}}
                <div style="margin-top:14px;">
                    <div class="f-label" style="margin-bottom:6px;">Pied de page</div>
                    <div class="editor-area" contenteditable="true" id="editorPied" data-placeholder="Saisir le pied de page…" style="min-height:90px;">{!! $p->imp_pied_page !!}</div>
                </div>
            </div>

            {{-- Logo aperçu + réglages --}}
            <div>
                <div style="border:1.5px solid var(--border);border-radius:8px;min-height:100px;background:#F8F9FF;display:flex;align-items:center;justify-content:center;margin-bottom:12px;position:relative;" id="logoPreview">
                    @if($p->imp_logo_path)
                        <img src="{{ asset('storage/'.$p->imp_logo_path) }}" style="max-width:100%;max-height:120px;border-radius:6px;" id="logoImg">
                        <button type="button" onclick="deleteLogo()" style="position:absolute;top:4px;right:4px;background:#E53E3E;border:none;border-radius:50%;width:20px;height:20px;cursor:pointer;color:#fff;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;">×</button>
                    @else
                        <span style="font-size:12px;color:var(--text-muted);" id="logoPlaceholder">Aperçu logo</span>
                    @endif
                </div>
                <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
                    <label class="f-label" style="min-width:80px;">Décalage</label>
                    <input type="number" name="imp_logo_decalage" class="f-input" style="width:70px;" value="{{ old('imp_logo_decalage', $p->imp_logo_decalage) }}">
                </div>
                <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
                    <label class="f-label" style="min-width:80px;">Hauteur</label>
                    <input type="number" name="imp_logo_hauteur" class="f-input" style="width:70px;" value="{{ old('imp_logo_hauteur', $p->imp_logo_hauteur) }}">
                </div>
                <div style="display:flex;align-items:center;gap:8px;margin-bottom:14px;">
                    <label class="f-label" style="min-width:80px;">Largeur</label>
                    <input type="number" name="imp_logo_largeur" class="f-input" style="width:70px;" value="{{ old('imp_logo_largeur', $p->imp_logo_largeur) }}">
                </div>
                <button type="button" class="icon-btn" title="Imprimer" style="margin-top:8px;">
                    <svg viewBox="0 0 24 24" style="width:32px;height:32px;stroke:var(--navy);fill:none;stroke-width:1.5;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>
            </div>
        </div>
    </div>

    {{-- ===== TAB FACT. LIBRE ===== --}}
    <div class="tab-pane" id="tab-fact-libre">
        <div style="max-width:600px;margin:20px auto;">
            <div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;">
                <label class="f-label" style="min-width:140px;">Nb jour échéance</label>
                <input type="number" name="fact_nb_jours_echeance" class="f-input" style="width:60px;" value="{{ old('fact_nb_jours_echeance', $p->fact_nb_jours_echeance) }}">
            </div>
            <label class="check-lbl" style="margin-bottom:16px;">
                <input type="checkbox" name="fact_conversion_lettres" value="1" {{ $p->fact_conversion_lettres ? 'checked' : '' }}> Conversion des montants en lettre
            </label>
            <div style="display:flex;align-items:center;gap:10px;margin-bottom:8px;">
                <label class="f-label" style="min-width:190px;">Texte légal facture libre</label>
                <input type="text" name="fact_texte_legal_1" class="f-input" style="flex:1;" value="{{ old('fact_texte_legal_1', $p->fact_texte_legal_1) }}">
            </div>
            <div style="display:flex;align-items:center;gap:10px;margin-bottom:8px;">
                <label class="f-label" style="min-width:190px;">Texte légal facture libre</label>
                <input type="text" name="fact_texte_legal_2" class="f-input" style="flex:1;" value="{{ old('fact_texte_legal_2', $p->fact_texte_legal_2) }}">
            </div>
            <div style="display:flex;align-items:center;gap:10px;">
                <label class="f-label" style="min-width:190px;">Texte légal facture libre</label>
                <input type="text" name="fact_texte_legal_3" class="f-input" style="flex:1;" value="{{ old('fact_texte_legal_3', $p->fact_texte_legal_3) }}">
            </div>
        </div>
    </div>

    {{-- ===== TAB FACT. CONTRAT ===== --}}
    <div class="tab-pane" id="tab-fact-contrat">
        <div style="min-height:200px;display:flex;align-items:center;justify-content:center;">
            <span style="font-size:13px;font-weight:600;color:var(--text-muted);">Paramètres de facturation contrat</span>
        </div>
    </div>

    {{-- ===== TAB PEC + ===== --}}
    <div class="tab-pane" id="tab-pec">
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px 40px;padding:10px 0;">
            <div>
                <div style="margin-bottom:22px;">
                    <div style="font-size:13px;font-weight:700;color:var(--text);margin-bottom:10px;">Gestion Téléservice PEC+</div>
                    <div style="display:flex;align-items:center;gap:24px;">
                        <label class="check-lbl"><input type="radio" name="pec_teleservice" value="manuel" {{ $p->pec_teleservice==='manuel'?'checked':'' }}> Manuel</label>
                        <label class="check-lbl"><input type="radio" name="pec_teleservice" value="auto" {{ $p->pec_teleservice==='auto'?'checked':'' }}> Automatique</label>
                        <label class="check-lbl"><input type="radio" name="pec_teleservice" value="desactive" {{ $p->pec_teleservice==='desactive'?'checked':'' }}> Désactivé</label>
                    </div>
                </div>
                <div style="margin-bottom:22px;">
                    <div style="font-size:13px;font-weight:700;color:var(--text);margin-bottom:10px;">Activation des traces PEC+</div>
                    <div style="display:flex;align-items:center;gap:40px;">
                        <label class="check-lbl"><input type="radio" name="pec_traces_pec" value="1" {{ $p->pec_traces_pec?'checked':'' }}> Oui</label>
                        <label class="check-lbl"><input type="radio" name="pec_traces_pec" value="0" {{ !$p->pec_traces_pec?'checked':'' }}> Non</label>
                    </div>
                </div>
                <div style="margin-bottom:22px;">
                    <div style="font-size:13px;font-weight:700;color:var(--text);margin-bottom:10px;">Activation des traces XML</div>
                    <div style="display:flex;align-items:center;gap:40px;">
                        <label class="check-lbl"><input type="radio" name="pec_traces_xml" value="1" {{ $p->pec_traces_xml?'checked':'' }}> Oui</label>
                        <label class="check-lbl"><input type="radio" name="pec_traces_xml" value="0" {{ !$p->pec_traces_xml?'checked':'' }}> Non</label>
                    </div>
                </div>
                <div>
                    <div style="font-size:13px;font-weight:700;color:var(--text);margin-bottom:10px;">PEC+ Test</div>
                    <div style="display:flex;align-items:center;gap:40px;">
                        <label class="check-lbl"><input type="radio" name="pec_test" value="1" {{ $p->pec_test?'checked':'' }}> Oui</label>
                        <label class="check-lbl"><input type="radio" name="pec_test" value="0" {{ !$p->pec_test?'checked':'' }}> Non</label>
                    </div>
                </div>
            </div>
            <div>
                <div class="soc-field" style="margin-top:4px;">
                    <label class="f-label" style="min-width:160px;">Nom utilisateur PEC+</label>
                    <input type="text" name="pec_nom_utilisateur" class="f-input" style="flex:1;" value="{{ old('pec_nom_utilisateur', $p->pec_nom_utilisateur) }}">
                </div>
            </div>
        </div>
    </div>

    {{-- Actions --}}
    <div class="action-bar">
        <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;"><polyline points="20 6 9 17 4 12"/></svg>
            Enregistrer
        </button>
        <a href="{{ route('dashboard') }}" class="btn-ghost">Quitter</a>
    </div>
</div>

</form>

@endsection

@push('scripts')
<script>
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 execFmt(cmd) {
    document.execCommand(cmd, false, null);
}
function step(id, delta) {
    const el = document.getElementById(id);
    el.value = (parseInt(el.value) || 0) + delta;
}
function handleFile(input) {
    if (!input.files.length) return;
    const fill = document.getElementById('progressFill');
    const txt  = document.getElementById('progressTxt');
    let p = 0;
    const iv = setInterval(() => {
        p += 10;
        fill.style.width = p + '%';
        txt.textContent = p + '%';
        if (p >= 100) {
            clearInterval(iv);
            const reader = new FileReader();
            reader.onload = e => {
                const prev = document.getElementById('logoPreview');
                prev.innerHTML = '<img src="'+e.target.result+'" style="max-width:100%;max-height:120px;border-radius:6px;">';
            };
            reader.readAsDataURL(input.files[0]);
        }
    }, 60);
}

// Synchroniser les éditeurs contenteditable → hidden avant submit
document.getElementById('mainForm').addEventListener('submit', function() {
    document.getElementById('hiddenEntete').value = document.getElementById('editorEntete').innerHTML;
    document.getElementById('hiddenPied').value   = document.getElementById('editorPied').innerHTML;
});

// Radio PEC → boolean : convertir avant submit
// (les radios pec_traces_pec/xml/test envoient "1" ou "0" → géré en controller via $request->input())

// Suppression logo via AJAX
function deleteLogo() {
    if (!confirm('Supprimer le logo ?')) return;
    fetch('{{ route('parametres.logo.delete') }}', {
        method: 'DELETE',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
    }).then(r => r.json()).then(d => {
        if (d.success !== false) {
            document.getElementById('logoPreview').innerHTML = '<span style="font-size:12px;color:var(--text-muted);">Aperçu logo</span>';
        }
    });
}
</script>
@endpush