{{-- Imports --}}
@php
    use App\Enums\Hotel\CycleType;
@endphp

{{-- Constants & Triggers --}}
<script>
  // Constants
    window.has_otas = @json($has_otas);
    window.has_pax_pricing = @json($has_pax_pricing);
    window.has_express_reservations = @json($has_express_reservations);
    window.has_additional_pax_charge = @json($has_additional_pax_charge);

    window.week_days = [
        { value: 0, label: moment().day(0).format('dddd') },
        { value: 1, label: moment().day(1).format('dddd') },
        { value: 2, label: moment().day(2).format('dddd') },
        { value: 3, label: moment().day(3).format('dddd') },
        { value: 4, label: moment().day(4).format('dddd') },
        { value: 5, label: moment().day(5).format('dddd') },
        { value: 6, label: moment().day(6).format('dddd') },
    ];

  // On window unload
    window.onbeforeunload = function() {
        localStorage.removeItem("room_type_configuration");
    };
</script>

{{-- CRUD Interactions --}}
<script>
    $(document).ready(function(){
      // For  Create
        $('#create_record').click(function(){
            // Title
            @if ($has_otas)
                $('.modal_title').text("{{ __('entities')['hotel']['room'] }}");
            @else
                $('.modal_title').text("{{ __('entity_forms')['common']['modal_title'] }}");
                $('.modal_subtitle').text("- {{ __('entities')['hotel']['room'] }} -");
            @endif

            // Buttons
            $('#action_button').val("{{ __('common_actions')['add'] }}");
            $('#action').val("Agregar");

            // Modal Structure
            $('#periods').empty();
            $('#tariffs').empty().css('max-height', '28rem');
            $('#periods_tariffs, #otas_availability').hide();
            $('#formModal').modal('show');
            $('#sample_form')[0].reset();

            // Clear Season & Tariff Data
            localStorage.setItem("room_type_configuration","");
        });

      // For Edit
        $(document).on('click', '.edit', function(){
            var id = $(this).attr('id');
            $.ajax({
                url:`/rooms/${id}/edit`,
                dataType:"json",
                success:function(html){
                    data = html.data;
                    let is_express_type = false;

                    // Clear Data
                    if(window.has_otas)
                        $('#tariffs').css('max-height', '12rem');

                    $('#tariffs').empty();
                    $('#periods').empty();
                    $('#periods_tariffs').hide();
                    $(`#using_default_prices`).prop('checked', false);
                    $(`#using_default_periods`).prop('checked', false);
                    localStorage.setItem("room_type_configuration","");

                    // Seed Form
                    $('#num_room').val(data.room_name);
                    $('#room_type_id').val(data.roomType_id);
                    $('#room_status').val(data.room_status);
                    $('#room_floor').val(data.room_floor);
                    $('#room_group_id').val(data.room_group_id);
                    $('#hidden_id').val(data.id);

                    $(`select[id^="available_room_on_"]`).val(0);

                    const availability_configuration = data.available_on_otas ?? [];
                    availability_configuration.forEach((ota_name) => {
                        $(`#available_room_on_${ota_name}`).val(1);
                    });

                    // Build Prices & Seasons
                    let room_price_data = data.room_prices;
                    const using_default_prices = room_price_data.using_default_prices;
                    const using_default_periods = room_price_data.using_default_periods;

                      // Seed By Booleans
                        if(!using_default_prices)
                            $(`#using_default_prices`).prop('checked', true);
                        if(!using_default_periods)
                            $(`#using_default_periods`).prop('checked', true);

                    $('#periods_tariffs, #otas_availability').show();

                    // Save & Build System Prices
                    apiGet(`/api/room-types/${data.roomType_id}/periods-and-tariffs`, function (rt_data) {
                      // Parse Data
                        let tariffs_by_season = rt_data.tariffs_by_season;
                        let additional_pax_charge = rt_data.additional_pax_charge;
                        let express_checkout_penalty = rt_data.express_checkout_penalty;
                        is_express_type = rt_data.is_express_type;

                        const stored_config = JSON.stringify({tariffs_by_season, additional_pax_charge, is_express_type, express_checkout_penalty});
                        localStorage.setItem("room_type_configuration", stored_config);

                      // Create Structures
                        const parsed_rates = parseLegacyData(data, is_express_type);
                        renderLegacyRates(parsed_rates.tariffs_by_season, using_default_prices, is_express_type);
                        renderLegacyPeriods(parsed_rates.tariffs_by_season, using_default_periods);

                      // Fill Independent Fields
                        $('#additional_pax_charge').val(using_default_prices
                            ? additional_pax_charge : data.additional_pax_charge
                        ).prop({readonly: using_default_prices});

                        $('#express_checkout_penalty_block').toggle(is_express_type);
                        $('#express_checkout_penalty').val(using_default_prices
                            ? express_checkout_penalty : data.express_checkout_penalty
                        ).prop({readonly: using_default_prices});
                    });

                    // Modify Modal
                    @if ($has_otas)
                        $('.modal_title').text(`{{ __('entities')['hotel']['room'] }} ${data.room_name}`);
                    @else
                        $('.modal_title').text("{{ __('entity_forms')['common']['modal_title_2'] }}");
                        $('.modal_subtitle').text(`{{ __('entities')['hotel']['room'] }} ${data.room_name}`);
                    @endif

                    $('#action_button').val("{{ __('common_actions')['update'] }}");
                    $('#action').val("Actualizar");
                    $('#formModal').modal('show');
                }
            })
        });

      // For Delete
        $(document).on('click', '.delete', function(){
            var id = $(this).attr('id');
            Swal.fire({
                type: 'warning',
                title: "{{ __('common_responses_and_messages')['confirm_deletion'] }}",
                confirmButtonText: "{{ __('common_actions')['approve'] }} {{ __('common_actions')['confirm_deletion'] }}",
                confirmButtonColor: `#0d6889`,
                showCancelButton: true,
                cancelButtonText: `{{ __('common_actions')['cancel'] }}`,
                cancelButtonColor: `#c82333`
            }).then((result) => {
                if (result.value) {
                    $.ajax({
                        url: `/rooms/${id}/destroy`,
                        success:function(data) {
                            setTimeout(function(){
                                Swal.fire(
                                    "{{ __('common_responses_and_messages')['deleted'] }}",
                                    "{{ __('common_responses_and_messages')['deleted_successfully'] }}",
                                    'success'
                                );
                                $('#room_types_table').DataTable().ajax.reload(null, false);
                            }, 200);
                        }
                    });
                }
            });
        });

      // On Submit
        $('#sample_form').on('submit', function(event){
            event.preventDefault();
            if($('#action').val() == 'Agregar') {
                $.ajax({
                    url:"{{ route('rooms.store') }}",
                    method:"POST",
                    data: new FormData(this),
                    contentType: false,
                    cache:false,
                    processData: false,
                    dataType:"json",
                    error: function(data) {
                        const response = data.responseJSON;

                        // Record limit reached
                        if (response.limit_message) {
                            Swal.fire({
                                title: "{{ __('common_responses_and_messages')['rejected_action'] }}",
                                text: response.limit_message,
                                type:'error'
                            });

                            $('#formModal').modal('hide');
                            return;
                        }

                        return;
                    },
                    success:function(data) {
                        if(data.success) {
                            Swal.fire(
                                "{{ __('common_responses_and_messages')['success'] }}",
                                "{{ __('common_responses_and_messages')['created_successfully'] }}",
                                'success'
                            );
                            // $('#sample_form')[0].reset();
                            $('#room_types_table').DataTable().ajax.reload(null, false);
                            $('#sample_form')[0].reset();
                            $('#formModal').modal('hide');
                            $('#periods').empty();
                            $('#tariffs').empty();
                        }
                    }
                })
            }

            if($('#action').val() == "Actualizar") {
                $.ajax({
                    url:"{{ route('rooms.update') }}",
                    method:"POST",
                    data:new FormData(this),
                    contentType: false,
                    cache: false,
                    processData: false,
                    dataType:"json",
                    success:function(data) {
                        if(data.success) {
                            Swal.fire(
                                "{{ __('common_responses_and_messages')['success'] }}",
                                "{{ __('common_responses_and_messages')['updated_successfully'] }}",
                                'success'
                            );
                            $('#formModal').modal('hide');
                            $('#sample_form')[0].reset();
                            $('#room_types_table').DataTable().ajax.reload(null, false);
                            $('#periods').empty();
                            $('#tariffs').empty();
                        }
                    }
                });
            }

            // Clear Season & Tariff Data
            localStorage.setItem("room_type_configuration","");
        });

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

{{-- Seasons & Tariffs --}}
<script>
  // Triggers & Functions
    $(function () {
      // Triggers
        $('#room_type_id').on('change', onSelectTypeRoom);

      // Interactions
        $(document).on('change', '.weekly-day-select', function () {
            const season_id = $(this).data('weekly-season');
            refreshWeeklySeasonOptions(season_id);
        });
    });

    function onSelectTypeRoom() {
        $('#periods_tariffs').hide();
        $('#periods, #tariffs').empty();
        $(`#using_default_prices`).prop('checked', false);
        $(`#using_default_periods`).prop('checked', false);

        var roomtype_id = $(this).val();

        apiGet(`/api/room-types/${roomtype_id}/periods-and-tariffs`, function (data) {
            // Extract Data
            let tariffs_by_season = data.tariffs_by_season;
            let additional_pax_charge = data.additional_pax_charge;
            let express_checkout_penalty = data.express_checkout_penalty;
            let is_express_type = data.is_express_type;

            // Render Structures
            renderLegacyRates(tariffs_by_season, true, is_express_type);
            renderLegacyPeriods(tariffs_by_season, true);

            // Render Independent Fields
            $('#additional_pax_charge').prop({readonly: true}).val(additional_pax_charge);

            $('#express_checkout_penalty_block').toggle(is_express_type);
            $('#express_checkout_penalty').prop({readonly: true}).val(express_checkout_penalty);

            // Store Data
            const stored_config = JSON.stringify({tariffs_by_season, additional_pax_charge, is_express_type, express_checkout_penalty});
            localStorage.setItem("room_type_configuration", stored_config);
        });

        $('#periods_tariffs').show();
    }

  // Toggle Custom Data
    function editTariffs(is_checked) {
      // Clear Sections
        $('#tariffs').empty();

      // Get and parse Stored data
        let stored_config = localStorage.getItem("room_type_configuration");
        const { tariffs_by_season, is_express_type, additional_pax_charge, express_checkout_penalty } = JSON.parse(stored_config);

      // Render Changes
        renderLegacyRates(tariffs_by_season, !is_checked, is_express_type);

      // Affect Secondary Fields
        // Additional PAX Charge
        $('#additional_pax_charge').prop({readonly: !is_checked}).val(additional_pax_charge);

        // Express Checkout Penalty
        if(is_express_type)
            $('#express_checkout_penalty').prop({readonly: !is_checked}).val(express_checkout_penalty);
    }

    function editSeasons(is_checked) {
      // Clear Sections
        $('#periods').empty();

      // Get and parse Stored data
        let stored_config = localStorage.getItem("room_type_configuration");
        const { tariffs_by_season, is_express_type } = JSON.parse(stored_config);

      // Render Changes
        renderLegacyPeriods(tariffs_by_season, !is_checked);
    }

  // Support Functions
    // Render Constants
    const buildSharedGlobalRate = ({
        tariff, using_default_prices = false, season_price = 0,
        pricing_breakdown = '', hidden_fields = '', breakdown_padding = 'px-4'
    } = {}) => `
        <div class="mb-3">

            {{-- Season Name --}}
            <div class="pl-3 text-start">
                <p class="season_subtitle">${
                    tariff.season_name === "Temporada Única"
                        ? translateAndReplace(`seeders.seasons.${tariff.season_name}`)
                        : tariff.season_name
                }</p>
            </div>

            {{-- Pricing Breakdown --}}
            <div class="${breakdown_padding}">

                {{-- Global Rate --}}
                <div class="mx-1 mb-2 input-group">
                    <div class="input-group-prepend">
                        <label for="season_${tariff.season_id}_price" class="input-group-text">
                            {{ __('entity_forms')['room']['global_rate'] }}
                        </label>
                    </div>

                    <input type="number" name="seasons_prices[]" id="season_${tariff.season_id}_price" required ${using_default_prices ? 'readonly' : ''}
                        step="0.01" min="0" value="${season_price}" placeholder="${currencyPlaceHolder()}"
                        onchange="formatDecimal(this); syncPaxPricing(${tariff.season_id}, this)"
                        onfocus="this.dataset.previous = this.value"
                        class="form-control"
                    />
                </div>

                {{-- Dynamic Breakdown --}}
                ${pricing_breakdown}

                {{-- Hidden Breakdown --}}
                ${hidden_fields}

            </div>
        </div>
    `;

    const renderHiddenInputs = (items, nameBuilder, valueBuilder) =>
        (items || []).map(item => `
            <input type="hidden" name="${nameBuilder(item)}"
                step="0.01" min="0" value="${valueBuilder(item)}" />
        `).join('');

    const renderInputGroup = ({ label, name, id = null, value, readonly, onfocus_functions = [], onchange_functions = [] }) => {
        onchange_functions = ['formatDecimal(this)', ...onchange_functions]; // Set default functions

        return `<div class="mx-1 mb-2 input-group">
            <div class="input-group-prepend">
                <label class="input-group-text">${label}</label>
            </div>

            <input type="number" name="${name}" ${id ? `id="${id}"` : ''} ${readonly ? 'readonly' : ''}
                step="0.01" min="0" value="${value}" placeholder="${currencyPlaceHolder()}"
                ${onfocus_functions.length ? `onfocus="${onfocus_functions.join(", ")}"` : ''}
                onchange="${onchange_functions.join(", ")}"
                class="form-control" />
        </div>`;
    };

    // Builders
    function parseLegacyData(data, is_express_type) {
      // Shortcuts
        const season_pricing = data.room_prices.room_prices;
        const pax_pricing = data.room_pax_prices.room_prices;
        const express_pricing = data.room_express_prices.room_prices;

      // Parse Data
        const tariffs_by_season = [];
        season_pricing.forEach((s, i) => {
            tariffs_by_season.push({
                season_id: s.season_id,
                season_name: s.season_name,
                is_cyclic: pax_pricing[i].is_cyclic,
                cycle_type: pax_pricing[i].cycle_type,
                season_global_price: parseFloat(s.season_price),
                season_pax_pricing: pax_pricing[i].season_pax_pricing,
                season_express_pricing: express_pricing[i].season_express_pricing,
                periods: s.periods
            });
        });

      // Build Final Data
        const parsed_data = {
            is_express_type,
            tariffs_by_season
        };

        return parsed_data;
    }

    function renderLegacyRates(legacy_rates, using_default_prices, is_express_type) {
        (legacy_rates).forEach(tariff => {
          // Format Data
            const season_price = typeof tariff.season_global_price === "string" ? parseFloat(tariff.season_global_price).toFixed(2) : tariff.season_global_price.toFixed(2);

          /** Define Render Cases **
            // State Flags
                1. Hospedaje Express Activo | 2. Hospedaje Express Inactivo
                3. PAX Activo               | 4. PAX Inactivo
                5. Habitación Express       | 6. Habitación Normal

            // Scenarios
            window.has_express_reservations && window.has_pax_pricing && is_express_type // 1 + 3 + 5 (Muestra Tarifas por Paquetes de hora y cada paquete con sus variante por Persona)
            window.has_express_reservations && window.has_pax_pricing && !is_express_type // 1 + 3 + 6 (Muestra Tarifas por Persona)

            window.has_express_reservations && !window.has_pax_pricing && is_express_type // 1 + 4 + 5 (Muestra Tarifas por Paquetes de hora simples)
            window.has_express_reservations && !window.has_pax_pricing && !is_express_type // 1 + 4 + 6 (Muestra Tarifas por Noche)

            !window.has_express_reservations && !window.has_pax_pricing && !is_express_type // 2 + 4 + 6 (Muestra Tarifas por Noche)
            !window.has_express_reservations && window.has_pax_pricing && !is_express_type // 2 + 3 + 6 (Muestra Tarifas por Persona)

            // Omitted Scenarios
            // En los siguientes casos, se omite considerar a is_express_type debido a que esta solo toma lugar si has_express_reservations esta activo
            !window.has_express_reservations && !window.has_pax_pricing && is_express_type // 2 + 4 + 5 (Muestra Tarifas por Noche)
            !window.has_express_reservations && window.has_pax_pricing && is_express_type // 2 + 3 + 5 (Muestra Tarifas por Persona)
          */

          // Define Structure
            let html = "";
            const hasExpress = window.has_express_reservations;
            const hasPax = window.has_pax_pricing;

                if (hasExpress && hasPax && is_express_type) { // Render Express Pax Rates

                  // Hidden Simple PAX Pricing
                    let hidden_pricing = renderHiddenInputs(
                        tariff.season_pax_pricing,
                        () => `season_${tariff.season_id}_pax[]`,
                        pax => pax.px_price.toFixed(2)
                    );

                  // Define Simple Express Pricing
                    let express_pax_pricing = (tariff.season_express_pricing || []).map(package => {
                        let package_pax_pricing = (package.express_pax_pricing || []).map(pax =>
                            renderInputGroup({
                                label: `${pax.px_quantity} px`,
                                name: `season_${tariff.season_id}_express[${package.package_duration}][pax][]`,
                                value: pax.px_price.toFixed(2),
                                readonly: using_default_prices
                            })
                        ).join('');

                        return `
                            <div class="mb-3">
                                {{-- Package Duration --}}
                                <div class="pl-3 text-start">
                                    <p class="season_subtitle" style="color:#444 !important">
                                        {{ __('entity_forms')['room_type']['package_prefix'] }} ${package.package_duration} H
                                    </p>
                                </div>

                                {{-- Pricing Breakdown --}}
                                <div class="pl-2">

                                    {{-- Global Rate --}}
                                    ${renderInputGroup({
                                        label: "{{ __('entity_forms')['room']['base_rate'] }}:",
                                        name: `season_${tariff.season_id}_express[${package.package_duration}][price]`,
                                        id: `season_${tariff.season_id}_express_${package.package_duration}`,
                                        value: package.package_price.toFixed(2),
                                        readonly: using_default_prices,
                                        onfocus_functions: ['this.dataset.previous = this.value'],
                                        onchange_functions: [`syncExpressPaxPricing(${tariff.season_id},${package.package_duration},this)`]
                                    })}

                                    {{-- Dynamic Breakdown --}}
                                    ${package_pax_pricing}

                                </div>
                            </div>
                        `;
                    }).join('');

                  // Define Full Structure
                    html = buildSharedGlobalRate({
                        tariff, using_default_prices, season_price,
                        pricing_breakdown: express_pax_pricing, hidden_fields: hidden_pricing, breakdown_padding: 'px-3'
                    });

                } else if (hasExpress && is_express_type) {  // Render Simple Express Rates

                  // Hidden Express PAX
                    let hidden_pricing = (tariff.season_express_pricing || []).flatMap(pkg =>
                        renderHiddenInputs(
                            pkg.express_pax_pricing,
                            () => `season_${tariff.season_id}_express[${pkg.package_duration}][pax][]`,
                            pax => pax.px_price.toFixed(2)
                        )
                    ).join('');

                  // Hidden Simple PAX Pricing
                    hidden_pricing += renderHiddenInputs(
                        tariff.season_pax_pricing,
                        () => `season_${tariff.season_id}_pax[]`,
                        pax => pax.px_price.toFixed(2)
                    );

                  // Define Simple Express Pricing
                    let simple_express_pricing = (tariff.season_express_pricing || []).map(package =>
                        renderInputGroup({
                            label: `${package.package_duration} H`,
                            name: `season_${tariff.season_id}_express[${package.package_duration}][price]`,
                            id: `season_${tariff.season_id}_express_${package.package_duration}`,
                            value: package.package_price.toFixed(2),
                            readonly: using_default_prices,
                            onfocus_functions: ['this.dataset.previous = this.value'],
                            onchange_functions: [`syncExpressPaxPricing(${tariff.season_id},${package.package_duration},this)`]
                        })
                    ).join('');

                  // Define Full Structure
                    html = buildSharedGlobalRate({
                        tariff, using_default_prices, season_price,
                        pricing_breakdown: simple_express_pricing, hidden_fields: hidden_pricing
                    });

                } else if (hasPax) { // Render Pax Rates

                  // Hidden Simple Express
                    let hidden_pricing = renderHiddenInputs(
                        tariff.season_express_pricing,
                        (pkg) => `season_${tariff.season_id}_express[${pkg.package_duration}][price]`,
                        package => package.package_price.toFixed(2)
                    );

                  // Hidden Express PAX
                    hidden_pricing += (tariff.season_express_pricing || []).flatMap(package =>
                        renderHiddenInputs(
                            package.express_pax_pricing,
                            () => `season_${tariff.season_id}_express_${package.package_duration}[]`,
                            pax => pax.px_price.toFixed(2)
                        )
                    ).join('');

                  // Define PAX Pricing
                    let pax_pricing = (tariff.season_pax_pricing || []).map(pax =>
                        renderInputGroup({
                            label: `${pax.px_quantity} px`,
                            name: `season_${tariff.season_id}_pax[]`,
                            value: pax.px_price.toFixed(2),
                            readonly: using_default_prices
                        })
                    ).join('');

                  // Define Full Structure
                    html = buildSharedGlobalRate({
                        tariff, using_default_prices, season_price,
                        pricing_breakdown: pax_pricing, hidden_fields: hidden_pricing
                    });

                } else { // Render Global Rate

                  // Hidden Simple Express
                    let hidden_express_pricing = renderHiddenInputs(
                        tariff.season_express_pricing,
                        (pkg) => `season_${tariff.season_id}_express[${pkg.package_duration}][price]`,
                        package => package.package_price.toFixed(2)
                    );

                  // Hidden Express PAX
                    let hidden_express_pax_pricing = (tariff.season_express_pricing || []).flatMap(package =>
                        renderHiddenInputs(
                            package.express_pax_pricing,
                            () => `season_${tariff.season_id}_express_${package.package_duration}[]`,
                            pax => pax.px_price.toFixed(2)
                        )
                    ).join('');

                  // Define PAX Pricing
                    let hidden_simple_pax_pricing = renderHiddenInputs(
                        tariff.season_pax_pricing,
                        () => `season_${tariff.season_id}_pax[]`,
                        pax => pax.px_price.toFixed(2)
                    );

                  //Define full structure
                    html = `
                        <div class="mb-2 form-group row col-12">
                            <label for="season_${tariff.season_id}_price" class="text-center control-label col-8">${
                                tariff.season_name === "Temporada Única"
                                    ? translateAndReplace(`seeders.seasons.${tariff.season_name}`)
                                    : tariff.season_name
                            }</label>
                            <div class="col-4">
                                <input type="number" name="seasons_prices[]" id="season_${tariff.season_id}_price" required ${using_default_prices ? 'readonly' : ''}
                                    placeholder="${currencyPlaceHolder()}" step="0.01" min="0" value="${season_price}"
                                    onchange="formatDecimal(this); syncPaxPricing(${tariff.season_id}, this)"
                                    onfocus="this.dataset.previous = this.value"
                                    class="form-control form-control-harsi"
                                />
                            </div>

                            ${hidden_express_pricing}
                            ${hidden_express_pax_pricing}
                            ${hidden_simple_pax_pricing}
                        </div>
                    `;

                }

          // Draw Rates
            $('#tariffs').append(html)
        });
    }

    function renderLegacyPeriods(legacy_data, using_default_periods) {

        (legacy_data).forEach(season => {
            // Control Data
            let is_cyclic = season.is_cyclic;
            let cycle_type = season.cycle_type;

            // Name
            let html = `
                <div class="mb-3">

                    {{-- Season Name --}}
                    <div class="pl-2 text-start">
                        <p class="season_subtitle">${
                            [1, "1"].includes(season.season_id)
                                ? translateAndReplace(`seeders.seasons.${season.season_name}`)
                                : season.season_name
                        }</p>
                        <input value="${season.season_id}" type="hidden" name="season_id[]"/>
                        <input value="${season.season_name}" type="hidden" name="season_name[]"/>
                        <input value="${season.is_cyclic}" type="hidden" name="season_is_cyclic[]"/>
                        <input value="${season.cycle_type}" type="hidden" name="season_cycle_type[]"/>
                    </div>
            `;

            // Periods
            (season.periods).forEach(period => {
              // Define Model
                if (is_cyclic) { // Structures for Cyclic Seasons
                    switch (cycle_type) {
                        case "{{ CycleType::WEEKLY->value }}": // Weekly
                          // Selected day from DB
                            const selected_day = period;

                         // Control Data
                            let used_days = $(`select[name="period_${season.season_id}_days[]"]`).map((_, el) => parseInt($(el).val())).get();
                            let available_days = window.week_days.filter(day =>
                                !used_days.includes(day.value) || day.value === selected_day
                            );

                          // Options
                            let options = available_days.map(day => `
                                <option value="${day.value}" ${selected_day == day.value ? 'selected' : ''}>
                                    ${day.label.toUpperCase()}
                                </option>
                            `).join('');

                          // Weekly Structure
                            html += `
                                <div class="px-2 mb-2 d-flex align-items-center">
                                    {{-- Day --}}
                                    <div class="ml-3 input-group w-50">
                                        <label class="px-4 input-group-text">
                                            {{ __('neutral_words')['day'] }}
                                        </label>

                                        <select name="period_${season.season_id}_days[]" data-weekly-season="${season.season_id}" required
                                            class="form-control weekly-day-select ${using_default_periods ? 'disabled-interactions' : ''}"
                                        >
                                            ${options}
                                        </select>
                                    </div>
                                </div>
                            `;

                            break;

                        case "{{ CycleType::CUSTOM->value }}": // Custom
                        default:
                          // Shared Data
                            const dual_input = (type, label, day, month) =>`
                                <label class="px-2 input-group-text">${label}</label>

                                <select name="period_${season.season_id}_${type}_day[]" required
                                    class="form-control ${using_default_periods ? 'disabled-interactions' : ''}"
                                >
                                    ${buildDayOptions(day)}
                                </select>

                                <select name="period_${season.season_id}_${type}_month[]" required
                                    class="form-control w-25 ${using_default_periods ? 'disabled-interactions' : ''}"
                                >
                                    ${buildMonthOptions(month)}
                                </select>
                            `;

                          // Custom Structure
                            html += `
                                <div class="px-2 mb-3 d-flex align-items-center">
                                    {{-- From --}}
                                    <div class="mx-2 input-group w-100">
                                        ${dual_input("from", "{{ __('entity_forms')['season']['from'] }}", period.from.day, period.from.month)}
                                    </div>

                                    {{-- To --}}
                                    <div class="input-group w-100">
                                        ${dual_input("to", "{{ __('entity_forms')['season']['to'] }}", period.to.day, period.to.month)}
                                    </div>

                                </div>
                            `;
                            break;
                    }

                } else { // For Static Seasons
                  // Structure
                    html += `
                        <div class="px-3 d-flex">

                            {{-- From --}}
                            <div class="mx-1 mb-2 w-50 input-group">
                                <div class="input-group-prepend">
                                    <label class="input-group-text">
                                        {{ __('entity_forms')['season']['from'] }}
                                    </label>
                                </div>

                                <input type="date" name="period_${season.season_id}_from[]"
                                    ${using_default_periods ? 'readonly' : ''}
                                    class="form-control" value="${period.from}"
                                    max="2100-12-31" step="1" required
                                />
                            </div>

                            {{-- To --}}
                            <div class="mx-1 mb-2 w-50 input-group">
                                <div class="input-group-prepend">
                                    <label class="input-group-text">
                                        {{ __('entity_forms')['season']['to'] }}
                                    </label>
                                </div>

                                <input type="date" name="period_${season.season_id}_to[]"
                                    ${using_default_periods ? 'readonly' : ''}
                                    class="form-control" value="${period.to}"
                                    max="2100-12-31" required
                                />
                            </div>

                        </div>
                    `;
                }
            });

            // Closure
            html += `</div>`;

            // Append data to HTML
            $('#periods').append(html);

            // Input Clear
            refreshWeeklySeasonOptions(season.season_id);
        });
    }

    function syncPaxPricing(season_id, element){
        const season_price = $(`#season_${season_id}_price`).val() ?? 0.00;
        const previous_season_value = element.dataset.previous;

        $(`
            input[name="season_${season_id}_pax[]"],
            input[name^="season_${season_id}_express"][name*="[price]"],
            input[name^="season_${season_id}_express"][name*="[pax]"]
        `).each(function () {
            const current_value = parseFloat($(this).val());

            if (
                current_value === "" || current_value === null
                || current_value == previous_season_value
            )
                $(this).val(season_price);
        });
    }

    function syncExpressPaxPricing(season_id, duration, element){
        const express_package_price = $(`#season_${season_id}_express_${duration}`).val() ?? 0.00;
        const previous_season_value = element.dataset.previous;

        $(`input[name="season_${season_id}_express[${duration}][pax][]"]`).each(function () {
            const current_value = parseFloat($(this).val());

            if (
                current_value === "" || current_value === null
                || current_value == previous_season_value
            )
                $(this).val(express_package_price);
        });
    }

    function buildDayOptions(selected = null) {
        return Array.from({ length: 31 }, (_, i) => `
            <option value="${i+1}" ${selected == (i+1) ? 'selected' : ''}>
                ${i + 1}
            </option>
        `).join('');
    }

    function buildMonthOptions(selected = null) {
        return moment.months().map((month, index) => `
            <option value="${index + 1}" ${selected == (index + 1) ? 'selected' : ''}>
                ${month.toUpperCase()}
            </option>
        `).join('');
    }

    // Interactions
    function refreshWeeklySeasonOptions(season_id) {
      // Control Data
        const selects = $(`select[name="period_${season_id}_days[]"]`);

        const selected_values = selects.map(function () {
            return parseInt($(this).val());
        }).get();

        // Rebuild Input Options
        selects.each(function () {
            const current_select = $(this);
            const current_value = parseInt(current_select.val());

            const available_days = window.week_days.filter(day => { // Available & Selected Option
                return !selected_values.includes(day.value) || day.value === current_value;
            });

            // Assign new options
            const options = available_days.map(day => `
                <option value="${day.value}" ${day.value === current_value ? 'selected' : ''}>
                    ${day.label.toUpperCase()}
                </option>
            `).join('');

            current_select.html(options);
        });
    }
</script>

{{-- Support Functions --}}
<script>
  /* Messages*/
    function launchSwalToast(type, title) {
        Swal.fire({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 5000,
            // timerProgressBar: true,
            title,
            type,
        });
    }

    function showToast(text, gradient_from, gradient_to) {
        Toastify({
            text,
            duration: 4000,
            close: false,
            gravity: "bottom",
            position: "center",
            avatar: "{{ asset('images/toast-info-icon.png') }}",

            selector: document.body,
            offset: { x: 0, y: 24 },
            style: {
                background: `linear-gradient(to right, ${gradient_from}, ${gradient_to})`,
            },
        }).showToast();
    }

  /* Formatters */
    function formatDecimal(input) {
        const valor = parseFloat(input.value);
            if (isNaN(valor)) return;

        const result = parseFloat(valor.toFixed(2));
        const exceedsTwoDecimals = /\d\.\d{3,}/.test(valor);

        if (exceedsTwoDecimals) {
            input.value = Math.abs(result).toFixed(2);
        } else {
            input.value = Math.abs(result === 0 ? 0 : valor).toFixed(2);
        }

        return;
    }

    function formatInteger(input, {has_limit = false, limit = 365, default_quantity = 10, ceil_number = false} = {}) {
        // Ensure a valid number
        const raw = Number(input.value);
            if (!Number.isFinite(raw)) {
                input.value = has_limit ? default_quantity : 0;
                return;
            }

        // Round decimals
        let value = ceil_number ? Math.ceil(raw): Math.round(raw);

        // Defaults Managements
        if (value < 0) value = 0;
        if (value < input.min) value = input.min;
        if (has_limit && value > limit) value = limit;

        input.value = value;
    }
</script>