@extends('dashboard.layouts.app')

@section('title', 'Mes Statistiques - ' . Auth::user()->name . ' - UAC eservices')

@section('page-title', 'Mes Statistiques')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Tableau de Bord</a></li>
    <li class="breadcrumb-item active" aria-current="page">Mes Statistiques</li>
@endsection

@push('styles')
<link rel="stylesheet" href="{{ asset('template/src/assets/libs/apexcharts/dist/apexcharts.css') }}">
@endpush

@push('scripts')
<script src="{{ asset('template/src/assets/libs/apexcharts/dist/apexcharts.min.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Graphique de présence
    const presenceData = @json($presenceStats);
    const presenceChart = new ApexCharts(document.querySelector("#presence-chart"), {
        chart: { type: 'donut', height: 250 },
        series: [presenceData.presents, presenceData.absents, presenceData.retards],
        labels: ['Présent', 'Absent', 'Retard'],
        colors: ['#28a745', '#dc3545', '#ffc107'],
        legend: { position: 'bottom' },
        plotOptions: {
            pie: {
                donut: {
                    labels: {
                        show: true,
                        total: {
                            show: true,
                            label: 'Total',
                            formatter: function (w) {
                                return w.globals.seriesTotals.reduce((a, b) => a + b, 0)
                            }
                        }
                    }
                }
            }
        }
    });
    presenceChart.render();

    // Graphique des congés
    const congeData = @json($congeStats);
    const congeChart = new ApexCharts(document.querySelector("#conge-chart"), {
        chart: { type: 'bar', height: 250 },
        series: [{
            name: 'Jours',
            data: [congeData.jours_restants, congeData.total_jours_conges, congeData.conges_en_attente]
        }],
        xaxis: { categories: ['Restants', 'Utilisés', 'En attente'] },
        colors: ['#28a745', '#007bff', '#ffc107'],
        plotOptions: {
            bar: {
                horizontal: false,
                columnWidth: '55%',
                endingShape: 'rounded'
            }
        }
    });
    congeChart.render();

    // Graphique des évaluations par type (si disponible)
    @if($evaluationStats['types_evaluation']->count() > 0)
    const evaluationTypesData = @json($evaluationStats['types_evaluation']);
    const evaluationTypes = Object.keys(evaluationTypesData);
    const evaluationValues = Object.values(evaluationTypesData);

    const evaluationChart = new ApexCharts(document.querySelector("#evaluation-types-chart"), {
        chart: { type: 'pie', height: 250 },
        series: evaluationValues,
        labels: evaluationTypes,
        colors: ['#007bff', '#28a745', '#ffc107', '#dc3545', '#17a2b8'],
        legend: { position: 'bottom' }
    });
    evaluationChart.render();
    @endif
});
</script>
@endpush

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

<!-- Card Group - Statistiques principales -->
<div class="card-group">
    <div class="card p-2 p-lg-3">
        <div class="p-lg-3 p-2">
            <div class="d-flex align-items-center">
                <button class="btn btn-circle btn-success text-white btn-lg" href="javascript:void(0)">
                    <i class="ti-star"></i>
                </button>
                <div class="ms-4" style="width: 38%;">
                    <h4 class="fw-normal">Évaluation</h4>
                    <div class="progress">
                        <div class="progress-bar bg-success" style="width: {{ ($evaluationStats['note_moyenne'] / 5) * 100 }}%" role="progressbar"></div>
                    </div>
                </div>
                <div class="ms-auto">
                    <h2 class="display-7 mb-0">{{ $evaluationStats['note_moyenne'] }}/5</h2>
                    <small class="text-muted">{{ $evaluationStats['total_evaluations'] }} eval.</small>
                </div>
            </div>
        </div>
    </div>
    <div class="card p-2 p-lg-3">
        <div class="p-lg-3 p-2">
            <div class="d-flex align-items-center">
                <button class="btn btn-circle btn-info text-white btn-lg" href="javascript:void(0)">
                    <i class="ti-calendar"></i>
                </button>
                <div class="ms-4" style="width: 38%;">
                    <h4 class="fw-normal">Congés Restants</h4>
                   <div class="progress">
                @php
                    $solde = $congeStats['solde_annuel'] ?? 0;
                    $restants = $congeStats['jours_restants'] ?? 0;
                    $pourcentage = $solde > 0 ? ($restants / $solde) * 100 : 0;
                @endphp

                <div class="progress-bar bg-info" 
                    style="width: {{ $pourcentage }}%" 
                    role="progressbar"
                    aria-valuenow="{{ $pourcentage }}" 
                    aria-valuemin="0" 
                    aria-valuemax="100">
                </div>
            </div>

                </div>
                <div class="ms-auto">
                    <h2 class="display-7 mb-0">{{ $congeStats['jours_restants'] }}</h2>
                    <small class="text-muted">jours</small>
                </div>
            </div>
        </div>
    </div>
    <div class="card p-2 p-lg-3">
        <div class="p-lg-3 p-2">
            <div class="d-flex align-items-center">
                <button class="btn btn-circle btn-warning text-white btn-lg" href="javascript:void(0)">
                    <i class="ti-file"></i>
                </button>
                <div class="ms-4" style="width: 38%;">
                    <h4 class="fw-normal">Contrat</h4>
                    <div class="progress">
                        <div class="progress-bar bg-warning" style="width: {{ $contractInfo['existe'] ? ($contractInfo['progression'] ?? 100) : 0 }}%" role="progressbar"></div>
                    </div>
                </div>
                <div class="ms-auto">
                    <h2 class="display-7 mb-0">
                        @if($contractInfo['existe'])
                            @if($contractInfo['statut'] === 'cdi')
                                CDI
                            @else
                                {{ ucfirst($contractInfo['statut']) }}
                            @endif
                        @else
                            N/A
                        @endif
                    </h2>
                    <small class="text-muted">{{ $contractInfo['existe'] ? $contractInfo['type_contrat'] : '' }}</small>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Charts Section -->
