{{-- Modal --}}
<div id="receiverFormModal" class="modal fade" tabindex="-1"
    role="dialog" aria-labelledby="modal-title" aria-hidden="true"
    data-bs-backdrop="static" data-bs-keyboard="false"
>
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content special-modal-body">

            {{-- Header --}}
            <div class="pt-4 pb-3 pl-3 modal-header">
                {{-- Titles --}}
                <div class="px-3 col-11">
                    <h4 class="text-uppercase visual-modal-title">
                        Registrar Receptor
                    </h4>
                </div>

                {{-- Close Buttons --}}
                <div class="text-center col-1">
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span>
                            <img src="{{ asset('icons/close_modal.svg') }}" aria-hidden="true"
                                style="width: 2.5rem;">
                        </span>
                    </button>

                </div>
            </div>

            {{-- Form --}}
            <form method="post" id="external_receiver_form"
                autocomplete="off" enctype="multipart/form-data"
            >@csrf

                {{-- Content --}}
                <div class="px-4 pt-0 pb-1 modal-body">

                    {{-- Fiscal Data --}}
                    <section>
                        {{-- Subtitle --}}
                        <h5 class="my-2 subtitle-decorators modal-section-title">
                            Datos Fiscales
                        </h5>

                        <div class="ps-2 row justify-content-start">

                            {{-- Tipo de Persona --}}
                            <div class="flex-shrink-0 col-12">
                                <div class="mb-2 d-flex align-self-center ps-2">
                                    <p class="text-center text-uppercase minus-title">
                                        Tipo de Persona:
                                    </p>
                                    <label for="receiver_moral_person" class="mx-3 switch switch_label">
                                        <input type="checkbox" id="receiver_moral_person" name="receiver_moral_person">
                                        <span class="specific_slider slider round"></span>
                                    </label>
                                    <p class="text-center text-uppercase" id="receiver_person_type">
                                        Física
                                    </p>
                                </div>
                            </div>

                            {{-- RFC --}}
                            <div class="flex-shrink-0 col-4">
                                <div class="mb-3 input-group">
                                    <div class="input-group-prepend">
                                        <label for="receiver_tax_identifier" class="input-group-text">
                                            RFC {!! $required_field !!}
                                        </label>
                                    </div>
                                    <input type="text" name="receiver_tax_identifier" id="receiver_tax_identifier" required
                                        class="form-control tax-text" autocomplete="off" title=""
                                        placeholder="RFC">
                                </div>
                            </div>

                            {{-- Razón Social --}}
                            <div class="flex-shrink-0 col-6">
                                <div class="mb-3 input-group">
                                    <div class="input-group-prepend">
                                        <label for="receiver_legal_name" class="input-group-text">
                                            {{ __('entity_fields')['common']['legal_name'] }} {!! $required_field !!}
                                        </label>
                                    </div>
                                    <input type="text" name="receiver_legal_name" id="receiver_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="flex-shrink-0 col-5">
                                    <div class="mb-3 input-group">
                                        <div class="input-group-prepend">
                                            <label for="receiver_tax_system" class="input-group-text">
                                                {{ __('entity_fields')['common']['tax_system'] }} {!! $required_field !!}
                                            </label>
                                        </div>
                                        <select id="receiver_tax_system" name="receiver_tax_system" class="form-control" required></select>
                                    </div>
                                </div>
                            @endif

                            <div class="flex-shrink-0 col-5">
                                <div class="mb-3 input-group">
                                    <div class="input-group-prepend">
                                        <label for="receiver_cfdi_use" class="input-group-text">
                                            Uso del CFDI {!! $required_field !!}
                                        </label>
                                    </div>

                                    <select id="receiver_cfdi_use" name="receiver_cfdi_use" class="form-control" required></select>
                                </div>
                            </div>
                        </div>
                    </section>

                    {{-- Contact Data --}}
                    <section>
                        {{-- Subtitle --}}
                        <h5 class="my-2 subtitle-decorators modal-section-title">
                            Contacto
                        </h5>

                        {{-- Sub Content --}}
                        <div class="ps-2 row justify-content-start">

                            {{-- Fiscal Email --}}
                            <div class="flex-shrink-0 col-4">
                                <div class="mb-3 input-group">
                                    <div class="input-group-prepend">
                                        <label for="receiver_email_billing" class="input-group-text">
                                            {{ __('entity_fields')['common']['email'] }} {!! $required_field !!}
                                        </label>
                                    </div>
                                    <input type="email" name="receiver_email_billing" id="receiver_email_billing" required
                                        maxlength="200" class="form-control" autocomplete="off"
                                        placeholder="ejemplo@gmail.com"/>
                                </div>
                            </div>

                            {{-- Telefono --}}
                            <div class="flex-shrink-0 col-4">
                                <div class="mb-3 input-group">
                                    <div class="input-group-prepend">
                                        <label for="receiver_phone_billing" class="input-group-text">
                                            {{ __('entity_fields')['common']['phone'] }}
                                        </label>
                                    </div>
                                    <input type="tel" name="receiver_phone_billing" id="receiver_phone_billing"
                                        maxlength="20" class="form-control" autocomplete="off"
                                        placeholder="+00 00 0000 0000"/>
                                </div>
                            </div>

                        </div>
                    </section>

                    {{-- Fiscal Address --}}
                    <section>
                        {{-- Subtitle --}}
                        <h5 class="my-2 subtitle-decorators modal-section-title">
                            Dirección
                        </h5>

                        {{-- Sub Content --}}
                        <div class="ps-2 row justify-content-start">

                            {{-- Postal Code --}}
                            <div class="flex-shrink-0 col-4">
                                <div class="mb-3 input-group">
                                    <div class="input-group-prepend">
                                        <label for="receiver_zip" class="input-group-text">
                                            {{ __('entity_fields')['common']['zip_compact'] }} {!! $required_field !!}
                                        </label>
                                    </div>

                                    <input type="text" name="receiver_zip" id="receiver_zip" required
                                        autocomplete="off" class="form-control" placeholder=" {{ mb_strtoupper(__('entity_fields')['common']['zip']) }}"/>
                                </div>
                            </div>

                            {{-- Street --}}
                            <div class="flex-shrink-0 col-4">
                                <div class="mb-3 input-group">
                                    <div class="input-group-prepend">
                                        <label for="receiver_street" class="input-group-text">
                                            {{ __('entity_fields')['common']['tax_address']['street'] }}
                                        </label>
                                    </div>

                                    <input type="text" name="receiver_street" id="receiver_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>

                            {{-- Internal Number --}}
                            <div class="flex-shrink-0 col-2">
                                <div class="mb-3 input-group">
                                    <div class="input-group-prepend">
                                        <label for="receiver_int_number" class="input-group-text">
                                            {{ __('entity_fields')['common']['tax_address']['int_number'] }}
                                        </label>
                                    </div>

                                    <input type="text" name="receiver_int_number" id="receiver_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>

                            {{-- External Number --}}
                            <div class="flex-shrink-0 col-2">
                                <div class="mb-3 input-group">
                                    <div class="input-group-prepend">
                                        <label for="receiver_ext_number" class="input-group-text">
                                            {{ __('entity_fields')['common']['tax_address']['ext_number'] }}
                                        </label>
                                    </div>

                                    <input type="text" name="receiver_ext_number" id="receiver_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>

                            {{-- Neighborhood --}}
                            <div class="flex-shrink-0 col-4">
                                <div class="mb-3 input-group">
                                    <div class="input-group-prepend">
                                        <label for="receiver_neighborhood" class="input-group-text">
                                            {{ __('entity_fields')['common']['tax_address']['neighborhood'] }}
                                        </label>
                                    </div>

                                    <select name="receiver_neighborhood" id="receiver_neighborhood"
                                        class="selectpicker form-control" data-live-search="true"
                                        title="{{ mb_strtoupper(__('entity_fields')['common']['tax_address']['neighborhood'])  }} ...">
                                    </select>
                                </div>
                            </div>

                            {{-- City --}}
                            <div class="flex-shrink-0 col-4">
                                <div class="mb-3 input-group">
                                    <div class="input-group-prepend">
                                        <label for="receiver_city" class="input-group-text">
                                            {{ __('entity_fields')['common']['tax_address']['city'] }}
                                        </label>
                                    </div>

                                    <input type="text" name="receiver_city" id="receiver_city"
                                        class="form-control tax-text" autocomplete="off"
                                        placeholder="{{ __('entity_fields')['common']['tax_address']['city'] }} ..."/>
                                </div>
                            </div>

                            {{-- Municipality --}}
                            <div class="flex-shrink-0 col-4">
                                <div class="mb-3 input-group">
                                    <div class="input-group-prepend">
                                        <label for="receiver_municipality" class="input-group-text">
                                            {{ __('entity_fields')['common']['tax_address']['municipality'] }}
                                        </label>
                                    </div>

                                    <input type="text" name="receiver_municipality" id="receiver_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="flex-shrink-0 col-4">
                                <div class="mb-3 input-group">
                                    <div class="input-group-prepend">
                                        <label for="receiver_state" class="input-group-text">
                                            {{ __('entity_fields')['common']['tax_address']['state'] }}
                                        </label>
                                    </div>

                                    <input type="text" name="receiver_state" id="receiver_state"
                                        minlength="2" maxlength="60" autocomplete="off"
                                        pattern="^[A-Za-zÀ-ÿÑñ .,'\-]{2,60}$" list="receiver-mx-states"
                                        title="{{ __('entity_forms')['pattern_titles']['address']['state'] }}"
                                        class="form-control tax-text" placeholder="{{ __('entity_fields')['common']['tax_address']['state'] }} ..."/>

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

                            {{-- Country --}}
                            <div class="flex-shrink-0 col-4">
                                <div class="mb-3 input-group">
                                    <div class="input-group-prepend">
                                        <label for="receiver_country" class="input-group-text">
                                            {{ __('entity_fields')['common']['tax_address']['country'] }}
                                        </label>
                                    </div>

                                    <select name="receiver_country" id="receiver_country"
                                        class="selectpicker form-control"
                                        data-live-search="true"
                                        title="{{ __('common_actions')['select'] }}..."
                                    >
                                        @foreach ($country_sets as $c_code)
                                            <option value="{{ $c_code }}">{{ mb_strtoupper(__("countries.$c_code")) }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                        </div>
                    </section>

                </div>

                {{-- Buttons --}}
                <div class="modal-footer">
                    <section class="px-3 pt-3 text-center w-100">
                        <button type="button" class="px-5 mx-3 btn-block btn btn-secondary" data-bs-dismiss="modal">
                            {{ __('common_actions')['cancel'] }}
                        </button>

                        <button type="submit" class="px-5 mx-3 btn-block btn btn-harsi">
                            {{ __('common_actions')['add'] }}
                        </button>
                    </section>
                </div>

            </form>

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

{{-- Scripts --}}
<script>
  //* CRUD Control
    $(document).ready(function () {
      //- Initial Loading
        defineMoralTaxIdFormat("receiver_tax_identifier");
        defineMoralTaxSystems("receiver_tax_system");
        defineMoralCfdiUses("receiver_cfdi_use");

        definePostalCodeFormat("receiver_zip");
        restoreReceiverForm();

      //- On open Receiver form
        $('#receiverFormModal').on('shown.bs.modal', function () {
            restoreReceiverForm();
        });

      //- On close Receiver form
        $('#receiverFormModal').on('hide.bs.modal', function () {
            document.activeElement.blur();
        });


      //- Main Form Submit
        $('#external_receiver_form').on('submit', function(event){
          // Parse Data
            event.preventDefault();

            const data = {
                tax_identifier: $('#receiver_tax_identifier').val(),
                is_moral_person: $('#receiver_moral_person').is(':checked') ? 1 : 0,
                legal_name: $('#receiver_legal_name').val(),
                tax_system: $('#receiver_tax_system').val(),
                cfdi_use: $('#receiver_cfdi_use').val(),
                email_billing: $('#receiver_email_billing').val(),
                phone_billing: $('#receiver_phone_billing').val(),
                individual_zip: $('#receiver_zip').val(),

                individual_street: $('#receiver_street').val(),
                individual_ext_number: $('#receiver_ext_number').val(),
                individual_int_number: $('#receiver_int_number').val(),
                individual_neighborhood: $('#receiver_neighborhood').val(),
                individual_city: $('#receiver_city').val(),
                individual_municipality: $('#receiver_municipality').val(),
                individual_state: $('#receiver_state').val(),
                individual_country: $('#receiver_country').val(),
            }

            // AJAX
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{ route('tax-clients.store') }}",
                method: "POST",
                data,

                success: async function (data) {
                  // Messages
                    launchSwalToast(
                        'success',
                        "{{ __('common_responses_and_messages')['created_successfully'] }}"
                    );

                  // Receiver Forms Interactions
                    $('#receiverFormModal').modal('hide');
                    restoreReceiverForm();

                  // General Form Data
                    const client = data.client ?? {};

                    $('#receiver-form, #clean_receiver_data').show();
                    $('#receiver-empty, #search_receiver_block, #register_receiver_data').hide();
                    $('#is_moral_person').prop('checked', client.is_moral).trigger('change');
                    $('#individual_country').val(client.tax_address?.country || '').selectpicker('refresh').trigger("change");

                    $('#tax_identifier').val(client.tax_id || '').trigger('change');
                    $('#client_id').val(client.id);

                    $('#legal_name').val(client.legal_name || client.client_name || '');
                    $('#tax_system').val(client.tax_system || '');
                    $('#cfdi_use').val(client.cfdi_use || '');

                    $('#email_billing').val(client.email_billing || client.client_email || '');
                    $('#phone_billing').val(client.client_phone || '');
                    $('#individual_zip').val(client.zip || '');

                    $('#individual_street').val(client.tax_address?.street || '');
                    $('#individual_int_number').val(client.tax_address?.interior || '');
                    $('#individual_ext_number').val(client.tax_address?.exterior || '');
                    $('#individual_city').val(client.tax_address?.city || '');
                    $('#individual_municipality').val(client.tax_address?.municipality || '');
                    $('#individual_state').val(client.tax_address?.state || '');

                    try {
                        await loadNeighborhoodsFromPostaliaOrFail(
                            client.zip,
                            client.tax_address?.neighborhood,
                            $('#individual_neighborhood')
                        );
                    } catch(error){
                        console.error(error.message);
                    }

                  // Upsert Form Data
                    setTimeout(() => syncDraftData(false), 1000);
                },

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

                    // Validator Errors
                    const errors = response.errors;
                    const error_color = "#C34808";

                    Object.keys(errors).forEach(function(key) {
                        errors[key].forEach(function(message) {
                            if(key == 'tax_identifier' && message == 'tax_id_duplicate'){
                                Swal.fire({
                                    icon: 'warning',
                                    title: "{{ __('entity_forms')['tax_client']['messages']['tax_id_uk_title'] }}",
                                    text: "{{ __('entity_forms')['tax_client']['messages']['tax_id_uk_text'] }}",
                                    confirmButtonColor: error_color
                                });
                            }else{
                                showToast(message, error_color, "#78350F")
                            }
                        });
                    });

                    return;
                },
            });
        });

      //- Inputs
        $(function () {
            $('#receiver_moral_person').on('change', toggleExtTaxFormats);
            $('#receiver_country').on('change', toggleExtCountryRequirement);
            $('#receiver_tax_identifier').on('change', toggleGenericReceiver);
        });

      //- Triggered Interactions
        // Get address by Zip Code
        $(document).on('input', '#receiver_zip', async function(){
            try{
                await getTaxAddressByZipAndFillFields({
                    zip: $(this).val(),
                    municipality_field: '#receiver_municipality',
                    city_field: '#receiver_city',
                    state_field: '#receiver_state',
                    neighborhood_field: '#receiver_neighborhood'
                });
            }catch(error){
                showToast(
                    error.message, "#C34808", '#78350F'
                );
            }
        });

    });

  //* Support Functions
    function toggleExtTaxFormats() {
        const is_moral = $('#receiver_moral_person').prop('checked');

        // Define fields requirements and values
        const prefix = is_moral ? 'Moral' : 'Physical';
            window[`define${prefix}TaxIdFormat`]('receiver_tax_identifier');
            window[`define${prefix}TaxSystems`]('receiver_tax_system');
            window[`define${prefix}CfdiUses`]('receiver_cfdi_use');

        // Visual Adjustments
        $('#receiver_person_type').text(is_moral ? "Moral" : "Física");
        toggleExtCountryRequirement();
    }

    function toggleGenericReceiver() {
        const receiver_rfc = $('#receiver_tax_identifier').val();
        const is_generic_rfc = receiver_rfc === "XAXX010101000";

        if (!is_generic_rfc) {
            $('#receiver_zip, #receiver_tax_system, #receiver_cfdi_use')
                .prop({ readonly: false, disabled: false }).removeClass('disabled-fields');
        } else {
            $('#receiver_cfdi_use').val("S01").prop({ readonly: true, disabled: true }).addClass('disabled-fields');
            $('#receiver_zip').val(@json($establishment->zip)).prop({ readonly: true, disabled: true }).addClass('disabled-fields');
            $('#receiver_tax_system').val("616").prop({ readonly: true, disabled: true }).addClass('disabled-fields');
        }
    }

    function toggleExtCountryRequirement() {
        const country = $('#receiver_country').val();
        const is_mex_receiver = country === "MEX";

        if (is_mex_receiver) {
            $('#receiver_tax_identifier, #receiver_zip, #receiver_tax_system, #receiver_cfdi_use').trigger('change')
                .prop({ readonly: false, disabled: false }).removeClass('disabled-fields');
        } else {
            $('#receiver_zip').val("00000").prop({ readonly: true, disabled: true }).addClass('disabled-fields');
            $('#receiver_cfdi_use').val("S01").prop({ readonly: true, disabled: true }).addClass('disabled-fields');
            $('#receiver_tax_identifier').val("XEXX010101000").trigger('change').prop({ readonly: true, disabled: true }).addClass('disabled-fields');
            $('#receiver_tax_system').val("616").prop({ readonly: true, disabled: true }).addClass('disabled-fields');
        }
    }


    function restoreReceiverForm() {
        // Seed Form
        $('#receiver_moral_person').prop('checked', false).trigger('change');

        $(`
            #receiver_tax_identifier, #receiver_legal_name, #receiver_tax_system,
            #receiver_cfdi_use, #receiver_email_billing, #receiver_phone_billing,
            #receiver_zip, #receiver_street, #receiver_int_number, #receiver_ext_number,
            #receiver_city, #receiver_municipality, #receiver_state
        `).val('');
        $('#receiver_tax_identifier').val("").trigger("change");
        $('#receiver_country').val("MEX").selectpicker('refresh').trigger("change");
        $('#receiver_neighborhood').empty().selectpicker('refresh');
    }
</script>