@extends('layouts.entreprise_base')

@section('content')
<div class="p-6 bg-gray-100 min-h-screen ">
    <h1 class="text-2xl font-bold mb-6">Statistiques</h1>

    

    <!-- Graphique des candidatures par mois -->
    <div class="mt-8 bg-white p-6 rounded shadow">
        <h2 class="text-lg font-bold mb-4">Candidatures par mois</h2>
        <canvas id="candidaturesChart"></canvas>
    </div>
</div>

<!-- Script pour Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const ctx = document.getElementById('candidaturesChart').getContext('2d');

        // Récupérer les données depuis Laravel (passées en JSON)
        const candidaturesParMois = @json($candidaturesParMois);

        // Traduction des mois
        const moisLabels = {
            "1": "Janvier", "2": "Février", "3": "Mars", "4": "Avril", "5": "Mai", "6": "Juin",
            "7": "Juillet", "8": "Août", "9": "Septembre", "10": "Octobre", "11": "Novembre", "12": "Décembre"
        };

        // Extraire les mois et les valeurs
        const labels = Object.keys(candidaturesParMois).map(mois => moisLabels[mois]);
        const data = Object.values(candidaturesParMois);

        // Générer le graphique avec des indications claires
        new Chart(ctx, {
            type: 'bar', // Changer en "line" si tu préfères un graphique en courbes
            data: {
                labels: labels,
                datasets: [{
                    label: "Nombre de candidatures par mois",
                    data: data,
                    backgroundColor: "rgba(54, 162, 235, 0.6)", 
                    borderColor: "rgba(54, 162, 235, 1)", 
                    borderWidth: 2,
                    hoverBackgroundColor: "rgba(54, 162, 235, 0.9)"
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    },
                    tooltip: {
                        enabled: true,
                        callbacks: {
                            label: function (tooltipItem) {
                                return `${tooltipItem.raw} candidatures`;
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: "Nombre de candidatures"
                        },
                        ticks: {
                            stepSize: 1
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: "Mois"
                        }
                    }
                }
            }
        });
    });
</script>
@endsection