{% 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>

<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">Planning de nettoyage des chambres</h4>
                        </div>
                        <div class="col-3">
                            <div class="text-center">
                                <a href="{{ path('chambre_new') }}" class="btn btn-primary">Créer une chambre</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-between my-4">
                <button id="prevDayBtn" class="btn btn-primary">Jour précédent</button>
                <input type="date" id="dateInput" value="{{ 'now'|date('Y-m-d') }}" class="form-control">
                <button id="nextDayBtn" class="btn btn-primary">Jour suivant</button>
            </div>

            <div id="createPlanningContainer" style="text-align:center; padding-top:100px; padding-bottom:100px;">
                <button id="createPlanningButton" class="btn btn-success fs-5 p-5 mb-5">
                    Créer un planning de ménage
                </button>
            </div>

            <div class="datatables" id="tableContainer">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive mb-4  rounded-1">
              
                            <table id="list_chambres" class="table text-nowrap mb-0 align-middle w-100" >

                                <thead>
                                    <tr>
                                        <th>Nom</th>
                                        <th>Statut</th>
                                        <th>Chambre vide</th>
                                        <th>Nb Personnes</th>
                                        <th>Valet</th>
                                        <th>Gouvernante</th>
                                        <th>Suivi Ménage</th>
                                        <th>Chambre Prête</th>
                                        <th>Commentaire</th>
                                        <th>Etage</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th>Nom</th>
                                        <th>Statut</th>
                                        <th>Chambre vide</th>
                                        <th>Nb Personnes</th>
                                        <th>Valet</th>
                                        <th>Gouvernante</th>
                                        <th>Suivi Ménage</th>
                                        <th>Chambre Prête</th>
                                        <th>Commentaire</th>
                                        <th>Etage</th>
                                        <th></th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Sélectionner tous les switches
    const switches = document.querySelectorAll('.switch-control');

    switches.forEach(switchElement => {
        switchElement.addEventListener('click', function () {
            
            // Récupérer l'ID du switch
            const chambreId = this.getAttribute('data-id');

            // Envoyer la mise à jour au serveur avec fetch et AJAX
            fetch('{{ path('update_empty') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token("update_empty") }}'
                },
                body: JSON.stringify({
                    chambreId: chambreId,
                    valeur: this.checked
                })
            })
            .then(response => response.json())
            .then(data => {
                // Afficher une notification toast lorsque la mise à jour est réussie
                if (data.success) {
                    showToast('La chambre a été mis à jour avec succès !');
                } else {
                    showToast('Erreur lors de la mise à jour.', 'error');
                }
            })
            .catch(error => {
                showToast('Erreur lors de la mise à jour.', 'error');
            });
        });
    });

    
});

document.addEventListener("DOMContentLoaded", function () {
    const dateInput = document.getElementById("dateInput");
    const prevDayButton = document.getElementById("prevDayBtn");
    const nextDayButton = document.getElementById("nextDayBtn");

    // Fonction pour mettre à jour la date
    function updateDate(days) {
        let currentDate = new Date(dateInput.value);
        currentDate.setDate(currentDate.getDate() + days);
        dateInput.value = currentDate.toISOString().split("T")[0];
        loadMenageData(currentDate);
    }

    // Écouteurs d'événements pour les boutons
    prevDayButton.addEventListener("click", function () {
        updateDate(-1); // Jour précédent
    });

    nextDayButton.addEventListener("click", function () {
        updateDate(1); // Jour suivant
    });

    document.getElementById('dateInput').addEventListener('change', function() {
        const selectedDate = this.value;
        loadMenageData(selectedDate);
    });
});

