@extends('dashboard.layouts.app')

@section('title', 'Tableau de Bord - UAC eservices')

@section('page-title', 'Tableau de Bord')

@section('breadcrumb')

@endsection

@section('content')
<!-- -------------------------------------------------------------- -->
<!-- Start Page Content -->
<!-- -------------------------------------------------------------- -->

<!-- En-tête de bienvenue -->
<div class="row">
    <div class="col-lg-8 col-md-12">
        <div class="card card-hover">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start">
                    <div class="flex-grow-1">
                        <h2 class="font-light text-info mb-1">{{ Auth::user()->name }}</h2>
                        <h6 class="text-muted">{{ Auth::user()->role->nom }}</h6>
                        <div class="mt-3">
                            <h6 class="text-muted">Bienvenue dans UAC eservices</h6>
                            <h4 class="mt-2">Tableau de Bord Administratif - Vue d'ensemble</h4>
                            <p class="text-muted">Surveillez les performances et l'activité de votre administration</p>
                        </div>
                    </div>
                    {{-- <div class="text-end">
                        <div class="mb-3">
                            <small class="text-muted d-block">Dernière mise à jour</small>
                            <span id="last-update" class="text-info font-medium">{{ now()->format('H:i:s') }}</span>
                        </div>
                        <button id="refresh-btn" class="btn btn-info btn-sm" onclick="refreshDashboard()">
                            <i class="mdi mdi-refresh"></i> Actualiser
                        </button>
                    </div> --}}
                </div>
            </div>
        </div>
    </div>

    <!-- Métriques clés -->
    <div class="col-lg-4 col-md-12">
        <div class="row">
            <!-- Courriers en retard -->
            <div class="col-12">
                <div class="card border-left-danger">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="me-3">
                                <i class="mdi mdi-email-alert text-danger display-6"></i>
                            </div>
                            <div class="flex-grow-1">
                                <h5 class="mb-0">{{ $courrierMetrics['en_retard'] ?? 0 }}</h5>
                                <small class="text-muted">Courriers en retard</small>
                            </div>
                            <div class="text-end">
                                @if(($courrierMetrics['en_retard'] ?? 0) > 0)
                                    <span class="badge bg-danger">Urgent</span>
                                @else
                                    <span class="badge bg-success">OK</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contrats expirant bientôt -->
            <div class="col-12">
                <div class="card border-left-warning">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="me-3">
                                <i class="mdi mdi-file-document-alert text-warning display-6"></i>
                            </div>
                            <div class="flex-grow-1">
                                <h5 class="mb-0">{{ $contratMetrics['expirant_bientot'] ?? 0 }}</h5>
                                <small class="text-muted">Contrats à renouveler</small>
                            </div>
                            <div class="text-end">
                                @if(($contratMetrics['expirant_bientot'] ?? 0) > 0)
                                    <span class="badge bg-warning">Attention</span>
                                @else
                                    <span class="badge bg-success">OK</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Métriques principales en cartes -->
