@extends('../layouts/partials/header')

@section('content')

<div class="container mt-3">
    <div class="card text-center">
        <div class="card-header">
            <h5>Nuevo Ingreso de Contenedor</h5>
        </div>

        <div class="card-body">
            <form action="{{ route('stock.store') }}" method="POST">
                @csrf

                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <strong>{{ session('success') }}</strong>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Cerrar"></button>
                    </div>
                    
                @else
                    
                @endif

                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="row mb-5">
                    <div class="col-md-3">
                        <label for="e_eir" class="text-danger fw-bold fs-4">EIR *</label>
                        <input type="hidden" class="form-control" id="e_eir" name="e_eir" value="{{ $stock->e_eir ?? '' }}" readonly>
                    </div>
                </div>

                <div class="row mb-2">
                    <div class="col-md-2">
                        <label class="text-danger fw-bold fs-7" for="e_fecha_entrada">Fecha de Entrada *</label>
                        <input type="date" class="form-control text-center" id="e_fecha_entrada" name="e_fecha_entrada" value="{{ old('e_fecha_entrada', date('Y-m-d')) }}" required>
                    </div>
                    <div class="col-md-2">
                        <label class="text-danger fw-bold fs-7" for="e_hora_entrada">Hora de Entrada *</label>
                        <input type="time" class="form-control text-center" id="e_hora_entrada" name="e_hora_entrada" value="{{ old('e_hora_entrada', date('H:i')) }}" required>
                    </div>
                    <div class="col-md-3">
                        <label for="e_booking">Booking</label>
                        <input type="text" class="form-control" id="e_booking" name="e_booking" maxlength="12" value="{{ old('e_booking') }}" required>
                    </div>
                    <div class="col-md-3">
                        <label for="e_contenedor">Contenedor *</label>
                        <input type="text" id="e_contenedor" name="e_contenedor" class="form-control" maxlength="11" value="{{ old('e_contenedor') }}" required>
                            <small id="contenedorFeedback" class="fw-bold"></small>
                    </div>
                </div>
                
            
                <div class="row mt-4">
                    <div class="col-md-3">
                        <label for="e_bordero">Bordero *</label>
                        <input type="text" class="form-control" id="e_bordero" name="e_bordero" maxlength="12" value="{{ old('e_bordero') }}" required>
                    </div>
                    <div class="col-md-3">
                        <label for="e_bill_of_landing">Bill of Lading *</label>
                        <input type="text" class="form-control" id="e_bill_of_landing" name="e_bill_of_landing" maxlength="20" value="{{ old('e_bill_of_landing') }}" required>
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label class="fw-bold  text-danger fw-bold fs-7">Lleno / Vacío (EDI) *</label>
                        <select name="e_full_empty" class="form-control text-center" required>
                            <option value="">-- Seleccionar --</option>
                            <option value="2" {{ old('e_full_empty', $stock->e_full_empty ?? '2') == '2' ? 'selected' : '' }}>
                                Lleno (2)
                            </option>
                            <option value="4" {{ old('e_full_empty', $stock->e_full_empty ?? '2') == '4' ? 'selected' : '' }}>
                                Vacío (4)
                            </option>
                        </select>
                    </div>
                </div>

                <div class="row mb-2">
                    <div class="col-md-3">
                        <label for="e_carrier">Maniobra*</label>
                        <select id="e_carrier" name="e_carrier" class="form-control text-center" required>
                            <option value="">Seleccione una maniobra</option>
                            <option value="CARRIER" {{ old('e_carrier', $stock->e_carrier ?? 'CARRIER') == 'CARRIER' ? 'selected' : '' }}>CARRIER</option>
                            <option value="MERCHANT" {{ old('e_carrier', $stock->e_carrier ?? 'CARRIER') == 'MERCHANT' ? 'selected' : '' }}>MERCHANT</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="e_transportista">Transportista*</label>
                        <input type="text" class="form-control" id="e_transportista" name="e_transportista" maxlength="50" value="{{ old('e_transportista') }}" required>
                    </div>
                   
                    <div class="col-md-3">
                        <label for="e_naviera">Naviera:</label>
                        <select id="e_naviera" name="e_naviera" class="form-control text-center" required>
                            <option value="">Seleccione una naviera</option>
                            <option value="HAPAG LLOYD" {{ old('e_naviera', $stock->e_naviera ?? 'HAPAG LLOYD') == 'HAPAG LLOYD' ? 'selected' : '' }}>HAPAG LLOYD</option>
                            <option value="SENATOR" {{ old('e_naviera', $stock->e_naviera ?? 'HAPAG LLOYD') == 'SENATOR' ? 'selected' : '' }}>SENATOR</option>
                            <option value="MAERSK" {{ old('e_naviera', $stock->e_naviera ?? 'HAPAG LLOYD') == 'MAERSK' ? 'selected' : '' }}>MAERSK</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="e_tcngy" class="form-label fw-bold">Tipo de Carga(TCNGY)</label>
                        <input type="text" name="e_tcngy" maxLength="20" class="form-control" value="{{ old('e_tcngy') }}" required>
                    </div>
                    </div>

                    <div class="row mt-3 mb-2">
                        <div class="col-md-3">
                            <label for="i_e">Import/Export*</label>
                            <select id="i_e" name="i_e" class="form-control text-center" required>
                                <option value="">Seleccione una opción</option>
                                <option value="I" {{ old('i_e', $stock->i_e ?? 'I') == 'I' ? 'selected' : '' }}>IMPORT</option>
                                <option value="E" {{ old('i_e', $stock->i_e ?? 'I') == 'E' ? 'selected' : '' }}>EXPORT</option>
                            </select>
                        </div>

                        <div class="col-md-3">
                            <label for="i_tipo_carga" class="text-danger fw-bold fs-7">Tipo de Carga (GC/FG/DG)*</label>
                            <select id="i_tipo_carga" name="i_tipo_carga" class="form-control text-center" required>
                                <option value="">Seleccione</option>
                                <option value="GC" {{ old('i_tipo_carga', $stock->i_tipo_carga ?? 'GC') == 'GC' ? 'selected' : '' }}>GC</option>
                                <option value="FG" {{ old('i_tipo_carga', $stock->i_tipo_carga ?? 'GC') == 'FG' ? 'selected' : '' }}>FG</option>
                                <option value="DG" {{ old('i_tipo_carga', $stock->i_tipo_carga ?? 'GC') == 'DG' ? 'selected' : '' }}>DG</option>
                            </select>
                        </div>

                        <div class="col-md-3">
                            <label for="i_tipo_equipo" class="form-label fw-bold">Tipo de equipo (ISO)*</label>
                            <select name="i_tipo_equipo" id="i_tipo_equipo" class="form-select text-center" required>
                                <option value="">-- Selecciona --</option>
                                <option value="22G0" {{ old('i_tipo_equipo', $stock->i_tipo_equipo ?? '45G0') == '22G0' ? 'selected' : '' }}>
                                    20' estándar (22G0)
                                </option>
                                <option value="40HC" {{ old('i_tipo_equipo', $stock->i_tipo_equipo ?? '45G0') == '45G0' ? 'selected' : '' }}>
                                    40' High Cube (40HC)
                                </option>
                            </select>
                        </div>
                    </div>
                    
                        <div class="col-md-3">
                            <label class="text-danger fw-bold fs-7" for="e_sello">Sello</label>
                            <input type="text" class="form-control campo-error" id="e_sello" name="e_sello" value="{{ old('e_sello') }}">
                        </div>
                    

                    <div class="row-mt-3">
                        <div class="col-md-12">
                            <label class="form-label fw-bold">Descripción</label>
                            <textarea name="i_description" class="form-control" rows="3">{{ old('i_description', $stock->i_description ?? '') }}</textarea>
                        </div>
                    </div>
                </div>

                <div class="mb-1 text-center">
                    <button type="submit"
                            class="btn btn-success btn-sm px-4 py-2"
                            id="btnGuardar"
                            disabled>
                        💾 Guardar
                    </button>
                </div>
                {{-- <div class="row mt-3">
                    <div class="col-md-12 text-center">
                        <button type="submit" class="btn btn-primary">Guardar Contenedor</button>
                    </div>
                </div> --}}

            </form>
        </div>
    </div>
