{% 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">Restaurant</h4>
                            Listez ici les restaurants que vous conseillez à vos clients
                        </div>
                        <div class="col-3">
                            
                        </div>
                    </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="row justify-content-center">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-body p-4">                                    
                                    <div class="">
                                        <div class="tab-pane fade active show" id="pills-security" role="tabpanel" aria-labelledby="pills-security-tab" tabindex="0">
                                            <div class="row">

                                                <div class="col-lg-8">
                                                    <div class="datatables">
                                                        <div class="card">
                                                            <div class="card-body">
                                                                <div class="table-responsive mb-4  rounded-1">
                  
                                                                    <table id="list_restaurants" class="table text-nowrap mb-0 align-middle w-100" >
                                                                    
                                                                        <thead>
                                                                        <tr>
                                                                            <th>Nom</th>
                                                                            <th>Type</th>
                                                                            <th>Adresse</th>
                                                                            <th></th>
                                                                        </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                        
                                                                            {% for restaurant in restaurants %}
                                                                                <tr id="restaurant-{{ restaurant.id }}">
                                                                                    <td>{{restaurant.nom}}</td>
                                                                                    <td>{{restaurant.type}}</td>
                                                                                    <td>{{restaurant.adresse}}<br/>{{restaurant.codePostal}} {{restaurant.ville}}</td>
                                                                                    <td class="text-end">
                                                                                        <button type="button" class="btn mb-1 bg-info-subtle rounded-circle round-30 btn-sm d-inline-flex align-items-center justify-content-center delete-btn" data-bs-restaurant="{{restaurant.id}}">
                                                                                            <i class="ti ti-eye fs-5"></i>
                                                                                        </button>
                                                                                        <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 delete-btn" data-bs-toggle="modal" data-bs-target="#deleteRestaurantModal" data-bs-restaurant="{{restaurant.id}}">
                                                                                            <i class="ti ti-trash fs-5"></i>
                                                                                        </button>
                                                                                    </td>
                                                                                </tr>
                                                                            {% endfor %}
                                                                        

                                                                        </tbody>
                                                                        <tfoot>
                                                                        <tr>
                                                                            <th>Nom</th>
                                                                            <th>Type</th>
                                                                            <th>Adresse</th>
                                                                            <th></th>
                                                                        </tr>
                                                                        </tfoot>
                                                                    </table>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-lg-4">
                                                    <div class="card border shadow-none">
                                                        <div class="card-body p-4">
                                                            <h4 class="card-title mb-3" id="formTitle">Nouveau restaurant</h4>

                                                            <div class="mb-3">
                                                                <label class="form-label">Type</label>
                                                                <select class="form-select" id="typeRestaurant">
                                                                    <option value="Traditionnel">Traditionnel</option>
                                                                    <option value="Gastronomique">Gastronomique</option>
                                                                    <option value="Burger">Burger</option>
                                                                    <option value="Pizzeria">Pizzeria</option>
                                                                    <option value="Asiatique">Asiatique</option>
                                                                    <option value="Autre">Autre</option>
                                                                </select>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label class="form-label">Nom</label>
                                                                <input type="text" class="form-control" id="nomRestaurant" value="">
                                                            </div>
                                                            <div class="mb-3">
                                                                <label class="form-label">Adresse</label>
                                                                <input type="text" class="form-control" id="adresseRestaurant" value="">
                                                            </div>
                                                            <div class="mb-3">
                                                                <label class="form-label">Code Postal</label>
                                                                <input type="number" class="form-control" id="codepostalRestaurant" value="">
                                                            </div>
                                                            <div class="mb-3">
                                                                <label class="form-label">Ville</label>
                                                                <input type="text" class="form-control" id="villeRestaurant" value="">
                                                            </div>
                                                            <div class="mb-3">
                                                                <label class="form-label">Téléphone</label>
                                                                <input type="number" class="form-control" id="telephoneRestaurant" value="">
                                                            </div>
                                                            <div class="mb-3">
                                                                <label class="form-label">Site internet</label>
                                                                <input type="text" class="form-control" id="siteRestaurant" value="">
                                                            </div>

                                                            <div class="mb-3">
                                                                <label class="form-label">Description</label>
                                                                <textarea class="form-control" rows="3" id="descriptionRestaurant"></textarea>
                                                            </div>
                                                            
                                                            <div class="d-flex align-items-center justify-content-between mt-4 gap-3">
                                                                <button class="btn btn-secondary" id="toggleFormButton" style="display: none;" onclick="switchToCreateForm()">Nouveau</button>
                                                                <button class="btn btn-primary" id="submitButton" onclick="enregistrerRestaurant()">Enregistrer</button>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>
                                            
                                
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            
            </div>
        </div>
        
    </div>
</div>

<script>

$(document).ready(function() {
      var table = $('#list_restaurants').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,
        language: {
            "info":           "Voir _START_ à _END_ de _TOTAL_ restaurants",
            "infoEmpty":      "Voir 0 à 0 de 0 restaurant",
            "search":         "Rechercher:",
            "paginate": {
                "first":      "Premier",
                "last":       "Dernier",
                "next":       "Suivant",
                "previous":   "Précédent"
            },
            "infoFiltered": '(filtrées de _MAX_ restaurants au total)',
            "zeroRecords": "Aucun restaurant correspondant trouvé",
            "emptyTable": "Aucun restaurant disponible dans le tableau"

        }        
    });
});

