@extends('layouts.entreprise_base')

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

    <!-- Statistiques générales -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="p-4 bg-white rounded shadow">
            <h2 class="text-lg font-bold">Offres d'emplois Actives</h2>
            <p class="text-2xl font-semibold text-blue-600">{{ $offresActives }}</p>
            <a href="{{ route('offres.index') }}" class="text-blue-500 text-sm underline">Voir les offres</a>
        </div>

        <div class="p-4 bg-white rounded shadow">
            <h2 class="text-lg font-bold">Appels d'Offres</h2>
            <p class="text-2xl font-semibold text-blue-600">{{ $offresExpirees }}</p>
            <a href="{{ route('offres-appels.index') }}" class="text-blue-500 text-sm underline">Voir les appels d'offres</a>
        </div>

        <div class="p-4 bg-white rounded shadow">
            <h2 class="text-lg font-bold">Candidatures Reçues</h2>
            <p class="text-2xl font-semibold text-green-600">{{ $candidaturesRecues }}</p>
            <a href="" class="text-green-500 text-sm underline">Voir les candidatures</a>
        </div>
    </div>

    <!-- Section Graphiques -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
        
        <div class="bg-white p-6 rounded shadow">
            <h2 class="text-lg font-bold mb-4">Offres d'Emplois par Mois</h2>
            <canvas id="offreEmploiChart"></canvas>
        </div>

        <div class="bg-white p-6 rounded shadow">
            <h2 class="text-lg font-bold mb-4">Appels d'Offres par Mois</h2>
            <canvas id="appelOffreChart"></canvas>
        </div>

        <div class="bg-white p-6 rounded shadow">
            <h2 class="text-lg font-bold mb-4">Candidatures par Mois</h2>
            <canvas id="candidaturesChart"></canvas>
        </div>

    </div>
</div>

<!-- Script pour Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        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"
        };

        function createChart(canvasId, data, label, color) {
            const ctx = document.getElementById(canvasId).getContext('2d');
            const labels = Object.keys(moisLabels);
            const values = labels.map(mois => data[mois] || 0);

            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels.map(mois => moisLabels[mois]),
                    datasets: [{
                        label: label,
                        data: values,
                        backgroundColor: color + '99',
                        borderColor: color,
                        borderWidth: 2,
                        hoverBackgroundColor: color
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: { display: true, position: 'top' },
                        tooltip: {
                            callbacks: {
                                label: function (tooltipItem) {
                                    return `${tooltipItem.raw} ${label.toLowerCase()}`;
                                }
                            }
                        }
                    },
                    scales: {
                        y: { beginAtZero: true, title: { display: true, text: label }, ticks: { stepSize: 1 } },
                        x: { title: { display: true, text: "Mois" } }
                    }
                }
            });
        }

        // Génération des graphiques
        createChart('offreEmploiChart', @json($offreEmploiParMois), "Offres d'Emploi", "#36A2EB");
        createChart('appelOffreChart', @json($appelOffreParMois), "Appels d'Offres", "#36A2EB");
        createChart('candidaturesChart', @json($candidaturesParMois), "Candidatures", "#4BC0C0");
       
    });
</script>
@endsection