@extends('layouts.pwa')

@section('title', 'Registrar salida')

@section('content')

@if(session('error'))
    <div class="alert alert-danger">{{ session('error') }}</div>
@endif

@if($errors->any())
    <div class="alert alert-danger">
        <strong>Revisa lo siguiente:</strong>
        <ul class="mb-0">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<div class="card border-0 shadow-sm rounded-4 mb-3">
    <div class="card-body">
        <div class="d-flex justify-content-between">
            <div>
                <h4 class="mb-0">{{ $contenedor->contenedor }}</h4>
                <small class="text-muted">{{ $contenedor->naviera ?: 'Sin naviera' }}</small>
            </div>
            <span class="badge bg-danger">Salida</span>
        </div>

        <hr>

        <div class="row g-2 small">
            <div class="col-6">
                <strong>Estado</strong><br>
                {{ $contenedor->estado }}
            </div>

            <div class="col-6">
                <strong>EIR Salida</strong><br>
                {{ $eirSalidaPreview }}
            </div>

            <div class="col-6">
                <strong>Cliente</strong><br>
                {{ $contenedor->cliente ?: '—' }}
            </div>

            {{-- <div class="col-6">
                <strong>Ubicación</strong><br>
                {{ $contenedor->ubicacion_patio ?: '—' }}
            </div> --}}
        </div>
    </div>
</div>

<form method="POST" action="{{ route('pwa.salidas.store', $contenedor) }}" enctype="multipart/form-data">
    @csrf

    <div class="mb-3">
        <label class="form-label">Booking</label>
        <input type="text"
               name="booking"
               value="{{ old('booking', $contenedor->booking) }}"
               class="form-control form-control-lg">
    </div>

    <div class="mb-3">
        <label class="form-label">Tipo equipo</label>
        <select name="tipo_equipo" class="form-select form-select-lg">
            <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>

    <div class="mb-3">
        <label class="form-label">Sello</label>
        <input type="text"
            name="sello"
            value="{{ $contenedor->sello ?: '—' }}"
            class="form-control form-control-lg"
        >
    </div>

    <div class="mb-3">
        <label class="form-label">Maniobra</label>
        <select name="maniobra" class="form-select form-select-lg">
            <option value="">Seleccione</option>
            <option value="Merchant" {{ old('maniobra', $contenedor->maniobra) == 'Merchant' ? 'selected' : '' }}>Merchant</option>
            <option value="Carrier" {{ old('maniobra', $contenedor->maniobra) == 'Carrier' ? 'selected' : '' }}>Carrier</option>
        </select>
    </div>

    <div class="mb-3">
        <label class="form-label">Forma de pago</label>
        <select name="forma_pago" class="form-select form-select-lg">
            <option value="">Seleccione</option>
            <option value="Naviera" {{ old('forma_pago', $contenedor->forma_pago) == 'Naviera' ? 'selected' : '' }}>Naviera</option>
            <option value="Transferencia" {{ old('forma_pago', $contenedor->forma_pago) == 'Transferencia' ? 'selected' : '' }}>Transferencia</option>
            <option value="Crédito" {{ old('forma_pago', $contenedor->forma_pago) == 'Crédito' ? 'selected' : '' }}>Crédito</option>
        </select>
    </div>

    <div class="mb-3">
        <label class="form-label">Referencia pago</label>
        <input type="text"
               name="referencia_pago"
               value="{{ old('referencia_pago', $contenedor->referencia_pago) }}"
               class="form-control form-control-lg">
    </div>

    {{-- TRANSPORTE --}}
    <div class="mb-3">
        <label class="form-label">Transportista</label>
        <select name="transportista_id" class="form-select form-select-lg">
            <option value="">Seleccione</option>

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

    <div class="mb-3">
        <label class="form-label">Operador</label>
        <input type="text"
            name="operador"
            value="{{ old('operador') }}"
            class="form-control form-control-lg">
    </div>

    <div class="mb-3">
        <label class="form-label">Unidad</label>
        <input type="text"
            name="unidad"
            value="{{ old('unidad') }}"
            class="form-control form-control-lg">
    </div>

    <div class="mb-3">
        <label class="form-label">Placas</label>
        <input type="text"
            name="placas"
            value="{{ old('placas') }}"
            class="form-control form-control-lg">
    </div>

    <div class="row">
        <div class="col-6 mb-3">
            <label class="form-label">Fecha salida</label>
            <input type="date"
                   name="fecha_salida"
                   value="{{ old('fecha_salida', now()->toDateString()) }}"
                   class="form-control form-control-lg">
        </div>

        <div class="col-6 mb-3">
            <label class="form-label">Hora salida</label>
            <input type="time"
                   name="hora_salida"
                   value="{{ old('hora_salida', now()->format('H:i')) }}"
                   class="form-control form-control-lg">
        </div>
    </div>

    <div class="mb-3">
        <label class="form-label">Observaciones</label>
        <textarea name="observaciones"
                  class="form-control"
                  rows="3">{{ old('observaciones', $contenedor->observaciones) }}</textarea>
    </div>

    <div class="mb-3">
        <label class="form-label">Fotos de salida</label>

        @for($i = 1; $i <= 10; $i++)
            <input type="file"
                   name="fotos[]"
                   class="form-control form-control-lg foto-input mb-2"
                   accept="image/*"
                   capture="environment">
        @endfor

        <small class="text-muted">Puedes tomar hasta 10 fotos.</small>
    </div>

    <div id="previewFotos" class="row g-2 mb-3"></div>

    <button type="submit"
            id="btnGuardarSalida"
            class="btn btn-danger btn-lg w-100 rounded-4 mb-2"
            onclick="return confirm('¿Confirmar salida del contenedor {{ $contenedor->contenedor }}?')">
        📤 Registrar salida
    </button>

    <a href="{{ route('pwa.salidas.index') }}"
       class="btn btn-light btn-lg w-100 rounded-4">
        Volver
    </a>
</form>

<script>
document.querySelectorAll('.foto-input').forEach((input, index) => {
    input.addEventListener('change', function (event) {
        const preview = document.getElementById('previewFotos');
        const old = document.getElementById('preview-foto-' + index);
        if (old) old.remove();

        const file = event.target.files[0];
        if (!file || !file.type.startsWith('image/')) return;

        const reader = new FileReader();

        reader.onload = function (e) {
            const col = document.createElement('div');
            col.className = 'col-6';
            col.id = 'preview-foto-' + index;

            col.innerHTML = `
                <div class="card shadow-sm">
                    <img src="${e.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>

@endsection