{{-- Crear Orden de Compra de importación (rpo.create → rpo.store). Kit ui-ctc (MigracionLayout.MD, "Crear y editar Orden
     de Compra", parte 2). Solo cambia la presentación: mismos name, id, valores, opciones y orden de los campos del
     formulario, la misma rama por grupo empresarial y el mismo JavaScript (jQuery y select2 se cargan solo aquí). --}}
@php
    // Clases del kit para los controles que no pasan por x-input / x-select (tablas y listas armadas a mano).
    $cInput = 'form-input block w-full rounded-md text-[13px] shadow-sm border-[var(--borde-fuerte)] bg-[var(--superficie)] text-[var(--texto)] placeholder:text-[var(--texto-tenue)] focus:border-[var(--acento)] focus:ring-[var(--acento)] disabled:cursor-not-allowed disabled:bg-[var(--superficie-2)] disabled:text-[var(--texto-suave)]';
    $cSelect = 'form-select block w-full rounded-md text-[13px] shadow-sm border-[var(--borde-fuerte)] bg-[var(--superficie)] text-[var(--texto)] focus:border-[var(--acento)] focus:ring-[var(--acento)] disabled:cursor-not-allowed disabled:bg-[var(--superficie-2)] disabled:text-[var(--texto-suave)]';
    $cMultiple = 'form-multiselect block w-full rounded-md text-[13px] shadow-sm border-[var(--borde-fuerte)] bg-[var(--superficie)] text-[var(--texto)] focus:border-[var(--acento)] focus:ring-[var(--acento)]';
    // Celdas de tabla: más compactas; el ancho de cada columna sigue en style.
    $cCelda = 'form-input block w-full rounded-md px-2 py-1 text-[13px] shadow-sm border-[var(--borde-fuerte)] bg-[var(--superficie)] text-[var(--texto)] focus:border-[var(--acento)] focus:ring-[var(--acento)] read-only:bg-[var(--superficie-2)] read-only:text-[var(--texto-suave)]';
    $cCeldaSelect = 'form-select block w-full rounded-md py-1 pl-2 pr-8 text-[13px] shadow-sm border-[var(--borde-fuerte)] bg-[var(--superficie)] text-[var(--texto)] focus:border-[var(--acento)] focus:ring-[var(--acento)] disabled:cursor-not-allowed disabled:bg-[var(--superficie-2)] disabled:text-[var(--texto-suave)]';
    $cRejilla = 'grid gap-x-4 gap-y-3.5 [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))]';
    // Tabla con controles en las celdas: menos relleno que una tabla de lectura.
    $cTabla = 'ctc-tabla [&>tbody>tr>td]:!px-1.5 [&>tbody>tr>td]:!py-1.5 [&>thead>tr>th]:!px-2';
@endphp
<x-app-layout titulo="Nueva orden de compra">
    <x-pagina>
        <x-encabezado-pagina ruta="Importaciones · Orden de compra" titulo="Nueva orden de compra"
                             descripcion="Pedido de orden de compra: encabezado, factura, campos dinámicos y productos." />

        @if ($errors->any())
            <x-alerta tipo="error">
                <ul class="list-inside list-disc space-y-0.5">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </x-alerta>
        @endif

        <form method="post" action="{{ route('rpo.store') }}" class="space-y-5">
            @csrf

            {{-- Encabezado de la orden --}}
            <x-tarjeta titulo="Datos de la orden">
                <x-slot name="acciones">
                    <span class="flex items-center gap-2 text-[12px] text-[var(--texto-suave)]">
                        <x-icono nombre="arrow-path" id="loading_spinner1" style="display:none" class="h-4 w-4 animate-spin text-[var(--acento-texto)]" />
                        <span id="lblInfo"></span>
                    </span>
                </x-slot>

                <div class="{{ $cRejilla }}">
                    <x-campo etiqueta="Item" para="txtItem">
                        <x-input type="text" name="txtItem" id="txtItem" />
                    </x-campo>

                    <x-campo etiqueta="Po" para="txtPo">
                        <div class="flex items-center gap-1">
                            <x-input type="text" name="txtPo" id="txtPo" required />
                            <x-boton-icono etiqueta="Traer datos (Número Do, Documento Transporte, Incoterms, Factura, Numero Factura, Valor Factura, Medio transporte, proceso)" variante="acento" onclick="javascript:traerDatosDO(4)">
                                <x-icono nombre="arrow-path" class="h-[18px] w-[18px]" />
                            </x-boton-icono>
                        </div>
                    </x-campo>

                    <x-campo etiqueta="DO" para="txtDo">
                        <div class="flex items-center gap-1">
                            <x-input type="text" name="txtDo" id="txtDo" />
                            <x-boton-icono etiqueta="Traer datos (Documento Transporte, Incoterms, Factura, Numero Factura, Valor Factura)" variante="acento" onclick="traerDatosDO(1)">
                                <x-icono nombre="arrow-path" class="h-[18px] w-[18px]" />
                            </x-boton-icono>
                        </div>
                    </x-campo>

                    <x-campo etiqueta="Fecha Orden" para="txtFecha_po">
                        <x-input type="date" name="txtFecha_po" id="txtFecha_po" required />
                    </x-campo>

                    <x-campo etiqueta="Importador" para="cboCompania">
                        <x-select name="cboCompania" id="cboCompania" required>
                            @foreach($compani as $fil)
                                <option value="{{$fil->id}}">{{$fil->razon_social}}</option>
                            @endforeach
                        </x-select>
                    </x-campo>

                    <x-campo etiqueta="Proceso" para="cboProceso">
                        <x-select name="cboProceso" id="cboProceso">
                            <option value="0">Seleccione una Opcion</option>
                            @foreach($proceso as $fil)
                                <option value="{{$fil->id}}"> {{ $fil->nombre  }}</option>
                            @endforeach
                        </x-select>
                    </x-campo>

                    <x-campo etiqueta="Proveedor" para="cboSupplier">
                        <x-select name="cboSupplier" id="cboSupplier" class="js-example-basic-single">
                            <option value="0">Seleccione una Opcion</option>
                            @foreach($provee as $fil)
                                <option value="{{$fil->id}}">{{$fil->nombre}}</option>
                            @endforeach
                        </x-select>
                    </x-campo>

                    <x-campo etiqueta="Pais Origen" para="cboPaisOrigen">
                        <x-select name="cboPaisOrigen" id="cboPaisOrigen" class="js-example-basic-single">
                            <option value="0">Seleccione una Opcion</option>
                            @foreach($pais as $fil)
                                <option value="{{$fil->id}}">{{$fil->nombre}}</option>
                            @endforeach
                        </x-select>
                    </x-campo>

                    <x-campo etiqueta="Puerto de Embarque / Origen" para="cboPuertoOrigen">
                        <x-select name="cboPuertoOrigen" id="cboPuertoOrigen" class="js-example-basic-single">
                            <option value="0">Seleccione una Opcion</option>
                            @foreach($puerto as $fil)
                                <option value="{{$fil->id}}">{{$fil->nombre}}</option>
                            @endforeach
                        </x-select>
                    </x-campo>

                    <x-campo etiqueta="Puerto Destino" para="cboPuertoDestino">
                        <x-select name="cboPuertoDestino" id="cboPuertoDestino" class="js-example-basic-single">
                            <option value="0">Seleccione una Opcion</option>
                            @foreach($puertoD as $fil)
                                <option value="{{$fil->id}}">{{$fil->nombre}}</option>
                            @endforeach
                        </x-select>
                    </x-campo>

                    <x-campo etiqueta="Incoterms" para="cboIncoterms">
                        <x-select name="cboIncoterms" id="cboIncoterms">
                            <option value="0">Seleccione una Opcion</option>
                            @foreach($incont as $fil)
                                <option value="{{$fil->id}}">{{$fil->codigo}}</option>
                            @endforeach
                        </x-select>
                    </x-campo>

                    <x-campo etiqueta="Moneda" para="cboMoneda">
                        <x-select name="cboMoneda" id="cboMoneda">
                            <option value="0">Seleccione una Opcion</option>
                            @foreach($moneda as $fil)
                                <option value="{{$fil->id}}">{{$fil->nombre}}</option>
                            @endforeach
                        </x-select>
                    </x-campo>

                    <x-campo etiqueta="Embarcador" para="txtVessel">
                        <x-input type="text" name="txtVessel" id="txtVessel" />
                    </x-campo>

                    <x-campo etiqueta="Documento de Transporte" para="txtDoctransporte">
                        <div class="flex items-center gap-1">
                            <x-input type="text" name="txtDoctransporte" id="txtDoctransporte" />
                            <x-boton-icono etiqueta="Traer datos (Do, Incoterms, Factura, Numero Factura, Valor Factura)" variante="acento" onclick="traerDatosDO(2)">
                                <x-icono nombre="arrow-path" class="h-[18px] w-[18px]" />
                            </x-boton-icono>
                        </div>
                    </x-campo>

                    <x-campo etiqueta="Días libres Puerto" para="txtDia_Libre">
                        <x-input type="number" name="txtDia_Libre" id="txtDia_Libre" />
                    </x-campo>

                    <x-campo etiqueta="Días libres Contenedores" para="txtDiaLibreCont">
                        <x-input type="number" name="txtDiaLibreCont" id="txtDiaLibreCont" />
                    </x-campo>

                    <x-campo etiqueta="Emisión BL" para="cboEmisionBL">
                        <x-select name="cboEmisionBL" id="cboEmisionBL">
                            <option value="0">Seleccione</option>
                            @foreach($emisionBL as $sel)
                                <option value="{{$sel}}" > {{ $sel }}</option>
                            @endforeach
                        </x-select>
                    </x-campo>

                    @if(session('GrupoEmpresarial') == 20)
                        <x-campo etiqueta="Responsable Comex" para="cboResponsableComex">
                            <x-select name="cboResponsableComex" id="cboResponsableComex">
                                <option value="0">Seleccione una Opcion</option>
                                @foreach($responsable_comex as $fil)
                                    <option value="{{$fil->identificacion}}">{{$fil->nombre}}</option>
                                @endforeach
                            </x-select>
                        </x-campo>
                    @endif
                </div>
            </x-tarjeta>

            {{-- Factura --}}
            <x-tarjeta titulo="Factura">
                <div class="{{ $cRejilla }}">
                    <x-campo etiqueta="Factura" para="txtFactura">
                        <x-input type="text" name="txtFactura" id="txtFactura" />
                    </x-campo>
                    <x-campo etiqueta="Fecha Factura" para="dtpFechaFactura">
                        <x-input type="date" name="dtpFechaFactura" id="dtpFechaFactura" />
                    </x-campo>
                    <x-campo etiqueta="Vencimiento Factura" para="dtpVtoFactura">
                        <x-input type="date" name="dtpVtoFactura" id="dtpVtoFactura" />
                    </x-campo>
                    <x-campo etiqueta="Valor Factura" para="txtValorFactura">
                        <x-input type="text" name="txtValorFactura" id="txtValorFactura" />
                    </x-campo>
                </div>
            </x-tarjeta>

            {{-- Campos dinámicos (definición de campos de la OC por cliente) --}}
            <x-seccion-plegable titulo="Campos Dinámicos" icono="adjustments-horizontal">
                @if (count($defCamposPO) == 0)
                    <p class="text-[13px] text-[var(--texto-suave)]">Este cliente no tiene campos dinámicos definidos.</p>
                @endif
                <div class="{{ $cRejilla }}">
                    @foreach($defCamposPO as $fil)
                        <x-campo :etiqueta="$fil->descripcion" :para="'txt' . $fil->id">
                            @if($fil->tipo_campo=="Fecha")
                                <input type='date' name="txt{{$fil->id}}" id='txt{{$fil->id}}' class="{{ $cInput }}" />
                            @elseif ($fil->tipo_campo=="Texto")
                                <input type='text' name="txt{{$fil->id}}" id='txt{{$fil->id}}' class="{{ $cInput }}" value="" />
                            @elseif ($fil->tipo_campo=="Comentario")
                                <textarea name="txt{{$fil->id}}" id='txt{{$fil->id}}' rows="2" class="{{ $cInput }}">{{$fil->valor}} </textarea>
                            @elseif ($fil->tipo_campo=="Lista")
                                @php
                                    $valu = str_replace(" ","",$fil->valores);
                                    $valu = explode(",",$valu);
                                    $esMultiple = $fil->clase=="multiple";
                                @endphp
                                <select name="txt{{$fil->id}}" id='txt{{$fil->id}}' @if($esMultiple) multiple data-live-search="true" class="{{ $cMultiple }}" @else class="{{ $cSelect }}" @endif>
                                    <option value="0">Seleccione una Opcion</option>
                                    @foreach($valu as $opcion)
                                        <option value="{{$opcion}}">{{ str_replace("_"," ", $opcion) }}</option>
                                    @endforeach
                                </select>
                            @else
                                <input type='number' step="any" name="txt{{$fil->id}}" id='txt{{$fil->id}}' class="{{ $cInput }}" value="0" />
                            @endif
                        </x-campo>
                    @endforeach
                </div>
            </x-seccion-plegable>

            {{-- Productos --}}
            <x-seccion-plegable titulo="Productos" icono="queue-list">
                <div class="overflow-hidden rounded-lg border border-[var(--borde)]">
                    <div class="ctc-tabla-caja" style="--alto-tabla: 28rem">
                        <table id="MyTable" class="{{ $cTabla }}">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Material</th>
                                    <th>Cantidad Solicitada</th>
                                    <th>Cantidad Real</th>
                                    <th>U. Medida Facturada</th>
                                    <th>Empaque</th>
                                    <th>Cantidad Empaque</th>
                                    <th>V. Unitario Empaque</th>
                                    <th>Bultos Contenedor</th>
                                    <th>Cant. Factura</th>
                                    <th>Valor Total</th>
                                    <th>Valor Unitario</th>
                                </tr>
                            </thead>

                            <tbody>
                                <tr>
                                    <td><input class="{{ $cCelda }} text-center" style="width:44px" name="txtN1" id="txtN1" type="text" value="1"> </td>
                                    <td>
                                        <select name="cboMaterial1" id="cboMaterial1" style="width:200px" class="{{ $cCeldaSelect }}" onchange="traerInfoMaterial(1)">
                                            <option>Seleccione una opción</option>
                                            @foreach( $materi as $fil )
                                                <option value="{{$fil->id}}">{{ $fil->codigo ." - ".  $fil->nombre }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td><input class="{{ $cCelda }}" style="width:110px" name="txtQTY1"   id="txtQTY1"  type="number" step="0.01" onBlur = "PerderFoco(this);"> </td>
                                    <td><input class="{{ $cCelda }}" style="width:110px" name="txtQTYR1"  id="txtQTYR1" type="number" step="0.01" onBlur = "PerderFoco(this);"> </td>
                                    <td><input class="{{ $cCelda }}" style="width:105px" name="txtUM1"    id="txtUM1"   type="text"   onBlur = "PerderFoco(this);"> </td>
                                    <td>
                                        <select name="cboEmpaque1" id="cboEmpaque1" class="{{ $cCeldaSelect }}" style="width:130px">
                                            <option>Seleccione una opción</option>
                                            @foreach( $empaqu as $fil )
                                                <option value="{{$fil->id}}">{{ $fil->nombre }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td><input class="{{ $cCelda }}" style="width:105px" name="txtCantEmpaque1" id="txtCantEmpaque1" type="number" step="0.01" onBlur = "PerderFoco(this);"> </td>
                                    <td><input class="{{ $cCelda }}" style="width:105px" name="txtUndEmpaque1"  id="txtUndEmpaque1"  type="text"   readonly="readonly" > </td>
                                    <td><input class="{{ $cCelda }}" style="width:105px" name="txtBultosConte1"   id="txtBultosConte1"  type="text"  > </td>
                                    <td><input class="{{ $cCelda }}" style="width:105px" name="txtCantiFactura1"  id="txtCantiFactura1" type="text"  > </td>
                                    <td><input class="{{ $cCelda }}" style="width:110px" name="txtTotalVal1"    id="txtTotalVal1"    type="number" step="0.01" onBlur = "PerderFoco(this);"> </td>
                                    <td><input class="{{ $cCelda }}" style="width:110px" name="txtTotalUni1"    id="txtTotalUni1"    type="text"   readonly="readonly"> </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="mt-3 flex flex-wrap items-center justify-between gap-3">
                    <div class="flex flex-wrap items-center gap-2">
                        @if(Auth::user()->operacion=="E")
                            <x-enlace-boton href="javascript:AgregarActividad();" title="Agregar Registro"><x-icono nombre="plus-circle" /> Agregar Registro</x-enlace-boton>
                            <x-enlace-boton href="javascript:DuplicarActividad();" title="Duplicar Registro"><x-icono nombre="document-duplicate" /> Duplicar Registro</x-enlace-boton>
                            <x-enlace-boton href="javascript:EliminarActividad();" title="Eliminar Registro"><x-icono nombre="trash" class="h-4 w-4 text-red-600 dark:text-red-400" /> Eliminar Registro</x-enlace-boton>
                        @endif
                    </div>
                    <div class="flex items-center gap-2">
                        <input style="width:30px;" id="txtCanti" name="txtCanti" type="hidden" value="1">
                        <label for="txtTotal" class="text-[13px] font-semibold text-[var(--texto-suave)]">Total</label>
                        <input type="text" name="txtTotal" id="txtTotal" class="{{ $cCelda }} text-right" style="width:160px" readonly="readonly" value="0" />
                    </div>
                </div>
            </x-seccion-plegable>

            {{-- Guardar --}}
            <div class="sticky bottom-0 z-40 flex flex-wrap items-center justify-between gap-3 rounded-xl border border-[var(--borde)] bg-[var(--superficie)] px-4 py-3 shadow-[var(--sombra-panel)]">
                <div class="flex min-w-0 items-center gap-2 text-[13px] text-[var(--texto-suave)]">
                    <x-icono nombre="arrow-path" id="loading_spinner2" style="display:none" class="h-4 w-4 animate-spin text-[var(--acento-texto)]" />
                    <span id="lblError">...</span>
                </div>
                <div class="flex flex-wrap items-center gap-2">
                    <x-secondary-button type="reset"><x-icono nombre="arrow-uturn-left" variante="m" class="h-4 w-4" /> Limpiar</x-secondary-button>
                    @if(Auth::user()->operacion=="E")
                        <x-button><x-icono nombre="check" variante="m" class="h-4 w-4" /> Guardar</x-button>
                    @endif
                    <x-enlace-boton href="{{ pantalla('/rpo') }}"><x-icono nombre="x-mark" variante="m" class="h-4 w-4" /> Cancelar</x-enlace-boton>
                </div>
            </div>
        </form>
    </x-pagina>

    @push('estilos')
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/css/select2.min.css">
        <style>
            /* select2 (Proveedor, País y Puertos; traerDatosDO lo vuelve a aplicar en Proveedor) con los tokens del layout. */
            .select2-container { width: 100% !important; font-size: 13px; }
            .select2-container--default .select2-selection--single { height: 38px; border-radius: .375rem; border-color: var(--borde-fuerte); background: var(--superficie); }
            .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; color: var(--texto); padding-left: 12px; }
            .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
            .select2-dropdown { border-color: var(--borde-fuerte); background: var(--superficie); color: var(--texto); }
            .select2-container--default .select2-search--dropdown .select2-search__field { border-color: var(--borde-fuerte); background: var(--superficie); color: var(--texto); }
            .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--acento); color: var(--acento-contraste); }
            .select2-container--default .select2-results__option--selected { background: var(--superficie-2); }
        </style>
    @endpush

    @push('scripts')
        {{-- Librerías que traía planti, solo para esta pantalla (la de crear no usa moment). --}}
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/js/select2.min.js"></script>

