@extends('layouts.app')
@section('title','Décisionnel')
@section('heading','Intelligence décisionnelle')
@section('subheading','KPIs, rentabilité et prévisions IA')
@section('content')
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
    <x-stat label="CA annuel" :value="eur($caYear)" icon="💶" />
    <x-stat label="Taux de conversion devis" :value="$conv.'%'" icon="🎯" />
    <x-stat label="Prév. IA (3 mois)" :value="eur(array_sum($forecast))" icon="🔮" />
    <x-stat label="Top client" :value="$topClients->first()?->company ?? '—'" icon="🏆" />
</div>
<div class="grid lg:grid-cols-2 gap-6 mb-6">
    <x-card title="Évolution du CA & prévision IA"><canvas id="chartForecast" height="120"></canvas></x-card>
    <x-card title="Rentabilité par catégorie"><canvas id="chartCat" height="120"></canvas></x-card>
</div>
<div>
    <x-card title="Top clients par CA">
        @foreach($topClients as $c)
            <div class="flex items-center justify-between py-1.5 border-b border-slate-50">
                <a href="{{ route('clients.show',$c) }}" class="text-sm hover:text-brand-600">{{ $c->company }}</a>
                <span class="font-semibold text-sm">{{ eur($c->ca ?? 0) }}</span>
            </div>
        @endforeach
    </x-card>
</div>
<div class="mt-6 flex gap-2">
    <x-btn variant="secondary" :href="route('exports.invoices')">📊 Export factures (Excel)</x-btn>
    <x-btn variant="secondary" :href="route('exports.clients')">📊 Export clients (Excel)</x-btn>
    <x-btn variant="secondary" :href="route('exports.quotes')">📊 Export devis (Excel)</x-btn>
    <x-btn variant="secondary" onclick="window.print()">📄 Imprimer / PDF</x-btn>
</div>
@push('scripts')
<script>
const labels = [...Array(12)].map((_,i)=>{const d=new Date();d.setMonth(d.getMonth()-11+i);return d.toLocaleDateString('fr-FR',{month:'short'})});
const serie = @json($series);
const forecast = @json($forecast);
const fLabels = [...Array(3)].map((_,i)=>{const d=new Date();d.setMonth(d.getMonth()+1+i);return d.toLocaleDateString('fr-FR',{month:'short'})+' (prév.)'});
new Chart(document.getElementById('chartForecast'),{type:'line',data:{labels:[...labels,...fLabels],datasets:[
    {label:'CA réel',data:serie,borderColor:'#4f46e5',backgroundColor:'rgba(79,70,229,.1)',fill:true,tension:.35},
    {label:'Prévision IA',data:[...Array(11).fill(null),serie[11],...forecast],borderColor:'#f59e0b',borderDash:[6,4],tension:.35}
]},options:{scales:{y:{beginAtZero:true}}}});
const cat = @json($byCategory);
new Chart(document.getElementById('chartCat'),{type:'bar',data:{labels:cat.map(c=>c.cat),datasets:[{label:'CA (€)',data:cat.map(c=>c.total),backgroundColor:'#06b6d4'}]},options:{plugins:{legend:{display:false}},indexAxis:'y'}});
</script>
@endpush
@endsection