@extends('layouts.app')

@section('title', 'Dossier Transport')
@section('page-title', 'Dossier Transport')

@push('styles')
<style>
    .dos-card {
        background: #fff;
        border-radius: 12px;
        border: 1px solid var(--border);
        padding: 20px 24px;
        margin-bottom: 16px;
    }

    /* En-tête dossier */
    .dos-header {
        display: grid;
        grid-template-columns: auto 1fr auto 1fr;
        gap: 10px 20px;
        align-items: center;
        margin-bottom: 16px;
    }
    .dos-label {
        font-size: 13px;
        font-weight: 700;
        color: var(--text-muted);
        white-space: nowrap;
    }
    .dos-input {
        border: 1.5px solid var(--border);
        border-radius: 7px;
        padding: 6px 10px;
        font-family: 'Nunito', sans-serif;
        font-size: 13px;
        font-weight: 700;
        color: var(--text);
        background: #fff;
        outline: none;
        width: 100%;
        transition: border-color 0.2s;
    }
    .dos-input:focus { border-color: var(--yellow); }
    .dos-input.readonly { background: #F4F6FB; color: var(--text); }
    .dos-select {
        border: 1.5px solid var(--border);
        border-radius: 7px;
        padding: 6px 10px;
        font-family: 'Nunito', sans-serif;
        font-size: 13px;
        font-weight: 700;
        color: var(--text);
        background: #fff;
        outline: none;
        width: 100%;
        cursor: pointer;
    }
    .dos-client-name {
        font-size: 15px;
        font-weight: 800;
        color: var(--navy);
        background: #EEF2FF;
        border: 1.5px solid #C3CFEE;
        border-radius: 7px;
        padding: 6px 12px;
    }
    .icon-btn {
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px;
        border-radius: 6px;
        display: inline-flex;
        align-items: center;
        transition: background 0.15s;
    }
    .icon-btn:hover { background: var(--bg); }
    .icon-btn svg { width: 18px; height: 18px; stroke: var(--text-muted); fill: none; stroke-width: 2; stroke-linecap: round; }

    /* Onglets */
    .tabs {
        display: flex;
        gap: 0;
        margin-bottom: 0;
        border-bottom: none;
    }
    .tab-btn {
        padding: 10px 28px;
        font-family: 'Nunito', sans-serif;
        font-size: 14px;
        font-weight: 800;
        border: 2px solid var(--border);
        border-bottom: none;
        border-radius: 10px 10px 0 0;
        cursor: pointer;
        background: #E8ECF4;
        color: var(--text-muted);
        margin-right: 4px;
        transition: all 0.15s;
    }
    .tab-btn.active {
        background: var(--yellow);
        color: var(--navy);
        border-color: var(--yellow);
        z-index: 1;
    }
    .tab-content {
        display: none;
        background: #EEF4FF;
        border: 2px solid var(--border);
        border-radius: 0 12px 12px 12px;
        padding: 24px;
    }
    .tab-content.active { display: block; }

    /* Onglet Dossier */
    .form-grid {
        display: grid;
        grid-template-columns: 180px 1fr;
        gap: 12px 16px;
        align-items: center;
        max-width: 560px;
    }
    .form-label {
        font-size: 13px;
        font-weight: 700;
        color: var(--text);
    }

    .checkbox-row {
        display: flex;
        gap: 24px;
        margin-bottom: 20px;
    }
    .check-lbl {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }
    .check-lbl input { accent-color: var(--navy); width: 14px; height: 14px; }

    /* Encart remboursement */
    .remb-box {
        border: 2px solid var(--yellow);
        border-radius: 10px;
        padding: 18px 20px;
        background: #fff;
        min-width: 280px;
    }
    .remb-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        font-size: 13px;
        font-weight: 700;
    }
    .remb-row.total {
        border-top: 1px solid var(--border);
        padding-top: 10px;
        margin-top: 6px;
        font-size: 14px;
        font-weight: 800;
        color: var(--navy);
    }
    .remb-title { color: var(--navy); font-weight: 800; font-size: 14px; }
    .remb-amount { font-weight: 800; }
    .remb-muted { color: var(--text-muted); font-size: 12px; }

    /* Onglet Transports */
    .transport-stats {
        display: flex;
        gap: 32px;
        align-items: center;
        margin-bottom: 16px;
        font-size: 13px;
        font-weight: 700;
        flex-wrap: wrap;
    }
    .transport-stats span { color: var(--text-muted); }
    .transport-stats strong { color: var(--navy); }

    .trajet-table {
        width: 100%;
        border-collapse: collapse;
        background: #fff;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid var(--border);
    }
    .trajet-table thead th {
        padding: 9px 12px;
        font-size: 12px;
        font-weight: 800;
        color: var(--text-muted);
        text-align: left;
        background: #F4F6FB;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }
    .trajet-table tbody td {
        padding: 10px 12px;
        font-size: 13px;
        font-weight: 600;
        color: var(--text);
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
    }
    .trajet-table tbody tr:last-child td { border-bottom: none; }
    .trajet-table tbody tr:hover td { background: #F7F9FC; }
    .trajet-table tbody tr.selected td { background: #D4E4F7; }

    .print-options {
        display: flex;
        gap: 24px;
        margin-top: 16px;
        justify-content: flex-end;
    }

    /* Boutons bas de page */
    .page-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 20px;
        flex-wrap: wrap;
    }
    .btn-y {
        background: var(--yellow);
        color: var(--navy);
        border: none;
        border-radius: 20px;
        padding: 9px 22px;
        font-family: 'Nunito', sans-serif;
        font-size: 13px;
        font-weight: 800;
        cursor: pointer;
        transition: background 0.2s;
    }
    .btn-y:hover { background: var(--yellow-dark); }
    .btn-o {
        background: transparent;
        color: var(--navy);
        border: 2px solid var(--navy);
        border-radius: 20px;
        padding: 7px 22px;
        font-family: 'Nunito', sans-serif;
        font-size: 13px;
        font-weight: 800;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
        display: inline-block;
    }
    .btn-o:hover { background: var(--navy); color: #fff; }

    .date-facture {
        font-size: 13px;
        font-weight: 700;
        color: var(--text-muted);
        margin-top: 10px;
    }

    .sep { flex: 1; }

    .success-toast {
        background: #D1FAE5; border: 1.5px solid #A7F3D0; border-radius: 10px;
        padding: 10px 16px; margin-bottom: 14px; font-size: 13px;
        font-weight: 700; color: #065F46; display: flex; align-items: center; gap: 8px;
    }
</style>
@endpush

@section('content')

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

<form id="dossier-form" method="POST" action="{{ route('transport.dossier.update', $dossier->id) }}">
    @csrf @method('PUT')

{{-- En-tête --}}
<div class="dos-card">
    <div style="display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap;">
        <div style="flex:1; min-width:300px;">
            {{-- Ligne 1 --}}
            <div style="display:flex; align-items:center; gap:16px; margin-bottom:12px; flex-wrap:wrap;">
                <div style="display:flex; align-items:center; gap:8px;">
                    <span class="dos-label">No Dossier</span>
                    <input type="text" class="dos-input readonly" value="{{ $dossier->num_dossier }}" readonly style="width:80px;">
                </div>
                <div style="display:flex; align-items:center; gap:8px; flex:1;">
                    <span class="dos-label" style="white-space:nowrap;">Transport concernant</span>
                    <span class="dos-client-name" style="flex:1;">
                        {{ strtoupper($dossier->client->nom ?? '') }} {{ $dossier->client->prenom ?? '' }}
                    </span>
                    <input type="hidden" name="client_id" value="{{ $dossier->client_id }}">
                </div>
            </div>
            {{-- Ligne 2 --}}
            <div style="display:flex; align-items:center; gap:16px; margin-bottom:12px; flex-wrap:wrap;">
                <div style="display:flex; align-items:center; gap:8px;">
                    <span class="dos-label" style="white-space:nowrap;">Type de Dossier</span>
                    <select class="dos-select" name="type_dossier" style="width:220px;">
                        <option value="normal"  {{ $dossier->type_dossier === 'normal'  ? 'selected' : '' }}>Transport Normal</option>
                        <option value="serie"   {{ $dossier->type_dossier === 'serie'   ? 'selected' : '' }}>Transport Série</option>
                        <option value="urgent"  {{ $dossier->type_dossier === 'urgent'  ? 'selected' : '' }}>Transport Urgent</option>
                    </select>
                </div>
                <div style="display:flex; align-items:center; gap:8px; margin-left:auto;">
                    <span class="dos-label" style="white-space:nowrap;">Motif de transport</span>
                    <select class="dos-select" name="motif_id" style="width:220px;">
                        <option value=""></option>
                        @foreach($motifs as $motif)
                            <option value="{{ $motif->id }}" {{ $dossier->motif_id == $motif->id ? 'selected' : '' }}>
                                {{ $motif->libelle }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
            {{-- Ligne 3 --}}
            <div style="display:flex; align-items:center; gap:24px; flex-wrap:wrap;">
                <div style="display:flex; align-items:center; gap:8px;">
                    <span class="dos-label">Date dossier</span>
                    <input type="date" class="dos-input" name="date_dossier" value="{{ $dossier->date_dossier?->format('Y-m-d') }}" style="width:160px;">
                </div>
                <div style="display:flex; align-items:center; gap:8px;">
                    <span class="dos-label" style="white-space:nowrap;">Date Prescription</span>
                    <input type="date" class="dos-input" name="date_prescription" value="{{ $dossier->date_prescription?->format('Y-m-d') }}" style="width:160px;">
                </div>
                <div style="display:flex; align-items:center; gap:8px; margin-left:auto;">
                    <span class="dos-label" style="white-space:nowrap;">Numéro de Facture</span>
                    <input type="text" class="dos-input readonly" readonly value="{{ $dossier->numero_facture }}" style="width:140px;">
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Onglets --}}
<div class="tabs">
    <button type="button" class="tab-btn active" onclick="switchTab('dossier', this)">Dossier</button>
    <button type="button" class="tab-btn" onclick="switchTab('transports', this)">Transport(s)</button>
    @if($dossier->statut === 'facture')
    <button type="button" class="tab-btn" onclick="switchTab('reglement', this)">Règlement</button>
    <button type="button" class="tab-btn" onclick="switchTab('noemie', this)">Noémie</button>
    @endif
</div>

{{-- Onglet Dossier --}}
<div id="tab-dossier" class="tab-content active">
    <div style="display:flex; gap:32px; flex-wrap:wrap;">

        {{-- Colonne gauche --}}
        <div style="flex:1; min-width:300px;">
            <div class="checkbox-row">
                <label class="check-lbl">
                    <input type="checkbox" name="hospitalisation" value="1" {{ $dossier->hospitalisation ? 'checked' : '' }}> Hospitalisation
                </label>
                <label class="check-lbl">
                    <input type="checkbox" name="transfert" value="1" {{ $dossier->transfert ? 'checked' : '' }}> Transfert
                </label>
                <label class="check-lbl">
                    <input type="checkbox" name="longue_distance" value="1" {{ $dossier->longue_distance ? 'checked' : '' }}> Longue distance
                </label>
            </div>

            <div id="section-teletrans">
            <div class="form-grid">
                <span class="form-label">Nature Assurance</span>
                <select class="dos-select" name="nature_assurance">
                    @foreach(\App\Models\Dossier::$naturesAssurance as $val => $label)
                        <option value="{{ $val }}" {{ $dossier->nature_assurance == $val ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>

                <span class="form-label">Pièce Justificative</span>
                <select class="dos-select" name="piece_justificative">
                    @foreach(\App\Models\Dossier::$piecesJustificatives as $val => $label)
                        <option value="{{ $val }}" {{ $dossier->piece_justificative == $val ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>

                <span class="form-label">Exoneration TM</span>
                <select class="dos-select" name="exoneration_tm">
                    @foreach(\App\Models\Dossier::$exonerationsTM as $val => $label)
                        <option value="{{ $val }}" {{ $dossier->exoneration_tm == $val ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>

                <span class="form-label">Accord Préalable</span>
                <select class="dos-select" name="accord_prealable">
                    @foreach(\App\Models\Dossier::$accordsPrealables as $val => $label)
                        <option value="{{ $val }}" {{ $dossier->accord_prealable == $val ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>

                <span class="form-label">Prescripteur</span>
                <div style="display:flex; gap:6px; align-items:center;">
                    <select class="dos-select" name="prescripteur_id" style="flex:1;">
                        <option value=""></option>
                        @foreach($prescripteurs as $p)
                            <option value="{{ $p->id }}" {{ $dossier->prescripteur_id == $p->id ? 'selected' : '' }}>
                                {{ $p->nom }} {{ $p->prenom ?? '' }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <span class="form-label">No Finess</span>
                <span style="font-size:13px; font-weight:600; color:var(--text-muted);">
                    {{ $dossier->prescripteur?->no_finess ?? '' }}
                    @if($dossier->prescripteur?->no_rpps) &nbsp;—&nbsp; No RPPS : {{ $dossier->prescripteur->no_rpps }} @endif
                </span>

                <span class="form-label">Structure</span>
                <select class="dos-select" name="structure" style="width:100%;">
                    <option value=""></option>
                </select>

                <span class="form-label">Caisse</span>
                <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
                    <select class="dos-select" name="caisse_id" style="flex:1;">
                        <option value=""></option>
                        @foreach($caisses as $caisse)
                            <option value="{{ $caisse->id }}" {{ $dossier->caisse_id == $caisse->id ? 'selected' : '' }}>
                                {{ $caisse->nom }}
                            </option>
                        @endforeach
                    </select>
                    <span style="font-size:11px;color:#E53E3E;font-weight:800;">—</span>
                    <span class="form-label">Code affiliation</span>
                    <input type="text" class="dos-input" name="code_affiliation" value="{{ $dossier->code_affiliation }}" style="width:110px;">
                </div>

                <span class="form-label"></span>
                <div style="display:flex; gap:8px; align-items:center;">
                    <span class="form-label">Situation Particulière</span>
                    <select class="dos-select" name="situation_particuliere" style="width:130px;">
                        @foreach(\App\Models\Dossier::$situationsParticulieres as $val => $label)
                            <option value="{{ $val }}" {{ $dossier->situation_particuliere == $val ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>

                <span class="form-label">Mutuelle</span>
                <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
                    <select class="dos-select" name="mutuelle_id" style="flex:1;">
                        <option value=""></option>
                        @foreach($mutuelles as $mutuelle)
                            <option value="{{ $mutuelle->id }}" {{ $dossier->mutuelle_id == $mutuelle->id ? 'selected' : '' }}>
                                {{ $mutuelle->nom }}
                            </option>
                        @endforeach
                    </select>
                    <span style="font-size:11px;color:#E53E3E;font-weight:800;">—</span>
                    <span class="form-label">Type Cont.</span>
                    <select class="dos-select" name="type_contrat" style="width:110px;">
                        <option value=""></option>
                        @foreach(\App\Models\Dossier::$typesContrat as $val => $label)
                            <option value="{{ $val }}" {{ $dossier->type_contrat == $val ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>

                <span class="form-label"></span>
                <div style="display:flex; gap:8px; align-items:center;">
                    <span class="form-label">Org. compl.</span>
                    <input type="text" class="dos-input" name="org_complementaire" value="{{ $dossier->org_complementaire }}" style="width:110px;">
                </div>
            </div>

            <div style="margin-top:20px;">
                <div style="display:flex; align-items:center; gap:10px; margin-bottom:10px;">
                    <button type="button" id="btn-add-piece" onclick="document.getElementById('inputFichier').click()"
                        style="background:none;border:none;cursor:pointer;font-size:22px;color:#38A169;font-weight:800;line-height:1;"
                        title="Ajouter une pièce">+</button>
                    <span style="font-size:12px;font-weight:700;color:var(--text-muted);">Pièces Manquantes</span>
                    <div style="width:4px;height:30px;background:var(--yellow);border-radius:2px;margin-left:4px;"></div>
                    <span id="pieces-count" style="font-size:11px;font-weight:700;color:var(--text-muted);margin-left:auto;">
                        {{ $dossier->pieces->count() }}/3
                    </span>
                </div>

                {{-- Input fichier caché --}}
                <input type="file" id="inputFichier" accept="image/*,.pdf" style="display:none;" onchange="uploadPiece(this)">

                {{-- Liste des pièces --}}
                <div id="pieces-list">
                    @foreach($dossier->pieces as $piece)
                    <div class="piece-item" id="piece-{{ $piece->id }}" style="display:flex;align-items:center;gap:8px;padding:6px 10px;background:#F8F9FF;border:1.5px solid var(--border);border-radius:8px;margin-bottom:6px;">
                        @if($piece->isImage())
                            <svg viewBox="0 0 24 24" style="width:18px;height:18px;stroke:#38A169;fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0;"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
                        @else
                            <svg viewBox="0 0 24 24" style="width:18px;height:18px;stroke:#E53E3E;fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0;"><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>
                        @endif
                        <a href="{{ $piece->url() }}" target="_blank" style="font-size:12px;font-weight:700;color:var(--navy);text-decoration:none;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="{{ $piece->nom_original }}">
                            {{ $piece->nom_original }}
                        </a>
                        <span style="font-size:11px;color:var(--text-muted);white-space:nowrap;">{{ $piece->tailleFormatee() }}</span>
                        <button type="button" onclick="supprimerPiece({{ $piece->id }})"
                            style="background:none;border:none;cursor:pointer;padding:2px;color:#E53E3E;display:flex;align-items:center;"
                            title="Supprimer">
                            <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                        </button>
                    </div>
                    @endforeach
                </div>

                {{-- Message upload --}}
                <div id="piece-uploading" style="display:none;font-size:12px;font-weight:700;color:var(--text-muted);padding:6px 0;">
                    ⏳ Envoi en cours…
                </div>
                <div id="piece-error" style="display:none;font-size:12px;font-weight:700;color:#E53E3E;padding:4px 0;"></div>
            </div>
            </div>{{-- /section-teletrans --}}
        </div>

        {{-- Colonne droite : encart remboursement --}}
        <div style="min-width:280px; max-width:320px;">
            <div style="display:flex; align-items:center; gap:8px; margin-bottom:16px;">
                <span class="form-label" style="white-space:nowrap;">Date de fin de droit</span>
                <input type="date" class="dos-input" name="date_fin_droit" value="{{ $dossier->date_fin_droit?->format('Y-m-d') }}" style="width:160px;">
            </div>
            @php $totalFacture = $trajets->sum('total_transport'); @endphp
            <div class="remb-box">
                <div class="remb-row">
                    <span class="remb-title">Montant Remboursable</span>
                    <span id="remb-montant" class="remb-amount" style="color:var(--navy);"></span>
                </div>
                <div class="remb-row" style="margin-top:10px;">
                    <span class="remb-muted">Taux de prise en Charge</span>
                    <select class="dos-select" name="taux_prise_en_charge" style="width:70px;" id="sel-taux" onchange="calcRemb()">
                        @foreach([0, 55, 65, 75, 80, 85, 90, 100] as $taux)
                            <option value="{{ $taux }}" {{ $dossier->taux_prise_en_charge == $taux ? 'selected' : '' }}>{{ $taux }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="remb-row" style="margin-top:10px;">
                    <span class="remb-muted">Part Organisme</span>
                    <span id="remb-organisme" class="remb-amount"></span>
                </div>
                <div class="remb-row">
                    <span class="remb-muted">Part Mutuelle</span>
                    <span id="remb-mutuelle" class="remb-amount">—</span>
                </div>
                <div class="remb-row">
                    <span class="remb-muted">Supplément non Remboursable</span>
                    <span id="remb-supplement" class="remb-amount"></span>
                </div>
                <div class="remb-row total">
                    <span>Total de la Facture</span>
                    <span id="remb-total" class="remb-amount">{{ $totalFacture > 0 ? number_format($totalFacture, 2, ',', ' ').' €' : '—' }}</span>
                </div>
            </div>

            <div style="margin-top:16px;">
                <p class="remb-muted" style="margin-bottom:6px;">Destinataire règlement</p>
                <select class="dos-select" name="destinataire_reglement" style="width:100%; font-size:12px;">
                    @foreach(\App\Models\Dossier::$destinatairesReglement as $val => $label)
                        <option value="{{ $val }}" {{ $dossier->destinataire_reglement == $val ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>
</div>

{{-- Onglet Transports --}}
<div id="tab-transports" class="tab-content">
    @php
        $nbTrajets = $trajets->count();
        $premierT  = $trajets->sortBy('date_transport')->first();
        $dernierT  = $trajets->sortBy('date_transport')->last();
    @endphp
    <div class="transport-stats">
        <div>
            <span>Nb Trajets prévus </span>
            <input type="text" class="dos-input" name="nb_trajets_prevus" value="{{ $dossier->nb_trajets_prevus }}" style="width:50px; display:inline-block;">
        </div>
        <div><span>Nb Trajets </span><strong>{{ $nbTrajets }}</strong></div>
        @if($premierT)
        <div><span>Date du premier transport </span><strong>{{ $premierT->date_transport?->format('d/m/Y') ?? '—' }}</strong></div>
        <div><span>Date dernier transport </span><strong>{{ $dernierT->date_transport?->format('d/m/Y') ?? '—' }}</strong></div>
        @endif
        <a href="{{ route('trajets.create') }}?dossier_id={{ $dossier->id }}" style="background:none;border:none;cursor:pointer;font-size:22px;color:#38A169;font-weight:800;line-height:1;margin-left:auto;text-decoration:none;">+</a>
    </div>

    @if($nbTrajets > 0)
    <table class="trajet-table">
        <thead>
            <tr>
                <th>Type</th>
                <th>Date</th>
                <th>H. Dép.</th>
                <th>H. Arr.</th>
                <th>Trajet Aller</th>
                <th style="text-align:right;">Km</th>
                <th style="text-align:right;">Total</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach($trajets as $trajet)
            <tr>
                <td>{{ $trajet->type === 'aller_retour' ? 'A/R' : 'Aller' }}</td>
                <td>{{ $trajet->date_transport?->format('d/m/y') ?? '—' }}</td>
                <td>{{ $trajet->heure_depart_aller ?? '—' }}</td>
                <td>{{ $trajet->heure_arrivee_aller ?? '—' }}</td>
                <td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
                    {{ $trajet->depart_aller ?? '—' }}
                    @if($trajet->arrivee_aller) → {{ $trajet->arrivee_aller }} @endif
                </td>
                <td style="text-align:right;">{{ $trajet->kms_reel_aller ? number_format($trajet->kms_reel_aller, 1, ',', ' ').' km' : '—' }}</td>
                <td style="text-align:right;font-weight:700;color:#1A2340;">
                    {{ $trajet->total_transport ? number_format($trajet->total_transport, 2, ',', ' ').' €' : '—' }}
                </td>
                <td>
                    <a href="{{ route('trajets.edit', $trajet->id) }}" class="icon-btn" title="Modifier">
                        <svg viewBox="0 0 24 24" style="width:16px;height:16px;stroke:#1A2340;fill:none;stroke-width:2;stroke-linecap:round"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                    </a>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
    @else
    <div style="text-align:center; padding:30px; color:var(--text-muted); font-size:13px; font-weight:600;">
        Aucun trajet pour ce dossier.<br>
        <a href="{{ route('trajets.create') }}?dossier_id={{ $dossier->id }}" style="color:var(--navy); font-weight:800;">+ Ajouter un trajet</a>
    </div>
    @endif

    <div class="print-options">
        <label class="check-lbl"><input type="checkbox"> Impression non chiffrée</label>
        <label class="check-lbl"><input type="checkbox"> Impression chauffeur / Véhicule</label>
        <button type="button" class="icon-btn" title="Imprimer">
            <svg viewBox="0 0 24 24" style="width:22px;height:22px;stroke:var(--text-muted);fill:none;stroke-width:1.8;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>

@if($dossier->statut === 'facture')
@php
    $totalRgl        = $reglements->sum('montant');
    $totalRglOrga    = $reglements->where('affectation','organisme')->sum('montant');
    $totalRglCompl   = $reglements->where('affectation','complementaire')->sum('montant');
    $taux            = $dossier->taux_prise_en_charge ?? 65;
    $partOrga        = round($totalFacture * $taux / 100, 2);
    $partCompl       = round($totalFacture - $partOrga, 2);
    $soldeOrga       = round($partOrga  - $totalRglOrga,  2);
    $soldeCompl      = round($partCompl - $totalRglCompl, 2);
    $soldeFacture    = round($totalFacture - $totalRgl, 2);
@endphp

{{-- Onglet Règlement --}}
<div id="tab-reglement" class="tab-content">

    {{-- Table des règlements --}}
    <div style="background:#fff;border-radius:10px;border:1px solid var(--border);overflow:hidden;">
        <div style="display:grid;grid-template-columns:32px 1fr 1fr 1fr 1fr 40px;gap:0;background:#D6E4F7;padding:9px 12px;font-size:12px;font-weight:800;color:var(--navy);align-items:center;">
            <button type="button" onclick="document.getElementById('popup-reglement').style.display='flex'"
                style="background:none;border:none;cursor:pointer;color:#38A169;font-size:20px;font-weight:800;line-height:1;padding:0;" title="Ajouter un règlement">+</button>
            <span>Date</span>
            <span>Montant</span>
            <span>Mode de règlement</span>
            <span>Affectation</span>
            <span></span>
        </div>
        <div id="rgl-tbody" style="min-height:180px;">
            @forelse($reglements as $rgl)
            <div id="rgl-row-{{ $rgl->id }}" style="display:grid;grid-template-columns:32px 1fr 1fr 1fr 1fr 40px;gap:0;padding:9px 12px;border-bottom:1px solid var(--border);font-size:13px;font-weight:600;color:var(--text);align-items:center;">
                <span></span>
                <span>{{ $rgl->date_reglement->format('d/m/Y') }}</span>
                <span>{{ number_format($rgl->montant, 2, ',', ' ') }} €</span>
                <span>{{ $rgl->mode_reglement ?? '—' }}</span>
                <span>{{ $rgl->affectation === 'organisme' ? 'Part Organisme' : 'Part Complémentaire' }} — {{ $rgl->payeur === 'organisme' ? 'Organisme' : 'Assuré' }}</span>
                <span>
                    <button type="button" onclick="supprimerReglement({{ $rgl->id }}, '{{ route('transport.dossier.reglements.destroy', [$dossier->id, $rgl->id]) }}')"
                        style="background:none;border:none;cursor:pointer;color:#E53E3E;padding:2px;">
                        <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                    </button>
                </span>
            </div>
            @empty
            <div id="rgl-empty" style="padding:40px;text-align:center;color:var(--text-muted);font-size:13px;font-weight:600;">
                Aucun règlement enregistré.
            </div>
            @endforelse
        </div>
        <div style="display:flex;justify-content:space-between;align-items:center;background:#D6E4F7;padding:10px 16px;font-size:13px;font-weight:800;color:var(--navy);">
            <span>Total des règlements &nbsp; <strong id="rgl-total-regl">{{ $totalRgl > 0 ? number_format($totalRgl, 2, ',', ' ').' €' : '—' }}</strong></span>
            <span>Solde de la facture &nbsp; <strong id="rgl-solde" style="color:{{ $soldeFacture > 0 ? '#C53030' : '#065F46' }}">{{ number_format($soldeFacture, 2, ',', ' ') }} €</strong></span>
        </div>
    </div>
</div>

{{-- Onglet Noémie --}}
<div id="tab-noemie" class="tab-content">
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
        {{-- Lots télétransmis --}}
        <div>
            <div style="background:#D6E4F7;padding:9px 14px;border-radius:8px 8px 0 0;font-size:12px;font-weight:800;color:var(--navy);display:grid;grid-template-columns:1fr 1fr 2fr;">
                <span>Date</span><span>Lot</span><span>Caisse</span>
            </div>
            <div style="background:#EEF6FF;border:1px solid var(--border);border-top:none;border-radius:0 0 8px 8px;min-height:160px;padding:8px;">
                <div style="color:var(--text-muted);font-size:12px;font-weight:600;padding:30px;text-align:center;">—</div>
            </div>
        </div>
        {{-- Rejets Noémie --}}
        <div>
            <div style="background:#D6E4F7;padding:9px 14px;border-radius:8px 8px 0 0;font-size:12px;font-weight:800;color:var(--navy);">
                Rejet Noémie
            </div>
            <div style="background:#EEF6FF;border:1px solid var(--border);border-top:none;border-radius:0 0 8px 8px;min-height:160px;">
            </div>
        </div>
    </div>
    {{-- Règlement Noémie --}}
    <div style="margin-top:20px;">
        <div style="background:#D6E4F7;padding:9px 14px;border-radius:8px 8px 0 0;font-size:12px;font-weight:800;color:var(--navy);display:grid;grid-template-columns:1fr 1fr 2fr 1fr 1fr 1fr 1fr;">
            <span>Date</span><span>Lot</span><span>Caisse</span><span>Base</span><span>Taux</span><span>Part Org.</span><span>Part Compl.</span>
        </div>
        <div style="background:#EEF6FF;border:1px solid var(--border);border-top:none;border-radius:0 0 8px 8px;min-height:120px;">
        </div>
    </div>
</div>
@endif

{{-- Actions --}}
<div class="page-actions" style="margin-top:24px;">
    @if($dossier->statut !== 'facture')
        {{-- Mode lecture --}}
        <button type="button" class="btn-y" id="btn-modifier" onclick="activerModification()">Modifier</button>

        {{-- Mode édition (masqué par défaut) --}}
        <button type="submit" class="btn-y" id="btn-valider" style="display:none;">Valider</button>
        @if($dossier->exists && $nbTrajets > 0)
            <button type="button" class="btn-y" id="btn-facturer" style="display:none;" onclick="document.getElementById('popup-facturer').style.display='flex'">Facturer</button>
        @endif

        <button type="button" class="btn-y">PEC +</button>
    @else
        {{-- Dossier facturé : badge + Modifier/Valider pour section télétrans --}}
        <span style="font-size:13px;font-weight:800;color:#065F46;background:#D1FAE5;border:1.5px solid #A7F3D0;border-radius:20px;padding:8px 20px;">
            Facture N° {{ $dossier->numero_facture }}
        </span>
        <span style="font-size:13px;font-weight:700;color:var(--text-muted);">
            du {{ $dossier->date_facture?->format('d/m/Y') }}
        </span>
        <button type="button" class="btn-y" id="btn-modifier" onclick="activerModification()">Modifier</button>
        <button type="submit" class="btn-y" id="btn-valider" style="display:none;">Valider</button>
    @endif
    <span class="sep"></span>
    <a href="{{ route('transport.index') }}" class="btn-o">Quitter</a>
</div>

</form>

@endsection

@push('modals')
{{-- Popup confirmation suppression règlement --}}
<div id="popup-suppr-rgl" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:10000;align-items:center;justify-content:center;">
    <div style="background:#fff;border-radius:14px;padding:32px 36px;max-width:360px;width:90%;box-shadow:0 8px 40px rgba(0,0,0,.2);text-align:center;">
        <div style="width:48px;height:48px;border-radius:50%;background:#FEE2E2;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;">
            <svg viewBox="0 0 24 24" style="width:24px;height:24px;stroke:#C53030;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>
        </div>
        <div style="font-size:15px;font-weight:800;color:var(--navy);margin-bottom:8px;">Supprimer le règlement</div>
        <div style="font-size:13px;font-weight:600;color:var(--text-muted);margin-bottom:24px;">
            Voulez-vous vraiment supprimer ce règlement ?<br>
            <span style="color:#B91C1C;font-size:12px;">Cette action est irréversible.</span>
        </div>
        <div style="display:flex;gap:12px;justify-content:center;">
            <button type="button" class="btn-o" onclick="document.getElementById('popup-suppr-rgl').style.display='none'">Annuler</button>
            <button type="button" id="btn-confirm-suppr-rgl" class="btn-y" style="background:#C53030;color:#fff;">Supprimer</button>
        </div>
    </div>
</div>

{{-- Popup saisie règlement --}}
@if($dossier->statut === 'facture')
<div id="popup-reglement" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;align-items:center;justify-content:center;">
    <div style="background:#fff;border-radius:14px;width:560px;max-width:95vw;box-shadow:0 8px 40px rgba(0,0,0,.25);overflow:hidden;">
        {{-- Header --}}
        <div style="background:linear-gradient(90deg,#1A2340,#2E4080);padding:16px 24px;text-align:center;">
            <span style="font-size:15px;font-weight:800;color:#fff;letter-spacing:.06em;text-transform:uppercase;">Saisie du règlement</span>
        </div>
        <div style="padding:24px 28px;">
            {{-- Infos facture --}}
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;font-size:13px;font-weight:700;color:var(--text-muted);">
                <div>
                    <div style="font-size:12px;font-weight:700;color:var(--text-muted);margin-bottom:4px;">Numéro de Facture</div>
                    <div style="font-size:18px;font-weight:800;color:var(--navy);letter-spacing:.08em;">{{ $dossier->numero_facture }}</div>
                </div>
                <div style="text-align:right;">
                    <div style="font-size:11px;color:var(--text-muted);">{{ $dossier->date_facture?->format('d/m/Y') }}</div>
                </div>
            </div>
            {{-- Récap part RO / Complémentaire --}}
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;background:#F4F6FB;border-radius:10px;padding:14px 16px;margin-bottom:20px;font-size:12px;font-weight:700;">
                <div>
                    <div style="color:var(--text-muted);margin-bottom:8px;">Part Organisme (RO)</div>
                    <div style="display:flex;justify-content:space-between;"><span>Montant</span><span style="color:var(--navy);">{{ number_format($partOrga,2,',',' ') }} €</span></div>
                    <div style="display:flex;justify-content:space-between;margin-top:4px;"><span>Réglé</span><span>{{ number_format($totalRglOrga,2,',',' ') }} €</span></div>
                    <div style="display:flex;justify-content:space-between;margin-top:4px;font-weight:800;border-top:1px solid var(--border);padding-top:4px;"><span>Solde</span><span style="color:{{ $soldeOrga > 0 ? '#C53030' : '#065F46' }};">{{ number_format($soldeOrga,2,',',' ') }} €</span></div>
                </div>
                <div>
                    <div style="color:var(--text-muted);margin-bottom:8px;">Part Complémentaire</div>
                    <div style="display:flex;justify-content:space-between;"><span>Montant</span><span style="color:var(--navy);">{{ number_format($partCompl,2,',',' ') }} €</span></div>
                    <div style="display:flex;justify-content:space-between;margin-top:4px;"><span>Réglé</span><span>{{ number_format($totalRglCompl,2,',',' ') }} €</span></div>
                    <div style="display:flex;justify-content:space-between;margin-top:4px;font-weight:800;border-top:1px solid var(--border);padding-top:4px;"><span>Solde</span><span style="color:{{ $soldeCompl > 0 ? '#C53030' : '#065F46' }};">{{ number_format($soldeCompl,2,',',' ') }} €</span></div>
                </div>
            </div>
            {{-- Formulaire --}}
            <form id="form-reglement" method="POST" action="{{ route('transport.dossier.reglements.store', $dossier->id) }}" onsubmit="submitReglement(event)">
                @csrf
                <div style="display:grid;grid-template-columns:160px 1fr;gap:12px 16px;align-items:center;">
                    <label style="font-size:13px;font-weight:700;color:var(--text);">Date du règlement</label>
                    <input type="date" name="date_reglement" class="dos-input" required style="width:160px;">

                    <label style="font-size:13px;font-weight:700;color:var(--text);">Affectation</label>
                    <select name="affectation" id="rgl-affectation" class="dos-select" onchange="majMontantAuto()">
                        <option value="organisme">Part Organisme</option>
                        <option value="complementaire">Part Complémentaire</option>
                    </select>

                    <label style="font-size:13px;font-weight:700;color:var(--text);">Montant du règlement</label>
                    <div style="display:flex;align-items:center;gap:8px;">
                        <input type="number" name="montant" id="rgl-montant" class="dos-input" step="0.01" min="0.01" required style="width:120px;">
                        <button type="button" onclick="majMontantAuto()" title="Remplir avec le total de la facture" style="background:none;border:1.5px solid var(--border);border-radius:6px;padding:5px 8px;cursor:pointer;color:var(--text-muted);">
                            <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;"><polyline points="15 18 9 12 15 6"/></svg>
                        </button>
                    </div>

                    <label style="font-size:13px;font-weight:700;color:var(--text);">Payeur</label>
                    <select name="payeur" class="dos-select">
                        <option value="organisme">Organisme</option>
                        <option value="assure">Assuré</option>
                    </select>

                    <label style="font-size:13px;font-weight:700;color:var(--text);">Mode Règlement</label>
                    <select name="mode_reglement" class="dos-select">
                        <option value="">—</option>
                        @foreach($modesReglement as $mode)
                            <option value="{{ $mode->libelle }}">{{ $mode->libelle }}</option>
                        @endforeach
                    </select>
                </div>
                <div style="display:flex;gap:12px;justify-content:center;margin-top:24px;">
                    <button type="button" class="btn-o" onclick="document.getElementById('popup-reglement').style.display='none'">Annuler</button>
                    <button type="submit" class="btn-y">Valider</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

{{-- Popup confirmation facturation --}}
@if($dossier->statut !== 'facture')
<div id="popup-facturer" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9999;align-items:center;justify-content:center;">
    <div style="background:#fff;border-radius:14px;padding:32px 36px;max-width:380px;width:90%;box-shadow:0 8px 40px rgba(0,0,0,.2);text-align:center;">
        <div style="font-size:15px;font-weight:800;color:var(--navy);margin-bottom:10px;">Confirmer la facturation</div>
        <div style="font-size:13px;font-weight:600;color:var(--text-muted);margin-bottom:28px;">
            Voulez‑vous vraiment facturer le transport ?<br>
            <span style="color:#B91C1C;font-size:12px;">Cette action est irréversible.</span>
        </div>
        <div style="display:flex;gap:16px;justify-content:center;">
            <button type="button" class="btn-o" onclick="document.getElementById('popup-facturer').style.display='none'">Non</button>
            <form method="POST" action="{{ route('transport.dossier.facturer', $dossier->id) }}" style="display:inline;">
                @csrf
                <button type="submit" class="btn-y">Oui, facturer</button>
            </form>
        </div>
    </div>
</div>
@endif
@endpush

@push('scripts')
<script>
// Déclaré en premier car utilisé partout
const totalFacture = {{ $totalFacture ?? 0 }};

function switchTab(name, btn) {
    document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    document.getElementById('tab-' + name).classList.add('active');
    btn.classList.add('active');
}

// Ouvrir le bon onglet selon le hash de l'URL
(function() {
    const hash = window.location.hash.replace('#', '');
    if (hash) {
        const tab = document.getElementById('tab-' + hash);
        const btn = document.querySelector(`.tab-btn[onclick*="'${hash}'"]`);
        if (tab && btn) switchTab(hash, btn);
    }
})();

// Champs du formulaire principal uniquement (hors readonly permanents)
function getEditableFields() {
    const f = document.getElementById('dossier-form');
    return f ? f.querySelectorAll('input:not([readonly]):not([type="hidden"]), select, textarea') : [];
}

@if($dossier->statut === 'facture')
function majMontantAuto() {
    const inp = document.getElementById('rgl-montant');
    if (inp) inp.value = totalFacture.toFixed(2);
}
document.addEventListener('DOMContentLoaded', majMontantAuto);

// ── Soumission AJAX du règlement ──────────────────────────────────────
function submitReglement(e) {
    e.preventDefault();
    const formRgl = document.getElementById('form-reglement');
    const btn = formRgl.querySelector('[type="submit"]');
    btn.disabled = true;

    fetch(formRgl.action, {
        method: 'POST',
        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
        body: new FormData(formRgl),
    })
    .then(r => {
        if (!r.ok) return r.text().then(t => { throw new Error('HTTP ' + r.status + ': ' + t.substring(0, 200)); });
        return r.json();
    })
    .then(data => {
        if (data.error) { alert(data.error); btn.disabled = false; return; }

        // Fermer popup et réinitialiser
        document.getElementById('popup-reglement').style.display = 'none';
        formRgl.reset();
        majMontantAuto();

        // Supprimer message "aucun règlement" s'il existe
        const empty = document.getElementById('rgl-empty');
        if (empty) empty.remove();

        // Ajouter la ligne dans le tableau
        const tbody = document.getElementById('rgl-tbody');
        const row = document.createElement('div');
        row.id = 'rgl-row-' + data.id;
        row.style.cssText = 'display:grid;grid-template-columns:32px 1fr 1fr 1fr 1fr 40px;gap:0;padding:9px 12px;border-bottom:1px solid var(--border);font-size:13px;font-weight:600;color:var(--text);align-items:center;';
        row.innerHTML = `
            <span></span>
            <span>${data.date_reglement}</span>
            <span>${data.montant}</span>
            <span>${data.mode_reglement}</span>
            <span>${data.affectation_label} — ${data.payeur_label}</span>
            <span>
                <button type="button" onclick="supprimerReglement(${data.id}, '${data.delete_url}')"
                    style="background:none;border:none;cursor:pointer;color:#E53E3E;padding:2px;">
                    <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
            </span>`;
        tbody.appendChild(row);

        // Mettre à jour les totaux
        totalRglCourant += data.montant_raw;
        majTotauxRgl();
        btn.disabled = false;
    })
    .catch(err => { alert('Erreur: ' + err.message); btn.disabled = false; });
}

let totalRglCourant = {{ $totalRgl }};

function majTotauxRgl() {
    const solde = totalFacture - totalRglCourant;
    document.getElementById('rgl-total-regl').textContent =
        totalRglCourant > 0 ? totalRglCourant.toFixed(2).replace('.', ',') + ' €' : '—';
    const el = document.getElementById('rgl-solde');
    el.textContent = solde.toFixed(2).replace('.', ',') + ' €';
    el.style.color = solde > 0 ? '#C53030' : '#065F46';
}

let _supprRglPending = null;

function supprimerReglement(id, url) {
    const row = document.getElementById('rgl-row-' + id);
    const montant = parseFloat(row.querySelector('span:nth-child(3)').textContent.replace(/\s/g,'').replace(',','.').replace('€',''));
    _supprRglPending = { id, url, row, montant };
    document.getElementById('popup-suppr-rgl').style.display = 'flex';
}

document.getElementById('btn-confirm-suppr-rgl').onclick = function() {
    if (!_supprRglPending) return;
    const { url, row, montant } = _supprRglPending;
    _supprRglPending = null;
    document.getElementById('popup-suppr-rgl').style.display = 'none';

    const fd = new FormData();
    fd.append('_token', '{{ csrf_token() }}');
    fd.append('_method', 'DELETE');

    fetch(url, {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        body: fd,
    })
    .then(r => {
        if (r.ok || r.redirected) { row.remove(); totalRglCourant -= montant; majTotauxRgl(); }
    })
    .catch(() => {});
};
@endif

const estFacture = {{ $dossier->statut === 'facture' ? 'true' : 'false' }};
const sectionTeletrans = document.getElementById('section-teletrans');

// Mode lecture au chargement
function modeLecture() {
    getEditableFields().forEach(el => {
        el.disabled = true;
        el.style.background = '#F4F6FB';
    });
    document.getElementById('btn-modifier').style.display = '';
    document.getElementById('btn-valider').style.display  = 'none';
    const bf = document.getElementById('btn-facturer');
    if (bf) bf.style.display = 'none';
}

function activerModification() {
    getEditableFields().forEach(el => {
        // En mode facturé, on ne déverrouille que la section télétrans
        if (estFacture && sectionTeletrans && !sectionTeletrans.contains(el)) return;
        el.disabled = false;
        el.style.background = '';
    });
    document.getElementById('btn-modifier').style.display = 'none';
    document.getElementById('btn-valider').style.display  = '';
    const bf = document.getElementById('btn-facturer');
    if (bf) bf.style.display = '';
}

// ── Calcul encart remboursement ───────────────────────────────────────
function fmt(n) {
    return n > 0 ? n.toFixed(2).replace('.', ',').replace(/\B(?=(\d{3})+(?!\d))/g, ' ') + ' €' : '—';
}

function calcRemb() {
    const taux         = parseInt(document.getElementById('sel-taux').value) || 0;
    const partOrga     = totalFacture * taux / 100;
    const supplement   = totalFacture - partOrga;
    document.getElementById('remb-total').textContent      = fmt(totalFacture);
    document.getElementById('remb-montant').textContent    = fmt(partOrga);
    document.getElementById('remb-organisme').textContent  = fmt(partOrga);
    document.getElementById('remb-supplement').textContent = fmt(supplement);
}

// Initialiser au chargement
document.addEventListener('DOMContentLoaded', function() {
    calcRemb();
    modeLecture();
});

// ── Pièces Manquantes ──────────────────────────────────────────────────
const dossierId  = {{ $dossier->id }};
let piecesCount  = {{ $dossier->pieces->count() }};

function updatePiecesCount() {
    document.getElementById('pieces-count').textContent = piecesCount + '/3';
    document.getElementById('btn-add-piece').style.display = piecesCount >= 3 ? 'none' : '';
}

function uploadPiece(input) {
    if (!input.files.length) return;
    if (piecesCount >= 3) { input.value = ''; return; }

    const file = input.files[0];
    const form = new FormData();
    form.append('fichier', file);
    form.append('_token', '{{ csrf_token() }}');

    document.getElementById('piece-uploading').style.display = '';
    document.getElementById('piece-error').style.display     = 'none';

    fetch(`/transport/dossier/${dossierId}/pieces`, { method: 'POST', body: form })
        .then(r => r.json())
        .then(data => {
            document.getElementById('piece-uploading').style.display = 'none';
            if (data.error) {
                document.getElementById('piece-error').textContent = data.error;
                document.getElementById('piece-error').style.display = '';
                return;
            }
            piecesCount++;
            updatePiecesCount();

            const icon = data.is_image
                ? `<svg viewBox="0 0 24 24" style="width:18px;height:18px;stroke:#38A169;fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0;"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`
                : `<svg viewBox="0 0 24 24" style="width:18px;height:18px;stroke:#E53E3E;fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0;"><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>`;

            const div = document.createElement('div');
            div.className = 'piece-item';
            div.id = 'piece-' + data.id;
            div.style.cssText = 'display:flex;align-items:center;gap:8px;padding:6px 10px;background:#F8F9FF;border:1.5px solid var(--border);border-radius:8px;margin-bottom:6px;';
            div.innerHTML = `${icon}
                <a href="${data.url}" target="_blank" style="font-size:12px;font-weight:700;color:var(--navy);text-decoration:none;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="${data.nom}">
                    ${data.nom}
                </a>
                <span style="font-size:11px;color:var(--text-muted);white-space:nowrap;">${data.taille}</span>
                <button type="button" onclick="supprimerPiece(${data.id})"
                    style="background:none;border:none;cursor:pointer;padding:2px;color:#E53E3E;display:flex;align-items:center;" title="Supprimer">
                    <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>`;
            document.getElementById('pieces-list').appendChild(div);
        })
        .catch(() => {
            document.getElementById('piece-uploading').style.display = 'none';
            document.getElementById('piece-error').textContent = 'Erreur lors de l\'envoi.';
            document.getElementById('piece-error').style.display = '';
        })
        .finally(() => { input.value = ''; });
}

function supprimerPiece(id) {
    if (!confirm('Supprimer cette pièce ?')) return;

    fetch(`/transport/dossier/${dossierId}/pieces/${id}`, {
        method: 'DELETE',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' }
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            document.getElementById('piece-' + id)?.remove();
            piecesCount--;
            updatePiecesCount();
        }
    });
}
</script>
@endpush