@extends('layouts.app')

@section('title', 'Télétransmission')
@section('page-title', 'Télétransmission')

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

    /* Onglet */
    .tele-tabs {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 16px;
        border-bottom: 1.5px solid var(--border);
        background: #F4F6FB;
    }
    .tab-active {
        background: var(--navy); color: #fff;
        border: none; border-radius: 6px 6px 0 0;
        padding: 7px 20px;
        font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 800;
        cursor: pointer;
    }
    .btn-o {
        background: transparent; color: var(--navy);
        border: 2px solid var(--navy); border-radius: 8px; padding: 6px 20px;
        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; }

    /* Tableau arborescent */
    .tele-table { width: 100%; border-collapse: collapse; }
    .tele-table thead th {
        background: #EEF2FF;
        padding: 9px 12px;
        font-size: 12px; font-weight: 800; color: var(--navy);
        text-align: left; border-bottom: 1.5px solid var(--border);
        white-space: nowrap;
    }
    .tele-table thead th.right { text-align: right; }
    .tele-table tbody td {
        padding: 7px 12px;
        font-size: 13px; font-weight: 600;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
    }
    .tele-table tbody tr:last-child td { border-bottom: none; }

    /* Ligne organisme (parent) */
    .row-org { background: #DBEAFE; cursor: pointer; }
    .row-org:hover { background: #BFDBFE; }
    .row-org td { font-weight: 800; color: var(--navy); }

    /* Ligne facture (enfant) */
    .row-fact { background: #fff; }
    .row-fact:nth-child(even) { background: #F8FAFF; }
    .row-fact:hover { background: #EEF4FF; }

    /* Toggle bouton */
    .toggle-btn {
        width: 18px; height: 18px;
        border: 1.5px solid #93A8C8;
        border-radius: 3px;
        background: #fff;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 13px; font-weight: 800; color: var(--navy);
        cursor: pointer; flex-shrink: 0; line-height: 1;
        margin-right: 6px;
    }

    /* Icône dossier */
    .folder-icon { font-size: 16px; margin-right: 6px; }

    /* Code badge */
    .code-badge {
        background: var(--navy); color: #fff;
        font-size: 11px; font-weight: 800;
        padding: 2px 8px; border-radius: 4px;
        margin-right: 8px;
    }

    .montant-cell { text-align: right; font-weight: 700; white-space: nowrap; }
    .montant-org  { color: var(--navy); font-weight: 800; }
    .nbr-zero     { color: var(--text-muted); }

    /* Pied de page */
    .tele-footer {
        display: flex; align-items: center; justify-content: space-between;
        padding: 12px 20px;
        background: #F4F6FB;
        border-top: 1.5px solid var(--border);
        flex-wrap: wrap; gap: 12px;
    }
    .total-amount {
        font-size: 15px; font-weight: 800; color: var(--navy);
    }
    .btn-gen {
        display: flex; align-items: center; gap: 10px;
        background: #E8ECF4; color: var(--navy);
        border: 1.5px solid #C3CFEE; border-radius: 8px; padding: 8px 20px;
        font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 800;
        cursor: pointer; transition: all 0.2s;
    }
    .btn-gen:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
    .btn-gen:hover .check-icon { color: #fff; }
    .check-icon { color: #38A169; font-size: 18px; font-weight: 900; }
</style>
@endpush

@section('content')

<div class="tele-card">
    {{-- Header --}}
    <div class="tele-tabs">
        <button class="tab-active">Génération B2</button>
        <a href="{{ route('dashboard') }}" class="btn-o">Quitter</a>
    </div>

    {{-- Tableau --}}
    <div style="overflow-x:auto; max-height:500px; overflow-y:auto;">
        <table class="tele-table">
            <thead>
                <tr>
                    <th style="width:40px;"></th>
                    <th style="width:60px;">Code</th>
                    <th>Organisme / Factures</th>
                    <th class="right">Montant</th>
                    <th>Numéro Facture</th>
                    <th style="text-align:center;">Nbr Factures</th>
                    <th style="text-align:center;">Sélection</th>
                    <th>LOT</th>
                    <th>Fichier</th>
                </tr>
            </thead>
            <tbody id="teleBody">

                {{-- Organisme 1 : CPAM AGEN (fermé) --}}
                <tr class="row-org" onclick="toggleOrg('org1')">
                    <td>
                        <span class="toggle-btn" id="btn-org1">+</span>
                    </td>
                    <td><span class="code-badge">1</span></td>
                    <td>📁 CPAM AGEN</td>
                    <td class="montant-cell montant-org">1 458,94 €</td>
                    <td></td>
                    <td style="text-align:center; font-weight:800;">6</td>
                    <td style="text-align:center;"><input type="checkbox" style="accent-color:var(--navy);cursor:pointer;"></td>
                    <td></td>
                    <td></td>
                </tr>
                {{-- Enfants org1 (cachés) --}}
                @php
                $agen = [
                    ['client'=>'TN MARTIN PIERRE',    'montant'=>'244,16 €', 'num'=>'TA0000110'],
                    ['client'=>'TN DUPOND JEAN',      'montant'=>'312,50 €', 'num'=>'TA0000111'],
                    ['client'=>'TN ALBISSIER JEANNE', 'montant'=>'110,00 €', 'num'=>'TA0000112'],
                    ['client'=>'TN ALBERTINI MATHIEU','montant'=>'298,22 €', 'num'=>'TA0000113'],
                    ['client'=>'TN ALBAN LUCIENNE',   'montant'=>'262,26 €', 'num'=>'TA0000114'],
                    ['client'=>'TN ALBAN LUCIENNE',   'montant'=>'231,80 €', 'num'=>'TA0000115'],
                ];
                @endphp
                @foreach($agen as $r)
                <tr class="row-fact org1-child" style="display:none;">
                    <td></td>
                    <td></td>
                    <td>📂 {{ $r['client'] }}</td>
                    <td class="montant-cell">{{ $r['montant'] }}</td>
                    <td style="color:var(--navy); font-weight:700;">{{ $r['num'] }}</td>
                    <td style="text-align:center;" class="nbr-zero">0</td>
                    <td style="text-align:center;"><input type="checkbox" style="accent-color:var(--navy);cursor:pointer;"></td>
                    <td></td>
                    <td></td>
                </tr>
                @endforeach

                {{-- Organisme 2 : CPAM PERPIGNAN (ouvert) --}}
                <tr class="row-org" onclick="toggleOrg('org2')">
                    <td>
                        <span class="toggle-btn" id="btn-org2">−</span>
                    </td>
                    <td><span class="code-badge">24</span></td>
                    <td>📁 CPAM PERPIGNAN</td>
                    <td class="montant-cell montant-org">561,80 €</td>
                    <td></td>
                    <td style="text-align:center; font-weight:800;">10</td>
                    <td style="text-align:center;"><input type="checkbox" style="accent-color:var(--navy);cursor:pointer;"></td>
                    <td></td>
                    <td></td>
                </tr>
                @php
                $perpignan = [
                    ['client'=>'TN BUTZ BARON ALEXIS', 'montant'=>'32,78 €',  'num'=>'TA0000116'],
                    ['client'=>'TN BOUIGUES Nicolas',  'montant'=>'61,78 €',  'num'=>'TA0000117'],
                    ['client'=>'TN BUTZ BARON ALEXIS', 'montant'=>'88,46 €',  'num'=>'TA0000119'],
                    ['client'=>'TN BUTZ BARON ALEXIS', 'montant'=>'62,78 €',  'num'=>'TA0000120'],
                    ['client'=>'TN BUTZ BARON ALEXIS', 'montant'=>'119,28 €', 'num'=>'TA0000121'],
                    ['client'=>'TN BUTZ BARON ALEXIS', 'montant'=>'59,64 €',  'num'=>'TA0000122'],
                    ['client'=>'TN BUTZ BARON ALEXIS', 'montant'=>'40,98 €',  'num'=>'TA0000123'],
                    ['client'=>'TN BUTZ BARON ALEXIS', 'montant'=>'62,78 €',  'num'=>'TA0000124'],
                    ['client'=>'TN BUTZ BARON ALEXIS', 'montant'=>'16,66 €',  'num'=>'TA0000126'],
                    ['client'=>'TN BUTZ BARON ALEXIS', 'montant'=>'16,66 €',  'num'=>'TA0000127'],
                ];
                @endphp
                @foreach($perpignan as $r)
                <tr class="row-fact org2-child">
                    <td></td>
                    <td></td>
                    <td>📂 {{ $r['client'] }}</td>
                    <td class="montant-cell">{{ $r['montant'] }}</td>
                    <td style="color:var(--navy); font-weight:700;">{{ $r['num'] }}</td>
                    <td style="text-align:center;" class="nbr-zero">0</td>
                    <td style="text-align:center;"><input type="checkbox" style="accent-color:var(--navy);cursor:pointer;"></td>
                    <td></td>
                    <td></td>
                </tr>
                @endforeach

                {{-- Lignes vides pour remplir --}}
                @for($i = 0; $i < 6; $i++)
                <tr style="height:32px; background:{{ $i % 2 === 0 ? '#fff' : '#F8FAFF' }};">
                    <td colspan="9"></td>
                </tr>
                @endfor

            </tbody>
        </table>
    </div>

    {{-- Footer --}}
    <div class="tele-footer">
        <span class="total-amount">2 020,74 €</span>
        <button class="btn-gen">
            Génération de la B2 et télétransmission
            <span class="check-icon">✓</span>
        </button>
    </div>
</div>

@endsection

@push('scripts')
<script>
function toggleOrg(id) {
    var rows  = document.querySelectorAll('.' + id + '-child');
    var btn   = document.getElementById('btn-' + id);
    var open  = btn.textContent.trim() === '−';
    rows.forEach(function(r) { r.style.display = open ? 'none' : ''; });
    btn.textContent = open ? '+' : '−';
}
</script>
@endpush