@extends('layouts.dashboard')

@section('title', 'Analytics - Admin Sciences Afrique')
@section('page-title', 'Analytics')
@section('page-subtitle', 'Vue consolidée des indicateurs clés.')

@section('content')
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 mb-8">
    <x-stat-card 
        :value="$stats['total_users'] ?? 0" 
        label="Utilisateurs" 
        icon="fa-solid fa-users" 
        color="royal"
    />
    <x-stat-card 
        :value="$stats['total_faculties'] ?? 0" 
        label="Facultés" 
        icon="fa-solid fa-university" 
        color="blue"
    />
    <x-stat-card 
        :value="$stats['total_courses'] ?? 0" 
        label="Cours" 
        icon="fa-solid fa-book" 
        color="purple"
    />
    <x-stat-card 
        :value="$stats['total_enrollments'] ?? 0" 
        label="Inscriptions" 
        icon="fa-solid fa-graduation-cap" 
        color="green"
    />
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
        <h3 class="text-lg font-display font-bold text-gray-900 flex items-center gap-3 mb-6">
            <span class="w-2 h-6 bg-royal-blue rounded-full"></span>
            Inscriptions Mensuelles
        </h3>
        <div style="height: 300px;">
            <canvas id="enrollmentsChart"></canvas>
        </div>
    </div>
    
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
        <h3 class="text-lg font-display font-bold text-gray-900 flex items-center gap-3 mb-6">
            <span class="w-2 h-6 bg-purple-600 rounded-full"></span>
            Répartition par Faculté
        </h3>
        <div style="height: 300px;">
            <canvas id="facultiesChart"></canvas>
        </div>
    </div>
</div>

@push('scripts')
<script>
    const enrollmentsCtx = document.getElementById('enrollmentsChart').getContext('2d');
    new Chart(enrollmentsCtx, {
        type: 'bar',
        data: {
            labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin'],
            datasets: [{
                label: 'Inscriptions',
                data: [120, 150, 180, 165, 210, 245],
                backgroundColor: '#1e3a5f',
                borderRadius: 8
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { display: false } },
            scales: { y: { beginAtZero: true } }
        }
    });

    const facultiesCtx = document.getElementById('facultiesChart').getContext('2d');
    new Chart(facultiesCtx, {
        type: 'doughnut',
        data: {
            labels: ['Sciences', 'Lettres', 'Médecine', 'Droit', 'Économie'],
            datasets: [{
                data: [35, 25, 20, 12, 8],
                backgroundColor: ['#1e3a5f', '#2d4a6f', '#3d5a7f', '#4d6a8f', '#5d7a9f']
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { position: 'bottom' } }
        }
    });
</script>
@endpush
@endsection