@extends('layouts.admin')

@section('page_title', 'Nueva Entrada')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1 class="mb-0">Nueva Entrada</h1>
            <small class="text-muted">Registro de entrada operativa del contenedor</small>
        </div>

        <a href="{{ route('patio.entradas.index') }}" class="btn btn-secondary btn-sm">
            <i class="fas fa-arrow-left mr-1"></i> Volver
        </a>
    </div>
@stop
@php
    $clasesPorNaviera = [
        'MAERSK' => ['M', 'K', 'E', 'Q'],
        'HAPAG LLOYD' => ['A', 'B', 'C', 'D', 'FX'],
        'YANG MING' => ['A', 'B', 'C', 'D'],
        'PIL' => ['A', 'B', 'C', 'D'],
    ];
@endphp
@section('admin_content')
    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <strong><i class="fas fa-exclamation-triangle mr-1"></i> Hay errores en el formulario:</strong>
            <ul class="mb-0 mt-2 pl-3">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="close" data-dismiss="alert" aria-label="Cerrar">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    <form method="POST" action="{{ route('patio.entradas.store') }}" enctype="multipart/form-data">
        @csrf

        {{-- RESUMEN --}}
        <div class="card card-outline card-primary shadow-sm">
            <div class="card-body py-3">
                <div class="row text-sm">
                    <div class="col-md-4">
                        <strong>EIR Entrada:</strong><br>
                        <span class="text-primary">{{ $eirEntradaPreview }}</span>
                        <small class="text-muted d-block">Se genera automáticamente al registrar la entrada.</small>
                    </div>
        
                    <div class="col-md-4">
                        <strong>Fecha sugerida:</strong><br>
                        <span>{{ old('fecha_entrada', now()->toDateString()) }}</span>
                    </div>
                    <div class="col-md-4">
                        <strong>Hora sugerida:</strong><br>
                        <span>{{ old('hora_entrada', now()->format('H:i')) }}</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- DATOS GENERALES --}}
        <div class="card card-outline card-secondary shadow-sm">
            <div class="card-header py-2">
                <h3 class="card-title mb-0">
                    <i class="fas fa-box mr-1"></i> Datos Generales
                </h3>
            </div>

            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="mb-1" for="contenedor">Contenedor *</label>
                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-cube"></i></span>
                                </div>
                                <input
                                    type="text"
                                    name="contenedor"
                                    id="contenedor"
                                    class="form-control @error('contenedor') is-invalid @enderror"
                                    value="{{ old('contenedor') }}"
                                    placeholder="Ej. MSKU1234567"
                                >
                            </div>
                            @error('contenedor')
                                <span class="invalid-feedback d-block">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    {{-- <div class="col-md-3">
                        <div class="form-group">
                            <label class="mb-1" for="booking">Booking</label>
                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-hashtag"></i></span>
                                </div>
                                <input
                                    type="text"
                                    name="booking"
                                    id="booking"
                                    class="form-control @error('booking') is-invalid @enderror"
                                    value="{{ old('booking') }}"
                                >
                            </div>
                            @error('booking')
                                <span class="invalid-feedback d-block">{{ $message }}</span>
                            @enderror
                        </div>
                    </div> --}}
                    
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="mb-1" for="full_empty">Full / Empty</label>

                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-box"></i>
                                    </span>
                                </div>

                                <select
                                    name="full_empty"
                                    id="full_empty"
                                    class="form-control @error('full_empty') is-invalid @enderror"
                                >
                                    <option value="">Seleccione</option>
                                    <option value="Lleno" {{ old('full_empty') === 'Lleno' ? 'selected' : '' }}>Lleno</option>
                                    <option value="Vacio" {{ old('full_empty') === 'Vacio' ? 'selected' : '' }}>Vacío</option>
                                </select>
                            </div>

                            @error('full_empty')
                                <span class="invalid-feedback d-block">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    {{-- <div class="col-md-3">
                        <div class="form-group">
                            <label class="mb-1" for="bill_of_lading">BL</label>
                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-file-alt"></i></span>
                                </div>
                                <input
                                    type="text"
                                    name="bill_of_lading"
                                    id="bill_of_lading"
                                    class="form-control @error('bill_of_lading') is-invalid @enderror"
                                    value="{{ old('bill_of_lading') }}"
                                >
                            </div>
                            @error('bill_of_lading')
                                <span class="invalid-feedback d-block">{{ $message }}</span>
                            @enderror
                        </div>
                    </div> --}}

                    {{-- <div class="col-md-3">
                        <div class="form-group">
                            <label class="mb-1" for="sello">Sello</label>
                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-lock"></i></span>
                                </div>
                                <input
                                    type="text"
                                    name="sello"
                                    id="sello"
                                    class="form-control @error('sello') is-invalid @enderror"
                                    value="{{ old('sello') }}"
                                >
                            </div>
                            @error('sello')
                                <span class="invalid-feedback d-block">{{ $message }}</span>
                            @enderror
                        </div>
                    </div> --}}

                    <div class="col-md-3">
                            <div class="form-group">
                                <label class="mb-1" for="naviera_id">Naviera</label>
                                <div class="input-group input-group-sm">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-ship"></i></span>
                                    </div>
                                    <select
                                        name="naviera_id"
                                        id="naviera_id"
                                        class="form-control @error('naviera_id') is-invalid @enderror"
                                    >
                                        <option value="">Seleccione</option>
                                        @foreach($navieras as $naviera)
                                            <option value="{{ $naviera->id }}" {{ (string) old('naviera_id') === (string) $naviera->id ? 'selected' : '' }}>
                                                {{ $naviera->nombre }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                @error('naviera_id')
                                    <span class="invalid-feedback d-block">{{ $message }}</span>
                                @enderror
                            </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="mb-1" for="clase">Clase</label>
                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-layer-group"></i>
                                    </span>
                                </div>
                                <select
                                    name="clase"
                                    id="clase"
                                    class="form-control @error('clase') is-invalid @enderror"
                                >
                                    <option value="">Seleccione</option>
                                </select>
                            </div>
                            @error('clase')
                                <span class="invalid-feedback d-block">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group mb-md-0">
                            <label class="mb-1" for="cliente">Cliente</label>
                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-building"></i></span>
                                </div>
                                <input
                                    type="text"
                                    name="cliente"
                                    id="cliente"
                                    class="form-control @error('cliente') is-invalid @enderror"
                                    value="{{ old('cliente') }}"
                                >
                            </div>
                            @error('cliente')
                                <span class="invalid-feedback d-block">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    {{-- MANIOBRA --}}
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="mb-1">Maniobra</label>
                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-dolly-flatbed"></i>
                                    </span>
                                </div>
                                <select name="maniobra" id="maniobra" class="form-control">
                                    <option value="">Seleccione</option>
                                    <option value="Merchant" {{ old('maniobra') == 'Merchant' ? 'selected' : '' }}>Merchant</option>
                                    <option value="Carrier" {{ old('maniobra') == 'Carrier' ? 'selected' : '' }}>Carrier</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group mb-md-0">
                            <label class="mb-1" for="fecha_entrada">Fecha Entrada *</label>
                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
                                </div>
                                <input
                                    type="date"
                                    name="fecha_entrada"
                                    id="fecha_entrada"
                                    class="form-control @error('fecha_entrada') is-invalid @enderror"
                                    value="{{ old('fecha_entrada', now()->toDateString()) }}"
                                >
                            </div>
                            @error('fecha_entrada')
                                <span class="invalid-feedback d-block">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group mb-md-0">
                            <label class="mb-1" for="hora_entrada">Hora Entrada *</label>
                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="far fa-clock"></i></span>
                                </div>
                                <input
                                    type="time"
                                    name="hora_entrada"
                                    id="hora_entrada"
                                    class="form-control @error('hora_entrada') is-invalid @enderror"
                                    value="{{ old('hora_entrada', now()->format('H:i')) }}"
                                >
                            </div>
                            @error('hora_entrada')
                                <span class="invalid-feedback d-block">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="mb-1">Consignatario</label>

                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-user-tie"></i>
                                    </span>
                                </div>

                                <input type="text"
                                    name="consignatario"
                                    id="consignatario"
                                    class="form-control"
                                    value="{{ old('consignatario', $contenedor->consignatario ?? '') }}"
                                    placeholder="Ingrese consignatario">
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>

        {{-- OPERACIÓN --}}
        {{-- <div class="card card-outline card-info shadow-sm">
            <div class="card-header py-2">
                <h3 class="card-title mb-0">
                    <i class="fas fa-truck-loading mr-1"></i> Operación
                </h3>
            </div>

            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="mb-1" for="tipo_equipo">Tipo Equipo</label>
                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-box-open"></i></span>
                                </div>
                                <input
                                    type="text"
                                    name="tipo_equipo"
                                    id="tipo_equipo"
                                    class="form-control @error('tipo_equipo') is-invalid @enderror"
                                    value="{{ old('tipo_equipo') }}"
                                >
                            </div>
                            @error('tipo_equipo')
                                <span class="invalid-feedback d-block">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>


                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="mb-1" for="tipo_carga">Tipo Carga</label>
                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-dolly"></i></span>
                                </div>
                                <input
                                    type="text"
                                    name="tipo_carga"
                                    id="tipo_carga"
                                    class="form-control @error('tipo_carga') is-invalid @enderror"
                                    value="{{ old('tipo_carga') }}"
                                >
                            </div>
                            @error('tipo_carga')
                                <span class="invalid-feedback d-block">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="mb-1" for="peso">Peso</label>
                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-weight-hanging"></i></span>
                                </div>
                                <input
                                    type="number"
                                    step="0.01"
                                    name="peso"
                                    id="peso"
                                    class="form-control @error('peso') is-invalid @enderror"
                                    value="{{ old('peso') }}"
                                >
                            </div>
                            @error('peso')
                                <span class="invalid-feedback d-block">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="mb-1" for="ubicacion_patio">Ubicación en Patio</label>
                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-map-marker-alt"></i></span>
                                </div>
                                <input
                                    type="text"
                                    name="ubicacion_patio"
                                    id="ubicacion_patio"
                                    class="form-control @error('ubicacion_patio') is-invalid @enderror"
                                    value="{{ old('ubicacion_patio') }}"
                                >
                            </div>
                            @error('ubicacion_patio')
                                <span class="invalid-feedback d-block">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group mb-md-0">
                            <label class="mb-1" for="fecha_entrada">Fecha Entrada *</label>
                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
                                </div>
                                <input
                                    type="date"
                                    name="fecha_entrada"
                                    id="fecha_entrada"
                                    class="form-control @error('fecha_entrada') is-invalid @enderror"
                                    value="{{ old('fecha_entrada', now()->toDateString()) }}"
                                >
                            </div>
                            @error('fecha_entrada')
                                <span class="invalid-feedback d-block">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group mb-md-0">
                            <label class="mb-1" for="hora_entrada">Hora Entrada *</label>
                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="far fa-clock"></i></span>
                                </div>
                                <input
                                    type="time"
                                    name="hora_entrada"
                                    id="hora_entrada"
                                    class="form-control @error('hora_entrada') is-invalid @enderror"
                                    value="{{ old('hora_entrada', now()->format('H:i')) }}"
                                >
                            </div>
                            @error('hora_entrada')
                                <span class="invalid-feedback d-block">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div> --}}
        
        {{-- COBRANZA --}}
        <div class="card card-outline card-success shadow-sm">
            <div class="card-header py-2">
                <h3 class="card-title mb-0">
                    <i class="fas fa-dollar-sign mr-1"></i> Cobranza
                </h3>
            </div>

            <div class="card-body">
                <div class="row">
                    
                    {{-- FORMA DE PAGO --}}
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="mb-1">Forma de Pago</label>
                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-credit-card"></i>
                                    </span>
                                </div>
                                <select name="forma_pago" id="forma_pago" class="form-control">
                                    <option value="">Seleccione</option>
                                    <option value="Naviera" {{ old('forma_pago') == 'Naviera' ? 'selected' : '' }}>Naviera</option>
                                    <option value="Transferencia" {{ old('forma_pago') == 'Transferencia' ? 'selected' : '' }}>Transferencia</option>
                                    <option value="Crédito" {{ old('forma_pago') == 'Crédito' ? 'selected' : '' }}>Crédito</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    {{-- REFERENCIA --}}
                    <div class="col-md-3" id="referencia_container">
                        <div class="form-group">
                            <label class="mb-1">Referencia</label>
                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-hashtag"></i>
                                    </span>
                                </div>
                                <input
                                    type="text"
                                    name="referencia_pago"
                                    id="referencia_pago"
                                    class="form-control"
                                    value="{{ old('referencia_pago') }}"
                                >
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="mb-1">Costo Maniobra</label>

                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-dollar-sign"></i>
                                    </span>
                                </div>

                                <input type="number"
                                    step="0.01"
                                    min="0"
                                    name="costo_maniobra"
                                    id="costo_maniobra"
                                    class="form-control"
                                    value="{{ old('costo_maniobra', '0.00') }}">
                            </div>
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div class="form-group">
                            <label class="mb-1">Moneda</label>

                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-coins"></i>
                                    </span>
                                </div>

                                <select name="moneda_maniobra"
                                    id="moneda_maniobra"
                                    class="form-control">

                                    <option value="MX">MX</option>
                                    <option value="DLLS">DLLS</option>

                                </select>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        {{-- TRANSPORTE --}}
        <div class="card card-outline card-warning shadow-sm">
            <div class="card-header py-2">
                <h3 class="card-title mb-0">
                    <i class="fas fa-route mr-1"></i> Transporte
                </h3>
            </div>

            <div class="card-body">
                <div class="row">
                    {{-- <div class="col-md-3">
                        <div class="form-group">
                            <label class="mb-1" for="transportista_id">Transportista</label>
                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-truck"></i></span>
                                </div>

                                <select name="transportista_id"
                                    id="transportista_id"
                                    class="form-control @error('transportista_id') is-invalid @enderror"
                                >
                                    <option value="">Seleccione</option>

                                    @foreach($transportistas as $t)
                                        <option value="{{ $t->id }}"
                                            {{ old('transportista_id') == $t->id ? 'selected' : '' }}>
                                            {{ $t->nombre }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            @error('transportista_id')
                                <span class="invalid-feedback d-block">{{ $message }}</span>
                            @enderror
                        </div>
                    </div> --}}
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="mb-1" for="transportista">Transportista</label>

                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-truck"></i>
                                    </span>
                                </div>

                                <input type="text"
                                    name="transportista"
                                    id="transportista"
                                    class="form-control"
                                    placeholder="Escriba el transportista">
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="mb-1" for="operador">Operador</label>
                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-user"></i></span>
                                </div>
                                <input
                                    type="text"
                                    name="operador"
                                    id="operador"
                                    class="form-control @error('operador') is-invalid @enderror"
                                    value="{{ old('operador') }}"
                                >
                            </div>
                            @error('operador')
                                <span class="invalid-feedback d-block">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="mb-1" for="unidad">Unidad</label>
                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-trailer"></i></span>
                                </div>
                                <input
                                    type="text"
                                    name="unidad"
                                    id="unidad"
                                    class="form-control @error('unidad') is-invalid @enderror"
                                    value="{{ old('unidad') }}"
                                >
                            </div>
                            @error('unidad')
                                <span class="invalid-feedback d-block">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group mb-0">
                            <label class="mb-1" for="placas">Placas</label>
                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-id-card"></i></span>
                                </div>
                                <input
                                    type="text"
                                    name="placas"
                                    id="placas"
                                    class="form-control @error('placas') is-invalid @enderror"
                                    value="{{ old('placas') }}"
                                >
                            </div>
                            @error('placas')
                                <span class="invalid-feedback d-block">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- OBSERVACIONES Y EVIDENCIAS --}}
        <div class="card card-outline card-dark shadow-sm">
            <div class="card-header py-2">
                <h3 class="card-title mb-0">
                    <i class="fas fa-camera mr-1"></i> Observaciones y Evidencias
                </h3>
            </div>

            <div class="card-body">
                <div class="form-group">
                    <label class="mb-1" for="observaciones">Observaciones</label>
                    <textarea
                        name="observaciones"
                        id="observaciones"
                        rows="3"
                        class="form-control form-control-sm @error('observaciones') is-invalid @enderror"
                        placeholder="Agrega notas operativas de la entrada..."
                    >{{ old('observaciones') }}</textarea>
                    @error('observaciones')
                        <span class="invalid-feedback d-block">{{ $message }}</span>
                    @enderror
                </div>

                <div class="form-group mb-0">
                    <label class="mb-1" for="fotos">Fotos</label>
                    <div class="input-group input-group-sm">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fas fa-images"></i></span>
                        </div>
                        <div class="custom-file">
                            <input
                                type="file"
                                name="fotos[]"
                                id="fotos"
                                class="custom-file-input @error('fotos') is-invalid @enderror @error('fotos.*') is-invalid @enderror"
                                multiple
                            >
                            <label class="custom-file-label" for="fotos">Seleccionar archivos</label>
                        </div>
                    </div>
                    <small class="form-text text-muted">
                        Puedes cargar una o varias imágenes de la entrada.
                    </small>
                    @error('fotos')
                        <span class="invalid-feedback d-block">{{ $message }}</span>
                    @enderror
                    @error('fotos.*')
                        <span class="invalid-feedback d-block">{{ $message }}</span>
                    @enderror
                </div>
            </div>

            <div class="card-footer d-flex justify-content-between">
                <a href="{{ route('patio.entradas.index') }}" class="btn btn-secondary btn-sm">
                    <i class="fas fa-times mr-1"></i> Cancelar
                </a>

                <button type="submit" class="btn btn-primary btn-sm">
                    <i class="fas fa-save mr-1"></i> Guardar Entrada
                </button>
            </div>
        </div>
    </form>
