@extends('frontend.mediknode.layout.mainlayout')

@section('content')
    @component('frontend.mediknode.components.breadcrumb')
        @slot('title')
            Hébergement - {!! \App\Helpers\TextHelper::addSup($event->title) !!}
        @endslot
        @slot('li_1')
            Hébergement - {{ $event->title }}
        @endslot
    @endcomponent
    <div class="dashboard-content">
        <div class="container">
            <div class="dashboard-details">
                <div class="row dashboard-info">
                    <div class="col-md-2">
                        @component('frontend.mediknode.components.sidemenu')
                        @endcomponent
                    </div>
                    <div class="col-md-12">
                        <div class="card dash-cards">
                            <div class="card-body">
                                <div class="container">
                                    <form action="{{ route('reservation.addGuests', ['event' => $event->slug]) }}"
                                        method="POST" id="reservationForm">
                                        @csrf
                                        <div>
                                            <p class="fs-6 mt-3"><span class="bold">Hôtel : </span>
                                                {{ session('reservationData.hotel.name') }}
                                                <span class="mt-1 mb-2">
                                                    @for ($i = 1; $i <= session('reservationData.hotel.stars'); $i++)
                                                        <span class="fa fa-star text-warning"></span>
                                                    @endfor
                                                </span>
                                            </p>
                                            <p class="fs-6 mt-3"><span class="bold">Date d'arrivée : </span>
                                                {{ \Carbon\Carbon::parse(session('reservationData.startDate'))->format('d/m/Y') }}
                                            </p>
                                            <p class="fs-6 mt-3"><span class="bold">Date de départ : </span>
                                                {{ \Carbon\Carbon::parse(session('reservationData.endDate'))->format('d/m/Y') }}
                                            </p>
                                            <p class="fs-6 mt-3"><span class="bold">Nombre de nuitée : </span>
                                                {{ session('reservationData.numberOfNights') }}</p>
                                            {{-- <p class="fs-6 mt-3"><span class="bold">Montant Total : </span>
                                                {{ session('totalPrice') }}</p> --}}
                                        </div>

                                        {{-- <hr class="mt-3 mb-3 w-50 mx-auto"> --}}

                                        @for ($i = 0; $i < $numberOfRooms; $i++)
                                            <div class="room-selection" id="room_{{ $i }}">
                                                <h3 class="event-title fs-6 mt-3">Chambre {{ $i + 1 }} :</h3>
                                                <div class="row">
                                                    <div class="col-lg-3">
                                                        <!-- Sélection du type de chambre -->
                                                        <div class="form-group">
                                                            <label for="room_type_{{ $i }}">Type</label>
                                                            <select name="rooms[{{ $i }}][room_type_id]"
                                                                class="form-control form-select room-type-select"
                                                                id="room_type_{{ $i }}"
                                                                data-room-index="{{ $i }}" required>
                                                                <option value="">Sélectionnez un type de
                                                                    chambre
                                                                </option>
                                                                @foreach ($hotelData['room_types'] as $roomType)
                                                                    <option value="{{ $roomType['id'] }}"
                                                                        data-max-capacity="{{ $roomType['max'] }}"
                                                                        data-arrangements='@json($roomType['arrangements'])'>
                                                                        {{ $roomType['type'] }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-3">
                                                        <!-- Sélection de l'arrangement -->
                                                        <div class="form-group">
                                                            <label
                                                                for="arrangement_{{ $i }}">Arrangement</label>
                                                            <select name="rooms[{{ $i }}][arrangement_id]"
                                                                class="form-control form-select arrangement-select"
                                                                id="arrangement_{{ $i }}"
                                                                data-room-index="{{ $i }}" required>
                                                                <option value="">Sélectionnez un arrangement
                                                                </option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-1">
                                                        <!-- Sélection des occupants (adultes, enfants, bébés) -->
                                                        <div class="form-group">
                                                            <label for="adults_{{ $i }}">Adultes</label>
                                                            <input type="number" name="rooms[{{ $i }}][adults]"
                                                                class="form-control adults-input"
                                                                id="adults_{{ $i }}" min="1"
                                                                max="{{ $roomType['max'] }}" value="1"
                                                                data-room-index="{{ $i }}" required>
                                                        </div>
                                                    </div>
                                                    @if ($event->hebergement_active_children)
                                                        <div class="col-lg-1">
                                                            <div class="form-group">
                                                                <label for="children_{{ $i }}">Enfants</label>
                                                                <input type="number"
                                                                    name="rooms[{{ $i }}][children]"
                                                                    class="form-control children-input"
                                                                    id="children_{{ $i }}" min="0"
                                                                    max="{{ $roomType['max'] }}" value="0"
                                                                    data-room-index="{{ $i }}" required>
                                                            </div>
                                                        </div>
                                                    @endif
                                                    @if ($event->hebergement_active_babies)
                                                        <div class="col-lg-1">
                                                            <div class="form-group">
                                                                <label for="babies_{{ $i }}">Bébés</label>
                                                                <input type="number"
                                                                    name="rooms[{{ $i }}][babies]"
                                                                    class="form-control babies-input"
                                                                    id="babies_{{ $i }}" min="0"
                                                                    max="2" value="0" required>
                                                            </div>
                                                        </div>
                                                    @endif
                                                    <div class="col-lg-2">
                                                        <!-- Affichage du prix total de la chambre -->
                                                        <div class="form-group">
                                                            <label>Prix</label>
                                                            <span class="d-block fs-6 bold room_price"
                                                                id="room_price_display_{{ $i }}">0 TND
                                                            </span>
                                                            <input type="hidden" name="rooms[{{ $i }}][price]"
                                                                id="room_price_{{ $i }}" value="0">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="alert alert-danger d-none"
                                                    id="capacity_error1_{{ $i }}">
                                                    Le nombre d'ocuppent(s) dépasse la capacité de
                                                    cette
                                                    chambre.
                                                </div>
                                                <div class="alert alert-danger d-none"
                                                    id="capacity_error2_{{ $i }}">
                                                    Le nombre d'ocuppent(s) est inférieur à la capacité de
                                                    cette
                                                    chambre.
                                                </div>
                                            </div>
                                        @endfor

                                        {{-- <hr class="mt-3 mb-3 w-50 mx-auto"> --}}

                                        <div class="row">
                                            <div class="col-10">
                                                <!-- Affichage du prix total de toutes les chambres -->
                                                <div class="total-price text-start mb-3">
                                                    <h4 class="hotel-price fs-5 bold">Prix Total : <span
                                                            id="total_price_display">0
                                                            TND</span>
                                                    </h4>
                                                    <input type="hidden" name="total_price" value="0"
                                                        id="total_price_hidden_input">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="d-flex justify-content-center gap-3">
                                            <button class="btn btn-success btn-min-width" type="submit">Suivant</button>
                                        </div>
                                    </form>
                                </div>

                                <script>
                                    let total_price = 0;
                                    const numberOfNights = {{ $numberOfNights }}; // Passer le nombre de nuits depuis le contrôleur

                                    // Fonction pour valider la capacité des chambres
                                    function validateCapacity(roomIndex) {
                                        const roomTypeSelect = document.getElementById(`room_type_${roomIndex}`);
                                        const maxCapacity = parseInt(roomTypeSelect.options[roomTypeSelect.selectedIndex].dataset.maxCapacity);

                                        const adultsInput = document.getElementById(`adults_${roomIndex}`);
                                        const childrenInput = document.getElementById(`children_${roomIndex}`);

                                        const totalOccupants = parseInt(adultsInput.value) + parseInt(childrenInput?.value || 0);

                                        const error1Div = document.getElementById(`capacity_error1_${roomIndex}`);
                                        const error2Div = document.getElementById(`capacity_error2_${roomIndex}`);

                                        console.log('totalOccupants :' + totalOccupants);
                                        console.log('maxCapacity :' + maxCapacity);

                                        if (totalOccupants > maxCapacity) {
                                            error1Div.classList.remove('d-none');
                                            return false;
                                        }

                                        if (totalOccupants < maxCapacity) {
                                            error2Div.classList.remove('d-none');
                                            return false;
                                        }

                                        if (totalOccupants == maxCapacity) {
                                            error1Div.classList.add('d-none');
                                            error2Div.classList.add('d-none');
                                            return true;
                                        }
                                    }

                                    // Fonction pour calculer le prix de la chambre
                                    function calculateRoomPrice(roomIndex) {
                                        const arrangementSelect = document.getElementById(`arrangement_${roomIndex}`);
                                        const pricePerAdult = parseFloat(arrangementSelect.selectedOptions[0]?.dataset.priceAdult || 0);
                                        const pricePerChild = parseFloat(arrangementSelect.selectedOptions[0]?.dataset?.priceChild || 0);

                                        const adults = parseInt(document.getElementById(`adults_${roomIndex}`).value) || 0;
                                        const children = parseInt(document.getElementById(`children_${roomIndex}`)?.value) || 0;

                                        // Calculer le prix total en fonction du nombre d'adultes, d'enfants et du nombre de nuits
                                        // const totalPrice = (adults * pricePerAdult + children * pricePerChild) * numberOfNights;
                                        const totalPrice = pricePerAdult * numberOfNights;

                                        // Mettre à jour le champ caché et le texte affiché
                                        document.getElementById(`room_price_display_${roomIndex}`).textContent = totalPrice + ' TND';
                                        document.getElementById(`room_price_${roomIndex}`).value = totalPrice;

                                        return totalPrice;
                                    }

                                    // Mise à jour des types d'arrangements en fonction du type de chambre sélectionné
                                    function updateArrangements(selectElement) {
                                        const roomIndex = selectElement.dataset.roomIndex;
                                        const arrangementSelect = document.getElementById(`arrangement_${roomIndex}`);

                                        // Effacer les anciennes options d'arrangement
                                        arrangementSelect.innerHTML = '<option value="">Sélectionnez un arrangement</option>';

                                        // Récupérer les arrangements associés au type de chambre sélectionné
                                        const arrangements = JSON.parse(selectElement.options[selectElement.selectedIndex].dataset.arrangements ||
                                            '[]');

                                        // Ajouter les nouvelles options d'arrangement
                                        arrangements.forEach(arrangement => {
                                            const option = document.createElement('option');
                                            option.value = arrangement.id;
                                            // option.textContent =
                                            //    `${arrangement.arrangement_type} - Prix par adulte : ${arrangement.price_adult} TND, Prix par enfant : ${arrangement.price_child} TND`;
                                            option.textContent =
                                                `${arrangement.arrangement_type}`;
                                            option.dataset.priceAdult = arrangement.price_adult;
                                            option.dataset.priceChild = arrangement.price_child;
                                            arrangementSelect.appendChild(option);
                                        });

                                        // Réinitialiser le calcul du prix
                                        calculateRoomPrice(roomIndex);
                                        updateTotalPrice();
                                    }

                                    // Mise à jour du prix total de toutes les chambres
                                    function updateTotalPrice() {
                                        total_price = 0;
                                        for (let i = 0; i < {{ $numberOfRooms }}; i++) {
                                            console.log('calculateRoomPrice(i) : ' + calculateRoomPrice(i));
                                            total_price += calculateRoomPrice(i);
                                        }
                                        document.getElementById('total_price_display').innerText = total_price + ' TND';
                                        document.getElementById('total_price_hidden_input').value = total_price;
                                    }

                                    // Gérer la validation de la capacité et la mise à jour des arrangements
                                    document.querySelectorAll('.room-type-select').forEach(select => {
                                        select.addEventListener('change', function() {
                                            const roomIndex = this.dataset.roomIndex;
                                            updateArrangements(this);
                                            validateCapacity(roomIndex);
                                        });
                                    });

                                    // Attacher les événements sur les champs d'adultes, d'enfants et sur la sélection d'arrangement
                                    document.querySelectorAll('.adults-input, .children-input').forEach(input => {
                                        input.addEventListener('change', function() {
                                            const roomIndex = this.dataset.roomIndex;
                                            const status = validateCapacity(roomIndex);
                                            console.log('status :' + status);
                                            if (status) {
                                                calculateRoomPrice(roomIndex);
                                                updateTotalPrice();
                                            } else {
                                                // calculateRoomPrice(roomIndex);
                                            }
                                        });
                                    });

                                    document.querySelectorAll('.arrangement-select').forEach(select => {
                                        select.addEventListener('change', function() {
                                            const roomIndex = this.dataset.roomIndex;
                                            calculateRoomPrice(roomIndex);
                                            updateTotalPrice();
                                        });
                                    });

                                    // Validation avant la soumission
                                    document.getElementById('reservationForm').addEventListener('submit', function(e) {
                                        for (let i = 0; i < {{ $numberOfRooms }}; i++) {
                                            if (document.getElementById(`capacity_error1_${i}`).classList.contains('d-none') === false) {
                                                e.preventDefault();
                                            }
                                            if (document.getElementById(`capacity_error2_${i}`).classList.contains('d-none') === false) {
                                                e.preventDefault();
                                            }
                                        }
                                    });
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
    <style>
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: inner-spin-button;
            opacity: 1;
            /* Assure que les boutons restent visibles */
            display: block;
        }

        input[type="number"] {
            text-align: center;
        }
    </style>
    @component('frontend.mediknode.components.scrolltotop')
    @endcomponent
@endsection