<div class="row">
    <!-- Courriers -->
    <div class="col-lg-3 col-md-6">
        <div class="card metric-card counter-animation">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="me-3">
                        <i class="mdi mdi-email-multiple text-primary display-6"></i>
                    </div>
                    <div class="flex-grow-1">
                        <h3 class="mb-1">{{ $courrierMetrics['total'] ?? 0 }}</h3>
                        <p class="text-muted mb-0 small">Total Courriers</p>
                    </div>
                </div>
                <div class="mt-3">
                    <div class="d-flex justify-content-between">
                        <small class="text-success"><i class="mdi mdi-check-circle-outline"></i> {{ $courrierMetrics['traites'] ?? 0 }} traités</small>
                        <small class="text-danger"><i class="mdi mdi-alert-circle"></i> {{ $courrierMetrics['en_retard'] ?? 0 }} en retard</small>
                    </div>
                    <div class="progress mt-2">
                        @php
                            $courrierProgress = ($courrierMetrics['total'] ?? 0) > 0 ?
                                (($courrierMetrics['traites'] ?? 0) / ($courrierMetrics['total'] ?? 0)) * 100 : 0;
                        @endphp
                        <div class="progress-bar bg-primary" style="width: {{ $courrierProgress }}%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Activités PTA -->
    <div class="col-lg-3 col-md-6">
        <div class="card metric-card counter-animation">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="me-3">
                        <i class="mdi mdi-clipboard-text text-success display-6"></i>
                    </div>
                    <div class="flex-grow-1">
                        <h3 class="mb-1">{{ $ptaMetrics['total'] ?? 0 }}</h3>
                        <p class="text-muted mb-0 small">Activités PTA</p>
                    </div>
                </div>
                <div class="mt-3">
                    <div class="d-flex justify-content-between">
                        <small class="text-info"><i class="mdi mdi-check-all"></i> {{ $ptaMetrics['terminees'] ?? 0 }} terminées</small>
                        <small class="text-danger"><i class="mdi mdi-clock-alert"></i> {{ $ptaMetrics['en_retard'] ?? 0 }} en retard</small>
                    </div>
                    <div class="progress mt-2">
                        @php
                            $ptaProgress = ($ptaMetrics['total'] ?? 0) > 0 ?
                                (($ptaMetrics['terminees'] ?? 0) / ($ptaMetrics['total'] ?? 0)) * 100 : 0;
                        @endphp
                        <div class="progress-bar bg-success" style="width: {{ $ptaProgress }}%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tâches -->
    <div class="col-lg-3 col-md-6">
        <div class="card metric-card counter-animation">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="me-3">
                        <i class="mdi mdi-check-circle text-warning display-6"></i>
                    </div>
                    <div class="flex-grow-1">
                        <h3 class="mb-1">{{ $tacheMetrics['total'] ?? 0 }}</h3>
                        <p class="text-muted mb-0 small">Tâches</p>
                    </div>
                </div>
                <div class="mt-3">
                    <div class="d-flex justify-content-between">
                        <small class="text-success"><i class="mdi mdi-check-circle-outline"></i> {{ $tacheMetrics['terminees'] ?? 0 }} terminées</small>
                        <small class="text-danger"><i class="mdi mdi-alert-circle"></i> {{ $tacheMetrics['en_retard'] ?? 0 }} en retard</small>
                    </div>
                    <div class="progress mt-2">
                        @php
                            $tacheProgress = ($tacheMetrics['total'] ?? 0) > 0 ?
                                (($tacheMetrics['terminees'] ?? 0) / ($tacheMetrics['total'] ?? 0)) * 100 : 0;
                        @endphp
                        <div class="progress-bar bg-warning" style="width: {{ $tacheProgress }}%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Marchés Publics -->
    <div class="col-lg-3 col-md-6">
        <div class="card metric-card counter-animation">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="me-3">
                        <i class="mdi mdi-gavel text-info display-6"></i>
                    </div>
                    <div class="flex-grow-1">
                        <h3 class="mb-1">{{ $marchePublicMetrics['total'] ?? 0 }}</h3>
                        <p class="text-muted mb-0 small">Marchés Publics</p>
                    </div>
                </div>
                <div class="mt-3">
                    <div class="d-flex justify-content-between">
                        <small class="text-success"><i class="mdi mdi-trending-up"></i> {{ $marchePublicMetrics['niveau_execution_moyen'] ?? 0 }}% exécution</small>
                        <small class="text-danger"><i class="mdi mdi-alert-circle"></i> {{ $marchePublicMetrics['marches_en_retard'] ?? 0 }} en retard</small>
                    </div>
                    <div class="progress mt-2">
                        <div class="progress-bar bg-info" style="width: {{ $marchePublicMetrics['niveau_execution_moyen'] ?? 0 }}%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Graphiques et détails -->
<div class="row">
    <!-- Graphique des statuts PTA -->
    <div class="col-lg-6 col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="card-title mb-0">Répartition des Activités PTA</h5>
                    <div class="chart-legend">
                        <small class="text-muted">Mise à jour: <span id="pta-chart-time">{{ now()->format('H:i') }}</span></small>
                    </div>
                </div>
                <div class="chart-container" style="position: relative; height: 220px;">
                    <canvas id="ptaStatusChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Graphique des niveaux d'exécution -->
    <div class="col-lg-6 col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="card-title mb-0">Niveaux d'Exécution des Marchés</h5>
                    <div class="chart-legend">
                        <small class="text-muted">Mise à jour: <span id="execution-chart-time">{{ now()->format('H:i') }}</span></small>
                    </div>
                </div>
                <div class="chart-container" style="position: relative; height: 220px;">
                    <canvas id="executionLevelChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Éléments critiques -->
