@extends('layouts.admin_base')

@section('content')

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 p-6">

    {{-- <!-- Carte Nombre de vues des offres d'emploi -->
    <div class="bg-white shadow-xl rounded-lg p-6 hover:scale-105 transition-all duration-300 flex flex-col justify-between">
        <div class="flex justify-between items-center">
            <div>
                <h4 class="text-lg font-semibold text-gray-700">Vues des offres</h4>
                <p class="text-4xl font-bold text-blue-600">{{ $totalViews }}</p>
            </div>
            <div class="bg-blue-100 p-4 rounded-full">
                <i class="fas fa-eye text-blue-600 text-3xl"></i>
            </div>
        </div>
        <a href="{{ route('offresAdmin.index') }}" class="text-blue-500 hover:underline mt-2 text-sm">Voir toutes les offres</a>
    </div> --}}
    
    <!-- Carte Candidats -->

    <div class="bg-white shadow-xl rounded-lg p-6 hover:scale-105 transition-all duration-300 flex flex-col justify-between">
        <div class="flex justify-between items-center">
            <div>
                <h4 class="text-lg font-semibold text-gray-700">Candidats</h4>
                <p class="text-4xl font-bold text-blue-600">{{ $candidatsTotal }}</p>
            </div>
            <div class="bg-blue-100 p-4 rounded-full">
                <i class="fas fa-users text-blue-600 text-3xl"></i>
            </div>
        </div>
        <a href="{{ route('admin.candidats') }}" class="text-blue-500 hover:underline mt-2 text-sm">Voir tous les candidats</a>
    </div>

    <!-- Carte Entreprises -->
    <div class="bg-white shadow-xl rounded-lg p-6 hover:scale-105 transition-all duration-300 flex flex-col justify-between">
        <div class="flex justify-between items-center">
            <div>
                <h4 class="text-lg font-semibold text-gray-700">Entreprises</h4>
                <p class="text-4xl font-bold text-green-600">{{ $entreprisesTotal }}</p>
            </div>
            <div class="bg-green-100 p-4 rounded-full">
                <i class="fas fa-building text-green-600 text-3xl"></i>
            </div>
        </div>
        <a href="{{ route('entreprises.index') }}" class="text-green-500 hover:underline mt-2 text-sm">Voir toutes les entreprises</a>
    </div>

    <!-- Carte Offres d'emploi -->
    <div class="bg-white shadow-xl rounded-lg p-6 hover:scale-105 transition-all duration-300 flex flex-col justify-between">
        <div class="flex justify-between items-center">
            <div>
                <h4 class="text-lg font-semibold text-gray-700">Offres d'emploi</h4>
                <p class="text-4xl font-bold text-orange-600">{{ $offresTotal }}</p>
            </div>
            <div class="bg-orange-100 p-4 rounded-full">
                <i class="fas fa-briefcase text-orange-600 text-3xl"></i>
            </div>
        </div>
        <a href="{{ route('offresAdmin.index') }}" class="text-orange-500 hover:underline mt-2 text-sm">Voir toutes les offres</a>
    </div>

    <!-- Carte Postulations -->
    <div class="bg-white shadow-xl rounded-lg p-6 hover:scale-105 transition-all duration-300 flex flex-col justify-between">
        <div class="flex justify-between items-center">
            <div>
                <h4 class="text-lg font-semibold text-gray-700">Postulations</h4>
                <p class="text-4xl font-bold text-purple-600">{{ $postulationsTotal }}</p>
            </div>
            <div class="bg-purple-100 p-4 rounded-full">
                <i class="fas fa-file-alt text-purple-600 text-3xl"></i>
            </div>
        </div>
        <a href="{{ route('postulations.index') }}" class="text-purple-500 hover:underline mt-2 text-sm">Voir toutes les postulations</a>
    </div>

</div>

