@extends('dashboard.layouts.app')

@section('title', 'Rapport présence - ' . $user->name . ' - UAC eservices')

@section('page-title', 'Rapport de présence - ' . $user->name)

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('rh.dashboard') }}">RH</a></li>
    <li class="breadcrumb-item"><a href="{{ route('rh.presences.index') }}">Présences</a></li>
    <li class="breadcrumb-item active" aria-current="page">{{ $user->name }}</li>
@endsection

@section('content')
<!-- -------------------------------------------------------------- -->
<!-- Start Page Content -->
<!-- -------------------------------------------------------------- -->
<div class="row">
    <!-- Informations employé -->
    <div class="col-lg-4">
        <!-- Profil -->
        <div class="card">
            <div class="card-body">
                <div class="text-center mb-4">
                    <div class="avatar-lg mx-auto mb-3" style="width: 100px; height: 100px;">
                        <span class="avatar-title rounded-circle bg-gradient-primary text-white"
                            style="width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: bold;">
                            {{ strtoupper(substr($user->name, 0, 1)) }}
                        </span>
                    </div>
                    <h4 class="mb-1">{{ $user->name }}</h4>
                    <p class="text-muted mb-2">
                        <i class="mdi mdi-email-outline"></i> {{ $user->email }}
                    </p>
                    <span class="badge bg-info fs-6">
                        <i class="mdi mdi-account-tie"></i> {{ $user->role->nom }}
                    </span>
                </div>

                <hr>

                <h6 class="mb-3">
                    <i class="mdi mdi-chart-box-outline"></i> Statistiques - {{ $dateDebut->locale('fr')->isoFormat('MMMM YYYY') }}
                </h6>

                <!-- Taux de présence avec graphique circulaire -->
                <div class="text-center mb-4">
                    <div class="position-relative d-inline-block">
                        <canvas id="presenceChart" width="120" height="120"></canvas>
                        <div class="position-absolute top-50 start-50 translate-middle">
                            <h3 class="mb-0 {{ $stats['taux_presence'] >= 90 ? 'text-success' : ($stats['taux_presence'] >= 75 ? 'text-warning' : 'text-danger') }}">
                                {{ $stats['taux_presence'] }}%
                            </h3>
                            <small class="text-muted">Présence</small>
                        </div>
                    </div>
                </div>

                <!-- Statistiques détaillées -->
                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <div class="border rounded p-3 text-center bg-light-success">
                            <h4 class="text-success mb-1">{{ $stats['jours_present'] }}</h4>
                            <small class="text-muted">
                                <i class="mdi mdi-calendar-check"></i> Jours présents
                            </small>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="border rounded p-3 text-center bg-light-danger">
                            <h4 class="text-danger mb-1">{{ $stats['jours_absent'] }}</h4>
                            <small class="text-muted">
                                <i class="mdi mdi-calendar-remove"></i> Absences
                            </small>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="border rounded p-3 text-center bg-light-warning">
                            <h4 class="text-warning mb-1">{{ $stats['nombre_retards'] }}</h4>
                            <small class="text-muted">
                                <i class="mdi mdi-clock-alert"></i> Retards
                            </small>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="border rounded p-3 text-center bg-light-info">
                            <h4 class="text-info mb-1">{{ $stats['total_jours'] }}</h4>
                            <small class="text-muted">
                                <i class="mdi mdi-calendar"></i> Total jours
                            </small>
                        </div>
                    </div>
                </div>

                <!-- Progression -->
                <div class="mb-3">
                    <div class="d-flex justify-content-between mb-1">
                        <small class="text-muted">Taux de présence</small>
                        <small class="fw-bold">{{ $stats['taux_presence'] }}%</small>
                    </div>
                    <div class="progress" style="height: 10px;">
                        @php
                            $taux = $stats['taux_presence'];
                            $bgClass = $taux >= 90 ? 'bg-success' : ($taux >= 75 ? 'bg-warning' : 'bg-danger');
                        @endphp
                        <div class="progress-bar {{ $bgClass }}" role="progressbar"
                            style="width: {{ $taux }}%" aria-valuenow="{{ $taux }}"
                            aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>

                <hr>

               <div class="d-grid gap-2">
    <a href="{{ route('rh.presences.index') }}" class="btn btn-secondary">
        <i class="mdi mdi-arrow-left"></i> Retour à la liste
    </a>

    <div class="my-2">
        <label for="date_debut">Du :</label>
        <input type="date" id="date_debut" class="form-control" value="{{ now()->startOfMonth()->toDateString() }}">
        <label for="date_fin" class="mt-1">Au :</label>
        <input type="date" id="date_fin" class="form-control" value="{{ now()->toDateString() }}">
    </div>

    <div class="btn-group" role="group">
        <button class="btn btn-danger" onclick="exportEmployeePresence('pdf')">
            <i class="mdi mdi-file-pdf"></i> PDF
        </button>
        <button class="btn btn-success" onclick="exportEmployeePresence('excel')">
            <i class="mdi mdi-file-excel"></i> Excel
        </button>
    </div>
