{% include 'partials/header_lite.html.twig' %}
<style>
    .all-category a{
        height:100%;
    }

    .all-category{
        padding:5px;
    }
</style>
<div id="toast-container" class="alert alert-dismissible bg-success text-white border-0 fade remove-close-icon position-fixed end-0 top-4 z-3" role="alert">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    <div class="d-flex align-items-center font-medium me-3 me-md-0">
        <i class="ti ti-info-circle fs-5 me-2 text-success"></i>
        <span id="notification"></span>
    </div>
</div>

<div class="container-fluid note-has-grid mt-10">  
    <div class="tab-content">

        {% if not nochambre %}
            <div class="card bg-info-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">{{ chambre.societe.nom }}</h4>
                            <h3 class="fw-semibold mb-8">{{ chambre.nom }}</h4>
                        </div>
                    </div>
                </div>
            </div>
        {% endif  %}

        

        {% if nochambre %}
            <div class="col-md-12 text-center">
                <div class="alert alert-warning text-warning" role="alert">
                    <strong>Aucune chambre trouvée !</strong><br/>Contactez la réception
                </div>
            </div>
        {% else %}

            <div id="note-full-container" class="note-has-grid row">

                <div class="col-md-6 single-note-item all-category">
                    <a href="javascript:void(0);" class="card bg-success text-white w-100 card-hover" onclick="nepasderanger();">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <i class="ti ti-user-exclamation display-4"></i>
                                <div class="ms-auto">
                                    <i class="ti ti-arrow-right fs-8"></i>
                                </div>
                            </div>
                            <div class="mt-4">
                                <h4 class="card-title mb-1 text-white">Ne pas déranger</h4>
                                Indiquez à la réception que vous ne souhaitez pas être déranger. <br/>
                                <i>Votre chambre ne sera pas nettoyée</i>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-md-6 single-note-item all-category">
                    <a href="#" class="card bg-secondary text-white w-100 card-hover" data-bs-toggle="modal" data-bs-target="#commentaireModal">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <i class="ti ti-messages display-4"></i>
                                <div class="ms-auto">
                                    <i class="ti ti-arrow-right fs-8"></i>
                                </div>
                            </div>
                            <div class="mt-4">
                                <h4 class="card-title mb-1 text-white">Une question ? Une remarque ?</h4>
                                    
                             </div>
                        </div>
                    </a>
                </div>

                {% if livretAccueil is not null %}
                    <div class="col-md-6 single-note-item all-category">
                        <a href="{{ asset('hotels/' ~ livretAccueil) }}" target="_blank" class="card bg-dark text-white w-100 card-hover">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <i class="ti ti-clipboard-text display-4"></i>
                                    <div class="ms-auto">
                                        <i class="ti ti-arrow-right fs-8"></i>
                                    </div>
                                </div>
                                <div class="mt-4">
                                    <h4 class="card-title mb-1 text-white">Consultez le livret d'accueil</h4>
                                    
                                </div>
                            </div>
                        </a>
                    </div>
                {% endif %}

                <div class="col-md-6 single-note-item all-category">
                    <a href="" class="card bg-warning text-white w-100 card-hover" data-bs-toggle="modal" data-bs-target="#restaurantModal">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <i class="ti ti-tools-kitchen-2 display-4"></i>
                                <div class="ms-auto">
                                    <i class="ti ti-arrow-right fs-8"></i>
                                </div>
                            </div>
                            <div class="mt-4">
                                <h4 class="card-title mb-1 text-white">Un petit creux ?</h4>
                                Découvrez la liste des restaurants que nous vous conseillons
                                
                            </div>
                        </div>
                    </a>
                </div>

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

<!-- Modal Envoyer un commentaire -->
<div class="modal fade" id="commentaireModal" tabindex="-1" aria-labelledby="commentaireModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="commentaireModalLabel">Envoyer un commentaire</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="formhotel">
            <div class="row">
                <div class="col-lg-6">
                    <div class="mb-4">
                        <textarea type="text" class="form-control" id="commentaire" name="commentaire" placeholder="Votre message" value="" style="width: 500px; background-color: white;"></textarea>
                    </div>
                </div>
                <div class="col-12">
                    <div class="d-flex align-items-center justify-content-end mt-4 gap-3">
                        <button class="btn btn btn-success" id="btnsubmit" disabled>Envoyer mon message</button>
                    </div>
                </div>
            </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal Liste des restaurants-->
