@extends('layouts.master')

@section('title')
    Tableau de bord
@endsection

@section('content')
    <!-- Page body -->
    <div class="page-body">
        <div class="container-xl">
            <div class="row row-deck row-cards">
                <div class="container-fluid">
                    <!-- En-tête du tableau de bord -->
                    <div class="row mb-4">
                        <div class="col-md-12">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="alert alert-dark" role="alert">
                                    Données: {{ $exercice->annee }}
                                </div>
                                <div class="btn-group">
                                    <button class="btn" onclick="refreshDashboard()">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-reload">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                            <path d="M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1 7.935 1.007 9.425 4.747" />
                                            <path d="M20 4v5h-5" />
                                        </svg> 
                                        Actualiser
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Alertes et notifications -->
                    @if(count($alertes) > 0)
                    <div class="row mb-4">
                        <div class="col-md-12">
                            <div class="card accordion border-warning" id="accordion-example">
                                <div class="accordion-item">
                                    <h2 class="accordion-header bg-warning text-white" id="heading-1">
                                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="false">
                                        <i class="fas fa-exclamation-triangle"></i>Alertes et notifications <span class="badge bg-dark">{{ count($alertes) }}</span>
                                    </button>
                                    </h2>
                                    <div id="collapse-1" class="accordion-collapse collapse" data-bs-parent="#accordion-example">
                                    <div class="accordion-body p-0">
                                        <div class="list-group list-group-flush">
                                            @foreach($alertes as $alerte)
                                            <a href="{{ $alerte['lien'] }}" class="list-group-item list-group-item-action list-group-item-{{ $alerte['type'] }}">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <span>{{ $alerte['message'] }}</span>
                                                    <i class="fas fa-chevron-right"></i>
                                                </div>
                                            </a>
                                            @endforeach
                                        </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif

                    <!-- Cartes de statistiques -->
                    <div class="row mb-4">

                        <!-- Budget -->
                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card bg-indigo-lt shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-indigo text-uppercase mb-1">
                                                Budget</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                                {{ number_format($stats['budget_utilise'], 0, ',', ' ') }} FCFA
                                            </div>
                                            <div class="mt-2 text-muted text-sm">
                                                sur {{ number_format($stats['budget_alloue'], 0, ',', ' ') }} FCFA
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-coins fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Opérateurs -->
                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card bg-red-lt shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-red text-uppercase mb-1">
                                                Opérateurs</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['total_operateurs'] }}</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-users fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Marchés -->
                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card bg-teal-lt shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-teal text-uppercase mb-1">
                                                Marchés</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['total_marches'] }}</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Factures -->
                        <div class="col-xl-3 col-md-6 mb-4">
                            <div class="card bg-azure-lt shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-azure text-uppercase mb-1">
                                                Factures</div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['total_factures'] }}</div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-file-invoice-dollar fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Graphiques et visualisations -->
                    <div class="row mb-4">
                        <!-- Graphique des factures par mois -->
                        <div class="col-md-12">
                            <div class="card shadow mb-4">
                                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                                    <h6 class="m-0 font-weight-bold text-primary text-uppercase">Évolution des factures par mois</h6>
                                </div>
                                <div class="card-body">
                                    <div class="chart-area">
                                        <canvas id="facturesChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Répartition des statuts et autres données -->
                    <div class="row">
                        <div class="col-xl-6 col-lg-6">
                            <div class="card shadow mb-4">
                                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                                    <h6 class="m-0 font-weight-bold text-primary text-uppercase">Répartition des marchés</h6>
                                </div>
                                <div class="card-body">
                                    <div class="chart-pie pt-4 pb-2">
                                        <canvas id="marchesChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Répartition des factures -->
                        <div class="col-xl-6 col-lg-6">
                            <div class="card shadow mb-4">
                                <div class="card-header py-3">
                                    <h6 class="m-0 font-weight-bold text-primary text-uppercase">Répartition des factures</h6>
                                </div>
                                <div class="card-body">
                                    <div class="chart-pie pt-4 pb-2">
                                        <canvas id="facturesStatutChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('styles')
<style>
    .card {
        border-radius: 0.35rem;
    }
    .chart-area {
        position: relative;
        height: 10rem;
    }
    .chart-pie {
        position: relative;
        height: 15rem;
    }
</style>
@endpush

@push('scripts')
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Fonction pour actualiser le tableau de bord
    function refreshDashboard() {
        window.location.reload();
    }

    // Fonction pour exporter le tableau de bord
    function exportDashboard() {
        // Implémentation de l'exportation (PDF, Excel, etc.)
        alert('Fonction d\'exportation à implémenter');
    }

    // Graphique des factures par mois
    document.addEventListener('DOMContentLoaded', function() {
        const facturesCtx = document.getElementById('facturesChart').getContext('2d');
        const facturesChart = new Chart(facturesCtx, {
            type: 'line',
            data: {
                labels: {!! json_encode($facturesParMois->pluck('mois')) !!},
                datasets: [{
                    label: 'Nombre de factures',
                    data: {!! json_encode($facturesParMois->pluck('count')) !!},
                    backgroundColor: 'rgba(78, 115, 223, 0.05)',
                    borderColor: 'rgba(78, 115, 223, 1)',
                    pointRadius: 3,
                    pointBackgroundColor: 'rgba(78, 115, 223, 1)',
                    pointBorderColor: 'rgba(78, 115, 223, 1)',
                    pointHoverRadius: 3,
                    pointHoverBackgroundColor: 'rgba(78, 115, 223, 1)',
                    pointHoverBorderColor: 'rgba(78, 115, 223, 1)',
                    pointHitRadius: 10,
                    pointBorderWidth: 2,
                    fill: true,
                }]
            },
            options: {
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            precision: 0
                        }
                    }
                }
            }
        });

        // Graphique de répartition des marchés
        const marchesCtx = document.getElementById('marchesChart').getContext('2d');
        const marchesChart = new Chart(marchesCtx, {
            type: 'doughnut',
            data: {
                labels: {!! json_encode(array_keys($repartitionMarches->toArray())) !!},
                datasets: [{
                    data: {!! json_encode(array_values($repartitionMarches->toArray())) !!},
                    backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b'],
                    hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf', '#dda20a', '#be2617'],
                    hoverBorderColor: 'rgba(234, 236, 244, 1)',
                }]
            },
            options: {
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });

        // Graphique de répartition des factures par statut
        const facturesStatutCtx = document.getElementById('facturesStatutChart').getContext('2d');
        const facturesStatutChart = new Chart(facturesStatutCtx, {
            type: 'pie',
            data: {
                labels: {!! json_encode(array_keys($repartitionFactures->toArray())) !!},
                datasets: [{
                    data: {!! json_encode(array_values($repartitionFactures->toArray())) !!},
                    backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc', '#f6c23e'],
                    hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf', '#dda20a'],
                    hoverBorderColor: 'rgba(234, 236, 244, 1)',
                }]
            },
            options: {
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });

        // Actualisation automatique toutes les 5 minutes
        setInterval(refreshDashboard, 300000);
    });
</script>
@endpush