{% 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 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">
        <span id="notification"></span>
    </div>
</div>
<div class="container-fluid">
    <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">Nouvel hotel</h4>
            </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>
        </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">
                    <div class="row">
                        <div class="col-12">
                            <div class="card w-100 position-relative overflow-hidden mb-0">
                                <div class="card-body p-4">
                                    <h5 class="card-title fw-semibold">Détails de l'hôtel</h5>
                                    <p class="card-subtitle mb-4">Ajoutez les informations de l'hôtel</p>
                                    <form id="addHotel">
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="mb-4">
                                                    <label for="nom" class="form-label fw-semibold">Nom de l'hôtel</label>
                                                    <input type="text" class="form-control" data-field="nom" id="nom" placeholder="" required>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="mb-4">
                                                    <label for="nom" class="form-label fw-semibold">Nombre d'étage(s)</label>
                                                    <input type="number" class="form-control" min="0" data-field="nbEtage" id="nbEtage" placeholder="" required>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="">
                                                    <label for="adresse" class="form-label fw-semibold">Adresse</label>
                                                    <input type="text" class="form-control" data-field="adresse" id="adresse" placeholder="Adresse">
                                                </div>
                                            </div>
                                            <div class="col-lg-6 pt-2">
                                                <div class="mb-4">
                                                    <label for="codepostal" class="form-label fw-semibold">Code postal</label>
                                                    <input type="number" class="form-control" data-field="codepostal" id="codepostal" placeholder="">
                                                </div>
                                                <div class="mb-4">
                                                    <label for="email" class="form-label fw-semibold">Email</label>
                                                    <input type="email" class="form-control" data-field="email" id="email" placeholder="">
                                                </div>
                                            </div>
                                            <div class="col-lg-6 pt-2">
                                                <div class="mb-4">
                                                    <label for="ville" class="form-label fw-semibold">Ville</label>
                                                    <input type="text" class="form-control" data-field="ville" id="ville" placeholder="">
                                                </div>
                                                <div class="mb-4">
                                                    <label for="telephone" class="form-label fw-semibold">Téléphone</label>
                                                    <input type="number" class="form-control" data-field="telephone" id="telephone" placeholder="">
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="d-flex align-items-center justify-content-end mt-4 gap-3">
                                                    <button type="button" class="btn btn-primary" data-form="addHotel" data-btn="enregistrer" data-route="{{ path('hotel_save') }}" data-modal="null">Enregistrer</button></form>
                                                    <a class="btn btn-light-danger text-danger" href="{{path('admin_hotel')}}">Annuler</a>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

     // Gérer la soumission du formulaire de la modal
    document.getElementById('formhotel').addEventListener('submit', function(event) {
        event.preventDefault();
        var nom = document.getElementById('nom').value;
        var adresse = document.getElementById('adresse').value;
        var codepostal = document.getElementById('codepostal').value;
        var ville = document.getElementById('ville').value;
        var email = document.getElementById('email').value;
        var telephone = document.getElementById('telephone').value;
        var nbEtage = document.getElementById('nbEtage').value;

        fetch('{{ path('hotel_save') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token("hotel_save") }}'
            },
            body: JSON.stringify({
                nom: nom,
                adresse: adresse,
                codepostal : codepostal,
                ville : ville,
                email: email,
                telephone: telephone,
                nbEtage: nbEtage,
            })
        })
        .then(response => response.json())
            .then(data => {
                // Afficher une notification toast lorsque la mise à jour est réussie
               if (data.redirect_url) {
                    window.location.href = data.redirect_url;
                } else {
                    showToast('Erreur lors de la mise à jour.', 'error');
                }
            }).catch(error => console.error('Erreur:', error));

        // Logique pour ajouter/modifier la tranche horaire
        console.log('Mise à jour de hotel');
    });

</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' %}