{# templates/admin/dashboard.html.twig #}
{% extends '@EasyAdmin/page/content.html.twig' %}

{% block content_title %}Tableau de bord{% endblock %}

{% block main %}
<div class="row" style="margin-bottom: 2rem;">
    <div class="col-md-3">
        <div class="card text-white bg-primary">
            <div class="card-body">
                <h2>{{ total }}</h2>
                <p>Documents reçus</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-white bg-success">
            <div class="card-body">
                <h2>{{ imprimes }}</h2>
                <p>Imprimés</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-white bg-warning">
            <div class="card-body">
                <h2>{{ enAttente }}</h2>
                <p>En attente</p>
            </div>
        </div>
    </div>
    
</div>

<div class="row" style="margin-bottom: 2rem;">
    <div class="col-md-3"><div class="card"><div class="card-body">
        <h4>{{ (volumeTotal / 1024 / 1024)|round(1) }} Mo</h4>
        <p>Volume total stocké</p>
    </div></div></div>
    <div class="col-md-3"><div class="card"><div class="card-body">
        <h4>{{ totalCopies }}</h4>
        <p>Copies commandées au total</p>
    </div></div></div>
    <div class="col-md-3"><div class="card"><div class="card-body">
        <h4>{{ total > 0 ? ((imprimes / total) * 100)|round(0) : 0 }}%</h4>
        <p>Taux de traitement</p>
    </div></div></div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card"><div class="card-body">
            <h5>Documents reçus (aujourd'hui)</h5>
            <canvas id="chartParHeure" height="90"></canvas>
        </div></div>
    </div>
    <div class="col-md-4">
        <div class="card"><div class="card-body">
            <h5>Types d'impression enregistrés</h5>
            <canvas id="chartImpression"></canvas>
        </div></div>
    </div>
</div>

<div class="row" style="margin-top: 2rem;">
    <div class="col-md-6">
        <div class="card"><div class="card-body">
            <h5>Documents reçus (30 derniers jours)</h5>
            <canvas id="chartParJour" height="90"></canvas>
        </div></div>
    </div>
    <div class="col-md-6">
        <div class="card"><div class="card-body">
            <h5>Documents reçus (année en cours)</h5>
            <canvas id="chartParMois" height="90"></canvas>
        </div></div>
    </div>
</div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js"></script>
<script>
new Chart(document.getElementById('chartParJour'), {
    type: 'line',
    data: {
        labels: {{ parJour|map(r => r.jour)|json_encode|raw }},
        datasets: [{
            label: 'Documents',
            data: {{ parJour|map(r => r.total)|json_encode|raw }},
            borderColor: '#0d6efd',
            tension: 0,
        }]
    },
    options: {
        plugins: { legend: { display: false } },
        scales: {
            y: {
                ticks: {
                    precision: 0,
                    callback: function(value) {
                        return value.toLocaleString('fr-FR');
                    }
                }
            }
        }
    }
});

new Chart(document.getElementById('chartParHeure'), {
    type: 'bar',
    data: {
        labels: {{ parHeure|map(r => r.heure)|json_encode|raw }},
        datasets: [{
            label: 'Documents',
            data: {{ parHeure|map(r => r.total)|json_encode|raw }},
            backgroundColor: '#0d6efd',
            borderColor: '#0d6efd',
            borderWidth: 1,
        }]
    },
    options: {
        plugins: { legend: { display: false } },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    precision: 0,
                    callback: function(value) {
                        return value.toLocaleString('fr-FR');
                    }
                }
            }
        }
    }
});

new Chart(document.getElementById('chartParMois'), {
    type: 'line',
    data: {
        labels: {{ parMois|map(r => r.mois)|json_encode|raw }},
        datasets: [{
            label: 'Documents',
            data: {{ parMois|map(r => r.total)|json_encode|raw }},
            borderColor: '#0d6efd',
            tension: 0,
        }]
    },
    options: {
        plugins: { legend: { display: false } },
        scales: {
            y: {
                ticks: {
                    precision: 0,
                    callback: function(value) {
                        return value.toLocaleString('fr-FR');
                    }
                }
            }
        }
    }
});

new Chart(document.getElementById('chartImpression'), {
    type: 'doughnut',
    data: {
        labels: {{ statsImpression|map(r => {
            'impression_nb': 'N&B',
            'impression_couleur': 'Couleur',
            'impression_mixte': 'Mixte'
        }[r.statut] ?? r.statut)|json_encode|raw }},
        datasets: [{ 
            data: {{ statsImpression|map(r => r.total)|json_encode|raw }}, 
            backgroundColor: ['#6c757d', '#dc3545', '#ffc107'] 
        }]
    }
});

new Chart(document.getElementById('chartRectoVerso'), {
    type: 'pie',
    data: {
        labels: {{ repartitionRectoVerso|map(r => r.rectoVerso == 'recto' ? 'Recto' : 'Recto/Verso')|json_encode|raw }},
        datasets: [{ data: {{ repartitionRectoVerso|map(r => r.total)|json_encode|raw }}, backgroundColor: ['#198754', '#ffc107'] }]
    }
});

// Actualisation automatique du dashboard toutes les 15 minutes
setTimeout(() => {
    window.location.reload();
}, 15 * 60 * 1000);
</script>
{% endblock %}