{{-- Control Variables --}}
@php
  // Imports
    use Carbon\Carbon;

  // Control Data
    $is_mex_hotel = App\Helpers\Environment\SystemEnvHelper::isCurrentCountry('MEX');

  // Specific Controls
    $today = Carbon::now();
@endphp

{{-- Style --}}
<style>
    #third-account-trigger-collapse i {
        transition: transform 0.3s ease;
    }

    /* Cuando está ABIERTO */
    #third-account-trigger-collapse[aria-expanded="true"] i {
        transform: rotate(180deg);
    }

    /* Cuando está CERRADO */
    #third-account-trigger-collapse[aria-expanded="false"] i {
        transform: rotate(0deg);
    }
</style>

{{-- Modal --}}
<div id="paymentComplementFormModal" class="mt-3 modal fade" tabindex="-1"
    role="dialog" aria-labelledby="modal-title" aria-hidden="true"
>
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content special-modal-body">

            {{-- Header --}}
            <div class="pb-2 mt-3 modal-header d-flex align-items-center">

                {{-- Titles --}}
                <div class="mx-auto text-center">
                    <h3 class="mb-0 text-uppercase">
                        {{ __('entity_forms')['tax_payment']['payment_complement']['title'] }}
                    </h3>
                </div>

                {{-- Close Button --}}
                <button type="button" data-dismiss="modal" aria-label="Close"
                    class="close d-flex align-items-center justify-content-center"
                    style="position:absolute; right:1.5rem;"
                >
                    <img src="{{ asset('icons/close_modal.svg') }}"
                        aria-hidden="true" style="width: 2.5rem;">
                </button>
            </div>

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

                {{-- Content --}}
                <div class="modal-body" style="padding: 1rem 2.4rem 0rem; max-height: 40rem; overflow-y: auto;">

                    {{-- Receiver Summary --}}
                    <section class="mb-4">

                        {{-- Header --}}
                        <p class="pb-0 my-2 font-weight-bold harsi-color h5 border-bottom border-secondary">
                            {{ __('entity_forms')['tax_payment']['payment_complement']['receiver_section'] }}
                        </p>

                        {{-- RFC - Razón Social --}}
                        <div class="flex-wrap my-3 d-flex">

                            {{-- RFC --}}
                            <div class="d-flex align-items-center flex-fill mr-md-3 mb-md-0">
                                <label for="receiver_tax_id_ext" class="flex-shrink-0 px-4 py-2 mb-0 disabled-fields">
                                    {{ __('entity_fields')['client']['tax_id'] }}
                                </label>

                                <input type="text" id="receiver_tax_id_ext" disabled
                                    class="form-control disabled-fields flex-grow-1">
                            </div>

                            {{-- Razón Social --}}
                            <div class="d-flex align-items-center flex-fill">
                                <label for="receiver_legal_name_ext" class="flex-shrink-0 px-4 py-2 mb-0 disabled-fields">
                                    {{ __('entity_fields')['common']['legal_name'] }}
                                </label>

                                <input type="text" id="receiver_legal_name_ext" disabled
                                    class="form-control disabled-fields flex-grow-1">
                            </div>

                        </div>

                        {{-- Regimen Fiscal - Uso CFDI --}}
                        <div class="my-3 row">

                            {{-- Regimen Fiscal --}}
                            @if ($is_mex_hotel)
                                <div class="pr-3 col-md-6">
                                    <div class="d-flex align-items-center">
                                        <label for="receiver_tax_system_ext" class="flex-shrink-0 px-4 py-2 mb-0 disabled-fields">
                                            {{ __('entity_fields')['common']['tax_system'] }}
                                        </label>

                                        <select id="receiver_tax_system_ext" disabled class="form-control disabled-fields flex-grow-1">
                                            <option value="" selected>{{ __('neutral_words')['none_2'] }}</option>

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

                            {{-- Uso CFDI --}}
                            <div class="pl-0 col-md-6">
                                <div class="d-flex align-items-center">
                                    <label for="receiver_cfdi_use_ext" class="flex-shrink-0 px-4 py-2 mb-0 disabled-fields">
                                        {{ __('entity_fields')['client']['cfdi_use'] }}
                                    </label>

                                    <select id="receiver_cfdi_use_ext" name="receiver_cfdi_use_ext" class="form-control flex-grow-1">
                                        <option value="" selected>{{ __('neutral_words')['none_2'] }}</option>

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

                        </div>

                    </section>

                    {{-- General Data --}}
                    <section class="mb-0">

                        {{-- Header --}}
                        <p class="pb-1 my-2 font-weight-bold harsi-color h5 border-bottom border-secondary">
                            {{ __('entity_forms')['tax_payment']['payment_complement']['settings_section'] }}
                        </p>

                        {{-- Datos del Emisor y Factura --}}
                        <div class="mt-3 mb-2 row">

                            {{-- Dirección Fiscal del Emisor --}}
                            <div class="pr-3 mb-3 col-md-6">
                                <div class="d-flex align-items-center">
                                    <label for="issuer_branch_ext" class="flex-shrink-0 px-4 py-2 mb-0 disabled-fields">
                                        {{ __('entity_fields')['common']['issue_place'] }}
                                    </label>

                                    <select id="issuer_branch_ext" name="issuer_branch_ext" class="form-control flex-grow-1" required>
                                        @foreach ($tax_branches as $txb)
                                            <option value="{{ $txb->id }}">
                                                {{ $txb->legal_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            {{-- Regimen Fiscal del Emisor --}}
                            @if ($is_mex_hotel)
                                @php
                                    $establishment_tax_system = is_null( $establishment->tax_system )
                                        ? ""
                                        : $establishment->tax_system.' - '.\App\Helpers\Formats\TextTransformHelper::trimText($establishment->taxSystem->label, 35);
                                @endphp

                                <div class="pl-0 col-md-6">
                                    <div class="d-flex align-items-center">
                                        <label for="issuer_tax_system_ext" class="flex-shrink-0 px-4 py-2 mb-0 disabled-fields">
                                            {{ __('entity_fields')['common']['tax_system'] }}
                                        </label>

                                        <input type="text" id="issuer_tax_system_ext" disabled
                                            value="{{ $establishment_tax_system }}"
                                            class="form-control disabled-fields flex-grow-1">
                                    </div>
                                </div>
                            @endif

                            {{-- Formato de Factura --}}
                            <div class="pl-0 mb-3 col-md-6">
                                <div class="d-flex align-items-center">
                                    <label for="invoice_format_ext" class="flex-shrink-0 px-4 py-2 mb-0">
                                        {{ __('entities')['invoicing']['format_descriptive'] }}
                                    </label>

                                    <select id="invoice_format_ext" name="invoice_format_ext" class="form-control flex-grow-1">
                                        <option value="" selected>{{ __('neutral_words')['none_2'] }}</option>

                                        @foreach ($tax_formats as $format)
                                            <option value="{{ $format->id }}">{{ $format->serie }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                        </div>

                    </section>

                    {{-- Third Party Account --}}
                    <section id="accordion-third-account" class="mb-3">
                        <div class="bg-transparent border-0">

                            {{-- Title --}}
                            <div class="p-0 bg-transparent border-bottom border-secondary" id="third-account-header">
                                <button type="button" id="third-account-trigger-collapse"
                                    class="btn font-weight-bold harsi-color d-flex align-items-center justify-content-between w-100"
                                    style="font-size: 1.25rem;"
                                    data-toggle="collapse" data-target="#third-account-content"
                                    aria-expanded="false" aria-controls="third-account-content"
                                >
                                    <span>{{ __('entity_forms')['tax_payment']['payment_complement']['third_party_section'] }}</span>
                                    <i class="fas fa-angle-up"></i>
                                </button>
                            </div>

                            {{-- Content --}}
                            <div
                                id="third-account-content" class="collapse"
                                aria-labelledby="third-account-header" data-parent="#accordion-third-account"
                            >
                                {{-- RFC - Razón Social --}}
                                <div class="flex-wrap my-3 d-flex">

                                    {{-- RFC --}}
                                    <div class="d-flex align-items-center flex-fill mr-md-3 mb-md-0">
                                        <label for="ta_tax_id" class="flex-shrink-0 px-4 py-2 mb-0">
                                            {{ __('entity_fields')['client']['tax_id'] }}
                                        </label>

                                        <input type="text" name="ta_tax_id" id="ta_tax_id"
                                            autocomplete="off" placeholder="{{ __('entity_fields')['client']['tax_id'] }}"
                                            class="form-control tax-text flex-grow-1"
                                        >
                                    </div>

                                    {{-- Razón Social --}}
                                    <div class="d-flex align-items-center flex-fill">
                                        <label for="ta_legal_name" class="flex-shrink-0 px-4 py-2 mb-0">
                                            {{ __('entity_fields')['common']['legal_name'] }}
                                        </label>

                                        <input type="text" name="ta_legal_name" id="ta_legal_name"
                                            autocomplete="off" maxlength="200" pattern="^[A-ZÁÉÍÓÚÜÑ0-9 .,'&\-]{3,200}$"
                                            title="{{ __('entity_forms')['pattern_titles']['fiscal_data']['legal_name'] }}"
                                            placeholder="{{ __('entity_fields')['common']['legal_name'] }}"
                                            class="form-control tax-text flex-grow-1"
                                        >
                                    </div>

                                </div>

                                {{-- Regimen Fiscal - CP --}}
                                <div class="my-3 row">

                                    {{-- Regimen Fiscal --}}
                                    @if ($is_mex_hotel)
                                        <div class="pr-3 mb-3 col-md-8">
                                            <div class="d-flex align-items-center">
                                                <label for="ta_tax_system" class="flex-shrink-0 px-4 py-2 mb-0">
                                                    {{ __('entity_fields')['common']['tax_system'] }}
                                                </label>

                                                <select id="ta_tax_system" name="ta_tax_system" class="form-control flex-grow-1">
                                                    <option value="" selected>-- {{ __('common_actions')['select'] }} --</option>

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

                                    {{-- Postal Code --}}
                                    <div class="pl-0 mb-3 col-md-4">
                                        <div class="d-flex align-items-center">
                                            <label for="ta_zip" class="flex-shrink-0 px-4 py-2 mb-0">
                                                {{ __('entity_fields')['common']['zip_compact'] }}
                                            </label>

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

                                </div>
                            </div>

                        </div>
                    </section>

                    {{-- Payment Complement Data --}}
                    <section class="mb-0" id="payment_complement_section">

                        {{-- Header --}}
                        <p class="pb-1 my-2 font-weight-bold harsi-color h5 border-bottom border-secondary">
                            {{ __('entity_forms')['tax_payment']['payment_complement']['complement_section'] }}
                        </p>

                        {{-- Fecha - Forma de Pago --}}
                        <div class="my-3 row justify-content-between">

                            {{-- Fecha de Creación --}}
                            <div class="pr-3 col-md-6">
                                <div class="d-flex align-items-center">
                                    <label for="txp_date_ext" class="flex-shrink-0 px-2 py-2 mb-0">
                                        {{ __('entity_fields')['common']['datetime'] }} {!! $required_field !!}
                                    </label>

                                    <input type="datetime-local" id="txp_date_ext" name="txp_date_ext" required
                                        max="{{ $today->copy()->endOfDay()->format('Y-m-d\TH:i:s') }}"
                                        value="{{ $today->copy()->setTime(12, 0, 0)->format('Y-m-d\TH:i:s') }}" step="1"
                                        class="form-control flex-grow-1" >
                                </div>
                            </div>

                            {{-- Forma de Pago --}}
                            <div class="pl-0 col-md-6">
                                <div class="d-flex align-items-center">
                                    <label for="txp_payment_form_ext" class="flex-shrink-0 px-3 py-2 mb-0">
                                        {{ __('entity_fields')['common']['payment_form'] }} {!! $required_field !!}
                                    </label>

                                    <select id="txp_payment_form_ext" name="txp_payment_form_ext" required
                                        class="form-control flex-grow-1"
                                    >
                                        <option value="" selected>{{ __('neutral_words')['none_2'] }}</option>

                                        @foreach ($tax_payment_forms as $tpf)
                                            <option value="{{ $tpf->item_key }}">
                                                {{ $tpf->item_key }} - {{ $tpf->label }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                        </div>

                        {{-- Monto - Moneda - Tipo Cambio --}}
                        <div class="my-3 row justify-content-center">

                            {{-- Monto --}}
                            <div class="pr-3 mb-3 col-md-6">
                                <div class="d-flex align-items-center">
                                    <label for="txp_amount_payable_ext" class="flex-shrink-0 px-3 py-2 mb-0">
                                        {{ __('entity_fields')['tax_payment']['amount_sample'] }} {!! $required_field !!}
                                    </label>

                                    <input type="number" name="txp_amount_payable_ext" id="txp_amount_payable_ext" required
                                        min='0.0' step="0.01" value="0.0"
                                        class="form-control" onchange="roundDecimals(this); calculateDueBalance();"
                                        placeholder="{{ \App\Helpers\Formats\FormatCurrencyHelper::currencyPlaceHolder() }}"/>
                                </div>
                            </div>

                            {{-- Moneda --}}
                            <div class="pl-0 col-md-6">
                                <div class="d-flex align-items-center">
                                    <label for="txp_currency_ext" class="flex-shrink-0 px-3 py-2 mb-0">
                                        {{ __('entity_fields')['common']['currency'] }} {!! $required_field !!}
                                    </label>

                                    <select id="txp_currency_ext" name="txp_currency_ext" required
                                        data-live-search="true" data-container="body"
                                        class="selectpicker form-control flex-grow-1"
                                        onchange="defineExchangeRate()"
                                    >
                                        @foreach ($tax_currencies as $tc)
                                            <option value="{{ $tc->item_key }}" @if ($tc->item_key === "MXN") selected @endif>
                                                {{ $tc->item_key }} - {{ $tc->label }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            {{-- Tipo de Cambio --}}
                            <div class="pr-3 col-md-6">
                                <div class="d-flex align-items-center">
                                    <label for="txp_exchange_rate_ext" class="flex-shrink-0 px-3 py-2 mb-0">
                                        {{ __('entity_fields')['common']['exchange_rate'] }} {!! $required_field !!}
                                    </label>

                                    <input type="number" name="txp_exchange_rate_ext" id="txp_exchange_rate_ext" required readonly
                                        step="0.000001" min="0.000001" value="1.00" onchange="roundDecimals(this, 6)"
                                        class="form-control disabled-fields" placeholder="$0.00">
                                </div>
                            </div>

                        </div>

                        {{-- Resumen de Pagos --}}
                        <div class="px-3 pt-2 my-3 text-center row">

                            {{-- Previous Balance Due --}}
                            <div class="col-3">
                                <b class="harsi-color">{{ __('entity_fields')['tax_payment']['previous_balance_amount'] }}</b>
                                <p id="previous_balance_due"></p>
                                <input type="hidden" name="previous_due_ctrl" id="previous_due_ctrl">
                            </div>

                            {{-- Balance Paid --}}
                            <div class="col-3">
                                <b class="harsi-color">{{ __('entity_fields')['tax_payment']['balance_paid'] }}</b>
                                <p id="balance_paid"></p>
                                <input type="hidden" name="balance_paid_ctrl" id="balance_paid_ctrl">
                                <input type="hidden" name="inv_current_ex_rate_ctrl" id="inv_current_ex_rate_ctrl">
                            </div>

                            {{-- Current Balance Due --}}
                            <div class="col-3">
                                <b class="harsi-color">{{ __('entity_fields')['tax_payment']['outstanding_balance'] }}</b>
                                <p id="current_balance_due"></p>
                                <input type="hidden" name="current_due_ctrl" id="current_due_ctrl">
                            </div>

                            {{-- Partiality Number --}}
                            <div class="col-3">
                                <b class="harsi-color">{{ __('entity_fields')['tax_payment']['parciatiliy_number'] }}</b>
                                <p id="partiality_number"></p>
                            </div>

                        </div>

                    </section>

                </div>

                {{-- Buttons & Controls --}}
                <div class="modal-footer">
                    {{-- Hidden Controls --}}
                    <input type="hidden" name="invoice_id_ext" id="invoice_id_ext" value="">

                    {{-- Buttons --}}
                    <section class="px-5 text-center w-100 d-flex justify-content-center">
                        <button type="submit" class="py-1 mx-3 w-25 btn btn-harsi">
                            {{ __('common_actions')['add'] }}
                        </button>
                    </section>
                </div>

            </form>

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

{{-- Scripts --}}
<script>
  //* Window Variables
    window.complement_created = null;
    window.banxico_currencies = @JSON(config('constants.banxico_currencies'));

  //* Controls for currency convert data
    let current_invoice_data = null; // Invoice data
    let is_initializing = false; // Flag operation
    let current_calculation_id = 0; // Control de ejecucion (due balance)
    let currency_warning_accepted = false; // Flag para swal alert
    let last_confirmed_currency = null;

  //* Interactions
    function openPaymentComplement(input) {
      //* Stop dynamic executions
        is_initializing = true;

      //* Reset Form
        resetComplementForm();

      //* Extract Invoice Data
        const byte_data = CryptoJS.AES.decrypt(input.value || "", window.tax_decrypt_data);
        current_invoice_data = JSON.parse(byte_data.toString(CryptoJS.enc.Utf8) || "{}");

        // Original Invoice Data
        const latest_payment = current_invoice_data.latest_tax_payment_doc;
        const orig_invoice_exchange_rate = parseFloat( current_invoice_data.exchange_rate );
        const orig_invoice_currency = current_invoice_data.currency;
        const total_invoice = current_invoice_data.total;

        let previous_balance_base =  (latest_payment !== null)
            ? latest_payment.remaining_balance
            : total_invoice;

        let previous_balance_due = parseFloat( previous_balance_base );
      //* Modal Controls
        // Hide Payment History Controls
        $('#invoicePaymentHistoryModal').modal('hide');

        $('#paymentComplementFormModal').one('shown.bs.modal', function () {

            $('#txp_currency_ext').select2({
                dropdownParent: $('#paymentComplementFormModal')
            });

          //* Shortcut Accesses
            const receiver = current_invoice_data.receptor;
            const payment_docs = current_invoice_data.tax_payment_docs;

          //* Seed Data
            // Control Data
            $('#invoice_id_ext').val(current_invoice_data.id);
            // Receiver
            $('#receiver_tax_id_ext').val(receiver.tax_id);
            $('#receiver_legal_name_ext').val(receiver.legal_name);
            $('#receiver_tax_system_ext').val(receiver.tax_system.item_key);
            $('#receiver_cfdi_use_ext').val("CP01");

            // Invoice and Complements
            // $('#invoice_format_ext').val(current_invoice_data.tax_format_id);
            $('#issuer_branch_ext').val(current_invoice_data.tax_branch_id);
            $('#invoice_format_ext').val("");

              // Texts
                $('#balance_paid').text( formatBanxicoCurrency("0.00", current_invoice_data.currency));
                $('#partiality_number').text(payment_docs.length + 1);
                $('#previous_balance_due').text( formatBanxicoCurrency(previous_balance_due, current_invoice_data.currency) );
                $('#current_balance_due').text( formatBanxicoCurrency(previous_balance_due, current_invoice_data.currency) );

              // Inputs
                $('#balance_paid_ctrl').val(0.00);
                $('#inv_current_ex_rate_ctrl').val(0.00);
                $('#previous_due_ctrl').val(previous_balance_due);
                $('#current_due_ctrl').val(previous_balance_due);

            // Payment currency
            $('#txp_currency_ext').val(current_invoice_data.currency).trigger('change');

         //* Go dynamic ejecutions
            is_initializing = false;
        }).modal('show');
    }

    //* Swal Alert Different Currencies
    async function checkCurrency(){
        const select_currency = $('#txp_currency_ext').val();
        const invoice_currency = current_invoice_data.currency;

        if(!last_confirmed_currency) last_confirmed_currency = invoice_currency;
        if(select_currency === invoice_currency) return true;

        if(currency_warning_accepted){
            last_confirmed_currency = select_currency;
            return true;
        }

        const result = await Swal.fire({
            title: "{{ __('entity_forms')['tax_payment']['messages']['different_ccy_title'] }}",
            html: `
                    <p style="font-size:12px">
                        {!! __('entity_forms')['tax_payment']['messages']['different_ccy_text'] !!}
                    </p>
                    <p style="font-size:20px">
                        {{ __('entity_forms')['tax_payment']['messages']['different_ccy_question'] }}
                    </p>
                `,
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Aceptar"
        });

        if(result.value){
            last_confirmed_currency = select_currency;
            currency_warning_accepted = true;
            return true;
        }

        is_initializing = true;
        $('#txp_currency_ext').val(last_confirmed_currency).trigger('change');
        is_initializing = false;

        return false;
    }

    function defineExchangeRate() {
        const selectCurrency = $('#txp_currency_ext').val();
        const is_mex_currency = selectCurrency === "MXN";
        const $exchange_rate = $('#txp_exchange_rate_ext');
        const isBanxicoCurrency = window.banxico_currencies.hasOwnProperty(selectCurrency);

        //PESO MEXICANO
        if (is_mex_currency) {
            $exchange_rate.val('1.00').prop('readonly', true).removeClass('disabled-fields');
            return Promise.resolve();
        }

        //MONEDA NO INCLUIDA EN BANXICO
        if(!isBanxicoCurrency){
            $exchange_rate.val('').prop('readonly', false).removeClass('disabled-fields').focus();
            $('#txp_amount_payable_ext').val('');
            return Promise.resolve();
        }

        //SUCCESS
        $.ajax({
                url: `/banxico/${selectCurrency}`,
                method: 'GET',
                beforeSend: function(){
                    //cambiamos temporalmente el tipo del input a text
                    $exchange_rate.attr('type','text')
                    .val("{{__('common_responses_and_messages')['loading']}}")
                    .prop('readonly',true)
                    .toggleClass('disabled-fields');
                },

                success: function(response){
                    //restablecemos el input
                    $exchange_rate.attr('type','number');
                    //Si la api respondio correctamente
                    if(response.status === 'ok'){
                        $exchange_rate.val(response.rate)
                        .prop('readonly', true)
                        .removeClass('disabled-fields');
                        return;
                    }

                    //En caso de fallar
                    $exchange_rate.val('')
                    .prop('readonly',false)
                    .removeClass('disabled-fields').focus();

                },
                error: function(){
                        $exchange_rate.val('').prop('readonly', false)
                        .toggleClass('disabled-fields');
                }
        });
    }

    async function calculateDueBalance() {
      // Contador de ejecuciones
        const calcId = ++current_calculation_id;

      // Get Data
        const balance_paid = parseFloat( $('#txp_amount_payable_ext').val() ) || 0;
        const previous_due = parseFloat( $('#previous_due_ctrl').val() );
        const exchange_rate = parseFloat( $('#txp_exchange_rate_ext').val() ) || 0;
        const current_currency = $('#txp_currency_ext').val() || 'MXN';

        // Validacion para valores nulos/corruptos en pago anterior (NaN)
        if(!previous_due) return;

        const {
            current_due,        //valor a guardar en bd
            format_balance_paid,      //valor a guardar en bd
            inv_current_exchange_rate
        } = await getConvertedPayment(
            balance_paid,
            previous_due,
            exchange_rate,
            current_currency
        );

        //Evita la colisión de ejecuciones por los async - await
        if(calcId !== current_calculation_id) return;

      // Update Data
            if (current_due < 0 || previous_due < format_balance_paid) {
              // Notify
                Swal.fire(
                    "{{ __('common_responses_and_messages')['rejected_action'] }}",
                    "{{ __('entity_forms')['tax_payment']['errors']['excessive_amount'] }}",
                    'error'
                );

              // Reset Files
                let parsed_p_due = previous_due.toFixed(4);

                $('#txp_amount_payable_ext, #balance_paid_ctrl').val(0.00);
                $('#current_due_ctrl').val(parsed_p_due);

                $('#balance_paid').text( formatCurrency("0.00"));
                $('#current_balance_due').text( formatCurrency(parsed_p_due));

                return;
            }

        let parsed_c_due = current_due.toFixed(4);
        // Valor real del monto ingresado
        let parsed_fmt_b_paid = format_balance_paid.toFixed(4);

        // Text
        $('#balance_paid').text( formatBanxicoCurrency(parsed_fmt_b_paid, current_invoice_data.currency));
        $('#current_balance_due').text( formatBanxicoCurrency(parsed_c_due, current_invoice_data.currency));

        // Value
        $('#balance_paid_ctrl').val(parsed_fmt_b_paid);
        $('#current_due_ctrl').val(parsed_c_due);
        $('#inv_current_ex_rate_ctrl').val(inv_current_exchange_rate);
    }

    // Validations (current_due)
    async function getConvertedPayment(balance_paid, previous_due, exchange_rate, current_currency){
        let current_due = 0;
        let format_balance_paid = 0;
        let inv_current_exchange_rate = 0;

        // Helper
        const fetchExchangeRate = async () => {
            const is_banxico = window.banxico_currencies.hasOwnProperty(current_invoice_data.currency);
            return is_banxico
                ? await getBanxicoExchangeRate(current_invoice_data.currency)
                : current_invoice_data.exchange_rate;
        };

        //Validate transform divisa
        switch (true){
            // Nulalidad o tasa 0
            case (!balance_paid || exchange_rate === 0):
                current_due = previous_due;
                break;

            // Misma moneda que la factura original
            case (current_invoice_data.currency === current_currency):
                format_balance_paid = balance_paid;
                current_due = previous_due - balance_paid;
                break;

            // Pagó con pesos mexicanos
            case (current_currency === 'MXN'):
                inv_current_exchange_rate = await fetchExchangeRate();
                format_balance_paid = Number(
                    parseFloat(
                        balance_paid / inv_current_exchange_rate
                    )
                    .toFixed(4)
                );
                current_due = previous_due - format_balance_paid;
                break;

            // Pago con una 3ra moneda (Divisa extrangera - extrangera)
            default:
                let foreign_to_mex_currency = balance_paid * exchange_rate;
                inv_current_exchange_rate = await fetchExchangeRate();
                format_balance_paid = Number(
                    parseFloat(
                        foreign_to_mex_currency / inv_current_exchange_rate
                    )
                    .toFixed(4)
                );
                current_due = previous_due - format_balance_paid;
                break;
        }

        return {
            current_due,
            format_balance_paid,
            inv_current_exchange_rate
        };
    }

  //* Modal Controls
    $(document).ready(function () {
      // On load view
        defineMoralTaxIdFormat("ta_tax_id");
        definePostalCodeFormat("ta_zip");

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

      // On close Form Modal
        $('#paymentComplementFormModal').on('hide.bs.modal', function () {
            document.activeElement.blur();
            $('#invoicePaymentHistoryModal').modal('show');
        });

    //* Debounce
        const debouncedCalculate = debounce(function() {
            calculateDueBalance();
        }, 800);

        $('#txp_currency_ext')
        .on('change', async function(){
            if (is_initializing) return;

            const confirmed = await checkCurrency();
            if(!confirmed) return;

            $('#balance_paid, #current_balance_due').text('Calculando...');
            await defineExchangeRate();
            debouncedCalculate();
        });

        $('#txp_amount_payable_ext, #txp_exchange_rate_ext').on('input', function() {
            if(is_initializing) return;

            $('#balance_paid, #current_balance_due').text('Calculando...');
            debouncedCalculate();
        });

    //* On Submit
        $('#payment_complement_form').on('submit', function(event){
          // Validate Form
            event.preventDefault();
                if (!validateComplementForm()) return;

            window.loader.show(translateAndReplace("common_responses_and_messages.saving_data"));

          // Parse Data
            const form_data = parseFormData($(this).serializeArray());
            const payload = parseComplementData(form_data);

            $.ajax({
                url: "{{ route('tax-payments.certify') }}",
                method: "POST",
                data: payload,
                success: function(res){
                  // Toggle Loader status
                    window.loader.hide();

                  // Toggle modals and Data
                    $('#paymentComplementFormModal').modal('hide');
                    displayPaymentHistory(payload.invoice_id);
                    $('#tax_invoice_table').DataTable().ajax.reload(null, false);

                  // Messages
                    launchSwalToast(
                        'success',
                        res.success,
                    );

                    setTimeout(() => {
                        window.open(`/invoicing/invoices/payment-complement/${res.payment_id}`, '_blank');
                    }, 1000);

                  // Update stamp counter
                    const stamping_status = res.stamping_limit_status;

                    updateStampCounterIndex(stamping_status);
                    stampLimitAlerts(stamping_status);
                },
                error: function(data){
                    // Toggle Loader status
                    window.loader.hide();

                    // Extract Data
                    const response = data.responseJSON;

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

                        return;
                    }

                    // OnSave/Validator Errors
                    const onSaveErrors = {};

                        // Define error types
                        if(response?.errors && typeof response?.errors === 'object'){
                            const errors = response.errors;
                            Object.keys(errors).forEach((key) => {
                                if (key.startsWith('on_save')) { // If it's an error occurred on save data
                                    onSaveErrors[key] = errors[key]; // Group as OnSave Error
                                } else {
                                    errors[key].forEach(message => showToast(message, "#C34808", "#78350F")); // Display as Validation Error
                                }
                            });

                            Object.keys(onSaveErrors).forEach(key => { // Display as OnSave Errors
                                onSaveErrors[key].forEach(message => showToast(message, "#C34808", "#78350F"));
                            });
                        }else if(response?.message){
                            showToast(response.message, "#C34808", "#78350F" );
                        }else{
                            showToast("{{ __('common_responses_and_messages')['data_not_loaded'] }}", "#C34808", "#78350F");
                        }

                    return;
                }
            });
        });
    });

  //* Support Functions
    // Resets
    function resetComplementForm() {
      // Swal variables
        currency_warning_accepted = false;
        last_confirmed_currency = null;

      // Reset Classes
        $('#payment_complement_form').find('.is-invalid').removeClass('is-invalid')

      // Control Data
        $('#invoice_id_ext').val("");

      // Receiver
        $('#receiver_tax_id_ext, #receiver_legal_name_ext, #receiver_tax_system_ext, #receiver_cfdi_use_ext').val("");

      // Invoice and Complements
        $('#invoice_format_ext').val("");

      // Third Party Account
        $('#ta_tax_id, #ta_legal_name, #ta_tax_system, #ta_zip').val("");

      // Payment Complements
        // General Data
            $('#txp_date_ext').val( moment().hour(12).minute(0).second(0).format('YYYY-MM-DDTHH:mm:ss') );
            $('#txp_payment_form_ext').val("");
            $('#txp_amount_payable_ext').val(0.0).trigger('change');
            $('#txp_currency_ext').val("MXN").trigger('change');

        // Texts
            $('#balance_paid, #previous_balance_due, #current_balance_due').text( formatCurrency("0.00"));
            $('#partiality_number').text("-- -- --");

        // Inputs
            $('#balance_paid_ctrl, #previous_due_ctrl, #current_due_ctrl, #inv_current_ex_rate_ctrl').val(0.00);
    }

    // Formatters
    function roundDecimals(input, decimal_limit = 4, default_value = 0.0) {
        let valor = parseFloat(input.value);
            if (isNaN(valor)) valor= default_value;

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

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

        return;
    }

    function parseComplementData(form_data) {
        const invoice_id = parseInt(form_data.invoice_id_ext);

        return {
          // Control Data
            _token: form_data._token,
            invoice_id: invoice_id,
            tax_format_id: form_data.invoice_format_ext,
            tax_branch_id: form_data.issuer_branch_ext,
            cfdi_use: form_data.receiver_cfdi_use_ext,
          // Complement Data
            payment_date: moment(form_data.txp_date_ext).format("YYYY-MM-DD\\THH:mm:ss"),
            payment_form: form_data.txp_payment_form_ext,
            currency: form_data.txp_currency_ext,
            exchange_rate: form_data.txp_exchange_rate_ext,
            amount: parseFloat(form_data.txp_amount_payable_ext),

          // Balances
            previous_balance: parseFloat(form_data.previous_due_ctrl),
            amount_paid: parseFloat(form_data.balance_paid_ctrl),
            remaining_balance: parseFloat(form_data.current_due_ctrl),
            invoice_exchange_rate: parseFloat(form_data.inv_current_ex_rate_ctrl),

          // Third Party Account
            third_party: {
                tax_id: (form_data.ta_tax_id || "").trim(),
                legal_name: (form_data.ta_legal_name || "").trim(),
                tax_system: (form_data.ta_tax_system || "").trim(),
                zip: (form_data.ta_zip || "").trim(),
            }
        };
    }

    // Validators
    function validateComplementForm() {
      // Validate Date
        const $date = $('#txp_date_ext');
        const invoice_date = moment($date.val(), "YYYY-MM-DDTHH:mm:ss").startOf('minute');
        const end_of_day = moment().endOf('day');

        if (invoice_date.isAfter(end_of_day)) {
            showToast("{{ __('entity_forms')['tax_payment']['errors']['invalid_future_date'] }}", "#C34808", "#78350F");
            $date[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
            $date.focus();
            return false
        }

      // Validate Third Account Section
        const $third_account_inputs = $('#ta_tax_id, #ta_legal_name, #ta_tax_system, #ta_zip');
        const some_filled = $third_account_inputs.toArray().some(i => $(i).val()?.trim());
            if(some_filled) $third_account_inputs.attr('required', true); // Add required to Fields

        const {
            section_valid: third_valid,
            show_error_detected: third_show_error,
            section_error_message: third_error_msg
        } = sharedSectionValidator('third-account-content');
        $third_account_inputs.attr('required', false); // Remove required to Fields

            if (!third_valid) {
                if (third_show_error) showToast(third_error_msg, "#C34808", "#78350F");
                return false;
            }

      // Validate Complement Section
        $('txp_date_ext').attr({
            'max': moment().format('YYYY-MM-DDTHH:mm:ss'),
        });
        const {section_valid, show_error_detected, section_error_message} = sharedSectionValidator('payment_complement_section');
            if (!section_valid) {
                if (show_error_detected) showToast(section_error_message, "#C34808", "#78350F");
                return false
            }

        // Validate Amount Payable
        const $balance_playable_input = $('#txp_amount_payable_ext')
        const balance_playable = parseFloat( $balance_playable_input.val() );
            if (balance_playable <= 0) {
                $balance_playable_input.addClass('is-invalid');
                showToast("{{ __('entity_forms')['tax_payment']['errors']['zero_amount'] }}", "#C34808", "#78350F");
                return false
            }

      // Approve Form

        return true;
    }

    function debounce(func, wait){
        let timeout;
        return function(...args){
            const context = this;
            clearTimeout(timeout);
            timeout = setTimeout(() => func.apply(context, args), wait);
        }
    }

</script>