</div>

<style>
    .campo-error {
        border: 2px solid red !important;
        color: red !important;
        font-weight: bold !important;
    }
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {

    const inputContenedor = document.getElementById('e_contenedor');
    const feedback = document.getElementById('contenedorFeedback');
    const btnGuardar = document.getElementById('btnGuardar');

    // 🔒 Bloqueado al inicio
    btnGuardar.disabled = true;

    inputContenedor.addEventListener('blur', function () {

        const contenedor = this.value.trim().toUpperCase();
        this.value = contenedor;

        if (!contenedor) {
            feedback.textContent = '';
            btnGuardar.disabled = true;
            return;
        }

        fetch('{{ route('stock.validar.contenedor') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ e_contenedor: contenedor })
        })
        .then(res => res.json())
        .then(data => {

            // ❌ BLOQUEAR
            if (data.status === 'error') {
                feedback.textContent = data.mensaje;
                feedback.className = 'text-danger fw-bold';
                btnGuardar.disabled = true;
                return;
            }

            // ℹ️ PERMITIR CON AVISO (Salida)
            if (data.status === 'info') {
                feedback.textContent = data.mensaje;
                feedback.className = 'text-warning fw-bold';
                btnGuardar.disabled = false;
                return;
            }

            // ✅ PERMITIR
            if (data.status === 'ok') {
                feedback.textContent = data.mensaje;
                feedback.className = 'text-success fw-bold';
                btnGuardar.disabled = false;
                return;
            }

            // fallback
            btnGuardar.disabled = true;
        })
        .catch(() => {
            feedback.textContent = '❌ Error validando contenedor.';
            feedback.className = 'text-danger fw-bold';
            btnGuardar.disabled = true;
        });
    });
});
</script>


@endsection

@extends('../layouts/partials/footer')