</div>



            </div>
        </div>
    </div>

    <!-- Rapport de présence -->
    <div class="col-lg-8">
        <!-- Boutons de navigation et toggle -->
        <div class="card mb-3">
            <div class="card-body p-3">
                <div class="d-flex justify-content-between align-items-center flex-wrap">
                    <h5 class="mb-0">
                        <i class="mdi mdi-calendar-month"></i>
                        {{ $dateDebut->locale('fr')->isoFormat('MMMM YYYY') }}
                    </h5>
                    <div class="d-flex gap-2">
                        <div class="btn-group" role="group">
                            <a href="{{ route('rh.presences.show', [$user, 'mois' => $dateDebut->copy()->subMonth()->format('Y-m')]) }}"
                                class="btn btn-outline-secondary btn-sm" title="Mois précédent">
                                <i class="mdi mdi-chevron-left"></i>
                            </a>
                            <button class="btn btn-outline-secondary btn-sm" onclick="goToCurrentMonth()">
                                <i class="mdi mdi-calendar-today"></i> Aujourd'hui
                            </button>
                            <a href="{{ route('rh.presences.show', [$user, 'mois' => $dateDebut->copy()->addMonth()->format('Y-m')]) }}"
                                class="btn btn-outline-secondary btn-sm" title="Mois suivant">
                                <i class="mdi mdi-chevron-right"></i>
                            </a>
                        </div>
                        <button class="btn btn-sm btn-primary" onclick="toggleView()">
                            <i class="mdi mdi-view-grid" id="viewIcon"></i>
                            <span id="viewText">Vue liste</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Calendrier des présences -->
        <div class="card" id="calendarCard">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="mdi mdi-calendar-text"></i> Calendrier mensuel
                </h5>
            </div>
            <div class="card-body">
                <!-- Calendrier des présences -->
                <div id="calendarView" class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead class="table-light">
                            <tr class="text-center">
                                <th style="width: 14.28%;">
                                    <i class="mdi mdi-calendar-blank"></i> Lun
                                </th>
                                <th style="width: 14.28%;">
                                    <i class="mdi mdi-calendar-blank"></i> Mar
                                </th>
                                <th style="width: 14.28%;">
                                    <i class="mdi mdi-calendar-blank"></i> Mer
                                </th>
                                <th style="width: 14.28%;">
                                    <i class="mdi mdi-calendar-blank"></i> Jeu
                                </th>
                                <th style="width: 14.28%;">
                                    <i class="mdi mdi-calendar-blank"></i> Ven
                                </th>
                                <th style="width: 14.28%;" class="bg-light-warning">
                                    <i class="mdi mdi-calendar-blank"></i> Sam
                                </th>
                                <th style="width: 14.28%;" class="bg-light-danger">
                                    <i class="mdi mdi-calendar-blank"></i> Dim
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $firstDayOfMonth = $dateDebut->copy()->startOfMonth();
                                $lastDayOfMonth = $dateFin->copy()->endOfMonth();
                                $startDate = $firstDayOfMonth->copy()->startOfWeek();
                                $endDate = $lastDayOfMonth->copy()->endOfWeek();

                                $currentDate = $startDate->copy();
                                $weekNumber = 0;
                                $timezone = config('app.timezone', 'Africa/Porto-Novo');
                                $aujourdhui = \Carbon\Carbon::now($timezone)->toDateString();
                            @endphp

                            @while($currentDate <= $endDate)
                                @if($currentDate->dayOfWeek == 1 || $weekNumber == 0)
                                    <tr>
                                    @php $weekNumber++ @endphp
                                @endif

                                @php
                                    $dateKey = $currentDate->format('Y-m-d');
                                    $presence = $presences->get($dateKey);
                                    $isWeekend = in_array($currentDate->dayOfWeek, [0, 6]); // Dim=0, Sam=6
                                    $isToday = $dateKey === $aujourdhui;
                                    $isOutsideMonth = $currentDate->month != $dateDebut->month;
                                @endphp

                                <td class="text-center p-2 position-relative
                                    @if($isOutsideMonth) bg-light opacity-50 @endif
                                    @if($isWeekend && !$isOutsideMonth) bg-light @endif
                                    @if($isToday) border-primary border-3 @endif"
                                    style="min-height: 90px; vertical-align: top;">

                                    @if(!$isOutsideMonth)
                                        <div class="d-flex justify-content-between align-items-start mb-2">
                                            <span class="badge {{ $isToday ? 'bg-primary' : 'bg-secondary' }} rounded-pill">
                                                {{ $currentDate->day }}
                                            </span>
                                            @if($isWeekend)
                                                <small class="text-muted">
                                                    <i class="mdi mdi-island"></i>
                                                </small>
                                            @endif
                                        </div>

                                     @if($presence)
  
                                            @php
                                                    $estEnRetard = method_exists($presence, 'estEnRetard') ? $presence->estEnRetard() : false;
                                                @endphp
                                                <div class="mt-1">
                                                    @if($presence->statut === 'Présent')
                                                        @if($estEnRetard)
                                                            <span class="badge bg-warning text-dark w-100 mb-1">
                                                                <i class="mdi mdi-clock-alert-outline"></i> Retard
                                                            </span>
                                                        @else
                                                            <span class="badge bg-success w-100 mb-1">
                                                                <i class="mdi mdi-check-circle"></i> Présent
                                                            </span>
                                                        @endif
                                                        @if($presence->heure_arrivee)
                                                            <div class="small text-success fw-bold">
                                                                <i class="mdi mdi-login"></i> {{ $presence->heure_arrivee }}
                                                                @if(property_exists($presence, 'latitude_arrivee') && $presence->latitude_arrivee && property_exists($presence, 'longitude_arrivee') && $presence->longitude_arrivee)
                                                                    <a href="#" class="text-decoration-none"
                                                                    data-bs-toggle="tooltip"
                                                                    title="Position d'arrivée: {{ $presence->latitude_arrivee }}, {{ $presence->longitude_arrivee }}"
                                                                    onclick="showMap({{ $presence->latitude_arrivee }}, {{ $presence->longitude_arrivee }}, '{{ $presence->date_jour->format('d/m/Y') }}', '{{ $presence->heure_arrivee }}', 'Arrivée')">
                                                                        <i class="mdi mdi-map-marker ms-1 text-primary"></i>
                                                                    </a>
                                                                @endif
                                                            </div>
                                                            @if($presence->heure_depart)
                                                                <div class="small text-info">
                                                                    <i class="mdi mdi-logout"></i> {{ $presence->heure_depart }}
                                                                    @if(property_exists($presence, 'latitude_depart') && $presence->latitude_depart && property_exists($presence, 'longitude_depart') && $presence->longitude_depart)
                                                                        <a href="#" class="text-decoration-none"
                                                                        data-bs-toggle="tooltip"
                                                                        title="Position de départ: {{ $presence->latitude_depart }}, {{ $presence->longitude_depart }}"
                                                                        onclick="showMap({{ $presence->latitude_depart }}, {{ $presence->longitude_depart }}, '{{ $presence->date_jour->format('d/m/Y') }}', '{{ $presence->heure_depart }}', 'Départ')">
                                                                            <i class="mdi mdi-map-marker ms-1 text-primary"></i>
                                                                        </a>
                                                                    @endif
                                                                </div>
                                                            @endif
                                                        @endif
                                                    @else
                                                        <span class="badge bg-danger w-100">
                                                            <i class="mdi mdi-close-circle"></i> Absent
                                                        </span>
                                                    @endif
                                                </div>

                                            @if($dateKey < $aujourdhui && !$isWeekend)
                                                
                                            @elseif($dateKey >= $aujourdhui)
                                                <div class="mt-1">
                                                    <span class="badge bg-light text-muted w-100">
                                                        <i class="mdi mdi-dots-horizontal"></i>
                                                    </span>
                                                </div>
                                            @endif
                                        @endif
                                    @endif
                                </td>

                                @if($currentDate->dayOfWeek == 0)
                                    </tr>
                                @endif

                                @php $currentDate->addDay() @endphp
                            @endwhile
                        </tbody>
                    </table>
                </div>

                <!-- Légende -->
                <div class="border-top pt-3 mt-3">
                    <h6 class="mb-3">
                        <i class="mdi mdi-information-outline"></i> Légende
                    </h6>
                    <div class="row g-2">
                        <div class="col-md-3">
                            <div class="d-flex align-items-center">
                                <span class="badge bg-success me-2">
                                    <i class="mdi mdi-check-circle"></i>
                                </span>
                                <small>Présent à l'heure</small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="d-flex align-items-center">
                                <span class="badge bg-warning text-dark me-2">
                                    <i class="mdi mdi-clock-alert"></i>
                                </span>
                                <small>En retard</small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="d-flex align-items-center">
                                <span class="badge bg-danger me-2">
                                    <i class="mdi mdi-close-circle"></i>
                                </span>
                                <small>Absent</small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="d-flex align-items-center">
                                <span class="badge bg-light text-muted me-2">
                                    <i class="mdi mdi-dots-horizontal"></i>
                                </span>
                                <small>À venir</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Liste détaillée des présences -->
        <div class="card" id="listView" style="display: none;">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <i class="mdi mdi-format-list-bulleted"></i> Détail des présences du mois
                    </h5>
                    <div class="input-group" style="width: 300px;">
                        <input type="text" id="searchList" class="form-control form-control-sm"
                            placeholder="Rechercher par date...">
                        <button class="btn btn-sm btn-outline-secondary" type="button">
                            <i class="mdi mdi-magnify"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="card-body">
                @if($presences->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-striped table-hover align-middle" id="presenceTable">
                       <thead class="table-light">
                            <tr>
                                <th style="width: 15%;">
                                    <i class="mdi mdi-calendar"></i> Date
                                </th>
                                <th style="width: 20%;">
                                    <i class="mdi mdi-information"></i> Statut
                                </th>
                                <th style="width: 15%;">
                                    <i class="mdi mdi-login"></i> Arrivée
                                </th>
                                <th style="width: 15%;">
                                    <i class="mdi mdi-logout"></i> Départ
                                </th>
                                <th style="width: 15%;">
                                    <i class="mdi mdi-clock-outline"></i> Durée
                                </th>
                                <th style="width: 15%;">
                                    <i class="mdi mdi-map-marker"></i> Position
                                </th>
                                <th style="width: 10%;">
                                    <i class="mdi mdi-note-text"></i> Notes
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($presences->sortByDesc('date_jour') as $presence)
                                @php
                                    $estEnRetard = method_exists($presence, 'estEnRetard') ? $presence->estEnRetard() : false;
                                    $duree = method_exists($presence, 'getDureeTravail') ? $presence->getDureeTravail() : null;
                                @endphp
                                <tr class="presence-row">
                                    <td>
                                        <div class="fw-bold">{{ $presence->date_jour->locale('fr')->isoFormat('dddd') }}</div>
                                        <small class="text-muted">{{ $presence->date_jour->format('d/m/Y') }}</small>
                                    </td>
                                    <td>
                                        @if($presence->statut === 'Présent')
                                            @if($estEnRetard)
                                                <span class="badge bg-warning text-dark">
                                                    <i class="mdi mdi-clock-alert-outline"></i> En retard
                                                </span>
                                            @else
                                                <span class="badge bg-success">
                                                    <i class="mdi mdi-check-circle"></i> Présent
                                                </span>
                                            @endif
                                        @else
                                            <span class="badge bg-danger">
                                                <i class="mdi mdi-close-circle"></i> Absent
                                            </span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($presence->heure_arrivee)
                                            <span class="fw-bold {{ $estEnRetard ? 'text-warning' : 'text-success' }}">
                                                {{ $presence->heure_arrivee }}
                                            </span>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($presence->heure_depart)
                                            <span class="fw-bold text-info">{{ $presence->heure_depart }}</span>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($duree)
                                            <span class="badge bg-info">{{ number_format($duree, 1) }}h</span>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                            <td>
                                        @if(($presence->latitude_arrivee && $presence->longitude_arrivee) || ($presence->latitude_depart && $presence->longitude_depart))
                                            <div class="small">
                                                <a href="#" class="text-decoration-none"
                                                onclick="showMap(
                                                    {!! $presence->latitude_arrivee ?? 'null' !!},
                                                    {!! $presence->longitude_arrivee ?? 'null' !!},
                                                    {!! $presence->latitude_depart ?? 'null' !!},
                                                    {!! $presence->longitude_depart ?? 'null' !!},
                                                    '{{ $presence->date_jour->format('d/m/Y') }}',
                                                    '{{ $presence->heure_arrivee ?? '' }}',
                                                    '{{ $presence->heure_depart ?? '' }}'
                                                )">
                                                    <button class="btn btn-sm btn-outline-primary">
                                                        <i class="mdi mdi-eye"></i> Voir
                                                    </button>
                                                </a>
                                            </div>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>




                                    <td>
                                        <small class="text-muted">{{ $presence->notes ?: '-' }}</small>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>

                        </table>
                    </div>

                    <!-- Résumé -->
                    <div class="border-top pt-3 mt-3">
                        <div class="row text-center">
                            <div class="col-md-4">
                                <div class="p-2 border rounded">
                                    <h5 class="text-success mb-0">{{ $presences->where('statut', 'Présent')->count() }}</h5>
                                    <small class="text-muted">Jours présents</small>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="p-2 border rounded">
                                    <h5 class="text-danger mb-0">{{ $presences->where('statut', 'Absent')->count() }}</h5>
                                    <small class="text-muted">Absences enregistrées</small>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="p-2 border rounded">
                                    <h5 class="text-warning mb-0">{{ $stats['nombre_retards'] }}</h5>
                                    <small class="text-muted">Retards</small>
                                </div>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="text-center py-5">
                        <i class="mdi mdi-calendar-blank-outline" style="font-size: 64px; color: #ccc;"></i>
                        <h5 class="mt-3 text-muted">Aucune présence enregistrée</h5>
                        <p class="text-muted">Ce mois ne contient aucune donnée de présence pour cet employé.</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