<div class="row">
    <!-- Courriers en retard détaillés -->
    <div class="col-lg-6 col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <h4 class="card-title">Courriers en Retard</h4>
                    @if(($courrierMetrics['en_retard'] ?? 0) > 0)
                        <span class="badge bg-danger">{{ $courrierMetrics['en_retard'] }} éléments</span>
                    @else
                        <span class="badge bg-success">Aucun retard</span>
                    @endif
                </div>
                <div class="mt-3">
                    @if(($courrierMetrics['en_retard'] ?? 0) > 0)
                        <div class="alert alert-danger">
                            <i class="mdi mdi-alert-circle"></i>
                            {{ $courrierMetrics['en_retard'] }} courriers nécessitent une attention immédiate
                        </div>
                    @else
                        <div class="alert alert-success">
                            <i class="mdi mdi-check-circle"></i>
                            Tous les courriers sont dans les délais
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Contrats expirants -->
    <div class="col-lg-6 col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <h4 class="card-title">Contrats à Renouveler</h4>
                    @if(($contratMetrics['expirant_bientot'] ?? 0) > 0)
                        <span class="badge bg-warning">{{ $contratMetrics['expirant_bientot'] }} contrats</span>
                    @else
                        <span class="badge bg-success">Aucun renouvellement</span>
                    @endif
                </div>
                <div class="mt-3">
                    @if(($contratMetrics['expirant_bientot'] ?? 0) > 0)
                        <div class="alert alert-warning">
                            <i class="mdi mdi-calendar-clock"></i>
                            {{ $contratMetrics['expirant_bientot'] }} contrats expirent dans les 30 prochains jours
                        </div>
                    @else
                        <div class="alert alert-success">
                            <i class="mdi mdi-check-circle"></i>
                            Aucun contrat à renouveler prochainement
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Actions rapides -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Actions Rapides</h4>
                <div class="row mt-4">
                    <div class="col-md-3">
                        <a href="{{ route('pta.plans.create') }}" class="btn btn-info btn-block">
                            <i class="mdi mdi-plus"></i>
                            Nouvelle activité PTA
                        </a>
                    </div>
                    <div class="col-md-3">
                        <a href="{{ route('courrier.create') }}" class="btn btn-success btn-block">
                            <i class="mdi mdi-email-plus"></i>
                            Nouveau courrier
                        </a>
                    </div>
                    <div class="col-md-3">
                        <a href="{{ route('surveys.create') }}" class="btn btn-warning btn-block">
                            <i class="mdi mdi-poll"></i>
                            Créer un sondage
                        </a>
                    </div>
                    <div class="col-md-3">
                        <a href="{{ route('gestion.marches-publics.create') }}" class="btn btn-primary btn-block">
                            <i class="mdi mdi-gavel"></i>
                            Nouveau marché
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- -------------------------------------------------------------- -->
<!-- End Page Content -->
<!-- -------------------------------------------------------------- -->
@endsection

@push('styles')
<style>
.chart-container {
    position: relative;
    margin: auto;
}

.chart-legend {
    font-size: 0.75rem;
}

.card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #495057;
}

.progress {
    height: 6px;
    background-color: #e9ecef;
    border-radius: 3px;
}

