@extends('layouts.master')
@section('title') @lang('translation.invoices') @endsection
@section('csrf')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@section('css')
<!--datatable css-->
<link href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" rel="stylesheet" type="text/css" />
<!--datatable responsive css-->
<link href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />
@endsection

@section('content')

@component('components.breadcrumb')
@slot('li_1')Ventas @endslot
@slot('title')Facturas @endslot
@endcomponent

<template id="trow">
    <tr>
        <td class="p-0" style="width: 35%; height:24px !important;">
            <select
                name="ps[]"
                class="form-select form-select-sm Producto" 
                id="productIdForm2"
                data-choices data-choices-sorting-false
                required="true">
                <option value="">Elige...</option>
                @foreach ($products as $id => $nombre)
                <option value="{{ $id }}">{{$nombre }}</option>
                @endforeach
            </select>
        </td>
        <td class="p-0" style="width: 15%">
            <input
                name="pr[]"
                type="text" 
                class="form-control Precio bg-light" 
                value="0"
                readonly>
        </td>
        <td class="p-0" style="width: 15%">
            <input
                name="us[]"
                type="text" 
                class="form-control Cantidad">
        </td>
        <td class="p-0" style="width: 15%">
            <input
                name="ds[]"
                type="text" 
                class="form-control Descuento">
        </td>
        <td class="p-0" style="width: 20%">
            <input
                name="tt[]"
                type="text" 
                class="form-control Total bg-light" readonly>
        </td>
        <td style="display:none;">
            <input type="hidden" name="tit[]" class="tIt">
            <input type="hidden" name="tir[]" class="tIr">
        </td>
        <td>
            <a 
                class="btn btn-danger btn-sm p-1" 
                onclick="this.closest('tr').remove();calcular();">
                <i class="ri-close-line"></i>
            </a>
        </td>
    </tr>
