@extends('layouts.app')

@section('title')
    {{ __('entity_forms')['otas_connection']['common']['availability'] }}
@endsection

@section('content')

    {{-- Styles --}}
        {{-- Custom Styles --}}
        <link href="{{ asset('css/components/custom/harsiScrollBar.css') }}" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="{{ asset('css/pages/shared/otasPages.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ asset('css/components/custom/specialElements.css') }}">

        <style>
            /* Pale Scrollbar */
            ::-webkit-scrollbar-thumb {
                background: #6c757da8 !important;
                border-radius: 10px !important;
            }

            /* Spacers */
            .mx-0_5 {
                margin-left: .15rem !important;
                margin-right: .15rem !important;
            }

            /* Tables */
            th {
                vertical-align: middle !important;
            }

        </style>

    {{-- Body --}}

        {{-- Availability Form --}}
        <form method="post" id="allotment_events_form" class="form-horizontal" enctype="multipart/form-data">
            @csrf

            @php
                $counted_otas = count($activated_otas);
                $initial_occupation_percentage = $allotment_summary->occupation_percentage;
            @endphp

            {{-- Superior Cards --}}
            <section class="mt-3 d-flex align-items-center justify-content-between col-12">
                {{-- Title --}}
                <div class="justify-content-start" style="width: 66.6% !important;">
                    <div class="card-legends color-card-low d-flex align-items-center">

                        <a type="button" class="py-1 mr-3 btn btn-outline-harsi"
                            href="{{ route('otas.allotment-calendar') }}">
                            <img src="{{ asset('icons/arrow_inverse.svg') }}">
                        </a>

                        <h3 class="my-1 legend-titles text-uppercase flex-grow-1">
                            {{ __('entity_forms')['otas_connection']['common']['availability'] }}
                            (<span class="harsi-contrast-color">{{ $date }}</span>)
                        </h3>
                        <input type="hidden" id="allotment_event_id" name="allotment_event_id"
                            value="{{ $allotment_summary->id }}">
                        <input type="hidden" id="allotment_event_date" name="allotment_event_date"
                            value="{{ $date }}">

                        <h6 class="my-1 text-center legend-titles ota-allotment-percentage text-uppercase">
                            {{ __('neutral_words')['occupation'] }}<br>
                            <span id="occupation_percentage_text">{{ $counted_otas ? $allotment_summary->occupation_percentage : 0 }}</span>%
                        </h6>
                        <input type="hidden" id="occupation_percentage" name="occupation_percentage"
                            value="{{ $counted_otas ? $allotment_summary->occupation_percentage : 0 }}">
                    </div>
                </div>

                {{-- Actived OTAs --}}
                <div class="col-4">
                    <div class="p-2_5 card-legends d-flex flex-column align-items-center justify-content-center">
                            <h6 class="text-center legend-titles">
                                {{ __('entity_forms')['otas_connection']['common']['availability'] }}
                            </h6>

                            <div class="pt-1 text-center d-flex align-items-center" style="gap: 1rem; max-width: 19rem; overflow-x: auto; overflow-y: hidden;">
                                @forelse ($activated_otas as $ota)
                                    <div class="legend-text">
                                        <b id="allotment_{{ $ota->sample_name }}_summary_text">{{ $allotment_summary->allotment_room_summary[$ota->sample_name] ?? 0 }}</b><br>
                                        {{ $ota->name }}

                                        <input type="hidden" id="allotment_{{ $ota->sample_name }}_summary" name="allotment_{{ $ota->sample_name }}_summary"
                                            value="{{ $allotment_summary->allotment_room_summary[$ota->sample_name] ?? 0 }}">
                                    </div>
                                @empty
                                    <p class="harsi-contrast-color ota-allotment-percentage">
                                        - {{ __('entity_forms')['otas_connection']['common']['no_active_channels'] }} -
                                    </p>
                                @endforelse
                            </div>
                    </div>
                </div>
            </section>

            {{-- Table Structure --}}
            <section class="my-4 pl-4_5 row col-12">
                <div class="card-container">
                    <div class="table-responsive limit-card-container" id="table-container">
                        @php
                            $default_col_width = $counted_otas > 0 ? (66 / min($counted_otas, 4)) : 66;
                            $assigned_col_width = $counted_otas <= 4 ? $default_col_width : 16.5;
                            $table_min_width = 34 + (16.5 * $counted_otas);
                        @endphp

                        <table class="table text-center align-middle table-borderless" style="min-width: {{ $table_min_width }}%;">

                            {{-- Header --}}
                            <thead class="sticky-top" id="table-header">
                                <tr>
                                    {{-- Default Header --}}
                                    <th scope="col" width="21%" class="border-harsi text-uppercase">
                                        {{ __('entities')['hotel']['room_type'] }}
                                    </th>
                                    <th scope="col" width="13%" class="border-harsi text-uppercase">
                                        {{ __('entities')['hotel']['room'] }}
                                    </th>

                                    {{-- OTAs Headers --}}
                                    @forelse ($activated_otas as $ota)
                                        <th scope="col"
                                            class="text-uppercase border-harsi ota-col"
                                            style="width: {{ $assigned_col_width }}%;"
                                        >
                                            {{ $ota->name }}
                                        </th>
                                    @empty
                                        <th scope="col" class="text-uppercase border-harsi">
                                            {{-- rowspan="{{ count($room_types) }}"  --}}
                                            {{ __('entity_forms')['otas_connection']['common']['channels'] }}
                                            <a href="{{ route('otas.index') }}"
                                                class="py-0 pl-1 pr-0_5 btn btn-outline-harsi pulse-animation">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                        </th>
                                    @endforelse
                                </tr>
                            </thead>

                            <tbody>

                                {{-- Spacer --}}
                                <tr><td class="p-2"></td></tr>

                                @forelse ($room_types as $type)
                                    @php
                                        // Visual Control
                                        $total_rooms = $room_types->sum(fn($roomType) => $roomType->rooms->count());

                                        // Input Control
                                        $room_type_data = $allotment_summary->room_types_configuration[$type->id] ?? null;
                                        $room_type_configuration = $room_type_data ? collect($room_type_data) : null;

                                        $type_not_registered = is_null($room_type_configuration);
                                        $has_open_availability = (int) $allotment_summary->occupation_percentage >= $occupation_limit
                                            ? false // Just in case occupation limit was exceded
                                            : ($type_not_registered ? true : filter_var($room_type_configuration['has_open_availability'], FILTER_VALIDATE_BOOLEAN));

                                        $ota_availability_summary = $type_not_registered ? [] : ($room_type_configuration['ota_availability_summary'] ?? []);
                                        $ota_occupancy_summary = $type_not_registered ? [] : ($room_type_configuration['ota_occupancy_summary'] ?? []);
                                    @endphp

                                    @foreach ($type->rooms as $secondary_index => $room)
                                        @php
                                            $is_last_room_in_type = $loop->last; // ← ahora aquí
                                        @endphp

                                        <tr class="room-switches-row" data-room-type-id="{{ $type->id }}">

                                            @if ($secondary_index === 0)
                                                <td rowspan="{{ count($type->rooms) }}"
                                                    class="py-3 text-left text-uppercase td-border-right semi-border-right-bottom semi-bold"
                                                >
                                                    <div class="d-flex align-items-center">
                                                        @if ($counted_otas)
                                                            <label class="switch switch_label">
                                                                <input type="checkbox" @if($has_open_availability)checked @endif
                                                                    id="is_type_{{ $type->id }}_available" name="is_type_{{ $type->id }}_available"
                                                                    onchange="toggleRoomTypeAvailability({{ $type->id }}, '{{ $type->tr_name }}')" >

                                                                <span class="specific_slider slider round"></span>
                                                            </label>
                                                            &nbsp;&nbsp;
                                                        @endif
                                                        <label class="semi-bold harsi-contrast-color @if (!$counted_otas) pl-4_5 @endif">{{ $type->tr_name }}</label>
                                                    </div>

                                                    @if ($counted_otas)
                                                        <div class="pl-4 d-flex align-items-center">
                                                            <div>
                                                                <button type="button"
                                                                    onclick="updateRoomTypeConfiguration({{ $type->id }})"
                                                                    class="py-0 pl-1 pr-0_5 btn btn-outline-harsi">
                                                                    <i class="fas fa-edit"></i>
                                                                </button>
                                                                &nbsp;
                                                                {{ __('entity_forms')['otas_connection']['common']['channels'] }}
                                                            </div>
                                                        </div>
                                                    @endif

                                                </td>
                                            @endif

                                            <td class="td-border-right @if($is_last_room_in_type) semi-border-left-bottom-dark @else semi-border-left-bottom @endif font-italic">{{ $room->room_name }}</td>

                                            @forelse ($activated_otas as $ota)
                                                <td class="@if($is_last_room_in_type) td-border-bottom-dark @else td-border-bottom @endif pt-3">
                                                    @if (in_array($ota->sample_name, $room->available_on_otas ?? []))
                                                        @php
                                                          // Control Data
                                                            $availability_rooms_configuration = $ota_availability_summary[$ota->sample_name] ?? [];

                                                          // Control Statuses
                                                            $is_available = in_array($room->id, $availability_rooms_configuration) // Checked -> Reserved/Not Available, Not Checked -> Available
                                                                || $type_not_registered;  // $type_not_registered is used when there is no assignment event for the date in question or when the RType has just been added to the calendar.

                                                            if ($is_available) {
                                                                $room_status = 'available';
                                                            } else {
                                                                $is_reserved = in_array($room->id, $ota_occupancy_summary);

                                                                $room_status = $is_reserved
                                                                    ? 'reserved'
                                                                    : 'deactivated';
                                                            }
                                                        @endphp

                                                        {{-- Switch --}}
                                                        <label class="switch switch_label" id="switchbox_{{ $room->roomType->id }}_{{ $room->id }}_{{ $ota->sample_name }}">
                                                            <input type="checkbox"
                                                                id="{{ $room->id }}_from_{{ $room->roomType->id }}_available_on_{{ $ota->sample_name }}"
                                                                name="{{ $room->id }}_from_{{ $room->roomType->id }}_available_on_{{ $ota->sample_name }}"
                                                                onchange="updateRoomOnlineAvailability(this)"
                                                                @if(!$has_open_availability) disabled @endif
                                                                @if($is_available) checked @endif
                                                            >

                                                            <span
                                                                style="cursor: @if(!$has_open_availability) not-allowed @else default @endif"
                                                                class="@if(!$has_open_availability) disabled_switch @endif specific_slider slider round"></span>
                                                        </label>

                                                        {{-- Status Label --}}
                                                        <label
                                                            data-switch-status="{{ $room->id }}_from_{{ $room->roomType->id }}_{{ $room_status }}"
                                                            data-status="{{ $room_status }}"
                                                            class="mb-0 semi-bold room_switch_status"
                                                        >
                                                            {{ __('neutral_words')[$room_status] }}
                                                        </label>

                                                    @else
                                                        -- -- --
                                                    @endif
                                                </td>
                                            @empty
                                                <td
                                                    class="@if($is_last_room_in_type ) td-border-bottom-dark @else td-border-bottom @endif"
                                                >
                                                    <i class="harsi-contrast-color">
                                                        {{ __('entity_forms')['otas_connection']['common']['no_active_channels'] }}
                                                    </i>
                                                </td>
                                            @endforelse

                                        </tr>
                                    @endforeach
                                @empty
                                    <tr><td class="semi-bold" colspan="{{ ($counted_otas > 0) ? ($counted_otas + 2) : 3 }}">
                                        - {{ __('entity_forms')['otas_connection']['common']['no_configured_rooms'] }} -
                                    </td></tr>
                                @endforelse

                            </tbody>

                        </table>
                    </div>
                </div>
            </section>
        </form>

        {{-- Form Modal --}}
        <section id="roomTypeFormModal" class="mt-5 modal fade" role="dialog">
            <div class="modal-dialog modal-lg" id="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body special-modal-body">

                        {{-- Title --}}
                        <section class="px-3 row justify-content-center align-items-baseline" style="border-bottom: 1.5px solid #acb6c1 !important;">
                            <div class="pt-1 col-11">
                                <h2 class="modal_title text-uppercase" style="font-weight: 800; color: #0d6889"></h2>
                                <h6 class="pb-2 modal_subtitle text-uppercase" style="color: #5a5a5a !important;"></h6>
                            </div>
                            <div class="pt-1 text-center col-1">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="float: none">
                                    <span>
                                        <img src="{{ asset('icons/close_modal.svg') }}" aria-hidden="true"
                                            style="width: 2.5rem; margin-top: 0.8rem">
                                    </span>
                                </button>
                            </div>
                        </section>

                        {{-- Form --}}
                        <form method="POST" id="channels_form" class="px-4 pt-3 form-horizontal"
                            enctype="multipart/form-data" novalidate> @csrf

                            @if ($counted_otas)
                                <div id="otas_panel">
                                    {{-- Tabs --}}
                                    <div class="d-flex justify-content-center">
                                        <ul id="ota_tab_box"
                                            class="px-2 pb-2 nav nav-tabs text-uppercase flex-nowrap"
                                            style="max-width: 85%; overflow-x: auto; overflow-y: hidden;"
                                        >
                                            @foreach ($activated_otas as $ota)
                                                @php
                                                    $first_index = $loop->index === 0;
                                                @endphp

                                                <li class="nav-item mx-0_5 @if($first_index) active @endif" id="tab_OTA_{{ $ota->sample_name }}">
                                                    <a
                                                        class="nav-link nav-link-minus @if($first_index) active @endif"
                                                        href="#local_OTA_{{ $ota->sample_name }}"
                                                        data-toggle="tab"
                                                    >
                                                        {{ $ota->name }}
                                                    </a>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>

                                    {{-- Content --}}
                                    <div class="pt-3 tab-content" id="ota_tab_content">
                                        {{-- Channel Rooms Data --}}
                                        @foreach ($activated_otas as $ota)
                                            @php
                                                $first_index = $loop->index === 0;
                                            @endphp
                                            <div class="tab-pane fade @if($first_index) show active @endif" id="local_OTA_{{ $ota->sample_name }}">

                                                {{-- Title & Toggle --}}
                                                <div class="pt-4 pb-2 d-flex align-items-start text-start" style="flex-wrap: wrap; gap: 1rem;">

                                                    {{-- Title --}}
                                                    <div class="d-flex align-items-center" style="font-weight: 500; color: #0d6889;">
                                                        <h4 class="pt-1 mr-3 text-uppercase">{{ $ota->name }}</h4>

                                                        {{-- Link to OTAS Configuration --}}
                                                        <a href="{{ route('otas.index') }}"
                                                            class="py-0 pl-1 pr-0_5 btn btn-outline-harsi pulse-animation">
                                                            <i class="fas fa-edit"></i>
                                                        </a>
                                                    </div>
                                                </div>

                                                {{-- Local-Online Type Relation --}}
                                                <div class="flex-wrap py-3 d-flex">

                                                    {{-- Local Type Name --}}
                                                    <div style="width: 35%;" class="mr-3">
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <div class="input-group-text clean-label disabled-fields">{{ __('entity_fields')['common']['name'] }}</div>
                                                            </div>
                                                            <input type="text" id="{{ $ota->sample_name }}_room_type_reference" disabled readonly
                                                                class="form-control disabled-fields" />
                                                        </div>
                                                    </div>

                                                    {{-- Local Type Related --}}
                                                    <div style="width: 60%;">
                                                        <div class="shadow-sm input-group">
                                                            <div class="input-group-prepend">
                                                                <div class="input-group-text clean-label">{{ __('entity_forms')['otas_connection']['room_type_addon']['otas_data']['related_room_type'] }}</div>
                                                            </div>
                                                            <select name="online_type_{{ $ota->sample_name }}" id="online_type_{{ $ota->sample_name }}"
                                                                onchange="drawRatePlans(this, '{{ $ota->sample_name }}')"
                                                                class="form-control" required
                                                            >
                                                                <option value="none" selected>{{ __('neutral_words')['none'] }}</option>
                                                            </select>
                                                        </div>
                                                    </div>

                                                </div>

                                                <div id="{{ $ota->sample_name }}_rate_plans_section"></div>
                                            </div>
                                        @endforeach
                                    </div>

                                    {{-- Submit form --}}
                                    <div class="pt-3 form-group" align="center">
                                        <input type="hidden" name="hidden_type_id" id="hidden_type_id" />
                                        <input type="submit"
                                            class="btn btn-lg boton-lg" value="{{ __('common_actions')['save'] }}" />
                                    </div>
                                </div>
                            @else
                                <h3 class="my-3 text-center legend-titles ota-indications">
                                    <i>{{ __('entity_forms')['otas_connection']['common']['no_active_channels'] }}</i>
                                </h3>
                            @endif

                        </form>

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

    {{-- Scripts --}}
        {{-- Import JQuery --}}
        <script type="text/javascript">
            "use strict";
        </script>

        {{-- Page Behavior --}}
        <script>
            $(document).ready(function () {

                // On LoadEvents
                    @if ($counted_otas)
                        setTimeout(() => defineSummaryAndOccupation({ is_initial_loading: true }), 400);
                    @endif

                // Constants
                    window.occupation_limit = {{ $occupation_limit }};
                    window.sample_ota_names = @json($activated_otas->pluck('sample_name'));

                    window.external_rooms = @json(
                        $activated_otas->mapWithKeys(function ($ota) {
                            return [
                                $ota->sample_name => $ota->external_rooms,
                            ];
                        })
                    ); // Extract each Connection's Room Rates

                // Scroll Table Control
                $('#table-container').on('scroll', function () {
                    if ($(this).scrollTop() > 30) {
                        $('#table-header').addClass('glass-background');
                    } else {
                        $('#table-header').removeClass('glass-background');
                    }
                });

                // On Close Modal
                $('#roomTypeFormModal').on('hide.bs.modal', function () {
                    document.activeElement.blur();
                });

                $('#allotment_events_form').on('submit', async function(event) {
                    event.preventDefault();

                    $.ajax({
                        url: "{{ route('otas.allotment.store') }}",
                        method: "POST",

                        data: await buildAllotmentData(),
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        dataType: "json",

                        success: function(data) {
                            launchSwalToast(
                                'success',
                                "{{ __('common_responses_and_messages')['updated_successfully'] }}",
                            );
                        }
                    });
                });

                $('#channels_form').on('submit', function(event) {
                    event.preventDefault();

                    // Validate echa OTA Tab fields
                    const form = this;
                    const tabsAreValid = validateChannelsForm(form);
                        if (!tabsAreValid) return;

                    // Send Request
                    $.ajax({
                        url: "{{ route('otas.configureRoomType') }}",
                        method: "POST",
                        data: new FormData(this),
                        contentType: false,
                        cache: false,
                        processData: false,
                        dataType: "json",

                        success: function(data) {
                          // Clean Errors
                            $(`select[id^="online_type_"]`).removeClass('error');

                          // Show Success Message
                            launchSwalToast(
                                'success',
                                "{{ __('common_responses_and_messages')['updating_data'] }}"
                            );
                        },

                        error: function(error) {
                          // Extract Erro Data
                            const error_data = error.responseJSON;
                            const {ota, conflict_room_id} = error_data;
                            const external_room = window.external_rooms[ota][conflict_room_id].name

                          // Show Tab && Input Errors
                            $(`#tab_OTA_${ota} a.nav-link`).tab('show');
                            $(`#online_type_${ota}`).addClass('error');

                          // Launch Error Message
                            Swal.fire({
                                icon: 'error',
                                title: "{{ __('common_responses_and_messages')['rejected_action'] }}",
                                html: translateAndReplace(
                                    `entity_forms.otas_connection.room_type_addon.warnings.type_already_assigned`,
                                    { external_room, ota }
                                ),
                                confirmButtonText: "{{ __('common_actions')['approve'] }} {{ __('common_actions')['accept'] }}",
                            });
                        }
                    });
                });
            });
        </script>

        {{-- Special Functions --}}
        <script>

          //* Switches
            // Availability Control
            async function toggleRoomTypeAvailability(room_type_id, name) {
              // Control Data
                const switch_type = $(`#is_type_${room_type_id}_available`);
                const checked = switch_type.prop('checked');
                const switch_boxes = $(`label.switch_label[id^="switchbox_${room_type_id}_"]`);

                Swal.fire({
                    icon: 'warning',
                    title: "{{ __('common_responses_and_messages')['default_confirmation'] }}",
                    html: translateAndReplace(
                        `entity_forms.otas_connection.availability_configuration.warnings.${checked ? 'disable_availability' : 'enable_availability'}`,
                        { type: name }
                    ),
                    showCancelButton: true,
                    confirmButtonText: "{{ __('common_actions')['approve'] }} {{ __('common_actions')['accept'] }}",
                    cancelButtonText: "{{ __('common_actions')['cancel'] }}",
                }).then(async (response) => {
                    if (response.isDismissed) {
                        switch_type.prop('checked', !checked);
                        return;
                    }

                    // Define Toggle Status
                    const disabled = !checked;
                        switch_boxes.find(`input[id*="_available_on_"]`).prop('disabled', disabled);
                        switch_boxes.find('.specific_slider').css('cursor', disabled ? 'not-allowed' : 'default');

                        if (disabled) {
                            switch_boxes.find('.specific_slider').addClass('disabled_switch');
                        } else {
                            switch_boxes.find('.specific_slider').removeClass('disabled_switch');
                        }

                    // Render Changes on View
                    await defineSummaryAndOccupation({ is_room_switch_event: false });
                });
            }

            function updateRoomOnlineAvailability(input) {
                const checked = input.checked;

                if (checked) { // Confirmation is required to re-offer room
                    Swal.fire({
                        icon: 'warning',
                        title: "{{ __('common_responses_and_messages')['default_confirmation'] }}",
                        html: translateAndReplace(`entity_forms.otas_connection.availability_configuration.warnings.offer_room`),
                        showCancelButton: true,
                        confirmButtonText: "{{ __('common_actions')['approve'] }} {{ __('common_actions')['accept'] }}",
                        cancelButtonText: "{{ __('common_actions')['cancel'] }}",
                    }).then(async (response) => {
                        if (response.isDismissed) {
                            restoreToggleValue(input.id);
                            return;
                        }

                        await spreadRoomAvailability(input, checked);
                    });

                    return;
                } else { // User needs to specify why is closing the room availability
                    Swal.fire({
                        icon: "question",
                        html: `
                            <label class="mb-0 harsi-contrast-color ota-indications">
                                ${ translateAndReplace(
                                    'entity_forms.otas_connection.availability_configuration.warnings.disable_room_availability',
                                    { date: "{{ $date }}" }
                                )}
                            </label>
                        `,

                        showCancelButton: true,
                        confirmButtonText: "{{ __('common_actions')['accept'] }}",
                        cancelButtonText: "{{ __('common_actions')['cancel'] }}",

                        input: 'select',
                        inputOptions: {
                            reservation: "{{ __('entity_forms')['otas_connection']['availability_configuration']['mark_as_reserved'] }}",
                            deactivation: "{{ __('entity_forms')['otas_connection']['availability_configuration']['mark_as_deactivated'] }}"
                        },
                        inputPlaceholder: "-- {{ __('common_actions')['select'] }} --",
                        inputValidator: (value) => {
                            return new Promise((resolve) => {
                                if (value) {
                                    resolve()
                                } else {
                                    resolve("{{ __('validation.required', ['attribute' => '']) }}")
                                }
                            })
                        }
                    }).then(async (result) => {
                        if (result.isDismissed) {
                            restoreToggleValue(input.id);
                            return;
                        }

                        if (result.isConfirmed) {
                            const closed_by_reservation = result.value === "reservation";

                            await spreadRoomAvailability(input, checked, closed_by_reservation);
                        }
                    })
                }
            }

            // Complementary Functions
                async function spreadRoomAvailability(input, is_checked, closed_by_reservation = false) {
                  //- Extract Data from Input
                    const room_name = input.name; // Input Name
                    const room_regex = new RegExp(`^(.+)_from_(.+)_available_on_(.+)$`); // Data Extractor
                    const room_match = room_name.match(room_regex);
                        if (!room_match) return;

                    const room_id = room_match[1];  // Room ID
                    const rt_id = room_match[2];    // Room Type ID

                  //- Spread Event to same Row Switches
                    // Disable Room Switches
                    $(`input[type=checkbox][name^="${room_id}_from_${rt_id}_available_on"]`).each(function () {
                        $(this).prop('checked', is_checked);
                    });

                    // Update Room Online Status
                    const labels_reference= `${room_id}_from_${rt_id}`;
                    let room_status = "available";

                    if (!is_checked) {
                        room_status = closed_by_reservation
                        ? "reserved"
                        : "deactivated";
                    }

                    $(`label[data-switch-status^="${labels_reference}"]`).each(function () {
                        $(this)
                            .attr('data-switch-status', `${labels_reference}_${room_status}`)
                            .attr('data-status', room_status)
                            .text( translateAndReplace(`neutral_words.${room_status}`) );
                    });

                  //- Render Changes on View
                    await defineTypeAvailability(rt_id);
                    await defineSummaryAndOccupation({ is_unchecked_event: !is_checked });
                }

                async function defineTypeAvailability(room_type_id) {
                    const linked_room_rows = $(`[data-room-type-id="${room_type_id}"]`);
                    let any_room_active = true;

                    await linked_room_rows.each(async function() {
                        const row = $(this); // Get all row structure & data
                        const checks = row.find('input[type="checkbox"][id*="_available_on_"]'); // Get all switches on the row
                        any_room_active |= await checks.toArray().some(ch => ch.checked); // Is any toggle Active? (Is any room (from Type) available on some OTA?)
                    });

                    if (!any_room_active)
                        await manualSwitchesToggle({ is_type_active: false, room_type_id });
                }

                async function defineSummaryAndOccupation({
                    is_initial_loading = false,
                    is_room_switch_event = true,
                    is_unchecked_event = true,
                } = {}) {
                  //- Define new Occupation Percentage
                    // Calculate percentage
                    const room_rows = $('.room-switches-row'); // Room Rows Rendered
                    let total_rooms = 0; // How many rooms have been configured for sale through OTAs? (only with Reserved & available)
                    let available_rooms = 0; // How many of these rooms are actually available at this time?

                    room_rows.each(function() { // Per each Row
                        const row = $(this); // Get all row structure & data

                      // Increment Available Rooms if checkboxes are Checked
                        const checks = row.find('input[type="checkbox"][id*="_available_on_"]'); // Get all switches on the row
                        const anyChecked = checks.toArray().some(ch => ch.checked); // Is any toggle Active? (Is rooms available on some OTA?)
                            if (anyChecked) available_rooms++;

                      // Increment Total Rooms if room status is not deactivated
                        const status_labels = row.find('label[data-status="deactivated"]'); // Get all Status Labels on the row
                        const any_deactivated = status_labels.toArray().length > 0;
                            if (!any_deactivated) total_rooms++;
                    });

                    const occupiedRooms = total_rooms - available_rooms;
                    const occupation_percentage = (total_rooms === 0)
                        ? 0
                        : Math.round((occupiedRooms * 100) / total_rooms);

                        $('#occupation_percentage_text').text(occupation_percentage);
                        $('#occupation_percentage').val(occupation_percentage);

                    // Check View Status for Limit Reached
                        if (
                            (occupation_percentage >= window.occupation_limit) // The occupancy limit has been reached.
                            && is_room_switch_event // The event has been generated by a Room Switch.
                            && is_unchecked_event // The triggered event is an unchecked Room Switch event.
                        ) {
                            manualSwitchesToggle({ is_type_active: false }); // Update Switches Status

                            // Limit Message
                            setTimeout(() => {
                                Swal.fire({
                                    icon: 'warning',
                                    title: "{{ __('entity_forms')['otas_connection']['availability_configuration']['warnings']['limit_reached_title'] }}",
                                    html: "{!! __('entity_forms')['otas_connection']['availability_configuration']['warnings']['limit_reached_description'] !!}",
                                    confirmButtonText: "{{ __('common_actions')['approve'] }} {{ __('common_actions')['accept'] }}",
                                })
                            }, 850);
                        }

                  //- Define new Allotment summaries
                    const {availability_per_type} = await buildAllotmentData(); // Extract rooms configuration from view

                    window.sample_ota_names.forEach(async (ota) => {
                        const rooms_quantity = await Object.values(availability_per_type).reduce((available_quantity, rt_data) => {
                            if (!rt_data.has_open_availability) {
                                return available_quantity; // If RoomType is not available, all child rooms cannot be counted
                            }

                            const available_rooms_on_ota = rt_data.ota_availability_summary[ota] || []; // What rooms does Type have available to sell through the OTA?
                            return available_quantity + available_rooms_on_ota.length;
                        }, 0);

                        $(`#allotment_${ota}_summary_text`).text(rooms_quantity);
                        $(`#allotment_${ota}_summary`).val(rooms_quantity);
                    });

                  //- Save Data on DB
                    if(!is_initial_loading) {
                        $('#allotment_events_form').trigger('submit');
                    } else {
                        $.ajax({
                            url: "{{ route('otas.allotment.verification') }}",
                            method: "get",

                            data: {
                                event_date: "{{ $date }}",
                            },
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            dataType: "json",

                            success: function(results) {
                                if (results.exists)
                                    $('#allotment_events_form').trigger('submit');
                            }
                        });
                    }

                }

                async function manualSwitchesToggle({
                    is_type_active = true,
                    room_type_id = null,
                } = {}) {
                    // RoomTypes Switches
                    const $roomTypeSelector = room_type_id
                        ? $(`input[type=checkbox][name="is_type_${room_type_id}_available"]`)
                        : $('input[type=checkbox][name^="is_type_"][name$="_available"]');

                    $roomTypeSelector.prop('checked', is_type_active);

                    // Rooms Switches
                    const type_reference = room_type_id ? `_from_${room_type_id}` : '';
                    $(`input[type="checkbox"][id*="${type_reference}_available_on_"]`)
                        .prop('disabled', !is_type_active)
                        .next('.specific_slider')
                            .css('cursor', is_type_active ? 'pointer' : 'not-allowed')
                            .toggleClass('disabled_switch', !is_type_active);
                }

          //* RoomType Form
            function updateRoomTypeConfiguration(id) {
                $.ajax({
                    url: `/room-types/${id}/edit`,
                    dataType: "json",
                    success: async function(result) {
                        $('#tariffs').empty();

                      //* Control Data
                        const rt_data = result.data;

                      //* Seed Form
                        $('#hidden_type_id').val(rt_data.id);

                      //* Modify Modal
                        $('#tab_content').show();
                        $('#local_tab').tab('show');

                        //- Visual Changes
                        $('.modal_title').text(rt_data.tr_name);
                        $('.modal_subtitle').text(`{{ __('entities')['hotel']['room_type'] }} #${rt_data.tr_name}`);

                        //- Fields Seeder
                            $('input[id$="_room_type_reference"]').val(rt_data.tr_name)
                            $(`select[id^="online_type_"]`).val("none").removeClass('error');;

                            // Get AvailableRooms

                            await apiGet("{{ route('api.otas.availableExternalIds') }}", function (availability_data) {
                              // Draw AvailableRoom Options
                                Object.entries(availability_data ?? {}).forEach(([ota, available_rooms]) => {
                                    let options = `<option value="none" selected>{{ __('neutral_words')['none'] }}</option>`;

                                    available_rooms.forEach(ext_room => {
                                        const room_name = window.external_rooms[ota][ext_room].name;
                                        options += `<option value="${ext_room}">${room_name}</option>`;
                                    });

                                    $(`#online_type_${ota}`).html(options);
                                });

                              // ExternalRooms Select
                                const external_identifications = rt_data.external_identifications ?? {};
                                Object.entries(external_identifications).forEach(([ota_name, external_room]) => {
                                    $(`#online_type_${ota_name}`).val(external_room ?? "none").trigger('change');
                                });
                            }, { type_to_exclude: rt_data.id });

                        // Modal Control
                        $('#roomTypeFormModal').modal('show');
                    },

                });
            }

            async function drawRatePlans(input, sample_ota) {
                const selected_value = input.value;
                    if (["none"].includes(selected_value)) return;

                const room_rate_plans = window.external_rooms[sample_ota][selected_value].rate_plans;
                const rate_plans_quantity = Object.keys(room_rate_plans).length;

                let rate_plans_content = `
                    <div class="flex-shrink-0 px-3 mb-4 text-center col-12 border-right">
                        <p class="empty-list-message">{{ __('entity_forms')['otas_connection']['common']['no_rate_plans'] }}</p>
                    </div>
                `;

                if (rate_plans_quantity) {
                    rate_plans_content = '';

                    await Object.entries(room_rate_plans).forEach(([plan_id, plan_data]) => {
                        rate_plans_content += `
                            <div class="flex-shrink-0 px-3 col-6 border-right">

                                <div class="mb-3 input-group">
                                    <input type="text" name="tariff_plan_name_${plan_id}" id="tariff_plan_name_${plan_id}"
                                        class="text-center form-control disabled-fields" readonly required
                                        value="${plan_data.name}">
                                </div>

                                <div class="mb-3 input-group">
                                    <div class="input-group-prepend">
                                        <label class="input-group-text">
                                            {{ __('entity_fields')['reservation']['final_price'] }}
                                        </label>
                                    </div>
                                    <input type="number" {{-- name="tariff_plan_rate_${plan_id}" id="tariff_plan_rate_${plan_id}" --}} readonly required
                                        class="form-control" step="0.01"
                                        value="${plan_data.rate.toFixed(2)}"
                                        onchange="formatDecimal(this)">
                                </div>

                                <div class="mb-3 input-group">
                                    <div class="input-group-prepend">
                                        <label class="px-1 input-group-text">
                                            {{ __('entity_forms')['otas_connection']['room_type_addon']['otas_data']['minimum_stay'] }}
                                        </label>
                                    </div>
                                    <input type="number" {{-- name="tariff_plan_min_stay_${plan_id}" id="tariff_plan_min_stay_${plan_id}" --}} readonly required
                                        class="form-control" step=".1" min="0" placeholder="0"
                                        value="${plan_data.minimum_stay}"
                                        onchange="formatInteger(this)">
                                </div>

                                <div class="mb-3 input-group">
                                    <div class="input-group-prepend">
                                        <label class="px-1 input-group-text">
                                            {{ __('entity_forms')['otas_connection']['room_type_addon']['otas_data']['maximum_stay'] }}
                                        </label>
                                    </div>
                                    <input type="number" {{-- name="tariff_plan_max_stay_${plan_id}" id="tariff_plan_max_stay_${plan_id}" --}} readonly required
                                        class="form-control" step=".1" min="0" placeholder="0"
                                        value="${plan_data.maximum_stay}"
                                        onchange="formatInteger(this)">
                                </div>

                            </div>
                        `;
                    });
                }

                const base_structure = `
                    <hr>
                    <div class="pl-2 d-flex align-items-start text-start">
                        <h5 class="pt-1 harsi-color" style="font-weight: 700">{{ __('entity_forms')['otas_connection']['room_type_addon']['otas_data']['rate_plans'] }}</h5>
                        {{--&nbsp;&nbsp;
                        <button type="button" class="mb-3 btn btn-outline-harsi">
                            <i class="fas fa-sync"></i>
                        </button>--}}
                    </div>

                    <div class="pt-2 pb-4">
                        <div class="overflow-auto row flex-nowrap justify-content-${rate_plans_quantity > 2 ? "start" : "center"}">
                            ${rate_plans_content}
                        </div>
                    </div>
                `;

                // $(`#${sample_ota}_rate_plans_section`).html(base_structure); // TODO
            }

            function validateChannelsForm(form) {
                // Obtenemos cada uno de los campos del Formulario
                const inputs = form.querySelectorAll('input, select');
                const $tab_box = $('#ota_tab_box'); // Contenedor de los NavTab
                const $container = $('#ota_tab_content'); // Contenedor de los Tab Panels

                for (const input of inputs) {
                    // Ignora campos hidden, readonly o invisibles (por display: none o visibility: hidden)
                    if (
                        input.hasAttribute('readonly')
                        || input.type === 'hidden'
                        || $(input).css('visibility') === 'hidden'
                        || $(input).css('display') === 'none'
                    ) continue;

                    if (!input.checkValidity()) { // Si el campo es incorrecto, o vació
                        const $tabPane = $(input).closest('#ota_tab_content .tab-pane'); // ¿Esta dentro de alguna de las Tabs de OTAS?

                        if ($tabPane.length) {
                            // Obtenemos el Id de su Tab y navegamos a ella
                            const tabId = $tabPane.attr('id');

                            // Desactivar SOLO tabs/panes dentro del contenedor
                            const $tabs   = $tab_box.find('[data-toggle="tab"], [data-bs-toggle="tab"]');
                            const $panes  = $container.find('.tab-pane');

                            $tabs.removeClass('active');
                            $panes.removeClass('show active');

                            // Activar la tab/pane correspondiente dentro del contenedor
                            $tabs.filter(`[href="#${tabId}"]`).addClass('active');
                            $container.find(`#${tabId}`).addClass('show active');

                            setTimeout(() => {
                                input.reportValidity();
                                input.focus();
                                input.scrollIntoView({ behavior: 'smooth', block: 'center' });
                            }, 100);
                        } else {
                            // Simplemente muestra el mensaje
                            input.reportValidity();
                            input.focus();
                            input.scrollIntoView({ behavior: 'smooth', block: 'center' });
                        }

                        return false;
                    }
                }

                return true;
            }

          //* Support Functions
            function restoreToggleValue(switch_id) {
                const $switch = $(`#${switch_id}`);
                $switch.prop('checked', !$switch.prop('checked'));
            }

            function launchSwalToast(icon, title) {
                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 5000,
                    timerProgressBar: true,
                    title,
                    icon,
                });
            }

            function buildAllotmentData() {
              //- Build Default Structure
                const data = {
                    occupation_percentage: parseInt($('#occupation_percentage').val(), 10),
                    allotment_event_date: $('#allotment_event_date').val(),
                    allotment_summary: {},
                    availability_per_type: {}
                };

              //- Get Allotment Summaries
                $('input[type=hidden][name^="allotment_"][name$="_summary"]').each(function () {
                    const field_name = this.name; // Field name
                    const ota_match = field_name.match(/^allotment_(.+)_summary$/); // OTa Name Extractor

                    const ota_name = ota_match[1]; // OTA Name

                    data.allotment_summary[ota_name] = $(this).val();
                });

              //- Define Availability per Type
                $('input[type=checkbox][name^="is_type_"][name$="_available"]').each(async function () {
                  //+ Control Data
                    const rt_name = this.name; // Field name
                    const rt_match = rt_name.match(/^is_type_(.+)_available$/); // RoomType Id Extractor

                    const type_id = rt_match[1]; // RoomType ID
                    const ota_availability_summary = {}; // Internal RoomType Configuration (Which Rooms still Available)
                    const ota_occupancy_summary = []; // Internal RoomType Configuration (Which Rooms are Reserved/Occupied)

                  //+ Define RoomType Configuration per Type
                    // Available Rooms
                    $(`input[type=checkbox][name*="_from_${type_id}_available_on_"]:checked`).each(function () {
                        // $(`input[type=checkbox][name*="_from_${type_id}_available_on_"]:not(:checked)`).each(function () {
                        const room_name = this.name;
                        const room_regex = new RegExp(`^(.+)_from_${type_id}_available_on_(.+)$`);
                        const room_match = room_name.match(room_regex);
                        if (!room_match) return;

                        const room_id = room_match[1];   // Room ID
                        const ota     = room_match[2];   // OTA Name

                        (ota_availability_summary[ota] ||= []).push(room_id);
                    });

                    // Occupied Rooms
                    $(`label[data-switch-status*="_from_${type_id}_reserved"]`).each(function () {
                        const label = $(this);
                        const label_status = label.attr('data-switch-status');

                        const label_regex = new RegExp(`^(.+)_from_${type_id}_reserved$`);
                        const label_match = label_status.match(label_regex);
                            if (!label_match) return;

                        const room_id = label_match[1];   // Room ID

                        if (!ota_occupancy_summary.includes(room_id))
                            (ota_occupancy_summary).push(room_id);
                    });

                  //+ Set Structure
                    data.availability_per_type[type_id] = {
                        has_open_availability: this.checked,
                        ota_availability_summary,
                        ota_occupancy_summary,
                    };

                });

                return data;
            }

        </script>


@endsection

@section('footer')
    @include('shared.components.footer.basic-footer')
@endsection