{{--* Control Variables *--}}
@php
  //* Global Controls
    $enabled_modules_panel = \App\Helpers\Environment\SystemModulesHelper::getPanelStatus() && \App\Helpers\Environment\SystemModulesHelper::getVisualizationPanelStatus();
    $enabled_features_panel = \App\Helpers\Environment\SystemFeaturesHelper::getPanelStatus() && \App\Helpers\Environment\SystemFeaturesHelper::getVisualizationPanelStatus();
    $enabled_parameters_panel = array_filter($parameters_configuration, fn($param) => (isset($param['hidden']) && !$param['hidden']) ); // ¿Algún módulo con parámetros esta activo?

  //* Specific Controls
    $has_invoicing = App\Helpers\Environment\FacturapiHelper::isEnabled();
@endphp

{{--* Styles *--}}
<style>
    .info-icon {
        color: #595959 !important;
    }

    .info-icon:focus,
    .info-icon:hover {
        color: #7a7a7a !important;
    }

    /*/ Dynamic Text /*/
        .subtitle-toggle {
            cursor: pointer;
            transition: all 0.3s ease-in-out;
        }

        .subtitle-collapsed::after {
            content: "... ({{ __('common_actions')['click_to_expand'] }})";
        }
</style>

{{--* Modal *--}}
<div id="settingsFormModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="p-4 modal-body special-modal-body">

                {{-- Heder --}}
                <div class="row border-bottom justify-content-center align-items-center">

                    {{-- Title & Tabs --}}
                    <div class="pt-1 pl-2 text-start col-11 d-flex flex-column justify-content-center">
                        <h4 class="pb-2 mb-2" style="font-weight: 800; color: #0d6889">
                            {{ __('entity_forms')['establishment']['settings_form']['header'] }}
                        </h4>

                        {{-- Tabs --}}
                        <ul id="tabContent" class="mb-2 nav nav-tabs" style="gap: 0.3rem">
                            <li class="nav-item active">
                                <a class="nav-link active" id="general_tab_config" href="#general" data-toggle="tab">
                                    {{ __('entity_forms')['establishment']['settings_form']['general_section']['title'] }}
                                </a>
                            </li>

                            @if ($enabled_modules_panel)
                                <li>
                                    <a class="nav-link" href="#modules" data-toggle="tab">
                                        {{ __('entity_forms')['establishment']['settings_form']['modules_section']['title'] }}
                                    </a>
                                </li>
                            @endif

                            @if ($enabled_features_panel)
                                <li>
                                    <a class="nav-link" href="#features" data-toggle="tab">
                                        {{ __('entity_forms')['establishment']['settings_form']['features_section']['title'] }}
                                    </a>
                                </li>
                            @endif

                            <li id="parameters_tab_config" @if (!count($enabled_parameters_panel)) hidden @endif>
                                <a class="nav-link" href="#parameters" data-toggle="tab">
                                    {{ __('entity_forms')['establishment']['settings_form']['rules_and_limits']['title'] }}
                                </a>
                            </li>
                        </ul>
                    </div>

                    {{-- Close Buttons --}}
                    <div class="text-center col-1 d-flex justify-content-center align-items-center">
                        <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="margin-top: -2.5rem; width: 2.3rem;">
                            </span>
                        </button>
                    </div>

                </div>

                {{-- Form --}}
                <form method="PATCH" enctype="multipart/form-data" id="settings_form"
                    class="pt-3 form-horizontal" autocomplete="off"
                >   @csrf


                    {{--Contenido--}}
                    <div class="px-3 pt-2 tab-content" style="margin-bottom: 2.3rem !important; max-height: 23rem; overflow-y: auto;">

                        {{-- General Settings --}}
                        <div class="tab-pane fade show active" id="general">

                            {{-- Header --}}
                            <p class="mb-3" style="font-weight: 600; font-size: 1.2rem; color: #006b8fd1;">
                                {{ __('entity_forms')['establishment']['settings_form']['general_section']['subtitle'] }}
                            </p>

                            {{-- Languaje --}}
                            <div class="form-group row">
                                <label class="text-center control-label col-md-3">
                                    {{ __('entity_fields')['establishment']['language'] }}
                                </label>
                                <div class="col-md-9">
                                    <select id="language" name="language" class="form-control">
                                        <option value="" selected disabled>-- {{ __('common_actions')['select'] }} --</option>

                                        <option value="es">{{ __('entity_fields')['establishment']['system_languages']['es'] }}</option>
                                        <option value="en">{{ __('entity_fields')['establishment']['system_languages']['en'] }}</option>
                                        <option value="fr">{{ __('entity_fields')['establishment']['system_languages']['fr'] }}</option>
                                        <option value="it">{{ __('entity_fields')['establishment']['system_languages']['it'] }}</option>
                                    </select>
                                </div>
                            </div>

                            {{-- Currency --}}
                            <div class="form-group row">
                                <label class="text-center control-label col-md-3">
                                    {{ __('entity_fields')['common']['currency'] }}
                                </label>
                                <div class="col-md-9">
                                    <select id="currency" name="currency" class="form-control">
                                        <option value="" selected disabled>-- {{ __('common_actions')['select'] }} --</option>
                                        @foreach($currencies as $currencyCode => $currency)
                                            <option value="{{ $currencyCode }}">
                                                {{ __('currencies')[ $currencyCode ] }} ({{ $currency['symbol'] }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            {{-- Currency Position --}}
                            <div class="form-group row">
                                <label class="text-center control-label col-md-3">
                                    {{ __('entity_fields')['establishment']['currency_position'] }}
                                </label>
                                <div class="col-md-9">
                                    <select id="currency_position" name="currency_position" class="form-control">
                                        <option value="" selected disabled>-- --</option>

                                        <option value="before">{{ __('entity_fields')['establishment']['currency_positions']['before'] }}</option>
                                        <option value="after">{{ __('entity_fields')['establishment']['currency_positions']['after'] }}</option>
                                    </select>
                                </div>

                                {{-- Indications --}}
                                <small class="pt-2 pl-4 text-center offset-1" style="color:#0d6889; font-weight: 500">
                                    <i class="fas fa-info-circle"></i>
                                    &nbsp;&nbsp; {{ __('entity_forms')['establishment']['settings_form']['general_section']['currency_position_indications'] }}
                                </small>
                            </div>
                        </div>

                        {{-- Modules Configuration --}}
                        <div id="modules" class="tab-pane fade row"
                            @if (!$enabled_modules_panel) hidden @endif
                        >
                            {{-- Header --}}
                            <p class="mb-3" style="font-weight: 600; font-size: 1.2rem; color: #006b8fd1;">
                                {{ __('entity_forms')['establishment']['settings_form']['modules_section']['subtitle'] }}
                            </p>

                            {{-- Input Cards --}}
                            <div>
                                @foreach ($optional_modules as $optional_module)
                                    <div class="pr-2 mb-3 switch_card" id="{{ $optional_module['id'] }}_box"
                                        @if (isset($optional_module['hide']) && $optional_module['hide']) hidden @endif
                                    >
                                        <div class="py-2 row align-items-center" style="padding-left: .75rem !important;">

                                            {{-- Title & Description --}}
                                            <div class="pr-4 text-justify col-10">
                                                <p class="mb-1" style="font-weight: 600; color:#0d6889" >
                                                    {{ $optional_module['title'] }}
                                                </p>
                                                <p class="mb-0 subtitle-toggle" style="font-size: 0.9rem;" data-full="{{ $optional_module['subtitle'] }}">
                                                    {{ $optional_module['subtitle'] }}
                                                </p>
                                            </div>

                                            {{-- Toggle Input --}}
                                            <div class="text-start col-2">
                                                <label class="switch switch_label">
                                                    <input type="checkbox"
                                                        id="{{ $optional_module['id'] }}"

                                                        @if ($enabled_modules_panel)
                                                            name="{{ $optional_module['id'] }}"
                                                        @else
                                                            disabled
                                                        @endif

                                                        @isset($optional_module['actions'])
                                                            onchange="{{ $optional_module['actions'] }}"
                                                        @endisset
                                                    >
                                                    <span class="specific_slider slider round"></span>
                                                </label>
                                            </div>

                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        {{-- Features Configuration --}}
                        @if ($enabled_features_panel)
                            <div id="features" class="tab-pane fade row">
                                {{-- Header --}}
                                <p class="mb-3" style="font-weight: 600; font-size: 1.2rem; color: #006b8fd1;">
                                    {{ __('entity_forms')['establishment']['settings_form']['features_section']['subtitle'] }}
                                </p>

                                {{-- Input Cards --}}
                                @foreach ($optional_features as $optional_feature)
                                    @if (isset($optional_feature['header']))
                                        <p @isset($optional_feature['id']) id="{{ $optional_feature['id'] }}" @endisset
                                            class="pl-2 mt-3 mb-1" style="font-weight: 500; color: #5f5757">
                                            {{ $optional_feature['header'] }}
                                        </p>
                                    @else
                                        <div class="pl-3">
                                            <div class="pr-2 mb-3 switch_card" id="{{ $optional_feature['id'] }}_box">
                                                <div class="py-2 row align-items-center" style="padding-left: .75rem !important;">

                                                    {{-- Title & Description --}}
                                                    <div class="pr-4 text-justify col-10">
                                                        <p class="mb-1" style="font-weight: 600; color:#0d6889" >
                                                            {{ $optional_feature['title'] }}
                                                        </p>
                                                        <p class="mb-0 subtitle-toggle" style="font-size: 0.9rem;" data-full="{{ $optional_feature['subtitle'] }}">
                                                            {{ $optional_feature['subtitle'] }}
                                                        </p>
                                                    </div>

                                                    {{-- Toggle Input --}}
                                                    <div class="text-start col-2">
                                                        <label class="switch switch_label">
                                                            <input type="checkbox"
                                                                id="{{ $optional_feature['id'] }}"
                                                                name="{{ $optional_feature['id'] }}"
                                                                @isset($optional_feature['actions'])
                                                                    onchange="{{ $optional_feature['actions'] }}"
                                                                @endisset
                                                            >
                                                            <span class="specific_slider slider round"></span>
                                                        </label>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        @endif

                        {{-- Parameters Configuration --}}
                        <div id="parameters" class="tab-pane fade row"
                            @if (!count($enabled_parameters_panel)) hidden @endif
                        >
                            {{-- Header --}}
                            <div class="d-flex align-items-center">
                                <p class="my-0" style="font-weight: 600; font-size: 1.2rem; color: #006b8fd1;">
                                    {{ __('entity_forms')['establishment']['settings_form']['rules_and_limits']['subtitle'] }}
                                </p>

                                <label class="invisible ml-3 switch switch_label" hidden>
                                    <input type="checkbox" id="params_config_enabled" name="params_config_enabled">
                                    <span class="specific_slider slider round"></span>
                                </label>
                            </div>

                            {{-- Input Cards --}}
                            <div>
                                @foreach ($parameters_configuration as $parameter_item)
                                    @if (isset($parameter_item['header']))
                                        <p @isset($parameter_item['id']) id="{{ $parameter_item['id'] }}" @endisset
                                            class="pl-2 mt-3 mb-1" style="font-weight: 500; color: #5f5757">
                                            {{ $parameter_item['header'] }}
                                        </p>
                                    @else
                                        <div class="pl-3">
                                            <div class="pr-2 mb-3 switch_card" id="{{ $parameter_item['id'] }}_box" @if($parameter_item['hidden']) hidden @endif>
                                                <div class="px-2 py-2" style="padding-left: .75rem !important;">

                                                    {{-- Title & Description --}}
                                                    <div class="d-flex align-items-center justify-content-between">
                                                        <p class="my-1" style="font-weight: 600; color:#0d6889" >
                                                            {{ $parameter_item['label'] }}
                                                        </p>

                                                        <button type="button" class="info-icon btn rounded-circle"
                                                            data-container="body"
                                                            data-toggle="popover"
                                                            data-trigger="focus"
                                                            data-placement="bottom"
                                                            data-content="{{ $parameter_item['popover'] }}">
                                                            <i class="fas fa-info-circle"></i>
                                                        </button>
                                                    </div>

                                                    @if ($parameter_item['type'] === 'hidden')
                                                        <input
                                                            type="hidden"
                                                            id="{{ $parameter_item['id'] }}"
                                                            name="{{ $parameter_item['name'] }}"
                                                            {!! \App\Helpers\Support\HtmlRenderHelper::attrs($parameter_item['attributes'] ?? []) !!}
                                                            @isset($parameter_item['attributes']['value']) value="{{ $parameter_item['attributes']['value'] }}" @endisset
                                                        >
                                                    @else
                                                        @switch($parameter_item['type'])

                                                            @case('select')
                                                                <select
                                                                    id="{{ $parameter_item['id'] }}"
                                                                    name="{{ $parameter_item['name'] }}"
                                                                    class="form-control"
                                                                    {!! \App\Helpers\Support\HtmlRenderHelper::attrs($parameter_item['attributes'] ?? []) !!}
                                                                >
                                                                    <option value="" disabled selected>-- {{ __('common_actions')['select'] }} --</option>
                                                                    {!! \App\Helpers\Support\HtmlRenderHelper::renderSelectOptions($parameter_item['options'] ?? []) !!}
                                                                </select>
                                                            @break

                                                            @case('textarea')
                                                            @case('checkbox')
                                                            @case('text')
                                                            @case('number')
                                                            @case('date')
                                                            @case('time')
                                                            @case('datetime-local')

                                                            @default
                                                                <input
                                                                    type="{{ $parameter_item['type'] }}"
                                                                    id="{{ $parameter_item['id'] }}"
                                                                    name="{{ $parameter_item['name'] }}"
                                                                    class="form-control"
                                                                    {!! \App\Helpers\Support\HtmlRenderHelper::attrs($parameter_item['attributes'] ?? []) !!}
                                                                    @isset($parameter_item['attributes']['value']) value="{{ $parameter_item['attributes']['value'] }}" @endisset
                                                                >
                                                        @endswitch
                                                    @endif

                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>

                    </div>

                    {{-- Buttons --}}
                    <div class="text-center form-group" align="center">
                        <input type="hidden" name="hidden_settings_id" id="hidden_settings_id" />
                        <input type="submit" class="btn btn-lg boton"
                            value="{{ __('common_actions')['update'] }}" />
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

{{--* Scripts *--}}
    {{-- General --}}
    <script>
        $(document).ready(function () {
          //* Establishment Optional Modules
            window.modules = @json($optional_modules);
            window.features = @json($optional_features);
            window.parameters = @json($parameters_configuration);

          //* System Settings Form
            // Open For Update
            $(document).on('click', '.configuration', function () {
                const id = $(this).attr('id');

                $.ajax({
                    url: `/establishments/${id}/edit`,
                    dataType: "json",
                    success: function (html) {

                        const data = html.data;

                        // Filled Establishment Settings
                        $('#language').val(data.language);
                        $('#currency').val(data.currency);
                        $('#currency_position').val(data.currency_position);

                        // Load Modules Configuration
                        window.modules.forEach(e => {
                            module_id = e.id;
                            data.modules_configuration[module_id]
                                ? $(`#${e.id}`).prop('checked', true)
                                : $(`#${e.id}`).prop('checked', false);
                        });

                        // Load Static Modules Configuration
                        preserveInvoicingStatus();

                        // Load Features Configuration
                        window.features.forEach(e => {
                            feature_id = e.id;
                            data.features_configuration[feature_id]
                                ? $(`#${e.id}`).prop('checked', true)
                                : $(`#${e.id}`).prop('checked', false);
                        });

                        // Load Parameters Configuration
                        window.parameters.forEach(e => {
                            parameter_id = e.id;
                            parameter_value_path = e.value_in;
                            parameter_value = dataGet(data.parameters_configuration, parameter_value_path);

                            if (parameter_value)
                                $(`#${parameter_id}`).val(parameter_value);
                        });

                        // Load initial interactions
                        $('#has_booking_engine, #has_restaurant, #has_audits, #has_otas_connection, #has_express_reservations').trigger('change');

                        // Define Visual Elements
                        $('#hidden_settings_id').val(data.id);
                        $('.modal_title').text(data.business_name);
                        $('#general_tab_config').tab('show');
                        $('#settingsFormModal').modal('show');

                    }
                })
            });

            // Submit Form
            $('#settings_form').on('submit', function (event) {
              // Event Default Triggers
                event.preventDefault();

              // Control Data
                const $form = $(this);
                const $submit_button = $form.find('input[type="submit"]');
                    $submit_button.prop('disabled', true); // Disable Submit Button
                    $submit_button.val( translateAndReplace('common_responses_and_messages.saving_data') ); // Rewrite Submit Button

                $.ajax({
                    url: "{{ route('settings.update') }}",
                    method: "POST",
                    data: new FormData(this),
                    contentType: false,
                    cache: false,
                    processData: false,
                    dataType: "json",
                    success: async function (data) {

                        $('#settingsFormModal').modal('hide');
                        $('#settings_form')[0].reset();

                        $submit_button.prop('disabled', false);
                        $submit_button.val( translateAndReplace('common_actions.update') ); // Rewrite Submit Button

                        Swal.fire({
                            type: 'success',
                            html: `
                                {{ __('common_responses_and_messages')['updated_successfully'] }}
                                <br>
                                <b>{{ __('common_responses_and_messages')['applying_changes'] }}</b>
                            `,
                            title: "{{ __('common_responses_and_messages')['success'] }}",

                            timer: 2000,
                            showConfirmButton: false,
                            allowOutsideClick: false,
                            allowEscapeKey: false,

                            onOpen: () => {
                                Swal.showLoading();
                            },
                        });

                        // Reload Hotel Configuration
                        setTimeout(async () => {
                            getHotelSettings(true);
                        }, 2000);
                    },

                    error: function () {
                        $submit_button.prop('disabled', false);
                        $submit_button.val( translateAndReplace('common_actions.update') ); // Rewrite Submit Button
                    }
                });
            });
        });

        // Special Interactions
          // Modules
            // Dedicated Functions
            function preserveInvoicingStatus() {
                const has_invoicing = @json($has_invoicing);
                    $('#has_invoicing').prop({ checked: has_invoicing, disabled: true });
            }

            function enableShifts(){
                const {checked} = document.getElementById("has_audits");

                if(checked)
                    $('#has_work_shifts').prop('checked', checked);
            }

            // Interactions
            async function showFeatureToggles(trigger_field, associated_features = []) {
                const checked = trigger_field.checked;

                // Toggle Input Visualization
                await associated_features.forEach(feature => {
                    if(checked) {
                        $(`#${feature}_box`).prop('hidden', false);
                    } else {
                        $(`#${feature}_box`).prop('hidden', true);
                        $(`#${feature}`).prop('checked', false);
                    }
                });

                // Toggle Head Visualization
                let someActive = checked;
                if(checked) {
                    someActive = checked || associated_features.some(id => {
                        const checkbox = document.getElementById(id);
                        return checkbox?.checked;
                    });
                }

                $(`#${trigger_field.id}_features`).toggle(someActive);
            }

            async function showParameterInputs(trigger_field, parameters_section, associated_params = []) {
                const checked = trigger_field.checked;

                // Toggle Input Visualization
                associated_params.forEach(parameter => {
                    $(`#${parameter}_box`).prop('hidden', !checked);
                });

                // Define Parameters Status
                refreshParametersTabStatus();
            }

            function refreshParametersTabStatus() {
                let any_visible_param = false;

                let section_header = null;
                let section_has_active_params = false;

                window.parameters.forEach(item => {
                    // Detectar header
                    if (item.header) {
                        if (section_header) {
                            $(`#${section_header}`).toggle(section_has_active_params);
                        }

                        section_header = item.id;
                        section_has_active_params = false;
                        return;
                    }

                    const param_is_visible = !$(`#${item.id}_box`).prop('hidden');

                    if (param_is_visible) {
                        any_visible_param = true;
                        section_has_active_params = true;
                    }
                });

                // Toggle Section Header
                if (section_header)
                    $(`#${section_header}`).toggle(section_has_active_params);

                // Toggle Parameters Tab
                $('#parameters_tab_config, #parameters').prop('hidden', !any_visible_param);

                // Toggle Support Control
                $('#params_config_enabled').prop('checked', any_visible_param);
            }

          // Features
            async function alertBetaFunction(toggle_assigned ,callbacks = []) {
                const {checked} = document.getElementById(toggle_assigned);

                // Ensure Toggle Activation
                if (checked) {
                    await Swal.fire({
                        type: 'warning',
                        title: "{{ __('common_responses_and_messages')['default_confirmation'] }}",
                        html: `
                            {!! __('common_responses_and_messages')['unstable_beta_feature'] !!}
                        `,
                        showCancelButton: true,
                        confirmButtonText: "{{ __('common_actions')['approve'] }} {{ __('common_actions')['accept'] }}",
                        cancelButtonText: "{{ __('common_actions')['cancel'] }}",
                    }).then((result) => {
                        if (
                            result.dismiss === Swal.DismissReason.cancel
                            || result.dismiss === Swal.DismissReason.backdrop
                            || result.dismiss === Swal.DismissReason.esc
                        ) {
                            $(`#${toggle_assigned}`).prop('checked', false);
                            return;
                        }
                    });
                }

                // Trigger Functions
                if (Array.isArray(callbacks)) {
                    for (const callback of callbacks) {
                        if (typeof callback === 'function') await callback(); // Without params

                        else if (typeof callback === 'object' && typeof callback.fn === 'function')
                            await callback.fn(...(callback.params || [])); // With params
                    }
                }
            }

            function enableControlHours(){
                const has_checkin_buffer = $('#has_checkin_buffer').prop('checked');
                const has_express_reservations = $('#has_express_reservations').prop('checked');

                if(has_checkin_buffer || has_express_reservations)
                    $('#has_control_hours').prop('checked', true);
            }

            function confirmMiniShop(toggle_assigned){
                const {checked} = document.getElementById(toggle_assigned);

                if (checked) {
                    Swal.fire({
                        type: 'warning',
                        title: "{{ __('common_responses_and_messages')['default_confirmation'] }}",
                        text: "{{ __('common_responses_and_messages')['mini_shop_description'] }}",
                        showCancelButton: true,
                        confirmButtonText: "{{ __('common_actions')['approve'] }} {{ __('common_actions')['accept'] }}",
                        cancelButtonText: "{{ __('common_actions')['cancel'] }}",
                    }).then((result) => {
                        if (
                            result.dismiss === Swal.DismissReason.cancel
                            || result.dismiss === Swal.DismissReason.backdrop
                            || result.dismiss === Swal.DismissReason.esc
                        ) {
                            $(`#${toggle_assigned}`).prop('checked', false);
                        }
                    });
                }
            }

          // Parameters
            function confirmLimit(input_id) {
                roundDecimal(input_id);

                const value = parseInt($(`#${input_id}`).val(), 10);
                const limit = parseInt($(`#${input_id}`).attr('max'), 10);

                if (value > limit) $(`#${input_id}`).val(limit);
            }
    </script>

    {{-- Special Functions --}}
    <script>
        $(document).ready(function () {
            const wordLimit = 14;

            $('.subtitle-toggle').each(function () {
                const fullText = $(this).data('full').trim();
                const words = fullText.split(' ');

                if (words.length > wordLimit) {
                    const shortText = words.slice(0, wordLimit).join(' ');
                    $(this).text(shortText).addClass('subtitle-collapsed');
                    $(this).data('short', shortText);
                    $(this).data('expanded', false);
                }
            });

            $(document).on('click', '.subtitle-toggle', function () {
                const isExpanded = $(this).data('expanded');
                const fullText = $(this).data('full');
                const shortText = $(this).data('short');

                if (isExpanded) {
                    $(this).text(shortText).data('expanded', false).addClass('subtitle-collapsed');
                } else {
                    $(this).text(fullText).data('expanded', true).removeClass('subtitle-collapsed');
                }
            });
        });
    </script>