@extends('admin.layout')
@section('title', 'Mes statistiques')

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5><i class="fas fa-user-chart mr-2"></i>Mes statistiques</h5>
            </div>
            <div class="card-body">
                <!-- Informations utilisateur -->
                <div class="row mb-4">
                    <div class="col-md-12">
                        <div class="alert alert-info">
                            <h6>Informations utilisateur</h6>
                            <p>
                                <strong>Nom:</strong> {{ $stats['user_info']['nom'] }} {{ $stats['user_info']['prenom'] }}<br>
                                <strong>Email:</strong> {{ $stats['user_info']['email'] }}
                            </p>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <!-- Total des rapports -->
                    <div class="col-md-4">
                        <div class="card bg-success text-white">
                            <div class="card-body">
                                <h5 class="card-title">Mes rapports</h5>
                                <h2>{{ $stats['total_reports'] }}</h2>
                            </div>
                        </div>
                    </div>

                    <!-- Rapports par type -->
                    <div class="col-md-8">
                        <div class="card">
                            <div class="card-header">
                                <h6>Mes rapports par type</h6>
                            </div>
                            <div class="card-body">
                                <canvas id="typeChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Graphique d'activité -->
                <div class="row mt-4">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h6>Mon activité (30 derniers jours)</h6>
                            </div>
                            <div class="card-body">
                                <canvas id="activityChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Graphique des types de rapport
    const typeData = @json($stats['reports_by_type']);
    new Chart(document.getElementById('typeChart'), {
        type: 'pie',
        data: {
            labels: typeData.map(item => item.type),
            datasets: [{
                data: typeData.map(item => item.count),
                backgroundColor: [
                    '#D92332',
                    '#FFD700',
                    '#28a745',
                    '#17a2b8'
                ]
            }]
        }
    });

    // Graphique d'activité
    const activityData = @json($stats['daily_reports']);
    new Chart(document.getElementById('activityChart'), {
        type: 'line',
        data: {
            labels: activityData.map(item => item.date),
            datasets: [{
                label: 'Rapports générés',
                data: activityData.map(item => item.count),
                borderColor: '#D92332',
                backgroundColor: 'rgba(217, 35, 50, 0.1)',
                fill: true
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            }
        }
    });
});
</script>
@endpush

@endsection