$(document).ready(function() {
    // Fonction pour créer le planning de ménage
    function createPlanning(date) {
        $.ajax({
            url: '{{ path("create_planning_menage") }}', // Route Symfony qui retourne les ménages pour une date
            method: 'POST',
            data: { date: date },
            success: function(response) {
                if (response.success) {
                    loadMenageData(date); // Recharger les ménages pour la date
                } else {
                    alert('Erreur : ' + response.message);
                }
            },
            error: function() {
                alert("Erreur lors de la création du planning.");
            }
        });
    }

    // Écoute le clic sur le bouton "Créer un planning de ménage"
    $('#createPlanningButton').on('click', function() {
        const selectedDate = $('#dateInput').val(); // Obtient la date sélectionnée
        createPlanning(selectedDate);
    });
});

    $(document).ready(function() {
      var groupColumn = 9;
      let currentDate = new Date();

      $('#list_chambres').DataTable({
        "paging": true,          // Activer la pagination
        "searching": true,       // Activer la recherche
        "ordering": true,        // Activer le tri des colonnes
        "info": true,            // Afficher les informations sur le nombre de résultats
        "pageLength": 25, 
        "lengthMenu": [25, 50, 75, 100],
        "lengthChange": true,

        columnDefs: [{ visible: false, targets: groupColumn }],
        order: [[groupColumn, 'asc']],
        displayLength: 25,
        drawCallback: function (settings) {
            var api = this.api();
            var rows = api.rows({ page: 'current' }).nodes();
            var last = null;
    
            api.column(groupColumn, { page: 'current' })
                .data()
                .each(function (group, i) {
                    if (last !== group) {
                        $(rows)
                            .eq(i)
                            .before(
                                '<tr class="group"><td colspan="11"><strong>ETAGE ' +
                                    group +
                                    '</strong></td></tr>'
                            );
    
                        last = group;
                    }
                });
        },

        language: {
            "info":           "Voir _START_ à _END_ de _TOTAL_ chambres",
            "infoEmpty":      "Voir 0 à 0 de 0 chambre",
            "search":         "Rechercher:",
            "paginate": {
                "first":      "Premier",
                "last":       "Dernier",
                "next":       "Suivant",
                "previous":   "Précédent"
            },
            "infoFiltered": '(filtrées de _MAX_ chambres au total)',
            "lengthMenu": "Afficher _MENU_ chambres",
        },
        
        
    });


    $(
  ".buttons-copy, .buttons-csv, .buttons-print, .buttons-pdf, .buttons-excel"
).addClass("btn btn-primary mr-1");

loadMenageData(currentDate);
});

