{{-- Constants & Controls --}}
<script>
  //* Constants
    window.decrypt_data = "4ar51-e3067mnt-r35e-rv35-95b1";

  //* Data Controls
    // On window unload
    window.onbeforeunload = function() {
        localStorage.removeItem("isOverBooking");
        localStorage.removeItem("ReservationData");
    };

  //* General Control
    $(document).ready(function () {
        // On close Reservation form
        $('#reservation_ballot, #grouped_reservation_ballot').on('hide.bs.modal', function () {
            document.activeElement.blur();
        });
    });
</script>


{{-- Support Functions --}}
<script>
  //? Crypts
    function encryptData(data) {
        try {
            return CryptoJS.AES.encrypt(
                JSON.stringify(data),
                window.decrypt_data
            ).toString();
        } catch (e) {
            return null;
        }
    }

    function decryptData(encrypted) {
        try {
            if (!encrypted) return null;

            const bytes = CryptoJS.AES.decrypt(encrypted, window.decrypt_data);
            const decrypted = bytes.toString(CryptoJS.enc.Utf8);

            return decrypted ? JSON.parse(decrypted) : null;
        } catch (e) {
            return null;
        }
    }

  //? Formatters
    const clean_currencies = (value) => formatCurrency( removeUnnecessaryDecimal(value) );

    function truncateString(txt, mins_length = 15) {
        // Avoid truncate small texts
        if (txt.length <= mins_length)
            return txt;

        // Truncate text and add '...' at the end
        return `${txt.substring(0, mins_length)}...`;
    }
</script>