<!-- Modale pour afficher la carte -->
<div class="modal fade" id="mapModal" tabindex="-1" aria-labelledby="mapModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="mapModalLabel">Position géographique</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="map" style="height: 400px; width: 100%;"></div>
                <div class="mt-2">
                    <p><strong>Type :</strong> <span id="mapType"></span></p>
                    <p><strong>Coordonnées :</strong> <span id="mapCoordinates"></span></p>
                    <p><strong>Date :</strong> <span id="mapDate"></span></p>
                    <p><strong>Heure :</strong> <span id="mapTime"></span></p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modale pour afficher la carte et les informations de localisation -->
<div class="modal fade" id="mapModal" tabindex="-1" aria-labelledby="mapModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="mapModalLabel">Positions géographiques</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="map" style="height: 400px; width: 100%;"></div>
                <div class="mt-3">
                    <div class="d-flex justify-content-between mb-2">
                        <div>
                            <strong>Date :</strong> <span id="mapDate"></span>
                        </div>
                    </div>
                    <div id="arrivalSection" class="mb-2" style="display: none;">
                        <div class="d-flex justify-content-between">
                            <div>
                                <strong>Arrivée :</strong> <span id="arrivalTime"></span>
                            </div>
                            <div>
                                <strong>Position :</strong> <span id="arrivalCoordinates"></span>
                            </div>
                        </div>
                    </div>
                    <div id="departureSection" class="mb-2" style="display: none;">
                        <div class="d-flex justify-content-between">
                            <div>
                                <strong>Départ :</strong> <span id="departureTime"></span>
                            </div>
                            <div>
                                <strong>Position :</strong> <span id="departureCoordinates"></span>
                            </div>
                        </div>
                    </div>
                    <div id="noLocationInfo" class="text-center text-muted" style="display: none;">
                        <i class="mdi mdi-map-marker-off mdi-24px"></i>
                        <p>Aucune information de localisation disponible</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
            </div>
        </div>
    </div>
