@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 gap-3 flex-wrap">
        <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-upload"></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-file-earmark-spreadsheet"></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="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="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_refrigerado" class="form-label fw-bolder">Refrigerado</label>
                                    <input type="text" class="form-control fromcss form-control-lg" placeholder="Es Refrigerado? S/N..."
                                        name="reg_importacion[0][refrigerado]" id="reg_importacion_0_refrigerado" value="{{ old('reg_importacion.0.refrigerado') }}">
                                </div>
                                <div class="col-md-4">
                                    <label for="reg_importacion_0_n_estibas_contenedor" class="form-label fw-bolder">N° Estibas / N° Contenedor</label>
                                    <input type="text" class="form-control fromcss form-control-lg" placeholder="Ingrese N° Estibas / N° Contenedor..."
                                        name="reg_importacion[0][n_estibas_contenedor]" id="reg_importacion_0_n_estibas_contenedor" value="{{ old('reg_importacion.0.n_estibas_contenedor') }}" 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_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_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_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}_refrigerado" class="form-label fw-bolder">Refrigerado</label>
                                        <input type="text" class="form-control fromcss form-control-lg" name="reg_importacion[${index}][refrigerado]" id="reg_importacion_${index}_refrigerado" placeholder="Es Refrigerado? S/N..." required>
                                    </div>

                                    <div class="col-md-4">
                                        <label for="reg_importacion_${index}_n_estibas_contenedor" class="form-label fw-bolder">N° Estibas / N° Contenedor</label>
                                        <input type="text" class="form-control fromcss form-control-lg" name="reg_importacion[${index}][n_estibas_contenedor]" id="reg_importacion_${index}_n_estibas_contenedor" placeholder="Ingrese N° Estibas / N° Contenedor..." 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}_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}_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}_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
                    $(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