@extends('layouts.admin')

@section('page_title', 'Registrar Salida')

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

        <a href="{{ route('patio.inventario.index') }}" class="btn btn-secondary btn-sm">
            <i class="fas fa-arrow-left mr-1"></i> Volver
        </a>
    </div>
@stop

@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.salidas.store', $contenedor->id) }}" enctype="multipart/form-data">
        @csrf

        <div class="row">
            <div class="col-md-12">
                <div class="card card-outline card-primary shadow-sm">
                    <div class="card-body py-3">
                        <div class="row text-sm align-items-center">
                            <div class="col-md-3">
                                <strong>Contenedor:</strong><br>
                                <span class="text-primary">{{ $contenedor->contenedor }}</span>
                            </div>

                            <div class="col-md-3">
                                <strong>Booking:</strong><br>
                                <span>{{ $contenedor->booking ?: '—' }}</span>
                            </div>

                            {{-- <div class="col-md-3">
                                <strong>BL:</strong><br>
                                <span>{{ $contenedor->bill_of_lading ?: '—' }}</span>
                            </div> --}}

                            <div class="col-md-3 text-center">
                                <label class="mb-1 d-block">EIR Salida</label>
                                <span class="badge badge-danger px-3 py-2 shadow-sm" style="font-size: 15px; letter-spacing:1px;">
                                    {{ $eirSalidaPreview }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <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 del Contenedor
                </h3>
            </div>

            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="mb-1">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" class="form-control" value="{{ $contenedor->contenedor }}" readonly>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="mb-1">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" value="{{ $contenedor->booking }}">
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="mb-1" for="tipo_equipo">Tipo de Equipo</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="tipo_equipo" id="tipo_equipo"
                                    class="form-control @error('tipo_equipo') is-invalid @enderror"
                                >
                                <option value="">Seleccione</option>

                                @foreach([
                                    '20DC','40DC','40HC','20RF','40RF',
                                    '20OT','40OT','20FL','40FL','20TK','40TK'
                                ] as $tipo)
                                    <option value="{{ $tipo }}"
                                        {{ old('tipo_equipo', $contenedor->tipo_equipo ?? '') == $tipo ? 'selected' : '' }}>
                                        {{ $tipo }}
                                    </option>
                                @endforeach
                                </select>
                            </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">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">
                            <label class="mb-1">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" value="{{ $contenedor->sello }}">
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group mb-md-0">
                            <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-map-marker-alt"></i></span>
                                </div>
                                <input type="text" class="form-control" value="{{ $contenedor->consignatario }}">
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group mb-md-0">
                            <label class="mb-1">Estado actual</label>
                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-info-circle"></i></span>
                                </div>
                                <input type="text" class="form-control" value="{{ $contenedor->estado }}" readonly>
                            </div>
                        </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', $contenedor->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>
            </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>

        {{-- DATOS DE SALIDA --}}
        <div class="card card-outline card-danger shadow-sm">
            <div class="card-header py-2">
                <h3 class="card-title mb-0">
                    <i class="fas fa-truck-moving mr-1"></i> Datos de Salida
                </h3>
            </div>

            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="mb-1">EIR Salida</label>
                            <div class="input-group input-group-sm">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-receipt"></i></span>
                                </div>
                                <input
                                    type="text"
                                    class="form-control"
                                    value="{{ $eirSalidaPreview }}"
                                    readonly
                                >
                            </div>
                            <small class="text-muted">Se genera automáticamente al registrar la salida.</small>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="mb-1" for="fecha_salida">Fecha Salida *</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_salida"
                                    id="fecha_salida"
                                    class="form-control @error('fecha_salida') is-invalid @enderror"
                                    value="{{ old('fecha_salida', now()->toDateString()) }}"
                                >
                            </div>
                            @error('fecha_salida')
                                <span class="invalid-feedback d-block">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="mb-1" for="hora_salida">Hora Salida *</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_salida"
                                    id="hora_salida"
                                    class="form-control @error('hora_salida') is-invalid @enderror"
                                    value="{{ old('hora_salida', now()->format('H:i')) }}"
                                >
                            </div>
                            @error('hora_salida')
                                <span class="invalid-feedback d-block">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <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-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 salida..."
                    >{{ old('observaciones', $contenedor->observaciones) }}</textarea>
                    @error('observaciones')
                        <span class="invalid-feedback d-block">{{ $message }}</span>
                    @enderror
                </div>

                <div class="form-group mb-0">
                    <label class="mb-1">Fotos de salida</label>

                    <div class="row">
                        @for($i = 1; $i <= 10; $i++)
                            <div class="col-md-6 mb-3">
                                <label style="all: unset;">
                                    <strong>{{ $i }}. Evidencia Fotográfica:</strong>
                                </label>

                                <input
                                    class="form-control foto-salida-input"
                                    type="file"
                                    name="fotos[]"
                                    accept=".jpg,.jpeg,.png,.webp,image/*"
                                >
                            </div>
                        @endfor
                    </div>

                    <small class="form-text text-muted">
                        Puedes cargar hasta 10 imágenes de la salida.
                    </small>

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

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

                    <div id="previewFotosSalida" class="row mt-3"></div>
                </div>

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

                <button type="submit" class="btn btn-danger btn-sm">
                    <i class="fas fa-save mr-1"></i> Registrar salida
                </button>
            </div>
        </div>
    </form>
@stop

@section('js')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const inputs = document.querySelectorAll('.foto-salida-input');
    const preview = document.getElementById('previewFotosSalida');

    inputs.forEach((input, index) => {
        input.addEventListener('change', function (e) {
            const old = document.getElementById('preview-salida-' + index);
            if (old) old.remove();

            const file = e.target.files[0];

            if (!file || !file.type.startsWith('image/')) return;

            const reader = new FileReader();

            reader.onload = function (event) {
                const col = document.createElement('div');
                col.className = 'col-md-3 col-6 mb-3';
                col.id = 'preview-salida-' + index;

                col.innerHTML = `
                    <div class="card shadow-sm">
                        <img src="${event.target.result}"
                             class="card-img-top"
                             style="height: 140px; object-fit: cover;">
                        <div class="card-body p-2 text-center">
                            <small class="text-muted">Foto ${index + 1}</small>
                        </div>
                    </div>
                `;

                preview.appendChild(col);
            };

            reader.readAsDataURL(file);
        });
    });
});
</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