<!-- Graphiques -->
<div class="p-6 bg-gray-100 rounded-lg shadow-md mt-6">
    <h3 class="text-xl font-semibold mb-4">Statistiques des Activités</h3>
    
    <div class="flex justify-between mb-4">
        <label for="yearSelector" class="mr-2 font-medium">Sélectionner l'année :</label>
        <select id="yearSelector" class="p-$ border rounded-lg bg-white">
            @foreach(array_keys($candidatsParMois) as $year)
                <option value="{{ $year }}">{{ $year }}</option>
            @endforeach
        </select>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
        <div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transform transition duration-300 hover:scale-105">
            <canvas id="chartCandidats"></canvas>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transform transition duration-300 hover:scale-105">
            <canvas id="chartEntreprises"></canvas>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transform transition duration-300 hover:scale-105">
            <canvas id="chartOffresEmplois"></canvas>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transform transition duration-300 hover:scale-105">
            <canvas id="chartPostulations"></canvas>
        </div>
    </div>
    
    
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const dataSets = {
            candidats: @json($candidatsParMois),
            entreprises: @json($entreprisesParMois),
            offresEmplois: @json($offresEParMois),
            postulations: @json($postulationsParMois),
        };

        const labels = ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sep', 'Oct', 'Nov', 'Déc'];
        const charts = {};
        const colors = {
            candidats: { bg: 'rgba(54, 162, 235, 0.2)', border: 'rgba(54, 162, 235, 1)' },
            entreprises: { bg: 'rgba(75, 192, 192, 0.2)', border: 'rgba(75, 192, 192, 1)' },
            offresEmplois: { bg: 'rgba(255, 159, 64, 0.2)', border: 'rgba(255, 159, 64, 1)' },
            postulations: { bg: 'rgba(153, 102, 255, 0.2)', border: 'rgba(153, 102, 255, 1)' },
        };

        function createChart(id, dataset, color) {
            const ctx = document.getElementById(id).getContext('2d');

            return new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: id.replace("chart", ""),
                        data: dataset,
                        backgroundColor: color.bg,
                        borderColor: color.border,
                        borderWidth: 2,
                        tension: 0.4, // Ajoute une courbe fluide
                        fill: true,
                        pointRadius: 5,
                        pointHoverRadius: 7,
                    }]
                },
                options: {
                    responsive: true,
                 //   maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: true,
                            position: 'top',
                            labels: {
                                color: '#333',
                                font: { size: 14, weight: 'bold' }
                            }
                        },
                        tooltip: {
                            backgroundColor: 'rgba(0, 0, 0, 0.7)',
                            titleFont: { size: 14, weight: 'bold' },
                            bodyFont: { size: 12 },
                            padding: 10,
                            cornerRadius: 5,
                        }
                    },
                    scales: {
                        x: {
                            ticks: { color: '#555', font: { size: 12 } },
                            grid: { color: 'rgba(200, 200, 200, 0.3)' }
                        },
                        y: {
                            beginAtZero: true,
                            ticks: { color: '#555', font: { size: 12 } },
                            grid: { color: 'rgba(200, 200, 200, 0.3)' }
                        }
                    },
                    animation: {
                        duration: 1000,
                        easing: 'easeOutQuart'
                    }
                }
            });
        }

        function updateCharts(year) {
            Object.keys(dataSets).forEach(key => {
                const data = dataSets[key][year] || Array(12).fill(0);
                charts[key].data.datasets[0].data = Object.values(data);
                charts[key].update();
            });
        }

        // Initialisation des graphiques
        Object.keys(dataSets).forEach(key => {
            charts[key] = createChart(
                `chart${key.charAt(0).toUpperCase() + key.slice(1)}`,
                Object.values(dataSets[key][new Date().getFullYear()] || Array(12).fill(0)),
                colors[key]
            );
        });

        // Gestion du changement d'année
        document.getElementById("yearSelector").addEventListener("change", function () {
            updateCharts(this.value);
        });
    });
</script>


@endsection