@extends('admin.layout')
@section('title', 'Statistiques globales')

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5><i class="fas fa-chart-bar mr-2"></i>Statistiques globales</h5>
            </div>
            <div class="card-body">
                <!-- Cards statistiques -->
                <div class="row mb-4">
                    <div class="col-xl-3 col-md-6">
                        <div class="card bg-gradient-primary text-white">
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-uppercase mb-1">Total Rapports</div>
                                        <div class="h1 mb-0 font-weight-bold">{{ $stats['total_reports'] }}</div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="fas fa-file-alt fa-2x"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Aujourd'hui -->
                    <div class="col-xl-3 col-md-6">
                        <div class="card bg-gradient-success text-white">
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-uppercase mb-1">Aujourd'hui</div>
                                        <div class="h1 mb-0 font-weight-bold">{{ $stats['recent_activity']['today'] }}</div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="fas fa-calendar-day fa-2x"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Cette semaine -->
                    <div class="col-xl-3 col-md-6">
                        <div class="card bg-gradient-info text-white">
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-uppercase mb-1">Cette semaine</div>
                                        <div class="h1 mb-0 font-weight-bold">{{ $stats['recent_activity']['this_week'] }}</div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="fas fa-calendar-week fa-2x"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Ce mois -->
                    <div class="col-xl-3 col-md-6">
                        <div class="card bg-gradient-warning text-white">
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-uppercase mb-1">Ce mois</div>
                                        <div class="h1 mb-0 font-weight-bold">{{ $stats['recent_activity']['this_month'] }}</div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="fas fa-calendar-alt fa-2x"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <!-- Graphique d'évolution -->
                    <div class="col-xl-8 col-lg-7">
                        <div class="card shadow mb-4">
                            <div class="card-header py-3">
                                <h6 class="m-0 font-weight-bold text-primary">Évolution des rapports</h6>
                            </div>
                            <div class="card-body">
                                <canvas id="evolutionChart" style="height: 350px;"></canvas>
                            </div>
                        </div>
                    </div>

                    <!-- Graphique circulaire -->
                    <div class="col-xl-4 col-lg-5">
                        <div class="card shadow mb-4">
                            <div class="card-header py-3">
                                <h6 class="m-0 font-weight-bold text-primary">Répartition par type</h6>
                            </div>
                            <div class="card-body">
                                <canvas id="typeDonutChart" style="height: 350px;"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tableau des utilisateurs -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Rapports par utilisateur</h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered" id="userReportsTable" width="100%" cellspacing="0">
                                <thead class="bg-primary text-white">
                                    <tr>
                                        <th>Utilisateur</th>
                                        <th>Nombre de rapports</th>
                                        <th>Pourcentage</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($stats['reports_by_user'] as $user)
                                    <tr>
                                        <td>{{ $user->full_name }}</td>
                                        <td>{{ $user->count }}</td>
                                        <td>
                                            <div class="progress">
                                                <div class="progress-bar" role="progressbar" 
                                                     style="width: {{ ($user->count / $stats['total_reports']) * 100 }}%">
                                                    {{ number_format(($user->count / $stats['total_reports']) * 100, 1) }}%
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Graphique d'évolution
    const evolutionCtx = document.getElementById('evolutionChart').getContext('2d');
    new Chart(evolutionCtx, {
        type: 'line',
        data: {
            labels: @json($stats['daily_reports']->pluck('date')),
            datasets: [{
                label: 'Nombre de rapports',
                data: @json($stats['daily_reports']->pluck('count')),
                borderColor: '#D92332',
                backgroundColor: 'rgba(217, 35, 50, 0.1)',
                fill: true,
                tension: 0.4,
                pointRadius: 4,
                pointHoverRadius: 6
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                    labels: {
                        font: {
                            size: 12
                        }
                    }
                },
                tooltip: {
                    mode: 'index',
                    intersect: false,
                    callbacks: {
                        label: function(context) {
                            return 'Rapports: ' + context.parsed.y;
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1,
                        font: {
                            size: 12
                        }
                    },
                    grid: {
                        color: 'rgba(0, 0, 0, 0.1)'
                    }
                },
                x: {
                    ticks: {
                        maxRotation: 45,
                        minRotation: 45,
                        font: {
                            size: 11
                        }
                    },
                    grid: {
                        display: false
                    }
                }
            }
        }
    });

    // Graphique circulaire
    const donutCtx = document.getElementById('typeDonutChart').getContext('2d');
    new Chart(donutCtx, {
        type: 'doughnut',
        data: {
            labels: @json($stats['reports_by_type']->pluck('type')),
            datasets: [{
                data: @json($stats['reports_by_type']->pluck('count')),
                backgroundColor: [
                    '#D92332',
                    '#FFD700',
                    '#28a745',
                    '#17a2b8'
                ],
                borderWidth: 1,
                borderColor: '#ffffff'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: {
                        padding: 20,
                        font: {
                            size: 12
                        }
                    }
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const label = context.label || '';
                            const value = context.parsed || 0;
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const percentage = Math.round((value / total) * 100);
                            return `${label}: ${value} (${percentage}%)`;
                        }
                    }
                }
            },
            cutout: '70%'
        }
    });

    // DataTables configuration reste la même
    $('#userReportsTable').DataTable({
        pageLength: 10,
        order: [[1, "desc"]],
        language: {
            url: "//cdn.datatables.net/plug-ins/1.10.24/i18n/French.json"
        },
        dom: '<"d-flex justify-content-between align-items-center mb-4"<"d-flex align-items-center"l><"d-flex align-items-center"f>>rtip',
        buttons: [
            {
                extend: 'excel',
                className: 'btn btn-sm btn-success',
                text: '<i class="fas fa-file-excel"></i> Excel'
            },
            {
                extend: 'pdf',
                className: 'btn btn-sm btn-danger',
                text: '<i class="fas fa-file-pdf"></i> PDF'
            }
        ]
    });
});
</script>

<style>
.progress {
    height: 20px;
    border-radius: 10px;
}
.progress-bar {
    background-color: #D92332;
    transition: width 0.6s ease;
}
.card {
    border-radius: 15px;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}
.card-header {
    border-radius: 15px 15px 0 0;
}

/* Gradients pour les cards */
.bg-gradient-primary {
    background: linear-gradient(45deg, #4e73df 0%, #224abe 100%);
    border: none;
}

.bg-gradient-success {
    background: linear-gradient(45deg, #1cc88a 0%, #13855c 100%);
    border: none;
}

.bg-gradient-info {
    background: linear-gradient(45deg, #36b9cc 0%, #258391 100%);
    border: none;
}

.bg-gradient-warning {
    background: linear-gradient(45deg, #f6c23e 0%, #dda20a 100%);
    border: none;
}

/* Styles supplémentaires pour les cards */
.card.bg-gradient-primary,
.card.bg-gradient-success,
.card.bg-gradient-info,
.card.bg-gradient-warning {
    color: #fff;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}

.card .text-xs {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
}

.card .h1 {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
    padding: 0;
}

.card .fa-2x {
    opacity: 0.4;
}

/* Hover effects */
.card.bg-gradient-primary:hover,
.card.bg-gradient-success:hover,
.card.bg-gradient-info:hover,
.card.bg-gradient-warning:hover {
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .card .h1 {
        font-size: 1.5rem;
    }
    .card .fa-2x {
        font-size: 1.5em;
    }
}
</style>

@endsection