@extends('layouts.pwa')

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

@section('content')

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

    <script>
        window.scrollTo({ top: 0, behavior: 'smooth' });
    </script>
@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

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

    <div class="mb-3">
        <label class="form-label">Contenedor</label>
        <input type="text" name="contenedor" value="{{ old('contenedor') }}"
               class="form-control form-control-lg text-uppercase"
               placeholder="MSKU1234567" required autofocus oninput="this.value = this.value.toUpperCase()">
    </div>

    <div class="row">
        <div class="col-6 mb-3">
            <label class="form-label">Fecha</label>
            <input type="date" name="fecha_entrada"
                value="{{ date('Y-m-d') }}"
                class="form-control form-control-lg">
        </div>

        <div class="col-6 mb-3">
            <label class="form-label">Hora</label>
            <input type="time" name="hora_entrada"
                value="{{ date('H:i') }}"
                class="form-control form-control-lg">
        </div>
    </div>

    <div class="mb-3">
        <label class="form-label">Naviera</label>
        <select name="naviera_id" id="naviera_id" class="form-select form-select-lg" required>
            <option value="">Seleccione...</option>
            @foreach($navieras as $naviera)
                <option value="{{ $naviera->id }}" data-nombre="{{ $naviera->nombre }}">
                    {{ $naviera->nombre }}
                </option>
            @endforeach
        </select>
    </div>

    <div class="mb-3">
        <label class="form-label">Clase</label>
        <select name="clase" id="clase" class="form-select form-select-lg">
            <option value="">Seleccione naviera primero...</option>
        </select>
    </div>

    <div class="mb-3">
        <label class="form-label">Full / Empty</label>
        <select name="full_empty" class="form-select form-select-lg">
            <option value="">Seleccione</option>
            <option value="Lleno">Lleno</option>
            <option value="Vacio">Vacío</option>
        </select>
    </div>

    <div class="mb-3">
        <label class="form-label">Tipo equipo</label>
        <select name="tipo_equipo" class="form-select form-select-lg" required>
            <option value="">Seleccione...</option>
            <option value="20DC">20DC</option>
            <option value="40DC">40DC</option>
            <option value="40HC">40HC</option>
            <option value="45HC">45HC</option>
            <option value="20RF">20RF</option>
            <option value="40RF">40RF</option>
            <option value="20OT">20OT</option>
            <option value="40OT">40OT</option>
            <option value="20FR">20FR</option>
            <option value="40FR">40FR</option>
        </select>
    </div>

    <div class="mb-3">
        <label class="form-label">Cliente</label>
        <input type="text" name="cliente" class="form-control form-control-lg">
    </div>



    <div class="mb-3">
        <label class="form-label">Maniobra</label>
        <select name="maniobra" id="maniobra" class="form-select form-select-lg">
            <option value="">Seleccione...</option>
            <option value="Merchant">Merchant</option>
            <option value="Carrier">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">Naviera</option>
            <option value="Transferencia">Transferencia</option>
            <option value="Crédito">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') }}"
               class="form-control form-control-lg">
    </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 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 $t)
                <option value="{{ $t->id }}">{{ $t->nombre }}</option>
            @endforeach
        </select>
    </div> --}}

    <div class="mb-3">
        <label class="form-label">Transportista</label>
        <input type="text" name="transportesta_text" class="form-select form-select-lg">
    </div>

    <div class="mb-3">
        <label class="form-label">Operador</label>
        <input type="text" name="operador" class="form-control form-control-lg">
    </div>

    <div class="mb-3">
        <label class="form-label">Unidad</label>
        <input type="text" name="unidad" class="form-control form-control-lg">
    </div>

    <div class="mb-3">
        <label class="form-label">Placas</label>
        <input type="text" name="placas" class="form-control form-control-lg">
    </div>

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

    <div class="mb-3">
        <label class="form-label">Fotos</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="btnGuardarEntrada" class="btn btn-success btn-lg w-100 mb-2">
        Registrar y continuar
    </button>

    <div id="estadoProceso" class="alert alert-info d-none mt-2">
        Preparando...
    </div>

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

<script>
    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']
    };

    document.getElementById('naviera_id').addEventListener('change', function () {
        const selected = this.options[this.selectedIndex];
        const nombre = (selected.dataset.nombre || '').toUpperCase();

        const claseSelect = document.getElementById('clase');
        claseSelect.innerHTML = '<option value="">Seleccione...</option>';

        let clases = [];

        Object.keys(clasesPorNaviera).forEach(naviera => {
            if (nombre.includes(naviera)) {
                clases = clasesPorNaviera[naviera];
            }
        });

        clases.forEach(clase => {
            const option = document.createElement('option');
            option.value = clase;
            option.textContent = clase;
            claseSelect.appendChild(option);
        });
    });
</script>

<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>
<script>
async function comprimirImagen(file, maxWidth = 1280, quality = 0.75) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        const reader = new FileReader();

        reader.onload = e => {
            img.src = e.target.result;
        };

        img.onload = () => {
            const canvas = document.createElement('canvas');

            let width = img.width;
            let height = img.height;

            if (width > maxWidth) {
                height = Math.round((height * maxWidth) / width);
                width = maxWidth;
            }

            canvas.width = width;
            canvas.height = height;

            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, width, height);

            canvas.toBlob(blob => {
                if (!blob) {
                    reject('No se pudo comprimir la imagen');
                    return;
                }

                const nuevoArchivo = new File(
                    [blob],
                    file.name.replace(/\.[^/.]+$/, '') + '.jpg',
                    { type: 'image/jpeg' }
                );

                resolve(nuevoArchivo);
            }, 'image/jpeg', quality);
        };

        img.onerror = reject;
        reader.onerror = reject;

        reader.readAsDataURL(file);
    });
}

document.querySelector('form').addEventListener('submit', async function (e) {
    e.preventDefault();

    const form = this;
    const boton = document.getElementById('btnGuardarEntrada');

    if (boton) {
        boton.disabled = true;
        boton.innerText = 'Comprimiendo fotos...';
    }

    const formData = new FormData(form);

    formData.delete('fotos[]');

    const inputs = document.querySelectorAll('.foto-input');

    const estado = document.getElementById('estadoProceso');

    const inputsConFoto = Array.from(inputs).filter(input => input.files.length > 0);
    let procesadas = 0;

    if (estado) {
        estado.classList.remove('d-none');
        estado.innerText = `Comprimiendo 0 de ${inputsConFoto.length} fotos...`;
    }

    for (const input of inputsConFoto) {
        procesadas++;

        if (estado) {
            estado.innerText = `Comprimiendo foto ${procesadas} de ${inputsConFoto.length}...`;
        }

        const archivoOriginal = input.files[0];
        const archivoComprimido = await comprimirImagen(archivoOriginal);

        formData.append('fotos[]', archivoComprimido);
    }

    if (boton) {
        boton.innerText = 'Guardando entrada...';
    }

    if (estado) {
        estado.innerText = 'Guardando entrada...';
    }

    fetch(form.action, {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value
        }
    })
    .then(response => {
        if (response.redirected) {
            window.location.href = response.url;
        } else {
            return response.text().then(html => {
                document.open();
                document.write(html);
                document.close();
            });
        }
    })
    .catch(error => {
        alert('No se pudo guardar la entrada.');
        console.error(error);

        if (boton) {
            boton.disabled = false;
            boton.innerText = 'Registrar Entrada';
        }
    });
});
</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);
});
</script>
@endsection