{{-- Reservation Controls --}}
<script>
  //* Modal Form Control
    function showModalForm(reservation_id) {
        $(`#reservation_ballot`).modal('hide');
        loadReserveForm(reservation_id);
    }

    function setAsNoShow(defer_message, reservation_id, no_show_type) {
        Swal.fire({
            icon: 'warning',
            title: defer_message,
            confirmButtonText: "{{ __('common_actions')['approve'] }} {{ __('common_actions')['accept'] }}",
            confirmButtonColor: `#0d6889`,
            showCancelButton: true,
            cancelButtonText: `{{ __('common_actions')['cancel'] }}`,
            cancelButtonColor: `#c82333`
        }).then((result) => {
            if (result.value) {
                $.ajax({
                    url: `/home/reservation/${reservation_id}/${no_show_type}/no-show`,
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    type: 'DELETE',
                    success: function (data) {
                      // Success Message
                        Swal.fire({
                            toast: true, position: 'top-end',
                            showConfirmButton: false,
                            timer: 2500, timerProgressBar: true,
                            title: "{{ __('common_responses_and_messages')['updating_data'] }}",
                            icon: 'success',
                        });

                      // Visual Changes
                        $(`[data-reservation-card="${reservation_id}"]`).remove();
                    },

                    error: function(data){
                        showToast(
                            "{{ __('common_responses_and_messages')['data_not_updated'] }}",
                            "#C34808", "#78350F"
                        );
                        return;
                    },
                });
            }
        });

    }

    function showReservationBallot(encrypted_data) {
      //* Decrypt Received Data
        const data = decryptData(decodeURIComponent(encrypted_data));

      //* Control Data
        const $modal = $('#reservation_ballot');
        const has_control_hours = @json($has_control_hours);

      //* Fill Data
        // Save Meta Data
            $modal.data('reservation-id', data.id).data('reservation', data);

        // Actions
            $('#btn-edit-reservation').off('click')
                .on('click', () => showModalForm(data.id));

            $('#btn-print-ticket')
                .attr('href', `/reservation-tickets/full-stay/${data.id}`);

        // Texts
            // Titles
            $('#ballot-reservation-id').text(data.id);

            // Balances
            $('#ballot-lodging-balances-total').text( clean_currencies(data.total_price) );
            $('#ballot-lodging-balances-paid').text( clean_currencies(data.lodgingPayments) );
            $('#ballot-lodging-balances-outstanding').text( clean_currencies(data.lodgingPayment_left) );

            $('#ballot-consumption-balances-total').text( clean_currencies(data.consumptionCharges) );
            $('#ballot-consumption-balances-paid').text( clean_currencies(data.consumptionPayments) );
            $('#ballot-consumption-balances-outstanding').text( clean_currencies(data.consumptionPayment_left) );

            $('#ballot-extra-balances-total').text( clean_currencies(data.extraCharges) );
            $('#ballot-extra-balances-paid').text( clean_currencies(data.extraPayments) );
            $('#ballot-extra-balances-outstanding').text( clean_currencies(data.extraPayment_left) );

            // Labels
            $('#ballot-assigned-rate-label').text(`
                ${translateAndReplace(`entity_fields.reservation.${data.is_express ? "rate_per_room" : "rate_per_night"}`)}*
            `);

        // Inputs
          // Basic Reservation Data
            $('#ballot-reservation-date').val(data.reservation_date);
            $('#ballot-client-reference').val(data.client_reference);
            $('#ballot-client-segment')
                .text(data.client_segment_type).attr('style', data.client_segment_badge);


            $('#ballot-reservation-status').val(data.status);

            $('#ballot-guest-status').val(data.guest_status);
            $('#ballot-reservation-source').val(data.source);
            $('#ballot-agency').val(data.agency ? data.agency : "{{ __('neutral_words')['none'] }}");
            $('#ballot-lodging-contract').val(data.lodging_contract);

          // Advanced Reservation Data
            // Details
            const checkin_date = has_control_hours
                ? `${data.date_entry}  ${data.hour_entry}`
                : data.date_entry;

            const checkout_date = has_control_hours
                ? `${data.date_departure}  ${data.hour_departure}`
                : data.date_departure;

            $('#ballot-checkin-date').val(checkin_date);
            $('#ballot-checkout-date').val(checkout_date);

            $('#ballot-nights-block').toggle(!data.is_express);
            $('#ballot-number-nights').val(data.number_nights);
            $('#ballot-number-hours').val(data.number_hours);
            $('#ballot-number-adults').val(data.number_adults);
            $('#ballot-number-children').val(data.number_children);

            $('#ballot-room-type').val(data.room_type);
            $('#ballot-room-number').val(data.room_number);
            $('#ballot-regimen').val(data.regimen);

            // Rates
            $('#ballot-suggested-rate').val( clean_currencies(data.suggested_price) );
            $('#ballot-selected-rate').val( clean_currencies(data.final_price) );
            $('#ballot-total-price').val( clean_currencies(data.total_price) );

            //Balances
            const total_per_service = parseFloat(data.total_price) + parseFloat(data.consumptionCharges) + parseFloat(data.extraCharges);
            const total_service_outstanding = parseFloat(data.lodgingPayment_left) + parseFloat(data.consumptionPayment_left) + parseFloat(data.extraPayment_left);

            $('#ballot-total-per-service').val( clean_currencies(total_per_service) )
            $('#ballot-total-service-outstanding').val( clean_currencies(total_service_outstanding) )

            // Notes & Reminders
            $('#ballot-notes').val(data.notes);
            $('#ballot-requiere-invoice').prop('checked', Boolean(data.requiere_invoice));

      //* Show Modal
        $modal.modal('show');
    }

  //* Cycles
    // Debounce
    function debounce(func, delay) {
        let timeout;
        return function (...args) {
            const context = this;
            clearTimeout(timeout);
            timeout = setTimeout(() => func.apply(context, args), delay);
        };
    }

    // Build Reservation Cards
    window.reservesOnTimeDebounced = (window.reservesOnTimeDebounced || debounce(getReservesOnTime, 800));

    function getReservesOnTime() {
      // Control Data
        // Parse stored/cached data
        const reserves_encrypted = localStorage.getItem("ReservationData");
        const reserves_data = decryptData(reserves_encrypted);
        const previous_data = JSON.stringify(reserves_data);

      // Request Data
        $.get("{{ route('api.home.reservationCards') }}", {
            has_control_hours: window.config.data.features.has_control_hours
        }, function(data) {
            // Parse Data
            const current_data = JSON.stringify(data);

            // Force first render if loaders are still visible
            const needs_render =
                $('#reservation-arrives .spinner-grow').length > 0 ||
                $('#reservation-occupancy .spinner-grow').length > 0 ||
                $('#reservation-departures .spinner-grow').length > 0;

            // Render only when data changed or initial loaders are present
            if (needs_render || previous_data !== current_data)
                renderReservations(data);

            // Update cache only when changes are detected
            if (previous_data !== current_data)
                localStorage.setItem("ReservationData", encryptData(data));
        });
    }

    // Check Overbookings
    function getOverBookings() {
        let overBookEncrypted = localStorage.getItem("isOverBooking");
        let overBook = decryptData(overBookEncrypted);

        $.get('/api/reservations/overbookings', { has_control_hours: @json($has_control_hours) },function(data) {
            let currentData = JSON.stringify(data);

            if (!overBook || JSON.stringify(overBook) !== currentData) {
                if (data.length > 0) {
                    Toastify({
                        text: translateAndReplace("home.overbooking_count_message", { count: data.length }),
                        duration: 7000, close: true,
                        destination: "/reservations",
                        newWindow: false,
                        gravity: "bottom", position: "center",
                        avatar: config.assets.toastInfoIcon,
                        style: {
                            background: "linear-gradient(to right, #dc3545 , #dc3545)",
                        }
                    }).showToast();
                }

                const encrypted = encryptData(data);
                localStorage.setItem("isOverBooking", encrypted);
            }
        });
    }

    // On api token generated
    window.apiTokenReady.then(token => {
        // If cached data exist, render before consult changes
        const cache = decryptData(localStorage.getItem("ReservationData"));
            if (cache) renderReservations(cache);

        // Initial Call
        setTimeout(() => {
            getReservesOnTime();
            getOverBookings();
        }, 500);

        // Cycles
        setInterval(reservesOnTimeDebounced, 9200); //Cada 10 segundo (10 mil milisegundos)
        setInterval(getOverBookings, 300000); //Cada 5 minutos (300 mil milisegundos)
    });

  //* Builders
    // Builder Constants
    const drawEmptyList = (title, message) => `
        <div class="pt-3 pb-2 empty-list-card g-1 d-flex flex-column align-items-center">
            <img
                src="
                    @if (Auth::user()->profile_photo === null)
                        {{ asset('images/only_harsi.png') }}
                    @else
                        {{ Auth::user()->profile_photo }}
                    @endif
                "
                class="img-fluid d-block empty-list-img"
                alt="Harsi Icon"
            />
            <h6 class="text-center">
                <span class="empty-list-title">${title}</span><br>
                <span class="empty-list-message">${message}</span><br>
            </h6>
        </div>
    `;

    const buildReservationCardList = (reservations, type, modal_map) =>
        reservations.map(reservation => {
            const modal_data = modal_map[reservation.id] || reservation;
            return buildReservationCards(reservation, type, modal_data)
        }).join('');

    // Builder Functions
    function renderReservations(data) {
        let modals = data.modals || [];
        const modal_map = {};
            modals.forEach(m => modal_map[m.id] = m);

        let arrives = data.arrivals.length ? buildReservationCardList(data.arrivals, 'arrive', modal_map) : drawEmptyList( translateAndReplace('home.empty_list.all_clear_title') , translateAndReplace('home.empty_list.arrivals_message'));
        let occupancy = data.occupancy.length ? buildReservationCardList(data.occupancy, 'occupancy', modal_map) : drawEmptyList( translateAndReplace('home.empty_list.no_guests_title') , translateAndReplace('home.empty_list.in_hotel_message'));
        let departures = data.departures.length ? buildReservationCardList(data.departures, 'departure', modal_map) : drawEmptyList( translateAndReplace('home.empty_list.all_clear_title') , translateAndReplace('home.empty_list.departures_message'));

        // TODO: Delete and Integrate on normal render cycle
            // let simulation = {
            //     "id": 777,

            //     "client_reference": "Evangeline Zarate",
            //     "client_segment_badge": "background-color: #c8a53463; color: #9d7f25;",
            //     "client_segment_type": "vip",

            //     "lodgingPayment_left": "2000.00",
            //     "lodgingPayments": "0.00",
            //     "payment_status_color": "#fd2319",

            //     "pax_quantity": 3,
            //     "number_hours": 0,
            //     "number_nights": 2,

            //     "date_departure": "30-06-2026",
            //     "date_entry": "28-06-2026",
            //     "is_express": false, // true | false
            //     "no_show_type": "Primary", // Primary | Secondary | Tertiary

            //     "room_assignment": [
            //         {
            //             "room_type": "Natura's",
            //             "rooms": [
            //                 "Adobes 4001",
            //                 "Adobes 5001",
            //                 // "Adobes 5008",
            //                 // "Adobes 5128",
            //             ],
            //         },
            //         // {
            //         //     "room_type": "Citizen's",
            //         //     "rooms": [
            //         //         "Block 4001",
            //         //         "Block 4001",
            //         //         "Block 5008",
            //         //         "Block 5128",
            //         //     ],
            //         // },
            //     ],

            //     "show_in_calendar": 0, // 1 | 0
            // };

            // arrives += buildGroupedReservationCards(simulation, 'arrive', null);
            // occupancy += buildGroupedReservationCards(simulation, 'occupancy', null);
            // departures += buildGroupedReservationCards(simulation, 'departure', null);

        $('#reservation-arrives').html(arrives);
        $('#reservation-occupancy').html(occupancy);
        $('#reservation-departures').html(departures);
    }

    function buildReservationCards(data, control_status, modal_data) {
      //* Extract common Attributes
        let client_name = data.client_reference;

      //* Dynamic Resources
        // Conditionals
            const is_arrive = control_status === 'arrive';

        // No show Conditionals
            let no_show_condition_1 = ( is_arrive && data.no_show_type === 'Primary'); // Define "No Show" button visualization
            let no_show_condition_2 = ( is_arrive && ['Secondary', 'Tertiary'].includes(data.no_show_type) && ['0', 0].includes(data.show_in_calendar) ); // Remove "No Show" button and decolore cards

        // Messages &  titles
            const pax_title = `{{ __('home')['cards']['tenants'] }}: ${data.number_adults} {{ __('home')['cards']['adults'] }} {{ __('neutral_words')['and'] }} ${data.number_children} {{ __('home')['cards']['children'] }}`;
            const defer_message = `{{ __('home')['cards']['defer_confirmation_1'] }}${data.id} (${data.client_reference}) {{ __('home')['cards']['defer_confirmation_2'] }}`;

        // Encrypted Data
            const encrypted_modal_reservation = encodeURIComponent(encryptData(modal_data));

      //* Build Cards
        // Complements
        const payment_summary_section = !is_arrive
            ? `
                <div class="mb-1 g-2 d-flex align-items-center justify-content-start w-100">

                    {{-- Cantidad Pagada --}}
                    <div title="{{ __('home')['cards']['paid'] }}"
                        class="d-flex align-items-center justify-content-center">
                        <img class="img-icon" src="{{ asset('icons/payment_card.svg') }}">
                        <p class="mb-0 harsi-color reservation-card-data">${data.lodgingPayments}</p>
                    </div>

                    {{-- Cantidad Restante --}}
                    <div title="{{ __('home')['cards']['owed'] }}"
                        class="d-flex align-items-center justify-content-center">
                        <img class="img-icon" src="{{ asset('icons/missing_payment_blue.svg') }}">
                        <p class="mb-0 harsi-color reservation-card-data">${data.lodgingPayment_left < 0 ? 0 : data.lodgingPayment_left}</p>
                    </div>

                </div>
            `
            : '';


        // Final Cut
        return `
            <div data-reservation-card="${data.id}"
                class="reserve-card g-1 d-flex align-items-center pt-3 pb-2 ${ no_show_condition_2 ? 'disabled-reserve-card': '' }"
            >

                {{-- Status Bar --}}
                <div class="status-bar" style="background-color: ${data.payment_status_color}d6 !important;"></div>

                {{-- Reserve Data --}}
                <div class="pr-2 flex-grow-1 d-flex flex-column align-items-start">

                    {{-- Folio - Huésped --}}
                    <div class="pr-2 w-100 d-flex justify-content-between align-items-center">
                        <p title="{{ __('entity_fields')['reservation']['guest'] }}"
                            class="mb-2 guest-name"
                        >${truncateString(client_name.toLowerCase(), 17)}</p>

                        <span title="${translateAndReplace('entity_fields.common.type')}: ${data.client_segment_type}"
                            class="client-segment-card-badge reservation-card-data text-uppercase"
                            style="${data.client_segment_badge}"
                        >
                            #${data.id}
                        </span>

                    </div>

                    {{-- Noches - Horas - Periodo --}}
                    <div class="mb-1 d-flex align-items-center justify-content-start w-100 g-1">

                        ${!data.is_express
                            ? `
                                {{-- Noches --}}
                                <div title="{{ __('entity_fields')['reservation']['number_nights_large'] }}"
                                    class="d-flex align-items-center justify-content-center">
                                    <img class="img-icon" src="{{ asset('icons/moon.svg') }}">
                                    <p class="mb-0 harsi-color reservation-card-data">${data.number_nights}</p>
                                </div>
                            `
                            : `
                                {{-- Horas --}}
                                <div title="{{ __('entity_fields')['reservation']['number_hours_large'] }}"
                                    class="d-flex align-items-center justify-content-center">
                                    <img class="img-icon" src="{{ asset('icons/clock_blue.svg') }}">
                                    <p class="mb-0 harsi-color reservation-card-data">${data.number_hours}</p>
                                </div>
                            `
                        }

                        {{-- Desde --}}
                        <div title="{{ __('entity_fields')['reservation']['date_entry_large'] }}"
                            class="d-flex align-items-center justify-content-center">
                            <img class="img-icon" src="{{ asset('icons/checkIn_blue.svg') }}">
                            <p class="mb-0 harsi-color reservation-card-data">${data.date_entry}</p>
                        </div>

                        {{-- Hasta --}}
                        <div title="{{ __('entity_fields')['reservation']['date_departure_large'] }}"
                            class="d-flex align-items-center justify-content-center">
                            <img class="img-icon" src="{{ asset('icons/checkIn_inverso.svg') }}">
                            <p class="mb-0 harsi-color reservation-card-data">${data.date_departure}</p>
                        </div>

                    </div>

                    {{-- Stay Summary --}}
                    <div class="mb-1 g-1 d-flex align-items-center justify-content-start w-100">

                        {{-- Room Type --}}
                        <div title="{{ __('entity_fields')['common']['room_type'] }}"
                            class="d-flex align-items-center justify-content-center">
                            <img class="img-icon" src="{{ asset('icons/types.svg') }}">
                            <p class="mb-0 harsi-color reservation-card-data">${truncateString(data.room_type, 9)}</p>
                        </div>

                        {{-- Room --}}
                        <div title="{{ __('entity_fields')['reservation']['room'] }}"
                            class="d-flex align-items-center justify-content-center">
                            <img class="img-icon" src="{{ asset('icons/double_bed_blue.svg') }}">
                            <p class="mb-0 harsi-color reservation-card-data">${truncateString(data.room_number, 9)}</p>
                        </div>

                        {{-- PAX --}}
                        <div title="${pax_title}"
                            class="d-flex align-items-center justify-content-center">
                            <img class="img-icon" src="{{ asset('icons/traveling_blue.svg') }}">
                            <p class="mb-0 harsi-color reservation-card-data">${data.number_adults} - ${data.number_children}</p>
                        </div>

                    </div>

                    {{-- Payments Summary --}}
                    ${payment_summary_section}

                    {{-- Actions --}}
                    <div class="px-2 my-2 g-1 d-flex align-items-center justify-content-end w-100">

                        <button type="button" title="{{ __('home')['cards']['get_details'] }}"
                            class="btn reservation-card-button btn-harsi"
                            onclick="showReservationBallot('${encrypted_modal_reservation}')"
                        >
                            {{ __('entities')['hotel']['reservation'] }}
                        </button>

                        ${ is_arrive && !no_show_condition_2
                            ? `
                                <button type="submit" title="{{ __('home')['cards']['defer_reserve'] }}"
                                    class="reservation-card-button btn ${no_show_condition_1 ? 'btn-warning':'btn-danger'}"
                                    onclick="setAsNoShow('${defer_message}', ${data.id}, '${data.no_show_type}')"
                                >
                                    ${no_show_condition_1 ? 'No Show':'<span class="text-white">No Show</span>'}
                                </button>
                            ` : ""
                        }

                    </div>

                </div>

            </div>
        `;
    }

    function buildGroupedReservationCards(data, control_status, modal_data) {
      //* Extract common Attributes
        let client_name = data.client_reference;

      //* Dynamic Resources
        // Conditionals
            const is_arrive = control_status === 'arrive';

        // No show Conditionals
            let no_show_condition_1 = ( is_arrive && data.no_show_type === 'Primary'); // Define "No Show" button visualization
            let no_show_condition_2 = ( is_arrive && ['Secondary', 'Tertiary'].includes(data.no_show_type) && ['0', 0].includes(data.show_in_calendar) ); // Remove "No Show" button and decolore cards

        // Messages &  titles
            const defer_message = `{{ __('home')['cards']['defer_confirmation_1'] }}${data.id} (${data.client_reference}) {{ __('home')['cards']['defer_confirmation_2'] }}`;

        // Encrypted Data
            const encrypted_modal_reservation = encodeURIComponent(encryptData(modal_data));

      //* Build Cards
        // Complements
        const payment_summary_section = !is_arrive
            ? `
                <div class="mb-1 g-2 d-flex align-items-center justify-content-start w-100">

                    {{-- Cantidad Pagada --}}
                    <div title="{{ __('home')['cards']['paid'] }}"
                        class="d-flex align-items-center justify-content-center">
                        <img class="img-icon" src="{{ asset('icons/payment_card.svg') }}">
                        <p class="mb-0 harsi-color reservation-card-data">${data.lodgingPayments}</p>
                    </div>

                    {{-- Cantidad Restante --}}
                    <div title="{{ __('home')['cards']['owed'] }}"
                        class="d-flex align-items-center justify-content-center">
                        <img class="img-icon" src="{{ asset('icons/missing_payment_blue.svg') }}">
                        <p class="mb-0 harsi-color reservation-card-data">${data.lodgingPayment_left < 0 ? 0 : data.lodgingPayment_left}</p>
                    </div>

                </div>
            `
            : '';

        const room_assignment = data.room_assignment.map(item => {
            const rooms = item.rooms.join(', ');
            return `<i class="fw-normal">${item.room_type}:&nbsp;</i> ${rooms} <br>`;
        }).join('');

        // Final Cut
        return `
            <div data-grouped-reservation-card="${data.id}"
                class="reserve-card d-flex align-items-center pt-3 pb-2 ${ no_show_condition_2 ? 'disabled-reserve-card': '' }"
            >

                {{-- Status Bar --}}
                <div class="pr-2 pl-2_5 grouped-status-column d-flex">
                    <img src="{{ asset('icons/users.svg') }}" class="img-icon" style="height: 18px !important; width: 18px !important">
                    <div class="shared-status-bar" style="background-color: ${data.payment_status_color}d6 !important;"></div>
                </div>

                {{-- Reserve Data --}}
                <div class="flex-grow-1 d-flex flex-column align-items-start">

                    {{-- Folio - Huésped --}}
                    <div class="pr-2 w-100 d-flex justify-content-between align-items-center">
                        <p title="{{ __('entity_fields')['reservation']['guest'] }}"
                            class="mb-2 guest-name"
                        >${truncateString(client_name.toLowerCase(), 17)}</p>

                        <span title="${translateAndReplace('entity_fields.common.type')}: ${data.client_segment_type}"
                            class="client-segment-card-badge reservation-card-data text-uppercase"
                            style="${data.client_segment_badge}"
                        >
                            #G-${data.id}
                        </span>

                    </div>

                    {{-- Noches - Horas - Periodo --}}
                    <div class="mb-1 d-flex align-items-center justify-content-start w-100 g-1">

                        ${!data.is_express
                            ? `
                                {{-- Noches --}}
                                <div title="{{ __('entity_fields')['reservation']['number_nights_large'] }}"
                                    class="d-flex align-items-center justify-content-center">
                                    <img class="img-icon" src="{{ asset('icons/moon.svg') }}">
                                    <p class="mb-0 harsi-color reservation-card-data">${data.number_nights}</p>
                                </div>
                            `
                            : `
                                {{-- Horas --}}
                                <div title="{{ __('entity_fields')['reservation']['number_hours_large'] }}"
                                    class="d-flex align-items-center justify-content-center">
                                    <img class="img-icon" src="{{ asset('icons/clock_blue.svg') }}">
                                    <p class="mb-0 harsi-color reservation-card-data">${data.number_hours}</p>
                                </div>
                            `
                        }

                        {{-- Desde --}}
                        <div title="{{ __('entity_fields')['reservation']['date_entry_large'] }}"
                            class="d-flex align-items-center justify-content-center">
                            <img class="img-icon" src="{{ asset('icons/checkIn_blue.svg') }}">
                            <p class="mb-0 harsi-color reservation-card-data">${data.date_entry}</p>
                        </div>

                        {{-- Hasta --}}
                        <div title="{{ __('entity_fields')['reservation']['date_departure_large'] }}"
                            class="d-flex align-items-center justify-content-center">
                            <img class="img-icon" src="{{ asset('icons/checkIn_inverso.svg') }}">
                            <p class="mb-0 harsi-color reservation-card-data">${data.date_departure}</p>
                        </div>

                    </div>

                    {{-- General Stay Summary --}}
                    <div class="mb-1 g-1 d-flex align-items-center justify-content-start w-100">

                        {{-- Rooms Quantity --}}
                        <div title="{{ __('home')['cards']['rooms_quantity'] }}"
                            class="d-flex align-items-center justify-content-center">
                            <img class="img-icon" src="{{ asset('icons/double_bed_blue.svg') }}">
                            <p class="mb-0 harsi-color reservation-card-data">
                                5 ${translateAndReplace('modules.dashboard.hotel.rooms')}
                            </p>
                        </div>

                        {{-- PAX --}}
                        <div title="{{ __('home')['cards']['guest_quantity'] }}"
                            class="d-flex align-items-center justify-content-center">
                            <img class="img-icon" src="{{ asset('icons/traveling_blue.svg') }}">
                            <p class="mb-0 harsi-color reservation-card-data">
                                ${data.pax_quantity} ${translateAndReplace('entity_fields.reservation.guests')}
                            </p>
                        </div>

                    </div>

                    {{-- Specific Stay Summary --}}
                    <div class="mb-1 g-1 d-flex align-items-center justify-content-start w-100">

                        {{-- Room Type --}}
                        <div title="{{ __('entity_fields')['common']['room_type'] }}"
                            class="d-flex align-items-center justify-content-center">
                            <img class="img-icon" src="{{ asset('icons/types.svg') }}">
                            <p class="pl-1 mb-0 harsi-color reservation-card-data">
                                ${room_assignment}
                            </p>
                        </div>

                    </div>

                    {{-- Payments Summary --}}
                    ${payment_summary_section}

                    {{-- Actions --}}
                    <div class="px-2 my-2 g-1 d-flex align-items-center justify-content-end w-100">

                        <button type="button" title="{{ __('home')['cards']['get_details'] }}"
                            class="btn reservation-card-button btn-harsi"
                            {{-- TODO: Remove --}}
                            data-toggle="modal" data-target="#grouped_reservation_ballot"
                            {{-- onclick="showGroupedReservationBallot('${encrypted_modal_reservation}')" --}}
                        >
                            {{ __('entities')['hotel']['reservation'] }}
                        </button>

                        ${ is_arrive && !no_show_condition_2
                            ? `
                                <button type="submit" title="{{ __('home')['cards']['defer_reserve'] }}"
                                    class="reservation-card-button btn ${no_show_condition_1 ? 'btn-warning':'btn-danger'}"
                                    onclick="setAsNoShow('${defer_message}', ${data.id}, '${data.no_show_type}')"
                                >
                                    ${no_show_condition_1 ? 'No Show':'<span class="text-white">No Show</span>'}
                                </button>
                            ` : ""
                        }

                    </div>

                </div>

            </div>
        `;
    }

</script>