<div class="row">
    <div class="d-flex align-items-stretch col-lg-6">
        <div class="card w-100">
            <div class="card-body">
                <div class="d-md-flex align-items-center">
                    <h5 class="card-title">Répartition de présence</h5>
                    <ul class="list-inline dl mb-0 ms-auto">
                        <li class="list-inline-item text-success"><i class="fa fa-circle"></i> Présent</li>
                        <li class="list-inline-item text-danger"><i class="fa fa-circle"></i> Absent</li>
                        <li class="list-inline-item text-warning"><i class="fa fa-circle"></i> Retard</li>
                    </ul>
                </div>
                <div id="presence-chart"></div>
                <div class="text-center mt-3">
                    <h4 class="text-primary">{{ $presenceStats['taux_presence'] }}%</h4>
                    <small class="text-muted">Taux de présence - {{ $presenceStats['periode'] }}</small>
                </div>
            </div>
        </div>
    </div>
    <div class="d-flex align-items-stretch col-lg-6">
        <div class="card w-100">
            <div class="card-body">
                <div class="d-md-flex align-items-center">
                    <h5 class="card-title">Statistiques des congés</h5>
                    <ul class="list-inline dl mb-0 ms-auto">
                        <li class="list-inline-item text-success"><i class="fa fa-circle"></i> Restants</li>
                        <li class="list-inline-item text-primary"><i class="fa fa-circle"></i> Utilisés</li>
                        <li class="list-inline-item text-warning"><i class="fa fa-circle"></i> En attente</li>
                    </ul>
                </div>
                <div id="conge-chart"></div>
                <div class="text-center mt-3">
                    <small class="text-muted">Année {{ $congeStats['annee'] }} - {{ $congeStats['solde_annuel'] }} jours annuels</small>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Informations détaillées -->
