{% include 'partials/header.html.twig' %}
    <link rel="stylesheet" href="{{ asset('assets/libs/datatables.net-bs5/css/dataTables.bootstrap5.min.css') }}">

    <script src="{{ asset('assets/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net/js/dataTables.buttons.min.js') }}"></script>
    
    <div class="body-wrapper">

        <div class="container-fluid">
            <div class="card bg-primary-subtle shadow-none position-relative overflow-hidden mb-4">
                <div class="card-body px-4 py-3">
                    <div class="row align-items-center">
                        <div class="col-9">
                            <h4 class="fw-semibold mb-8">Demandes de congés</h4>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-7 d-flex align-items-stretch">
                            <div class="card w-100 border position-relative overflow-hidden">
                                <div class="card-body p-4">
                                    <h4 class="card-title">Mes demandes de congés</h4>
                                    <div class="table-responsive mb-4  rounded-1" style="overflow-x: initial;">
                
                                        <table id="list_demandes" class="table text-nowrap mb-0 align-middle w-100" >
                                            <thead>
                                            <tr>
                                                <th>Dates</th>
                                                <th>Type</th>
                                                <th>Demandé le</th>
                                                <th>Accepté</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                            <tfoot>
                                            <tr>
                                                <th>Dates</th>
                                                <th>Type</th>
                                                <th>Demandé le</th>
                                                <th>Accepté</th>
                                            </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-5 d-flex align-items-stretch">
                            <div class="card w-100 border position-relative overflow-hidden">
                                <div class="card-body p-4">
                                    <h4 class="card-title">Déposer une demande de congés</h4>
                                    <p class="card-subtitle mb-4">Remplissez ce formulaire pour déposer une nouvelle demande de congés. Vous serez avertis dès qu'elle sera traitée</p>
                                    <form id="demandeCongeForm">
                                        <div class="p-3 py-5">
                                            <div class="input-daterange input-group" id="date-range">
                                                <span class="input-group-text bg-primary b-0 text-white"> du </span>
                                                <input type="date" class="form-control" data-field="dateDebut" name="dateDebut" id="dateDebut" required>

                                                <span class="input-group-text bg-primary b-0 text-white"> au </span>

                                                <input type="date" class="form-control" data-field="dateFin" name="dateFin" id="dateFin" required>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label mt-2">Type de congés</label>
                                                <select class="form-select" data-field="type" id="type" name="type" required>
                                                    <option value="">Sélectionnez un type de congé...</option>
                                                    <option value="Congés payés">Congés payés</option>
                                                    <option value="Congés sans solde">Congés sans solde</option>
                                                    <option value="Absence autorisée">Absence autorisée</option>
                                                    <option value="Congé paternité">Congé paternité</option>
                                                </select>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label mt-2">Raison</label>
                                                <textarea class="form-control" rows="3" data-field="raison" id="raison" name="raison"></textarea>
                                            </div>
                                            <div class="ms-auto mt-3 mt-md-0">
                                                <button type="button" class="btn btn-primary" data-form="demandeCongeForm" data-btn="enregistrer" data-route="{{ path('monespace_demandeconge_send_conge') }}">
                                                    <i class="ti ti-send fs-4"></i>Envoyer ma demande
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


<script>

      const listeDemandes = $('#list_demandes').DataTable({
        "paging": true,          // Activer la pagination
        "searching": false,       // Activer la recherche
        "ordering": false,        // Activer le tri des colonnes
        "info": true,            // Afficher les informations sur le nombre de résultats
        "lengthChange": false,   // Permettre de changer le nombre de lignes affichées
        "pageLength": 20,        // Nombre de lignes par page par défaut
        processing: true, // Affiche un indicateur de chargement
        serverSide: true, // Active le mode server-side
        ajax: {
            url: '{{path('ajax_list_demande_conge_by_user')}}', // URL du backend
            type: 'GET',
            cache: false,
            
        },
        columns: [
            { data: 'dates' },          
            { data: 'type' },       
            { data: 'datedemande' },
            { data: 'accept' },     
        ],
        language: {
            "info":           "Voir _START_ à _END_ de _TOTAL_ demandes",
            "infoEmpty":      "Voir 0 à 0 de 0 demande",
            "search":         "Rechercher:",
            "paginate": {
                "first":      "Premier",
                "last":       "Dernier",
                "next":       "Suivant",
                "previous":   "Précédent"
            },
            "infoFiltered": '(filtrées de _MAX_ demandes au total)',
            "zeroRecords": "Aucune demande de congés correspondante trouvée",
            "emptyTable": "Aucune demande de congés n'est enregistrée",

        },
        drawCallback: function () {
            const scope = document.querySelector('#list_demandes');
            const els = scope.querySelectorAll('[data-bs-toggle="popover"]');
            els.forEach(el => {
                // Détruire l’instance existante si elle existe
                bootstrap.Popover.getInstance(el)?.dispose();
                // Créer une nouvelle instance
                new bootstrap.Popover(el, {
                container: 'body',
                html: true,      // si tu veux accepter du HTML dans data-bs-content
                sanitize: false  // (⚠️ seulement si tu maîtrises ton contenu)
                });
            });
        } 
    });

</script>

<script src="{{ asset('assets/js/bundle/employe/demandeconge.js') }}"></script>

{% include 'partials/footer.html.twig' %}