@extends('layouts.app')

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

    {{-- FILTRES --}}
    <form id="statsForm" class="mb-4">
        <div class="form-row align-items-end">

            <div class="col-md-3">
                <label>Utilisateur</label>
                <select id="user_id" class="form-control">
                    <option value="">Tous</option>
                    @foreach($allUsers as $u)
                        <option value="{{ $u->id }}">{{ $u->user_name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-3">
                <label>Date début</label>
                <input type="date" id="date_debut" class="form-control">
            </div>

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

            <div class="col-md-3">
                <button class="btn btn-primary btn-block" type="submit">Actualiser</button>
            </div>

        </div>
    </form>

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

            <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>
                </div>
            </div>

            <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>
                </div>
            </div>

            <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>
                </div>
            </div>

        </div>
    </div>

    {{-- TABLEAU --}}
    <div id="serialsAggWrapper" class="mt-4" style="display:none;">
        <h4 id="dynamicTitle" class="mt-3 mb-3 text-primary"></h4>

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

        {{-- Actions groupées --}}
        <div id="massActions" class="mt-3" style="display:none;">
            <button class="btn btn-warning">Changer d'utilisateur (groupe)</button>
            <button class="btn btn-secondary">Remplacer appareil (groupe)</button>
            <button class="btn btn-danger">Envoyer en réparation (groupe)</button>
        </div>
    </div>

</div>
@endsection


{{-- ============================ --}}
{{--         OVERLAY LOADER       --}}
{{-- ============================ --}}
<div id="loaderOverlay">
    <div class="loaderBox">
        <div class="spinner-border text-light" style="width: 4rem; height: 4rem;"></div>
        <p class="mt-3 text-light">Chargement…</p>
    </div>
</div>


{{-- ============================ --}}
{{--            SCRIPTS           --}}
{{-- ============================ --}}
@push('scripts')
<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;}

#loaderOverlay {
    display:none;
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    background:rgba(0,0,0,0.65);
    z-index:99999;
    justify-content:center;
    align-items:center;
}
.loaderBox { text-align:center; }
</style>

<script>
let allData = [];
let table;

async function loadLocalData() {
    const res = await fetch('/data/list_sn.json');
    return await res.json();
}

document.addEventListener('DOMContentLoaded', async () => {

    // date début = 1er janvier
    const y = new Date().getFullYear();
    document.getElementById("date_debut").value = `${y}-01-01`;

    allData = await loadLocalData();

    // DataTable local simple
    table = $('#serialsTable').DataTable({
        pageLength: 10,
        data: [],
        columns: [
            { 
                data: null,
                orderable: false,
                render: r => `<input type="checkbox" class="row-check" data-sn="${r.sn}">`
            },
            { data: 'date' },
            { data: 'sn' },
            { data: 'modele' },
            { data: 'state' },
            {
                data: null,
                render: r => `<a href="/serials/history/${r.sn}" class="btn btn-info btn-sm" target="_blank">Historique</a>`
            }
        ]
    });

    $('#checkAll').on('click', function(){
        $('.row-check').prop('checked', $(this).is(':checked'));
    });

    refreshAll();

    document.getElementById("statsForm").addEventListener("submit", e => {
        e.preventDefault();
        refreshAll();
    });
});

function startLoader(){ document.getElementById("loaderOverlay").style.display = "flex"; }
function stopLoader(){ document.getElementById("loaderOverlay").style.display = "none"; }

function refreshAll()
{
    startLoader();

    setTimeout(() => {

        const user = document.getElementById('user_id').value;
        const start = document.getElementById('date_debut').value;
        const end = document.getElementById('date_fin').value;

        const filtered = allData.filter(r => {
            if (user && r.id_user != user) return false;
            if (start && r.date < start) return false;
            if (end && r.date > end) return false;
            return true;
        });

        updateTable(filtered);
        updateCharts(filtered);
        updateTitle();

        stopLoader();

    }, 120);
}

function updateTitle() {
    const u = document.getElementById('user_id');
    const start = document.getElementById('date_debut').value;
    const end = document.getElementById('date_fin').value;
    const name = u.value ? u.options[u.selectedIndex].text : "tous les utilisateurs";

    document.getElementById("dynamicTitle").innerText =
        `Numéros de série de ${name} entre le ${start} et le ${end}`;
}

function updateTable(rows){
    table.clear().rows.add(rows).draw();
    document.getElementById('chartsWrapper').style.display = 'block';
    document.getElementById('serialsAggWrapper').style.display = 'block';
    document.getElementById('massActions').style.display = rows.length > 1 ? 'block' : 'none';
}

function updateCharts(rows){
    const byModel = {}, byUser = {}, byDate = {};

    rows.forEach(r => {
        byModel[r.modele] = (byModel[r.modele] || 0) + 1;
        byUser[r.user_name] = (byUser[r.user_name] || 0) + 1;
        byDate[r.date] = (byDate[r.date] || 0) + 1;
    });

    const top10Models = Object.entries(byModel).sort((a,b)=>b[1]-a[1]).slice(0,10);
    const top10Users = Object.entries(byUser).sort((a,b)=>b[1]-a[1]).slice(0,10);

    drawPie("chartProducts", top10Models.map(x=>x[0]), top10Models.map(x=>x[1]));
    drawPie("chartVendors", top10Users.map(x=>x[0]), top10Users.map(x=>x[1]));
    drawLine("chartTimeseries", Object.keys(byDate), Object.values(byDate));
}

function drawPie(id, labels, values){
    const old = Chart.getChart(id); if(old) old.destroy();
    new Chart(document.getElementById(id), {
        type:'pie',
        data:{labels, datasets:[{data:values}]}
    });
}

function drawLine(id, labels, values){
    const old = Chart.getChart(id); if(old) old.destroy();
    new Chart(document.getElementById(id), {
        type:'line',
        data:{labels, datasets:[{data:values, label:'Ventes'}]}
    });
}
</script>
@endpush