.progress-bar {
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Animation pour les compteurs */
.counter-animation {
    transition: all 0.3s ease;
}

.counter-animation:hover {
    transform: translateY(-2px);
}

/* Style pour les métriques principales */
.metric-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Indicateurs d'état */
.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.status-critical { background-color: #dc3545; }
.status-warning { background-color: #ffc107; }
.status-good { background-color: #28a745; }
.status-info { background-color: #17a2b8; }

/* Responsive chart adjustments */
@media (max-width: 768px) {
    .chart-container {
        height: 180px !important;
    }

    .card-title {
        font-size: 1rem;
    }
}
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Données pour les graphiques
    const ptaStatusData = @json($chartData['pta_status'] ?? []);
    const executionLevelData = @json($chartData['execution_levels'] ?? []);

    // Graphique des statuts PTA - Design compact
    const ptaCtx = document.getElementById('ptaStatusChart').getContext('2d');
    new Chart(ptaCtx, {
        type: 'doughnut',
        data: {
            labels: Object.keys(ptaStatusData),
            datasets: [{
                data: Object.values(ptaStatusData),
                backgroundColor: [
                    '#007bff',
                    '#28a745',
                    '#ffc107',
                    '#dc3545',
                    '#6f42c1',
                    '#e83e8c',
                    '#fd7e14'
                ],
                borderWidth: 0,
                cutout: '70%'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: {
                        padding: 15,
                        usePointStyle: true,
                        font: {
                            size: 11
                        }
                    }
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const percentage = Math.round((context.parsed * 100) / total);
                            return context.label + ': ' + context.parsed + ' (' + percentage + '%)';
                        }
                    }
                }
            }
        }
    });

    // Graphique des niveaux d'exécution - Design compact
    const executionCtx = document.getElementById('executionLevelChart').getContext('2d');
    new Chart(executionCtx, {
        type: 'bar',
        data: {
            labels: Object.keys(executionLevelData),
            datasets: [{
                label: 'Marchés',
                data: Object.values(executionLevelData),
                backgroundColor: [
                    '#dc3545',
                    '#ffc107',
                    '#28a745',
                    '#007bff'
                ],
                borderRadius: 4,
                borderSkipped: false,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        display: false
                    },
                    ticks: {
                        font: {
                            size: 10
                        },
                        color: '#6c757d'
                    }
                },
                x: {
                    grid: {
                        display: false
                    },
                    ticks: {
                        font: {
                            size: 10
                        },
                        color: '#6c757d'
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    backgroundColor: '#495057',
                    titleColor: '#fff',
                    bodyColor: '#fff',
                    borderColor: '#6c757d',
                    borderWidth: 1,
                    cornerRadius: 6,
                    displayColors: false,
                    callbacks: {
                        label: function(context) {
                            return 'Marchés: ' + context.parsed.y;
                        }
                    }
                }
            }
        }
    });

    // Fonction de rafraîchissement du dashboard
    function refreshDashboard() {
        const refreshBtn = document.getElementById('refresh-btn');
        const lastUpdate = document.getElementById('last-update');

        // Désactive le bouton pendant le chargement
        refreshBtn.disabled = true;
        refreshBtn.innerHTML = '<i class="mdi mdi-loading mdi-spin"></i> Actualisation...';

        fetch('{{ route("dashboard.refresh-metrics") }}')
            .then(response => response.json())
            .then(data => {
                // Mettre à jour l'heure de dernière actualisation
                lastUpdate.textContent = new Date().toLocaleTimeString();

                // Mettre à jour les compteurs si nécessaire
                updateCounters(data);

                // Réactiver le bouton
                refreshBtn.disabled = false;
                refreshBtn.innerHTML = '<i class="mdi mdi-refresh"></i> Actualiser';
            })
            .catch(error => {
                console.error('Erreur lors de l\'actualisation:', error);
                refreshBtn.disabled = false;
                refreshBtn.innerHTML = '<i class="mdi mdi-refresh"></i> Actualiser';
            });
    }

    // Fonction pour mettre à jour les compteurs
    function updateCounters(data) {
        console.log('Nouvelles données reçues:', data);
    }

    // Actualisation automatique toutes les 5 minutes
    setInterval(refreshDashboard, 300000);

    // Initialisation des tooltips si Bootstrap est disponible
    document.addEventListener('DOMContentLoaded', function() {
        // Ajouter des tooltips informatifs
        const cards = document.querySelectorAll('.card');
        cards.forEach(card => {
            card.style.cursor = 'default';
        });

        // Animation d'entrée pour les métriques
        const metricCards = document.querySelectorAll('.card-body');
        metricCards.forEach((card, index) => {
            card.style.opacity = '0';
            card.style.transform = 'translateY(20px)';
            card.style.transition = 'all 0.3s ease';

            setTimeout(() => {
                card.style.opacity = '1';
                card.style.transform = 'translateY(0)';
            }, index * 100);
        });
    });
</script>
@endpush