@extends('layouts.app')

@section('title', 'Factures')
@section('page-title', 'Prestation — Factures')

@push('styles')
<style>
    .f-card {
        background: #fff;
        border-radius: 12px;
        border: 1px solid var(--border);
        padding: 18px 22px;
        margin-bottom: 16px;
    }
    .f-label { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; }
    .f-input {
        border: 1.5px solid var(--border); border-radius: 7px;
        padding: 6px 10px; font-family: 'Nunito', sans-serif;
        font-size: 13px; font-weight: 600; color: var(--text);
        background: #fff; outline: none; transition: border-color 0.2s;
    }
    .f-input:focus { border-color: var(--yellow); }
    .check-lbl {
        display: flex; align-items: center; gap: 6px;
        font-size: 13px; font-weight: 600; color: var(--text);
        cursor: pointer; white-space: nowrap;
    }
    .check-lbl input { accent-color: var(--navy); width: 14px; height: 14px; cursor: pointer; }
    .radio-lbl {
        display: flex; align-items: center; gap: 6px;
        font-size: 13px; font-weight: 600; color: var(--text);
        cursor: pointer; white-space: nowrap;
    }
    .radio-lbl input { accent-color: var(--navy); width: 14px; height: 14px; cursor: pointer; }

    .btn-y {
        background: var(--yellow); color: var(--navy);
        border: none; border-radius: 20px; padding: 8px 24px;
        font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 800;
        cursor: pointer; transition: background 0.2s; white-space: nowrap;
    }
    .btn-y:hover { background: var(--yellow-dark); }
    .btn-o {
        background: transparent; color: var(--navy);
        border: 2px solid var(--navy); border-radius: 20px; padding: 6px 24px;
        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; }

    .icon-btn {
        background: none; border: none; cursor: pointer; padding: 3px 6px;
        border-radius: 5px; display: inline-flex; align-items: center;
        transition: background 0.15s;
    }
    .icon-btn:hover { background: var(--bg); }
    .icon-btn svg { width: 16px; height: 16px; stroke: var(--text-muted); fill: none; stroke-width: 2; stroke-linecap: round; }

    /* Tableau factures */
    .factures-list {
        border: 1.5px solid var(--border);
        border-radius: 8px;
        overflow: hidden;
        max-height: 420px;
        overflow-y: auto;
    }
    .factures-list::-webkit-scrollbar { width: 6px; }
    .factures-list::-webkit-scrollbar-track { background: var(--bg); }
    .factures-list::-webkit-scrollbar-thumb { background: #CBD0DC; border-radius: 3px; }

    .fact-table { width: 100%; border-collapse: collapse; }
    .fact-table thead th {
        position: sticky; top: 0;
        background: #F4F6FB; padding: 8px 10px;
        font-size: 11px; font-weight: 800; color: var(--text-muted);
        text-align: left; border-bottom: 1.5px solid var(--border);
        white-space: nowrap; z-index: 1;
    }
    .fact-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.12s; cursor: pointer; }
    .fact-table tbody tr:last-child { border-bottom: none; }
    .fact-table tbody tr:hover { background: #F0F4FF; }
    .fact-table tbody tr.selected { background: #DBEAFE; }
    .fact-table tbody td { padding: 8px 10px; font-size: 13px; font-weight: 600; color: var(--text); vertical-align: middle; }

    .fact-num { font-weight: 800; color: var(--navy); }
    .badge-tele  { color: #38A169; font-weight: 700; font-size: 12px; }
    .badge-libre { color: #3182CE; font-weight: 700; font-size: 12px; }
    .badge-assist{ color: #805AD5; font-weight: 700; font-size: 12px; }
    .badge-regle  { color: #38A169; font-weight: 700; font-size: 12px; }
    .badge-nonregle { color: #E53E3E; font-weight: 700; font-size: 12px; }
    .montant { font-weight: 800; color: var(--navy); text-align: right; white-space: nowrap; }

    /* Bloc impression */
    .print-box {
        border: 2px solid #C3CFEE;
        border-radius: 10px;
        padding: 16px 20px;
        display: flex; align-items: center; gap: 32px;
        flex-wrap: wrap;
    }
    .print-col { display: flex; flex-direction: column; gap: 8px; }
    .divider { width: 1px; height: 60px; background: var(--border); }
</style>
@endpush

@section('content')

{{-- Filtres --}}
<div class="f-card">
    {{-- Ligne 1 : client + checkboxes statut --}}
    <div style="display:flex; align-items:center; gap:16px; margin-bottom:14px; flex-wrap:wrap;">
        <div style="display:flex; align-items:center; gap:8px;">
            <span class="f-label">Client</span>
            <input type="text" class="f-input" style="width:180px;" placeholder="">
            <button class="icon-btn"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg></button>
        </div>
        <div style="width:1px; height:24px; background:var(--border);"></div>
        <label class="check-lbl"><input type="checkbox"> En télétrans.</label>
        <label class="check-lbl"><input type="checkbox"> En instance</label>
        <label class="check-lbl"><input type="checkbox"> Télétransmises</label>
        <label class="check-lbl"><input type="checkbox"> Hors Télétrans.</label>
        <label class="check-lbl"><input type="checkbox"> Libre / Assist.</label>
    </div>

    {{-- Ligne 2 : dates + radios + No facture + Valider --}}
    <div style="display:flex; align-items:center; gap:16px; flex-wrap:wrap;">
        <div style="display:flex; align-items:center; gap:8px;">
            <span class="f-label">Du</span>
            <input type="date" class="f-input" style="width:145px;">
            <span class="f-label">Au</span>
            <input type="date" class="f-input" style="width:145px;">
        </div>
        <div style="width:1px; height:24px; background:var(--border);"></div>
        <div style="display:flex; flex-direction:column; gap:4px;">
            <label class="radio-lbl"><input type="radio" name="filtre1" checked> Toutes les factures</label>
            <label class="radio-lbl"><input type="radio" name="filtre1"> Sans les annulées</label>
            <label class="radio-lbl"><input type="radio" name="filtre1"> Que les annulées</label>
        </div>
        <div style="display:flex; flex-direction:column; gap:4px;">
            <label class="radio-lbl"><input type="radio" name="filtre2" checked> Toutes les factures</label>
            <label class="radio-lbl"><input type="radio" name="filtre2"> Non soldées</label>
        </div>
        <div style="width:1px; height:24px; background:var(--border);"></div>
        <div style="display:flex; align-items:center; gap:8px;">
            <span class="f-label">No Facture</span>
            <input type="text" class="f-input" style="width:110px;">
        </div>
        <div style="display:flex; align-items:center; gap:8px;">
            <span class="f-label">Mt entre</span>
            <input type="text" class="f-input" style="width:80px;">
            <span class="f-label">et</span>
            <input type="text" class="f-input" style="width:80px;">
        </div>
    </div>

    {{-- Ligne 3 : edition par client + Valider --}}
    <div style="display:flex; align-items:center; justify-content:space-between; margin-top:12px; flex-wrap:wrap; gap:10px;">
        <label class="check-lbl"><input type="checkbox"> Edition par client</label>
        <button class="btn-y">Valider</button>
    </div>
</div>

{{-- Liste des factures --}}
<div class="f-card" style="padding:0; overflow:hidden;">
    <div class="factures-list">
        <table class="fact-table">
            <thead>
                <tr>
                    <th style="width:28px;"></th>
                    <th>Facture</th>
                    <th>Date</th>
                    <th>Détail</th>
                    <th>Client</th>
                    <th>Statut</th>
                    <th>Règlement</th>
                    <th style="text-align:right;">Montant</th>
                    <th style="width:28px;"></th>
                    <th style="width:28px;"></th>
                </tr>
            </thead>
            <tbody>
                @php
                $factures = [
                    ['num'=>'TA0000098','date'=>'23/11/25','detail'=>'2 trsp TAP','client'=>'BOUIGUES Nicolas','statut'=>'tele','reglement'=>'nonregle','montant'=>'59,84'],
                    ['num'=>'TA0000097','date'=>'22/11/25','detail'=>'2 trsp TAP','client'=>'BOUIGUES Nicolas','statut'=>'tele','reglement'=>'nonregle','montant'=>'66,40'],
                    ['num'=>'TA0000096','date'=>'18/11/25','detail'=>'Assistance','client'=>'ALBISSIER JEANNE','statut'=>'assist','reglement'=>'nonregle','montant'=>'110,00'],
                    ['num'=>'TA0000095','date'=>'18/11/25','detail'=>'Libre','client'=>'DUPOND JEAN','statut'=>'libre','reglement'=>'nonregle','montant'=>'110,00'],
                    ['num'=>'TA0000094','date'=>'18/11/25','detail'=>'2 trsp TAP','client'=>'DUPOND JEAN','statut'=>'tele','reglement'=>'nonregle','montant'=>'44,08'],
                    ['num'=>'TA0000093','date'=>'17/11/25','detail'=>'1 trsp TAP','client'=>'DUPOND JEAN','statut'=>'tele','reglement'=>'nonregle','montant'=>'22,04'],
                    ['num'=>'TA0000092','date'=>'17/11/25','detail'=>'2 trsp TAP','client'=>'Testo Durand','statut'=>'tele','reglement'=>'nonregle','montant'=>'63,02'],
                    ['num'=>'TA0000091','date'=>'16/11/25','detail'=>'2 trsp TAP','client'=>'BOUIGUES Nicolas','statut'=>'tele','reglement'=>'nonregle','montant'=>'48,56'],
                    ['num'=>'TA0000090','date'=>'15/11/25','detail'=>'2 trsp TAP','client'=>'BOUIGUES Nicolas','statut'=>'','reglement'=>'nonregle','montant'=>'177,60'],
                    ['num'=>'TA0000089','date'=>'15/11/25','detail'=>'2 trsp TAP','client'=>'BOUIGUES Nicolas','statut'=>'','reglement'=>'nonregle','montant'=>'575,25'],
                    ['num'=>'TA0000088','date'=>'15/11/25','detail'=>'2 trsp TAP','client'=>'BOUIGUES Nicolas','statut'=>'','reglement'=>'nonregle','montant'=>'123,18'],
                    ['num'=>'TA0000087','date'=>'15/11/25','detail'=>'2 trsp TAP','client'=>'BUTZ BARON ALEXIS','statut'=>'','reglement'=>'nonregle','montant'=>'32,78'],
                    ['num'=>'TA0000086','date'=>'14/11/25','detail'=>'14 trsp TAP Série 01/11/25 au 12/11/25','client'=>'ALBAN LUCIENNE','statut'=>'','reglement'=>'nonregle','montant'=>'262,26'],
                    ['num'=>'TA0000085','date'=>'14/11/25','detail'=>'12 trsp TAP Série 01/11/25 au 12/11/25','client'=>'ALBAN LUCIENNE','statut'=>'','reglement'=>'nonregle','montant'=>'221,28'],
                    ['num'=>'TA0000084','date'=>'13/11/25','detail'=>'2 trsp TAP','client'=>'ALBERTINI MATHIEU','statut'=>'','reglement'=>'nonregle','montant'=>'44,08'],
                ];
                $badges = [
                    'tele'   => ['class'=>'badge-tele',  'label'=>'Télétransmise'],
                    'libre'  => ['class'=>'badge-libre', 'label'=>'Fact. Libre'],
                    'assist' => ['class'=>'badge-assist','label'=>'Fact. Assist.'],
                ];
                @endphp
                @foreach($factures as $f)
                <tr onclick="this.classList.toggle('selected')">
                    <td>
                        <button class="icon-btn">
                            <svg viewBox="0 0 24 24"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 014-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 01-4 4H3"/></svg>
                        </button>
                    </td>
                    <td class="fact-num">{{ $f['num'] }}</td>
                    <td style="white-space:nowrap; color:var(--text-muted);">{{ $f['date'] }}</td>
                    <td style="color:var(--text);">{{ $f['detail'] }}</td>
                    <td style="font-weight:700;">{{ $f['client'] }}</td>
                    <td>
                        @if($f['statut'] && isset($badges[$f['statut']]))
                            <span class="{{ $badges[$f['statut']]['class'] }}">{{ $badges[$f['statut']]['label'] }}</span>
                        @endif
                    </td>
                    <td>
                        @if($f['reglement'] === 'nonregle')
                            <span class="badge-nonregle">Non Réglée</span>
                        @else
                            <span class="badge-regle">Réglée</span>
                        @endif
                    </td>
                    <td class="montant">{{ $f['montant'] }}</td>
                    <td>
                        <button class="icon-btn" title="Voir">
                            <svg viewBox="0 0 24 24" style="stroke:#E53E3E;"><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="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/></svg>
                        </button>
                    </td>
                    <td><input type="checkbox" style="accent-color:var(--navy); cursor:pointer;"></td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

{{-- Impression + Quitter --}}
<div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;">
    <div class="print-box">
        <div class="print-col">
            <label class="check-lbl"><input type="checkbox"> Factures</label>
            <label class="check-lbl"><input type="checkbox"> Annexes série</label>
            <label class="check-lbl"><input type="checkbox"> Annexes normales</label>
        </div>
        <div class="divider"></div>
        <div class="print-col">
            <label class="check-lbl"><input type="checkbox"> Impression avec la trame</label>
            <label class="check-lbl"><input type="checkbox"> Impression avec la trame</label>
        </div>
        <div class="divider"></div>
        <button class="icon-btn" title="Imprimer" style="padding:10px;">
            <svg viewBox="0 0 24 24" style="width:28px;height:28px;stroke:var(--navy);fill:none;stroke-width:1.6;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>

    <a href="{{ route('dashboard') }}" class="btn-o">Quitter</a>
</div>

@endsection