@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 d-flex justify-content-between align-items-center">
                <h5><i class="fas fa-chart-bar mr-2"></i>Statistiques globales</h5>
                <a href="{{ route('reports.statistics.pdf') }}?{{ http_build_query(request()->query()) }}" 
                   class="btn btn-light">
                    <i class="fas fa-file-pdf mr-2"></i>Exporter PDF
                </a>
            </div>
            <div class="card-body">
                <!-- Formulaire de filtrage -->
                <form action="{{ route('reports.statistics') }}" method="GET" class="mb-4">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="start_date">Date de début</label>
                                <input type="date" class="form-control" id="start_date" name="start_date" 
                                       value="{{ request('start_date', now()->subDays(30)->format('Y-m-d')) }}">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="end_date">Date de fin</label>
                                <input type="date" class="form-control" id="end_date" name="end_date" 
                                       value="{{ request('end_date', now()->format('Y-m-d')) }}">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="user_id">Utilisateur</label>
                                <select class="form-control" id="user_id" name="user_id">
                                    <option value="all">Tous les utilisateurs</option>
                                    @foreach($stats['filters']['users'] as $user)
                                        <option value="{{ $user->id }}" 
                                            {{ request('user_id') == $user->id ? 'selected' : '' }}>
                                            {{ $user->full_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="fas fa-filter mr-2"></i>Filtrer
                            </button>
                        </div>
                    </div>
                </form>

                <!-- En-tête d'impression -->
                <div class="d-none d-print-block mb-4">
                    <h4 class="text-center mb-3">Rapport Statistique</h4>
                    <div class="row">
                        <div class="col-6">
                            <p><strong>Période:</strong> {{ \Carbon\Carbon::parse($stats['filters']['start_date'])->format('d/m/Y') }} - {{ \Carbon\Carbon::parse($stats['filters']['end_date'])->format('d/m/Y') }}</p>
                        </div>
                        <div class="col-6 text-right">
                            <p><strong>Date d'impression:</strong> {{ now()->format('d/m/Y H:i') }}</p>
                        </div>
                    </div>
                    <hr>
                </div>

                <!-- 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>

<!-- Styles d'impression -->
<style media="print">
    @page {
        size: A4;
        margin: 2cm;
    }

    body {
        padding: 0;
        margin: 0;
    }

    .no-print {
        display: none !important;
    }

    .d-print-block {
        display: block !important;
    }

    .card {
        border: none !important;
        box-shadow: none !important;
    }

    .card-header {
        background-color: #fff !important;
        color: #000 !important;
        border-bottom: 2px solid #000;
        padding: 15px 0;
    }

    .table {
        width: 100% !important;
        border-collapse: collapse !important;
        margin-bottom: 20px !important;
    }

    .table th,
    .table td {
        border: 1px solid #000 !important;
        padding: 8px !important;
        background-color: #fff !important;
        color: #000 !important;
    }

    .table th {
        background-color: #f8f9fa !important;
    }

    .progress {
        border: 1px solid #000;
        background-color: #fff !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .progress-bar {
        background-color: #666 !important;
        color: #000 !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    canvas {
        max-width: 100% !important;
        height: auto !important;
        page-break-inside: avoid;
    }

    .row {
        display: flex;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
    }

    .col-md-6,
    .col-xl-3,
    .col-md-4,
    .col-xl-8,
    .col-lg-7,
    .col-xl-4,
    .col-lg-5 {
        position: relative;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }

    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .text-right {
        text-align: right !important;
    }

    .mb-4 {
        margin-bottom: 1.5rem !important;
    }

    .mb-3 {
        margin-bottom: 1rem !important;
    }

    hr {
        border-top: 1px solid #000;
        margin: 1rem 0;
    }

    /* Ajustements pour les graphiques */
    #evolutionChart,
    #typeDonutChart {
        margin-bottom: 20px;
        page-break-inside: avoid;
    }

    /* Style pour les cartes statistiques en impression */
    .card.bg-gradient-primary,
    .card.bg-gradient-success,
    .card.bg-gradient-info,
    .card.bg-gradient-warning {
        background: none !important;
        border: 1px solid #000 !important;
        margin-bottom: 15px;
    }

    .card.bg-gradient-primary .text-white,
    .card.bg-gradient-success .text-white,
    .card.bg-gradient-info .text-white,
    .card.bg-gradient-warning .text-white {
        color: #000 !important;
    }

    /* Éviter les sauts de page inappropriés */
    .card,
    .table-responsive {
        page-break-inside: avoid;
    }
}
</style>

@endsection