<div class="modal fade" id="restaurantModal" tabindex="-1" aria-labelledby="restaurantModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="crestauranteModalLabel">Restaurants</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        {% if restaurants|length == 0 %}
            <div class="mt-5 text-center">
                <div class="alert alert-light m-3" role="alert">
                    <h5 class="fw-bold">Aucune restaurant n'est renseigné </h5>
                </div>
            </div>
        {% else %}
            {% for restaurant in restaurants %}
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">{{restaurant.type}}</div>
                        <div class="card-body">
                        <h4 class="card-title">{{restaurant.nom}}</h4>
                        <p class="card-text">
                            {{restaurant.description}}
                        </p>
                        {% if restaurant.telephone %}
                            <a href="tel:0{{ restaurant.telephone }}" class="btn btn-success me-2" title="Appeler le restaurant">
                                <i class="ti ti-phone fs-5"></i>
                            </a>
                        {% endif %}
                        <!-- Bouton pour localiser sur Google Maps -->
                        {% if restaurant.adresse and restaurant.ville %}
                            <a href="https://www.google.com/maps/search/?api=1&query={{ restaurant.adresse|url_encode }} {{ restaurant.codePostal|url_encode }} {{ restaurant.ville|url_encode }}" 
                            target="_blank" 
                            class="btn btn-info me-2" 
                            title="Localiser sur Google Maps">
                                <i class="ti ti-map-pin fs-5"></i>
                            </a>
                        {% endif %}

                        <!-- Bouton pour visiter le site web -->
                        {% if restaurant.site %}
                            <a href="{{ restaurant.site }}" target="_blank" class="btn btn-primary me-2" title="Visiter le site web">
                                <i class="ti ti-world fs-5"></i>
                            </a>
                        {% endif %}
                    </div>
                    </div>
                </div>
            {% endfor %}
        {% endif %}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
      </div>
    </div>
  </div>
</div>

<script>
    var commentaire = document.getElementById('commentaire');
    var submitBtn = document.getElementById('btnsubmit');

    // Ajouter un événement 'input' sur le textarea
    commentaire.addEventListener('input', function() {
        // Si le champ n'est pas vide, activer le bouton
        if (commentaire.value.trim() !== '') {
            btnsubmit.disabled = false;
        } else {
            // Sinon, désactiver le bouton
            btnsubmit.disabled = true;
        }
    });
 // Gérer la soumission du formulaire de la modal
    document.getElementById('formhotel').addEventListener('submit', function(event) {
        event.preventDefault();
        var commentaire = document.getElementById('commentaire').value;
        var form = document.getElementById('formhotel');

        fetch('{{ path('client_commentaire') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token("hotel_update") }}'
            },
            body: JSON.stringify({
                commentaire: commentaire,
                token: '{{ token }}'
            })
        })
        .then(response => response.json())
            .then(data => {
                // Afficher une notification toast lorsque la mise à jour est réussie
               if (data.success) {
                form.reset();
                showToast('Votre commentaire a bien été envoyé.', 'success');
                bootstrap.Modal.getInstance(document.getElementById('commentaireModal')).hide();
            } else {
                showToast('Erreur lors de la soumission de votre demande.', 'error');
            }
            }).catch(error => console.error('Erreur:', error));

    });

    function nepasderanger(){
        // Envoyer la mise à jour au serveur avec fetch et AJAX
        fetch('{{ path('client_nepasderanger') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token("chambre_generate_qrcode_client") }}'
            },
            body: JSON.stringify({
                token: '{{ token }}'
            })        
        })
        .then(response => response.json())
        .then(data => {
            // Afficher une notification toast lorsque la mise à jour est réussie
            if (data.success) {
                showToast('Votre demande a bien été prise en compte.', 'success');
            } else {
                showToast('Erreur lors de la soumission de votre demande.', 'error');
            }
        })
        .catch(error => {
            showToast('Erreur lors de la génération des QRCodes.', 'error');
        });
    }

    // Fonction pour afficher une notification toast
    function showToast(message, type = 'success') {
        const toastContainer = document.getElementById('toast-container');
        const toast = document.getElementById('notification');
        toastContainer.classList.add('show');
        toastContainer.classList.add('alert-'+type);
        toast.innerHTML = `${message}`;

        // Retirer l'alerte après 3 secondes
        setTimeout(() => {
            toastContainer.classList.remove('show'); // Commence l'animation de disparition
            setTimeout(() => {
            }, 300); // Délai pour la transition de disparition
        }, 3000); // Durée d'affichage de l'alerte (3 secondes)
    }

</script>
            
            {% endif  %}  
               

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

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