@extends('layouts.app')

@section('content')
<div class="container mt-4">
    <h2 class="mb-4">Statistiques</h2>

    {{-- 🔹 Formulaire de filtre --}}
    <form id="statsForm" class="mb-4">
        @csrf
        <div class="form-row">
            <div class="col-md-3">
                <label for="user_id">Utilisateur</label>
                <select id="user_id" name="user_id" class="form-control">
                    <option value="">Tous les utilisateurs</option>
                    @php
                        $allUsers = $allUsers ?? \App\Models\Account::orderBy('user_name')->get(['id','user_name']);
                    @endphp
                    @foreach($allUsers as $u)
                        <option value="{{ $u->id }}">{{ $u->user_name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-3">
                <label for="date_debut">Date de début</label>
                <input type="date" id="date_debut" name="date_debut" class="form-control" value="{{ $oldestDate ?? '' }}">
            </div>

            <div class="col-md-3">
                <label for="date_fin">Date de fin</label>
                <input type="date" id="date_fin" name="date_fin" class="form-control">
            </div>

            <div class="col-md-3">
                <button id="submitBtn" type="submit" class="btn btn-primary btn-block mt-4 mt-md-0">
                    Actualiser
                </button>
            </div>
        </div>
    </form>

    {{-- 🔹 Overlay chargement global --}}
    <div id="loadingOverlay" class="loading-overlay" style="display:none;">
        <div class="spinner-border" role="status">
            <span class="sr-only">Chargement…</span>
        </div>
    </div>

    {{-- 🔹 Tableau des numéros de série (server-side DataTables) --}}
    <div id="serialsAggWrapper" class="mt-4" style="display:none;">
        <h5 id="dynamicTitle" class="mb-3 text-primary"></h5>

        <div class="table-responsive">
            <table id="serialsTable" class="display table table-striped table-bordered" style="width:100%">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Numéro de série</th>
                        <th>Modèle</th>
                        <th>État</th>
                        <th>Historique</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    {{-- 🔹 Graphiques --}}
    <div id="chartsWrapper" style="display:none;">
        <div class="row">

            {{-- Produits --}}
            <div class="col-lg-4 mb-4">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="text-center">Produits les plus vendus</h5>
                        <div class="chart-box"><canvas id="chartProducts"></canvas></div>
                        <div id="chartProducts-legend" class="chart-widget-list mt-3 legend-scroll"></div>
                    </div>
                </div>
            </div>

            {{-- Vendeurs --}}
            <div class="col-lg-4 mb-4">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="text-center">Numéros de série par vendeur</h5>
                        <div class="chart-box"><canvas id="chartVendors"></canvas></div>
                        <div id="chartVendors-legend" class="chart-widget-list mt-3 legend-scroll"></div>
                    </div>
                </div>
            </div>

            {{-- Courbe temporelle --}}
            <div class="col-lg-4 mb-4">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="text-center">Ventes par période</h5>
                        <div class="chart-box"><canvas id="chartTimeseries"></canvas></div>
                        <div id="granularityControls" class="d-flex justify-content-center mt-2">
                            <label class="mx-2">
                                <input type="radio" name="granularity" value="day" checked> Jour
                            </label>
                            <label class="mx-2">
                                <input type="radio" name="granularity" value="month"> Mois
                            </label>
                            <label class="mx-2">
                                <input type="radio" name="granularity" value="year"> Année
                            </label>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>

{{-- 🔹 Libs --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

<style>
.chart-box{
    height:280px;
    position:relative;
}
.chart-widget-list p{
    display:flex;
    justify-content:space-between;
    margin-bottom:5px;
}
.legend-scroll{
    max-height:120px;
    overflow:auto;
}
.loading-overlay{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.6);
    z-index:2000;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function(){

    const startEl  = document.getElementById('date_debut');
    const endEl    = document.getElementById('date_fin');
    const userEl   = document.getElementById('user_id');
    const chartsEl = document.getElementById('chartsWrapper');
    const overlay  = document.getElementById('loadingOverlay');

    const titleEl  = document.getElementById('dynamicTitle');

    let serialsDT  = null;

    // Date de début par défaut = 1er janvier de l'année en cours si vide
    if (!startEl.value) {
        const y = new Date().getFullYear();
        startEl.value = `${y}-01-01`;
    }

    function showLoading(on){
        overlay.style.display = on ? 'flex' : 'none';
    }

    function getGranularity(){
        const g = document.querySelector('input[name="granularity"]:checked');
        return g ? g.value : 'day';
    }

    function buildParams(){
        const p = [];
        if (userEl.value)  p.push('user_id='   + encodeURIComponent(userEl.value));
        if (startEl.value) p.push('date_debut='+ encodeURIComponent(startEl.value));
        if (endEl.value)   p.push('date_fin='  + encodeURIComponent(endEl.value));
        p.push('granularity=' + getGranularity());
        return '?' + p.join('&');
    }

    async function fetchStats(){
        const url = '{{ route('pages.dashboard.stats') }}' + buildParams();
        const res = await fetch(url, { headers:{ Accept:'application/json' }});
        if (!res.ok) throw new Error('HTTP ' + res.status);
        return res.json();
    }

    // --------------------- CHARTS ----------------------
    function destroyChart(id){
        const c = Chart.getChart(id);
        if (c) c.destroy();
    }

    function renderPie(id, labels, data){
        destroyChart(id);
        return new Chart(document.getElementById(id), {
            type: 'pie',
            data: {
                labels,
                datasets: [{
                    data,
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false
            }
        });
    }

    function renderLine(id, labels, data){
        destroyChart(id);
        return new Chart(document.getElementById(id), {
            type: 'line',
            data: {
                labels,
                datasets: [{
                    label: 'Ventes',
                    data,
                    borderWidth: 2,
                    fill: false,
                    tension: 0.3
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display:false } }
            }
        });
    }

    function updateTitle(){
        const start = startEl.value || 'début';
        const end   = endEl.value   || 'aujourd\'hui';

        let userName = 'tous les utilisateurs';
        if (userEl.value) {
            userName = userEl.options[userEl.selectedIndex].text;
        }

        titleEl.innerText = `Numéros de série de ${userName} entre le ${start} et le ${end}`;
    }

    // ------------------ DATATABLE SERVER-SIDE ----------------------
    function initSerialsDT(){
        if (serialsDT) return serialsDT;

        serialsDT = $('#serialsTable').DataTable({
            serverSide: true,
            processing: true,
            searching: true,        // ⛔ pas de recherche pour l’instant
            deferRender: true,
            pageLength: 10,
            lengthMenu: [10, 25, 50, 100],
            order: [[0, 'desc']],    // date desc
            ajax: {
                url: '{{ route('pages.dashboard.serialsData') }}',
                type: 'GET',
                data: function (d) {
                    d.user_id    = userEl.value;
                    d.date_debut = startEl.value;
                    d.date_fin   = endEl.value;
                }
            },
            language: {
                lengthMenu:   "Afficher _MENU_ enregistrements par page",
                zeroRecords:  "Aucun enregistrement trouvé",
                info:         "Affichage de _START_ à _END_ sur _TOTAL_ enregistrements",
                infoEmpty:    "Aucun enregistrement disponible",
                infoFiltered: "(filtré sur _MAX_ enregistrements)",
                paginate: {
                    first:    "Premier",
                    last:     "Dernier",
                    next:     "Suivant",
                    previous: "Précédent"
                }
            },
            columns: [
                { data: 'date' },
                { data: 'sn' },
                { data: 'model' },
                { data: 'state' },
                { data: 'history', orderable:false, searchable:false }
            ]
        });

        return serialsDT;
    }

    // --------------- REFRESH GLOBAL --------------------
    async function refreshAll(){
        showLoading(true);
        try {
            // 1) Stats pour les graphiques
            const json = await fetchStats();
            if (json.products) {
                renderPie('chartProducts', json.products.labels, json.products.data);
            }
            if (json.vendors) {
                renderPie('chartVendors', json.vendors.labels, json.vendors.data);
            }
            if (json.timeseries) {
                renderLine('chartTimeseries', json.timeseries.labels, json.timeseries.data);
            }

            chartsEl.style.display = 'block';

            // 2) DataTable server-side (juste reload avec les filtres)
            const dt = initSerialsDT();
            updateTitle();
            dt.ajax.reload(null, false); // ne pas reset la pagination

            document.getElementById('serialsAggWrapper').style.display = 'block';

        } catch(e) {
            console.error(e);
        } finally {
            showLoading(false);
        }
    }

    // ----------------- ÉVÉNEMENTS -----------------------
    document.getElementById('statsForm').addEventListener('submit', function(e){
        e.preventDefault();
        refreshAll();
    });

    document.getElementById('granularityControls').addEventListener('change', function(){
        refreshAll();
    });

    userEl.addEventListener('change', refreshAll);
    startEl.addEventListener('change', refreshAll);
    endEl.addEventListener('change', refreshAll);

    // Premier chargement
    refreshAll();
});
</script>

@endsection