{% 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>
    <script src="{{ asset('assets/libs/datatables.net/js/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net/js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net/js/buttons.print.min.js') }}"></script>
    <script src="{{ asset('assets/libs/jszip/jszip.min.js') }}"></script>
    <script src="{{ asset('assets/libs/pdfmake/pdfmake.min.js') }}"></script>
    <script src="{{ asset('assets/libs/pdfmake/vfs_fonts.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">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-end mt-3">
          </div>
          <div class="datatables">
            <div class="card">
              <div class="card-body">
                <div class="text-end">
                        <a href="{{ path('export_qrcodes_zip') }}" class="btn btn-outline-primary">Télécharger les QRCodes</a> 
                        <a href="{{ path('export_qrcodes_pdf') }}" class="btn btn-outline-primary">Imprimer les QRCodes</a>                   
                </div>
                <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>Capacité</th>
                            <th>QR Code</th>
                            <th>Etage</th>
                            <th></th>
                          </tr>
                        </thead>
                        <tbody>
                        </tbody>
                        <tfoot>
                          <tr>
                            <th>Nom</th>
                            <th>Statut</th>
                            <th>Capacité</th>
                            <th>QR Code</th>
                            <th>Etage</th>
                            <th></th>
                          </tr>
                        </tfoot>
                      </table>
                    </div>
                </div>
              </div>
            </div>
            <!-- end Custom toolbar elements -->
          </div>
        </div>
    </div>  

<script>

      var groupColumn = 4;

const tableEntity = $('#list_chambres').DataTable({
    "processing": true,
    "serverSide": true,
    "paging": true,
    "pageLength": 25, 
    "lengthMenu": [25, 50, 75, 100],
    "lengthChange": true,
    "ajax": {
        "url": "{{ path('ajax_list_chambre') }}",
        "type": "GET",
        
    },

    "columns": [
        { "data": "nom" },
        { "data": "statut" },
        { "data": "capacite" },
        { "data": "qrcode" },
        { "data": "etage" }, 
        { "data": "action" }
    ],

    "order": [[groupColumn, 'asc']], 

    "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="6"><strong>ÉTAGE ${group}</strong></td>
                    </tr>`
                );
                last = group;
            }
        });
    },

    "createdRow": function (tr, data) {
        console.log(data); 
        if (data.statut === "Hors service") {
            tr.classList.add('bg-warning-subtle', 'highlight-warning');
        } else if (data.statut === "Ne pas déranger") {
            tr.classList.add('bg-success-subtle', 'highlight-success');
        } else if (data.statut === "En cours") {
            tr.classList.add('bg-info-subtle', 'highlight-info');
        }
    },

    "dom": '<"top"Bfl>rt<"bottom"ip><"clear">',
    "buttons": [
        {
            extend: 'excel',
            text: 'Exporter en Excel',
            filename: 'export_chambres',
            className: 'btn btn-success'
        },
        {
            extend: 'pdf',
            text: 'Exporter en PDF',
            filename: 'export_chambres',
            className: 'btn btn-danger'
        },
        {
            extend: 'print',
            text: 'Imprimer',
            className: 'btn btn-info'
        }
    ],

    "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"
        },
        "lengthMenu": "Afficher _MENU_ chambres",
        "infoFiltered": "(filtrées de _MAX_ chambres au total)",
        "zeroRecords": "Aucun enregistrement correspondant trouvé",
        "emptyTable": "Aucune donnée disponible dans le tableau"
    }
});


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

    const cancelModal = document.getElementById('cancelModal');
   
    cancelModal.addEventListener('show.bs.modal', event => {
        const button = event.relatedTarget

        const recipient = button.getAttribute('data-bs-chambre')
        const cancelId = document.getElementById('cancelchambreId');

        cancelId.value = recipient
    });

    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.action-goOutOfService').forEach(function (button) {
            button.addEventListener('click', function (event) {
                event.preventDefault();
                const chambreId = this.closest('tr').dataset.id; // ID récupéré de la ligne ou du bouton
                openHSModal(chambreId);  // Appel de la fonction pour ouvrir la modal
            });
        });
    });

    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.action-goOutOfService').forEach(function (button) {
            button.addEventListener('click', function (event) {
                event.preventDefault();
                const chambreId = this.closest('tr').dataset.id; // ID récupéré de la ligne ou du bouton
                openHSModal(chambreId);  // Appel de la fonction pour ouvrir la modal
            });
        });
    });

</script>

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

{% include '@Hotel/chambre/modal/chambre_hs.html.twig' %}
{% include '@Hotel/chambre/modal/chambre_cancel_hs.html.twig' %}

{% include 'partials/modal/delete_modal.html.twig' %}

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