@extends('layouts.app')
@section('content')

    @include('partials.dashboard-filter', [
        'filterId' => 'statistiques',
        'filterRoute' => 'statistiques',
        'pageTitle' => 'Statistiques',
        'defaultLabel' =>
            '1 an (' .
            $debutPeriode->locale('fr')->isoFormat('D MMM YYYY') .
            ' – ' .
            $finPeriode->locale('fr')->isoFormat('D MMM YYYY') .
            ')',
    ])

    <div class="stats-scope-bar mb-3">
        <div class="stats-scope-tabs" role="tablist" aria-label="Filtrer par">
            <a href="{{ route('statistiques', array_filter(['scope' => 'global', 'date_debut' => $dateDebut, 'date_fin' => $dateFin])) }}"
                class="stats-scope-tab {{ $scope === 'global' ? 'is-active' : '' }}">
                Global
            </a>
            <a href="{{ route('statistiques', array_filter(['scope' => 'produits', 'date_debut' => $dateDebut, 'date_fin' => $dateFin])) }}"
                class="stats-scope-tab {{ $scope === 'produits' ? 'is-active' : '' }}">
                Produits
            </a>
            @if ($servicesModuleEnabled)
                <a href="{{ route('statistiques', array_filter(['scope' => 'services', 'date_debut' => $dateDebut, 'date_fin' => $dateFin])) }}"
                    class="stats-scope-tab {{ $scope === 'services' ? 'is-active' : '' }}">
                    Services
                </a>
            @endif
        </div>
    </div>

    {{-- Bandeau KPI unique : tous les chiffres-clés d'un coup d'œil, style uniforme --}}
    <div class="kpi-grid mb-4">
        <div class="dash-widget dash1 w-100">
            <div class="dash-widgetcontent">
                <h5><span class="counters">{{ number_format($ca_total, 0, ' ', ' ') }}</span> FCFA</h5>
                <h6>Chiffre d'affaires</h6>
            </div>
        </div>
        <div class="dash-widget dash1 w-100">
            <div class="dash-widgetcontent">
                <h5><span class="counters">{{ number_format($gains_total, 0, ' ', ' ') }}</span> FCFA</h5>
                <h6>Gains</h6>
            </div>
        </div>
        @if ($scope === 'global')
            <div class="dash-widget dash1 w-100">
                <div class="dash-widgetcontent">
                    <h5><span class="counters">{{ number_format($marge_nette, 0, ' ', ' ') }}</span> FCFA</h5>
                    <h6>Marge nette</h6>
                </div>
            </div>
            <div class="dash-widget dash1 w-100">
                <div class="dash-widgetcontent">
                    <h5><span class="counters">{{ number_format($total_depenses, 0, ' ', ' ') }}</span> FCFA</h5>
                    <h6>Dépenses</h6>
                </div>
            </div>
        @endif
        <div class="dash-widget dash1 w-100">
            <div class="dash-widgetcontent">
                <h5><span class="counters">{{ number_format($panier_moyen, 0, ' ', ' ') }}</span> FCFA</h5>
                <h6>Panier moyen</h6>
            </div>
        </div>
        <div class="dash-widget dash1 w-100">
            <div class="dash-widgetcontent">
                <h5><span class="counters">{{ number_format($nb_transactions, 0, ' ', ' ') }}</span></h5>
                <h6>Transactions</h6>
            </div>
        </div>
        <div class="dash-widget dash1 w-100">
            <div class="dash-widgetcontent">
                <h5><span class="counters">{{ number_format($taux_annulation, 1, ',', ' ') }}</span> %</h5>
                <h6>Taux de retours ({{ $nb_total_annules }})</h6>
            </div>
        </div>
        @if ($scope !== 'services')
            <div class="dash-widget dash1 w-100">
                <div class="dash-widgetcontent">
                    <h5><span class="counters">{{ number_format($stock_faible_count, 0, ' ', ' ') }}</span></h5>
                    <h6>Stock faible</h6>
                </div>
            </div>
            <div class="dash-widget dash1 w-100">
                <div class="dash-widgetcontent">
                    <h5><span class="counters">{{ number_format($nouveaux_clients, 0, ' ', ' ') }}</span></h5>
                    <h6>Nouveaux clients</h6>
                </div>
            </div>
        @endif
    </div>

    {{-- Tendance + répartition, côte à côte pour une lecture comparative directe --}}
    <div class="row">
        <div class="{{ $scope !== 'services' && $caParCategorie->isNotEmpty() ? 'col-xl-8' : 'col-xl-12' }} col-12 d-flex">
            <div class="card flex-fill">
                <div class="card-header">
                    <h5 class="card-title mb-0">Évolution du chiffre d'affaires</h5>
                </div>
                <div class="card-body">
                    <canvas id="caParJourChart"></canvas>
                </div>
            </div>
        </div>
        @if ($scope !== 'services' && $caParCategorie->isNotEmpty())
            <div class="col-xl-4 col-12 d-flex">
                <div class="card flex-fill">
                    <div class="card-header">
                        <h5 class="card-title mb-0">CA produits par catégorie</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="caParCategorieChart"></canvas>
                    </div>
                </div>
            </div>
        @endif
    </div>

    {{-- Palmarès produits / services, côte à côte --}}
    <div class="row">
        @if ($scope !== 'services' && $topProduits->isNotEmpty())
            <div class="col-xl-6 col-sm-12 col-12 d-flex">
                <div class="card flex-fill">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Top 5 produits</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Produit</th>
                                        <th>Qté vendue</th>
                                        <th>Montant</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($topProduits as $item)
                                        <tr>
                                            <td>{{ $item->label }}</td>
                                            <td>{{ number_format($item->quantite, 0, ' ', ' ') }}</td>
                                            <td>{{ number_format($item->montant, 0, ' ', ' ') }} FCFA</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        @endif
        @if ($scope !== 'produits' && $servicesModuleEnabled && $topServices->isNotEmpty())
            <div class="col-xl-6 col-sm-12 col-12 d-flex">
                <div class="card flex-fill">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Top 5 services</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Service</th>
                                        <th>Qté vendue</th>
                                        <th>Montant</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($topServices as $item)
                                        <tr>
                                            <td>{{ $item->label }}</td>
                                            <td>{{ number_format($item->quantite, 0, ' ', ' ') }}</td>
                                            <td>{{ number_format($item->montant, 0, ' ', ' ') }} FCFA</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let caParJour = @json($caParJour);
            new Chart(document.getElementById('caParJourChart'), {
                type: 'line',
                data: {
                    labels: Object.keys(caParJour),
                    datasets: [{
                        label: 'Chiffre d\'affaires',
                        data: Object.values(caParJour),
                        backgroundColor: 'rgba(0, 57, 186, 0.08)',
                        borderColor: 'rgba(0, 57, 186, 1)',
                        borderWidth: 2,
                        tension: 0.3,
                        pointRadius: 2,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            let caParCategorieEl = document.getElementById('caParCategorieChart');
            if (caParCategorieEl) {
                let caParCategorie = @json($caParCategorie);
                new Chart(caParCategorieEl, {
                    type: 'doughnut',
                    data: {
                        labels: caParCategorie.map(c => c.label),
                        datasets: [{
                            data: caParCategorie.map(c => c.montant),
                            backgroundColor: [
                                'rgba(0, 57, 186, 0.85)',
                                'rgba(250, 186, 1, 0.85)',
                                'rgba(255, 99, 132, 0.85)',
                                'rgba(75, 192, 192, 0.85)',
                                'rgba(153, 102, 255, 0.85)',
                                'rgba(255, 159, 64, 0.85)'
                            ],
                            borderWidth: 0
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'bottom',
                                labels: {
                                    boxWidth: 10,
                                    padding: 12,
                                    font: {
                                        size: 11
                                    }
                                }
                            }
                        }
                    }
                });
            }
        });
    </script>

    <style>
        .stats-scope-tabs {
            display: inline-flex;
            gap: 4px;
            padding: 4px;
            background: #F3F6FC;
            border-radius: 10px;
        }

        .stats-scope-tab {
            padding: 6px 16px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            color: #5B6475;
            text-decoration: none;
            transition: background 0.15s ease, color 0.15s ease;
        }

        .stats-scope-tab:hover {
            color: #0039BA;
            text-decoration: none;
        }

        .stats-scope-tab.is-active {
            background: #0039BA;
            color: #fff;
        }

        .kpi-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
        }

        .kpi-grid .dash-widget {
            margin: 0;
        }

        #caParJourChart,
        #caParCategorieChart {
            max-height: 320px;
        }
    </style>

@endsection