@stop

@section('js')
<script>
document.addEventListener('DOMContentLoaded', function () {

    // ===============================
    // FILE INPUT LABEL
    // ===============================
    const input = document.querySelector('.custom-file-input');
    if (input) {
        input.addEventListener('change', function (e) {
            let label = 'Seleccionar archivos';
            if (e.target.files.length === 1) {
                label = e.target.files[0].name;
            } else if (e.target.files.length > 1) {
                label = e.target.files.length + ' archivos seleccionados';
            }

            const next = e.target.nextElementSibling;
            if (next) {
                next.innerText = label;
            }
        });
    }

    // ===============================
    // CLASE POR NAVIERA
    // ===============================
    const clasesPorNaviera = {
        'MAERSK': ['M','K','E','Q'],
        'HAPAG LLOYD': ['A','B','C','D','FX'],
        'YANG MING': ['A','B','C','D'],
        'PIL': ['A','B','C','D'],
    };

    const navieraSelect = document.getElementById('naviera_id');
    const claseSelect = document.getElementById('clase');

    function normalize(text) {
        return text?.trim().toUpperCase();
    }

    function cargarClases() {
        const selectedText = navieraSelect.options[navieraSelect.selectedIndex]?.text;
        const naviera = normalize(selectedText);

        claseSelect.innerHTML = '<option value="">Seleccione</option>';

        if (clasesPorNaviera[naviera]) {
            clasesPorNaviera[naviera].forEach(c => {
                let opt = document.createElement('option');
                opt.value = c;
                opt.textContent = c;
                claseSelect.appendChild(opt);
            });
        }
    }

    navieraSelect.addEventListener('change', cargarClases);

    // ===============================
    // OCULTAR REFERENCIA SI ES NAVIERA
    // ===============================
    const formaPago = document.getElementById('forma_pago');
    const referencia = document.getElementById('referencia_container');

    function toggleReferencia() {
        if (formaPago.value === 'Naviera') {
            referencia.style.display = 'none';
        } else {
            referencia.style.display = 'block';
        }
    }

    formaPago.addEventListener('change', toggleReferencia);
    toggleReferencia();

});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const navieraSelect = document.getElementById('naviera_id');
    const maniobraSelect = document.getElementById('maniobra');
    const costoInput = document.getElementById('costo_maniobra');
    const monedaSelect = document.getElementById('moneda_maniobra');

    async function actualizarCostoManiobra() {
        const navieraId = navieraSelect?.value || '';
        const maniobra = maniobraSelect?.value || '';

        if (!navieraId || !maniobra) {
            costoInput.value = '0.00';
            monedaSelect.value = 'MX';
            return;
        }

        const url = "{{ route('patio.costos-maniobra.buscar') }}"
            + "?naviera_id=" + encodeURIComponent(navieraId)
            + "&maniobra=" + encodeURIComponent(maniobra);

        try {
            const response = await fetch(url, {
                headers: {
                    'Accept': 'application/json'
                }
            });

            const data = await response.json();

            costoInput.value = parseFloat(data.costo_maniobra || 0).toFixed(2);
            monedaSelect.value = data.moneda_maniobra || 'MX';
        } catch (error) {
            console.error('Error al consultar costo de maniobra:', error);
            costoInput.value = '0.00';
            monedaSelect.value = 'MX';
        }
    }

    navieraSelect?.addEventListener('change', actualizarCostoManiobra);
    maniobraSelect?.addEventListener('change', actualizarCostoManiobra);

    actualizarCostoManiobra();
});
</script>
@stop