@extends('layouts.app')
@section('title', 'Tableau de bord')
@section('page-title', 'Tableau de bord')

@push('styles')
<style>
    /* ── KPI Cards ── */
    .kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
    .kpi-card {
        background:#fff; border-radius:14px; border:1.5px solid var(--border);
        padding:18px 20px; display:flex; align-items:center; gap:16px;
        transition:box-shadow .2s;
    }
    .kpi-card:hover { box-shadow:0 4px 18px rgba(30,50,120,.09); }
    .kpi-icon {
        width:48px; height:48px; border-radius:12px;
        display:flex; align-items:center; justify-content:center; flex-shrink:0;
    }
    .kpi-icon.navy  { background:#EEF1FA; }
    .kpi-icon.yellow{ background:#FFF8E1; }
    .kpi-icon.green { background:#E8F5E9; }
    .kpi-icon.red   { background:#FFEBEE; }
    .kpi-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; color:var(--text-muted); margin-bottom:5px; }
    .kpi-value { font-size:24px; font-weight:900; color:var(--navy); line-height:1; }
    .kpi-sub   { font-size:11px; font-weight:600; color:var(--text-muted); margin-top:4px; }
    .kpi-trend { font-size:11px; font-weight:800; padding:2px 8px; border-radius:20px; white-space:nowrap; }
    .kpi-trend.up   { background:#E8F5E9; color:#2E7D32; }
    .kpi-trend.down { background:#FFEBEE; color:#C62828; }
    .kpi-trend.flat { background:#F4F6FB; color:var(--text-muted); }

    /* ── Graphiques ── */
    .dash-graphs { display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-bottom:20px; }
    .d-card { background:#fff; border-radius:14px; border:1.5px solid var(--border); padding:20px 22px; }
    .d-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
    .d-card-title { font-size:14px; font-weight:900; color:var(--navy); }
    .d-chart-tabs { display:flex; gap:4px; }
    .d-tab { padding:4px 12px; font-family:'Nunito',sans-serif; font-size:11px; font-weight:800; border:1.5px solid var(--border); border-radius:20px; background:#F4F6FB; color:var(--text-muted); cursor:pointer; transition:all .15s; }
    .d-tab.active { background:var(--navy); color:#fff; border-color:var(--navy); }
    .d-chart-wrap { position:relative; height:220px; }

    /* ── Bas de page : Impayés + Version ── */
    .dash-bottom { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

    /* Liste impayés */
    .imp-table { width:100%; border-collapse:collapse; }
    .imp-table thead th { font-size:11px; font-weight:800; color:var(--text-muted); text-transform:uppercase; letter-spacing:.6px; padding:6px 10px; border-bottom:2px solid var(--border); text-align:left; }
    .imp-table tbody td { padding:8px 10px; font-size:12px; font-weight:600; color:var(--text); border-bottom:1px solid var(--border); }
    .imp-table tbody tr:last-child td { border-bottom:none; }
    .imp-table tbody tr:hover { background:#F8F9FF; }
    .imp-badge { font-size:10px; font-weight:900; padding:2px 8px; border-radius:20px; white-space:nowrap; }
    .imp-badge.high { background:#FFEBEE; color:#C62828; }
    .imp-badge.med  { background:#FFF3E0; color:#E65100; }

    /* Version */
    .ver-list { list-style:none; padding:0; margin:0; }
    .ver-item { display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px dashed var(--border); }
    .ver-item:last-child { border-bottom:none; }
    .ver-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:4px; }
    .ver-dot.green  { background:#4CAF50; }
    .ver-dot.orange { background:#FF9800; }
    .ver-dot.blue   { background:#2196F3; }
    .ver-text { font-size:12px; font-weight:600; color:var(--text); line-height:1.5; }
    .ver-num  { display:inline-flex; align-items:center; gap:6px; margin-bottom:10px; }
    .ver-badge { background:var(--yellow); color:var(--navy); font-size:11px; font-weight:900; padding:3px 12px; border-radius:20px; }
    .ver-date { font-size:11px; font-weight:600; color:var(--text-muted); }
    .ver-link { font-size:11px; font-weight:800; color:var(--navy); text-decoration:none; }
    .ver-link:hover { text-decoration:underline; }

    /* Prochains transports */
    .transport-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); }
    .transport-row:last-child { border-bottom:none; }
    .tr-time { font-size:13px; font-weight:900; color:var(--navy); min-width:50px; }
    .tr-client { font-size:12px; font-weight:700; color:var(--text); flex:1; }
    .tr-dest { font-size:11px; font-weight:600; color:var(--text-muted); }
    .tr-driver { font-size:11px; font-weight:800; padding:2px 8px; border-radius:20px; background:#EEF1FA; color:var(--navy); white-space:nowrap; }
</style>
@endpush

@section('content')

@php $today = \Carbon\Carbon::now(); @endphp

{{-- ══════════ KPI ══════════ --}}
<div class="kpi-grid">

    <div class="kpi-card">
        <div class="kpi-icon navy">
            <svg viewBox="0 0 24 24" style="width:24px;height:24px;stroke:#1E3278;fill:none;stroke-width:2;stroke-linecap:round;">
                <rect x="1" y="3" width="15" height="13" rx="2"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/>
            </svg>
        </div>
        <div style="flex:1;">
            <div class="kpi-label">Transports aujourd'hui</div>
            <div class="kpi-value">24</div>
            <div class="kpi-sub">8 en cours · 16 à venir</div>
        </div>
        <span class="kpi-trend up">+3</span>
    </div>

    <div class="kpi-card">
        <div class="kpi-icon yellow">
            <svg viewBox="0 0 24 24" style="width:24px;height:24px;stroke:#F9A825;fill:none;stroke-width:2;stroke-linecap:round;">
                <line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/>
            </svg>
        </div>
        <div style="flex:1;">
            <div class="kpi-label">CA du mois</div>
            <div class="kpi-value">4 320 €</div>
            <div class="kpi-sub">Objectif : 5 000 €</div>
        </div>
        <span class="kpi-trend up">+12%</span>
    </div>

    <div class="kpi-card">
        <div class="kpi-icon red">
            <svg viewBox="0 0 24 24" style="width:24px;height:24px;stroke:#C62828;fill:none;stroke-width:2;stroke-linecap:round;">
                <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"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/>
            </svg>
        </div>
        <div style="flex:1;">
            <div class="kpi-label">Factures impayées</div>
            <div class="kpi-value" style="color:#C62828;">7</div>
            <div class="kpi-sub">Reste dû : 1 842 €</div>
        </div>
        <span class="kpi-trend down">+2</span>
    </div>

    <div class="kpi-card">
        <div class="kpi-icon green">
            <svg viewBox="0 0 24 24" style="width:24px;height:24px;stroke:#2E7D32;fill:none;stroke-width:2;stroke-linecap:round;">
                <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/>
            </svg>
        </div>
        <div style="flex:1;">
            <div class="kpi-label">Conducteurs actifs</div>
            <div class="kpi-value" style="color:#2E7D32;">5</div>
            <div class="kpi-sub">2 disponibles · 3 en course</div>
        </div>
        <span class="kpi-trend flat">→</span>
    </div>

</div>

{{-- ══════════ GRAPHIQUES ══════════ --}}
<div class="dash-graphs">

    {{-- Graphique CA mensuel --}}
    <div class="d-card">
        <div class="d-card-head">
            <span class="d-card-title">Chiffre d'affaire — {{ $today->year }}</span>
            <div class="d-chart-tabs">
                <button class="d-tab active" onclick="switchDashChart('bar',this)">Barres</button>
                <button class="d-tab"        onclick="switchDashChart('line',this)">Courbe</button>
            </div>
        </div>
        <div class="d-chart-wrap"><canvas id="dashCAChart"></canvas></div>
    </div>

    {{-- Graphique répartition --}}
    <div class="d-card">
        <div class="d-card-head">
            <span class="d-card-title">Répartition des courses</span>
        </div>
        <div class="d-chart-wrap"><canvas id="dashPieChart"></canvas></div>
        <div style="display:flex;justify-content:center;gap:16px;margin-top:12px;flex-wrap:wrap;">
            <span style="font-size:11px;font-weight:700;color:var(--text-muted);display:flex;align-items:center;gap:5px;"><span style="display:inline-block;width:10px;height:10px;background:#1E3278;border-radius:2px;"></span>Caisse (75%)</span>
            <span style="font-size:11px;font-weight:700;color:var(--text-muted);display:flex;align-items:center;gap:5px;"><span style="display:inline-block;width:10px;height:10px;background:#FFC107;border-radius:2px;"></span>Client (15%)</span>
            <span style="font-size:11px;font-weight:700;color:var(--text-muted);display:flex;align-items:center;gap:5px;"><span style="display:inline-block;width:10px;height:10px;background:#4CAF50;border-radius:2px;"></span>Mutuelle (10%)</span>
        </div>
    </div>

</div>

{{-- ══════════ BAS ══════════ --}}
<div class="dash-bottom">

    {{-- Impayés urgents --}}
    <div class="d-card">
        <div class="d-card-head">
            <span class="d-card-title">⚠️ Impayés à relancer</span>
            <a href="{{ route('impayes.index') }}" style="font-size:12px;font-weight:800;color:var(--navy);text-decoration:none;">Voir tout →</a>
        </div>
        <table class="imp-table">
            <thead>
                <tr>
                    <th>N° Facture</th>
                    <th>Client</th>
                    <th>Montant</th>
                    <th>Ancienneté</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="font-weight:900;color:var(--navy);">TA0000019</td>
                    <td>ALBRECHT NADINE</td>
                    <td style="font-weight:800;color:#C62828;">96,60 €</td>
                    <td>+180 j.</td>
                    <td><span class="imp-badge high">Urgent</span></td>
                </tr>
                <tr>
                    <td style="font-weight:900;color:var(--navy);">TA0000036</td>
                    <td>LASSAGNE CECILE</td>
                    <td style="font-weight:800;color:#C62828;">219,72 €</td>
                    <td>+90 j.</td>
                    <td><span class="imp-badge high">Urgent</span></td>
                </tr>
                <tr>
                    <td style="font-weight:900;color:var(--navy);">TA0000083</td>
                    <td>ALBISSIER JEANNE</td>
                    <td style="font-weight:800;color:#E65100;">44,08 €</td>
                    <td>+30 j.</td>
                    <td><span class="imp-badge med">Relancer</span></td>
                </tr>
                <tr>
                    <td style="font-weight:900;color:var(--navy);">00000014</td>
                    <td>ALBAN LUCIENNE</td>
                    <td style="font-weight:800;color:#E65100;">20,45 €</td>
                    <td>+45 j.</td>
                    <td><span class="imp-badge med">Relancer</span></td>
                </tr>
            </tbody>
        </table>
    </div>

    {{-- Dernière MAJ + prochains transports --}}
    <div style="display:flex;flex-direction:column;gap:16px;">

        {{-- Dernière MAJ --}}
        <div class="d-card" style="flex:0 0 auto;">
            <div class="d-card-head">
                <span class="d-card-title">🔄 Dernière mise à jour</span>
                <a href="{{ route('suivi-version.index') }}" class="ver-link">Historique →</a>
            </div>
            <div class="ver-num">
                <span class="ver-badge">v4.2.1</span>
                <span class="ver-date">05/06/2026</span>
            </div>
            <ul class="ver-list">
                <li class="ver-item">
                    <span class="ver-dot orange"></span>
                    <span class="ver-text">Correction du centrage de la page Société</span>
                </li>
                <li class="ver-item">
                    <span class="ver-dot orange"></span>
                    <span class="ver-text">Correction du modal Lignes facturation</span>
                </li>
                <li class="ver-item">
                    <span class="ver-dot blue"></span>
                    <span class="ver-text">Amélioration des performances de chargement</span>
                </li>
                <li class="ver-item">
                    <span class="ver-dot blue"></span>
                    <span class="ver-text">Meilleure gestion des états actifs du menu</span>
                </li>
            </ul>
        </div>

        {{-- Prochains transports --}}
        <div class="d-card" style="flex:1;">
            <div class="d-card-head">
                <span class="d-card-title">🚕 Prochains transports</span>
                <a href="{{ route('transport.index') }}" style="font-size:12px;font-weight:800;color:var(--navy);text-decoration:none;">Planning →</a>
            </div>
            <div class="transport-row">
                <span class="tr-time">08:30</span>
                <div style="flex:1;">
                    <div class="tr-client">ALBAN LUCIENNE</div>
                    <div class="tr-dest">Domicile → CHU Agen</div>
                </div>
                <span class="tr-driver">Dupont M.</span>
            </div>
            <div class="transport-row">
                <span class="tr-time">09:15</span>
                <div style="flex:1;">
                    <div class="tr-client">SALMI MYRIAM</div>
                    <div class="tr-dest">Domicile → Clinique du Midi</div>
                </div>
                <span class="tr-driver">Martin L.</span>
            </div>
            <div class="transport-row">
                <span class="tr-time">10:00</span>
                <div style="flex:1;">
                    <div class="tr-client">BOUIGUES Nicolas</div>
                    <div class="tr-dest">Hôpital → Domicile</div>
                </div>
                <span class="tr-driver">Bernard P.</span>
            </div>
        </div>

    </div>
</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js" defer></script>
<script>
// ── Graphique CA ──
let dashChart = null;
const caMonths = ['Jan','Fév','Mar','Avr','Mai','Jun','Jul','Aoû','Sep','Oct','Nov','Déc'];
const caCaisse = [2800,3100,3400,2900,3600,3200,3800,2600,3300,3500,3700,4320];
const caClient = [600, 700, 800, 650, 900, 750, 950, 550, 800, 850, 900, 1000];

function buildDashCA(type) {
    return {
        type,
        data: {
            labels: caMonths,
            datasets: [
                { label:'Caisse', data:caCaisse, backgroundColor:'rgba(30,50,120,0.75)', borderColor:'#1E3278', borderWidth:2, tension:.4, fill:false, pointRadius: type==='line'?4:0 },
                { label:'Client', data:caClient,  backgroundColor:'rgba(255,193,7,0.8)',  borderColor:'#FFC107', borderWidth:2, tension:.4, fill:false, pointRadius: type==='line'?4:0 },
            ]
        },
        options: {
            responsive:true, maintainAspectRatio:false,
            plugins:{ legend:{ position:'top', labels:{ font:{ family:'Nunito', weight:'700', size:11 } } } },
            scales:{
                x:{ grid:{ color:'rgba(0,0,0,0.04)' }, ticks:{ font:{ family:'Nunito', size:11 } } },
                y:{ grid:{ color:'rgba(0,0,0,0.04)' }, ticks:{ font:{ family:'Nunito', size:11 }, callback: v => v.toLocaleString('fr-FR')+'€' } }
            }
        }
    };
}

function switchDashChart(type, btn) {
    document.querySelectorAll('.d-tab').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    if (dashChart) dashChart.destroy();
    dashChart = new Chart(document.getElementById('dashCAChart').getContext('2d'), buildDashCA(type));
}

// ── Graphique répartition ──
function buildPie() {
    return {
        type: 'doughnut',
        data: {
            labels: ['Caisse','Client','Mutuelle'],
            datasets:[{ data:[75,15,10], backgroundColor:['#1E3278','#FFC107','#4CAF50'], borderWidth:3, borderColor:'#fff', hoverOffset:6 }]
        },
        options: {
            responsive:true, maintainAspectRatio:false,
            cutout:'65%',
            plugins:{
                legend:{ display:false },
                tooltip:{ callbacks:{ label: ctx => ' '+ctx.label+' : '+ctx.raw+'%' } }
            }
        }
    };
}

document.addEventListener('DOMContentLoaded', function() {
    dashChart = new Chart(document.getElementById('dashCAChart').getContext('2d'), buildDashCA('bar'));
    new Chart(document.getElementById('dashPieChart').getContext('2d'), buildPie());
});
</script>
@endpush