document.querySelectorAll('.bg-info-subtle[data-bs-restaurant]').forEach(button => {
        button.addEventListener('click', function () {
            const restaurantId = this.getAttribute('data-bs-restaurant');

            // Simule une requête pour obtenir les données du restaurant via un ID
            fetch(`{{ path('get_restaurant', {'id': 'RESTAURANT'}) }}`.replace('RESTAURANT', restaurantId), {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
                .then(response => response.json())
                .then(restaurant => {
                    switchToEditForm(restaurant);
                })
                .catch(error => {
                    console.error('Erreur lors de la récupération des données du restaurant:', error);
                });
        });
    });

    function enregistrerRestaurant(){
        const typeRestaurant = document.getElementById('typeRestaurant').value;
        const nomRestaurant = document.getElementById('nomRestaurant').value;
        const adresseRestaurant = document.getElementById('adresseRestaurant').value;
        const codepostalRestaurant = document.getElementById('codepostalRestaurant').value;
        const villeRestaurant = document.getElementById('villeRestaurant').value;
        const telephoneRestaurant = document.getElementById('telephoneRestaurant').value;
        const siteRestaurant = document.getElementById('siteRestaurant').value;
        const descriptionRestaurant = document.getElementById('descriptionRestaurant').value;

        // Envoyer la mise à jour au serveur avec fetch et AJAX
        fetch('{{ path('restaurant_add') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token("hotel_add_typedocument") }}'
            },
            body: JSON.stringify({
                typeRestaurant: typeRestaurant,
                nomRestaurant: nomRestaurant,
                adresseRestaurant: adresseRestaurant,
                codepostalRestaurant: codepostalRestaurant,
                villeRestaurant: villeRestaurant,
                telephoneRestaurant: telephoneRestaurant,
                siteRestaurant: siteRestaurant,
                descriptionRestaurant: descriptionRestaurant
            })
        })
        .then(response => response.json())
        .then(data => {
            // Afficher une notification toast lorsque la mise à jour est réussie
            if (data.success) {
                showToast('Le restaurant a été enregistré !');
                document.getElementById('typedocument').value = '';
                location.reload();
            } else {
                showToast(data.message, 'error');
            }
        })
        .catch(error => {
            showToast('Erreur lors de la mise à jour.', 'error');
        });
    }

    function modifierRestaurant(restaurantId) {
    const data = {
        type: document.getElementById('typeRestaurant').value,
        nom: document.getElementById('nomRestaurant').value,
        adresse: document.getElementById('adresseRestaurant').value,
        codePostal: document.getElementById('codepostalRestaurant').value,
        ville: document.getElementById('villeRestaurant').value,
        telephone: document.getElementById('telephoneRestaurant').value,
        siteInternet: document.getElementById('siteRestaurant').value,
        descriptionRestaurant: document.getElementById('descriptionRestaurant').value

    };

    fetch(`{{ path('update_restaurant', {'id': 'RESTAURANT'}) }}`.replace('RESTAURANT', restaurantId), {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': 'votre_token_csrf' // Ajoutez votre token CSRF si nécessaire
        },
        body: JSON.stringify(data)
    })
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                showToast('Restaurant modifié avec succès.');
                location.reload(); // Recharger la page pour voir les modifications
            } else {
                showToast('Erreur lors de la modification du restaurant.', 'error');
            }
        })
        .catch(error => {
            console.error('Erreur lors de la modification du restaurant:', error);
            alert('Une erreur est survenue.');
        });
}

    function switchToEditForm(restaurant) {
        // Remplir les champs avec les informations du restaurant
        document.getElementById('typeRestaurant').value = restaurant.type || '';
        document.getElementById('nomRestaurant').value = restaurant.nom || '';
        document.getElementById('adresseRestaurant').value = restaurant.adresse || '';
        document.getElementById('codepostalRestaurant').value = restaurant.codePostal || '';
        document.getElementById('villeRestaurant').value = restaurant.ville || '';
        document.getElementById('telephoneRestaurant').value = restaurant.telephone || '';
        document.getElementById('siteRestaurant').value = restaurant.siteInternet || '';
        document.getElementById('descriptionRestaurant').value = restaurant.description || '';

        // Changer le texte et l'action du bouton d'enregistrement
        const submitButton = document.getElementById('submitButton');
        submitButton.textContent = 'Enregistrer les modifications';
        submitButton.setAttribute('onclick', `modifierRestaurant(${restaurant.id})`);

        // Changer le titre
        document.getElementById('formTitle').textContent = `Modifier le restaurant : ${restaurant.nom}`;

        // Afficher le bouton pour basculer vers le formulaire d'ajout
        document.getElementById('toggleFormButton').style.display = 'inline-block';
    }

    function switchToCreateForm() {
        // Réinitialiser les champs du formulaire
        document.getElementById('typeRestaurant').value = '';
        document.getElementById('nomRestaurant').value = '';
        document.getElementById('adresseRestaurant').value = '';
        document.getElementById('codepostalRestaurant').value = '';
        document.getElementById('villeRestaurant').value = '';
        document.getElementById('telephoneRestaurant').value = '';
        document.getElementById('siteRestaurant').value = '';
        document.getElementById('descriptionRestaurant').value = '';

        // Changer le texte et l'action du bouton d'enregistrement
        const submitButton = document.getElementById('submitButton');
        submitButton.textContent = 'Enregistrer';
        submitButton.setAttribute('onclick', 'enregistrerRestaurant()');

        // Réinitialiser le titre
        document.getElementById('formTitle').textContent = 'Nouveau restaurant';

        // Cacher le bouton de basculement
        document.getElementById('toggleFormButton').style.display = 'none';
    }
    
</script>

{% include '@Client/client/modal/delete_restaurant.html.twig' %}

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