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

<div class="body-wrapper">

  <div class="container-fluid">

    <link rel="stylesheet" href="{{ asset('assets/libs/datatables.net/css/jquery.dataTables.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="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">Bassins</h4>
                </div>
                <div class="col-3">
                    <div class="text-center">
                        <a href="#" id="addRowButton" class="btn btn-primary">Créer un bassin</a>
                    </div>
                </div>
              </div>
            </div>
          </div>
          <div class="datatables">
            <div class="card">
              <div class="card-body">
                <div class="table-responsive">
                      <table
                        id="list_bassins"
                        class="table border table-striped table-bordered display text-nowrap"
                      >
                        <thead>
                          <tr>
                            <th>Nom</th>
                            <th>Type</th>
                            <th></th>
                          </tr>
                        </thead>
                        <tbody>
                          
                            {% for bassin in bassins %}
                                <tr id="bassin-{{ bassin.id }}">
                                    <td>{{bassin.nom}}</td>
                                    <td>{{bassin.type}}</td>
                                    <td>
                                        <button type="button" class="btn mb-1 bg-danger-subtle rounded-circle round-30 btn-sm d-inline-flex align-items-center justify-content-center"><i class="fs-5 ti ti-trash" data-bs-toggle="modal" data-bs-target="#deleteBassinModal" data-bs-bassin="{{bassin.id}}"></i></button>
                                    </td>
                                </tr>
                            {% endfor %}
                          

                        </tbody>
                        <tfoot>
                          <tr>
                            <th>Nom</th>
                            <th>Type</th>
                            <th></th>
                          </tr>
                        </tfoot>
                      </table>
                    </div>
                </div>
              </div>
            </div>
            <!-- end Custom toolbar elements -->
          </div>
        </div>

<div class="modal fade" id="deleteBassinModal" tabindex="-1" aria-labelledby="deleteBassinModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="deleteChambreModalLabel">Supprimer un bassin</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="card-body p-4">
          <h4 class="card-title">Vous-vous vraiment supprimer ce bassin ?</h4>
          <input type="hidden" class="form-control" id="bassinId">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" onclick="deleteBassin()">Supprimer</button>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
      </div>
    </div>
  </div>
</div>

<script>
    $(document).ready(function() {
      var table = $('#list_bassins').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
        "lengthChange": false,   // Permettre de changer le nombre de lignes affichées
        "pageLength": 20,        // Nombre de lignes par page par défaut
        displayLength: 25,
        dom: 'Bfrtip', // Affiche les boutons en haut du tableau
        buttons: [
            {
                extend: 'excel',
                text: 'Exporter en Excel',
                filename: 'export_bassins', // Nom du fichier exporté en Excel
                className: 'btn btn-success'
            },
            {
                extend: 'pdf',
                text: 'Exporter en PDF',
                filename: 'export_bassins', // Nom du fichier exporté en PDF
                className: 'btn btn-danger'
            },
            {
                extend: 'print',
                text: 'Imprimer',
                className: 'btn btn-info'
            }
        ],
        language: {
            "info":           "Voir _START_ à _END_ de _TOTAL_ bassins",
            "infoEmpty":      "Voir 0 à 0 de 0 bassin",
            "search":         "Rechercher:",
            "paginate": {
                "first":      "Premier",
                "last":       "Dernier",
                "next":       "Suivant",
                "previous":   "Précédent"
            },
            "infoFiltered": '(filtrées de _MAX_ bassins au total)',
        }        
    });


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

    $('#addRowButton').on('click', function() {
        table.row.add([
            '<input type="text" class="form-control" id="nom" placeholder="Nom">',
            '<select type="text" class="form-control" id="type" placeholder="Type de bassin"><option value=""></option><option value="Piscine">Piscine</option><option value="Jacuzzi">Jacuzzi</option></select>',
            '<button class="btn btn-success saveRowButton">Enregistrer</button>'
        ]).draw(false);
    });

    $('#list_bassins tbody').on('click', '.saveRowButton', function() {
        var row = $(this).closest('tr');
        var nom = row.find('input#nom').val();
        var type = row.find('select#type').val();

        // Envoyer la mise à jour au serveur avec fetch et AJAX
        fetch('{{ path('bassin_save') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token("bassin_save") }}'
            },
            body: JSON.stringify({
              nom: nom,
              type: type
            })
        })
        .then(response => response.json())
        .then(data => {
            // Afficher une notification toast lorsque la mise à jour est réussie
            if (data.success) {
                showToast('Le bassin a bien été enregistré !');
                row.find('td:eq(0)').html(nom);
                row.find('td:eq(1)').html(type);
                row.find('td:eq(2)').html('');
            } else {
                showToast(data.message, 'error');
            }
        })
        .catch(error => {
            showToast('Erreur lors de la mise à jour.', 'error');
        });
    });

});

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

        const recipient = button.getAttribute('data-bs-bassin')
        const deleteId = document.getElementById('bassinId');

        deleteId.value = recipient
    })
    }
function deleteBassin(){
  
    const chambreId = document.getElementById('bassinId').value;
    const row = document.getElementById('bassin-'+chambreId);

        // Envoyer la mise à jour au serveur avec fetch et AJAX
        fetch('{{ path('bassin_delete') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token("bassin_delete") }}'
            },
            body: JSON.stringify({
              bassinId: chambreId
            })
        })
        .then(response => response.json())
        .then(data => {
            // Afficher une notification toast lorsque la mise à jour est réussie
            if (data.success) {
                showToast('Le bassin a bien été supprimé !');
                bootstrap.Modal.getInstance(document.getElementById('deleteBassinModal')).hide();
                //location.reload();
                row.remove();
            } else {
                showToast(data.message, 'error');
            }
        })
        .catch(error => {
            console.log(error);
            showToast('Erreur lors de la mise à jour.', 'error');
        });
    }

</script>

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