</div>



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

@push('scripts')
<!-- Juste avant la fermeture de </body> -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script>
    // Variable pour stocker la carte
    let map;

    // Fonction pour afficher la carte et les informations de localisation
    function showMap(latitudeArrivee, longitudeArrivee, latitudeDepart, longitudeDepart, date, heureArrivee, heureDepart) {
        const modal = new bootstrap.Modal(document.getElementById('mapModal'));

        // Mettre à jour les informations dans la modale
        document.getElementById('mapDate').textContent = date;

        // Réinitialiser les éléments
        document.getElementById('arrivalSection').style.display = 'none';
        document.getElementById('departureSection').style.display = 'none';
        document.getElementById('noLocationInfo').style.display = 'none';

        // Afficher les informations d'arrivée si disponibles
        if (latitudeArrivee && longitudeArrivee) {
            document.getElementById('arrivalTime').textContent = heureArrivee;
            document.getElementById('arrivalCoordinates').textContent = latitudeArrivee + ', ' + longitudeArrivee;
            document.getElementById('arrivalSection').style.display = 'block';
        }

        // Afficher les informations de départ si disponibles
        if (latitudeDepart && longitudeDepart) {
            document.getElementById('departureTime').textContent = heureDepart;
            document.getElementById('departureCoordinates').textContent = latitudeDepart + ', ' + longitudeDepart;
            document.getElementById('departureSection').style.display = 'block';
        }

        // Afficher un message si aucune information de localisation n'est disponible
        if (!latitudeArrivee && !longitudeArrivee && !latitudeDepart && !longitudeDepart) {
            document.getElementById('noLocationInfo').style.display = 'block';
        }

        // Initialiser la carte si elle n'existe pas
        if (!map) {
            // Utiliser les coordonnées d'arrivée par défaut, sinon les coordonnées de départ, sinon des coordonnées par défaut
            let lat = latitudeArrivee || latitudeDepart || 6.376389; // Coordonnées par défaut pour Porto-Novo
            let lng = longitudeArrivee || longitudeDepart || 2.421044;

            map = L.map('map').setView([lat, lng], 15);
            L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
            attribution: '&copy; OpenStreetMap &copy; CARTO',
            subdomains: 'abcd',
            maxZoom: 19
        }).addTo(map);


        } else {
            // Utiliser les coordonnées d'arrivée par défaut, sinon les coordonnées de départ, sinon des coordonnées par défaut
            let lat = latitudeArrivee || latitudeDepart || 6.376389;
            let lng = longitudeArrivee || longitudeDepart || 2.421044;
            map.setView([lat, lng], 15);
        }

        // Effacer les marqueurs existants
        map.eachLayer(function(layer) {
            if (layer instanceof L.Marker) {
                map.removeLayer(layer);
            }
        });

        // Ajouter un marqueur pour l'arrivée si disponible
        if (latitudeArrivee && longitudeArrivee) {
            L.marker([latitudeArrivee, longitudeArrivee]).addTo(map)
                .bindPopup(`<b>Arrivée</b><br>Lat: ${latitudeArrivee}<br>Lng: ${longitudeArrivee}<br>Date: ${date}<br>Heure: ${heureArrivee}`)
                .openPopup();
        }

        // Ajouter un marqueur pour le départ si disponible
        if (latitudeDepart && longitudeDepart) {
            L.marker([latitudeDepart, longitudeDepart]).addTo(map)
                .bindPopup(`<b>Départ</b><br>Lat: ${latitudeDepart}<br>Lng: ${longitudeDepart}<br>Date: ${date}<br>Heure: ${heureDepart}`);
        }

        modal.show();
    }
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialiser  les tooltips
        const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    });
