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

<div id="toast-container" class="alert alert-dismissible text-white border-0 fade remove-close-icon position-fixed end-0 top-4" 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">
        <span id="notification"></span>
    </div>
</div>

<div class="container-fluid">
    <div class="card card-body bg-info-subtle py-3">
        <div class="row align-items-center">
            <div class="col-12">
                <div class="d-sm-flex align-items-center justify-space-between">
                    <h4 class="mb-4 mb-sm-0 card-title"><span id="nomhotel">{{hotel.nom}}</span></h4>
                    <nav aria-label="breadcrumb" class="ms-auto">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item d-flex align-items-center">
                        <a class="btn btn-light" href="{{path('admin_hotel')}}">
                          <i class="ti ti-arrow-bar-to-left fs-5"></i>
                        </a>
                        </li>
                    </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <ul class="nav nav-pills user-profile-tab  sticky-top" id="pills-tab" role="tablist" style="top: 80px;z-index: 1020;background-color: white;">
            <li class="nav-item" role="presentation">
                <button class="nav-link position-relative rounded-0 active d-flex align-items-center justify-content-center bg-transparent fs-3 py-4" id="pills-account-tab" data-bs-toggle="pill" data-bs-target="#pills-account" type="button" role="tab" aria-controls="pills-account" aria-selected="true">
                    <i class="ti ti-building-skyscraper me-2 fs-6"></i>
                    <span class="d-none d-md-block">Hôtel</span> 
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link position-relative rounded-0 d-flex align-items-center justify-content-center bg-transparent fs-3 py-4" id="pills-modules-tab" data-bs-toggle="pill" data-bs-target="#pills-modules" type="button" role="tab" aria-controls="pills-modules" aria-selected="false">
                    <i class="ti ti-hexagons me-2 fs-6"></i>
                    <span class="d-none d-md-block">Modules</span> 
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link position-relative rounded-0 d-flex align-items-center justify-content-center bg-transparent fs-3 py-4" id="pills-modules-tab" data-bs-toggle="pill" data-bs-target="#pills-modules" type="button" role="tab" aria-controls="pills-modules" aria-selected="false">
                    <i class="ti ti-license me-2 fs-6"></i>
                    <span class="d-none d-md-block">Contrat</span> 
                </button>
            </li>
        </ul>
        <div class="card-body">
            <div class="tab-content" id="pills-tabContent">
                <div class="tab-pane fade show active" id="pills-account" role="tabpanel" aria-labelledby="pills-account-tab" tabindex="0">
                    {% include 'admin/hotel/tabs/tab_hotel.html.twig' %}
                </div>

                <div class="tab-pane fade" id="pills-modules" role="tabpanel" aria-labelledby="pills-modules-tab" tabindex="0">
                    {% include 'admin/hotel/tabs/tab_modules.html.twig' %}
            
                </div>

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

<script>

document.addEventListener('DOMContentLoaded', function () {
    // Sélectionner tous les switches
    const switches2 = document.querySelectorAll('.switch-control2');

    switches2.forEach(switchElement => {
        switchElement.addEventListener('click', function () {
            
            // Récupérer l'ID du switch
            const switchId = this.getAttribute('data-id');
            var id = document.getElementById('hotelId').value;

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

</script>

<script src="{{ asset('assets/js/data/crud.js') }}"></script>
<script src="{{ asset('assets/js/data/data.js') }}"></script>

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