function loadMenageData(date) {
    fetch('{{ path("get_menage_by_date") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token("get_menage_by_date") }}' // Si un jeton CSRF est requis
        },
        body: JSON.stringify({ date: date })
    })
    .then(response => response.json())
    .then(data => {
        // Videz la DataTable avant d'ajouter les nouvelles données
        const table = $('#list_chambres').DataTable();
        table.clear();

        if (data.length === 0) {
            // Affichez le bouton de création si aucun ménage n'est trouvé
            $('#createPlanningContainer').show();
            $('#tableContainer').hide();
             table.clear();
        } else {
            // Masquer le bouton de création si des ménages existent
            $('#createPlanningContainer').hide();
            $('#tableContainer').show();
            // Ajouter les nouvelles données dans la DataTable
            data.forEach(menage => {
                var newRow;

    if (menage.statut === "Hors service" || menage.statut === "Ne pas déranger" || menage.suiviMenage === "Ne pas déranger") {
        // Ajouter une ligne vide si le statut est "Hors service"
        newRow = table.row.add([
             menage.chambre,`<span class="editable-statut" data-id="${menage.id}" data-value="${menage.statut}">
                ${menage.statut}
            </span>`, "", "", "", "", "", "", "", menage.etage, ""
        ]).draw(false);
    } else {
        // Ajouter une ligne normale
        newRow = table.row.add([
            menage.chambre,
            `<span class="editable-statut" data-id="${menage.id}" data-value="${menage.statut}">
                ${menage.statut}
            </span>`,
            `<div class="form-check form-switch">
                <input class="form-check-input switch-control chambreEmpty-switch" type="checkbox" id="chambreEmpty" ${menage.isEmpty ? 'checked' : ''} data-id="${menage.id}">
            </div>`,
            `<div class="nb-personne-control" data-id="${menage.id}">
                <button class="btn btn-sm btn-light btn-decrease" type="button">-</button>
                <span class="nb-personne-value">${menage.nbPersonne}</span>
                <button class="btn btn-sm btn-light btn-increase" type="button">+</button>
            </div>`,
            `<span class="editable-valet" data-id="${menage.id}" data-value="${menage.valetId}">
                ${menage.valetId ? menage.valet : '<i class="ti ti-circle-plus fs-5"></i>'}
            </span>`,
            `<span class="editable-gouvernante" data-id="${menage.id}" data-value="${menage.gouvernanteId}">
                ${menage.gouvernanteId ? menage.gouvernante : '<i class="ti ti-circle-plus fs-5"></i>'}
            </span>`,
            menage.suiviMenage,
            `<div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" ${menage.valide ? 'checked' : ''} disabled>
            </div>`,
            `<span class="editable-commentaire" data-id="${menage.id}" data-value="${menage.commentaireReception}">
                ${menage.commentaireReception ? menage.commentaireReception : '<i class="ti ti-circle-plus fs-5"></i>'}
            </span>`,
            menage.etage,
            ''
        ]).draw(false);
    }

                // Ajouter l'attribut data-id à la ligne nouvellement créée
                const tr = $(newRow.node()).attr('data-id', menage.id)[0];

                // Ajouter les classes en fonction des valeurs dans la ligne
                if (menage.statut === "Hors service") {
                    tr.classList.add('bg-warning-subtle', 'highlight-warning');
                } else if (menage.suiviMenage === "Ne pas déranger") {
                    tr.classList.add('bg-success-subtle', 'highlight-success');
                } else if (menage.suiviMenage === "En cours") {
                    tr.classList.add('bg-info-subtle', 'highlight-info');
                }
            });

            // Ajouter un écouteur d'événements `change` à chaque switch `chambreEmpty`
            $('#list_chambres tbody').on('change', '.chambreEmpty-switch', function () {
                const chambreId = $(this).data('id');
                const isEmpty = $(this).is(':checked');

                fetch('{{ path("update_chambre_empty_status") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token("update_chambre_empty_status") }}'
                    },
                    body: JSON.stringify({ chambreId: chambreId, isEmpty: isEmpty })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showToast('La chambre a été mise à jour avec succès !');
                    } else {
                        showToast('Erreur lors de la mise à jour.', 'error');
                    }
                })
                .catch(error => {
                    alert('Erreur lors de la mise à jour.');
                    console.error('Error updating status:', error);
                });
            });


            // Ajouter les écouteurs d'événements pour les boutons d'augmentation et de diminution
            $('#list_chambres tbody').on('click', '.btn-decrease', function () {
                const control = $(this).closest('.nb-personne-control');
                updateNbPersonne(control.data('id'), 'decrease');
            });

            $('#list_chambres tbody').on('click', '.btn-increase', function () {
                const control = $(this).closest('.nb-personne-control');
                updateNbPersonne(control.data('id'), 'increase');
            });

             // Ajouter l'événement de clic pour chaque switch de la classe `editable-valet`
            $('#list_chambres tbody').on('click', '.editable-valet', function () {
                const span = this;
                const originalValue = span.dataset.value;
                const chambreId = span.dataset.id;

                const select = document.createElement('select');
                select.className = 'form-control';

                const option = document.createElement('option');
                option.value = 0;
                option.text = '';
                select.appendChild(option);

                fetch('{{ path('chambre_valets', { id: 'CHAMBRE_ID' }) }}'.replace('CHAMBRE_ID', chambreId))
                    .then(response => response.json())
                    .then(valets => {
                        valets.forEach(valet => {
                            const option = document.createElement('option');
                            option.value = valet.id;
                            option.text = valet.name;
                            if (valet.id == originalValue) {
                                option.selected = true;
                            }
                            select.appendChild(option);
                        });

                        select.addEventListener('change', function () {
                            const newValetId = this.value;

                            fetch('{{ path('update_menage_valet', { id: 'CHAMBRE_ID', valet: 'STATUT_ID' }) }}'
                                .replace('CHAMBRE_ID', chambreId)
                                .replace('STATUT_ID', newValetId), {
                                method: 'POST',
                                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                                body: 'valet_id=' + newValetId,
                            })
                                .then(response => response.json())
                                .then(data => {
                                    if (data.success) {
                                        span.textContent = select.options[select.selectedIndex].text;
                                        span.dataset.value = newValetId;
                                        if (newValetId == 0) {
                                            span.innerHTML = '<i class="fas fa-plus-circle"></i>';
                                        }
                                    } else {
                                        alert('Erreur lors de la mise à jour du valet');
                                    }
                                    span.style.display = 'inline';
                                    select.replaceWith(span);
                                });
                        });

                        span.replaceWith(select);
                        select.focus();
                    });
            });


             // Ajouter l'événement de clic pour chaque switch de la classe `editable-gouvernante`
            $('#list_chambres tbody').on('click', '.editable-gouvernante', function () {
                const span = this;
                const originalValue = span.dataset.value;
                const chambreId = span.dataset.id;

                const select = document.createElement('select');
                select.className = 'form-control';

                const option = document.createElement('option');
                option.value = 0;
                option.text = '';
                select.appendChild(option);
            
                // Récupérer les valets associés à l'hôtel
                fetch('{{ path('chambre_gouvernantes', { id: 'CHAMBRE_ID' }) }}'
                            .replace('CHAMBRE_ID', chambreId))
                    .then(response => response.json())
                    .then(gouvernantes => {
                        gouvernantes.forEach(function(gouvernante) {
                            var option = document.createElement('option');
                            option.value = gouvernante.id;
                            option.text = gouvernante.name;
                            if (gouvernante.id === originalValue) {
                                option.selected = true;
                            }
                            select.appendChild(option);
                        });

                        select.addEventListener('change', function() {
                            var newGouvernanteId = this.value;
                            fetch('{{ path('update_menage_gouvernante', { id: 'CHAMBRE_ID', gouvernante: 'STATUT_ID' }) }}'
                                .replace('CHAMBRE_ID', chambreId)
                                .replace('STATUT_ID', newGouvernanteId), {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/x-www-form-urlencoded',
                                },
                                body: 'gouvernante_id=' + newGouvernanteId,
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    span.textContent = select.options[select.selectedIndex].text;
                                    span.dataset.value = span.textContent;
                                    if(newGouvernanteId == 0) {
                                        span.innerHTML = '<i class="fas fa-plus-circle"></i>';
                                    }
                                } else {
                                    alert('Erreur lors de la mise à jour du valet');
                                }
                                span.style.display = 'inline';
                                select.replaceWith(span);
                            });
                        });

                        span.replaceWith(select);
                        select.focus();
                    });
            });

             // Ajouter l'événement de clic pour chaque switch de la classe `editable-statut`
            $('#list_chambres tbody').on('click', '.editable-statut', function () {
                const span = this;
                const originalValue = span.dataset.value;
                const chambreId = span.dataset.id;

                const select = document.createElement('select');
                select.className = 'form-control';

               ["Libre", "Départ", "Recouche", "Hors service", "Ne pas déranger"].forEach(function(optionText) {
                    var option = document.createElement('option');
                    option.value = optionText;
                    option.text = optionText;
                    if (optionText === originalValue) {
                        option.selected = true;
                    }
                    select.appendChild(option);
                });
            

                select.addEventListener('change', function() {
                    var newStatut = this.value;
                    fetch('{{ path('update_menage_statut', { id: 'MENAGE_ID', statut: 'NEW_STATUT' }) }}'
                        .replace('MENAGE_ID', chambreId)
                        .replace('NEW_STATUT', newStatut), {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        body: 'statut=' + newStatut,
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            span.textContent = select.options[select.selectedIndex].text;
                            span.dataset.value = span.textContent;
                            loadMenageData(date);
                        } else {
                            alert('Erreur lors de la mise à jour du statut');
                        }
                        span.style.display = 'inline';
                        select.replaceWith(span);
                    });
                });

                span.replaceWith(select);
                select.focus();
            });

            $('#list_chambres tbody').on('click', '.editable-commentaire', function () {
                const span = this;
                let originalValue = span.dataset.value || '';
                const chambreId = span.dataset.id;

                const input = document.createElement('input');
                input.type = 'text';
                input.className = 'form-control';
                input.value = originalValue;

                input.addEventListener('blur', function () {
                    let newValue = this.value || 0;

                    fetch('{{ path('update_menage_commentaire', { id: 'CHAMBRE_ID', commentaire: 'STATUT_ID' }) }}'
                        .replace('CHAMBRE_ID', chambreId)
                        .replace('STATUT_ID', encodeURIComponent(newValue)), {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        body: 'commentaire=' + encodeURIComponent(newValue),
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            span.textContent = newValue;
                            span.dataset.value = newValue;
                            if (newValue == 0) {
                                span.innerHTML = '<i class="fas fa-plus-circle"></i>';
                            }
                        } else {
                            alert('Erreur lors de la mise à jour du commentaire');
                        }
                        span.style.display = 'inline';
                        input.replaceWith(span);
                    });
                });

                span.replaceWith(input);
                input.focus();
            });


        }
    })
    .catch(error => {
        alert('Erreur lors de la récupération des ménages.');
        console.error('Error fetching data:', error);
    });
    }

    function updateNbPersonne(id, action) {
        fetch('{{ path('update_nb_personne_menage', { id: 'CHAMBRE_ID', action: 'ACTION' }) }}'
                        .replace('CHAMBRE_ID', id)
                        .replace('ACTION', action), {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': '{{ csrf_token('update_nb_personne_menage') }}'
            },
            
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const valueElement = document.querySelector(`.nb-personne-control[data-id="${id}"] .nb-personne-value`);
                valueElement.textContent = data.nbPersonne;
                if(data.capacitemax){
                    showToast('Capacité maximale de la chambre atteinte', 'info');
                }
            } else {
                alert('Une erreur s\'est produite.');
            }
        });
    }

    </script>
{% include 'partials/footer.html.twig' %}