@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">
            <a href="{{ route('productos.uploadView') }}" class="btn btn-enviar btn-lg">
                <i class="bi bi-upload"></i> Subir Productos
            </a>
        </div>
        <div class="btn-group">
            <a href="{{ route('importaciones.uploadView') }}" class="btn btn-enviar btn-lg">
                <i class="bi bi-file-earmark-spreadsheet"></i> Subir Excel
            </a>
        </div>
        <div class="btn-group">
            <a href="{{ route('importaciones.index') }}" class="btn btn-enviar btn-lg">
                <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="alert alert-danger"><strong>{{ $errors->first() }}</strong></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>

            <!-- MES -->
            <div class="col-md-4">
                <label for="mes_id" class="form-label fw-bolder">Mes</label>
                <select name="mes_id" id="mes_id" class="form-select form-select-lg fromcss" 
                    data-control="select2" data-placeholder="Seleccione un Mes..." required>
                    <option></option>
                    @foreach (\App\Models\Importacion::NOMBRE_MESES as $id => $mes)
                        <option value="{{ $id }}" {{ old('mes_id') == $id ? 'selected' : '' }}>{{ $mes }}</option>
                    @endforeach
                </select>
            </div>

            <!-- SP -->
            <div class="col-md-4">
                <label for="sp" class="form-label fw-bolder">S.P.</label>
                <input type="date" class="form-control fromcss" name="sp" id="sp" value="{{ old('sp') }}" required>
            </div>

            <!-- PAÍS ORIGEN -->
            <div class="col-md-4">
                <label for="pais_origen_id" class="form-label fw-bolder">País de Origen</label>
                <select name="pais_origen_id" id="pais_origen_id" class="form-select form-select-lg fromcss" 
                    data-control="select2" data-placeholder="Seleccione un País..." required>
                    <option></option>
                    @foreach ($paises as $pais)
                        <option value="{{ $pais->id }}" {{ old('pais_origen_id') == $pais->id ? 'selected' : '' }}>
                            {{ $pais->nombre }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- LUGAR DESPACHO -->
            <div class="col-md-4">
                <label for="lugar_despacho_id" class="form-label fw-bolder">Lugar de Despacho</label>
                <select name="lugar_despacho_id" id="lugar_despacho_id" class="form-select form-select-lg fromcss" 
                    data-control="select2" data-placeholder="Seleccione un Lugar..." required>
                    <option></option>
                    @foreach ($ciudades as $ciudad)
                        <option value="{{ $ciudad->id }}" {{ old('lugar_despacho_id') == $ciudad->id ? 'selected' : '' }}>
                            {{ $ciudad->nombre }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- IMPORTE -->
            <div class="col-md-4">
                <label for="impo" class="form-label fw-bolder">N° Impo</label>
                <input type="number" step="0.01" class="form-control fromcss" name="impo" id="impo" value="{{ old('impo') }}" required>
            </div>

            <!-- CÓDIGO -->
            <div class="col-md-4">
                <label for="codigo" class="form-label fw-bolder">Código</label>
                <input type="text" class="form-control fromcss" name="codigo" id="codigo" value="{{ old('codigo') }}" required>
            </div>

            <!-- PRODUCTO -->
            <div class="col-md-4">
                <label for="producto_id" class="form-label fw-bolder">Producto</label>
                <select name="producto_id" id="producto_id" class="form-select form-select-lg fromcss" 
                    data-control="select2" data-placeholder="Seleccione un Producto..." required>
                    <option></option>
                    @foreach ($productos as $producto)
                        <option value="{{ $producto->id }}" {{ old('producto_id') == $producto->id ? 'selected' : '' }}>
                            {{ $producto->nombre }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- CANTIDAD -->
            <div class="col-md-4">
                <label for="cantidad" class="form-label fw-bolder">Cantidad</label>
                <input type="number" class="form-control fromcss" name="cantidad" id="cantidad" value="{{ old('cantidad') }}">
            </div>

            <!-- LOTE -->
            <div class="col-md-4">
                <label for="lote" class="form-label fw-bolder">Lote</label>
                <input type="text" class="form-control fromcss" name="lote" id="lote" value="{{ old('lote') }}">
            </div>

            <!-- FECHA DE VENCIMIENTO -->
            <div class="col-md-4">
                <label for="fecha_vto" class="form-label fw-bolder">Fecha de Vencimiento</label>
                <input type="date" class="form-control fromcss" name="fecha_vto" id="fecha_vto" value="{{ old('fecha_vto') }}">
            </div>

            <!-- REFRIGERADO -->
            <div class="col-md-4">
                <label for="refrigerado" class="form-label fw-bolder">Refrigerado</label>
                <div class="d-flex align-items-center">
                    <!-- Select Sí/No (Predeterminado) -->
                    <select id="refrigerado_select" class="form-select fromcss"
                        data-control="select2" data-placeholder="Seleccione...">
                        <option></option>
                        <option value="SI" {{ old('refrigerado') == 'SI' ? 'selected' : '' }}>SI</option>
                        <option value="NO" {{ old('refrigerado') == 'NO' ? 'selected' : '' }}>NO</option>
                    </select>

                    <!-- Checkbox para activar el input -->
                    <input type="checkbox" id="check_refrigerado" class="form-check-input ms-2">

                    <!-- Input alternativo (Oculto por defecto) -->
                    <input type="text" id="refrigerado_text" class="form-control fromcss ms-2 d-none"
                        placeholder="Especifique otro valor" value="{{ old('refrigerado') }}">
                </div>
                <!-- Input oculto real que enviará el valor final -->
                <input type="hidden" name="refrigerado" id="refrigerado_hidden" value="{{ old('refrigerado') }}">
            </div>

            <!-- N° ESTIBAS CONTENEDOR -->
            <div class="col-md-4">
                <label for="n_estibas_contenedor" class="form-label fw-bolder">N° Estibas Contenedor</label>
                <input type="text" class="form-control fromcss" name="n_estibas_contenedor" id="n_estibas_contenedor" 
                    value="{{ old('n_estibas_contenedor') }}">
            </div>

            <!-- VÍA DE TRANSPORTE -->
            <div class="col-md-4">
                <label for="via_id" class="form-label fw-bolder">Vía de Transporte</label>
                <select name="via_id" id="via_id" class="form-select form-select-lg fromcss" 
                    data-control="select2" data-placeholder="Seleccione un Tipo de Vía..." required>
                    <option></option>
                    @foreach (\App\Models\Importacion::TIPOS_VIA as $id => $via)
                        <option value="{{ $id }}" {{ old('via_id') == $id ? 'selected' : '' }}>{{ $via }}</option>
                    @endforeach
                </select>
            </div>

            <!-- FECHA NACIONALIZACIÓN -->
            <div class="col-md-4">
                <label for="f_nacionalizacion" class="form-label fw-bolder">Fecha de Nacionalización</label>
                <input type="date" class="form-control fromcss" name="f_nacionalizacion" id="f_nacionalizacion" 
                    value="{{ old('f_nacionalizacion') }}">
            </div>

            <!-- FECHA ENTREGA ZOL -->
            <div class="col-md-4">
                <label for="f_entrega_zol" class="form-label fw-bolder">Fecha de Entrega ZOL</label>
                <input type="date" class="form-control fromcss" name="f_entrega_zol" id="f_entrega_zol" 
                    value="{{ old('f_entrega_zol') }}">
            </div>

            <!-- VALOR CIF -->
            <div class="col-md-4">
                <label for="valor_cif" class="form-label fw-bolder">Valor CIF</label>
                <input type="number" step="0.01" class="form-control fromcss" id="valor_cif" name="valor_cif" id="valor_cif" value="{{ old('valor_cif') }}">
                <span class="text-muted" id="valor_cif_formato">$ 0,00</span>
            </div>

            <!-- FACTURA -->
            <div class="col-md-4">
                <label for="factura" class="form-label fw-bolder">Factura</label>
                <input type="text" class="form-control fromcss" name="factura" id="factura" value="{{ old('factura') }}">
            </div>

            <!-- FECHA -->
            <div class="col-md-4">
                <label for="fecha" class="form-label fw-bolder">Fecha</label>
                <input type="date" class="form-control fromcss" name="fecha" id="fecha" value="{{ old('fecha') }}">
            </div>

            <!-- VALOR -->
            <div class="col-md-4">
                <label for="valor" class="form-label fw-bolder">Valor</label>
                <input type="number" step="0.01" class="form-control fromcss" name="valor" id="valor" value="{{ old('valor') }}">
                <span class="text-muted" id="valor_formato">$ 0,00</span>
            </div>

            <!-- BOTONES -->
            <div class="col-8 d-flex justify-content-end mt-5">
                <a href="{{ route('importaciones.index') }}" class="btn btn-lg btn-cancelar mx-2" style="height: max-content;">Cancelar</a>
                <button class="btn btn-lg btn-enviar" type="submit" style="height: max-content;">Guardar</button>
            </div>
        </form>
    </div>
    <script>
        $(document).ready(function() {
            function initSelect2() {
                $('#refrigerado_select').select2({
                    width: '100%',
                    placeholder: function() { return $(this).data('placeholder'); },
                    allowClear: true
                });
            }

            initSelect2(); // Inicializar Select2 al cargar la página

            // Manejo dinámico del checkbox
            $('#check_refrigerado').change(function() {
                if ($(this).is(':checked')) {
                    // Destruir Select2 y ocultar el select
                    $('#refrigerado_select').select2('destroy').hide();
                    $('#refrigerado_text').removeClass('d-none').focus();
                } else {
                    // Mostrar y reinicializar Select2, ocultar input text
                    $('#refrigerado_text').addClass('d-none').val('');
                    $('#refrigerado_select').show();
                    initSelect2();
                }
            });

            // Actualizar el input oculto con el valor seleccionado
            $('#refrigerado_select, #refrigerado_text').on('change keyup', function() {
                let value = $('#check_refrigerado').is(':checked') ? $('#refrigerado_text').val() : $('#refrigerado_select').val();
                $('#refrigerado_hidden').val(value);
            });

            function formatCurrency(value) {
                if (!value) return "$ 0,00";
                return new Intl.NumberFormat('es-CO', { style: 'currency', currency: 'COP' }).format(value);
            }

            function updateFormattedValue(input, spanId) {
                let value = parseFloat($(input).val()) || 0;
                $(spanId).text(formatCurrency(value));
            }

            function limitDecimals(input) {
                let value = $(input).val();
                if (value.includes(".")) {
                    let [integerPart, decimalPart] = value.split(".");
                    if (decimalPart && decimalPart.length > 2) {
                        $(input).val(`${integerPart}.${decimalPart.substring(0, 2)}`);
                    }
                }
            }

            // Inicializar valores si hay datos previos
            updateFormattedValue('#valor_cif', '#valor_cif_formato');
            updateFormattedValue('#valor', '#valor_formato');

            // Evento para actualizar en tiempo real y limitar decimales
            $('#valor_cif, #valor').on('input', function() {
                limitDecimals(this);
                let spanId = $(this).attr('id') === 'valor_cif' ? '#valor_cif_formato' : '#valor_formato';
                updateFormattedValue(this, spanId);
            });
        });
    </script>
@endsection