</script>

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
// Graphique circulaire de présence
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('presenceChart');
    if (ctx) {
        const taux = {{ $stats['taux_presence'] }};
        const tauxAbsence = 100 - taux;

        new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ['Présence', 'Absence'],
                datasets: [{
                    data: [taux, tauxAbsence],
                    backgroundColor: [
                        taux >= 90 ? '#28a745' : (taux >= 75 ? '#ffc107' : '#dc3545'),
                        '#e9ecef'
                    ],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                cutout: '75%',
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.label + ': ' + context.parsed + '%';
                            }
                        }
                    }
                }
            }
        });
    }
});

// Toggle entre vue calendrier et liste
let currentView = 'calendar';
function toggleView() {
    const calendarView = document.getElementById('calendarView');
    const calendarCard = document.getElementById('calendarCard');
    const listView = document.getElementById('listView');
    const viewIcon = document.getElementById('viewIcon');
    const viewText = document.getElementById('viewText');

    if (currentView === 'calendar') {
        // Passer en vue liste
        calendarCard.style.display = 'none';
        listView.style.display = 'block';
        viewIcon.className = 'mdi mdi-calendar-month';
        viewText.textContent = 'Vue calendrier';
        currentView = 'list';
    } else {
        // Retour en vue calendrier
        calendarCard.style.display = 'block';
        listView.style.display = 'none';
        viewIcon.className = 'mdi mdi-view-grid';
        viewText.textContent = 'Vue liste';
        currentView = 'calendar';
    }
}