<div class="row">
    <!-- Présence récente -->
    <div class="col-lg-4 d-flex align-items-stretch">
        <div class="card w-100">
            <div class="d-flex align-items-center px-3 py-4 border-bottom">
                <div>
                    <h4 class="card-title mb-0">
                        <i class="mdi mdi-clock-check text-primary me-2"></i>
                        Présence récente
                    </h4>
                </div>
            </div>
            <div class="card-body">
                @php
                    $recentPresences = \App\Models\Presence::where('user_id', Auth::id())
                        ->orderBy('date_jour', 'desc')
                        ->take(7)
                        ->get();
                @endphp

                @if($recentPresences->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Statut</th>
                                    <th>Arrivée</th>
                                    <th>Départ</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($recentPresences as $presence)
                                    <tr>
                                        <td>{{ $presence->date_jour->format('d/m') }}</td>
                                        <td>
                                            @if($presence->statut === 'Présent')
                                                <span class="badge bg-success">Présent</span>
                                            @elseif($presence->statut === 'Absent')
                                                <span class="badge bg-danger">Absent</span>
                                            @elseif($presence->statut === 'En retard')
                                                <span class="badge bg-warning text-dark">Retard</span>
                                            @endif
                                        </td>
                                        <td>{{ $presence->heure_arrivee ?? '-' }}</td>
                                        <td>{{ $presence->heure_depart ?? '-' }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="text-center py-4">
                        <i class="mdi mdi-calendar-blank-outline text-muted" style="font-size: 3rem;"></i>
                        <h6 class="text-muted mt-2">Aucune présence récente</h6>
                        <p class="text-muted small">Vos données de présence apparaîtront ici.</p>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Évaluations détaillées -->
    <div class="col-lg-4 d-flex align-items-stretch">
        <div class="card w-100">
            <div class="d-flex align-items-center px-3 py-4 border-bottom">
                <div>
                    <h4 class="card-title mb-0">
                        <i class="mdi mdi-star text-success me-2"></i>
                        Évaluations ({{ $evaluationStats['total_evaluations'] }})
                    </h4>
                </div>
            </div>
            <div class="card-body">
                @if($evaluationStats['total_evaluations'] > 0)
                    <div class="mb-4">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="fw-medium">Note moyenne globale</span>
                            <span class="badge bg-success fs-6">{{ $evaluationStats['note_moyenne'] }}/5</span>
                        </div>
                        <div class="progress mb-2" style="height: 10px;">
                            <div class="progress-bar bg-success" style="width: {{ ($evaluationStats['note_moyenne'] / 5) * 100 }}%"></div>
                        </div>
                        <small class="text-muted">{{ $evaluationStats['total_evaluations'] }} évaluation(s) réalisée(s)</small>
                    </div>

                    @if($evaluationStats['derniere_evaluation'])
                        <div class="border rounded p-3 mb-3 bg-light">
                            <h6 class="mb-2 text-primary">
                                <i class="mdi mdi-calendar-star me-1"></i>
                                Dernière évaluation
                            </h6>
                            <div class="row">
                                <div class="col-6">
                                    <small class="text-muted">Type</small>
                                    <p class="mb-1 fw-medium">{{ $evaluationStats['derniere_evaluation']->type_evaluation }}</p>
                                </div>
                                <div class="col-6">
                                    <small class="text-muted">Note</small>
                                    <p class="mb-1">
                                        <span class="badge bg-success">{{ $evaluationStats['derniere_evaluation']->note }}/5</span>
                                    </p>
                                </div>
                            </div>
                            <small class="text-muted">
                                <i class="mdi mdi-calendar me-1"></i>
                                {{ $evaluationStats['derniere_evaluation']->created_at->format('d/m/Y') }}
                            </small>
                        </div>
                    @endif

                    @if($evaluationStats['types_evaluation']->count() > 0)
                        <div class="mt-4">
                            <h6 class="mb-3">Répartition par type d'évaluation</h6>
                            <div id="evaluation-types-chart"></div>
                        </div>
                    @endif
                @else
                    <div class="text-center py-5">
                        <i class="mdi mdi-star-off-outline text-muted" style="font-size: 4rem;"></i>
                        <h5 class="text-muted mt-3">Aucune évaluation</h5>
                        <p class="text-muted">Vous n'avez pas encore d'évaluations enregistrées.</p>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Contrat et informations professionnelles -->
    <div class="col-lg-4 d-flex align-items-stretch">
        <div class="card w-100">
            <div class="d-flex align-items-center px-3 py-4 border-bottom">
                <div>
                    <h4 class="card-title mb-0">
                        <i class="mdi mdi-file-document text-warning me-2"></i>
                        Informations professionnelles
                    </h4>
                </div>
            </div>
            <div class="card-body">
                @if($contractInfo['existe'])
                    <div class="row mb-4">
                        <div class="col-6">
                            <div class="text-center p-3 border rounded">
                                <i class="mdi mdi-file-document text-warning" style="font-size: 2rem;"></i>
                                <h6 class="mt-2 mb-1">{{ $contractInfo['type_contrat'] }}</h6>
                                <small class="text-muted">Type de contrat</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-center p-3 border rounded">
                                @if($contractInfo['statut'] === 'actif')
                                    <i class="mdi mdi-check-circle text-success" style="font-size: 2rem;"></i>
                                @elseif($contractInfo['statut'] === 'expiré')
                                    <i class="mdi mdi-alert-circle text-danger" style="font-size: 2rem;"></i>
                                @else
                                    <i class="mdi mdi-information text-info" style="font-size: 2rem;"></i>
                                @endif
                                <h6 class="mt-2 mb-1">
                                    @if($contractInfo['statut'] === 'cdi')
                                        CDI
                                    @else
                                        {{ ucfirst($contractInfo['statut']) }}
                                    @endif
                                </h6>
                                <small class="text-muted">Statut</small>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-6">
                            <small class="text-muted d-block">Date de début</small>
                            <span class="fw-medium">{{ $contractInfo['date_debut']->format('d/m/Y') }}</span>
                        </div>
                        <div class="col-6">
                            <small class="text-muted d-block">Date de fin</small>
                            <span class="fw-medium">{{ $contractInfo['date_fin'] ? $contractInfo['date_fin']->format('d/m/Y') : 'CDI' }}</span>
                        </div>
                    </div>

                    @if($contractInfo['duree_totale'])
                        <div class="mt-4">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="fw-medium">Progression du contrat</span>
                                <span class="badge bg-warning">{{ $contractInfo['progression'] }}%</span>
                            </div>
                            <div class="progress mb-2" style="height: 10px;">
                                <div class="progress-bar bg-warning" style="width: {{ $contractInfo['progression'] }}%"></div>
                            </div>
                            <small class="text-muted">
                                {{ number_format($contractInfo['duree_ecoulee'], 0) }} mois écoulés sur {{ number_format($contractInfo['duree_totale'], 0) }} mois
                            </small>
                        </div>
                    @endif

                    <div class="border-top pt-3 mt-4">
                        <div class="row text-center">
                            <div class="col-4">
                                <div class="border-end">
                                    <h5 class="text-success mb-0">{{ $congeStats['conges_approuves'] }}</h5>
                                    <small class="text-muted">Congés approuvés</small>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="border-end">
                                    <h5 class="text-warning mb-0">{{ $congeStats['conges_en_attente'] }}</h5>
                                    <small class="text-muted">En attente</small>
                                </div>
                            </div>
                            <div class="col-4">
                                <h5 class="text-danger mb-0">{{ $congeStats['conges_refuses'] }}</h5>
                                <small class="text-muted">Refusés</small>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="text-center py-5">
                        <i class="mdi mdi-file-document-off text-muted" style="font-size: 4rem;"></i>
                        <h5 class="text-muted mt-3">Aucun contrat actif</h5>
                        <p class="text-muted">{{ $contractInfo['message'] }}</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

@if(!auth()->user()->role || auth()->user()->role->nom !== 'Administrateur')
    @php
        $plaintesAffectees = auth()->user()->plaintesAffectees()->latest('pivot_assigned_at')->take(5)->get();
    @endphp
    @if($plaintesAffectees->count() > 0)
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="mdi mdi-file-document-alert-outline me-2"></i>
                        Plaintes qui vous sont affectées
                    </h5>
                    <a href="{{ route('user.plaintes.affectees') }}" class="btn btn-outline-primary btn-sm">
                        <i class="mdi mdi-eye me-1"></i>
                        Voir tout
                    </a>
                </div>
                <div class="card-body">
                    <div class="row">
                        @foreach($plaintesAffectees as $plainte)
                        <div class="col-md-6 mb-3">
                            <div class="card border-left-warning h-100">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <h6 class="mb-1">
                                            <a href="{{ route('admin.plaintes.show', $plainte) }}" class="text-decoration-none">
                                                {{ Str::limit($plainte->description, 40) }}
                                            </a>
                                        </h6>
                                        <span class="badge {{ $plainte->getStatutBadgeClass() }}">
                                            {{ $plainte->statut === 'en_attente' ? 'En attente' : ($plainte->statut === 'en_cours' ? 'En cours' : 'Traitée') }}
                                        </span>
                                    </div>
                                    <div class="small text-muted mb-2">
                                        <strong>Code:</strong> {{ $plainte->code_suivi }} •
                                        <strong>Personne:</strong> {{ $plainte->personne_impliquee }}
                                    </div>
                                    @if($plainte->centre)
                                        <div class="small text-muted mb-2">
                                            <strong>Centre:</strong> {{ \App\Models\Plainte::getCentres()[$plainte->centre] ?? $plainte->centre }}
                                            @if($plainte->organisme_specifique)
                                                • <strong>Organisme:</strong> {{ $plainte->organisme_specifique }}
                                            @endif
                                        </div>
                                    @endif
                                    <div class="small text-muted">
                                        Affecté le {{ \Carbon\Carbon::parse($plainte->pivot->assigned_at)->format('d/m/Y à H:i') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
@endif

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