@extends('layouts.app')
@section('title', 'PEC+ — Certification SESAM-Vitale')
@section('page-title', 'PEC+ — Aide à la Prise en Charge')

@push('styles')
<style>
.pec-grid       { display:grid; grid-template-columns:1fr 340px; gap:18px; align-items:start; }
.pec-left       { display:flex; flex-direction:column; gap:16px; min-width:0; }

/* Cartes */
.pec-card       { background:#fff; border-radius:12px; border:1px solid var(--border); overflow:hidden; min-width:0; }
.pec-card-head  { background:#F4F6FB; padding:12px 18px; border-bottom:1.5px solid var(--border);
                  display:flex; align-items:center; gap:9px; }
.pec-card-head .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.pec-card-head span { font-size:11px; font-weight:900; color:var(--navy); text-transform:uppercase; letter-spacing:.07em; }
.pec-card-body  { padding:18px; }

/* Toggle mode */
.mode-toggle    { display:flex; background:#F4F6FB; border:1.5px solid var(--border); border-radius:10px; overflow:hidden; }
.mode-btn       { flex:1; padding:8px 16px; font-size:12px; font-weight:700; cursor:pointer; border:none;
                  background:transparent; color:var(--text-muted); transition:.2s; }
.mode-btn.active{ background:#fff; color:var(--navy); box-shadow:0 1px 4px rgba(0,0,0,.08); border-radius:8px; margin:2px; }

/* Bandeau mode */
.mode-banner    { padding:10px 14px; border-radius:8px; font-size:12px; font-weight:600; margin-top:12px; }
.mode-banner.test{ background:#EBF8FF; border:1px solid #BEE3F8; color:#2B6CB0; }
.mode-banner.reel{ background:#F0FFF4; border:1px solid #9AE6B4; color:#276749; }

/* Formulaire */
.form-grid      { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-grid.full { grid-template-columns:1fr; }
.form-group     { display:flex; flex-direction:column; gap:4px; }
.form-group label{ font-size:11px; font-weight:700; color:var(--text-muted); }
.form-group label small { font-weight:600; color:#B0B8CC; margin-left:4px; }
.form-group input,
.form-group select { width:100%; padding:8px 12px; border:1.5px solid var(--border); border-radius:8px;
                     font-size:13px; font-family:inherit; color:var(--text); background:#fff;
                     transition:border-color .15s; }
.form-group input:focus,
.form-group select:focus { outline:none; border-color:var(--navy); }
.form-group input.mono { font-family:monospace; }
.form-group input:disabled { background:#F4F6FB; color:var(--text-muted); cursor:not-allowed; }

/* Séparateur de section */
.form-sep { grid-column:1/-1; border:none; border-top:1.5px solid var(--border); margin:4px 0; }

/* Boutons */
.btn-row    { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px; }
.btn-primary{ background:var(--navy); color:#fff; border:none; padding:9px 22px; border-radius:8px;
              font-size:13px; font-weight:700; cursor:pointer; transition:.15s; }
.btn-primary:hover   { background:var(--navy-light); }
.btn-primary:disabled{ opacity:.55; cursor:not-allowed; }
.btn-secondary{ background:#fff; color:var(--text); border:1.5px solid var(--border); padding:9px 16px;
                border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; transition:.15s; }
.btn-secondary:hover { border-color:var(--navy); color:var(--navy); }
.btn-ghost  { background:none; border:none; color:var(--text-muted); padding:9px 12px; border-radius:8px;
              font-size:13px; cursor:pointer; transition:.15s; }
.btn-ghost:hover { color:var(--text); background:#F4F6FB; }

/* Résultat */
.res-kpis   { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
.res-kpi    { background:#F4F6FB; border:1px solid var(--border); border-radius:10px; padding:12px; text-align:center; }
.res-kpi-label { font-size:10px; font-weight:700; color:var(--text-muted); margin-bottom:4px; }
.res-kpi-val   { font-size:22px; font-weight:900; color:var(--navy); line-height:1; }
.res-kpi-val.ok  { color:#38A169; }
.res-kpi-val.warn{ color:#D69E2E; }
.res-kpi-val.err { color:#E53E3E; }

.res-details { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.res-detail  { background:#F4F6FB; border:1px solid var(--border); border-radius:8px; padding:10px 12px; }
.res-detail-label { font-size:10px; font-weight:700; color:var(--text-muted); }
.res-detail-val   { font-size:12px; font-weight:800; color:var(--navy); font-family:monospace; margin-top:2px; }

.res-fault  { background:#FFF5F5; border:1px solid #FEB2B2; border-radius:8px; padding:12px 14px; margin-bottom:14px; }
.res-fault-title { font-size:12px; font-weight:800; color:#C53030; margin-bottom:6px; }
.res-fault-row   { font-size:12px; color:#C53030; }

.res-alert  { background:#FFFBEB; border:1px solid #FBD38D; border-radius:8px; padding:10px 14px;
              font-size:11px; font-weight:600; color:#92400E; margin-bottom:14px; }
.res-error  { background:#FFF5F5; border:1px solid #FEB2B2; border-radius:8px; padding:10px 14px;
              font-size:12px; font-weight:600; color:#C53030; margin-bottom:14px;
              }

/* XML blocks */
.xml-wrap   { margin-bottom:10px; }
.xml-head   { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.xml-head-label { font-size:10px; font-weight:900; color:var(--text-muted); text-transform:uppercase; letter-spacing:.07em; }
.xml-copy   { font-size:11px; color:var(--navy); background:none; border:none; cursor:pointer; font-weight:700;
              padding:2px 8px; border-radius:6px; transition:.15s; }
.xml-copy:hover { background:#F4F6FB; }
.xml-pre    { background:#F4F6FB; border:1px solid var(--border); border-radius:8px; padding:12px;
              font-family:'Consolas','Courier New',monospace; font-size:11px; line-height:1.5;
              color:var(--text); overflow-x:auto; max-height:240px; overflow-y:auto; white-space:pre;
              max-width:100%; box-sizing:border-box; }

/* Cas tests (colonne droite) */
.cas-list   { display:flex; flex-direction:column; gap:8px; }
.cas-btn    { width:100%; text-align:left; background:#fff; border:1.5px solid var(--border);
              border-radius:10px; padding:12px 14px; cursor:pointer; transition:.15s; }
.cas-btn:hover   { border-color:var(--navy-light); }
.cas-btn.active  { border-color:var(--navy); background:#EBF4FF; }
.cas-ref    { font-size:11px; font-weight:900; color:var(--navy); }
.cas-label  { font-size:11px; color:var(--text-muted); margin-top:1px; }
.cas-nir    { font-size:10px; font-family:monospace; color:#B0B8CC; margin-top:4px; }
.cas-taux   { display:inline-block; padding:2px 9px; border-radius:20px; font-size:10px; font-weight:800; margin-top:4px; }
.cas-taux.t100 { background:#F0FFF4; color:#276749; border:1px solid #9AE6B4; }
.cas-taux.t55  { background:#FFFBEB; color:#92400E; border:1px solid #FBD38D; }
.cas-taux.t0   { background:#FFF5F5; color:#C53030; border:1px solid #FEB2B2; }
.cas-taux.tq   { background:#F4F6FB; color:var(--text-muted); border:1px solid var(--border); }

/* Spinner */
.spinner { display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.4);
           border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; vertical-align:middle; margin-right:6px; }
@keyframes spin { to { transform:rotate(360deg); } }

[data-hidden] { display:none !important; }
</style>
@endpush

@section('content')
<div id="pecApp">

    {{-- En-tête --}}
    <div class="pec-card" style="margin-bottom:16px;">
        <div class="pec-card-body" style="display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;">
            <div style="display:flex;align-items:center;gap:14px;">
                <div style="width:44px;height:44px;border-radius:12px;background:var(--navy);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;color:var(--yellow);flex-shrink:0;">P+</div>
                <div>
                    <div style="font-size:16px;font-weight:800;color:var(--navy);">Module PEC+</div>
                    <div style="font-size:11px;color:var(--text-muted);">Aide à la Prise en Charge Transport — SESAM-Vitale v8.60</div>
                </div>
            </div>
            <div class="mode-toggle" style="width:260px;">
                <button class="mode-btn active" id="btnModeTest" onclick="setMode('test')">Mode test CNDA</button>
                <button class="mode-btn" id="btnModeReel" onclick="setMode('reel')">Mode réel</button>
            </div>
        </div>
        <div id="modeBanner" class="mode-banner test" style="margin:0 18px 14px;">
            <strong>Mode test CNDA :</strong> Environnement de qualification qualiflps. Les données patients sont fictives.
        </div>
    </div>

    <div class="pec-grid" id="pecGrid">

        {{-- Colonne gauche --}}
        <div class="pec-left">

            {{-- Config service --}}
            <div class="pec-card">
                <div class="pec-card-head">
                    <div class="dot" style="background:var(--navy);"></div>
                    <span>Configuration du service</span>
                </div>
                <div class="pec-card-body">
                    <div class="form-grid full" style="margin-bottom:12px;">
                        <div class="form-group">
                            <label>URL du service PEC+</label>
                            <input type="url" id="cfgUrl" value="https://qualiflps.services-ps.ameli.fr/lps">
                        </div>
                    </div>
                    <div class="form-grid">
                        <div class="form-group">
                            <label>Identifiant LPS</label>
                            <input type="text" id="cfgId" placeholder="votre identifiant" value="{{ config('pec.identifiant') ?: '122592892' }}">
                        </div>
                        <div class="form-group">
                            <label>Mot de passe</label>
                            <input type="password" id="cfgMdp" placeholder="••••••••" value="{{ config('pec.mot_de_passe') ?: 'Enduriste@12' }}">
                        </div>
                        <div class="form-group">
                            <label>N° Autorisation <small>(type 4)</small></label>
                            <input type="text" id="cfgNum" class="mono" value="{{ config('pec.num_autorisation_test') ?: 'TXL02NF16IR0' }}">
                        </div>
                        <div class="form-group">
                            <label>Nom LPS</label>
                            <input type="text" id="cfgNom" value="{{ config('pec.lps_nom', 'Taxilog') }}">
                        </div>
                        <div class="form-group">
                            <label>Version LPS</label>
                            <input type="text" id="cfgVer" value="{{ config('pec.lps_version', '1.0') }}">
                        </div>
                    </div>
                </div>
            </div>

            {{-- Données patient --}}
            <div class="pec-card">
                <div class="pec-card-head">
                    <div class="dot" style="background:#38A169;"></div>
                    <span>Données patient / prescription</span>
                </div>
                <div class="pec-card-body">
                    <div class="form-grid">
                        <div class="form-group">
                            <label>NIR <small>(13 chiffres, sans clé)</small></label>
                            <input type="text" id="ptNir" class="mono" maxlength="13">
                        </div>
                        <div class="form-group">
                            <label>Clé NIR <small>(2 chiffres)</small></label>
                            <input type="text" id="ptCle" class="mono" maxlength="2">
                        </div>
                        <div class="form-group">
                            <label>Date de naissance</label>
                            <input type="text" id="ptDdn" placeholder="JJ/MM/AAAA">
                        </div>
                        <div class="form-group">
                            <label>Rang de naissance</label>
                            <input type="number" id="ptRang" min="1" max="9" value="1">
                        </div>
                        <div class="form-group">
                            <label>Code prestation</label>
                            <select id="ptPresta">
                                <option value="TXI">TXI — Taxi (spécialité 56)</option>
                                <option value="VSL">VSL — Véhicule Sanitaire Léger</option>
                                <option value="ABA">ABA — Ambulance</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Grand régime <small>(ContexteBAM)</small></label>
                            <input type="text" id="ptRegime" class="mono" value="01">
                        </div>
                        <div class="form-group">
                            <label>Motifs <small>(séparés par virgule)</small></label>
                            <input type="text" id="ptMotifs" class="mono">
                        </div>
                        <div class="form-group">
                            <label>Date de prescription</label>
                            <input type="text" id="ptDatePresc" placeholder="JJ/MM/AAAA">
                        </div>
                        <div class="form-group">
                            <label>Date de réalisation</label>
                            <input type="text" id="ptDateReal" placeholder="JJ/MM/AAAA">
                        </div>
                        <div class="form-group">
                            <label>Date AT/MP <small>(optionnel)</small></label>
                            <input type="text" id="ptDateAt" placeholder="JJ/MM/AAAA">
                        </div>
                        <div class="form-group">
                            <label>N° AT/MP <small>(exclusif date AT)</small></label>
                            <input type="text" id="ptNumAt" class="mono" placeholder="892512344">
                        </div>
                    </div>
                    <div class="btn-row">
                        <button class="btn-primary" id="btnAppel" onclick="lancerAppel()">
                            Appeler PEC+
                        </button>
                        <button class="btn-secondary" onclick="reinitialiser()">Réinitialiser</button>
                    </div>
                </div>
            </div>

            {{-- Résultat --}}
            <div class="pec-card" id="blocResultat" data-hidden>
                <div class="pec-card-head">
                    <div class="dot" id="dotResultat" style="background:#805AD5;"></div>
                    <span>Résultat</span>
                </div>
                <div class="pec-card-body" id="resBody"></div>
            </div>

        </div>

        {{-- Colonne droite : cas de tests --}}
        <div id="colonneTests">
            <div class="pec-card">
                <div class="pec-card-head">
                    <div class="dot" style="background:#D69E2E;"></div>
                    <span>Cas de tests CNDA</span>
                </div>
                <div class="pec-card-body" style="padding:10px 12px;">
                    <div style="font-size:11px;color:var(--text-muted);margin-bottom:10px;">Cliquer pour pré-remplir le formulaire</div>
                    <div class="cas-list" id="casList"></div>
                </div>
            </div>
        </div>

    </div>
</div>

<script>
(function() {
    const today = new Date();
    const todayFr = pad(today.getDate()) + '/' + pad(today.getMonth()+1) + '/' + today.getFullYear();

    function pad(n) { return String(n).padStart(2,'0'); }

    // Init dates
    document.getElementById('ptDatePresc').value = todayFr;
    document.getElementById('ptDateReal').value  = todayFr;

    // Mode
    let currentMode = 'test';
    const URLS = {
        test: 'https://qualiflps.services-ps.ameli.fr/lps',
        reel: 'https://services-ps.ameli.fr/lps',
    };
    const NUMS = {
        test: '{{ config("pec.num_autorisation_test") ?: "TXL02NF16IR0" }}',
        reel: '{{ config("pec.num_autorisation") ?: "TXL02NF16LR1" }}',
    };

    window.setMode = function(mode) {
        currentMode = mode;
        document.getElementById('cfgUrl').value = URLS[mode];
        document.getElementById('cfgNum').value = NUMS[mode];
        document.getElementById('btnModeTest').classList.toggle('active', mode === 'test');
        document.getElementById('btnModeReel').classList.toggle('active', mode === 'reel');
        const banner = document.getElementById('modeBanner');
        if (mode === 'test') {
            banner.className = 'mode-banner test';
            banner.innerHTML = '<strong>Mode test CNDA :</strong> Environnement de qualification qualiflps. Les données patients sont fictives.';
            document.getElementById('colonneTests').style.display = '';
            document.getElementById('pecGrid').style.gridTemplateColumns = '1fr 340px';
            document.getElementById('ptNir').value = '';
            document.getElementById('ptCle').value = '';
            document.getElementById('ptDdn').value = '';
        } else {
            banner.className = 'mode-banner reel';
            banner.innerHTML = '<strong>Mode réel :</strong> Connexion au service de production de l\'Assurance Maladie. Données patients réelles.';
            document.getElementById('colonneTests').style.display = 'none';
            document.getElementById('pecGrid').style.gridTemplateColumns = '1fr';
            document.getElementById('ptNir').value = '1830112300028';
            document.getElementById('ptCle').value = '30';
            document.getElementById('ptDdn').value = '12/01/1983';
        }
        cacActif = null;
        document.querySelectorAll('.cas-btn').forEach(b => b.classList.remove('active'));
    };

    // Cas de tests
    const casTests = [
        { ref:'1.00', label:'Messages de connexion', nir:'1650163220102', cle:'18', ddn:'02/06/1976', rang:'1', prestation:'TXI', motifs:'', tauxAttendu:'?' },
        { ref:'1.03', label:'Exo TM (justif=5) — 100%', nir:'1550163220113', cle:'12', ddn:'01/01/1955', rang:'1', prestation:'TXI', motifs:'', tauxAttendu:'100%' },
        { ref:'1.05', label:'Alsace-Moselle (nature=13) — 100%', nir:'1600163220107', cle:'64', ddn:'01/01/1960', rang:'1', prestation:'TXI', motifs:'', tauxAttendu:'100%' },
        { ref:'1.06', label:'FSV ASPA (justif=9) — 100%', nir:'1400163220766', cle:'94', ddn:'01/01/1940', rang:'1', prestation:'TXI', motifs:'', tauxAttendu:'100%' },
        { ref:'1.07', label:'AME — TP AMC=OUI, 0%', nir:'1800163220109', cle:'52', ddn:'01/01/1980', rang:'1', prestation:'TXI', motifs:'', tauxAttendu:'0%' },
        { ref:'1.08', label:'Cas simple maladie — 55%', nir:'1650163220102', cle:'18', ddn:'01/01/1965', rang:'1', prestation:'TXI', motifs:'', tauxAttendu:'55%' },
        { ref:'1.09', label:'ALD non exonérante — 55%', nir:'1650163220102', cle:'18', ddn:'01/08/1998', rang:'1', prestation:'TXI', motifs:'', tauxAttendu:'55%' },
        { ref:'1.11', label:'C2S / CMU-C — TP AMO+AMC OUI', nir:'2850163220105', cle:'52', ddn:'01/01/1985', rang:'1', prestation:'TXI', motifs:'', tauxAttendu:'55%' },
        { ref:'1.12', label:'ALD 100% demandée → 55% retourné', nir:'1650163220102', cle:'18', ddn:'01/01/1965', rang:'1', prestation:'TXI', motifs:'ALD', tauxAttendu:'55%' },
        { ref:'1.13', label:'Accident de travail (AT/MP) — 100%', nir:'1650163220102', cle:'18', ddn:'01/01/1965', rang:'1', prestation:'TXI', motifs:'', numAt:'892512344', tauxAttendu:'100%' },
        { ref:'1.14', label:'ALD+C2S (ALD prime) — 100%', nir:'2850163220105', cle:'52', ddn:'01/01/1985', rang:'1', prestation:'TXI', motifs:'', datePrescription:'24/01/2025', dateRealisation:'24/01/2025', tauxAttendu:'100%' },
        { ref:'1.26', label:'ALD 100% + TS (ABA/VSL) — 100%', nir:'1650163220102', cle:'18', ddn:'01/08/1998', rang:'1', prestation:'ABA', motifs:'', tauxAttendu:'100%' },
        { ref:'1.27', label:'ALD 100% + Taxi — TP NON', nir:'1650163220102', cle:'18', ddn:'01/08/1998', rang:'1', prestation:'TXI', motifs:'', tauxAttendu:'100%' },
        { ref:'1.28', label:'Maternité + TS (ABA/VSL) — 100%', nir:'1650163220102', cle:'18', ddn:'02/06/1976', rang:'1', prestation:'ABA', motifs:'', datePrescription:'25/06/2025', dateRealisation:'10/11/2025', tauxAttendu:'100%' },
        { ref:'1.29', label:'Maternité + Taxi — TP NON', nir:'1650163220102', cle:'18', ddn:'02/06/1976', rang:'1', prestation:'TXI', motifs:'', datePrescription:'25/06/2025', dateRealisation:'10/11/2025', tauxAttendu:'100%' },
        { ref:'1.30', label:'Alsace-Moselle + TS — TP OUI', nir:'1600163220107', cle:'64', ddn:'01/01/1960', rang:'1', prestation:'ABA', motifs:'', tauxAttendu:'100%' },
        { ref:'1.31', label:'Régime général + TS — TP OUI', nir:'1650163220102', cle:'18', ddn:'01/01/1965', rang:'1', prestation:'ABA', motifs:'', tauxAttendu:'55%' },
        { ref:'2.01', label:'Cohérence dates (prescription > naissance)', nir:'1650163220102', cle:'18', ddn:'02/03/2018', rang:'1', prestation:'TXI', motifs:'', tauxAttendu:'ERREUR' },
    ];

    let cacActif = null;
    const casList = document.getElementById('casList');
    casTests.forEach(cas => {
        const tauxClass = cas.tauxAttendu === '100%' ? 't100' : cas.tauxAttendu === '55%' ? 't55' : cas.tauxAttendu === '0%' ? 't0' : 'tq';
        const btn = document.createElement('button');
        btn.className = 'cas-btn';
        btn.dataset.ref = cas.ref;
        btn.innerHTML = `
            <div style="display:flex;justify-content:space-between;align-items:start;gap:8px;">
                <div>
                    <div class="cas-ref">Test ${cas.ref}</div>
                    <div class="cas-label">${cas.label}</div>
                </div>
                <span class="cas-taux ${tauxClass}">${cas.tauxAttendu}</span>
            </div>
            <div class="cas-nir">${cas.nir} / ${cas.cle}</div>
        `;
        btn.onclick = () => chargerCas(cas);
        casList.appendChild(btn);
    });

    window.chargerCas = function(cas) {
        cacActif = cas.ref;
        document.querySelectorAll('.cas-btn').forEach(b => b.classList.toggle('active', b.dataset.ref === cas.ref));
        document.getElementById('ptNir').value   = cas.nir;
        document.getElementById('ptCle').value   = cas.cle;
        document.getElementById('ptDdn').value   = cas.ddn;
        document.getElementById('ptRang').value  = cas.rang;
        document.getElementById('ptPresta').value = cas.prestation;
        document.getElementById('ptMotifs').value = cas.motifs || '';
        document.getElementById('ptDatePresc').value = cas.datePrescription || todayFr;
        document.getElementById('ptDateReal').value  = cas.dateRealisation  || todayFr;
        document.getElementById('ptDateAt').value    = cas.dateAt  || '';
        document.getElementById('ptNumAt').value     = cas.numAt   || '';
        document.getElementById('blocResultat').setAttribute('data-hidden','');
    };

    window.lancerAppel = async function() {
        const btn = document.getElementById('btnAppel');
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner"></span>Envoi en cours…';
        document.getElementById('blocResultat').setAttribute('data-hidden','');

        try {
            const resp = await fetch('/admin/pec-plus/appel', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept':       'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                },
                body: JSON.stringify({
                    service_url:       document.getElementById('cfgUrl').value,
                    identifiant:       document.getElementById('cfgId').value,
                    mot_de_passe:      document.getElementById('cfgMdp').value,
                    num_autorisation:  document.getElementById('cfgNum').value,
                    lps_nom:           document.getElementById('cfgNom').value,
                    lps_version:       document.getElementById('cfgVer').value,
                    nir:               document.getElementById('ptNir').value,
                    cle_nir:           document.getElementById('ptCle').value,
                    ddn:               document.getElementById('ptDdn').value,
                    rang:              parseInt(document.getElementById('ptRang').value) || 1,
                    code_prestation:   document.getElementById('ptPresta').value,
                    grand_regime:      document.getElementById('ptRegime').value || '01',
                    motif_transport:   document.getElementById('ptMotifs').value || 'TAXIS',
                    date_prescription: document.getElementById('ptDatePresc').value,
                    date_realisation:  document.getElementById('ptDateReal').value,
                }),
            });
            const json = await resp.json();
            afficherResultat(json);
        } catch(e) {
            afficherErreur(e.message);
        } finally {
            btn.disabled = false;
            btn.innerHTML = 'Appeler PEC+';
        }
    };

    function afficherResultat(json) {
        document.getElementById('blocResultat').removeAttribute('data-hidden');
        const body = document.getElementById('resBody');
        const p    = json.parsed || {};
        let   html = '';

        const xmlStyle   = 'background:#F4F6FB;border:1px solid #E8ECF4;border-radius:8px;padding:12px;font-family:Consolas,monospace;font-size:11px;line-height:1.5;overflow-x:auto;max-height:220px;overflow-y:auto;white-space:pre;margin-top:6px;';
        const xmlLblStyle = 'font-size:10px;font-weight:900;color:#8A93A8;text-transform:uppercase;letter-spacing:.07em;';
        const btnStyle   = 'font-size:11px;color:#1A2340;background:none;border:none;cursor:pointer;font-weight:700;padding:2px 8px;border-radius:6px;';

        // Erreur connexion
        if (json.erreur && !p.tauxApplicable && !p.faultstring) {
            html += '<div style="background:#FFF5F5;border:1px solid #FEB2B2;border-radius:8px;padding:12px 14px;color:#C53030;font-size:13px;margin-bottom:12px;"><strong>Erreur&nbsp;:</strong> ' + escHtml(json.erreur) + '</div>';
            document.getElementById('dotResultat').style.background = '#E53E3E';
        }

        // Fault SOAP
        if (p.faultstring) {
            html += '<div style="background:#FFF5F5;border:1px solid #FEB2B2;border-radius:8px;padding:12px 14px;margin-bottom:12px;">'
                  + '<div style="font-size:12px;font-weight:800;color:#C53030;margin-bottom:6px;">Fault SOAP</div>'
                  + '<div style="font-size:12px;color:#C53030;"><strong>Code&nbsp;:</strong> ' + escHtml(p.faultcode||'—') + '</div>'
                  + '<div style="font-size:12px;color:#C53030;"><strong>Message&nbsp;:</strong> ' + escHtml(p.faultstring) + '</div>'
                  + '</div>';
            document.getElementById('dotResultat').style.background = '#D69E2E';
        }

        // KPIs
        if (!p.faultstring) {
            const taux      = parseInt(p.tauxApplicable);
            const tauxColor = taux === 100 ? '#38A169' : taux === 0 ? '#E53E3E' : '#D69E2E';

            const tpColor = p.tiersPayantReglementaireAMO === 'OUI' ? 'ok' : p.tiersPayantReglementaireAMO === 'NON' ? 'err' : '';

            html += '<div class="res-kpis">'
                  + '<div class="res-kpi"><div class="res-kpi-label">Taux applicable</div><div class="res-kpi-val ' + (taux===100?'ok':taux===0?'err':'warn') + '">' + (isNaN(taux) ? '—' : taux+'%') + '</div></div>'
                  + '<div class="res-kpi"><div class="res-kpi-label">Tiers payant AMO</div><div class="res-kpi-val ' + tpColor + '" style="font-size:16px;">' + escHtml(p.tiersPayantReglementaireAMO || '—') + '</div></div>'
                  + '<div class="res-kpi"><div class="res-kpi-label">Nature assurance</div><div class="res-kpi-val" style="font-size:16px;color:#2B6CB0;">' + escHtml(p.codeNatureAssurance || '—') + '</div></div>'
                  + '<div class="res-kpi"><div class="res-kpi-label">Justificatif ExoTM</div><div class="res-kpi-val warn" style="font-size:16px;">' + escHtml(String(p.justificatifExoTM ?? '—')) + '</div></div>'
                  + '</div>';

            const details = [
                ['Grand régime', p.grandRegime],
                ['Organisme', p.organisme],
                ['Entité gestion', p.entiteGestion],
                ['Destinataire règlement', p.destinataireReglement],
                ['N° Org. Complémentaire', p.numOrganismeComplementaire],
                ['Type contrat', p.typeContrat],
            ].filter(function(x){ return x[1]; });
            if (details.length) {
                html += '<div class="res-details">'
                      + details.map(function(x){ return '<div class="res-detail"><div class="res-detail-label">' + x[0] + '</div><div class="res-detail-val">' + escHtml(x[1]) + '</div></div>'; }).join('')
                      + '</div>';
            }

            html += '<div class="res-alert">Attention, le présent taux de prise en charge n\'est applicable que si le transport est en lien avec une situation permettant son remboursement par l\'Assurance Maladie Obligatoire.</div>';

            document.getElementById('dotResultat').style.background = tauxColor;
        }

        // XML requête
        if (json.xml_requete) {
            const encoded1 = encodeURIComponent(json.xml_requete);
            html += '<div style="margin-bottom:10px;">'
                  + '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;"><span style="' + xmlLblStyle + '">Requête XML</span><button onclick="copierTexte(this)" style="' + btnStyle + '" data-text="' + encoded1.replace(/"/g,'%22') + '">Copier</button></div>'
                  + '<pre style="' + xmlStyle + '">' + escHtml(json.xml_requete) + '</pre>'
                  + '</div>';
        }

        // XML réponse
        if (json.xml_reponse) {
            const encoded2  = encodeURIComponent(json.xml_reponse);
            const httpLabel = json.http_status ? ' <span style="font-weight:600;color:#B0B8CC;">HTTP ' + json.http_status + '</span>' : '';
            html += '<div>'
                  + '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;"><span style="' + xmlLblStyle + '">Réponse XML' + httpLabel + '</span><button onclick="copierTexte(this)" style="' + btnStyle + '" data-text="' + encoded2.replace(/"/g,'%22') + '">Copier</button></div>'
                  + '<pre style="' + xmlStyle + '">' + escHtml(json.xml_reponse) + '</pre>'
                  + '</div>';
        }

        body.innerHTML = html;
    }

    function escHtml(s) { return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
    window.copierTexte = function(btn) { navigator.clipboard?.writeText(decodeURIComponent(btn.dataset.text)).catch(()=>{}); };

    function afficherErreur(msg) {
        show('resError');
        document.getElementById('resError').textContent = msg;
        document.getElementById('blocResultat').removeAttribute('data-hidden');
    }

    window.reinitialiser = function() {
        ['ptNir','ptCle','ptDdn','ptMotifs','ptDateAt','ptNumAt'].forEach(id => document.getElementById(id).value = '');
        document.getElementById('ptRang').value   = '1';
        document.getElementById('ptPresta').value = 'TXI';
        document.getElementById('ptRegime').value = '01';
        document.getElementById('ptDatePresc').value = todayFr;
        document.getElementById('ptDateReal').value  = todayFr;
        document.getElementById('blocResultat').setAttribute('data-hidden','');
        cacActif = null;
        document.querySelectorAll('.cas-btn').forEach(b => b.classList.remove('active'));
    };

    window.copier = function(id) {
        const text = document.getElementById(id)?.textContent || '';
        navigator.clipboard?.writeText(text).catch(() => {});
    };

    function show(id) { const el = document.getElementById(id); if (el) el.removeAttribute('data-hidden'); }
    function hide(id) { const el = document.getElementById(id); if (el) el.setAttribute('data-hidden',''); }
})();
</script>
@endsection