// Aller au mois actuel
function goToCurrentMonth() {
    const currentMonth = new Date().toISOString().slice(0, 7);
    window.location.href = '{{ route("rh.presences.show", $user) }}?mois=' + currentMonth;
}

// Recherche dans la liste
document.getElementById('searchList')?.addEventListener('keyup', function(e) {
    const searchValue = e.target.value.toLowerCase();
    const rows = document.querySelectorAll('#presenceTable tbody tr.presence-row');

    rows.forEach(row => {
        const text = row.textContent.toLowerCase();
        row.style.display = text.includes(searchValue) ? '' : 'none';
    });
});

// Export du rapport employé en PDF
function exportEmployeePresence(type) {
    const userName = '{{ $user->name }}';
    const dateDebut = document.getElementById('date_debut').value;
    const dateFin = document.getElementById('date_fin').value;

    if (!dateDebut || !dateFin) {
        toastr.warning("Veuillez sélectionner une plage de dates.", "Export");
        return;
    }

    const exportUrl = `{{ route('rh.presences.export', $user) }}?type=${type}&date_debut=${dateDebut}&date_fin=${dateFin}`;
    toastr.info(`Préparation du rapport ${type.toUpperCase()} pour ${userName}...`, 'Export');
    window.location.href = exportUrl;

    setTimeout(() => {
        toastr.success(`Rapport ${type.toUpperCase()} généré avec succès !`, 'Export');
    }, 1000);
}

// Animation au chargement
document.addEventListener('DOMContentLoaded', function() {
    // Animer les badges de statistiques
    const badges = document.querySelectorAll('.badge');
    badges.forEach((badge, index) => {
        badge.style.opacity = '0';
        setTimeout(() => {
            badge.style.transition = 'opacity 0.3s ease';
            badge.style.opacity = '1';
        }, index * 50);
    });
});
</script>
@endpush