@extends('layouts.master')

@section('title', 'Restaurations des employés')
@section('parentPageTitle', 'Gestion des restaurations')

@section('content')

{{-- En-tête de page --}}
@php
    $mois_exercice = $mois_exercice ?? date('m-Y');
    $mois_nom = [
        '01' => 'Janvier', '02' => 'Février', '03' => 'Mars', '04' => 'Avril',
        '05' => 'Mai', '06' => 'Juin', '07' => 'Juillet', '08' => 'Août',
        '09' => 'Septembre', '10' => 'Octobre', '11' => 'Novembre', '12' => 'Décembre'
    ];
    $mois_num = explode('-', $mois_exercice)[0];
    $annee = explode('-', $mois_exercice)[1];
    $nom_complet = $mois_nom[$mois_num] . ' ' . $annee;
@endphp

{{-- Barre de navigation rapide --}}
<div class="row clearfix">
    <div class="col-lg-12 col-md-12 col-sm-12">
        <div class="card">
            <div class="body">
                <h6 class="mb-0">LES AUTRES LIENS COURAMMENT UTILISÉS</h6>
                <div class="d-flex flex-wrap align-items-center justify-content-between">
                    <div class="btn-group flex-wrap" role="group">
                        <a href="{{ url('restauration_autorisations') }}" class="btn btn-outline-success" title="Retour à la liste des restauration_autorisations">
                            <i class="zmdi zmdi-cutlery"></i> Autorisations de restauration
                        </a>
                        <a href="{{ url('types_repas') }}" class="btn btn-outline-success" title="types_repas">
                            <i class="zmdi zmdi-cutlery"></i> Types de repas
                        </a>
                        <a href="{{ url('all_absences') }}" class="btn btn-outline-success" title="all_absences">
                            <i class="zmdi zmdi-calendar"></i> Absences
                        </a>
                        <a href="{{ url('rapports_rh') }}" class="btn btn-outline-success" title="Rapports">
                            <i class="zmdi zmdi-file-text"></i> Rapports
                        </a>
                    </div>
                    <div>
                     
                         <button type="button" data-toggle="modal" data-target="#defaultModal" class="btn btn-primary ml-2">
                            <i class="zmdi zmdi-cutlery"></i> New Restauration
                        </button>
                        <button type="button" class="btn btn-primary ml-2" data-toggle="modal" data-target="#Restauration_tous">
                            <i class="zmdi zmdi-cutlery"></i> Resto pour tous
                        </button>
                          <button type="button" class="btn btn-info ml-2" data-toggle="modal" data-target="#Modal_Action">
                            <i class="zmdi zmdi-settings"></i> Action
                        </button>
                        <button type="button" class="btn btn-info ml-2" data-toggle="modal" data-target="#Rapport_Restauration">
                            <i class="zmdi zmdi-file-text"></i> Rapport
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="text-center">
    <u><h3>Tableau de bord des restaurations du mois d'exercice : {{ $nom_complet }}</h3></u>
</div>
<div class="text-center">
    <p class="mb-3">Récapitulatif des restaurations par employé - {{ $nom_complet }}</p>
</div>

{{-- Statistiques globales du mois --}}
<div class="row mb-4">
    <div class="col-md-3">
        <div class="stats-card primary">
            <div class="stats-value">{{ $stats['total_restaurations'] ?? 0 }}</div>
            <div class="stats-label">Total Restaurations/Assiettes</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stats-card success">
            <div class="stats-value">
               {{ number_format(array_sum(is_array($stats['montant_par_mois'] ?? null) ? $stats['montant_par_mois'] : []), 0, ',', ' ') }}
            </div>
            <div class="stats-label">Montant Total (FBU)</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stats-card info">
            <div class="stats-value">{{ count($stats['total_par_jour'] ?? []) }}</div>
            <div class="stats-label">Jours actifs</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stats-card warning">
            <div class="stats-value">{{ $stats['employes_avec_restaurations'] ?? 0 }}</div>
            <div class="stats-label">Employés actifs</div>
        </div>
    </div>
