@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') .
            ')',
    ])

    @if ($servicesModuleEnabled)
        {{-- Le choix de scope n'a de sens que si les deux modules (Produits et Services)
        coexistent : sans Services, "Global" et "Produits" renvoient toujours les mêmes
        chiffres, et cette barre ne ferait que prêter à confusion. --}}
        <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', 'channel' => $channel, 'date_debut' => $dateDebut, 'date_fin' => $dateFin])) }}"
                    class="stats-scope-tab {{ $scope === 'global' ? 'is-active' : '' }}">
                    Global
                </a>
                <a href="{{ route('statistiques', array_filter(['scope' => 'produits', 'channel' => $channel, 'date_debut' => $dateDebut, 'date_fin' => $dateFin])) }}"
                    class="stats-scope-tab {{ $scope === 'produits' ? 'is-active' : '' }}">
                    Produits
                </a>
                <a href="{{ route('statistiques', array_filter(['scope' => 'services', 'channel' => $channel, 'date_debut' => $dateDebut, 'date_fin' => $dateFin])) }}"
                    class="stats-scope-tab {{ $scope === 'services' ? 'is-active' : '' }}">
                    Services
                </a>
            </div>
        </div>
    @endif

    @if ($scope !== 'services')
        <div class="stats-scope-bar mb-3">
            <div class="stats-scope-tabs" role="tablist" aria-label="Filtrer par canal">
                <a href="{{ route('statistiques', array_filter(['scope' => $scope, 'date_debut' => $dateDebut, 'date_fin' => $dateFin])) }}"
                    class="stats-scope-tab {{ $channel === '' ? 'is-active' : '' }}">
                    Tous canaux
                </a>
                <a href="{{ route('statistiques', array_filter(['scope' => $scope, 'channel' => 'boutique', 'date_debut' => $dateDebut, 'date_fin' => $dateFin])) }}"
                    class="stats-scope-tab {{ $channel === 'boutique' ? 'is-active' : '' }}">
                    Boutique
                </a>
                <a href="{{ route('statistiques', array_filter(['scope' => $scope, 'channel' => 'livraison', 'date_debut' => $dateDebut, 'date_fin' => $dateFin])) }}"
                    class="stats-scope-tab {{ $channel === 'livraison' ? 'is-active' : '' }}">
                    Livraison
                </a>
            </div>
        </div>
    @endif

    {{-- 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>

    {{-- Suivi des tailles/déclinaisons les plus vendues, pour anticiper les réassorts sur les
    tailles populaires (bonnets, tours de dos, tailles standard...) --}}
    @if ($scope !== 'services' && $topVariantes->isNotEmpty())
        <div class="row">
            <div class="col-12 d-flex">
                <div class="card flex-fill">
                    <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                        <h5 class="card-title mb-0">Tailles les plus vendues</h5>
                        <span class="text-muted" style="font-size: 12px;">
                            @if ($channel === 'boutique')
                                Boutique uniquement
                            @elseif ($channel === 'livraison')
                                Livraison uniquement
                            @else
                                Boutique + Livraison
                            @endif
                        </span>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Produit</th>
                                        <th>Taille</th>
                                        <th>Qté vendue</th>
                                        <th>Stock actuel</th>
                                        <th>Alerte</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($topVariantes as $item)
                                        <tr>
                                            <td>{{ $item->produit }}</td>
                                            <td>{{ $item->taille }}</td>
                                            <td>{{ number_format($item->quantite_vendue, 0, ' ', ' ') }}</td>
                                            <td>
                                                {{ $item->stock_actuel === null ? '—' : number_format($item->stock_actuel, 0, ' ', ' ') }}
                                            </td>
                                            <td>
                                                @if ($item->stock_actuel === null)
                                                    <span class="badge bg-secondary">Taille retirée</span>
                                                @elseif ($item->stock_actuel <= 0)
                                                    <span class="badge bg-danger">Rupture</span>
                                                @elseif ($item->stock_actuel <= 3)
                                                    <span class="badge bg-warning">Stock faible</span>
                                                @else
                                                    <span class="badge bg-success">OK</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <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: var(--dedi-blue-soft, #FDEEF5);
            border-radius: 10px;
        }

        .stats-scope-tab {
            padding: 6px 16px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            color: var(--dedi-muted, #7A6070);
            text-decoration: none;
            transition: background 0.15s ease, color 0.15s ease;
        }

        .stats-scope-tab:hover {
            color: var(--dedi-blue, #E8187A);
            text-decoration: none;
        }

        .stats-scope-tab.is-active {
            background: var(--dedi-blue, #E8187A);
            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