@extends('layouts.index', ['subHeader' => 'Nueva Importación'])

@section('header')
    <a href="{{ route('home') }}" class="text-decoration-none text-dark">Dashboard</a>
    <a href="{{ route('importaciones.index') }}" class="text-decoration-none text-dark"> / Importaciones</a>
    <span> / Nuevo registro</span>
@endsection

@section('content')
    <div class="d-flex justify-content-end">
        <div class="btn-group" role="group" aria-label="">
            <a href="{{ route('productos.uploadView') }}" type="button" class="btn btn-enviar btn-lg btn-block">
                <i class="bi bi-arrow-left-circle-fill"></i> Subir Productos
            </a>
        </div>
        <div class="btn-group" role="group" aria-label="">
            <a href="{{ route('importaciones.uploadView') }}" type="button" class="btn btn-enviar btn-lg btn-block">
                <i class="bi bi-arrow-left-circle-fill"></i> Subir Excel
            </a>
        </div>
        <div class="btn-group" role="group" aria-label="">
            <a href="{{ route('importaciones.index') }}" type="button" class="btn btn-enviar btn-lg btn-block">
                <i class="bi bi-arrow-left-circle-fill"></i> Atrás
            </a>
        </div>
    </div>
    <br><br>
    <div class="container-fluid shadow-s p-4">
        @if ($errors->any())
            <div class="col-md-12">
                <div class="alert alert-danger">
                    <strong>{{ $errors->first() }}</strong>
                </div>
            </div>
        @endif
        <form class="row g-3" action="{{ route('importaciones.store') }}" method="POST">
            @csrf
            <h1 class="fs-3 fw-bolder">Nuevo registro de Importación</h1>

            <!-- Encabezado de importación -->
            <div class="col-md-4">
                <label for="sp" class="form-label fw-bolder">S.P.</label>
                <input type="date" class="form-control fromcss form-control-lg" name="sp" id="sp"
                    value="{{ old('sp') }}" placeholder="Ingrese el (S.P.)...">
                @error('sp')
                    <div class="text-danger">@lang($message)</div>
                @enderror
            </div>
            
            <div class="col-md-4">
                <label for="unidad_negocio" class="form-label fw-bolder">Unidad de Negocio</label>
                <input type="text" class="form-control fromcss form-control-lg" name="unidad_negocio" id="unidad_negocio"
                    value="{{ old('unidad_negocio') }}" placeholder="Ingrese la Unidad de Negocio...">
                @error('unidad_negocio')
                    <div class="text-danger">@lang($message)</div>
                @enderror
            </div>
            
            <div class="col-md-4">
                <label for="impo" class="form-label fw-bolder">IMPO</label>
                <input type="text" class="form-control fromcss form-control-lg" name="impo" id="impo"
                    value="{{ old('impo') }}" placeholder="Ingrese IMPO...">
                @error('impo')
                    <div class="text-danger">@lang($message)</div>
                @enderror
            </div>
            
            <div class="col-md-4">
                <label for="refrigerado" class="form-label fw-bolder">Refrigerado</label>
                <input type="text" class="form-control fromcss form-control-lg" name="refrigerado"
                    id="refrigerado" value="{{ old('refrigerado') }}" placeholder="Es Refrigerado? S/N" required>
                @error('refrigerado')
                    <div class="text-danger">@lang($message)</div>
                @enderror
            </div>
            
            <div class="col-md-4">
                <label for="n_estibas_contenedor" class="form-label fw-bolder">N° Estibas / N° Contenedor</label>
                <input type="text" class="form-control fromcss form-control-lg" name="n_estibas_contenedor"
                    id="n_estibas_contenedor" value="{{ old('n_estibas_contenedor') }}" placeholder="Ingrese N° Estibas / N° Contenedor..." required>
                @error('n_estibas_contenedor')
                    <div class="text-danger">@lang($message)</div>
                @enderror
            </div>
            
            <div class="col-md-4">
                <label for="bl_awb" class="form-label fw-bolder">BL - AWB</label>
                <input type="text" class="form-control fromcss form-control-lg" name="bl_awb" id="bl_awb"
                    value="{{ old('bl_awb') }}" placeholder="Ingrese BL - AWB...">
                @error('bl_awb')
                    <div class="text-danger">@lang($message)</div>
                @enderror
            </div>
            
            <div class="col-md-4">
                <label for="eta" class="form-label fw-bolder">ETA</label>
                <input type="date" class="form-control fromcss form-control-lg" name="eta" id="eta"
                    value="{{ old('eta') }}" placeholder="Ingrese ETA...">
                @error('eta')
                    <div class="text-danger">@lang($message)</div>
                @enderror
            </div>
            
            <div class="col-md-4">
                <label for="f_nacionalizacion" class="form-label fw-bolder">F. Nacionalización</label>
                <input type="date" class="form-control fromcss form-control-lg" name="f_nacionalizacion"
                    id="f_nacionalizacion" value="{{ old('f_nacionalizacion') }}">
                @error('f_nacionalizacion')
                    <div class="text-danger">@lang($message)</div>
                @enderror
            </div>
            
            <div class="col-md-4">
                <label for="f_entrega_zol" class="form-label fw-bolder">F. Entrega ZOL (aprox)</label>
                <input type="date" class="form-control fromcss form-control-lg" name="f_entrega_zol" id="f_entrega_zol"
                    value="{{ old('f_entrega_zol') }}" required>
                @error('f_entrega_zol')
                    <div class="text-danger">@lang($message)</div>
                @enderror
            </div>            

            <!-- Registros de importación -->
            <div id="reg_importaciones_container">
                <div class="reg_importacion card mb-3" id="reg_importacion_0">
                    <div class="registros-head-card">
                        <button type="button" class="btn btn-link text-left w-100 btn-toggle-collapse title-head-registro"
                            data-index="0">
                            Registro de Importación 1 <i class="bi bi-caret-down-fill"></i>
                        </button>
                        <button type="button" class="btn btn-danger btn-remove-reg-importacion float-right me-2"><i
                                class="fs-1 bi bi-trash"></i></button>
                    </div>
                    <div id="collapse_0" class="collapse show">
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label for="reg_importacion_0_mes_id" class="form-label fw-bolder">Mes Entrega Carga</label>
                                    <select name="reg_importacion[0][mes_id]" id="reg_importacion_0_mes_id"
                                        class="form-select form-select-lg fromcss" data-control="select2"
                                        data-placeholder="Seleccione el Mes..." required>
                                        <option></option>
                                        @foreach (\App\Models\Importacion::NOMBRE_MESES as $id => $nombre)
                                            <option value="{{ $id }}">{{ $nombre }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="reg_importacion_0_pais_origen_id" class="form-label fw-bolder">Origen Despacho</label>
                                    <select name="reg_importacion[0][pais_origen_id]" id="reg_importacion_0_pais_origen_id"
                                        class="form-select form-select-lg fromcss" data-control="select2"
                                        data-placeholder="Seleccione Origen del despacho..." required>
                                        <option></option>
                                        @foreach ($paises as $pais)
                                            <option value="{{ $pais->id }}">{{ $pais->nombre }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="reg_importacion_0_lugar_despacho_id" class="form-label fw-bolder">Puerto/Aeropuerto Despacho</label>
                                    <select name="reg_importacion[0][lugar_despacho_id]" id="reg_importacion_0_lugar_despacho_id"
                                        class="form-select form-select-lg fromcss" data-control="select2"
                                        data-placeholder="Seleccione Lugar del despacho..." required>
                                        <option></option>
                                        @foreach ($ciudades as $ciudad)
                                            <option value="{{ $ciudad->id }}">{{ $ciudad->nombre }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="reg_importacion_0_oc_sap" class="form-label fw-bolder">OC - SAP</label>
                                    <input type="text" class="form-control fromcss form-control-lg" placeholder="Ingrese la OC - SAP..."
                                        name="reg_importacion[0][oc_sap]" id="reg_importacion_0_oc_sap" value="{{ old('reg_importacion.0.oc_sap') }}" required>
                                </div>
                                <div class="col-md-4">
                                    <label for="reg_importacion_0_codigo" class="form-label fw-bolder">Código</label>
                                    <input type="text" class="form-control fromcss form-control-lg" placeholder="Ingrese el Código..."
                                        name="reg_importacion[0][codigo]" id="reg_importacion_0_codigo" value="{{ old('reg_importacion.0.codigo') }}" required>
                                </div>
                                <div class="col-md-4">
                                    <label for="reg_importacion_0_producto_id" class="form-label fw-bolder">Producto</label>
                                    <select name="reg_importacion[0][producto_id]" id="reg_importacion_0_producto_id"
                                        class="form-select form-select-lg fromcss" data-control="select2"
                                        data-placeholder="Seleccione el Producto..." required>
                                        <option></option>
                                        @foreach ($productos as $producto)
                                            <option value="{{ $producto->id }}">{{ $producto->nombre }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="reg_importacion_0_cantidad" class="form-label fw-bolder">Cantidad</label>
                                    <input type="number" class="form-control fromcss form-control-lg" placeholder="Ingrese la Cantidad..."
                                        name="reg_importacion[0][cantidad]" id="reg_importacion_0_cantidad" value="{{ old('reg_importacion.0.cantidad') }}" required>
                                </div>
                                <div class="col-md-4">
                                    <label for="reg_importacion_0_lote" class="form-label fw-bolder">Lote</label>
                                    <input type="text" class="form-control fromcss form-control-lg" placeholder="Ingrese el Lote..."
                                        name="reg_importacion[0][lote]" id="reg_importacion_0_lote" value="{{ old('reg_importacion.0.lote') }}" required>
                                </div>
                                <div class="col-md-4">
                                    <label for="reg_importacion_0_fecha_vto" class="form-label fw-bolder">Fecha Vto.</label>
                                    <input type="date" class="form-control fromcss form-control-lg"
                                        name="reg_importacion[0][fecha_vto]" id="reg_importacion_0_fecha_vto" value="{{ old('reg_importacion.0.fecha_vto') }}">
                                </div>
                                <div class="col-md-4">
                                    <label for="reg_importacion_0_pellets_f_fab" class="form-label fw-bolder">Pellets / F. Fab</label>
                                    <input type="text" class="form-control fromcss form-control-lg" placeholder="Ingrese el Pellets / F. Fab..."
                                        name="reg_importacion[0][pellets_f_fab]" id="reg_importacion_0_pellets_f_fab" value="{{ old('reg_importacion.0.pellets_f_fab') }}">
                                </div>
                                <div class="col-md-4">
                                    <label for="reg_importacion_0_ee_lic" class="form-label fw-bolder">EE / LIC</label>
                                    <input type="number" class="form-control fromcss form-control-lg" placeholder="Ingrese la EE / LIC..."
                                        name="reg_importacion[0][ee_lic]" id="reg_importacion_0_ee_lic" value="{{ old('reg_importacion.0.ee_lic') }}">
                                </div>
                                <div class="col-md-4">
                                    <label for="reg_importacion_0_via_id" class="form-label fw-bolder">Vía</label>
                                    <select name="reg_importacion[0][via_id]" id="reg_importacion_0_via_id"
                                        class="form-select form-select-lg fromcss" data-control="select2"
                                        data-placeholder="Seleccione Tipo de Vía..." required>
                                        <option></option>
                                        @foreach (\App\Models\Importacion::TIPOS_VIA as $id => $nombre)
                                            <option value="{{ $id }}">{{ $nombre }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="reg_importacion_0_recomendado" class="form-label fw-bolder">Recomendado</label>
                                    <input type="text" class="form-control fromcss form-control-lg" placeholder="Ingrese el Recomendado..."
                                        name="reg_importacion[0][recomendado]" id="reg_importacion_0_recomendado" value="{{ old('reg_importacion.0.recomendado') }}">
                                </div>
                                <div class="col-md-4">
                                    <label for="reg_importacion_0_valor_cif" class="form-label fw-bolder">Vr CIF Declaración de Importación $</label>
                                    <input type="number" class="form-control fromcss form-control-lg" placeholder="Ingrese el Valor CIF $..."
                                        name="reg_importacion[0][valor_cif]" id="reg_importacion_0_valor_cif" value="{{ old('reg_importacion.0.valor_cif') }}" required>
                                </div>
                                <div class="col-md-4">
                                    <label for="reg_importacion_0_tc" class="form-label fw-bolder">TC</label>
                                    <input type="number" class="form-control fromcss form-control-lg" placeholder="Ingrese el TC..."
                                        name="reg_importacion[0][tc]" id="reg_importacion_0_tc" value="{{ old('reg_importacion.0.tc') }}">
                                </div>
                                <div class="col-md-4">
                                    <label for="reg_importacion_0_factura" class="form-label fw-bolder">Factura</label>
                                    <input type="text" class="form-control fromcss form-control-lg" placeholder="Ingrese el Número de la Factura..."
                                        name="reg_importacion[0][factura]" id="reg_importacion_0_factura" value="{{ old('reg_importacion.0.factura') }}" required>
                                </div>
                                <div class="col-md-4">
                                    <label for="reg_importacion_0_fecha" class="form-label fw-bolder">Fecha</label>
                                    <input type="date" class="form-control fromcss form-control-lg"
                                        name="reg_importacion[0][fecha]" id="reg_importacion_0_fecha" value="{{ old('reg_importacion.0.fecha') }}" required>
                                </div>
                                <div class="col-md-4">
                                    <label for="reg_importacion_0_valor" class="form-label fw-bolder">Valor</label>
                                    <input type="number" class="form-control fromcss form-control-lg" placeholder="Ingrese el Valor..."
                                        name="reg_importacion[0][valor]" id="reg_importacion_0_valor" value="{{ old('reg_importacion.0.valor') }}" required>
                                </div>
                                <div class="col-md-4">
                                    <label for="reg_importacion_0_peso_bruto" class="form-label fw-bolder">Peso Bruto</label>
                                    <input type="number" class="form-control fromcss form-control-lg" placeholder="Ingrese el Peso Bruto..."
                                        name="reg_importacion[0][peso_bruto]" id="reg_importacion_0_peso_bruto" value="{{ old('reg_importacion.0.peso_bruto') }}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>

            <div class="col-12 d-flex justify-content-end mt-5">
                <div class="flex-row g-4 w-100 justify-content-end">
                    <a href="{{ route('importaciones.index') }}" class="btn btn-lg mb-3 btn-cancelar">Cancelar</a>
                    <button class="btn btn-lg mb-3 btn-enviar" type="submit">Guardar</button>
                    <button type="button" class="btn btn-lg mb-3 btn-primary" id="btn-add-reg-importacion">Agregar
                        Registro de Importación</button>
                </div>
            </div>
        </form>
    </div>

    <script>
        // Pasar los datos necesarios a JavaScript desde Blade
        const NOMBRE_MESES = @json(\App\Models\Importacion::NOMBRE_MESES);
        const TIPOS_VIA = @json(\App\Models\Importacion::TIPOS_VIA);
        const PAISES = @json($paises);
        const CIUDADES = @json($ciudades);
        const PRODUCTOS = @json($productos);

        $(document).ready(function() {
            var regIndex = 2; // Iniciar en 1 ya que 0 es el registro predeterminado

            $('#btn-add-reg-importacion').click(function() {
                var container = $('#reg_importaciones_container');
                var index = regIndex++;

                var template = `
                    <div class="reg_importacion card mb-3" id="reg_importacion_${index}">
                        <div class="registros-head-card">
                            <button type="button" class="btn btn-link text-left w-100 btn-toggle-collapse title-head-registro" data-index="${index}">
                                Registro de Importación ${index} <i class="bi bi-caret-down-fill"></i>
                            </button>
                            <button type="button" class="btn btn-danger btn-remove-reg-importacion float-right me-2"><i class="fs-1 bi bi-trash"></i></button>
                        </div>
                        <div id="collapse_${index}" class="collapse show">
                            <div class="card-body">
                                <div class="row g-3">
                                    <!-- Campos de registro de importación -->
                                    <div class="col-md-4">
                                        <label for="reg_importacion_${index}_mes_id" class="form-label fw-bolder">Mes Entrega Carga</label>
                                        <select name="reg_importacion[${index}][mes_id]" id="reg_importacion_${index}_mes_id" class="form-select form-select-lg fromcss" data-control="select2" data-placeholder="Seleccione el Mes..." required>
                                            <option></option>
                                            ${Object.entries(NOMBRE_MESES).map(([id, nombre]) => `<option value="${id}">${nombre}</option>`).join('')}
                                        </select>
                                    </div>

                                    <div class="col-md-4">
                                        <label for="reg_importacion_${index}_pais_origen_id" class="form-label fw-bolder">Origen Despacho</label>
                                        <select name="reg_importacion[${index}][pais_origen_id]" id="reg_importacion_${index}_pais_origen_id" class="form-select form-select-lg fromcss" data-control="select2" data-placeholder="Seleccione Origen del Despacho..." required>
                                            <option></option>
                                            ${PAISES.map(pais => `<option value="${pais.id}">${pais.nombre}</option>`).join('')}
                                        </select>
                                    </div>

                                    <div class="col-md-4">
                                        <label for="reg_importacion_${index}_lugar_despacho_id" class="form-label fw-bolder">Puerto/Aereopuerto Despacho</label>
                                        <select name="reg_importacion[${index}][lugar_despacho_id]" id="reg_importacion_${index}_lugar_despacho_id" class="form-select form-select-lg fromcss" data-control="select2" data-placeholder="Seleccione Lugar del Despacho..." required>
                                            <option></option>
                                            ${CIUDADES.map(ciudad => `<option value="${ciudad.id}">${ciudad.nombre}</option>`).join('')}
                                        </select>
                                    </div>

                                    <div class="col-md-4">
                                        <label for="reg_importacion_${index}_oc_sap" class="form-label fw-bolder">OC - SAP</label>
                                        <input type="text" class="form-control fromcss form-control-lg" name="reg_importacion[${index}][oc_sap]" id="reg_importacion_${index}_oc_sap" placeholder="Ingrese la OC - SAP..." required>
                                    </div>

                                    <div class="col-md-4">
                                        <label for="reg_importacion_${index}_codigo" class="form-label fw-bolder">Código</label>
                                        <input type="text" class="form-control fromcss form-control-lg" name="reg_importacion[${index}][codigo]" id="reg_importacion_${index}_codigo" placeholder="Ingrese el Código...">
                                    </div>

                                    <div class="col-md-4">
                                        <label for="reg_importacion_${index}_producto_id" class="form-label fw-bolder">Producto</label>
                                        <select name="reg_importacion[${index}][producto_id]" id="reg_importacion_${index}_producto_id" class="form-select form-select-lg fromcss" data-control="select2" data-placeholder="Seleccione el Producto..." required>
                                            <option></option>
                                            ${PRODUCTOS.map(producto => `<option value="${producto.id}">${producto.nombre}</option>`).join('')}
                                        </select>
                                    </div>

                                    <div class="col-md-4">
                                        <label for="reg_importacion_${index}_cantidad" class="form-label fw-bolder">Cantidad</label>
                                        <input type="number" step="0.01" class="form-control fromcss form-control-lg" name="reg_importacion[${index}][cantidad]" id="reg_importacion_${index}_cantidad" placeholder="Ingrese la Cantidad..." required>
                                    </div>

                                    <div class="col-md-4">
                                        <label for="reg_importacion_${index}_lote" class="form-label fw-bolder">LOTE</label>
                                        <input type="text" class="form-control fromcss form-control-lg" name="reg_importacion[${index}][lote]" id="reg_importacion_${index}_lote" placeholder="Ingrese el LOTE..." required>
                                    </div>

                                    <div class="col-md-4">
                                        <label for="reg_importacion_${index}_fecha_vto" class="form-label fw-bolder">Fecha Vto.</label>
                                        <input type="date" class="form-control fromcss form-control-lg" name="reg_importacion[${index}][fecha_vto]" id="reg_importacion_${index}_fecha_vto">
                                    </div>

                                    <div class="col-md-4">
                                        <label for="reg_importacion_${index}_pellets_f_fab" class="form-label fw-bolder">Pallets / F. Fab</label>
                                        <input type="text" class="form-control fromcss form-control-lg" name="reg_importacion[${index}][pellets_f_fab]" id="reg_importacion_${index}_pellets_f_fab" placeholder="Ingrese el Pallets / F. Fab...">
                                    </div>

                                    <div class="col-md-4">
                                        <label for="reg_importacion_${index}_ee_lic" class="form-label fw-bolder">EE / LIC</label>
                                        <input type="number" class="form-control fromcss form-control-lg" name="reg_importacion[${index}][ee_lic]" id="reg_importacion_${index}_ee_lic" placeholder="Ingrese la EE / LIC...">
                                    </div>

                                    <div class="col-md-4">
                                        <label for="reg_importacion_${index}_via_id" class="form-label fw-bolder">Vía</label>
                                        <select name="reg_importacion[${index}][via_id]" id="reg_importacion_${index}_via_id" class="form-select form-select-lg fromcss" data-control="select2" data-placeholder="Seleccione Tipo de Vía..." required>
                                            <option></option>
                                            ${Object.entries(TIPOS_VIA).map(([id, nombre]) => `<option value="${id}">${nombre}</option>`).join('')}
                                        </select>
                                    </div>

                                    <div class="col-md-4">
                                        <label for="reg_importacion_${index}_recomendado" class="form-label fw-bolder">Recomendado</label>
                                        <input type="text" class="form-control fromcss form-control-lg" name="reg_importacion[${index}][recomendado]" id="reg_importacion_${index}_recomendado" placeholder="Ingrese el Recomendado...">
                                    </div>

                                    <div class="col-md-4">
                                        <label for="reg_importacion_${index}_valor_cif" class="form-label fw-bolder">Vr CIF Declaración de Importación $</label>
                                        <input type="number" step="0.01" class="form-control fromcss form-control-lg" name="reg_importacion[${index}][valor_cif]" id="reg_importacion_${index}_valor_cif" placeholder="Ingrese el Valor CIF $..." required>
                                    </div>

                                    <div class="col-md-4">
                                        <label for="reg_importacion_${index}_tc" class="form-label fw-bolder">TC</label>
                                        <input type="number" step="0.01" class="form-control fromcss form-control-lg" name="reg_importacion[${index}][tc]" id="reg_importacion_${index}_tc" placeholder="Ingrese el TC...">
                                    </div>

                                    <div class="col-md-4">
                                        <label for="reg_importacion_${index}_factura" class="form-label fw-bolder">Factura</label>
                                        <input type="text" class="form-control fromcss form-control-lg" name="reg_importacion[${index}][factura]" id="reg_importacion_${index}_factura" placeholder="Ingrese el Número de la Factura..." required>
                                    </div>

                                    <div class="col-md-4">
                                        <label for="reg_importacion_${index}_fecha" class="form-label fw-bolder">Fecha</label>
                                        <input type="date" class="form-control fromcss form-control-lg" name="reg_importacion[${index}][fecha]" id="reg_importacion_${index}_fecha" required>
                                    </div>

                                    <div class="col-md-4">
                                        <label for="reg_importacion_${index}_valor" class="form-label fw-bolder">Valor</label>
                                        <input type="number" step="0.01" class="form-control fromcss form-control-lg" name="reg_importacion[${index}][valor]" id="reg_importacion_${index}_valor" placeholder="Ingrese el Valor..." required>
                                    </div>

                                    <div class="col-md-4">
                                        <label for="reg_importacion_${index}_peso_bruto" class="form-label fw-bolder">Peso Bruto</label>
                                        <input type="number" step="0.01" class="form-control fromcss form-control-lg" name="reg_importacion[${index}][peso_bruto]" id="reg_importacion_${index}_peso_bruto" placeholder="Ingrese el Peso bruto..." required>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `;

                container.append(template);

                // Inicializar Select2 para los nuevos elementos agregados
                $(`#reg_importacion_${index}_mes_id`).select2({
                    placeholder: 'Seleccione el Mes...'
                });
                $(`#reg_importacion_${index}_pais_origen_id`).select2({
                    placeholder: 'Seleccione Origen del despacho...'
                });
                $(`#reg_importacion_${index}_lugar_despacho_id`).select2({
                    placeholder: 'Seleccione Lugar del despacho...'
                });
                $(`#reg_importacion_${index}_producto_id`).select2({
                    placeholder: 'Seleccione el Producto...'
                });
                $(`#reg_importacion_${index}_via_id`).select2({
                    placeholder: 'Seleccione Tipo de Vía...'
                });

            });

            $(document).on('click', '.btn-remove-reg-importacion', function() {
                $(this).closest('.reg_importacion').remove();
                updateRegImportacionIndexes();
            });

            $(document).on('click', '.btn-toggle-collapse', function() {
                var index = $(this).data('index');
                $('#collapse_' + index).toggle();
            });

            // Función para actualizar los índices de los registros de importación
            function updateRegImportacionIndexes() {
                $('#reg_importaciones_container .reg_importacion').each(function(index, element) {
                    var newIndex = index; // Ajustar el índice
                    $(element).attr('id', `reg_importacion_${newIndex}`);
                    $(element).find('button.btn-toggle-collapse').attr('data-index', newIndex).html(
                        `Registro de Importación ${newIndex + 1} <i class="bi bi-caret-down-fill"></i>`
                    );
                    $(element).find('.collapse').attr('id', `collapse_${newIndex}`);

                    // Actualizar los nombres e IDs de los campos select
                    $(element).find('select[name^="reg_importacion["]').each(function() {
                        var fieldName = $(this).attr('name').replace(/\[\d+\]/, `[${newIndex}]`);
                        var fieldId = $(this).attr('id').replace(/_\d+_/, `_${newIndex}_`);
                        $(this).attr('name', fieldName).attr('id', fieldId);
                    });

                    // Actualizar los nombres e IDs de los campos input
                    $(element).find('input[name^="reg_importacion["]').each(function() {
                        var fieldName = $(this).attr('name').replace(/\[\d+\]/, `[${newIndex}]`);
                        var fieldId = $(this).attr('id').replace(/_\d+_/, `_${newIndex}_`);
                        $(this).attr('name', fieldName).attr('id', fieldId);
                    });

                    // Campos adicionales: oc_sap, codigo, cantidad, lote, fecha_vto, refrigerado, n_estibas_contenedor, pellets_f_fab, ee_lic, via_id, bl_awb, eta, f_nacionalizacion, recomendado, f_entrega_zol, valor_cif, tc, factura, fecha, valor, peso_bruto
                    $(element).find('input[name^="reg_importacion["], select[name^="reg_importacion["]')
                        .each(function() {
                            var fieldName = $(this).attr('name').replace(/\[\d+\]/, `[${newIndex}]`);
                            var fieldId = $(this).attr('id').replace(/_\d+_/, `_${newIndex}_`);
                            $(this).attr('name', fieldName).attr('id', fieldId);
                        });
                });
            }

        });
    </script>
@endsection