</div>

{{-- Messages d'alerte --}}
@if (session()->has('success'))
    <div class="alert alert-success alert-dismissible fade show text-center" role="alert">
        <i class="zmdi zmdi-check-circle mr-2"></i>{{ session()->get('success') }}
        <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
@elseif (session()->has('error'))
    <div class="alert alert-danger alert-dismissible fade show text-center" role="alert">
        <i class="zmdi zmdi-alert-circle mr-2"></i>{{ session()->get('error') }}
        <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
@endif

@if ($errors->any())
    <div class="alert alert-danger">
        <ul class="mb-0">
            @foreach($errors->all() as $message)
                <li>{{ $message }}</li>
            @endforeach
        </ul>
    </div>
@endif

{{-- Filtres par mois --}}
<div class="month-filter">
    <div class="d-flex align-items-center flex-wrap">
        <i class="zmdi zmdi-filter-list mr-2" style="font-size: 1.2rem;"></i>
        <div class="flex-wrap">
            @php
                $mois_tries = $stats['total_par_mois'] ?? [];
                uksort($mois_tries, function($a, $b) {
                    $a_parts = explode('-', $a);
                    $b_parts = explode('-', $b);
                    if ($a_parts[1] != $b_parts[1]) {
                        return $a_parts[1] <=> $b_parts[1];
                    }
                    return $a_parts[0] <=> $b_parts[0];
                });
            @endphp

            @foreach($mois_tries as $mois => $count)
                @php
                    $mois_num = explode('-', $mois)[0];
                    $annee = explode('-', $mois)[1];
                    $nom_mois = $mois_nom[$mois_num] . ' ' . $annee;
                @endphp
                <a href="{{ url('/get_restaurations_parMois/'.$mois) }}">
                    <span class="month-badge font-weight-bold {{ $mois == $mois_exercice ? 'active' : '' }}">
                        {{ $nom_mois }}
                        <span class="count badge badge-primary">{{ $count }}</span>
                    </span>
                </a>
            @endforeach
            <a href="{{ url('/all_restaurations') }}">
                <span class="month-badge font-weight-bold">
                    <b>Toutes les restaurations</b>
                </span>
            </a>
        </div>
    </div>
</div>

<div class="row mb-3">
    <div class="col-md-6">
        <div class="input-group">
            <input type="text" id="searchEmploye" class="form-control" placeholder="Rechercher un employé (matricule, nom, direction)">
            <div class="input-group-append">
                <span class="input-group-text"><i class="zmdi zmdi-search"></i></span>
            </div>
        </div>
    </div>
</div>

{{-- Liste des employés --}}
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h5>Restaurations par employé <small class="text-muted">Cliquez sur un employé pour voir les détails</small></h5>
            </div>
            <div class="card-body" id="employesContainer">
                @forelse($restaurations_par_employe as $user_id => $data)
                <div class="employe-card"
                     data-employe-id="{{ $user_id }}"
                     data-total-restaurations="{{ $data['total_restaurations'] }}"
                     data-search="{{ strtolower(($data['employe']['matricule'] ?? '') . ' ' . ($data['employe']['name'] ?? '') . ' ' . ($data['employe']['direction'] ?? '')) }}">
                    
                    {{-- En-tête employé --}}
                    <div class="employe-header collapsed" data-toggle="collapse" data-target="#details-{{ $user_id }}" aria-expanded="false">
                        <div class="row align-items-center">
                            <div class="col-md-5">
                                <strong class="employe-name"><i class="zmdi zmdi-account mr-2"></i>{{ $data['employe']['matricule'] ?? '' }} - {{ $data['employe']['name'] ?? '' }}</strong>
                                <span class="badge badge-secondary matricule-badge ml-2">{{ $data['employe']['matricule'] ?? '' }}</span>
                            </div>
                            <div class="col-md-2">
                                <i class="zmdi zmdi-gps-dot mr-1"></i><span class="employe-direction">{{ $data['employe']['direction'] ?? '' }}</span>
                            </div>
                            <div class="col-md-3">
                                @php $moisData = $data['restaurations_par_mois'] ?? []; @endphp
                                @foreach(array_slice($moisData, 0, 3) as $mois => $count)
                                    <span class="badge-month">{{ $mois }} ({{ $count }})</span>
                                @endforeach
                                @if(count($moisData) > 3)
                                    <span class="badge-month">+{{ count($moisData) - 3 }}</span>
                                @endif
                            </div>
                            <div class="col-md-2 text-right">
                                <span class="employe-badge badge-total">
                                    <i class="zmdi zmdi-calendar-close mr-1"></i><span class="total-restaurations">{{ $data['total_restaurations'] }}</span> restauration(s)
                                </span>
                                <div class="progress-bar-restauration">
                                    <div class="progress-fill" style="width: {{ min(100, ($data['total_restaurations'] * 10)) }}%"></div>
                                </div>
                                <span class="toggle-icon"><i class="zmdi zmdi-chevron-down"></i></span>
                            </div>
                        </div>
                    </div>

                    {{-- Détails des restaurations --}}
                    <div id="details-{{ $user_id }}" class="collapse">
                        <div class="details-table">
                            <table class="table table-hover mb-0">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Date</th>
                                        <th>Jour</th>
                                        <th>Mois</th>
                                        <th>Shift</th>
                                        <th>Montant</th>
                                        <th>Observation</th>
                                        <th>
                                            Actions
                                            <a data-toggle="modal" data-target="#AddModal{{ $user_id }}" class="btn btn-sm btn-primary btn-action text-white ml-2" title="Ajouter une restauration">
                                                <i class="zmdi zmdi-plus"></i> Ajouter
                                            </a>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($data['details'] as $index => $restauration)
                                    <tr class="restauration-row" data-date="{{ date('m-Y', strtotime($restauration->date_restauration)) }}">
                                        <td>{{ $index + 1 }}</td>
                                        <td class="restauration-date">{{ date('d/m/Y', strtotime($restauration->date_restauration)) }}</td>
                                        <td>@php $jours = ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']; @endphp {{ $jours[date('w', strtotime($restauration->date_restauration))] }}</td>
                                        <td>@php $mois_noms = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']; @endphp {{ $mois_noms[date('m', strtotime($restauration->date_restauration)) - 1] }}</td>
                                        <td>{{ $restauration->nom_shift }}</td>
                                        <td>{{ $restauration->montant_repas ?? 0 }} FBU</td>
                                        <td>
                                            @if($restauration->a_manger == 0)
                                                <span class="badge badge-warning">{{ $restauration->observation_restauration ?? 'Aucune observation' }}</span>
                                            @else
                                                <span class="badge badge-success">{{ $restauration->observation_restauration ?? 'Aucune observation' }}</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($restauration->statut_restauration == 1)
                                                <a href="{{ url('delete_restauration', $restauration->id_restauration_user) }}" class="btn btn-sm btn-danger btn-action" title="Supprimer" onclick="return confirm('Supprimer cette restauration ?');">
                                                    <i class="zmdi zmdi-delete"></i>
                                                </a>
                                            @elseif($restauration->statut_restauration === 0)
                                                <span class="badge badge-info">Fermée</span>
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                {{-- MODAL ADD (par employé) --}}
                <div class="modal fade" id="AddModal{{ $user_id }}" tabindex="-1" role="dialog">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h6 class="modal-title">Enregistrer une restauration pour <mark>{{ $data['employe']['name'] }}</mark></h6>
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                            </div>
                            <form method="POST" action="{{ url('add_restauration_user') }}">
                                @csrf
                                <div class="modal-body">
                                    <div class="form-group">
                                        <label>Employé</label>
                                        <input type="text" class="form-control" value="{{ $data['employe']['matricule'] }} - {{ $data['employe']['name'] }}" disabled>
                                        <input type="hidden" name="user_id" value="{{ $data['employe']['id'] }}">
                                    </div>
                                    <div class="form-group">
                                        <label><b>Date de restauration</b> <span class="text-danger">*</span></label>
                                        <input type="date" class="form-control" name="date_restauration" required max="{{ date('Y-m-d') }}">
                                    </div>
                                    <div class="form-group">
                                        <label><b>Shift</b> <span class="text-danger">*</span></label>
                                        <select name="type_shift" class="form-control" required>
                                            <option value="">--- sélectionner shift ---</option>
                                            @foreach($type_shifts as $type_shift)
                                                <option value="{{ $type_shift->id_type_shift }}">{{ $type_shift->nom_shift }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label><b>A mangé ?</b> <span class="text-danger">*</span></label>
                                        <div class="radio inlineblock m-r-20">
                                            <input type="radio" name="a_manger" id="oui_{{ $user_id }}" class="radio-oui" value="1" checked>
                                            <label for="oui_{{ $user_id }}">Oui</label>
                                        </div>
                                        <div class="radio inlineblock">
                                            <input type="radio" name="a_manger" id="non_{{ $user_id }}" class="radio-non" value="0">
                                            <label for="non_{{ $user_id }}">Non</label>
                                        </div>
                                    </div>
                                    <div class="form-group observation-group" style="display: none;">
                                        <label><b>Motif / Observation restauration</b> <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="observation_restauration" placeholder="Entrez le motif de non consommation du repas" value="congé,......">
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="submit" class="btn btn-primary">Enregistrer</button>
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                @empty
                <div id="noResultsMessage" class="alert alert-warning text-center">
                    <i class="zmdi zmdi-info-outline"></i> Aucun employé trouvé.
                </div>
                @endforelse
            </div>
        </div>
    </div>
</div>

{{-- MODAL AJOUT GLOBAL --}}
<div class="modal fade" id="defaultModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="title">Enregistrer une restauration</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <form method="POST" action="{{ url('save_restauration') }}">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label><b>Employé</b> <span class="text-danger">*</span></label>
                        <select class="form-control show-tick ms select2" data-placeholder="Select" name="user_id" required>
                            <option value="">Sélectionner un employé</option>
                            @foreach ($employes as $employe)
                                <option value="{{ $employe->id }}">{{ $employe->matricule }} - {{ $employe->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label><b>Date de restauration</b> <span class="text-danger">*</span></label>
                        <input type="date" class="form-control" name="date_restauration" required max="{{ date('Y-m-d') }}">
                    </div>
                    <div class="form-group">
                        <label><b>Shift</b> <span class="text-danger">*</span></label>
                        <select class="form-control show-tick ms select2" name="type_shift" required>
                            <option value="">--- sélectionner shift ---</option>
                            @foreach($type_shifts as $type_shift)
                                <option value="{{ $type_shift->id_type_shift }}">{{ $type_shift->nom_shift }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label><b>A mangé ?</b> <span class="text-danger">*</span></label>
                        <div class="radio inlineblock m-r-20">
                            <input type="radio" name="a_manger" id="default_oui" class="radio-oui" value="1" checked>
                            <label for="default_oui">Oui</label>
                        </div>
                        <div class="radio inlineblock">
                            <input type="radio" name="a_manger" id="default_non" class="radio-non" value="0">
                            <label for="default_non">Non</label>
                        </div>
                    </div>
                    <div class="form-group observation-group" style="display: none;">
                        <label><b>Motif / Observation restauration</b> <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="observation_restauration" placeholder="Entrez le motif de non consommation du repas" value="congé,......">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Enregistrer</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- MODAL POUR TOUS LES EMPLOYÉS --}}
<div class="modal fade" id="Restauration_tous" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="title">Enregistrer la restauration pour tous les employés autorisés</h6>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <form method="POST" action="{{ url('save_tous_restauration') }}">
                @csrf
                <div class="modal-body">
                    <span class="badge badge-danger">{{ $employes_sans_restauration ?? 0 }}</span> Employés n’ayant pas mangé aujourd’hui en date du <b>{{ date('d/m/Y') }}</b> <br><br>
                    <div class="form-group">
                        <label><b>Date de restauration</b> <span class="text-danger">*</span></label>
                        <input type="date" class="form-control" name="date_restauration" required max="{{ date('Y-m-d') }}">
                    </div>
                    <div class="form-group">
                        <label><b>Shift</b> <span class="text-danger">*</span></label>
                        <select class="form-control show-tick ms select2" name="type_shift" required>
                            @foreach($type_shifts as $type_shift)
                                <option value="{{ $type_shift->id_type_shift }}" {{ $type_shift->id_type_shift==1 ? 'selected' : '' }}>{{ $type_shift->nom_shift }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label><b>A mangé ?</b> <span class="text-danger">*</span></label>
                        <div class="radio inlineblock m-r-20">
                            <input type="radio" name="a_manger" id="tous_oui" class="radio-oui" value="1" checked>
                            <label for="tous_oui">Oui</label>
                        </div>
                        <div class="radio inlineblock">
                            <input type="radio" name="a_manger" id="tous_non" class="radio-non" value="0">
                            <label for="tous_non">Non</label>
                        </div>
                    </div>
                    <div class="form-group observation-group" style="display: none;">
                        <label><b>Motif / Observation restauration</b> <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="observation_restauration" placeholder="Entrez le motif de non consommation du repas" value="congé,......">
                    </div>
                    <span class="text-danger">Assurez-vous que vous avez déjà enregistré les absences avant de cliquer sur <b>Enregistrer</b></span>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Enregistrer</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- MODAL RAPPORT RESTAURATION --}}
<div class="modal fade" id="Rapport_Restauration" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Générer un rapport de restauration</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form method="POST" action="{{ url('rapport_restauration') }}" target="_blank">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label><b>Date début</b> <span class="text-danger">*</span></label>
                        <input type="date" class="form-control" name="date_debut" required max="{{ date('Y-m-d') }}">
                    </div>
                    <div class="form-group">
                        <label><b>Date fin</b> <span class="text-danger">*</span></label>
                        <input type="date" class="form-control" name="date_fin" required max="{{ date('Y-m-d') }}">
                    </div>
                    <div class="form-group">
                        <label><b>Select rapport</b></label>
                        <select name="type_employe" class="form-control" required>
                            <option value="1">1. Qui ont mangé </option>
                            <option value="2">2. Qui n'ont pas mangé </option>
                            <option value="3" selected>3. Tous les employés </option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label><b>Select Shift</b> <span class="text-danger">*</span></label>
                        <select class="form-control show-tick ms select2" name="type_shift" required>
                            <option value="">--- sélectionner shift ---</option>
                            <option value="0">Tous : jour et nuit </option>
                            @foreach($type_shifts as $type_shift)
                                <option value="{{ $type_shift->id_type_shift }}">{{ $type_shift->nom_shift }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label><b>Type de format du rapport</b></label>
                        <select name="format" class="form-control">
                            <option value="excel" selected>Excel</option>    
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">
                        <i class="zmdi zmdi-download"></i> Générer
                    </button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- MODAL ACTION SUR LES RESTAURATIONS --}}
<div class="modal fade" id="Modal_Action" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Action sur les restaurations</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <form method="POST" action="{{ route('restauration.action') }}" id="formActionRestauration">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label><b>Type d'Action</b> <span class="text-danger">*</span></label>
                        <select name="action_type" class="form-control select2" id="action_type_restauration" required>
                            <option value="">Sélectionner l'action</option>
                            <option value="supprimer">Supprimer les restaurations du jour</option>
                            <option value="cloturer">Clôturer mois</option>
                        </select>
                    </div>

                    <div id="action_options_restaurations"></div>

                    <div class="form-group" id="confirmation_group" style="display: none;">
                        <div class="alert alert-warning">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="confirmation_restauration" name="confirmation_restauration" value="1">
                                <label class="form-check-label" for="confirmation_restauration">
                                    Je confirme vouloir effectuer cette action sur tous les enregistrements
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" id="btnSubmit" disabled>
                        <i class="zmdi zmdi-check"></i> Appliquer/Exécuter
                    </button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="zmdi zmdi-close"></i> Fermer
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@stop

@section('page-script')
<script src="{{ asset('assets/plugins/select2/select2.min.js') }}"></script>
<script src="{{ asset('assets/plugins/jquery-datatable/jquery.dataTables.js') }}"></script>
<script src="{{ asset('assets/plugins/jquery-datatable/dataTables.bootstrap4.min.js') }}"></script>

<script>
    // Préparation des mois pour l'action "clôturer" (passage de données PHP → JS)
    const moisOptions = @php
        $moisActuel = date('n') - 1;
        $anneeActuelle = date('Y');
        $options = [];
        foreach($mois_nom as $num => $nom) {
            $valeur = str_pad($num, 2, '0', STR_PAD_LEFT) . '-' . $anneeActuelle;
            $selected = ($num == $moisActuel) ? 'selected' : 'disabled';
            $options[] = ['value' => $valeur, 'label' => $valeur . ' — ' . $nom, 'selected' => $selected];
        }
        echo json_encode($options);
    @endphp;

    $(document).ready(function() {
        // Gestion des champs observation (motif) dans tous les modals
        function toggleObservationGroup(radioElement) {
            const modal = $(radioElement).closest('.modal');
            const observationDiv = modal.find('.observation-group');
            if (!observationDiv.length) return;

            const isNon = $(radioElement).hasClass('radio-non') && radioElement.checked;
            if (isNon) {
                observationDiv.show();
                observationDiv.find('input[name="observation_restauration"]').prop('required', true);
            } else {
                observationDiv.hide();
                const inputObs = observationDiv.find('input[name="observation_restauration"]');
                inputObs.prop('required', false);
                inputObs.val('');
            }
        }

        $(document).on('change', '.radio-oui, .radio-non', function() {
            toggleObservationGroup(this);
        });

        $('.modal').on('show.bs.modal', function() {
            const checkedRadio = $(this).find('.radio-oui:checked, .radio-non:checked');
            if (checkedRadio.length) {
                toggleObservationGroup(checkedRadio[0]);
            } else {
                const defaultOui = $(this).find('.radio-oui');
                if (defaultOui.length) toggleObservationGroup(defaultOui[0]);
            }
        });

        // Recherche d'employés
        $('#searchEmploye').on('input', function() {
            const query = $(this).val().toLowerCase();
            let hasVisible = false;
            $('.employe-card').each(function() {
                const searchData = $(this).data('search');
                if (searchData && searchData.includes(query)) {
                    $(this).show();
                    hasVisible = true;
                } else {
                    $(this).hide();
                }
            });
            $('#noResultsMessage').toggle(!hasVisible);
        });

        // Gestion des actions (supprimer / clôturer)
        $('#action_type_restauration').on('change', function() {
            const action = $(this).val();
            $('#confirmation_group').hide();
            $('#btnSubmit').prop('disabled', true);
            $('#confirmation_restauration').prop('checked', false);
            let optionsHtml = '';

            if (action === 'cloturer') {
                optionsHtml = `
                    <div class="form-group">
                        <b>Mois d'exercice <span class="text-danger">*</span></b>
                        <select name="mois_exercice" class="form-control select2" required>
                            ${moisOptions.map(opt => `<option value="${opt.value}" ${opt.selected}>${opt.label}</option>`).join('')}
                        </select>
                    </div>
                `;
                $('#confirmation_group').show();
            } else if (action === 'supprimer') {
                optionsHtml = `
                    <div class="form-group">
                        <label><b>Date de restauration</b> <span class="text-danger">*</span></label>
                        <input type="date" class="form-control" name="date_resto" required max="{{ date('Y-m-d') }}">
                    </div>
                `;
                $('#confirmation_group').show();
            }

            $('#action_options_restaurations').html(optionsHtml);
        });

        $('#confirmation_restauration').on('change', function() {
            $('#btnSubmit').prop('disabled', !$(this).is(':checked'));
        });

        $('#Modal_Action').on('hidden.bs.modal', function() {
            $('#action_type_restauration').val('');
            $('#action_options_restaurations').empty();
            $('#confirmation_group').hide();
            $('#confirmation_restauration').prop('checked', false);
            $('#btnSubmit').prop('disabled', true);
        });

        $('#formActionRestauration').on('submit', function(e) {
            const action = $('#action_type_restauration').val();
            if (!action) {
                e.preventDefault();
                alert('Veuillez sélectionner une action');
                return false;
            }
            if (action === 'supprimer' && !$('input[name="date_resto"]').val()) {
                e.preventDefault();
                alert('Veuillez sélectionner la date de restauration à supprimer');
                return false;
            }
        });
    });
</script>
@stop

<style>
    :root {
        --primary-color: #2c3e50;
        --success-color: #28a745;
        --warning-color: #ffc107;
        --danger-color: #dc3545;
        --info-color: #17a2b8;
    }
    .stats-card {
        background: rgba(44, 62, 80, 0.1);
        border-radius: 10px;
        padding: 15px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        margin-bottom: 20px;
        border-left: 4px solid transparent;
        position: relative;
        height: 100px;
    }
    .stats-card.primary { border-left-color: var(--primary-color); }
    .stats-card.success { border-left-color: var(--success-color); }
    .stats-card.warning { border-left-color: var(--warning-color); }
    .stats-card.info { border-left-color: var(--info-color); }
    .stats-value { font-size: 1.8rem; font-weight: bold; color: var(--primary-color); }
    .stats-label { color: #6c757d; font-size: 0.85rem; text-transform: uppercase; }
    .month-filter { background: white; padding: 15px; border-radius: 8px; margin: 20px 0; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
    .month-badge { display: inline-block; background: #e9ecef; color: var(--primary-color); padding: 5px 12px; border-radius: 20px; margin: 2px; font-size: 0.8rem; cursor: pointer; transition: all 0.2s; }
    .month-badge:hover, .month-badge.active { background: var(--primary-color); color: white; }
    .employe-card { background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin-bottom: 15px; border: 1px solid #e0e0e0; }
    .employe-header { background: #f8f9fa; padding: 15px 20px; border-radius: 10px 10px 0 0; cursor: pointer; border-bottom: 2px solid #e0e0e0; position: relative; }
    .badge-total { background: var(--primary-color); color: white; padding: 5px 10px; border-radius: 20px; font-size: 0.8rem; }
    .badge-month { background: var(--info-color); color: white; padding: 3px 8px; border-radius: 15px; font-size: 0.7rem; margin: 2px; display: inline-block; }
    .progress-bar-restauration { height: 5px; background: #e0e0e0; border-radius: 5px; overflow: hidden; width: 100px; display: inline-block; margin-left: 10px; }
    .progress-fill { height: 100%; background: var(--danger-color); border-radius: 5px; }
    .btn-action { padding: 4px 8px; margin: 0 2px; border-radius: 4px; }
    #searchEmploye { border-radius: 30px; border: 2px solid #e0e0e0; transition: all 0.3s; padding-left: 20px; }
    #searchEmploye:focus { border-color: var(--primary-color); box-shadow: 0 0 0 0.2rem rgba(44, 62, 80, 0.25); }
    .radio-inline { display: inline-flex; align-items: center; cursor: pointer; margin-right: 15px; }
    .radio-inline input { margin-right: 5px; }
</style>