<script>
    // In your Javascript (external .js resource or <script> tag)
    $(document).ready(function() {
      $('.js-example-basic-single').select2();
    });
</script>

<script>

   var i = '{{ $canti }}'; // $("#txti").val();
   var newaddress;

    function PerderFoco(sender) {
        //alert("Calculando....");
        CalcularDetalle();
    }

    function CalcularDetalle() {
        debugger;
        $("#lblError").text("");
        TotalVal  = 0;
        TotalUnit = 0;
        sumtot    = 0;
        for (j = 1; j <= i; j++) {
            //$("#lblError").text("valor: " + Number($('#txtIGB' + j).val().replace(",", "")));
            var Qty      = $('#txtQTY' + j).val();
            var canempq  = $('#txtCantEmpaque' + j).val();
            var tot      = $('#txtTotalVal' + j).val();
            var unit     = 0
            var unitempq = 0
            Qty      = Number(Qty);
            //QtyR      = Number(QtyR);
            canempq  = Number(canempq);
            tot      = Number(tot);
            if (Qty == "") {
              Qty = 0
            }
            sumtot   = sumtot + tot;
            if (Qty <= 0 && tot<=0) {
                $("#lblError").text("Linea(" + j + "): Los valores no deben ser menor o igual a cero(0)");
                /*$('#txtQTY' + j).val(0);
                $('#txtCantEmpaque' + j).val(0);
                $('#txtUndEmpaque' + j).val(0);
                $('#txtTotalVal' + j).val(0);
                $('#txtTotalUni' + j).val(0);*/
            }
            if(tot>0){
              unit = tot/Qty;
              if(unit!=undefined && unit!=Infinity){
                $('#txtTotalUni' + j).val(unit);
              }else{
                $('#txtTotalUni' + j).val(0);
              }
              $("#txtTotal").val(sumtot);
            }else{
              $('#txtTotalUni' + j).val(0);
            }
            if(canempq>0){
              unitempq = Qty / canempq;
              if(unitempq!=undefined && unitempq!=Infinity ){
                $('#txtUndEmpaque' + j).val(unitempq);
              }else{
                $('#txtUndEmpaque' + j).val(unitempq);
              }
            }else{
                $('#txtUndEmpaque' + j).val(unitempq);
            }
        }
    }

    function ObtenerMaterial(sender) {
         
        // var selectedText = sender.options[sender.selectedIndex].innerHTML;
        // var selectedValue = sender.value;
        // var Indice = sender.name.substring(11, sender.name.length)
        // //ActivarOdescativarFila(Indice, false);
        // var arregloDeCadenas = selectedText.split("-");
        // //alert(Indice + "): "+ arregloDeCadenas[1]);
        // $("#txtMAT" + Indice).val(arregloDeCadenas[1]);
    }

    function AgregarActividad() {
        //alert('hola' + i);
        $("#lblError").text("");
        /* if (ValidarActividadRepetida(this) == true) {
            //var valanterior = $("#lblError").text();
            $("#lblError").text("Corrija las actividades repetidas para agregar una nueva actividad ");// + valanterior);
            return;
        }*/
        if (i < 151) {
            i++;
            var nom = "cboMaterial" + i
            $("#txtCanti").val(i);
            var newaddress = $("#MyTable tbody tr:first").eq(0).clone();
            newaddress.find('input').each(function () {
                this.name = this.name.replace('txtN1', 'txtN' + i);
                // this.name = this.name.replace('txtMAT1', 'txtMAT' + i);
                this.name = this.name.replace('txtITEM1', 'txtITEM' + i);
                this.name = this.name.replace('txtQTY1', 'txtQTY' + i);
                this.name = this.name.replace('txtQTYR1', 'txtQTYR' + i);
                this.name = this.name.replace('txtUM1', 'txtUM' + i);
                this.name = this.name.replace('txtCantEmpaque1', 'txtCantEmpaque' + i);
                this.name = this.name.replace('txtUndEmpaque1', 'txtUndEmpaque' + i);
                this.name = this.name.replace('txtBultosConte1', 'txtBultosConte' + i);
                this.name = this.name.replace('txtCantiFactura1', 'txtCantiFactura' + i);
                this.name = this.name.replace('txtTotalVal1', 'txtTotalVal' + i);
                this.name = this.name.replace('txtTotalUni1', 'txtTotalUni' + i);

                // this.name = this.name.replace('txtUnCaja1', 'txtUnCaja' + i);
                // this.name = this.name.replace('txtCosto1', 'txtCosto' + i);
                // this.name = this.name.replace('txtCajasContenedor1', 'txtCajasContenedor' + i);

                this.id = this.id.replace('txtN1', 'txtN' + i);
                // this.id = this.id.replace('txtMAT1', 'txtMAT' + i);
                this.id = this.id.replace('txtITEM1', 'txtITEM' + i);
                this.id = this.id.replace('txtQTY1',  'txtQTY' + i);
                this.id = this.id.replace('txtQTYR1', 'txtQTYR' + i);
                this.id = this.id.replace('txtUM1', 'txtUM' + i);
                this.id = this.id.replace('txtCantEmpaque1', 'txtCantEmpaque' + i);
                this.id = this.id.replace('txtUndEmpaque1', 'txtUndEmpaque' + i);
                this.id = this.id.replace('txtBultosConte1', 'txtBultosConte' + i);
                this.id = this.id.replace('txtCantiFactura1', 'txtCantiFactura' + i);
                this.id = this.id.replace('txtTotalVal1', 'txtTotalVal' + i);
                this.id = this.id.replace('txtTotalUni1', 'txtTotalUni' + i);

                // this.id = this.id.replace('txtUnCaja1', 'txtUnCaja' + i);
                // this.id = this.id.replace('txtCosto1', 'txtCosto' + i);
                // this.id = this.id.replace('txtCajasContenedor1', 'txtCajasContenedor' + i);

                if (this.name == 'txtN' + i) {
                    $(this).val(i);
                } else {
                    $(this).val(0);
                }
            });
            newaddress.find("select#cboEmpaque1").each(function () {
                nom = "cboEmpaque" + i
                $(this).val(0);
            }).attr({ name: nom, id: nom }).end().appendTo("#MyTable");

            newaddress.find("select#cboMaterial1").each(function () {
                nom = "cboMaterial" + i
                onch = "traerInfoMaterial("+i+")";
                $(this).val(0);
            }).attr({ name: nom, id: nom, onchange: onch }).end().appendTo("#MyTable");

            newaddress.find("select#cboMonedaItem1").each(function () {
                nom = "cboMonedaItem" + i
                $(this).val('');
            }).attr({ name: nom, id: nom }).end().appendTo("#MyTable");

            // newaddress.find("select#cboCategoria1").each(function () {
            //     nom = "cboCategoria" + i
            //     $(this).val('');
            // }).attr({ name: nom, id: nom }).end().appendTo("#MyTable");

           // $('.js-example-basic-single').select2();
        }
    }

    function DuplicarActividad() {
        //alert('hola' + i);
        $("#lblError").text("");
        
        if (i < 151) {
            ant = i;
            i++;
            var nom = "cboMaterial" + ant
            $("#txtCanti").val(i);
            var newaddress = $("#MyTable tbody tr:last").eq(0).clone();
            newaddress.find('input').each(function () {
                this.name = this.name.replace('txtId'+ant, 'txtId' + i);
                this.name = this.name.replace('txtN'+ant, 'txtN' + i);
                this.name = this.name.replace('txtITEM'+ant, 'txtITEM' + i);
                this.name = this.name.replace('txtQTY'+ant, 'txtQTY' + i);
                this.name = this.name.replace('txtQTYR'+ant, 'txtQTYR' + i);
                this.name = this.name.replace('txtUM'+ant, 'txtUM' + i);
                this.name = this.name.replace('txtCantEmpaque'+ant, 'txtCantEmpaque' + i);
                this.name = this.name.replace('txtUndEmpaque'+ant, 'txtUndEmpaque' + i);
                this.name = this.name.replace('txtBultosConte'+ant, 'txtBultosConte' + i);
                this.name = this.name.replace('txtCantiFactura'+ant, 'txtCantiFactura' + i);
                this.name = this.name.replace('txtTotalVal'+ant, 'txtTotalVal' + i);
                this.name = this.name.replace('txtTotalUni'+ant, 'txtTotalUni' + i);

                this.id = this.id.replace('txtId'+ant, 'txtId' + i);
                this.id = this.id.replace('txtN'+ant, 'txtN' + i);
                this.id = this.id.replace('txtITEM'+ant, 'txtITEM' + i);
                this.id = this.id.replace('txtQTY'+ant, 'txtQTY' + i);
                this.id = this.id.replace('txtQTYR'+ant, 'txtQTYR' + i);
                this.id = this.id.replace('txtUM'+ant, 'txtUM' + i);
                this.id = this.id.replace('txtCantEmpaque'+ant, 'txtCantEmpaque' + i);
                this.id = this.id.replace('txtUndEmpaque'+ant, 'txtUndEmpaque' + i);
                this.id = this.id.replace('txtBultosConte'+ant, 'txtBultosConte' + i);
                this.id = this.id.replace('txtCantiFactura'+ant, 'txtCantiFactura' + i);
                this.id = this.id.replace('txtTotalVal'+ant, 'txtTotalVal' + i);
                this.id = this.id.replace('txtTotalUni'+ant, 'txtTotalUni' + i);
                if (this.name == 'txtN' + i) {
                    $(this).val(i);
                }else if (this.name == 'txtId' + i) {
                    $(this).val(0);
                } else {
                    //$(this).val(0);
                }
            });
            newaddress.find("select#cboEmpaque"+ ant).each(function () {
                nom = "cboEmpaque" + i
                $(this).val( $('#cboEmpaque'+ant).val());
            }).attr({ name: nom, id: nom }).end().appendTo("#MyTable");

            // newaddress.find("select#cboMaterial"+ ant).each(function () {
            //     nom = "cboMaterial" + i             
            //     $(this).val( $('#cboMaterial'+ant).val());
            // }).attr({ name: nom, id: nom }).end().appendTo("#MyTable");
        }
    }

    function EliminarActividad() {
        //alert('hola' + i);
        $("#lblError").text("");
        if (i > 1) {
            $("#MyTable tr:last").remove();
            i--;
            $("#txtCanti").val(i);
            //
           CalcularDetalle();
           /* if (BaseGravable >= 0) {
                // alert(BaseGravable);
                setTimeout(function () { CalcularFormulas(); }, 0);
            }*/
        }
    }


    function traerDatosDO(filtro){

        if(filtro==1){
            param  = $("#txtDo").val();
        }else if(filtro==2){
            param = $("#txtDoctransporte").val();
        }else if(filtro==4){
            param = $("#txtPo").val();
        }


        if(param=="" || param.trim()=="" ){
            if(filtro==1){
                document.getElementById('txtDo').focus();
            }else if(filtro==2){
                document.getElementById('txtDoctransporte').focus();
            }else if(filtro==4){
                document.getElementById('txtPo').focus();
            }
            
        }else{

            $.ajax({
                //url:'/rtraerdatosdo',
                //data:'numdoc='+numdoc,
                url:'/rtraerdatosdo/'+filtro+"/"+param,
                beforeSend: function () {
                    //mostramos gif "cargando"
                    jQuery('#loading_spinner1').show();
                    jQuery("#lblInfo").html("Espere un momento por favor...");

                    jQuery('#loading_spinner2').show();
                    jQuery("#lblError").html("En proceso, Espere un momento por favor...");
                }
            })
            .done( function(data){
            
                $("#lblInfo").text("");
                $("#lblError").text("");
                jQuery('#loading_spinner1').hide();
                jQuery('#loading_spinner2').hide();

                //alert("prueba"); 

                for (var i=0; i<data.length;i++){ 
                    if(filtro==1){
                        $('#txtDoctransporte').val(data[i]["NUMERO_DOCUMENTO_TRANSPORTE"]);
                    }else if(filtro==2){
                        $('#txtDo').val(data[i]["NUMERO_DO"]);
                    }else if(filtro==4){
                            $('#txtDo').val(data[i]["NUMERO_DO"]);                           
                        }
                    
                    $('#cboIncoterms').val(data[i]["INCOTERMS"]);
                    document.getElementById('txtFactura').value       = data[i]["NUMERO_FACTURA"];
                    document.getElementById('dtpFechaFactura').value  = data[i]["FECHA_FACTURA"];
                    document.getElementById('txtValorFactura').value  = data[i]["TOTAL_FACTURA"];
                    
                    if(data[i]["CODIGO_MONEDA"] != null  && data[i]["CODIGO_MONEDA"] != ""){//alert(data[i]["CODIGO_MONEDA"]);
                            $('#cboMoneda').val(data[i]["CODIGO_MONEDA"]);
                        }

                    if(data[i]["PROVEEDOR"] != null  && data[i]["PROVEEDOR"] != ""){
                        $('#cboSupplier').val(data[i]["PROVEEDOR"]); //alert(data[i]["PAIS_ORIGEN"]);
                        $('#cboSupplier').select2();

                    }    

                    if(data[i]["PROCESO"] != null  && data[i]["PROCESO"] != ""){//alert(data[i]["PROCESO"]);
                            $('#cboProceso').val(data[i]["PROCESO"]);
                        }
                }              
            })
            .fail( function(data){
                    $("#lblInfo").text("");
                    $("#lblError").text("");
                    jQuery('#loading_spinner1').hide();
                    jQuery('#loading_spinner2').hide();

            })
            .always( function() {
                    $("#lblInfo").text("");
                    $("#lblError").text("");
                    jQuery('#loading_spinner1').hide();
                    jQuery('#loading_spinner2').hide();
            });

        }

    }

    function traerInfoMaterial(num) {
        // idmat = $("#cboMaterial"+num).val()
        // $.ajax({
        //     type: "get",
        //     url : "http://ctc.test/infomaterialpo?id=" +idmat,
        //     success : function (data) {
        //         console.log(data);
        //         categoria = data[0]['id_categoria_prod'];
        //         uncaja    = data[0]['unidades_caja'];
        //         idmoneda  = data[0]['id_moneda'];
        //         costocaja = data[0]['costo_caja'];
        //         cajascont = data[0]['cajas_contenedor'];

        //         categoria = (categoria == null)?"":categoria; $("#cboCategoria"+num).val(categoria)
        //         uncaja    = (uncaja    == null)?0:uncaja;     $("#txtUnCaja"+num).val(uncaja)
        //         idmoneda  = (idmoneda  == null)?"":idmoneda;  $("#cboMonedaItem"+num).val(idmoneda)
        //         costocaja = (costocaja == null)?0:costocaja;  $("#txtCosto"+num).val(costocaja)
        //         cajascont = (cajascont == null)?0:cajascont;  $("#txtCajasContenedor"+num).val(cajascont)
        //     },
        //     error : function () {
        //         alert("\nERROR\nNo se pudo conectar con la informacion de materiales, intente de nuevo o reportelo");
        //     }
        // });
    }
</script>
    @endpush
</x-app-layout>