@extends('layouts.master')
@section('title') @lang('translation.clients') @endsection
@section('csrf')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection
@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')
<style>
    /* Estilos del spinner (puedes personalizarlo) */
    .spinner {
        width: 50px;
        height: 50px;
        border: 5px solid #f3f3f3;
        border-top: 5px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>

@component('components.breadcrumb')
@slot('li_1')Productos y Servicios @endslot
@slot('title'){{ $product->nombre }} @endslot
@endcomponent

<div id="page-loader" style="
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease;
">
    <div class="spinner"></div>
</div>

@if(session('success'))
<div class="row">
    <div class="col-lg-12">
        <div class="alert alert-success alert-dismissible fade show">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    </div>
</div>
@endif

<template id="irow-t">
    <div class="row p-1" data-ctrl="0">
        <div class="col-4">
            <div>
                <select 
                    name="impuesto_traslado[]" 
                    class="form-select form-select-tf impuestoTrasladado" 
                    aria-label=".form-select-tf">
                    <option value="" selected>Elige impuesto</option>
                    <option value="002">IVA</option>
                    <option value="003">IEPS</option>
                </select>
            </div>
        </div><!--end col-->
        <div class="col-4">
            <div>
                <select 
                    name="tipo_factor_traslado[]"
                    class="form-select form-select-tf tipoFactorTraslado" 
                    aria-label=".form-select-tf"
                    disabled="true">
                    <option value="" selected>Elige factor</option>
                    <option value="Tasa">Tasa</option>
                    <option value="Cuota">Cuota</option>
                    <option value="Exento">Exento</option>
                </select>
            </div>
        </div><!--end col-->
        <div class="col-4">
            <div>
                <select 
                    class="form-control tasaOCuotaTraslado"
                    name="tasa_o_cuota_traslado_s[]"
                    disabled="true">
                    <option value="">Elige tasa o cuota</option>
                </select>
                <input
                    style="display:none"
                    type="text" 
                    class="form-control tasaOcuotaTrasladoIn" 
                    name="tasa_o_cuota_traslado_i[]" 
                    placeholder="Porcentaje de la cuota"
                    value="">
            </div>
        </div><!--end col-->
    </div>
</template>

<template id="irow-r">
    <div class="row p-1" data-ctrl="0">
        <div class="col-4">
            <div>
                <select 
                    name="impuesto_retencion[]"
                    class="form-select form-select-tf impuestoRetencion" 
                    aria-label=".form-select-tf">
                    <option value="" selected>Elige impuesto</option>
                    <option value="001">ISR</option>
                    <option value="002">IVA</option>
                    <option value="003">IEPS</option>
                </select>
            </div>
        </div><!--end col-->
        <div class="col-4">
            <div>
                <select 
                    name="tipo_factor_retencion[]"
                    class="form-select form-select-tf tipoFactorRetencion" 
                    aria-label=".form-select-tf"
                    disabled="true">
                    <option value="" selected>Elige factor</option>
                    <option value="Tasa">Tasa</option>
                    <option value="Cuota">Cuota</option>
                    <option value="Exento">Exento</option>
                </select>
            </div>
        </div><!--end col-->
        <div class="col-4">
            <div>
                <select 
                    class="form-control tasaOcuotaRetencion" 
                    name="tasa_o_cuota_retencion_s[]"
                    disabled="true">
                    <option value="">Elige tasa o cuota</option>
                </select>
                <input
                    style="display:none"
                    type="text" 
                    class="form-control tasaOcuotaRetencionIn" 
                    name="tasa_o_cuota_retencion_i[]" 
                    placeholder="Porcentaje de la Cuota"
                    value="">
            </div>
        </div><!--end col-->    
    </div>
</template>

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Edición del Producto o Servicio</h5>
            </div>
            <div class="card-body">
                <form role="form" method="post" action="{{ route('products.update') }}">
                    @csrf
                    <input type="hidden" name="id" value="{{ $product->id }}">
                    <input type="hidden" name="user_id" value="{{ auth()->id() }}">
                    <div class="row g-3">
                        <div class="col-4">
                            <div>
                                <label for="tipoInput" class="form-label">Tipo</label>
                                <select 
                                    class="form-select form-select-tf" 
                                    aria-label=".form-select-tf"
                                    name="tipo"
                                    id="tipoInput"
                                    required="true">
                                    <option value="">Elige el tipo</option>
                                    <option 
                                        value="Producto"
                                        {{ old('tipo') == 'Producto' ? 'selected' : ($product->tipo=='Producto'? 'selected':'') }}>
                                        Producto</option>
                                    <option 
                                        value="Servicio"
                                        {{ old('tipo') == 'Servicio' ? 'selected' : ($product->tipo=='Servicio'? 'selected':'') }}>
                                        Servicio</option>
                                </select>
                            </div>
                        </div><!--end col-->
                        <div class="col-4">
                            <div>
                                <label for="estatusInput" class="form-label">Estatus</label>
                                <select 
                                    class="form-select form-select-tf" 
                                    aria-label=".form-select-tf"
                                    name="estatus"
                                    id="estatusInput"
                                    required="true">
                                    <option value="">Estatus</option>
                                    <option 
                                        value="Cancelado"
                                        {{ old('estatus') == 'Cancelado' ? 'selected' : ($product->estatus=='Cancelado'? 'selected':'') }}>
                                        Cancelado</option>
                                    <option 
                                        value="Edición"
                                        {{ old('estatus') == 'Edición' ? 'selected' : ($product->estatus=='Edición'? 'selected':'') }}>
                                        Edición</option>
                                    <option 
                                        value="Visible"
                                        {{ old('estatus') == 'Visible' ? 'selected' : ($product->estatus=='Visible'? 'selected':'') }}>
                                        Visible</option>
                                </select>
                            </div>
                        </div><!--end col-->
                        <div class="col-4">
                            <label for="skuInput" class="form-label">SKU o Código Interno</label>
                            <input 
                                type="tel" 
                                class="form-control" 
                                id="skuInput"
                                name="codigo" 
                                placeholder="ingresa el sku o código"
                                value="{{ old('codigo', $product->codigo) }}">
                        </div><!--end col-->
                        <div class="col-xxl-12">
                            <div>
                                <label for="nombreInput" class="form-label">Nombre</label>
                                <input 
                                    type="text" 
                                    class="form-control" 
                                    id="nombreInput" 
                                    name="nombre"
                                    placeholder="ingresa el nombre"
                                    required="true"
                                    value="{{ old('nombre', $product->nombre) }}">
                            </div>
                        </div><!--end col-->
                        
                        <div class="col-xxl-8 col-lg-8 col-sm-8">
                            <div>
                                <label for="clave_prod_serv" class="form-label">Clave del producto/servicio</label>
                                <select 
                                    class="form-control" 
                                    id="clave_prod_serv" 
                                    name="clave_prod_serv" 
                                    data-choices data-choices-sorting-false>
                                    <option value="">Clave</option>
                                    @foreach ($prodsServs as $c_ClaveProdServ => $descripcion)
                                    <option 
                                        value="{{ $c_ClaveProdServ }}"
                                        {{ old('clave_prod_serv') == $c_ClaveProdServ ? ' selected' : (($product->clave_prod_serv==$c_ClaveProdServ)?' selected':'') }}>
                                        {{$descripcion }}({{ $c_ClaveProdServ}})
                                    </option>    
                                    @endforeach
                                </select>
                            </div>
                        </div><!--end col-->
                        <div class="col-xxl-4 col-lg-4 col-sm-4">
                            <label for="precioInput" class="form-label">Precio unitario</label>
                            <input 
                                type="text" 
                                class="form-control" 
                                id="precioInput"
                                name="precio_unitario" 
                                placeholder="ingresa precio unitario"
                                value="{{ old('precio_unitario', $product->precio_unitario) }}">
                        </div><!--end col-->
                        <div class="col-xxl-12">
                            <div>
                                <label for="descInput" class="form-label">Descripción</label>
                                <textarea 
                                    type="text" 
                                    class="form-control" 
                                    id="descInput" 
                                    name="descripcion"
                                    placeholder="ingresa la descripción"
                                    required="true">{{ old('descripcion', $product->descripcion) }}</textarea>
                            </div>
                        </div><!--end col-->
                        <div class="col-lg-4 col-sm-4 col-xxl-4">
                            <div>
                                <label for="clave_unidad" class="form-label">Clave de la unidad</label>
                                <select 
                                    class="form-control" 
                                    id="clave_unidad" 
                                    name="clave_unidad" 
                                    data-choices data-choices-sorting-false>
                                    <option value="">Clave</option>
                                    @foreach ($claveUnidades as $c_ClaveUnidad => $nombre)
                                    <option 
                                        value="{{ $c_ClaveUnidad }}"
                                        {{ old('clave_unidad') == $c_ClaveUnidad ? ' selected' : (($product->clave_unidad==$c_ClaveUnidad)?' selected':'') }}>
                                        {{$nombre }}({{ $c_ClaveUnidad}})
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div><!--end col-->
                        <div class="col-lg-4 col-sm-4 col-xxl-4">
                            <label for="unidadInput" class="form-label">Unidad de medida (opcional)</label>
                            <input 
                                type="text" 
                                class="form-control" 
                                id="unidadInput"
                                name="unidad_medida" 
                                placeholder="Unidad de medica"
                                value="{{ old('unidad_medida', $product->unidad_medida) }}">
                        </div><!--end col-->
                        <div class="col-lg-4 col-sm-4 col-xxl-4">
                            <div>
                                <label for="objeto_imp" class="form-label">Objeto del impuesto</label>
                                <select 
                                    class="form-control" 
                                    id="objeto_imp" 
                                    name="objeto_imp" 
                                    data-choices data-choices-sorting-false>
                                    <option value="">Objeto</option>
                                    @foreach ($objImpuesto as $c_ObjetoImp => $descripcion)
                                    <option 
                                        value="{{ $c_ObjetoImp }}"
                                        {{ old('objeto_imp') == $c_ObjetoImp ? ' selected' : (($product->objeto_imp==$c_ObjetoImp)?' selected':'') }}>
                                        {{ $c_ObjetoImp}} - {{$descripcion }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div><!--end col-->
                        <div class="col-xxl-6">
                            <label for="cuentaPredial" class="form-label">Cuenta Predial (opcional)</label>
                            <input 
                                type="text" 
                                class="form-control" 
                                id="cuentaPredial" 
                                name="cuenta_predial" 
                                placeholder="ingresa la unidad de medica"
                                value="{{ old('cuenta_predial', $product->cuenta_predial) }}">
                        </div><!--end col-->
                        <div>
                            <h5 class="col-6 fs-16 align-middle mt-2 mb-0">Impuestos Federales</h5>
                        </div>
                        <div class="row mt-2 mb-2 align-items-center g-3">
                            <h5 class="col-6 fs-16 align-middle mt-2 mb-0">Translado</h5>
                            <div class="col-6 d-flex mt-1 justify-content-sm-end">
                                <button id="aRowT" type="button" class="btn btn-primary btn-sm">
                                    <i class="ri-add-fill align-middle"></i> Impuesto
                                </button>
                            </div>
                        </div>
                        <div class="mt-0" id="impTraslado">
                            @foreach ($impuestos_traslado as $traslado)
                            <div class="row p-1" data-ctrl="{{$traslado['ctrl']}}">
                                <div class="col-4">
                                    <div>
                                        <label for="impuestoTrasladado" class="form-label">Impuesto</label>
                                        <select 
                                            class="form-select form-select-tf impuestoTrasladado"
                                            name="impuesto_traslado[]" 
                                            aria-label=".form-select-tf">
                                            <option value="">Elige el impuesto</option>
                                            <option 
                                                value="002"
                                                {{ old('impuesto_traslado[]') == '002' ? 'selected' : ($traslado['impuesto']=='002'? 'selected':'') }}>
                                                IVA</option>
                                            <option 
                                                value="003"
                                                {{ old('impuesto_traslado[]') == '003' ? 'selected' : ($traslado['impuesto']=='003'? 'selected':'') }}>
                                                IEPS</option>
                                        </select>
                                    </div>
                                </div><!--end col-->
                                <div class="col-4">
                                    <div>
                                        <label for="tipoFactorTraslado" class="form-label">Tipo Factor</label>
                                        <select 
                                            class="form-select form-select-tf tipoFactorTraslado" 
                                            name="tipo_factor_traslado[]"
                                            @if ($traslado['impuesto']=='')
                                            disabled="true"
                                            @endif
                                            aria-label=".form-select-tf">
                                            <option selected>Elige el factor</option>
                                            <option 
                                                value="Tasa"
                                                {{ old('tipo_factor_traslado[]') == 'Tasa' ? 'selected' : ($traslado['factor']=='Tasa'? 'selected':'') }}>
                                                Tasa</option>
                                            <option 
                                                value="Cuota"
                                                {{ old('tipo_factor_traslado[]') == 'Cuota' ? 'selected' : ($traslado['factor']=='Cuota'? 'selected':'') }}>
                                                Cuota</option>
                                            <option 
                                                value="Exento"
                                                {{ old('tipo_factor_traslado[]') == 'Exento' ? 'selected' : ($traslado['factor']=='Exento'? 'selected':'') }}>
                                                Exento</option>
                                        </select>
                                    </div>
                                </div><!--end col-->
                                <div class="col-4">
                                    <div>
                                        <label for="tasaOCuota" class="form-label">Tasa o Cuota</label>
                                        <input
                                            type="text" 
                                            @if ($traslado['ctrl']=='0')
                                            style="display:none"
                                            @endif
                                            class="form-control tasaOcuotaTrasladoIn" 
                                            name="tasa_o_cuota_traslado_i[]" 
                                            placeholder="Porcentaje de la cuota"
                                            value="{{ old('tasa_o_cuota_traslado_i[]',$traslado['toc']) }}">
                                        <select
                                            @if ($traslado['ctrl']=='1')
                                            style="display:none"
                                            @endif
                                            @if ($traslado['factor']=='')
                                            disabled="true"
                                            @endif
                                            class="form-select form-select-tf tasaOCuotaTraslado" 
                                            name="tasa_o_cuota_traslado_s[]"
                                            aria-label=".form-select-tf">
                                            @if ($traslado['toc']=='0')
                                            <option value="0">Sin tasa o cuota</option>    
                                            @else
                                            <option value="">Elige tasa o cuota</option>
                                            @foreach ($tasaOCuotasT as $valores)
                                            @foreach ($valores as $vmaximo=>$v_maximo)
                                            <option 
                                                value="{{ $vmaximo }}"
                                                {{ ($traslado['toc']==$vmaximo)?' selected':'' }}>
                                                {{ $v_maximo }}
                                            </option>
                                            @endforeach
                                            @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div><!--end col-->
                            </div>    
                            @endforeach
                        </div>
                        <div class="row mt-2 mb-2 align-items-center g-3">
                            <h5 class="col-6 fs-16 align-middle mt-2 mb-0">Retenciones</h5>
                            <div class="col-6 d-flex mt-1 justify-content-sm-end">
                                <button id="aRowR" type="button" class="btn btn-primary btn-sm">
                                    <i class="ri-add-fill align-middle"></i> Impuesto
                                </button>
                            </div>
                        </div>
                        <div class="mt-0" id="impRetencion">
                            @foreach ($impuestos_retencion as $retencion)
                            <div class="row p-1" data-ctrl="0">
                                <div class="col-4">
                                    <div>
                                        <label for="impuestoRetencion" class="form-label">Impuesto</label>
                                        <select 
                                            class="form-select form-select-tf impuestoRetencion" 
                                            name="impuesto_retencion[]" 
                                            aria-label=".form-select-tf">
                                            <option value="">Elige el impuesto</option>
                                            <option 
                                                value="001"
                                                {{ old('impuesto_retencion[]') == '001' ? 'selected' : ($retencion['impuesto']=='001'? 'selected':'') }}>
                                                ISR</option>
                                            <option 
                                                value="002"
                                                {{ old('impuesto_retencion[]') == '002' ? 'selected' : ($retencion['impuesto']=='002'? 'selected':'') }}>
                                                IVA</option>
                                            <option 
                                                value="003"
                                                {{ old('impuesto_retencion[]') == '003' ? 'selected' : ($retencion['impuesto']=='003'? 'selected':'') }}>
                                                IEPS</option>
                                        </select>
                                    </div>
                                </div><!--end col-->
                                <div class="col-4">
                                    <div>
                                        <label for="tipoFactorRetencion" class="form-label">Tipo Factor</label>
                                        <select
                                            name="tipo_factor_retencion[]"
                                            class="form-select form-select-tf tipoFactorRetencion" 
                                            @if ($retencion['impuesto']=='')
                                            disabled="true"
                                            @endif
                                            aria-label=".form-select-tf">
                                            <option value="">Elige el factor</option>
                                            <option 
                                                value="Tasa"
                                                {{ old('tipo_factor_retencion[]') == 'Tasa' ? 'selected' : ($retencion['factor']=='Tasa'? 'selected':'') }}>
                                                Tasa</option>
                                            <option 
                                                value="Cuota"
                                                {{ old('tipo_factor_retencion[]') == 'Cuota' ? 'selected' : ($retencion['factor']=='Cuota'? 'selected':'') }}>
                                                Cuota</option>
                                            <option 
                                                value="Exento"
                                                {{ old('tipo_factor_retencion[]') == 'Exento' ? 'selected' : ($retencion['factor']=='Exento'? 'selected':'') }}>
                                                Exento</option>
                                        </select>
                                    </div>
                                </div><!--end col-->
                                <div class="col-4">
                                    <div>
                                        <label for="tasaOcuotaRetencion" class="form-label">Tasa o Cuota</label>                                        
                                        <input
                                            @if ($retencion['ctrl']=='0')
                                            style="display:none"
                                            @endif
                                            type="text" 
                                            class="form-control tasaOcuotaRetencionIn" 
                                            name="tasa_o_cuota_retencion_i[]"
                                            placeholder="Especifica el porcentaje"
                                            value="{{ old('tasa_o_cuota_retencion_i[]',$retencion['toc']) }}">
                                        <select
                                            @if ($retencion['ctrl']=='1')
                                            style="display:none"
                                            @endif
                                            @if ($retencion['factor']=='')
                                            disabled="true"
                                            @endif
                                            class="form-select form-select-tf tasaOcuotaRetencion" 
                                            name="tasa_o_cuota_retencion_s[]">
                                            @if ($retencion['toc']=='0')
                                            <option value="0">Sin tasa o cuota</option>    
                                            @else
                                            <option value="">Elige tasa o cuota</option>
                                            @foreach ($tasaOCuotasR as $valores)
                                            @foreach ($valores as $vmaximo => $vmaximo)
                                            <option 
                                                value="{{ $vmaximo }}"
                                                {{ ($retencion['toc']==$vmaximo)?' selected':'' }}>
                                                {{ $v_maximo }}
                                            </option>
                                            @endforeach
                                            @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div><!--end col-->   
                            </div>                            
                            @endforeach
                        </div>                            
                        <div class="col-lg-12">
                            <div class="hstack gap-2 justify-content-end">
                                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </div><!--end col-->
                    </div><!--end row-->
                </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>
    // Oculta el loader cuando la página y todos sus recursos (imágenes, etc.) estén cargados
    window.addEventListener('load', function() {
        const loader = document.getElementById('page-loader');
        if (loader) {
            // Opcional: fade out y luego eliminar del DOM
            loader.style.opacity = '0';
            setTimeout(() => {
                loader.style.display = 'none';
            }, 300);
        }
    });

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

    // *** Añadir filas a la sección de impuestos
    document.addEventListener('DOMContentLoaded', function() {
 
        agregarFilaIt = document.getElementById("aRowT");
        agregarFilaIt.addEventListener('click', function() {
            const templateIt = document.getElementById("irow-t");
            const cloneIt = templateIt.content.cloneNode(true);            
            const tbodyIt = document.getElementById("impTraslado");
            tbodyIt.appendChild(cloneIt);
        });

        agregarFilaIr = document.getElementById("aRowR");
        agregarFilaIr.addEventListener('click', function() {
            const templateIr = document.getElementById("irow-r");
            const cloneIr = templateIr.content.cloneNode(true);
            const tbodyIr = document.getElementById("impRetencion");
            tbodyIr.appendChild(cloneIr);
        });

    });

    /*
    Cualquier cambio en los componentes del fron pasa por este Listener
    */
    document.addEventListener("change", e => {
    
        // 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 = 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 (Retención) y el input [tasa retencion] se oculta y se despliega el select 
            factorSelect.selectedIndex = 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);
        }

    });

    // *** 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">Sin tasa o cuota</option>';
                ttInput.style.display = 'none';
                ttInput.value = '';
                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 (row.dataset.ctrl == 1) {
                        ttInput.style.display = 'none';
                        ttInput.value = '';
                        row.dataset.ctrl = 0; // Input no visible
                        tasaOCuotaSelect.style.display = 'block';
                    }
                    if (data.length > 0) {
                        tasaOCuotaSelect.innerHTML = '<option value="">Elige 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 {
                        ttInput.style.display = 'none';
                        ttInput.value = '';
                        row.dataset.ctrl = 0; // Input no visible
                        tasaOCuotaSelect.style.display = 'block';
                        tasaOCuotaSelect.innerHTML = '<option value="0">Sin tasa o cuota</option>';
                    }
                }
            }).catch(error => {
                console.error('Error:', error);
                ttInput.style.display = 'none';
                ttInput.value = '';
                row.dataset.ctrl = 0; // Input no visible
                tasaOCuotaSelect.style.display = 'block';
                tasaOCuotaSelect.innerHTML = '<option value="">Error al cargar :( </option>';
                tasaOCuotaSelect.disabled = true;
            });
        }

    }

</script>
@endsection