</template>

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Nueva Factura</h5>
            </div>
            <div class="card-body">
                <form role="form" method="post" action="{{ route('invoices.store') }}">
                    @csrf
                    <input type="hidden" name="user_id" value="{{ auth()->id() }}">
                    <div class="row g-3">
                        @if (empty($emitters))
                            <input type="hidden" name="emitter_id" value="{{ Auth::user()->emitter->id }}">
                        @else
                            <div class="col-lg-12">
                                <div>
                                    <label for="emitterClient" class="form-label">Emisor</label>
                                    <select 
                                        class="form-select form-select-tf" 
                                        aria-label=".form-select-tf" 
                                        id="emitterClient" 
                                        name="emitter_id"
                                        required="true">
                                        <option value="">Elige el emisor</option>
                                        @foreach ($emitters as $emitter)
                                        <option value="{{ $emitter->id }}">{{ $emitter->razon_social}}</option>    
                                        @endforeach
                                    </select>
                                </div>
                            </div><!--end col-->
                        @endif                        
                        <div class="col-lg-4">
                            <div>
                                <label for="folioInput" class="form-label">Folio</label>
                                <input 
                                    type="text" 
                                    class="form-control" 
                                    id="folioInput" 
                                    name="folio"
                                    required="true"
                                    readonly
                                    value="{{ $folio }}">
                            </div>
                        </div><!--end col-->
                        <div class="col-lg-4">
                            <div>
                                <label for="textInputDate1" class="form-label">Fecha Emisión</label>
                                <input 
                                    name="fecha_emision"
                                    type="date" 
                                    class="form-control" 
                                    id="textInputDate1"
                                    required="true">
                            </div>
                        </div><!--end col-->
                        <div class="col-lg-4">
                            <div>
                                <label for="textInputDate2" class="form-label">Fecha Vencimiento</label>
                                <input 
                                    name="fecha_vencimiento"
                                    type="date" 
                                    class="form-control" 
                                    id="textInputDate2"
                                    required="true">
                            </div>
                        </div><!--end col-->
                        <div class="col-lg-4">
                            <div>
                                <label for="EstatusInputSelect" class="form-label">Estatus</label>
                                <select
                                    id="EstatusInputSelect"
                                    name="estatus" 
                                    class="form-select mb-3" 
                                    aria-label="EstatusInputSelect"
                                    required="true">
                                    <option selected="">Elige el estatus</option>
                                    <option value="borrador">Borrador</option>
                                    <option value="terminada">Terminada</option>
                                </select>
                            </div>
                        </div><!--end col-->
                        <div class="col-lg-4">
                            <div>
                                <label for="serieInput" class="form-label">Serie</label>
                                <input 
                                    type="text" 
                                    class="form-control" 
                                    id="serieInput" 
                                    name="serie"
                                    required="true"
                                    value="">
                            </div>
                        </div><!--end col-->
                        <div class="col-lg-4">
                            <div>
                                <label for="lugarExpInput" class="form-label">Lugar de expedición</label>
                                <input 
                                    type="text" 
                                    class="form-control" 
                                    id="lugarExpInput" 
                                    name="lugar_expedicion"
                                    required="true"
                                    value="{{ old('lugar_expedicion', Auth::user()->emitter->codigo_postal_fiscal) }}">
                            </div>
                        </div><!--end col-->
                        <div class="col-lg-4">
                            <div>
                                <label for="FormaPago" class="form-label">Forma de pago</label>
                                <select 
                                    class="form-control" 
                                    id="FormaPago" 
                                    name="forma_pago" 
                                    data-choices data-choices-sorting-false
                                    required="true">
                                    <option value="">Elige la forma</option>
                                    @foreach ($forma_pagos as $id => $forma_pago)
                                    <option 
                                        value="{{ $id }}">
                                        {{$id}}-{{$forma_pago }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div><!--end col-->
                        <div class="col-lg-4">
                            <div>
                                <label for="MetodoPago" class="form-label">Metodo de pago</label>
                                <select 
                                    class="form-control" 
                                    id="MetodoPago" 
                                    name="metodo_pago" 
                                    data-choices data-choices-sorting-false
                                    required="true">
                                    <option value="">Elige el método</option>
                                    @foreach ($metodo_pagos as $id => $metodo_pago)
                                    <option 
                                        value="{{ $id }}">
                                        {{$id}}-{{$metodo_pago }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div><!--end col-->
                        
                        <div class="row mt-2 mb-2 align-items-center g-3">
                            <h5 class="fs-16">Receptor</h5>
                        </div>
                        <!--end col-->
                        <div class="col-lg-4">
                            <div>
                                <label for="clientIdForm" class="form-label">Cliente</label>
                                <select 
                                    class="form-control" 
                                    id="clientIdForm" 
                                    name="client_id" 
                                    data-choices data-choices-sorting-false
                                    required="true">
                                    <option value="">Elige el cliente</option>
                                    @foreach ($clients as $id => $razon_social)
                                    <option                                         
                                        @if (empty($client_inf->id))
                                            value="{{ $id }}">
                                        @else
                                            value="{{ $id }}"
                                            {{(old('client_id',$client_inf->id)==$id)?'selected':''}}>
                                        @endif
                                        
                                        {{$razon_social }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div><!--end col-->
                        
                        <div class="col-lg-4">
                            <div>
                                <label for="nombre_receptorInput" class="form-label">Nombre</label>
                                <input 
                                    type="text" 
                                    class="form-control" 
                                    id="nombre_receptorInput" 
                                    name="nombre_receptor"
                                    required="true"
                                    disabled
                                    @if (empty($client_inf->id))
                                    value="{{ old('nombre_receptor') }}">
                                    @else
                                    value="{{ old('nombre_receptor',$client_inf->razon_social) }}">
                                    @endif
                                    
                            </div>
                        </div><!--end col-->
                        <div class="col-lg-4">
                            <div>
                                <label for="RFCInputR" class="form-label">RFC</label>
                                <input 
                                    type="text" 
                                    class="form-control" 
                                    id="RFCInputR" 
                                    name="rfc_receptor"
                                    required="true"
                                    disabled
                                    @if (empty($client_inf->id))
                                    value="{{ old('rfc_receptor') }}">
                                    @else
                                    value="{{ old('rfc_receptor',$client_inf->rfc) }}">
                                    @endif
                            </div>
                        </div><!--end col-->
                        <div class="col-4">
                            <div>
                                <label for="CPInputR" class="form-label">Domicilio Fiscal</label>
                                <input 
                                    type="text" 
                                    class="form-control" 
                                    id="CPInputR" 
                                    name="domicilio_fiscal_receptor"
                                    required="true"
                                    disabled
                                    @if (empty($client_inf->id))
                                    value="{{ old('domicilio_fiscal_receptor') }}">
                                    @else
                                    value="{{ old('domicilio_fiscal_receptor',$client_inf->codigo_postal) }}">
                                    @endif
                            </div>
                        </div><!--end col-->
                        <div class="col-4">
                            <div class="mb-3">
                                <label for="firstSelectInput" class="form-label">Regimen Fiscal</label>
                                <select 
                                    id="firstSelectInput"
                                    name="regimen_fiscal_receptor" 
                                    class="form-select" 
                                    aria-label="firstSelectInput"
                                    required="true"
                                    disabled>
                                    <option selected="">Selecciona</option>
                                    @foreach ($regimen_fiscal as $item)
                                        <option
                                            @if (empty($client_inf->id))
                                            value="{{ $item->c_RegimenFiscal }}">
                                            @else
                                            value="{{ $item->c_RegimenFiscal }}"
                                            {{(old('regimen_fiscal_receptor',$client_inf->regimen_fiscal)==$item->c_RegimenFiscal)?'selected':''}}>
                                            @endif                                            
                                            {{ $item->descripcion }} ({{ $item->c_RegimenFiscal }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <!--end col-->
                        <div class="col-lg-4">
                            <div>
                                <label for="UsoCfdiForm" class="form-label">Uso CFDI</label>
                                <select 
                                    id="UsoCfdiForm" 
                                    name="uso_cfdi"     
                                    class="form-control"
                                    required="true">
                                    <option value="">Elige el uso</option>
                                    @foreach ($uso_cfdis as $c_UsoCFDI => $descripcion)
                                    <option
                                        @if (empty($client_inf->id))
                                        value="{{$c_UsoCFDI}}">
                                        @else
                                        value="{{$c_UsoCFDI}}"
                                        {{(old('uso_cfdi',$client_inf->uso_cfdi)==$c_UsoCFDI)?'selected':''}}>
                                        @endif                                        
                                        {{$descripcion}} ({{$c_UsoCFDI}})
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div><!--end col-->

                        <div class="row mt-2 mb-2 align-items-center g-3">
                            <h5 class="fs-16">CFDI</h5>
                        </div>
                        <!--end col-->
                        
                        <div class="col-lg-4">
                            <div>
                                <label for="TipoComprobante" class="form-label">Tipo Comprobante</label>
                                <select 
                                    class="form-control" 
                                    id="TipoComprobante" 
                                    name="tipo_comprobante" 
                                    data-choices data-choices-sorting-false
                                    required="true">
                                    <option value="">Elige el tipo</option>
                                    @foreach ($tipo_comprobantes as $id => $tipo_comprobante)
                                    <option 
                                        value="{{ $id }}">
                                        {{$id}}-{{$tipo_comprobante }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div><!--end col-->
                        <div class="col-lg-4">
                            <div>
                                <label for="MonedaInputSelect" class="form-label">Moneda</label>
                                <select
                                    class="form-control MonedaInputSelect" 
                                    id="MonedaInputSelect"
                                    name="moneda"                                    
                                    data-choices data-choices-sorting-false
                                    required="true">
                                    <option selected="">Elige...</option>
                                    @foreach ($monedas as $c_Moneda => $nombre)
                                    <option 
                                        value="{{ $c_Moneda }}"
                                        {{(old('moneda')==$c_Moneda)?'selected':''}}>
                                        {{$nombre }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div><!--end col-->
                        <div class="col-lg-4">
                            <div>
                                <label for="tipo_cambioInput" class="form-label">Tipo de cambio</label>
                                <input 
                                    type="text" 
                                    class="form-control" 
                                    id="tipo_cambioInput" 
                                    name="tipo_cambio"
                                    disabled
                                    value="">
                            </div>
                        </div><!--end col--> 

                        <div class="col-lg-12">                                                    
                            <hr class="mt-0 mb-0">
                            <div class="row">
                                <h5 class="col-6 fs-16 align-middle mt-2 mb-0">Productos y servicios</h5>
                                <div class="col-6 d-flex mt-1 justify-content-sm-end">
                                    <button id="aRow" type="button" class="btn btn-primary btn-sm">
                                        <i class="ri-add-fill align-middle"></i> Producto o Servicio
                                    </button>
                                </div>
                            </div>
                            <hr class="mt-1">
                        </div>
                        <div class="col-lg-12 mt-0">
                            <table id="tProServCotiza" class="table table-bordered nowrap table-striped align-middle">
                                <thead>
                                    <tr class="align-middle text-center m-0">
                                        <th class="p-0" style="width: 35%;">Producto</th>
                                        <th class="p-0" style="width: 15%;">Precio unitario</th>
                                        <th class="p-0" style="width: 15%;">Cantidad</th>
                                        <th class="p-0" style="width: 15%;">Decuento</th>
                                        <th class="p-0" style="width: 20%;">Total</th>
                                        <th><i class="ri-delete-bin-5-line" title="Borrar"></i></th>
                                    </tr>
                                </thead>
                                <tbody id="t-body">
                                    <tr>
                                        <td class="p-0" style="width: 35%; height:24px !important;">
                                            <select
                                                name="ps[]"
                                                class="form-select form-select-sm Producto" 
                                                id="productIdForm1"
                                                data-choices data-choices-sorting-false
                                                required="true">
                                                <option value="">Elige...</option>
                                                @foreach ($products as $id => $nombre)
                                                <option 
                                                    value="{{ $id }}"
                                                    {{(old('ps[]')==$id)?'selected':''}}>
                                                    {{$nombre }}
                                                </option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td class="p-0" style="width: 15%">
                                            <input
                                                name="pr[]"
                                                type="text" 
                                                class="form-control Precio bg-light"
                                                required="true"
                                                readonly>
                                        </td>
                                        <td class="p-0" style="width: 15%">
                                            <input
                                                name="us[]"
                                                type="text" 
                                                class="form-control Cantidad"
                                                required="true">
                                        </td>
                                        <td class="p-0" style="width: 15%">
                                            <input
                                                name="ds[]"
                                                type="text" 
                                                class="form-control Descuento" value="0.00">
                                        </td>
                                        <td class="p-0" style="width: 20%">
                                            <input
                                                name="tt[]"
                                                type="text" 
                                                class="form-control Total bg-light"
                                                required="true"
                                                readonly>
                                        </td>
                                        <td style="display:none">
                                            <input type="hidden" name="tit[]" class="tIt">
                                            <input type="hidden" name="tir[]" class="tIr">
                                        </td>
                                        <td>
                                            <a 
                                                class="btn btn-danger btn-sm p-1" 
                                                onclick="this.closest('tr').remove();calcular();">
                                                <i class="ri-close-line"></i>
                                            </a>
                                        </td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="3"></td>
                                        <td class="p-1">
                                            Suma
                                        </td>
                                        <td class="p-0" style="width: 15%">
                                            <input 
                                                id="subtotal"
                                                name="subtotal"
                                                type="text" 
                                                class="form-control bg-light"                                            
                                                readonly>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3"></td>
                                        <td class="p-1" style="width: 15%">
                                            Descuento
                                        </td>
                                        <td class="p-0" style="width: 15%">
                                            <input 
                                                id="totalDescuento" 
                                                name="descuento"
                                                type="text" 
                                                class="form-control bg-light"
                                                required="true"
                                                readonly>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3"></td>
                                        <td class="p-1" style="width: 15%">
                                            Subtotal
                                        </td>
                                        <td class="p-0" style="width: 20%">
                                            <input 
                                                id="totalGeneral" 
                                                type="text" 
                                                class="form-control bg-light"
                                                readonly>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3"></td>
                                        <td class="p-1" style="width: 15%">
                                            Impuestos traslado
                                        </td>
                                        <td class="p-0 text-end" style="width: 20%">
                                            <input 
                                                id="toc_t" 
                                                name="toc_t"
                                                type="text" 
                                                class="form-control bg-light TOC_T"
                                                required="true"
                                                value="0"
                                                readonly>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3"></td>
                                        <td class="p-1" style="width: 15%">
                                            Impuestos retención
                                        </td>
                                        <td class="p-0 text-end" style="width: 20%">
                                            <input 
                                                id="toc_r" 
                                                name="toc_r"
                                                type="text" 
                                                class="form-control bg-light TOC_R"
                                                required="true"
                                                value="0"
                                                readonly>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3"></td>
                                        <td class="p-1" style="width: 15%">
                                            Total
                                        </td>
                                        <td class="p-0" style="width: 20%">
                                            <input 
                                                id="totalTotal" 
                                                name="total"
                                                type="text" 
                                                class="form-control bg-light"
                                                value="0"
                                                readonly>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        <div class="col-lg-12">
                            <div class="hstack gap-2 justify-content-end">
                                <a href="{{ route('quots') }}" class="btn btn-light">Regresar</a>
                                <button type="submit" class="btn btn-primary">Guardar</button>
                            </div>
                        </div><!--end col-->
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection


@section('script')

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="{{ URL::asset('build/js/app.js') }}"></script>
<script>
    
    // Constants
    const precios = @json($aproducts);
    const moneda = @json(config('app.modeda_local'));
    const impuestos_traslado = @json($impuestos_traslado);
    const impuestos_retencion = @json($impuestos_retencion);

    // *** Listeners

    // Función para obtener el valor de una cookie por su nombre
    function getCookie(name) {
        const value = "; " + document.cookie;
        const parts = value.split("; " + name + "=");
        if (parts.length === 2) return parts.pop().split(";").shift();
    }

    // Agrega una nueva fila a la tabla de productos y servicios
    document.addEventListener("DOMContentLoaded", function () {
        agregarFila = document.getElementById("aRow");
        agregarFila.addEventListener('click', function() {
            const template = document.getElementById("trow");
            const clone = template.content.cloneNode(true);
            
            clone.querySelectorAll("input").forEach(input => input.value = "");
            clone.querySelectorAll("select").forEach(select => select.selectedIndex = 0);
            
            const tbody = document.getElementById("t-body");
            tbody.appendChild(clone);

            // Reinicializar Choices
            tbody.querySelectorAll("select[data-choices]:not(.choices__input)").forEach(el => {
                new Choices(el, {
                    shouldSort: false
                });
                el.classList.add("choices-initialized");
            }); 
        });
    });
    
    // Cualquier cambio en los componentes del front pasa por este Listener
    document.addEventListener("change", e => {
        
        // Selección de un producto
        if (e.target.classList.contains("Producto")) {
            let row = e.target.closest("tr");
            let precio = precios[e.target.value] || 0;
            let tIt=0;
            let tIr=0;
            row.querySelector(".Precio").value = precio;
            Array.from(impuestos_traslado[e.target.value]).map(rowt => {
                tIt += parseFloat(rowt['toc']) || 0;
            })
            row.querySelector(".tIt").value = tIt;
            Array.from(impuestos_retencion[e.target.value]).map(rowr => {
                tIr += parseFloat(rowr['toc']) || 0;
            })
            row.querySelector(".tIr").value = tIr;
        }

        // Selección de la moneda
        if (e.target.classList.contains("MonedaInputSelect")) {
            const moneda_def = e.target.value;
            if (moneda_def != moneda) {
                document.getElementById('tipo_cambioInput').disabled=false;
            } else{
                document.getElementById('tipo_cambioInput').disabled=true;
            }
        }

        // Selección de un cliente
        if (e.target.id=='clientIdForm') {
            const idClient = e.target.value;
            /* ================================
                SANCTUM
            ================================== */
            fetch('/sanctum/csrf-cookie', {
                method: 'GET',
                credentials: 'include'
            }).then(()=>{
                llenaCliente(idClient)
            });
            function llenaCliente(idClient){
                if (!idClient) {
                    document.getElementById('nombre_receptorInput').value='';
                    document.getElementById('RFCInputR').value='';
                    document.getElementById('CPInputR').value='';
                    document.getElementById('firstSelectInput').value='';
                    const usoCfdi = document.getElementById('UsoCfdiForm');
                    usoCfdi.value='';
                    usoCfdi.disabled=true;
                    return;
                }
                // Obtener el token CSRF
                const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                // Obtener el token XSRF-TOKEN
                const xsrfToken = getCookie('XSRF-TOKEN');
                // Hacer la petición AJAX
                fetch(`/api/leercliente/${idClient}`, {
                    method: 'GET',
                    credentials: 'include',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': csrfToken,
                        'X-XSRF-TOKEN': decodeURIComponent(xsrfToken)
                    },
                }).then(response => {
                    if (!response.ok) {                
                        throw new Error(`HTTP error ${response.status}`);
                    }
                    return response.json();
                }).then(data => {
                    document.getElementById('nombre_receptorInput').value=data.razon_social;
                    document.getElementById('RFCInputR').value=data.rfc;
                    document.getElementById('CPInputR').value=data.codigo_postal;
                    document.getElementById('firstSelectInput').value=data.regimen_fiscal;
                    const usoCfdi = document.getElementById('UsoCfdiForm');
                    usoCfdi.value=data.uso_cfdi;
                    usoCfdi.disabled=false;
                }).catch(error => {
                    console.error('Error:', error);
                });
            }
        }

    });

    function calcular() {

        let subtotal = 0;
        let totalDescuento = 0;
        let totalGeneral = 0;
        let tTraslado = 0;
        let tRetencion = 0;

        document.querySelectorAll("#tProServCotiza tbody tr").forEach(row => {

            let cantidad = parseFloat(row.querySelector(".Cantidad").value) || 0;
            let precio = parseFloat(row.querySelector(".Precio").value) || 0;
            let descuento = parseFloat(row.querySelector(".Descuento").value) || 0;
            let total = (cantidad * precio) - descuento;
            // impuestos
            let traslado =  parseFloat(row.querySelector(".tIt").value) || 0;
            let retencion = parseFloat(row.querySelector(".tIr").value) || 0;
            tTraslado += total * traslado;
            tRetencion += total * retencion; 
            row.querySelector(".Total").value = total.toFixed(2);
            subtotal += cantidad * precio;
            totalDescuento += descuento;
            totalGeneral += total;
        });

        document.getElementById("subtotal").value = subtotal.toFixed(2);
        document.getElementById("totalDescuento").value = totalDescuento.toFixed(2);
        document.getElementById("totalGeneral").value = totalGeneral.toFixed(2);
        document.getElementById("toc_t").value = tTraslado.toFixed(2);
        document.getElementById("toc_r").value = tRetencion.toFixed(2);

        let totalTotal = totalGeneral + tTraslado - tRetencion;
        document.getElementById("totalTotal").value = totalTotal.toFixed(2);
    }
    
    // Cualquier cambio en cantidad o descuento dispara el cálculo de totales
    document.addEventListener("input", function(e) {
        if (
            e.target.classList.contains("Cantidad") ||
            e.target.classList.contains("Descuento")
        ) {
            calcular();
        }
    });

    // * * * *

    // *** Llena el modal con la tasaOcuota
    function sanctum(urlt, row, impuestoSelect, tipoFactorId, tasaOCuotaSelect, ttInput) {
        /* ================================
                SANCTUM
        ================================== */
        fetch('/sanctum/csrf-cookie', {
            method: 'GET',
            credentials: 'include'
        }).then(()=>{
            llenarTasaOCuota(urlt, row, impuestoSelect, tipoFactorId, tasaOCuotaSelect, ttInput);
        });

        function llenarTasaOCuota(urlt, row, impuestoSelect, tipoFactorId, tasaOCuotaSelect, ttInput){
            const impuesto = impuestoSelect.value;
            tasaOCuotaSelect.innerHTML='<option value="">Elige tasa o cuota</option>'
            if (!tipoFactorId) {
                tasaOCuotaSelect.disabled = true;
                return;
            }
            // Parche necesario para evitar que el required nos bote
            if (tipoFactorId=='Exento') {
                tasaOCuotaSelect.disabled = false;
                tasaOCuotaSelect.innerHTML = '<option value="0">No Aplica</option>';
                ttInput.style.display = 'none';
                row.dataset.ctrl = 0;
                tasaOCuotaSelect.style.display = 'block';
                return;
            }
            // Mostrar indicador de carga
            tasaOCuotaSelect.disabled = true;
            tasaOCuotaSelect.innerHTML = '<option value="">Cargando...</option>';

            // Obtener el token CSRF
            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            // Obtener el token XSRF-TOKEN
            const xsrfToken = getCookie('XSRF-TOKEN');
            // Hacer la petición AJAX
            fetch(`/api/${urlt}/${tipoFactorId}/${impuesto}`, {
                method: 'GET',
                credentials: 'include',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrfToken,
                    'X-XSRF-TOKEN': decodeURIComponent(xsrfToken)
                },
            }).then(response => {
                if (!response.ok) {                            
                    throw new Error(`HTTP error ${response.status}`);
                }
                return response.json();
            }).then(data => {
                if (data.length == 1) {
                    tasaOCuotaSelect.style.display = 'none';
                    ttInput.placeholder = "Ingresa hasta " + data[0].valor_maximo;
                    ttInput.style.display = 'block';
                    row.dataset.ctrl = 1; // Input visible
                } else {
                    if (tInput) {
                        ttInput.style.display = 'none';
                        row.dataset.ctrl = 0; // Input no visible
                        tasaOCuotaSelect.style.display = 'block';
                    }
                    if (data.length > 0) {
                        tasaOCuotaSelect.innerHTML = '<option value="">Tasa o Cuota</option>';
                        data.forEach(tasa => {
                            const option = document.createElement('option');
                            option.value = tasa.valor_maximo;
                            option.textContent = tasa.valor_maximo;
                            tasaOCuotaSelect.appendChild(option);
                        });
                        tasaOCuotaSelect.disabled = false;
                    }else {
                        tasaOCuotaSelect.innerHTML = '<option value="">Sin tasa o cuota</option>';
                    }
                }
            }).catch(error => {
                console.error('Error:', error);
                tasaOCuotaSelect.innerHTML = '<option value="">Error al cargar :( </option>';
                tasaOCuotaSelect.disabled = true;
            });
        }

    }

</script>
@endsection