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

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

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

{{-- Styles --}}
<style>
    .d-flex{
        min-width: 0;
    }

    .d-flex select{
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    .d-flex .form-control{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>

{{-- Modal --}}
<div id="multiplePaymentsModal" class="mt-4 modal fade" tabindex="-1"
    role="dialog" aria-labelledby="modal-title" aria-hidden="true"
>
    <div class="modal-dialog" style="max-width: 1000px !important" role="document">
        <div class="py-3 modal-content" id="multi-payment-content">

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

                {{-- Titles --}}
                <div class="mx-auto text-center">
                    <h3 class="text-uppercase" id="modal_wizard_title">
                        {{ __('entity_forms')['tax_payment']['multi_payment']['multi_payment_title'] }}
                    </h3>

                    <h6 class="text-uppercase text-dark" id="modal_wizard_subtitle">
                        {{ __('entity_forms')['tax_payment']['multi_payment']['multi_payment_subtitle'] }}
                    </h6>
                </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>

          {{-- Step 1: Invoice Selector --}}
            <div class="px-5 pb-3 modal-body" id="wizard_step_1">
                <div class="d-flex flex-column justify-content-center">

                    {{-- Receiver Data --}}
                    <div class="px-4 mt-2 mb-4 d-flex justify-content-between align-items-center">
                        <h6 id="receiver_name" class="mb-0"></h6>
                        <span class="badge badge-info">
                            {{ __('entity_forms')['tax_payment']['multi_payment']['multi_payment_badge'] }}
                        </span>
                    </div>

                    {{-- Table Structure --}}
                    <div class="table border-top" style="max-height: 400px; overflow-y: auto;">
                        <table class="table mb-0 text-center table-striped table-hover" id="multipayments_table">

                            {{--- Head ---}}
                            <thead class="sticky-top">
                                <tr class="cardtabletr">
                                    <th width="5%">
                                        <input type="checkbox" id="check_all_invoices">
                                    </th>

                                    <th>{{ __('entity_fields')['common']['date']}}</th>
                                    <th>{{ __('entity_fields')['common']['series'] }}</th>
                                    <th>Folio</th>
                                    <th>{{ __('entity_fields')['common']['type'] }}</th>
                                    <th>{{ __('entity_fields')['common']['currency'] }}</th>
                                    <th>{{ __('entity_fields')['common']['exchange_rate'] }}</th>
                                    <th>Total</th>
                                    <th>{{ __('entity_forms')['tax_payment']['placeholders']['outstanding_balance'] }}</th>
                                </tr>
                            </thead>

                            {{--- Body ---}}
                            <tbody id="table_body_multipayments"></tbody>
                        </table>
                    </div>

                    {{-- Actions --}}
                    <div class="px-4 my-2 d-flex justify-content-end">
                        <button type="button" id="btn_next_step" class="px-3 py-1 btn btn-harsi btn-md">
                            <i class="mr-2 fas fa-forward"></i>
                            {{ __('data_tables')['oPaginate']['sNext'] }}
                        </button>
                    </div>

                </div>
            </div>

          {{-- Step 2: Dispersion Y Emission --}}
            <div id="wizard_step_2" class="d-none">
                <form method="POST" id="multipayments_form"
                    autocomplete="off" enctype="multipart/form-data"
                >@csrf
                    <div class="px-5 modal-footer" style="max-height: 42rem; overflow-y: auto;">

                        {{-- Receiver Summary --}}
                        <section class="mb-2 w-100">

                            {{-- 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="my-3 row">

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

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

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

                                    <input type="text" id="mlt_txp_receiver_legal_name" readonly
                                        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="mlt_txp_receiver_tax_system" class="flex-shrink-0 px-4 py-2 mb-0 disabled-fields">
                                                {{ __('entity_fields')['common']['tax_system'] }}
                                            </label>

                                            <select id="mlt_txp_receiver_tax_system" 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="mlt_txp_receiver_cfdi_use" class="flex-shrink-0 px-4 py-2 mb-0 disabled-fields">
                                            {{ __('entity_fields')['client']['cfdi_use'] }}
                                        </label>

                                        <select id="mlt_txp_receiver_cfdi_use" name="mlt_txp_receiver_cfdi_use" 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-1 w-100">

                            {{-- 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="flex-wrap mt-3 row d-flex">

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

                                        <select name="mlt_txp_issuer_branch" id="mlt_txp_issuer_branch" 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 mb-3 col-md-6">
                                        <div class="d-flex align-items-center">
                                            <label for="mlt_txp_issuer_tax_system" class="flex-shrink-0 px-4 py-2 mb-0 disabled-fields">
                                                {{ __('entity_fields')['common']['tax_system'] }}
                                            </label>

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

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

                                        <select id="mlt_txp_invoice_format" name="mlt_txp_invoice_format" 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>

                        {{-- Payment Complement Data --}}
                        <section class="mb-1 w-100" id="multipayment_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="mlt_txp_date" class="flex-shrink-0 px-3 py-2 mb-0">
                                            {{ __('entity_fields')['common']['datetime'] }} {!! $required_field !!}
                                        </label>

                                        <input type="datetime-local" id="mlt_txp_date" name="mlt_txp_date" 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>

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

                                        <select id="mlt_txp_payment_form" name="mlt_txp_payment_form" 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-between">

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

                                        <select id="mlt_txp_currency" name="mlt_txp_currency"
                                            required data-live-search="true" data-container="body"
                                            class="selectpicker form-control flex-grow-1"
                                            onchange="unlockExchangeRateInput(), toggleConvertedColumn()"
                                        >
                                            @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="px-2 col-md-4">
                                    <div class="d-flex align-items-center">
                                        <label for="mlt_txp_exchange_rate" class="flex-shrink-0 px-3 py-2 mb-0">
                                        {{ __('entity_fields')['common']['exchange_rate'] }} {!! $required_field !!}
                                        </label>

                                        <input type="number" name="mlt_txp_exchange_rate" id="mlt_txp_exchange_rate" required readonly
                                            step="0.000001" min="0.000001" value="1.00"
                                            oninput="restrictDecimalInputs($(this)), toggleConvertedColumn(), updateConvertedAmounts()"
                                            class="form-control disabled-fields" placeholder="$ 0.00">
                                    </div>
                                </div>

                                {{-- Monto  --}}
                                <div class="pl-2 col-md-4">
                                    <div class="d-flex align-items-center">
                                        <label for="mlt_txp_global_amount_payable" class="flex-shrink-0 px-3 py-2 mb-0">
                                            Monto {!! $required_field !!}
                                        </label>

                                        <input type="number" id="mlt_txp_global_amount_payable" name="mlt_txp_global_amount_payable"
                                            placeholder="$ 0.00"  class="form-control" value="0.00" min="0.00" step="0.01" required>
                                    </div>
                                </div>

                            </div>

                        </section>

                        {{-- Comprobantes PPD Seleccionados --}}
                        <section class="mb-3 w-100">

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

                            {{-- Invoice Tables --}}
                            <div class="table mt-3 bg-light border-lg">
                                <table class="table text-center align-middle table-sm table-bordered table-striped" id="table_multipayments_selected">

                                    {{-- Head --}}
                                    <thead>
                                        <tr>
                                            <th class="th_minus" style="width: 20%">SAT UUID</th>
                                            <th class="th_minus" style="width: 8%">{{ __('entity_fields')['common']['series'] }}</th>
                                            <th class="th_minus" style="width: 8%">{{ __('entity_fields')['common']['currency'] }}</th>
                                            <th class="th_minus" style="width: 8%">{{ __('entity_fields')['common']['exchange_rate'] }}</th>
                                            <th class="th_minus" style="width: 14%">{{ __('entity_forms')['tax_payment']['placeholders']['outstanding_balance'] }}</th>
                                            <th class="th_minus" style="width: 12%">{{ __('entity_fields')['tax_payment']['parciatiliy_number_short'] }}</th>
                                            <th class="th_minus" style="width: 15%">{{ __('entity_fields')['tax_payment']['balance_paid'] }}</th>
                                            <th style="width: auto" class="converted_column d-none th_minus">{{ __('entity_fields')['tax_payment']['converted_balance_short'] }}</th>
                                        </tr>
                                    </thead>

                                    {{-- Body --}}
                                    <tbody id="table_body_multipayments_selected"></tbody>

                                    {{-- Foot --}}
                                    <tfoot class="harsi-color font-weight-bold">
                                        <tr>
                                            {{-- Remaining Balance --}}
                                            <td colspan="4" class="text-right">
                                                {{ __('entity_fields')['tax_payment']['remaining_balance'] }}:
                                            </td>
                                            <td id="total_pending_balance" class="text-right"></td>

                                            {{-- Amount Paid --}}
                                            <td class="text-right">
                                                {{ __('entity_fields')['tax_payment']['amount_paid'] }}:
                                            </td>
                                            <td id="total_balance_paid" class="text-right"></td>

                                            {{-- Converted Currencies --}}
                                            <td id="total_converted_bp" class="text-right converted_column d-none"></td>
                                        </tr>
                                    </tfoot>

                                </table>
                            </div>

                        </section>

                        {{-- Buttons & Controls --}}
                        <div class="pb-2 w-100">
                            <section class="px-5 text-center w-100 d-flex justify-content-center">

                                {{-- Turn Back --}}
                                <button type="button" id="btn_prev_step" class="py-1 mx-2 btn btn-outline-dark w-25 d-none">
                                    <i class="mr-2 fas fa-backward"></i>
                                    {{ __('data_tables')['oPaginate']['sPrevious'] }}
                                </button>

                                {{-- Cancel --}}
                                <button type="button" class="py-1 mx-2 btn btn-secondary w-25" data-dismiss="modal">
                                    {{ __('common_actions')['cancel'] }}
                                </button>

                                {{-- Submit --}}
                                <button type="submit" class="py-1 mx-2 w-25 btn btn-harsi">
                                    {{ __('entity_forms')['tax_invoice']['action_titles']['generate_payment_complement'] }}
                                </button>

                            </section>
                        </div>

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

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

{{-- General Control Scripts --}}
<script>
  //* Global Context Modal
    window.multiPaymentsState = {
        client_id: null,
        receiver_name: '',
        receiver_tax_id: '',
        invoices: [],
        selected_invoices: []
    };

    window.multiPaymentsOriginalTitle = '';
    window.multiPaymentsOriginalSubTitle = '';

  /* General Controls */
    $(document).ready(function() {
      //* Title Controls
        window.multiPaymentsOriginalTitle = $('#modal_wizard_title').text();
        window.multiPaymentsOriginalSubTitle = $('#modal_wizard_subtitle').text();

      //* Init Multi-Payments (Step 1)
        window.initMultiPayments = async function(context){
          // Visual Controls
            $('#multi-payment-content').removeClass('special-modal-body');

          // Insert data in Global Context
            window.multiPaymentsState = {
                client_id: context.client_id,
                receiver_name: context.receiver_name,
                receiver_tax_id: context.receiver_tax_id
            };

          // Load info
            $('#receiver_name').html(`
                <span class="font-weight-bold harsi-color">${context.receiver_tax_id}</span>
                <span class="text-muted">- ${context.receiver_name}</span>
            `);

            $('#table_body_multipayments').html(`
                <tr><td colspan="10">
                    ${translateAndReplace('common_responses_and_messages.loading')}
                </td></tr>
            `);

          // Request Backend
            try { // Get remaining PPD Invoices
                const response = await $.ajax({
                    url: '{{ route("tax-payments.multi-payments") }}',
                    type: 'GET',
                    data: {
                        client_id: context.client_id
                    },
                });

                window.multiPaymentsState.invoices = response.data || [];
            }catch(e){
                // console.error(e);
                window.loader.hide();
                return;
            }

          // Render remaining PPD Invoices
            renderOutstandingInvoices(window.multiPaymentsState.invoices);
        }

      //* Create Multi-Payment Context (Step 2)
        $('#btn_next_step').on('click', async function() {
          //* Ensure selected invoices currency is the same
            let same_currency = validateSameCurrency();
                if(!same_currency){
                    $('.invoice_check').prop('checked', false);

                    Swal.fire({
                        type: 'warning',
                        title: translateAndReplace('entity_forms.tax_payment.messages.discrepant_currencies_title'),
                        text: translateAndReplace('entity_forms.tax_payment.messages.discrepant_currencies_description')
                    });

                    return false;
                }

          //* Recollect selected invoices
            let selected_invoice_ids = [];
            $('.invoice_check:checked').each(function(){
                selected_invoice_ids.push($(this).data('id'));
            });
                if(selected_invoice_ids.length === 0) return; // If something is wrong, cancel process

          // Get selected invoices details
            try{
              // Request
                const response = await $.ajax({
                    url: '{{ route("tax-payments.multi-payments.details") }}',
                    type: 'GET',
                    data: { invoice_ids: selected_invoice_ids }
                });

              // Save data on Multi-Payment Global Context
                const invoices_details = response.data || [];
                window.multiPaymentsState.selected_invoices = invoices_details;
            }catch(e){
                // console.error(e);
                Swal.fire({
                    type: 'error',
                    title:' Error',
                    text: translateAndReplace('common_responses_and_messages.data_not_loaded')
                });
                return;
            }

          // Toggle Modal Content (Step 2)
            $('#wizard_step_1').addClass('d-none')
            $('#wizard_step_2, #btn_prev_step').removeClass('d-none');
            $('#multi-payment-content').addClass('special-modal-body');

            $('#modal_wizard_title').text(translateAndReplace('entity_forms.tax_payment.multi_payment.multi_payment_alternative_title'));
            $('#modal_wizard_subtitle').text(translateAndReplace('entity_forms.tax_payment.multi_payment.multi_payment_alternative_subtitle'));

          // Renderizamos el contenido del Step 2
            requestAnimationFrame(() => {
                renderInvoicesToPay(window.multiPaymentsState.selected_invoices);
                distributeGlobalPayment();
            });
        });

      //* Return to Step 1
        $(document).on('click', '#btn_prev_step', () => backToStep1());

      //* Reset Modal on Hidden
        $('#multiplePaymentsModal').on('hidden.bs.modal', () => resetMultiPaymentsModal());

      //* On Submit
        $('#multipayments_form').on('submit', async function(event){
            event.preventDefault();

          // Validación
            const form_valid = await validateMultiPaymentForm();
                if(!form_valid) return;

          // Display Loader
            window.loader.show(translateAndReplace("common_responses_and_messages.saving_data"));

          // Parse form data & Build payment
            const form_data = parseFormData($(this).serializeArray());
            const payload = parseMultiPaymentData(form_data);

          // Request
            $.ajax({
                url: "{{ route('tax-payments.multi-payments.certify') }}",
                method: "POST",
                data: payload,

                success: async function(res){
                  // Hide Loader
                    window.loader.hide();

                  // Message
                    launchSwalToast('success', res.success)

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

                    updateStampCounterIndex(stamping_status);
                    stampLimitAlerts(stamping_status);

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

                  // Cerrar modal y recargar tabla
                    $('#multiplePaymentsModal').modal('hide');
                    $('#tax_invoice_table').DataTable().ajax.reload(null, false);
                },
                error: function(data){
                  // Toggle Loader status
                    window.loader.hide();
                    const response = data.responseJSON;

                  // Validators Errors
                    if(response?.errors && typeof response?.errors === 'object' ){
                        const errors = response.errors || {};
                        Object.values(errors).forEach(messages => {
                            messages.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;
                }
            });
        });

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

{{-- Wizard Events --}}
<script>
  //* Step 1
    function renderOutstandingInvoices(invoices){
      // Insert invoices
        let html = '';

      // Reset input & Fields
        $('#check_all_invoices').prop('checked', false);
        $('#btn_next_step').prop('disabled', true);

      // Fill table
        if(!invoices || invoices.length === 0){
            html =`<tr><td colspan="10">
                ${translateAndReplace('entity_forms.tax_payment.messages.no_pending_invoices')}
            </td></tr>`;
        }else{
            invoices.forEach(inv => {
              // Parse Data
                let remaining_balance = parseFloat(inv.remaining_balance) || 0;
                let total = parseFloat(inv.total) || 0;
                let date = inv.date ? inv.date.replace('T',' ').split('.')[0] : '---';
                let exchange_rate = removeUnnecessaryDecimal(inv.exchange_rate);

              // Build Row
                html += `
                    <tr class="invoice-row">
                        <td>
                            <input type='checkbox' class="invoice_check"
                                data-id="${inv.id}" data-currency="${inv.currency}">
                        </td>
                        <td width="10%">${date}</td>
                        <td width="5%">${inv.serie || inv.invoice_type}</td>
                        <td width="5%">${inv.folio}</td>
                        <td width="5%">${inv.invoice_type}</td>
                        <td width="10%">${inv.currency}</td>
                        <td width="10%">${exchange_rate}</td>
                        <td width="15%">${total}</td>
                        <td width="15%" class="font-weight-bold">${remaining_balance}</td>
                    </tr>
                `;
            });
        }

        $('#table_body_multipayments').html(html);
    }

  //* Step 2
    function renderInvoicesToPay(invoices){
      // Abort if there is no selected invoices
        if(!invoices || invoices.length === 0) return;

      // Clean table
        const doc_body = $('#table_body_multipayments_selected');
        doc_body.empty();

      // Render Data
        // Receiver Data
            const receiver = invoices[0].receiver || {};

            $('#mlt_txp_receiver_tax_id').val(receiver.tax_id || '');
            $('#mlt_txp_receiver_legal_name').val(receiver.legal_name || '');
            $('#mlt_txp_receiver_tax_system').val(receiver.tax_system || '');
            $('#mlt_txp_receiver_cfdi_use').val("CP01");

        // Issuer Data
            const issuer_branch = invoices[0]?.tax_branch_id || 1;
            $('#mlt_txp_issuer_branch').val(issuer_branch);

        // Payment Data
            $('#mlt_txp_currency').select2({
                dropdownParent: $('#multiplePaymentsModal'),
                width:'100%'
            });
            const currency = invoices[0].currency || 'MXN';
            $('#mlt_txp_currency').val(currency).trigger('change');
            unlockExchangeRateInput();

        // Selected Invoices
            let total_global_pending = 0;

            invoices.forEach(function (inv, index){

              // Define Partiality
                let partiality = 1;
                    if(inv.payments_history && inv.payments_history.length > 0){
                        const last_partiality = Math.max(
                            ...inv.payments_history.map(p =>
                                parseInt(p.installment_number) || 0
                            )
                        );

                        partiality = last_partiality +1;
                    }

              // Build Row & Render
                let row = `
                    <tr>
                        <td class="text-center fw-semi-bold">
                            ${inv.sat_uuid}
                            <input type="hidden" name="invoices[${index}][id]" value="${inv.id}">
                        </td>

                        <td class="text-center">
                            ${inv.serie || inv.invoice_type} -  ${inv.folio}
                        </td>

                        <td class="text-center">
                            <label class="border badge" style="font-size:0.7rem;" data-field="inv_currency" data-currency="${inv.currency}">
                                ${inv.currency}
                            </label>
                        </td>

                        <td class="text-center" data-field="inv_exchange_rate">${removeUnnecessaryDecimal(inv.exchange_rate)}</td>

                        <td class="text-right" data-field="inv_previous_due">$ ${inv.remaining_balance}</td>

                        <td class="text-center" data-field="pay_partiality">${partiality}</td>

                        <td class="text-right">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <label class="input-group-text">$</label>
                                </div>

                                <input type="number" name="invoices[${index}][amount_payable]"
                                    class="mx-auto text-right form-control amount_payable"
                                    value="0.00" step="0.0001" min="0.0001"
                                    max="${inv.remaining_balance}" required
                                >
                            </div>
                        </td>

                        <td class="text-right converted_column d-none">
                            <span class="pay_converted_amount">$ 0.00</span>
                        </td>

                    </tr>
                `;
                doc_body.append(row);

              // Increment Pending Balance
                total_global_pending += inv.remaining_balance;
            });

      // Update the footer total
        $('#total_pending_balance').text(`$ ${removeUnnecessaryDecimal(total_global_pending)}`);

      // Show the Conversions column only if required
        toggleConvertedColumn();
    }
</script>

{{-- Wizard Interactions --}}
<script>
  //* Step 1 Interactions
    // Un/Check all pending reservations
    $(document).on('change', '#check_all_invoices', function(){
        const is_checked = $(this).is(':checked');
        $('.invoice_check').each(function() {
            $(this).prop('checked', is_checked);
        });

        enableBtnNextStep();
    });

    // On Check one pending reservation
    $(document).on('change', '.invoice_check', function(){
        let is_checked = $(this).is(':checked');
        if(!is_checked) // If one checkbox is unchecked, uncheck "Check All" input
            $('#check_all_invoices').prop('checked', false);

        enableBtnNextStep();
    });

    // Unlock next multi-payment step
    function enableBtnNextStep(){
        let selects = 0; // Selected invoices quantity

        $('.invoice_check:checked').each(function(){
            let row = $(this).closest('invoice-row');
            let amount = parseFloat(row.data('remaining-balance')) || 0;
            selects++;
        });

        $('#btn_next_step').prop('disabled', selects < 2); // Enable button when at least two invoices have been selected
    }

  //* Step 2 Interactions
    // Return to Step 1
    function backToStep1(){
        $('#wizard_step_1').removeClass('d-none');
        $('#wizard_step_2, #btn_prev_step').addClass('d-none');
        $('#multi-payment-content').removeClass('special-modal-body');

        $('#modal_wizard_title').text(window.multiPaymentsOriginalTitle);
        $('#modal_wizard_subtitle').text(window.multiPaymentsOriginalSubTitle);
    }

  //* Reset Multi-Payment process on close
    function resetMultiPaymentsModal() {
      // Reset visual content
        $('#wizard_step_2, #btn_prev_step').addClass('d-none');
        $('#wizard_step_1').removeClass('d-none');

      // Reset Invoice to Pay Table
        if($('#multipayments_form').length > 0)
            $('#multipayments_form')[0].reset();

        $('#table_body_multipayments_selected').empty();
        $('#mlt_txp_currency').val("MXN").trigger('change');
        $('#total_pending_balance').text('$ 0.00');
        $('#total_balance_paid').val('$ 0.00');

      // Uncheck all checkboxes
        $('.invoice_check').prop('checked', false);
        $('#check_all_invoices').prop('checked', false);
        $('#btn_next_step').prop('disabled', true);

      // Reset Global State
        window.multiPaymentsState = {
            client_id: null,
            receiver_name: '',
            receiver_tax_id: '',
            invoices: [],
            selected_invoices: {},
        }

      // Reset modal titles
        $('#modal_wizard_title').text(window.multiPaymentsOriginalTitle);
        $('#modal_wizard_subtitle').text(window.multiPaymentsOriginalSubTitle);
    }
</script>

{{-- Operation Functions --}}
<script>
  // Spread global amount into payment fields
    $(document).on('input', '#mlt_txp_global_amount_payable', function(){
        distributeGlobalPayment();
    });

    function distributeGlobalPayment() {
      // Compute limit through outstanding balances
        let raw_limit_text = $('#total_pending_balance').text() || 0;
        let global_limit = parseFloat(raw_limit_text.replace(/[^0-9.-]+/g, "")) || 0;

      // Amount Limit Control
        let exchange_rate = parseFloat($('#mlt_txp_exchange_rate').val());
        let global_amount = restrictDecimalInputs($('#mlt_txp_global_amount_payable'));
            if(global_amount < 0) { // Avoid negative amount
                global_amount = 0;
                $('#mlt_txp_global_amount_payable').val('0.00');

                showToast(
                    translateAndReplace('common_responses_and_messages.no_negative_values'),
                    "#C34808", "#78350F"
                );
            }

        if(global_amount > global_limit) { // If limit is reached set pending amount as amount to paid
            global_amount = global_limit;

            $('#mlt_txp_global_amount_payable').val(global_amount);
            showToast(
                translateAndReplace('entity_forms.tax_payment.messages.amount_limit_reached'),
                "#C34808", "#78350F"
            );
        }

      // Compute proporcional factor
        let active_inputs = $('.amount_payable');
        let conversion_factor = (global_limit > 0) ? (global_amount/global_limit) : 0;
        let distributed_so_far = 0; // Cent Rounding Control
        let global_amount_cents = toCents(global_amount); // Monto global en centavos

        // Distribute amount among inputs
        active_inputs.each(function(index){
            let max_possible = parseFloat($(this).attr('max')) || 0;

            // The last input receives the remainder to avoid losing cents due to rounding
            if(index === active_inputs.length - 1) {
                let final_remnant = global_amount_cents - distributed_so_far;
                $(this).val( fromCents(final_remnant) ); // FromCents de vuelve el valor entero a su valor real (divide entre 100) y recorta deja 4 decimales máximos
            } else {
                // Set proportional amount based on the factor
                let proportional_share = toCents(max_possible * conversion_factor); // Convierte a centavos y elimina flotantes
                distributed_so_far += proportional_share;
                $(this).val( fromCents(proportional_share) ); // fromCents Regresamos al valor real y recortamos decimales
            }
        });

        // Spread triggers
        updateConvertedAmounts();
        refreshTableFooter();
    }

  // Compute totals & update footer
    function refreshTableFooter(){
      // Compute total
        let total_received = 0;
        $('.amount_payable').each(function(){
            let val = parseFloat($(this).val()) || 0;
            if(!isNaN(val)) total_received += val;
        });

      // Update footer total
        $('#total_balance_paid').text(`$ ${ normalizeAmount(total_received, 4) }` );

      // Return total
        return total_received;
    }

  // Spread amount when edit payment distribution
    $(document).on('input', '.amount_payable', function(){
        let global_amount = parseFloat($('#mlt_txp_global_amount_payable').val()) || 0;
        let max_possible = parseFloat($(this).attr('max')) || 0;
            if(global_amount <= 0) {
                $(this).val('0.00');
                refreshTableFooter();
                return;
            }

      // Ensure amount limit
        let current_val = restrictDecimalInputs($(this)); // Fix decimals

        if(current_val < 0) { // Avoid Negative
            current_val = 0;
            $(this).val('0.00');

            showToast(
                translateAndReplace('common_responses_and_messages.no_negative_values'),
                "#C34808", "#78350F"
            );
        }
        if(current_val > max_possible) { // If limit is reached set pending amount as amount to paid
            current_val = max_possible;
            $(this).val(max_possible);

            showToast(
                translateAndReplace('entity_forms.tax_payment.messages.total_amount_limit_reached'),
                "#C34808", "#78350F"
            );
        }

      // Compute Total table
        let current_total_table = 0;
        $('.amount_payable').each(function(){
            let val = parseFloat($(this).val()) || 0;
            current_total_table += val;
        });

      // Spread triggers
        updateConvertedAmounts();
        refreshTableFooter();
    });

  // Update converted amount column
    function updateConvertedAmounts(){
      // Control Data
        const pay_exchange_rate = parseFloat($('#mlt_txp_exchange_rate').val());
        const pay_currency = $('#mlt_txp_currency').val();
            if(isNaN(pay_exchange_rate) || pay_exchange_rate <= 0) return;

        let total_global_converted = 0;

      //Update converted amounts
        $('#table_body_multipayments_selected tr').each(function(){
          // Row Data
            // Payment
            const input = $(this).find('.amount_payable');
            const amount_paid = parseFloat( input.val() ) || 0;
            const max_possible = parseFloat( input.attr('max') ) || 0;

            // Invoice
            const inv_currency = $(this).find('[data-field="inv_currency"]').data('currency');
            const inv_exchange_rate = parseFloat( $(this).find('[data-field="inv_exchange_rate"]').text() ) || 1;

            // Total amount
            const converted_label = $(this).find('.pay_converted_amount');

          // Convert Amount
            let converted_amount = 0;

            // Delegate constraints to the main input
            if(pay_currency === inv_currency){
                converted_amount = amount_paid * pay_exchange_rate;
            } else {

              // Convert amount into selected currency
                converted_amount = convertedPaymentAmountToRealValueForInvoice(
                    pay_currency, pay_exchange_rate, amount_paid,
                    inv_currency, inv_exchange_rate
                );

              // Amount Limit
                // ToCents los vuelve enteros (multiplica x 100) y aplica un Math.round para quitar decimales
                if( toCents(converted_amount) > toCents(max_possible) ){
                  // Convert amount limit to selected currency
                    let correct_amount = convertedInvoiceCurrencyToPaymentAmount(
                        inv_currency, inv_exchange_rate, max_possible,
                        pay_currency, pay_exchange_rate
                    );

                  // If limit is reached set pending amount as amount to paid
                    showToast(
                        translateAndReplace('entity_forms.tax_payment.messages.total_amount_limit_reached'),
                        "#C34808", "#78350F"
                    );
                    $(this).find('.amount_payable').val(correct_amount);

                  // Re-compute amount into original currency
                    converted_amount = convertedPaymentAmountToRealValueForInvoice(
                        pay_currency, pay_exchange_rate , correct_amount,
                        inv_currency, inv_exchange_rate
                    );
                }
            }

          // Update total amount & individual payments
            converted_label.text(`$ ${ normalizeAmount(converted_amount, 4) }`);
            total_global_converted += converted_amount;
        });

      // Update converted amount total
        $('#total_converted_bp').text(`$ ${removeUnnecessaryDecimal(total_global_converted)}`);
    }

  // Convert amount into Invoice Currency (?Divisa -> Pesos -> Divisa)
    function convertedPaymentAmountToRealValueForInvoice(
        pay_currency, pay_exchange_rate,
        pay_amount_paid, inv_currency,
        inv_exchange_rate
    ){
        let amount = 0;
        switch (true){
            case(inv_currency === pay_currency):
                amount = pay_amount_paid;
                break;

            case(pay_currency === 'MXN'):
                amount = pay_amount_paid/inv_exchange_rate;
                break;

            default:
                let converted_amount = pay_amount_paid * pay_exchange_rate;
                amount = converted_amount / inv_exchange_rate;
                break;
        }
        amount= normalizeAmount(amount, 4);

        return amount;
    }

  // Convert invoice amount into Payment Currency (Divisa -> Pesos ?-> Divisa )
    function convertedInvoiceCurrencyToPaymentAmount(
        inv_currency, inv_exchange_rate,
        amount_paid, pay_currency, pay_exchange_rate,
    ){
        let amount = 0;
        switch (true){
            case(inv_currency === pay_currency):
                amount = amount_paid;
                break;

            case(pay_currency === 'MXN'):
                amount = amount_paid * inv_exchange_rate;
                break;

            default:
                let converted_amount = Number(amount_paid * inv_exchange_rate);
                amount = converted_amount / pay_exchange_rate;
                break;
        }

        amount= normalizeAmount(amount, 4);
        return amount;
    }
</script>

{{-- Support Functions --}}
<script>
  // Validar misma moneda en facturas
    function validateSameCurrency(){
        let currencies = [];
        $('.invoice_check:checked').each(function(){
            currencies.push($(this).data('currency'));
        });

        let same_currency = new Set(currencies).size === 1;
        return same_currency;
    }

  // No más de 2 decimales (trabaja con objetos inputs)
    function restrictDecimalInputs(amount){
        let val_str = amount.val();
        if(val_str.indexOf('.') !== -1){
            let parts = val_str.split('.');
            if(parts[1].length > 4){
                val_str = parts[0] + '.' + parts[1].slice(0, 4);
                amount.val(val_str);
            }
        }

        return parseFloat(amount.val()) || 0;
    }

  // Activar o desactivar el input de tipo de cambio
    function unlockExchangeRateInput(){
        const select_currency = $('#mlt_txp_currency').val();

        if(select_currency !== "MXN"){
            $('#mlt_txp_exchange_rate').val('').prop('readonly', false).removeClass('disabled-fields');
            return;
        }else{
            $('#mlt_txp_exchange_rate').val('1.00').prop('readonly', true).addClass('disabled-fields');
        };
    }

  // Activar columna de conversion de divisas
    function toggleConvertedColumn(){
      // Get current data
        let exchange_rate = parseFloat($('#mlt_txp_exchange_rate').val());
        let select_currency = $('#mlt_txp_currency').val();

        // Todas las facturas comparten la misma moneda, solo tomamos la primera como referencia
        let first_invoice = window.multiPaymentsState.selected_invoices[0] || {};
        let inv_currency = '';

        // Validación: moneda diferente a la factura
        if(first_invoice &&  Object.keys(first_invoice).length > 0)
            inv_currency = first_invoice.currency;

        const should_show = inv_currency
            ? (select_currency !== inv_currency)
            : (select_currency !== 'MXN');

        // Toggle column
        $('.converted_column').toggleClass('d-none', !should_show);
        if(should_show) updateConvertedAmounts();
    }

  // Validación de formulario
    async function validateMultiPaymentForm(){
      // Datos globales
        const {
            section_valid,
            show_error_detected,
            section_error_message
        } = sharedSectionValidator('multipayment_complement_section');

        if(!section_valid){
            if(show_error_detected) showToast(section_error_message, "#C34808", "#78350F");
            return false;
        }

      // Validar Fecha
        const $date = $('#mlt_txp_date');
        const payment_date = moment($date.val(), "YYYY-MM-DDTHH:mm:ss"); //.startOf('minute');
        const end_of_day = moment().endOf('day');

        if(payment_date.isAfter(end_of_day)){
            showToast(
                "{{ __('entity_forms')['tax_payment']['errors']['invalid_future_date'] }}",
            );
            $date[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
            $date.focus();

            return false;
        }

      // Validación de documentos
        const $rows = $('#table_body_multipayments_selected tr');
            if($rows.length === 0){
                showToast(
                    translateAndReplace('entity_forms.tax_payment.messages.no_related_documents'),
                    "#C34808", "#78350F"
                );
                return false;
            }

      // Validar importes pagados
        let total_paid = 0;
        let has_error = false;

        $('.amount_payable').each(function() {
            const amount_paid = parseFloat($(this).val()) || 0;
            const max_allowed = parseFloat($(this).attr('max')) || 0;

          // Montos negativos
            if(amount_paid <= 0){
                $(this).addClass('is-invalid');
                has_error = true; // Permitimos seguir capturando errores
                return true;
            }

          // Cantidad mayor a la deuda excedida
            if(amount_paid > max_allowed){
                $(this).addClass('is-invalid');
                has_error = true; // Permitimos seguir capturando errores
                return true;
            }

            total_paid += amount_paid;
        });

            if(has_error){
                showToast(
                    translateAndReplace('entity_forms.tax_payment.messages.invalid_amounts_related_documents'),
                    "#C34808", "#78350F"
                );
                return false; // Detenemos la ejecución para mostrar errores
            }

      // Validar monto global
        const global_amount = parseFloat($('#mlt_txp_global_amount_payable').val()) || 0;
            if(global_amount <= 0){
                $('#mlt_txp_global_amount_payable').addClass('is-invalid');
                showToast("{{ __('entity_forms')['tax_payment']['errors']['zero_amount'] }}", "#C34808", "#78350F");
                return false;
            }

        // Fixed values
        const total_paid_fixed = normalizeAmount(total_paid, 4); // Suma de las casillas
        const global_amount_fixed = normalizeAmount(global_amount, 4); // Input de monto pricipal

      // Validar consistencia de Totales
        // La suma de los montos por factura revasó al monto global
        if(total_paid_fixed > global_amount_fixed){
            Swal.fire({
                type: 'error',
                title: translateAndReplace('entity_forms.tax_payment.messages.compute_limit_reached_title'),
                text: translateAndReplace('entity_forms.tax_payment.messages.compute_limit_reached_description')
            });

            return false;
        }

        // La suma de los montos por factura es menor al monto global
        if( total_paid_fixed < global_amount_fixed){
            const result = await Swal.fire({
                type: 'warning',
                title: translateAndReplace('entity_forms.tax_payment.messages.incongruent_amounts_title'),
                html: `
                    <p>
                        ${translateAndReplace('entity_forms.tax_payment.messages.incongruent_amounts_description')}
                    </p>

                    <p class="mb-0">
                        ${translateAndReplace('entity_forms.tax_payment.messages.incongruent_amounts_consequences')}
                    </p>

                    <strong>
                        ${translateAndReplace('entity_forms.tax_payment.messages.incongruent_amounts_question')}
                    </strong>
                `,
                showCancelButton: true,
                confirmButtonText: `
                    ${translateAndReplace('common_actions.approve')}
                    ${translateAndReplace('common_actions.continue')}
                `,
                cancelButtonText: translateAndReplace('common_actions.cancel'),
                reverseButtons: true,
            });
                if(!result.value) return false;

            // Ajustar monto global automáticamente
            $('#mlt_txp_global_amount_payable').val( normalizeAmount(total_paid, 4) );
        }

      // Validar el tipo de cambio
            const currency = $('#mlt_txp_currency').val();
            const exchange_rate = parseFloat($('#mlt_txp_exchange_rate').val()) || 0;

            if(currency !== 'MXN' && exchange_rate <= 0){
                $('#mlt_txp_exchange_rate').addClass('is-invalid');
                showToast("{{ __('entity_forms')['tax_payment']['errors']['zero_amount'] }}", "#C34808", "#78350F");
                return false;
            }

        return true;
    }

  // Construction individual de los Complementos de Pago
    function buildPaymentDocuments(invoices){
        let documents = [];

        // Data payment
            let pay_currency = $('#mlt_txp_currency').val();
            let pay_exchange_rate = parseFloat($('#mlt_txp_exchange_rate').val()) || 1;

        invoices.forEach(function(inv, index){
            // Invoice context
                let inv_currency = inv.currency;
                let inv_exchange_rate = parseFloat(inv.exchange_rate) || 1;

            let amount_paid = parseFloat(
                $(`input[name="invoices[${index}][amount_payable]"]`).val()
            ) || 0;

            let previous_balance = Number( (parseFloat(inv.remaining_balance)) || 0 );

            // Transformar Valor real del monto pagado
                let true_amount_paid = convertedPaymentAmountToRealValueForInvoice(
                    pay_currency, pay_exchange_rate, amount_paid,
                    inv_currency, inv_exchange_rate
                );

                amount_paid = true_amount_paid;

            // Ajuste a centavos para evitar decimales
            let remaining_balance_cents = toCents(previous_balance) - toCents(amount_paid);
            let remaining_balance = fromCents(remaining_balance_cents);

            // Si ya no hay deuda el pago debe ser igual al ultimo pago
            if(remaining_balance === 0) amount_paid = previous_balance;

            let installment_number = parseInt(
                $('#table_body_multipayments_selected tr')
                    .eq(index).find('[data-field="pay_partiality"]').text()
            ) || 1;

            documents.push({
                invoice_id: inv.id,
                installment_number,
                previous_balance,
                amount_paid,
                remaining_balance
            });
        });

        return documents;
    }

  // Payload Final
    function parseMultiPaymentData(form_data){
        let invoices = window.multiPaymentsState.selected_invoices || [];

        return {
            _token: form_data._token,

            tax_format_id: form_data.mlt_txp_invoice_format,
            tax_branch_id: form_data.mlt_txp_issuer_branch,

            cfdi_use: form_data.mlt_txp_receiver_cfdi_use,

            payment_date: moment(form_data.mlt_txp_date).format("YYYY-MM-DD\\THH:mm:ss"),
            payment_form: form_data.mlt_txp_payment_form,
            currency: form_data.mlt_txp_currency,
            exchange_rate: parseFloat(form_data.mlt_txp_exchange_rate),
            amount: parseFloat(form_data.mlt_txp_global_amount_payable),

            documents: buildPaymentDocuments(invoices)
        };
    }

</script>