@extends('padre.padre')

@section('contenido')
<div class="container-fluid py-2 px-3" style="max-width: 1600px;">
    {{-- BARRA SUPERIOR COMPACTA (Título + Consecutivo + Selector de Modalidad + Botones en 1 sola fila) --}}
    <div class="card border-0 shadow-sm rounded-3 mb-2 p-2 px-3" style="background: var(--card-bg, #fff);">
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
            {{-- Título y Consecutivo --}}
            <div class="d-flex align-items-center gap-2">
                <span style="font-size: 20px;">📋</span>
                <h5 class="mb-0 fw-bold text-dark">Nueva Remisión</h5>
                <span class="badge bg-primary px-2 py-1 rounded-pill font-monospace" style="font-size: 11.5px;">
                    {{ $proximoNumero }}
                </span>
            </div>

            {{-- Selector Compacto de Modalidad (Segmented Control Pill - Cero espacio desperdiciado) --}}
            <div class="d-flex align-items-center gap-2">
                <div class="btn-group btn-group-sm p-1 rounded-pill bg-light border" role="group">
                    <input type="radio" class="btn-check" name="modalidadRadio" id="radioSalida" value="SALIDA_INMEDIATA" checked onchange="seleccionarModalidad('SALIDA_INMEDIATA')">
                    <label class="btn btn-sm rounded-pill px-3 py-1 fw-bold text-nowrap" for="radioSalida" id="lblSalida">
                        🚚 Salida Inmediata (Kardex)
                    </label>

                    <input type="radio" class="btn-check" name="modalidadRadio" id="radioSeparado" value="SEPARADO_TRANSITORIO" onchange="seleccionarModalidad('SEPARADO_TRANSITORIO')">
                    <label class="btn btn-sm rounded-pill px-3 py-1 fw-bold text-nowrap" for="radioSeparado" id="lblSeparado">
                        🛒 Separado (Para POS)
                    </label>
                </div>
                <span class="badge bg-light text-muted border small d-none d-lg-inline-block" id="badgeModalidadInfo" style="font-size: 11px;">
                    Descuenta inventario y genera asiento 1435
                </span>
            </div>

            {{-- Botones de acción --}}
            <div class="d-flex gap-1">
                <a href="{{ route('remisiones.index') }}" class="btn btn-outline-secondary btn-sm px-2 py-1 rounded-2" title="Volver a la lista">
                    ⬅️ Volver
                </a>
                <button type="button" class="btn btn-light btn-sm px-2 py-1 text-danger border rounded-2" onclick="reiniciarFormulario()" title="Limpiar todo">
                    🔄 Limpiar
                </button>
            </div>
        </div>
    </div>

    <form id="formRemision" onsubmit="guardarRemision(event)">
        @csrf

        {{-- BARRA DE DATOS GENERALES (Cliente, Bodega, Vendedor y Observación en 1 sola fila compacta) --}}
        <div class="card border-0 shadow-sm rounded-3 mb-2 p-2 px-3" style="background: var(--card-bg, #fff);">
            <div class="row g-2 align-items-center">
                {{-- Cliente con buscador autocompletado e indicador de selección --}}
                <div class="col-12 col-md-5 position-relative">
                    <div id="wrapperBuscadorCliente" class="input-group input-group-sm">
                        <span class="input-group-text bg-light text-muted fw-bold" style="font-size: 11px;">CLIENTE *</span>
                        <input type="text" id="inputBuscarCliente" class="form-control" placeholder="Cédula, nombre o tel + [Enter]..." autocomplete="off">
                        <button class="btn btn-primary btn-sm px-2 fw-bold" type="button" onclick="ejecutarBusquedaCliente()" title="Buscar cliente (Enter)">
                            🔍 Buscar
                        </button>
                        <button class="btn btn-outline-secondary btn-sm" type="button" onclick="limpiarCliente()" title="Limpiar">✕</button>
                    </div>
                    <div id="listaResultadosClientes" class="list-group position-absolute w-100 shadow-lg rounded-3" style="display:none; z-index: 1050; max-height: 220px; overflow-y: auto;"></div>

                    {{-- Chip de Cliente Seleccionado --}}
                    <div id="cardClienteSeleccionado" class="d-flex align-items-center justify-content-between p-1 px-2 rounded-2 border bg-light" style="display:none !important; height: 31px;">
                        <div class="d-flex align-items-center gap-1 text-truncate">
                            <span class="badge bg-primary px-1" style="font-size: 10px;">CC</span>
                            <strong class="text-dark small text-truncate" id="txtClienteNombre" style="max-width: 220px;">-</strong>
                            <span class="text-muted small font-monospace" style="font-size: 10.5px;">(<span id="txtClienteCedula">-</span>)</span>
                        </div>
                        <button type="button" class="btn btn-link btn-sm text-primary p-0 text-decoration-none fw-bold" onclick="cambiarCliente()" style="font-size: 11px;">
                            ✎ Cambiar
                        </button>
                    </div>

                    <input type="hidden" id="clienteCedula" required>
                    <input type="hidden" id="clienteNombre" required>
                    <input type="hidden" id="clienteTelefono">
                    <input type="hidden" id="clienteDireccion">
                </div>

                {{-- Bodega --}}
                <div class="col-6 col-md-2">
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-light text-muted" style="font-size: 11px;">📍 BODEGA</span>
                        <select id="selectBodega" class="form-select form-select-sm" onchange="limpiarProductosAlCambiarBodega()">
                            @foreach($bodegas as $b)
                                <option value="{{ $b->id }}" {{ $loop->first ? 'selected' : '' }}>{{ $b->nombreBodega }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                {{-- Vendedor --}}
                <div class="col-6 col-md-2">
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-light text-muted" style="font-size: 11px;">👤 ASESOR</span>
                        <select id="selectVendedor" class="form-select form-select-sm">
                            @foreach($vendedores as $v)
                                <option value="{{ $v->id }}">{{ $v->nombrev }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                {{-- Observaciones Breves --}}
                <div class="col-12 col-md-3">
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-light text-muted" style="font-size: 11px;">📝 NOTA</span>
                        <input type="text" id="observaciones" class="form-control form-control-sm" placeholder="Ej: Domicilio, muestra comercial, entrega obra...">
                    </div>
                </div>
            </div>
        </div>

        {{-- BARRA DE BÚSQUEDA Y ADICIÓN RÁPIDA DE PRODUCTOS (Estilo POS / Escáner de Barras) --}}
        <div class="card border-0 shadow-sm rounded-3 mb-2 p-2 px-3" style="background: var(--card-bg, #fff);">
            <div class="position-relative">
                <div class="input-group input-group-sm shadow-sm rounded-2 overflow-hidden">
                    <span class="input-group-text bg-primary text-white border-0 fw-bold px-3">
                        🔍 ESCÁNER / PRODUCTO
                    </span>
                    <input type="text" id="inputBuscarProducto" class="form-control form-control-sm border-0 bg-light" placeholder="Escribe el nombre, código o pasa el lector de barras y presiona [Enter]..." autocomplete="off">
                    <button class="btn btn-primary px-3 fw-bold" type="button" onclick="ejecutarBusquedaProducto()" title="Buscar producto (Enter)">
                        🔍 Buscar [Enter]
                    </button>
                    <button class="btn btn-light text-muted border-start" type="button" onclick="limpiarBuscadorProducto()" title="Limpiar">✕</button>
                </div>
                {{-- Dropdown de resultados --}}
                <div id="listaResultadosProductos" class="list-group position-absolute w-100 shadow-lg rounded-3" style="display:none; z-index: 1050; max-height: 280px; overflow-y: auto;"></div>
            </div>

            {{-- Muelle Rápido de Configuración (Solo visible cuando se selecciona un ítem) --}}
            <div id="panelProductoActual" class="mt-2 p-2 rounded-2 border" style="display:none; background: #f0f7ff; border-color: #93c5fd !important;">
                <div class="row g-2 align-items-center">
                    {{-- Nombre y stock --}}
                    <div class="col-12 col-lg-3">
                        <div class="d-flex align-items-center gap-1">
                            <span class="badge bg-primary font-monospace" style="font-size: 10px;" id="prodActualCodigoBadge">SKU</span>
                            <strong class="text-dark small text-truncate" id="prodActualNombre" style="max-width: 250px;">-</strong>
                        </div>
                        <div class="d-flex gap-2 mt-1">
                            <span class="badge badge-soft-secondary py-0" style="font-size: 10px;" id="prodActualFactorBadge">Factor: 1</span>
                            <span class="badge badge-soft-success py-0" style="font-size: 10px;" id="prodActualStockBadge">Stock: 0</span>
                        </div>
                    </div>

                    {{-- Cajas --}}
                    <div class="col-6 col-sm-3 col-lg-2">
                        <label class="form-label p-0 m-0 small text-muted" style="font-size: 10px;">Cajas</label>
                        <div class="input-group input-group-sm">
                            <button type="button" class="btn btn-outline-secondary px-2 py-0" onclick="ajustarInput('prodActualCajas', -1)">-</button>
                            <input type="number" step="any" id="prodActualCajas" class="form-control form-control-sm text-center fw-bold font-monospace p-1" value="1" min="0" oninput="recalcularSubtotalActual()">
                            <button type="button" class="btn btn-outline-secondary px-2 py-0" onclick="ajustarInput('prodActualCajas', 1)">+</button>
                        </div>
                    </div>

                    {{-- Fracciones --}}
                    <div class="col-6 col-sm-3 col-lg-2">
                        <label class="form-label p-0 m-0 small text-muted" style="font-size: 10px;">Fracciones</label>
                        <div class="input-group input-group-sm">
                            <button type="button" class="btn btn-outline-secondary px-2 py-0" onclick="ajustarInput('prodActualFrcc', -1)">-</button>
                            <input type="number" step="any" id="prodActualFrcc" class="form-control form-control-sm text-center fw-bold font-monospace p-1" value="0" min="0" oninput="recalcularSubtotalActual()">
                            <button type="button" class="btn btn-outline-secondary px-2 py-0" onclick="ajustarInput('prodActualFrcc', 1)">+</button>
                        </div>
                    </div>

                    {{-- Precio Caja --}}
                    <div class="col-6 col-sm-3 col-lg-2">
                        <label class="form-label p-0 m-0 small text-muted" style="font-size: 10px;">Precio Unit. Caja</label>
                        <input type="number" step="any" id="prodActualPrecioCaja" class="form-control form-control-sm font-monospace fw-bold p-1" oninput="recalcularSubtotalActual()">
                    </div>

                    {{-- Precio Fracción --}}
                    <div class="col-6 col-sm-3 col-lg-1">
                        <label class="form-label p-0 m-0 small text-muted" style="font-size: 10px;">Precio Frc</label>
                        <input type="number" step="any" id="prodActualPrecioFrcc" class="form-control form-control-sm font-monospace fw-bold p-1" oninput="recalcularSubtotalActual()">
                    </div>

                    {{-- Botón Agregar con Subtotal --}}
                    <div class="col-12 col-lg-2 d-flex align-items-end gap-1">
                        <div class="flex-grow-1 text-end pe-2">
                            <span class="text-muted d-block" style="font-size: 9.5px;">Subtotal:</span>
                            <strong class="text-primary font-monospace small" id="prodActualSubtotal">$ 0</strong>
                        </div>
                        <button type="button" class="btn btn-primary btn-sm fw-bold px-3 py-1 rounded-2 shadow-sm" onclick="agregarProductoALaLista()" title="Agregar (Presiona Enter)">
                            ➕ Agregar
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {{-- TABLA DE PRODUCTOS AGREGADOS (Área Principal) --}}
        <div class="card border-0 shadow-sm rounded-3 mb-2 overflow-hidden" style="background: var(--card-bg, #fff);">
            <div class="table-responsive" style="max-height: 480px; min-height: 220px;">
                <table class="table table-hover align-middle mb-0" id="tablaDetalles" style="font-size: 12.5px;">
                    <thead class="table-light sticky-top" style="font-size: 11px; border-bottom: 2px solid var(--border-color, #e2e8f0); z-index: 10;">
                        <tr>
                            <th class="ps-3 py-2 text-muted" style="width: 40px;">#</th>
                            <th class="text-muted" style="width: 120px;">CÓDIGO</th>
                            <th class="text-muted">DESCRIPCIÓN DEL PRODUCTO</th>
                            <th class="text-center text-muted" style="width: 90px;">CAJAS</th>
                            <th class="text-center text-muted" style="width: 90px;">FRCC</th>
                            <th class="text-end text-muted" style="width: 140px;">PRECIO CAJA / FRC</th>
                            <th class="text-end text-muted" style="width: 140px;">SUBTOTAL</th>
                            <th class="text-center text-muted pe-3" style="width: 50px;">QUITAR</th>
                        </tr>
                    </thead>
                    <tbody id="tbodyDetalles">
                        <tr id="filaVacia">
                            <td colspan="8" class="text-center py-5 text-muted">
                                <div style="font-size: 26px; margin-bottom: 4px;">🛒</div>
                                <div class="fw-semibold small">Sin productos en la remisión</div>
                                <span class="text-muted" style="font-size: 11px;">Escribe en la barra de búsqueda o pasa el lector de código de barras.</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        {{-- BARRA INFERIOR DE TOTALES Y GUARDADO (Compacta y Fija/Visible) --}}
        <div class="card border-0 shadow-sm rounded-3 p-2 px-3" style="background: var(--card-bg, #fff);">
            <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
                {{-- Contadores Rápidos --}}
                <div class="d-flex flex-wrap align-items-center gap-3 text-muted small" style="font-size: 12px;">
                    <div>Ítems: <strong class="text-dark" id="resumenCantItems">0</strong></div>
                    <div class="border-start ps-3">Total Cajas: <strong class="text-dark" id="resumenTotalCajas">0</strong></div>
                    <div class="border-start ps-3">Total Fracciones: <strong class="text-dark" id="resumenTotalFrcc">0</strong></div>
                    <div class="border-start ps-3 d-none d-sm-inline-block">Costo Aprox: <span class="text-muted font-monospace" id="resumenTotalCosto">$ 0</span></div>
                </div>

                {{-- Total y Botón Confirmar --}}
                <div class="d-flex align-items-center gap-3 ms-auto">
                    <div class="text-end">
                        <span class="text-muted text-uppercase fw-bold" style="font-size: 10px; letter-spacing: 0.5px;">TOTAL REMISIÓN:</span>
                        <h4 class="fw-bold text-success font-monospace mb-0" id="resumenTotalRemision">$ 0</h4>
                    </div>

                    <button type="submit" id="btnGuardar" class="btn btn-primary px-4 py-2 fw-bold shadow-sm rounded-2 d-flex align-items-center gap-2" style="background: linear-gradient(135deg, #2563eb, #1d4ed8); border:none; font-size: 14px;">
                        <span>💾 Generar Remisión</span>
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

<style>
.btn-check:checked + label {
    background-color: #2563eb !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(37,99,235,0.3) !important;
}
.cliente-resultado-item.active-item,
.prod-resultado-item.active-item {
    background-color: #e0f2fe !important;
    border-left: 4px solid #0284c7 !important;
}

/* Badges con alto contraste y legibilidad universal (Compatibles con Bootstrap 5.0) */
.badge-soft-warning {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
}
.badge-soft-success {
    background-color: #d1fae5 !important;
    color: #065f46 !important;
    border: 1px solid #a7f3d0 !important;
}
.badge-soft-primary {
    background-color: #dbeafe !important;
    color: #1e40af !important;
    border: 1px solid #bfdbfe !important;
}
.badge-soft-info {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
    border: 1px solid #bae6fd !important;
}
.badge-soft-danger {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
}
.badge-soft-secondary {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
}
</style>

<script>
let productosAgregados = [];
let productoSeleccionado = null;
let modalidadActual = 'SALIDA_INMEDIATA';
let listaPreciosProd = { p1: 0, p2: 0, p3: 0 };

// Control de concurrencia para evitar que peticiones atrasadas reabran los dropdowns
let clienteReqSeq = 0;
let clienteSeleccionado = false;
let prodReqSeq = 0;

function escapeHtml(text) {
    if (!text) return '';
    return String(text)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
}

function seleccionarModalidad(mod) {
    modalidadActual = mod;
    const badgeInfo = document.getElementById('badgeModalidadInfo');
    if (mod === 'SALIDA_INMEDIATA') {
        document.getElementById('radioSalida').checked = true;
        badgeInfo.textContent = 'Descuenta inventario en Kardex y contabiliza costo (1435)';
        badgeInfo.className = 'badge badge-soft-primary small d-none d-lg-inline-block';
    } else {
        document.getElementById('radioSeparado').checked = true;
        badgeInfo.textContent = 'Descuenta de inventario en POS y lo restaura al enviar a Cotización';
        badgeInfo.className = 'badge badge-soft-warning small d-none d-lg-inline-block';
    }
}
seleccionarModalidad('SALIDA_INMEDIATA');

// BÚSQUEDA DE CLIENTES (Se ejecuta estrictamente con Enter o clic en Buscar)
function ejecutarBusquedaCliente() {
    const input = document.getElementById('inputBuscarCliente');
    const q = (input.value || '').trim();
    const lista = document.getElementById('listaResultadosClientes');

    if (clienteSeleccionado) {
        return;
    }

    if (q.length < 1) {
        lista.innerHTML = '<div class="list-group-item text-muted small p-2 text-center">Escribe la cédula o nombre y presiona Enter</div>';
        lista.style.display = 'block';
        return;
    }

    const currentSeq = ++clienteReqSeq;
    lista.innerHTML = '<div class="list-group-item text-primary small p-2 text-center">⏳ Buscando cliente...</div>';
    lista.style.display = 'block';

    fetch('{{ route("remisiones.buscarClientes") }}?q=' + encodeURIComponent(q))
        .then(r => r.json())
        .then(data => {
            if (currentSeq !== clienteReqSeq || clienteSeleccionado) return;

            lista.innerHTML = '';
            if (!data || data.length === 0) {
                lista.innerHTML = `<div class="list-group-item text-muted small p-2 text-center">No se encontraron clientes para "<strong>${escapeHtml(q)}</strong>"</div>`;
                lista.style.display = 'block';
                return;
            }

            // Si hay exactamente 1 coincidencia (ej: cédula exacta), seleccionar de inmediato
            if (data.length === 1) {
                seleccionarCliente(data[0]);
                return;
            }

            // Si hay varias coincidencias, listar y resaltar el primero
            data.forEach((c, index) => {
                const item = document.createElement('a');
                item.href = 'javascript:void(0)';
                item.className = 'list-group-item list-group-item-action py-1 px-2 small cliente-resultado-item' + (index === 0 ? ' active-item' : '');
                item.innerHTML = `<strong>${escapeHtml(c.nombre)}</strong> <span class="badge bg-light text-dark border float-end font-monospace">${escapeHtml(c.cedula)}</span><br><span class="text-muted" style="font-size:10.5px;">Tel: ${escapeHtml(c.telefono || 'Sin tel')} - ${escapeHtml(c.direccion || '')}</span>`;
                item.onmousedown = (e) => {
                    e.preventDefault();
                    seleccionarCliente(c);
                };
                lista.appendChild(item);
            });
            lista.style.display = 'block';
        })
        .catch(() => {
            if (currentSeq === clienteReqSeq) {
                lista.innerHTML = '<div class="list-group-item text-danger small p-2 text-center">Error al consultar clientes</div>';
                lista.style.display = 'block';
            }
        });
}

function seleccionarCliente(c) {
    clienteSeleccionado = true;
    clienteReqSeq++;

    document.getElementById('clienteCedula').value = c.cedula;
    document.getElementById('clienteNombre').value = c.nombre;
    document.getElementById('clienteTelefono').value = c.telefono || '';
    document.getElementById('clienteDireccion').value = c.direccion || '';

    document.getElementById('txtClienteNombre').textContent = c.nombre;
    document.getElementById('txtClienteCedula').textContent = c.cedula;

    // Ocultar buscador y mostrar chip limpio
    const lista = document.getElementById('listaResultadosClientes');
    lista.innerHTML = '';
    lista.style.display = 'none';

    document.getElementById('wrapperBuscadorCliente').style.display = 'none';
    document.getElementById('cardClienteSeleccionado').style.setProperty('display', 'flex', 'important');

    // Mover el foco directamente al buscador de productos
    setTimeout(() => {
        const inpProd = document.getElementById('inputBuscarProducto');
        if (inpProd) {
            inpProd.focus();
            inpProd.select();
        }
    }, 80);
}

function cambiarCliente() {
    clienteSeleccionado = false;
    clienteReqSeq++;
    document.getElementById('wrapperBuscadorCliente').style.display = 'flex';
    document.getElementById('cardClienteSeleccionado').style.setProperty('display', 'none', 'important');
    const input = document.getElementById('inputBuscarCliente');
    input.value = '';
    const lista = document.getElementById('listaResultadosClientes');
    lista.innerHTML = '';
    lista.style.display = 'none';
    setTimeout(() => {
        input.focus();
    }, 80);
}

function limpiarCliente() {
    clienteSeleccionado = false;
    clienteReqSeq++;
    document.getElementById('clienteCedula').value = '';
    document.getElementById('clienteNombre').value = '';
    document.getElementById('clienteTelefono').value = '';
    document.getElementById('clienteDireccion').value = '';
    document.getElementById('inputBuscarCliente').value = '';
    const lista = document.getElementById('listaResultadosClientes');
    lista.innerHTML = '';
    lista.style.display = 'none';
}

// BÚSQUEDA DE PRODUCTOS (Se ejecuta estrictamente con Enter o clic en Buscar)
function ejecutarBusquedaProducto() {
    const input = document.getElementById('inputBuscarProducto');
    const q = (input.value || '').trim();
    const lista = document.getElementById('listaResultadosProductos');
    const bodega = document.getElementById('selectBodega').value;

    if (q.length < 1) {
        lista.innerHTML = '<div class="list-group-item text-muted small p-2 text-center">Escribe el código, nombre o código de barras y presiona Enter</div>';
        lista.style.display = 'block';
        return;
    }

    const currentSeq = ++prodReqSeq;
    lista.innerHTML = '<div class="list-group-item text-primary small p-2 text-center">⏳ Buscando productos...</div>';
    lista.style.display = 'block';

    fetch('{{ route("remisiones.buscarProductos") }}?bodega=' + bodega + '&q=' + encodeURIComponent(q))
        .then(r => r.json())
        .then(data => {
            if (currentSeq !== prodReqSeq) return;

            lista.innerHTML = '';
            if (!data || data.length === 0) {
                lista.innerHTML = `<div class="list-group-item text-muted small p-2 text-center">No se encontraron productos coincidentes con "<strong>${escapeHtml(q)}</strong>"</div>`;
                lista.style.display = 'block';
                return;
            }

            // Si hay exactamente 1 producto coincidente (ej: lector de código de barras o código exacto)
            if (data.length === 1) {
                cargarProductoEnPanel(data[0]);
                return;
            }

            // Si hay múltiples productos, mostrarlos en el desplegable con el primero resaltado
            data.forEach((p, index) => {
                const item = document.createElement('a');
                item.href = 'javascript:void(0)';
                item.className = 'list-group-item list-group-item-action py-2 px-3 prod-resultado-item' + (index === 0 ? ' active-item' : '');
                const stkCajas = parseInt(p.cajas_display || 0);
                const stkFrcc = parseInt(p.frcc_display || 0);
                const tieneStock = stkCajas > 0 || stkFrcc > 0;
                item.innerHTML = `
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <strong class="text-dark small">${escapeHtml(p.nombre)}</strong>
                            <div class="text-muted font-monospace" style="font-size: 10.5px;">SKU: ${escapeHtml(p.codigo)} ${p.barras ? '| ' + escapeHtml(p.barras) : ''} • Factor: ${p.factor}</div>
                        </div>
                        <div class="text-end">
                            <span class="badge ${tieneStock ? 'badge-soft-success' : 'badge-soft-danger'} py-0" style="font-size: 10px;">
                                Stock: ${stkCajas} Caj / ${stkFrcc} Frc
                            </span>
                            <div class="fw-bold text-primary font-monospace mt-1 small">$ ${Number(p.precio_caja_1).toLocaleString()}</div>
                        </div>
                    </div>
                `;
                item.onmousedown = (e) => {
                    e.preventDefault();
                    cargarProductoEnPanel(p);
                };
                lista.appendChild(item);
            });
            lista.style.display = 'block';
        })
        .catch(() => {
            if (currentSeq === prodReqSeq) {
                lista.innerHTML = '<div class="list-group-item text-danger small p-2 text-center">Error al consultar productos</div>';
                lista.style.display = 'block';
            }
        });
}

function limpiarBuscadorProducto() {
    prodReqSeq++;
    document.getElementById('inputBuscarProducto').value = '';
    const lista = document.getElementById('listaResultadosProductos');
    lista.innerHTML = '';
    lista.style.display = 'none';
}

function cargarProductoEnPanel(p) {
    prodReqSeq++;
    productoSeleccionado = p;

    const lista = document.getElementById('listaResultadosProductos');
    lista.innerHTML = '';
    lista.style.display = 'none';
    document.getElementById('inputBuscarProducto').value = '';

    document.getElementById('prodActualNombre').textContent = p.nombre;
    document.getElementById('prodActualCodigoBadge').textContent = p.codigo;
    document.getElementById('prodActualFactorBadge').textContent = 'Factor: ' + (p.factor || 1);
    
    const stkCajas = parseInt(p.cajas_display || 0);
    const stkFrcc = parseInt(p.frcc_display || 0);
    const badgeStock = document.getElementById('prodActualStockBadge');
    
    if (stkCajas <= 0 && stkFrcc <= 0) {
        badgeStock.textContent = `Stock: 0 Caj / 0 Frc (SIN STOCK)`;
        badgeStock.className = 'badge badge-soft-danger py-0 fw-bold';
        document.getElementById('prodActualCajas').value = 0;
        document.getElementById('prodActualFrcc').value = 0;
    } else {
        badgeStock.textContent = `Stock: ${stkCajas} Caj / ${stkFrcc} Frc`;
        badgeStock.className = 'badge badge-soft-success py-0';
        if (stkCajas > 0) {
            document.getElementById('prodActualCajas').value = 1;
            document.getElementById('prodActualFrcc').value = 0;
        } else {
            document.getElementById('prodActualCajas').value = 0;
            document.getElementById('prodActualFrcc').value = (Math.round(parseFloat(p.precio_frcc_1) || 0) > 0) ? 1 : 0;
        }
    }

    const prcCaja = Math.round(parseFloat(p.precio_caja_1) || 0);
    const factor = parseFloat(p.factor) || 1;
    let prcFrcc = Math.round(parseFloat(p.precio_frcc_1) || 0);

    document.getElementById('prodActualPrecioCaja').value = prcCaja;
    document.getElementById('prodActualPrecioFrcc').value = prcFrcc;

    document.getElementById('panelProductoActual').style.display = 'block';
    recalcularSubtotalActual();

    setTimeout(() => {
        const cj = document.getElementById('prodActualCajas');
        if (cj) {
            cj.focus();
            cj.select();
        }
    }, 60);
}

function ajustarInput(id, delta) {
    const el = document.getElementById(id);
    let val = (parseFloat(el.value) || 0) + delta;
    if (val < 0) val = 0;
    el.value = val;
    recalcularSubtotalActual();
}

function recalcularSubtotalActual() {
    if (!productoSeleccionado) return;
    const cajas = parseFloat(document.getElementById('prodActualCajas').value) || 0;
    const frcc = parseFloat(document.getElementById('prodActualFrcc').value) || 0;
    const precioCaja = Math.round(parseFloat(document.getElementById('prodActualPrecioCaja').value) || 0);
    const precioFrcc = Math.round(parseFloat(document.getElementById('prodActualPrecioFrcc').value) || 0);
    const factor = parseFloat(productoSeleccionado.factor) || 1;

    const subtotal = Math.round((cajas * precioCaja) + (frcc * precioFrcc));
    document.getElementById('prodActualSubtotal').textContent = '$ ' + subtotal.toLocaleString();

    // Verificación visual instantánea de stock
    const stockDecimal = parseFloat(productoSeleccionado.stock_cajas) || 0;
    const totalFrccDisponibles = Math.round(stockDecimal * factor);
    const totalFrccSolicitadas = Math.round(cajas * factor) + frcc;
    const badgeStock = document.getElementById('prodActualStockBadge');

    if (totalFrccSolicitadas > totalFrccDisponibles) {
        badgeStock.className = 'badge badge-soft-danger py-0 fw-bold';
        badgeStock.textContent = `⚠️ Supera el Stock (${productoSeleccionado.cajas_display || 0} Caj / ${productoSeleccionado.frcc_display || 0} Frc)`;
    } else {
        badgeStock.className = 'badge badge-soft-success py-0';
        badgeStock.textContent = `Stock: ${productoSeleccionado.cajas_display || 0} Caj / ${productoSeleccionado.frcc_display || 0} Frc`;
    }
}

function cerrarDropdowns() {
    const l1 = document.getElementById('listaResultadosClientes');
    if (l1) l1.style.display = 'none';
    const l2 = document.getElementById('listaResultadosProductos');
    if (l2) l2.style.display = 'none';
}

function navegarOpciones(contenedor, selector, delta) {
    const items = contenedor.querySelectorAll(selector);
    if (!items || items.length === 0) return;

    let indexActual = -1;
    items.forEach((it, idx) => {
        if (it.classList.contains('active-item')) {
            indexActual = idx;
            it.classList.remove('active-item');
        }
    });

    let nuevoIndex = indexActual + delta;
    if (nuevoIndex < 0) nuevoIndex = 0;
    if (nuevoIndex >= items.length) nuevoIndex = items.length - 1;

    items[nuevoIndex].classList.add('active-item');
    items[nuevoIndex].scrollIntoView({ block: 'nearest' });
}

// CONTROL DE TECLADO: ENTER, FLECHAS Y ESCAPE
document.addEventListener('keydown', function(e) {
    const activeEl = document.activeElement;
    const activeTag = activeEl ? activeEl.tagName.toLowerCase() : '';
    const activeId = activeEl ? activeEl.id : '';

    // Si está en textarea de observaciones, permitir salto de línea
    if (activeTag === 'textarea') return;

    // 1. ESCAPE: Cerrar dropdowns
    if (e.key === 'Escape') {
        cerrarDropdowns();
        return;
    }

    // 2. FLECHAS ARRIBA / ABAJO: Navegar opciones en listas abiertas
    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
        const delta = e.key === 'ArrowDown' ? 1 : -1;
        const listaClientes = document.getElementById('listaResultadosClientes');
        const listaProds = document.getElementById('listaResultadosProductos');

        if (activeId === 'inputBuscarCliente' && listaClientes.style.display !== 'none') {
            e.preventDefault();
            navegarOpciones(listaClientes, '.cliente-resultado-item', delta);
            return;
        }

        if (activeId === 'inputBuscarProducto' && listaProds.style.display !== 'none') {
            e.preventDefault();
            navegarOpciones(listaProds, '.prod-resultado-item', delta);
            return;
        }
    }

    // 3. ENTER: Manejo inteligente de búsqueda, selección y adición
    if (e.key === 'Enter') {
        // Bloquear SIEMPRE que Enter envíe el formulario accidentalmente
        e.preventDefault();

        // CASO A: Foco en buscador de clientes
        if (activeId === 'inputBuscarCliente') {
            const lista = document.getElementById('listaResultadosClientes');
            const items = lista.querySelectorAll('.cliente-resultado-item');

            // Si ya hay resultados visibles en pantalla, seleccionar el activo
            if (lista.style.display !== 'none' && items.length > 0) {
                const itemActivo = lista.querySelector('.cliente-resultado-item.active-item') || items[0];
                if (itemActivo) {
                    itemActivo.dispatchEvent(new MouseEvent('mousedown'));
                    return;
                }
            }

            // Si no hay lista visible, disparar la búsqueda
            ejecutarBusquedaCliente();
            return;
        }

        // CASO B: Foco en buscador de productos
        if (activeId === 'inputBuscarProducto') {
            const lista = document.getElementById('listaResultadosProductos');
            const items = lista.querySelectorAll('.prod-resultado-item');

            // Si ya hay resultados visibles en pantalla, seleccionar el activo
            if (lista.style.display !== 'none' && items.length > 0) {
                const itemActivo = lista.querySelector('.prod-resultado-item.active-item') || items[0];
                if (itemActivo) {
                    itemActivo.dispatchEvent(new MouseEvent('mousedown'));
                    return;
                }
            }

            // Si no hay lista visible, disparar la búsqueda de producto
            ejecutarBusquedaProducto();
            return;
        }

        // CASO C: Foco dentro del panel de edición del producto actual (cajas, frcc, precio)
        if (productoSeleccionado && document.getElementById('panelProductoActual').style.display !== 'none') {
            if (activeId === 'prodActualCajas' || activeId === 'prodActualFrcc' || activeId === 'prodActualPrecioCaja' || activeId === 'prodActualPrecioFrcc') {
                agregarProductoALaLista();
                return;
            }
        }
    }
});

// Cerrar listas si se hace clic fuera
document.addEventListener('click', function(e) {
    const lClientes = document.getElementById('listaResultadosClientes');
    const wrapCliente = document.getElementById('wrapperBuscadorCliente');
    if (lClientes && wrapCliente && !wrapCliente.contains(e.target)) {
        lClientes.style.display = 'none';
    }

    const lProds = document.getElementById('listaResultadosProductos');
    const inpProd = document.getElementById('inputBuscarProducto');
    if (lProds && inpProd && !inpProd.contains(e.target) && !lProds.contains(e.target)) {
        lProds.style.display = 'none';
    }
});

function agregarProductoALaLista() {
    if (!productoSeleccionado) return;

    const cajas = parseFloat(document.getElementById('prodActualCajas').value) || 0;
    const frcc = parseFloat(document.getElementById('prodActualFrcc').value) || 0;
    const precioCaja = Math.round(parseFloat(document.getElementById('prodActualPrecioCaja').value) || 0);
    const precioFrcc = Math.round(parseFloat(document.getElementById('prodActualPrecioFrcc').value) || 0);
    const factor = parseFloat(productoSeleccionado.factor) || 1;
    const costoCaja = Math.round(parseFloat(productoSeleccionado.costo_caja) || 0);
    let costoFrcc = Math.round(parseFloat(productoSeleccionado.costo_frcc) || 0);

    if (costoFrcc <= 0 && factor > 1 && costoCaja > 0) {
        costoFrcc = Math.round(costoCaja / factor);
    }

    if (cajas <= 0 && frcc <= 0) {
        alert('Debes ingresar al menos 1 caja o 1 fracción.');
        return;
    }

    // Si intenta ingresar fracciones pero el producto no tiene precio de fracción configurado
    if (frcc > 0 && precioFrcc <= 0) {
        alert(`⚠️ El producto '${productoSeleccionado.nombre}' no tiene precio de venta en fracción configurado. No se puede despachar por fracciones.`);
        const fInput = document.getElementById('prodActualFrcc');
        if (fInput) {
            fInput.value = 0;
            fInput.focus();
        }
        recalcularSubtotalActual();
        return;
    }

    // CONTROL DE STOCK DISPONIBLE: No permitir despachar más de lo que hay en inventario
    const stockDecimal = parseFloat(productoSeleccionado.stock_cajas) || 0;
    const totalFrccDisponibles = Math.round(stockDecimal * factor);

    const indexExistente = productosAgregados.findIndex(i => i.codigo === productoSeleccionado.codigo);
    const cajasYaAgregadas = indexExistente >= 0 ? productosAgregados[indexExistente].caja : 0;
    const frccYaAgregadas = indexExistente >= 0 ? productosAgregados[indexExistente].frcc : 0;

    const totalFrccSolicitadas = Math.round((cajas + cajasYaAgregadas) * factor) + (frcc + frccYaAgregadas);

    if (totalFrccSolicitadas > totalFrccDisponibles) {
        const stkCaj = productoSeleccionado.cajas_display || 0;
        const stkFrc = productoSeleccionado.frcc_display || 0;
        alert(`⚠️ Stock insuficiente para '${productoSeleccionado.nombre}'.\n\nStock disponible en bodega: ${stkCaj} Caj / ${stkFrc} Frc.\nIntentas despachar en total: ${cajas + cajasYaAgregadas} Caj / ${frcc + frccYaAgregadas} Frc.`);
        return;
    }

    const subtotal = Math.round((cajas * precioCaja) + (frcc * precioFrcc));
    const costoTotal = Math.round((cajas * costoCaja) + (frcc * costoFrcc));

    if (indexExistente >= 0) {
        productosAgregados[indexExistente].caja += cajas;
        productosAgregados[indexExistente].frcc += frcc;
        productosAgregados[indexExistente].precio_caja = precioCaja;
        productosAgregados[indexExistente].precio_frcc = precioFrcc;
        productosAgregados[indexExistente].subtotal = Math.round((productosAgregados[indexExistente].caja * precioCaja) + (productosAgregados[indexExistente].frcc * precioFrcc));
        productosAgregados[indexExistente].total_costo = Math.round((productosAgregados[indexExistente].caja * costoCaja) + (productosAgregados[indexExistente].frcc * costoFrcc));
    } else {
        productosAgregados.push({
            codigo: productoSeleccionado.codigo,
            nombre: productoSeleccionado.nombre,
            caja: cajas,
            frcc: frcc,
            factor: factor,
            stock_cajas: stockDecimal,
            cajas_display: productoSeleccionado.cajas_display || 0,
            frcc_display: productoSeleccionado.frcc_display || 0,
            precio_caja: precioCaja,
            precio_frcc: precioFrcc,
            costo_caja: costoCaja,
            costo_frcc: costoFrcc,
            subtotal: subtotal,
            total_costo: costoTotal
        });
    }

    productoSeleccionado = null;
    document.getElementById('panelProductoActual').style.display = 'none';
    renderTablaDetalles();
    const inpProd = document.getElementById('inputBuscarProducto');
    if (inpProd) {
        inpProd.value = '';
        setTimeout(() => inpProd.focus(), 60);
    }
}

function renderTablaDetalles() {
    const tbody = document.getElementById('tbodyDetalles');
    tbody.innerHTML = '';

    if (productosAgregados.length === 0) {
        tbody.innerHTML = `
            <tr id="filaVacia">
                <td colspan="8" class="text-center py-5 text-muted">
                    <div style="font-size: 26px; margin-bottom: 4px;">🛒</div>
                    <div class="fw-semibold small">Sin productos en la remisión</div>
                    <span class="text-muted" style="font-size: 11px;">Escribe en la barra de búsqueda o pasa el lector de código de barras.</span>
                </td>
            </tr>
        `;
        actualizarTotales();
        return;
    }

    productosAgregados.forEach((item, index) => {
        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td class="ps-3 text-muted small">${index + 1}</td>
            <td class="font-monospace small"><span class="badge bg-light text-dark border">${item.codigo}</span></td>
            <td>
                <div class="fw-bold text-dark text-truncate" style="max-width: 380px;">${item.nombre}</div>
                <small class="text-muted" style="font-size: 10.5px;">Factor: ${item.factor} • Disp: <span class="badge badge-soft-success py-0" style="font-size: 9.5px;">${item.cajas_display} Caj / ${item.frcc_display} Frc</span></small>
            </td>
            <td class="text-center">
                <input type="number" step="any" min="0" class="form-control form-control-sm text-center fw-bold mx-auto font-monospace p-1" style="width: 75px;" value="${item.caja}" onchange="modificarCantidadDirecta(${index}, 'caja', this.value)">
            </td>
            <td class="text-center">
                <input type="number" step="any" min="0" class="form-control form-control-sm text-center fw-bold mx-auto font-monospace p-1" style="width: 75px;" value="${item.frcc}" onchange="modificarCantidadDirecta(${index}, 'frcc', this.value)">
            </td>
            <td class="text-end font-monospace text-muted small">
                <div>$ ${Math.round(item.precio_caja).toLocaleString()} <span style="font-size:10px;">Caj</span></div>
                <div class="text-primary fw-semibold" style="font-size:11px;">$ ${Math.round(item.precio_frcc).toLocaleString()} <span style="font-size:10px;">Frc</span></div>
            </td>
            <td class="text-end fw-bold font-monospace text-success">
                $ ${Math.round(item.subtotal).toLocaleString()}
            </td>
            <td class="text-center pe-3">
                <button type="button" class="btn btn-sm btn-outline-danger border-0 p-1 rounded-circle" title="Eliminar ítem" onclick="quitarProducto(${index})">
                    🗑️
                </button>
            </td>
        `;
        tbody.appendChild(tr);
    });

    actualizarTotales();
}

function modificarCantidadDirecta(index, campo, nuevoValor) {
    let val = parseFloat(nuevoValor) || 0;
    if (val < 0) val = 0;

    const item = productosAgregados[index];

    // No permitir despachar fracciones si el producto no tiene precio de fracción configurado
    if (campo === 'frcc' && val > 0 && (!item.precio_frcc || item.precio_frcc <= 0)) {
        alert(`⚠️ El producto '${item.nombre}' no tiene precio de venta en fracción configurado. No se puede despachar por fracciones.`);
        renderTablaDetalles();
        return;
    }

    const cajaTest = campo === 'caja' ? val : item.caja;
    const frccTest = campo === 'frcc' ? val : item.frcc;
    const factor = parseFloat(item.factor) || 1;

    // Validar contra stock disponible
    const totalFrccDisponibles = Math.round((parseFloat(item.stock_cajas) || 0) * factor);
    const totalFrccSolicitadas = Math.round(cajaTest * factor) + frccTest;

    if (totalFrccSolicitadas > totalFrccDisponibles) {
        alert(`⚠️ Stock insuficiente para '${item.nombre}'.\n\nStock disponible en bodega: ${item.cajas_display} Caj / ${item.frcc_display} Frc.\nIntentas despachar: ${cajaTest} Caj / ${frccTest} Frc.`);
        renderTablaDetalles();
        return;
    }

    item[campo] = val;
    item.subtotal = Math.round((item.caja * item.precio_caja) + (item.frcc * item.precio_frcc));
    item.total_costo = Math.round((item.caja * item.costo_caja) + (item.frcc * item.costo_frcc));

    renderTablaDetalles();
}

function quitarProducto(index) {
    productosAgregados.splice(index, 1);
    renderTablaDetalles();
}

function actualizarTotales() {
    let cantItems = productosAgregados.length;
    let totalCajas = 0;
    let totalFrcc = 0;
    let total = 0;
    let totalCosto = 0;

    productosAgregados.forEach(i => {
        totalCajas += i.caja;
        totalFrcc += i.frcc;
        total += i.subtotal;
        totalCosto += (i.total_costo || 0);
    });

    document.getElementById('resumenCantItems').textContent = cantItems;
    document.getElementById('resumenTotalCajas').textContent = totalCajas;
    document.getElementById('resumenTotalFrcc').textContent = totalFrcc;
    document.getElementById('resumenTotalCosto').textContent = '$ ' + Math.round(totalCosto).toLocaleString();
    document.getElementById('resumenTotalRemision').textContent = '$ ' + Math.round(total).toLocaleString();
}

function limpiarProductosAlCambiarBodega() {
    if (productosAgregados.length > 0) {
        if (confirm('Al cambiar la bodega se reiniciará la lista de productos para verificar los inventarios disponibles. ¿Deseas continuar?')) {
            productosAgregados = [];
            renderTablaDetalles();
        }
    }
}

function reiniciarFormulario() {
    if (confirm('¿Deseas limpiar todos los campos del formulario?')) {
        productosAgregados = [];
        renderTablaDetalles();
        limpiarCliente();
        document.getElementById('observaciones').value = '';
    }
}

function guardarRemision(e) {
    e.preventDefault();

    const cedula = document.getElementById('clienteCedula').value;
    const nombre = document.getElementById('clienteNombre').value;

    if (!cedula || !nombre) {
        alert('⚠️ Selecciona un cliente para la remisión.');
        document.getElementById('inputBuscarCliente').focus();
        return;
    }

    if (productosAgregados.length === 0) {
        alert('⚠️ Agrega al menos un producto a la remisión.');
        document.getElementById('inputBuscarProducto').focus();
        return;
    }

    const btn = document.getElementById('btnGuardar');
    btn.disabled = true;
    btn.innerHTML = '<span>⏳ Guardando...</span>';

    const payload = {
        _token: '{{ csrf_token() }}',
        idbodega: document.getElementById('selectBodega').value,
        vendedor_id: document.getElementById('selectVendedor').value,
        vendedor_nombre: document.getElementById('selectVendedor').options[document.getElementById('selectVendedor').selectedIndex].text,
        cliente_cedula: cedula,
        cliente_nombre: nombre,
        cliente_telefono: document.getElementById('clienteTelefono').value,
        cliente_direccion: document.getElementById('clienteDireccion').value,
        modalidad: modalidadActual,
        observaciones: document.getElementById('observaciones').value,
        productos: productosAgregados
    };

    fetch('{{ route("remisiones.store") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify(payload)
    })
    .then(r => r.json())
    .then(data => {
        btn.disabled = false;
        btn.innerHTML = '<span>💾 Generar Remisión</span>';

        if (data.success) {
            alert('🎉 ' + data.message);
            window.location.href = '{{ url("/remisiones/ver") }}/' + data.remision_id;
        } else {
            alert('❌ ' + data.message);
        }
    })
    .catch(() => {
        btn.disabled = false;
        btn.innerHTML = '<span>💾 Generar Remisión</span>';
        alert('Error al comunicarse con el servidor.');
    });
}
</script>
@endsection