{{--* Control Variables *--}}
@php
    $is_mex_hotel = App\Helpers\Environment\SystemEnvHelper::isCurrentCountry('MEX');
    $will_use_invoicing = App\Helpers\Environment\FacturapiHelper::isEnabled(); // ||
@endphp

{{--* Style *--}}
<style>
    .tax-text {
        text-transform: uppercase !important;
    }
</style>

{{--* Modal *--}}
<div id="establishmentFormModal" class="mt-5 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">
                        <h2 class="pb-2 mb-2 modal_title" style="font-weight: 800; color: #0d6889"></h2>

                        {{-- Tabs --}}
                        @if ($will_use_invoicing)
                            <ul class="mb-2 nav nav-tabs" id="taxTabContent">
                                <li class="mx-0_5 nav-item active">
                                    <a class="nav-link active" id="local_tab_data" href="#local_data" data-toggle="tab">
                                        {{ __('entity_forms')['establishment']['data_tabs']['local_data'] }}
                                    </a>
                                </li>

                                <li class="mx-0_5">
                                    <a class="nav-link" href="#tax_data" data-toggle="tab">
                                        {{ __('entity_forms')['establishment']['data_tabs']['fiscal_data'] }}
                                    </a>
                                </li>
                            </ul>
                        @endif
                    </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>

                {{--Contenido--}}
                <div class="pb-2 tab-content">

                    {{-- Local Data --}}
                    <section class="tab-pane fade show active" id="local_data">
                        <form method="POST" enctype="multipart/form-data" id="establishment_form"
                            class="pt-3 pb-0 form-horizontal" autocomplete="off"
                        >   @csrf
                            <div class="px-4 pt-3 justify-content-center align-items-baseline border-bottom">

                                {{-- Name --}}
                                <div class="form-group row">
                                    <label class="text-center control-label col-md-3">
                                        {{ __('entity_fields')['common']['name'] }}
                                    </label>
                                    <div class="col-md-9">
                                        <input type="text" name="nombre" id="name" required
                                            class="form-control" placeholder="{{ __('entity_forms')['establishment']['name'] }}"/>
                                    </div>
                                </div>

                                {{-- Phone --}}
                                <div class="form-group row">
                                    <label class="text-center control-label col-md-3">
                                        {{ __('entity_fields')['common']['phone'] }}
                                    </label>
                                    <div class="col-md-9">
                                        <input type="text" name="phone" id="phone" required
                                            class="form-control" placeholder="{{ __('entity_forms')['establishment']['phone'] }}"/>
                                    </div>
                                </div>

                                {{-- Address --}}
                                <div class="form-group row">
                                    <label class="text-center control-label col-md-3">
                                        {{ __('entity_fields')['establishment']['address'] }}
                                    </label>
                                    <div class="col-md-9">
                                        <input type="text" name="address" id="address" required
                                            class="form-control" placeholder="{{ __('entity_forms')['establishment']['address'] }}"/>
                                    </div>
                                </div>

                                {{-- Country --}}
                                <div class="mb-4 form-group row">
                                    <label class="text-center control-label col-md-3">
                                        {{ __('entity_fields')['common']['tax_address']['country'] }}
                                    </label>
                                    <div class="col-md-9">
                                        <select name="country" id="country" required
                                            class="selectpicker form-control"
                                            data-live-search="true"
                                            title="{{ __('common_actions')['select'] }}..."
                                        >
                                            @foreach ($country_sets as $c_code)
                                                <option value="{{ $c_code }}">{{ __("countries.$c_code") }}</option>
                                            @endforeach
                                        </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']['country_indications'] }}
                                    </small>
                                </div>

                                {{-- Buttons --}}
                                <div class="form-group col-12" align="center">
                                    <input type="hidden" name="hidden_id" id="hidden_id" />
                                    <button type="submit" class="btn boton">
                                        {{ __('common_actions')['update'] }}
                                    </button>
                                </div>

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

                    {{-- Tax Data --}}
                    @if ($will_use_invoicing)
                        <section class="tab-pane fade" id="tax_data">

                            {{-- Child Tabs --}}
                            @if ($is_mex_hotel)
                                <div class="mt-4 d-flex justify-content-center">
                                    <ul class="nav nav-tabs" id="taxTabChildContent">
                                        <li class="mx-0_5 nav-item active">
                                            <a class="nav-link active nav-link-minus" id="fiscal_tab_data" href="#fiscal_data" data-toggle="tab">
                                                {{ __('entity_forms')['establishment']['fiscal_form']['fiscal_identity']['title'] }}
                                            </a>
                                        </li>

                                        <li class="mx-0_5">
                                            <a class="nav-link nav-link-minus" href="#certificate_data" data-toggle="tab">
                                                {{ __('entity_forms')['establishment']['fiscal_form']['digital_certificate']['title'] }}
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            @endif

                            {{-- Child Content --}}
                            <div class="pb-2 tab-content">

                                {{-- Fiscal Data --}}
                                <section class="tab-pane fade show active" id="fiscal_data">
                                    <form method="PATCH" enctype="multipart/form-data" id="fiscal_data_form"
                                        class="pt-3 pb-0 form-horizontal" autocomplete="off"
                                    >   @csrf
                                        <div
                                            style="max-height: 22.5rem; overflow-y: auto;"
                                            class="px-4 pt-1 justify-content-center align-items-baseline border-bottom"
                                        >

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

                                            {{-- RFC --}}
                                            <div class="form-group row">
                                                <label class="pl-3 text-start control-label col-md-4">
                                                    {{ __('entity_fields')['establishment']['tax_id'] }} <span style="color: #dc3742af;">*</span>
                                                </label>
                                                <div class="col-md-8">
                                                    <input type="text" name="fake_tax_identifier" id="fake_tax_identifier" required
                                                        class="form-control tax-text" autocomplete="off" title=""
                                                        placeholder="{{ __('entity_fields')['establishment']['tax_id'] }}"/>
                                                </div>
                                            </div>

                                            {{-- Legal Name --}}
                                            <div class="form-group row">
                                                <label class="pl-3 text-start control-label col-md-4">
                                                    {{ __('entity_fields')['common']['legal_name'] }} <span style="color: #dc3742af;">*</span>
                                                </label>
                                                <div class="col-md-8">
                                                    <input type="text" name="legal_name" id="legal_name" required
                                                        maxlength="200" pattern="^[A-ZÁÉÍÓÚÜÑ0-9 .,'&\-]{3,200}$"
                                                        title="{{ __('entity_forms')['pattern_titles']['fiscal_data']['legal_name'] }}"
                                                        class="form-control tax-text" autocomplete="off"
                                                        placeholder="{{ __('entity_fields')['common']['legal_name'] }}"/>
                                                </div>
                                            </div>

                                            {{-- Regimen Fiscal --}}
                                            @if ($is_mex_hotel)
                                                <div class="form-group row" id="tax_system_block">
                                                    <label class="pl-3 text-start control-label col-md-4">
                                                        {{ __('entity_fields')['common']['tax_system'] }} <span style="color: #dc3742af;">*</span>
                                                    </label>
                                                    <div class="col-md-8">
                                                        <select id="tax_system" name="tax_system" class="form-control" required>
                                                            <option value="" selected disabled>-- {{ __('common_actions')['select'] }} --</option>

                                                            @foreach ($tax_systems as $ts)
                                                                <option value="{{ $ts->item_key }}">
                                                                    {{ $ts->item_key }} - {{ \App\Helpers\Formats\TextTransformHelper::trimText($ts->label, 31) }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            @endif

                                            {{-- Fiscal Email --}}
                                            <div class="form-group row">
                                                <label class="pl-3 text-start control-label col-md-4">
                                                    {{ __('entity_fields')['common']['email'] }} <span style="color: #dc3742af;">*</span>
                                                </label>
                                                <div class="col-md-8">
                                                    <input type="email" name="hotel_fake_email" id="hotel_fake_email" required
                                                        maxlength="200" class="form-control" autocomplete="off"
                                                        placeholder="ejemplo@gmail.com"/>
                                                </div>
                                            </div>


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

                                            {{-- Postal Code --}}
                                            <div class="form-group row">
                                                <label class="pl-3 text-start control-label col-md-3">
                                                    {{ __('entity_fields')['common']['zip_compact'] }} <span style="color: #dc3742af;">*</span>
                                                </label>
                                                <div class="col-md-9">
                                                    <input type="text" name="individual_zip" id="individual_zip" required
                                                        autocomplete="off" class="form-control" placeholder=" {{ __('entity_fields')['common']['zip'] }}"/>
                                                </div>
                                            </div>

                                            {{-- Street --}}
                                            <div class="form-group row">
                                                <label class="pl-3 text-start control-label col-md-3">
                                                    {{ __('entity_fields')['common']['tax_address']['street'] }}
                                                </label>
                                                <div class="col-md-9">
                                                    <input type="text" name="individual_street" id="individual_street"
                                                        pattern="^[A-Za-zÀ-ÿÑñ0-9 .,'#\-\/]{2,80}$"
                                                        title="{{ __('entity_forms')['pattern_titles']['address']['street'] }}"
                                                        minlength="2" maxlength="80" autocomplete="off"
                                                        class="form-control tax-text" placeholder="{{ __('entity_fields')['common']['tax_address']['street'] }} ..."/>
                                                </div>
                                            </div>

                                            {{-- Numbers --}}
                                            <div class="row">
                                                <div class="pr-3 form-group row col-6">
                                                    <label class="pt-2 pl-3 text-start control-label col-md-6">
                                                        {{ __('entity_fields')['common']['tax_address']['ext_number'] }}
                                                    </label>
                                                    <div class="col-md-6">
                                                        <input type="text" name="individual_ext_number" id="individual_ext_number"
                                                            maxlength="50" pattern="^(S\/N|SN|s\/n|sn|[A-Za-z0-9\-\/# ]{1,50})$"
                                                            title="{{ __('entity_forms')['pattern_titles']['address']['ext_number'] }}"
                                                            class="form-control tax-text" autocomplete="off" placeholder="00"/>
                                                    </div>
                                                </div>

                                                <div class="pl-3 form-group row col-6">
                                                    <label class="pt-2 pl-3 text-start control-label col-md-6">
                                                        {{ __('entity_fields')['common']['tax_address']['int_number'] }}
                                                    </label>
                                                    <div class="col-md-6">
                                                        <input type="text" name="individual_int_number" id="individual_int_number"
                                                            maxlength="50" pattern="^(S\/N|SN|s\/n|sn|[A-Za-z0-9\-\/# ]{1,50})$"
                                                            title="{{ __('entity_forms')['pattern_titles']['address']['int_number'] }}"
                                                            class="form-control tax-text" autocomplete="off" placeholder="00"/>
                                                    </div>
                                                </div>
                                            </div>

                                            {{-- Neighborhood --}}
                                            <div class="form-group row">
                                                <label class="pl-3 text-start control-label col-md-4">
                                                    {{ __('entity_fields')['common']['tax_address']['neighborhood'] }}
                                                </label>
                                                <div class="col-md-8">
                                                    <input type="text" name="individual_neighborhood" id="individual_neighborhood"
                                                        minlength="2" maxlength="60" autocomplete="off"
                                                        pattern="^[A-Za-zÀ-ÿÑñ0-9 .,'\-]{2,60}$" class="form-control tax-text"
                                                        title="{{ __('entity_forms')['pattern_titles']['address']['neighborhood'] }}"
                                                        placeholder="{{ __('entity_fields')['common']['tax_address']['neighborhood'] }} ..."/>
                                                </div>
                                            </div>

                                            {{-- City --}}
                                            <div class="form-group row">
                                                <label class="pl-3 text-start control-label col-md-3">
                                                    {{ __('entity_fields')['common']['tax_address']['city'] }}
                                                </label>
                                                <div class="col-md-9">
                                                    <input type="text" name="individual_city" id="individual_city"
                                                        class="form-control tax-text" autocomplete="off"
                                                        placeholder="{{ __('entity_fields')['common']['tax_address']['city'] }} ..."/>
                                                </div>
                                            </div>

                                            {{-- Municipality --}}
                                            <div class="form-group row">
                                                <label class="pl-3 text-start control-label col-md-4">
                                                    {{ __('entity_fields')['common']['tax_address']['municipality'] }}
                                                </label>
                                                <div class="col-md-8">
                                                    <input type="text" name="individual_municipality" id="individual_municipality"
                                                        minlength="2" maxlength="60" autocomplete="off"
                                                        pattern="^[A-Za-zÀ-ÿÑñ .,'\-]{2,60}$" class="form-control tax-text"
                                                        title="{{ __('entity_forms')['pattern_titles']['address']['municipality'] }}"
                                                        placeholder="{{ __('entity_fields')['common']['tax_address']['municipality'] }} ..."/>
                                                </div>
                                            </div>

                                            {{-- State --}}
                                            <div class="form-group row">
                                                <label class="pl-3 text-start control-label col-md-3">
                                                    {{ __('entity_fields')['common']['tax_address']['state'] }}
                                                </label>
                                                <div class="col-md-9">
                                                    <input type="text" name="individual_state" id="individual_state"
                                                        minlength="2" maxlength="60" autocomplete="off"
                                                        pattern="^[A-Za-zÀ-ÿÑñ .,'\-]{2,60}$" list="tx-mx-states"
                                                        title="{{ __('entity_forms')['pattern_titles']['address']['state'] }}"
                                                        class="form-control tax-text" placeholder="{{ __('entity_fields')['common']['tax_address']['state'] }} ..."/>
                                                </div>

                                                <datalist id="tx-mx-states"></datalist>
                                            </div>

                                            {{-- Country --}}
                                            <div class="form-group row">
                                                <label class="pl-3 text-start control-label col-md-3">
                                                    {{ __('entity_fields')['common']['tax_address']['country'] }}
                                                </label>
                                                <div class="col-md-9">
                                                    <select name="individual_country" id="individual_country"
                                                        class="selectpicker form-control"
                                                        data-live-search="true"
                                                        title="{{ __('common_actions')['select'] }}..."
                                                    >
                                                        @foreach ($country_sets as $c_code)
                                                            @if ($c_code == "MEX")
                                                                <option value="{{ $c_code }}">{{ mb_strtoupper(__("countries.$c_code")) }}</option>
                                                            @endif
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                        </div>

                                        {{-- Buttons --}}
                                        <div class="pt-3 text-center form-group col-12">
                                            <input type="hidden" name="fiscal_hidden_id" id="fiscal_hidden_id" />
                                            <button type="submit" class="btn boton">
                                                {{ __('common_actions')['update'] }}
                                            </button>
                                        </div>
                                    </form>
                                </section>

                                {{-- Certificate Data --}}
                                @if ($is_mex_hotel)
                                    <section class="tab-pane fade" id="certificate_data">
                                        <form method="POST" enctype="multipart/form-data" id="certificate_data_form"
                                            class="pt-3 pb-0 form-horizontal" autocomplete="off"
                                        >   @csrf
                                            <div class="px-4 pt-2 justify-content-center align-items-baseline border-bottom">

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

                                                {{-- CER --}}
                                                <div class="form-group row">
                                                    <label class="text-center control-label col-md-4">
                                                        CER
                                                    </label>
                                                    <div class="col-md-8">
                                                        <input type="file" name="cer" id="cer" accept=".cer" required
                                                        class="form-control-file"/>
                                                    </div>
                                                </div>

                                                {{-- CER Key --}}
                                                <div class="form-group row">
                                                    <label class="text-center control-label col-md-4">
                                                        KEY
                                                    </label>
                                                    <div class="col-md-8">
                                                        <input type="file" name="key" id="key" accept=".key" required
                                                        class="form-control-file"/>
                                                    </div>
                                                </div>

                                                {{-- CER Password --}}
                                                <div class="form-group row">
                                                    <label class="text-center control-label col-md-4">
                                                        {{ __('entity_fields')['common']['password'] }}
                                                    </label>
                                                    <div class="col-md-8">
                                                        <input type="password" name="fake_cer_password" id="fake_cer_password" required
                                                            minlength="8" maxlength="64" autocomplete="off" class="form-control"
                                                            placeholder="••••••••"/>
                                                    </div>
                                                </div>


                                                {{-- Buttons --}}
                                                <div class="pt-3 text-center form-group col-12">
                                                    <input type="hidden" name="certificate_hidden_id" id="certificate_hidden_id" />
                                                    <button type="submit" class="btn boton">
                                                        {{ __('common_actions')['update'] }}
                                                    </button>
                                                </div>

                                            </div>
                                        </form>
                                    </section>
                                @endif

                            </div>

                        </section>
                    @endif


                </div>

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

{{--* Scripts *--}}
    {{-- Basic Control --}}
    <script src="{{ asset('js/invoicing/tax-formats.js') }}"></script>
    <script>
        $(document).ready(function () {
          //- On load page
            defineMoralTaxIdFormat("fake_tax_identifier");
            definePostalCodeFormat("individual_zip");

          //- On close Establishment/Settings form
            $('#establishmentFormModal, #settingsFormModal').on('hide.bs.modal', function () {
                document.activeElement.blur();
            });

          //- On change important texts
            $('.tax-text').on('input change keyup paste', function () {
                $(this).val($(this).val().toUpperCase());
            });

          //- Basic Hotel Data
            // Open For Edit
            $(document).on('click', '.edit', function () {
                const id = $(this).attr('id');

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

                        // Filled Establishment Data
                        $('#name').val(data.business_name);
                        $('#phone').val(data.business_phone);
                        $('#address').val(data.business_address);
                        $('#country').val(data.business_country).selectpicker('refresh');

                        // Filled Establishment Tax Data
                        $('#fake_tax_identifier').val(data.tax_id);
                        $('#legal_name').val(data.legal_name);
                        $('#hotel_fake_email').val(data.email);
                        $('#tax_system').val(data.tax_system);

                        $('#individual_zip').val(data.zip);
                        $('#individual_street').val(data.tax_address?.street);
                        $('#individual_ext_number').val(data.tax_address?.exterior);
                        $('#individual_int_number').val(data.tax_address?.interior);
                        $('#individual_neighborhood').val(data.tax_address?.neighborhood);
                        $('#individual_city').val(data.tax_address?.city);
                        $('#individual_municipality').val(data.tax_address?.municipality);
                        $('#individual_state').val(data.tax_address?.state);
                        $('#individual_country').val(data.tax_address?.country || "MEX").selectpicker('refresh');

                        // Define Visual Elements & Control Values
                          // Country Related
                            defineOptionalStates();

                          // Common
                            $('#hidden_id, #fiscal_hidden_id, #certificate_hidden_id').val(data.id);
                            $('#local_tab_data, #fiscal_tab_data').tab('show');
                            $('.modal_title').text(data.business_name);
                            $('#establishmentFormModal').modal('show');

                    }
                })
            });

            // Update Establishment Data
            $('#establishment_form').on('submit', function (event) {
                event.preventDefault();

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

                        Swal.fire(
                            "{{ __('common_responses_and_messages')['success'] }}",
                            "{{ __('common_responses_and_messages')['updated_successfully'] }}",
                            'success'
                        )

                        $('#establishmentFormModal').modal('hide');
                        $('#user_table').DataTable().ajax.reload(null, false);
                        $('#establishment_form')[0].reset();

                        // Reload System Settings (Just In Case country was updated)
                        setTimeout(async () => {
                            getHotelSettings(true);
                        }, 1500);

                    }
                });
            });

            // Update Tax Data
            $('#fiscal_data_form').on('submit', function (event) {
                event.preventDefault();
                window.loader.show(); // Display Loader

                $.ajax({
                    url: "{{ route('establishments.updateTaxData') }}",
                    method: "POST",
                    data: new FormData(this),
                    contentType: false,
                    cache: false,
                    processData: false,
                    dataType: "json",
                    success: function (data) {
                        window.loader.hide(); // Hide Loader

                        $('#establishmentFormModal').modal('hide');
                        $('#fiscal_data_form')[0].reset();

                        Swal.fire(
                            "{{ __('common_responses_and_messages')['success'] }}",
                            "{{ __('common_responses_and_messages')['updated_successfully'] }}",
                            'success'
                        )
                    },

                    error: function(data){
                        const response = data.responseJSON;

                        // Validator Errors
                        const errors = response.errors;
                        Object.keys(errors).forEach(key => {
                            errors[key].forEach(message => showToast(message, "#C34808", "#78350F"));
                        });

                        window.loader.hide(); // Hide Loader
                        return;
                    },
                });

            });

            // Load CER Files
            $('#certificate_data_form').on('submit', function (event) {
                event.preventDefault();
                window.loader.show(); // Display Loader

                $.ajax({
                    url: "{{ route('establishments.updateCertificateData') }}",
                    method: "POST",
                    data: new FormData(this),
                    contentType: false,
                    cache: false,
                    processData: false,
                    dataType: "json",
                    success: function (data) {
                        window.loader.hide(); // Hide Loader

                        $('#establishmentFormModal').modal('hide');
                        $('#certificate_data_form')[0].reset();

                        Swal.fire({
                            title: data.active ? "{{ __('common_responses_and_messages')['success'] }}" : "{{ __('common_responses_and_messages')['warning'] }}",
                            html: data.message,
                            type: data.active ? 'success' : 'warning'
                        });
                    },

                    error: function(data){
                        const response = data.responseJSON;

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

                        // Validator Errors
                        const errors = response.errors;
                        Object.keys(errors).forEach(key => {
                            errors[key].forEach(message => showToast(message, "#C34808", "#78350F"));
                        });

                        window.loader.hide(); // Hide Loader
                        return;
                    },
                });
            });
        });
    </script>

    {{-- Special Cases --}}
    <script>

        function defineOptionalStates() {
            if (getCountrySettings() !== "MEX") {
                $('#tx-mx-states').html("");
                return;
            }

            // Only México States for now
            const tax_mx_states = [
                "Aguascalientes",
                "Baja California",
                "Baja California Sur",
                "Campeche",
                "Chiapas",
                "Chihuahua",
                "Ciudad de México",
                "Coahuila de Zaragoza",
                "Colima",
                "Durango",
                "Guanajuato",
                "Guerrero",
                "Hidalgo",
                "Jalisco",
                "México",
                "Michoacán de Ocampo",
                "Morelos",
                "Nayarit",
                "Nuevo León",
                "Oaxaca",
                "Puebla",
                "Querétaro",
                "Quintana Roo",
                "San Luis Potosí",
                "Sinaloa",
                "Sonora",
                "Tabasco",
                "Tamaulipas",
                "Tlaxcala",
                "Veracruz de Ignacio de la Llave",
                "Yucatán",
                "Zacatecas",
            ];

            let state_options = "";
            tax_mx_states.forEach(state => {
                state_options += `<option value="${state}"></option>`;
            });
            $('#tx-mx-states').html(state_options);
        }

    </script>