@extends('layouts.index', ['subHeader' => 'Editar 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> / Editar registro</span>
@endsection

@section('js')
    <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 =
                {{ count($importacion->registros) + 1 }}; // Inicializar con el número de registros existentes

            $('#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}_refrigerado`).select2({
                    placeholder: '¿Es Refrigerado?'
                });
                $(`#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);
                    });
                });
            }
        });
    </script>
@endsection

@section('content')
    <div class="d-flex justify-content-end">
        <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">
        <form class="row g-3" action="{{ route('importaciones.update', $importacion->id) }}" method="POST">
            @csrf
            @method('PUT')
            <h1 class="fs-3 fw-bolder">Editar 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', $importacion->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', $importacion->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', $importacion->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', $importacion->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', $importacion->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', $importacion->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', $importacion->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', $importacion->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', $importacion->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">
                @foreach ($importacion->registros as $index => $registro)
                    <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 + 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_{{ $index }}" class="collapse show">
                            <div class="card-body">
                                <div class="row g-3">
                                    <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>
                                            @foreach (\App\Models\Importacion::NOMBRE_MESES as $id => $nombre)
                                                <option value="{{ $id }}"
                                                    {{ $registro->mes_id == $id ? 'selected' : '' }}>{{ $nombre }}
                                                </option>
                                            @endforeach
                                        </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>
                                            @foreach ($paises as $pais)
                                                <option value="{{ $pais->id }}"
                                                    {{ $registro->pais_origen_id == $pais->id ? 'selected' : '' }}>
                                                    {{ $pais->nombre }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="reg_importacion_{{ $index }}_lugar_despacho_id"
                                            class="form-label fw-bolder">Puerto/Aeropuerto 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>
                                            @foreach ($ciudades as $ciudad)
                                                <option value="{{ $ciudad->id }}"
                                                    {{ $registro->lugar_despacho_id == $ciudad->id ? 'selected' : '' }}>
                                                    {{ $ciudad->nombre }}</option>
                                            @endforeach
                                        </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"
                                            value="{{ $registro->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"
                                            value="{{ $registro->codigo }}" placeholder="Ingrese el Código..." required>
                                    </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>
                                            @foreach ($productos as $producto)
                                                <option value="{{ $producto->id }}"
                                                    {{ $registro->producto_id == $producto->id ? 'selected' : '' }}>
                                                    {{ $producto->nombre }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="reg_importacion_{{ $index }}_cantidad"
                                            class="form-label fw-bolder">Cantidad</label>
                                        <input type="number" class="form-control fromcss form-control-lg"
                                            name="reg_importacion[{{ $index }}][cantidad]"
                                            id="reg_importacion_{{ $index }}_cantidad"
                                            value="{{ $registro->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..." value="{{ $registro->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"
                                            value="{{ $registro->fecha_vto }}">
                                    </div>
                                    <div class="col-md-4">
                                        <label for="reg_importacion_{{ $index }}_pellets_f_fab"
                                            class="form-label fw-bolder">Pellets / 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"
                                            value="{{ $registro->pellets_f_fab }}" placeholder="Ingrese el Pellets / 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"
                                            value="{{ $registro->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>
                                            @foreach (\App\Models\Importacion::TIPOS_VIA as $id => $nombre)
                                                <option value="{{ $id }}"
                                                    {{ $registro->via_id == $id ? 'selected' : '' }}>{{ $nombre }}
                                                </option>
                                            @endforeach
                                        </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"
                                            value="{{ $registro->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" class="form-control fromcss form-control-lg"
                                            name="reg_importacion[{{ $index }}][valor_cif]"
                                            id="reg_importacion_{{ $index }}_valor_cif"
                                            value="{{ $registro->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" class="form-control fromcss form-control-lg"
                                            name="reg_importacion[{{ $index }}][tc]"
                                            id="reg_importacion_{{ $index }}_tc" value="{{ $registro->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"
                                            value="{{ $registro->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"
                                            value="{{ $registro->fecha }}" required>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="reg_importacion_{{ $index }}_valor"
                                            class="form-label fw-bolder">Valor</label>
                                        <input type="number" class="form-control fromcss form-control-lg"
                                            name="reg_importacion[{{ $index }}][valor]"
                                            id="reg_importacion_{{ $index }}_valor"
                                            value="{{ $registro->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" class="form-control fromcss form-control-lg"
                                            name="reg_importacion[{{ $index }}][peso_bruto]"
                                            id="reg_importacion_{{ $index }}_peso_bruto"
                                            value="{{ $registro->peso_bruto }}" placeholder="Ingrese el Peso Bruto...">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </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>
@endsection