@extends('layouts.master')
@section('title') @lang('translation.clients') @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 data-index="">
        <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 class="ci-input" type="hidden" name="ci[]" value=""/>
        </td>
        <td>
            <a 
                class="btn btn-danger btn-sm DeleteBtn p-1" 
                onclick="this.closest('tr').remove()">
                <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('quots.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="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="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="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="edicion">Edición</option>
                                    <option value="terminada">Terminada</option>
                                </select>
                            </div>
                        </div><!--end col-->
                        <div class="col-lg-12">
                            <div class="row">
                                <div class="col-lg-4">
                                    <div>
                                        <label for="textInputDate1" class="form-label">Fecha Emisión</label>
                                        <input 
                                            name="fecha_expiracion"
                                            type="date" 
                                            class="form-control" 
                                            id="textInputDate1">
                                    </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="">
                                    </div>
                                </div><!--end col-->
                            </div>
                        </div>
                        <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 data-index="1">
                                        <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 class="ci-input concepto-impuestos-1" type="hidden" name="ci[]" value=""/>
                                        </td>
                                        <td>
                                            <a 
                                                class="btn btn-danger btn-sm DeleteBtn p-1" 
                                                onclick="this.closest('tr').remove()">
                                                <i class="ri-close-line"></i>
                                            </a>
                                        </td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="3"></td>
                                        <td class="p-0">
                                            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-0" 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-0" 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-0" style="width: 15%">
                                            Traslado
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td colspan="3"></td>
                                        <td class="p-1 text-end mr-1" style="width: 15%">
                                            IVA
                                        </td>
                                        <td class="p-0 text-end" style="width: 20%">
                                            <input 
                                                id="TOTAL_T_IVA" 
                                                name="total_tiva"
                                                type="text" 
                                                class="form-control bg-light"
                                                required="true"
                                                value="0"
                                                readonly>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3"></td>
                                        <td class="p-1 text-end" style="width: 15%">
                                            IEPS
                                        </td>
                                        <td class="p-0 text-end" style="width: 20%">
                                            <input 
                                                id="TOTAL_T_IEPS" 
                                                name="total_tieps"
                                                type="text" 
                                                class="form-control bg-light"
                                                required="true"
                                                value="0"
                                                readonly>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3"></td>
                                        <td class="p-0" style="width: 15%">
                                            Retención
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td colspan="3"></td>
                                        <td class="p-1 text-end" style="width: 15%">
                                            ISR
                                        </td>
                                        <td class="p-0 text-end" style="width: 20%">
                                            <input 
                                                id="TOTAL_R_ISR" 
                                                name="total_risr"
                                                type="text" 
                                                class="form-control bg-light"
                                                required="true"
                                                value="0"
                                                readonly>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3"></td>
                                        <td class="p-1 text-end" style="width: 15%">
                                            IVA
                                        </td>
                                        <td class="p-0 text-end" style="width: 20%">
                                            <input 
                                                id="TOTAL_R_IVA" 
                                                name="total_riva"
                                                type="text" 
                                                class="form-control bg-light"
                                                required="true"
                                                value="0"
                                                readonly>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3"></td>
                                        <td class="p-1 text-end" style="width: 15%">
                                            IEPS
                                        </td>
                                        <td class="p-0 text-end" style="width: 20%">
                                            <input 
                                                id="TOTAL_R_IEPS" 
                                                name="total_rieps"
                                                type="text" 
                                                class="form-control bg-light"
                                                required="true"
                                                value="0"
                                                readonly>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3"></td>
                                        <td class="p-0" 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 a_impuestos = @json($a_impuestos);
    const a_factor = @json($a_factor);
    const a_tasa_o_cuota = @json($a_tasa_o_cuota);
    const a_tasa_o_cuota_n = @json($a_tasa_o_cuota_n);

    // Variables
    iConceptos = 1;

    // Functions

    function getCookie(name) {
        const value = "; " + document.cookie;
        const parts = value.split("; " + name + "=");
        if (parts.length === 2) return parts.pop().split(";").shift();
    }

    document.addEventListener("DOMContentLoaded", function () {
        agregarFila = document.getElementById("aRow");
        agregarFila.addEventListener('click', function() {
            const template = document.getElementById("trow");
            const clone = template.content.cloneNode(true);
            iConceptos++;
            clone.querySelectorAll("input").forEach(input => input.value = "");
            clone.querySelectorAll("select").forEach(select => select.selectedIndex = 0);
            const tbody = document.getElementById("t-body");
            clone.lastElementChild.setAttribute('data-index',iConceptos);
            const cinput = clone.querySelector(".ci-input");
            cinput.classList.add('concepto-impuestos-'+iConceptos);
            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 fron 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;
            row.querySelector(".Precio").value = precio;
        }
        
        if(e.target.classList.contains("Cantidad")){
            /*
            procesar los impuestos
            */
            
        }

        // 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);
                });
            }
        }

        // Definición de los impuestos
        if (e.target.classList.contains("impuestoTrasladado")) {
            const row = e.target.closest(".row");
            const impuestoId = e.target.value;
            const factorSelect = row.querySelector(".tipoFactorTraslado");
            const tasaOCuotaSelect = row.querySelector(".tasaOCuotaTraslado");
            const ttInput = row.querySelector(".tasaOcuotaTrasladoIn");
            // Se deshabilita Tasa o Cuota (Traslado) y el input [tasa traslado] se oculta y se despliega el select 
            factorSelect.selectedIndex = tInput = 0;           
            ttInput.style.display = 'none'; 
            tasaOCuotaSelect.innerHTML='<option value="">Elige tasa o cuota</option>'
            tasaOCuotaSelect.disabled = true;            
            tasaOCuotaSelect.style.display = 'block';
            // Se mantiene activo o se desactiva Tipo Factor (Traslado)
            if (!impuestoId) {
                factorSelect.disabled = true;
                return;
            }
            factorSelect.disabled = false;
        }

        if (e.target.classList.contains("impuestoRetencion")) {
            const row = e.target.closest(".row");
            const impuestoId = e.target.value;
            const factorSelect = row.querySelector(".tipoFactorRetencion");
            const tasaOCuotaSelect = row.querySelector(".tasaOCuotaRetencion");
            const ttInput = row.querySelector(".tasaOcuotaRetencionIn");
            // Se deshabilita Tasa o Cuota (Traslado) y el input [tasa traslado] se oculta y se despliega el select 
            factorSelect.selectedIndex = tInput = 0;           
            ttInput.style.display = 'none'; 
            tasaOCuotaSelect.innerHTML='<option value="">Elige tasa o cuota</option>'
            tasaOCuotaSelect.disabled = true;            
            tasaOCuotaSelect.style.display = 'block';
            // Se mantiene activo o se desactiva Tipo Factor (Traslado)
            if (!impuestoId) {
                factorSelect.disabled = true;
                return;
            }
            factorSelect.disabled = false;
        }

        if (e.target.classList.contains("tipoFactorTraslado")) {
            const row = e.target.closest(".row");
            const impuestoSelect = row.querySelector(".impuestoTrasladado");
            const tipoFactorId = e.target.value;
            const tasaOCuotaSelect = row.querySelector(".tasaOCuotaTraslado");
            const ttInput = row.querySelector(".tasaOcuotaTrasladoIn");
            sanctum('tasaocuotat', row, impuestoSelect, tipoFactorId, tasaOCuotaSelect, ttInput);
        }

        if (e.target.classList.contains("tipoFactorRetencion")) {
            const row = e.target.closest(".row");
            const impuestoSelect = row.querySelector(".impuestoRetencion");
            const tipoFactorId = e.target.value;
            const tasaOCuotaSelect = row.querySelector(".tasaOCuotaRetencion");
            const ttInput = row.querySelector(".tasaOcuotaRetencionIn");
            sanctum('tasaocuotar', row, impuestoSelect, tipoFactorId, tasaOCuotaSelect, ttInput);
        }

        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;
            }
        }
    });

    function calcular() {

        let subtotal = 0;
        let totalDescuento = 0;
        let totalGeneral = 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;

            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.addEventListener("input", function(e) {
        if (
            e.target.classList.contains("Precio") ||
            e.target.classList.contains("Cantidad") ||
            e.target.classList.contains("Descuento")
        ) {
            calcular();
        }
    });

    document.addEventListener("click", e => {
        if (e.target.classList.contains("DeleteBtn")){
            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;
            });
        }

    }

    // *** Procesar impuestos
    function obtenerDatosImpuestos(crow) {
        var tt_iva = 0;
        var tt_ieps = 0;
        var tr_iva = 0;
        var tr_ieps = 0;
        var tr_isr = 0;

        const fila=document.querySelector(`tr[data-index="${crow}"]`);
        const total = fila.querySelector('.Total').value;
        const impuestos = {
        traslado: {},
        retencion: {}
        };

        // Función auxiliar para determinar el valor visible de tasa/cuota
        function obtenerValorTasaOCuota(contenedor) {
            const ctr = contenedor.getAttribute('data-ctrl');
            const select = contenedor.querySelector('.tasaOCuotaTraslado, .tasaOcuotaRetencion');
            const input = contenedor.querySelector('.tasaOcuotaTrasladoIn, .tasaOcuotaRetencionIn');
            
            if (ctr==1){ // == 1 : input
                return input.value;
            } else { // == 0 : Select
                return select.value;
            }
        }
        const iTotalTotal = document.getElementById('totalTotal');
        iTotalTotal.value = document.getElementById('totalGeneral').value;

        // Procesar Traslados
        const trasladosRows = document.querySelectorAll('#impTraslado .row');
        const impTraslado = Array.from(trasladosRows).map(row => {
            const impuestoSelect = row.querySelector('select[name="impuesto_trasladado"], .impuestoTrasladado');
            const factorSelect = row.querySelector('select[name="tipo_factor"], .tipoFactorTraslado');
            const tasaOCuota = obtenerValorTasaOCuota(row);
            const monto = total * tasaOCuota;
            
            let suma = parseFloat(document.getElementById('TOTAL_T_' + a_impuestos['traslado'][impuestoSelect.value]).value) + parseFloat(monto);
            document.getElementById('TOTAL_T_' + a_impuestos['traslado'][impuestoSelect.value]).value = suma;
            suma = parseFloat(iTotalTotal.value) + parseFloat(monto);
            iTotalTotal.value = suma;
            
            return {
                impuesto: impuestoSelect ? impuestoSelect.value : '',
                factor: factorSelect ? factorSelect.value : '',
                tasa_o_cuota: tasaOCuota,
                control: row.getAttribute('data-ctrl') || '',
                monto_impuesto: monto,
            };
        });

        // Procesar Retenciones
        const retencionesRows = document.querySelectorAll('#impRetencion .row');
        const impRetenciones = Array.from(retencionesRows).map(row => {
            const impuestoSelect = row.querySelector('select[name="impuesto_retenido"], .impuestoRetencion');
            const factorSelect = row.querySelector('select[name="tipo_factor_retencion"], .tipoFactorRetencion');
            const tasaOCuota = obtenerValorTasaOCuota(row);
            const monto = total * tasaOCuota;

            suma = parseFloat(document.getElementById('TOTAL_R_' + a_impuestos['retencion'][impuestoSelect.value]).value) + parseFloat(monto);
            document.getElementById('TOTAL_R_' + a_impuestos['retencion'][impuestoSelect.value]).value = suma;
            suma = parseFloat(iTotalTotal.value) - parseFloat(monto);
            iTotalTotal.value = suma;

            return {
                impuesto: impuestoSelect ? impuestoSelect.value : '',
                factor: factorSelect ? factorSelect.value : '',
                tasa_o_cuota: tasaOCuota,
                control: row.getAttribute('data-ctrl') || '',
                monto_impuesto: monto,
            };
        });

        return [impuestos,{
            impTraslado: impTraslado,
            impRetenciones: impRetenciones
        }];
    }

</script>
@endsection