@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')Nuevo Producto o Servicio @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>

<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">Nuevo Producto o Servicio</h5>
            </div>
            <div class="card-body">
                <form role="form" method="post" action="{{ route('products.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-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="" selected>Elige el tipo</option>
                                    <option 
                                        value="Producto"
                                        {{(old('tipo')=='Producto')?'selected':''}}>
                                        Producto
                                    </option>
                                    <option 
                                        value="Servicio"
                                        {{(old('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="" selected>Estatus</option>
                                    <option 
                                        value="Cancelado"
                                        {{(old('estatus')=='Cancelado')?'selected':''}}>
                                        Cancelado
                                    </option>
                                    <option 
                                        value="Edición"
                                        {{(old('estatus')=='Edición')?'selected':''}}>
                                        Edición
                                    </option>
                                    <option 
                                        value="Visible"
                                        {{(old('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"
                                required="true"
                                name="codigo" 
                                placeholder="ingresa el sku o código"
                                value="{{ old('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') }}">
                            </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-select" 
                                    id="clave_prod_serv"
                                    required="true" 
                                    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':''}}>
                                        {{$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"
                                required="true"
                                name="precio_unitario" 
                                placeholder="ingresa precio unitario"
                                value="{{ old('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')}}</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-select" 
                                    id="clave_unidad"
                                    required="true" 
                                    name="clave_unidad" 
                                    data-choices data-choices-sorting-false>
                                    <option value="">Elige la clave</option>
                                    @foreach ($claveUnidades as $c_ClaveUnidad => $nombre)
                                    <option 
                                        value="{{ $c_ClaveUnidad }}"
                                        {{(old('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') }}">
                        </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-select" 
                                    id="objeto_imp"
                                    required="true" 
                                    name="objeto_imp" 
                                    data-choices data-choices-sorting-false>
                                    <option value="">Selecciona...</option>
                                    @foreach ($objImpuesto as $c_ObjetoImp => $descripcion)
                                    <option 
                                        value="{{ $c_ObjetoImp }}"
                                        {{(old('objeto_imp')==$c_ObjetoImp)?'selected':''}}>
                                        {{$descripcion }}({{ $c_ObjetoImp}})
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div><!--end col-->
                        <div class="col-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') }}">
                        </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 id="impTraslado">
                            <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 
                                            class="form-select form-select-tf tipoFactorTraslado" 
                                            aria-label=".form-select-tf"
                                            name="tipo_factor_traslado[]"
                                            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-select form-select-tf 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>
                        </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 id="impRetencion">
                            <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>
                        </div>
                        <div class="col-lg-12">
                            <div class="hstack gap-2 justify-content-end">
                                <a href="{{ route('products') }}" class="btn btn-light">Regresar</a>
                                <button type="submit" class="btn btn-primary">Guardar</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';
                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>';
                        tasaOCuotaSelect.disabled = true;
                    }
                }
            }).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