@extends('layouts.app')
@section('title', "Chiffre d'affaire")
@section('page-title', "Edition — Chiffre d'affaire")

@push('styles')
<style>
    .f-input{border:1.5px solid var(--border);border-radius:7px;padding:5px 9px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:600;color:var(--text);background:#fff;outline:none;transition:border-color .2s;}
    .f-input:focus{border-color:var(--yellow);}
    .f-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:14px;padding-right:28px;}
    .radio-lbl{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--text);cursor:pointer;white-space:nowrap;}
    .radio-lbl input{accent-color:var(--navy);}
    .check-lbl{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;}
    .check-lbl input{accent-color:var(--navy);}
    .btn-ghost{background:#fff;color:var(--text-muted);border:1.5px solid var(--border);border-radius:20px;padding:7px 22px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;}
    .btn-ghost:hover{background:#F4F6FB;}
    .btn-y{background:var(--yellow);color:var(--navy);border:none;border-radius:20px;padding:7px 22px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
    .btn-y:hover{background:var(--yellow-dark);}
    .icon-btn{background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:6px;transition:background .15s;display:inline-flex;align-items:center;}
    .icon-btn:hover{background:#F0F2FF;}

    /* Layout principal */
    .ca-layout{display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:start;}

    /* Panneau gauche */
    .ca-panel{background:#fff;border:1.5px solid var(--border);border-radius:12px;padding:22px 24px;}
    .ca-section-title{font-size:15px;font-weight:900;color:var(--navy);margin-bottom:14px;}
    .ca-type-option{display:flex;align-items:center;gap:8px;margin-bottom:12px;}

    /* Zone graphique */
    .ca-chart-card{background:#fff;border:1.5px solid var(--border);border-radius:12px;padding:22px 24px;}
    .ca-chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px;}
    .ca-chart-title{font-size:15px;font-weight:900;color:var(--navy);}
    .ca-chart-tabs{display:flex;gap:4px;}
    .ca-chart-tab{padding:5px 14px;font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;border:1.5px solid var(--border);border-radius:20px;background:#F4F6FB;color:var(--text-muted);cursor:pointer;transition:all .15s;}
    .ca-chart-tab.active{background:var(--navy);color:#fff;border-color:var(--navy);}
    .ca-chart-wrap{position:relative;height:320px;}

    /* Totaux sous graphique */
    .ca-totals{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px;}
    .ca-total-card{background:#F8F9FF;border:1.5px solid var(--border);border-radius:10px;padding:12px 16px;text-align:center;}
    .ca-total-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.8px;color:var(--text-muted);margin-bottom:6px;}
    .ca-total-value{font-size:20px;font-weight:900;color:var(--navy);}
    .ca-total-value.green{color:#2E7D32;}

    /* Barre filtres */
    .ca-filters{background:#fff;border:1.5px solid var(--border);border-radius:12px;padding:16px 20px;margin-bottom:18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}

    /* Pied */
    .ca-footer{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:18px;}
    .ca-print-group{display:flex;align-items:center;gap:8px;}
</style>
@endpush

@section('content')

{{-- ── Barre de filtres ── --}}
<div class="ca-filters">
    <span style="font-size:13px;font-weight:700;color:var(--text-muted);">Du</span>
    <input type="date" class="f-input" style="width:145px;" id="dateFrom" value="{{ date('Y-m-d', strtotime('-30 days')) }}">
    <span style="font-size:13px;font-weight:700;color:var(--text-muted);">Au</span>
    <input type="date" class="f-input" style="width:145px;" id="dateTo"   value="{{ date('Y-m-d') }}">

    <span style="font-size:13px;font-weight:700;color:var(--text-muted);margin-left:10px;">Sur</span>
    <label class="radio-lbl"><input type="radio" name="caBase" value="facture" checked> Date de la facture</label>
    <label class="radio-lbl"><input type="radio" name="caBase" value="transport"> Date du transport</label>

    <div style="display:flex;flex-direction:column;gap:6px;margin-left:10px;">
        <div style="display:flex;gap:16px;">
            <label class="radio-lbl"><input type="radio" name="caFact" value="tap"> TAP</label>
            <label class="radio-lbl"><input type="radio" name="caFact" value="libre"> Libre</label>
            <label class="radio-lbl"><input type="radio" name="caFact" value="lesdeux" checked> Les Deux</label>
        </div>
        <label class="check-lbl"><input type="checkbox"> Seulement les transports simultanés</label>
    </div>

    <button class="btn-y" style="margin-left:auto;" onclick="refreshChart()">
        <svg viewBox="0 0 24 24" style="width:13px;height:13px;stroke:var(--navy);fill:none;stroke-width:2.5;stroke-linecap:round;"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        Actualiser
    </button>
</div>

{{-- ── Layout principal ── --}}
<div class="ca-layout">

    {{-- Panneau gauche : Type de CA --}}
    <div class="ca-panel">
        <div class="ca-section-title">Type de CA</div>
        <div class="ca-type-option">
            <label class="radio-lbl"><input type="radio" name="typeCA" value="global" checked onchange="switchType(this)"> Global</label>
        </div>
        <div class="ca-type-option">
            <label class="radio-lbl"><input type="radio" name="typeCA" value="organisme" onchange="switchType(this)"> Par Organisme</label>
        </div>
        <div class="ca-type-option">
            <label class="radio-lbl"><input type="radio" name="typeCA" value="client" onchange="switchType(this)"> Par Client</label>
        </div>
        <div class="ca-type-option">
            <label class="radio-lbl"><input type="radio" name="typeCA" value="vehicule" onchange="switchType(this)"> Par Véhicule</label>
        </div>

    </div>

    {{-- Zone graphique --}}
    <div class="ca-chart-card">
        <div class="ca-chart-header">
            <span class="ca-chart-title" id="chartTitle">Chiffre d'affaire — Global</span>
            <div class="ca-chart-tabs">
                <button class="ca-chart-tab active" data-type="bar"   onclick="switchChart('bar',this)">Barres</button>
                <button class="ca-chart-tab"        data-type="line"  onclick="switchChart('line',this)">Courbe</button>
                <button class="ca-chart-tab"        data-type="doughnut" onclick="switchChart('doughnut',this)">Camembert</button>
            </div>
        </div>

        <div class="ca-chart-wrap">
            <canvas id="caChart"></canvas>
        </div>

        {{-- Totaux --}}
        <div class="ca-totals" id="caTotals">
            <div class="ca-total-card">
                <div class="ca-total-label">CA Total</div>
                <div class="ca-total-value" id="totTotal">48 320 €</div>
            </div>
            <div class="ca-total-card">
                <div class="ca-total-label">Part Caisse</div>
                <div class="ca-total-value" id="totCaisse">36 240 €</div>
            </div>
            <div class="ca-total-card">
                <div class="ca-total-label">Part Client</div>
                <div class="ca-total-value" id="totClient">9 680 €</div>
            </div>
            <div class="ca-total-card">
                <div class="ca-total-label">Nb Factures</div>
                <div class="ca-total-value green" id="totFactures">214</div>
            </div>
        </div>

        {{-- Barre export / actions --}}
        <div style="display:flex;align-items:center;gap:16px;border-top:1.5px solid var(--border);margin-top:16px;padding-top:14px;flex-wrap:wrap;">
            {{-- Imprimer --}}
            <button class="icon-btn" title="Imprimer" style="display:flex;align-items:center;gap:8px;">
                <svg viewBox="0 0 24 24" style="width:28px;height:28px;stroke:var(--text-muted);fill:none;stroke-width:1.5;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>
                <span style="font-size:12px;font-weight:700;color:var(--text-muted);">Imprimer</span>
            </button>
            <label class="check-lbl">
                <input type="checkbox"> <span style="font-size:12px;font-weight:600;color:var(--text-muted);">Totaux/caisses</span>
            </label>

            <div style="width:1px;height:28px;background:var(--border);margin:0 4px;"></div>

            {{-- Export Excel --}}
            <button class="icon-btn" title="Export Excel" style="display:flex;align-items:center;gap:8px;">
                <svg viewBox="0 0 24 24" style="width:28px;height:28px;fill:none;" xmlns="http://www.w3.org/2000/svg">
                    <rect x="2" y="2" width="20" height="20" rx="3" fill="#1D6F42" stroke="#1D6F42"/>
                    <path d="M7 7l3.5 5L7 17" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/>
                    <path d="M17 7l-3.5 5 3.5 5" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/>
                    <line x1="13" y1="7" x2="11" y2="17" stroke="#fff" stroke-width="1.8"/>
                </svg>
                <span style="font-size:12px;font-weight:700;color:var(--text-muted);">Export Excel</span>
            </button>
            <label class="check-lbl">
                <input type="checkbox"> <span style="font-size:12px;font-weight:600;color:var(--text-muted);">Tri/caisses</span>
            </label>

            <a href="{{ route('dashboard') }}" class="btn-ghost" style="margin-left:auto;">Quitter</a>
        </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>
// ── Données de démo ──
const caData = {
    global: {
        labels: ['Jan','Fév','Mar','Avr','Mai','Jun','Jul','Aoû','Sep','Oct','Nov','Déc'],
        datasets: [
            { label:'CA Caisse', data:[2800,3100,3400,2900,3600,3200,3800,2600,3300,3500,3700,4300], backgroundColor:'rgba(30,50,120,0.75)', borderColor:'#1E3278', borderWidth:2 },
            { label:'CA Client', data:[600,700,800,650,900,750,950,550,800,850,900,1000],             backgroundColor:'rgba(255,193,7,0.8)',   borderColor:'#FFC107', borderWidth:2 },
        ],
        totals: { total:'48 320 €', caisse:'36 240 €', client:'9 680 €', nb:'214' }
    },
    organisme: {
        labels: ['CPAM AGEN','CPAM ST LO','CPAM PERP.','MSA','CMU','Mutuelle du Midi','MAAF'],
        datasets: [
            { label:'CA', data:[12400,8200,6500,5300,4800,3200,2600],
              backgroundColor:['#1E3278','#3F51B5','#FFC107','#FF9800','#4CAF50','#9C27B0','#F44336'],
              borderWidth:1, borderColor:'#fff' }
        ],
        totals: { total:'43 000 €', caisse:'43 000 €', client:'—', nb:'198' }
    },
    client: {
        labels: ['ALBAN L.','ALBRECHT N.','SALMI M.','BOUIGUES N.','LASSAGNE C.','ALBISSIER J.','Autres'],
        datasets: [
            { label:'CA Client', data:[3200,2800,2100,1900,1600,1200,5880],
              backgroundColor:['#1E3278','#3F51B5','#FFC107','#FF9800','#4CAF50','#9C27B0','#90A4AE'],
              borderWidth:1, borderColor:'#fff' }
        ],
        totals: { total:'18 680 €', caisse:'—', client:'18 680 €', nb:'87' }
    },
    vehicule: {
        labels: ['AB-123-CD','EF-456-GH','IJ-789-KL','MN-012-OP'],
        datasets: [
            { label:'CA Véhicule', data:[18500,14200,9800,5820],
              backgroundColor:['#1E3278','#FFC107','#4CAF50','#FF9800'],
              borderWidth:1, borderColor:'#fff' }
        ],
        totals: { total:'48 320 €', caisse:'36 240 €', client:'9 680 €', nb:'214' }
    }
};

let currentType  = 'global';
let currentChart = 'bar';
let chart        = null;

function buildConfig(type, chartType) {
    const d = caData[type];
    const isDonut = chartType === 'doughnut';
    const isLine  = chartType === 'line';

    const datasets = d.datasets.map(ds => ({
        ...ds,
        fill: isLine ? false : undefined,
        tension: isLine ? 0.4 : undefined,
        pointBackgroundColor: isLine ? ds.borderColor : undefined,
        pointRadius: isLine ? 4 : undefined,
    }));

    return {
        type: chartType,
        data: { labels: d.labels, datasets },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { position: isDonut ? 'right' : 'top', labels: { font: { family:'Nunito', weight:'700', size:12 } } },
                tooltip: { callbacks: { label: ctx => ' ' + ctx.formattedValue + ' €' } }
            },
            scales: isDonut ? {} : {
                x: { grid: { color:'rgba(0,0,0,0.05)' }, ticks: { font:{ family:'Nunito', weight:'600', size:11 } } },
                y: { grid: { color:'rgba(0,0,0,0.05)' }, ticks: { font:{ family:'Nunito', weight:'600', size:11 }, callback: v => v.toLocaleString('fr-FR') + ' €' } }
            }
        }
    };
}

function renderChart() {
    const ctx = document.getElementById('caChart').getContext('2d');
    if (chart) chart.destroy();
    chart = new Chart(ctx, buildConfig(currentType, currentChart));

    // Totaux
    const t = caData[currentType].totals;
    document.getElementById('totTotal').textContent   = t.total;
    document.getElementById('totCaisse').textContent  = t.caisse;
    document.getElementById('totClient').textContent  = t.client;
    document.getElementById('totFactures').textContent = t.nb;
}

function switchType(radio) {
    currentType = radio.value;
    const labels = { global:'Global', organisme:'Par Organisme', client:'Par Client', vehicule:'Par Véhicule' };
    document.getElementById('chartTitle').textContent = "Chiffre d'affaire — " + labels[currentType];
    renderChart();
}

function switchChart(type, btn) {
    currentChart = type;
    document.querySelectorAll('.ca-chart-tab').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    renderChart();
}

function refreshChart() { renderChart(); }

// Init
document.addEventListener('DOMContentLoaded', renderChart);
</script>
@endpush