@extends('layouts.app')

@section('titulo', 'Punto de Venta')

@section('contenido')

<style>
    .pos-fullscreen-tight .p-4 { padding: .65rem !important; }
    .pos-fullscreen-tight .p-3 { padding: .55rem !important; }
    .pos-fullscreen-tight .space-y-3 > * + * { margin-top: .55rem !important; }
    .pos-fullscreen-tight .space-y-2 > * + * { margin-top: .35rem !important; }
    .pos-fullscreen-tight .p-2 { padding: .35rem !important; }
    .pos-fullscreen-tight .gap-4 { gap: .55rem !important; }
    body.pos-menu-hidden main { width: 100vw !important; max-width: none !important; padding-left: .5rem !important; padding-right: .5rem !important; }
    body.pos-menu-hidden main > * { width: 100% !important; max-width: none !important; }
    body.pos-menu-hidden .pos-fullscreen-tight { width: 100% !important; max-width: none !important; }

    /* Estilos para el modal de WhatsApp */
    .whatsapp-modal .modal-content {
        border-radius: 16px;
        border: none;
        box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    }
    .whatsapp-modal .modal-header {
        border-bottom: 1px solid #e5e7eb;
        padding: 20px 24px;
    }
    .whatsapp-modal .modal-body {
        padding: 24px;
    }
    .whatsapp-modal .modal-footer {
        border-top: 1px solid #e5e7eb;
        padding: 16px 24px;
    }
    .whatsapp-number-input {
        border: 2px solid #e5e7eb;
        border-radius: 10px;
        padding: 10px 14px;
        font-size: 16px;
        transition: border-color 0.2s;
    }
    .whatsapp-number-input:focus {
        border-color: #25D366;
        outline: none;
        box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1);
    }
    .whatsapp-number-input .prefix {
        color: #6b7280;
        font-weight: 600;
    }
    .whatsapp-number-input input {
        border: none;
        outline: none;
        background: transparent;
        width: 100%;
        font-size: 16px;
        padding: 4px 0;
    }
    .btn-whatsapp {
        background: #25D366;
        color: white;
        border: none;
        border-radius: 10px;
        padding: 10px 20px;
        font-weight: 600;
        transition: background 0.2s;
    }
    .btn-whatsapp:hover {
        background: #1da851;
        color: white;
    }
    .btn-whatsapp:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    /* =========================================================
       ESTILOS PARA EL CARRITO CON SCROLL
    ========================================================== */
    .pos-cart-scroll {
        max-height: 200px;
        overflow-y: auto;
        padding-right: 4px;
        scroll-behavior: smooth;
    }

    .pos-cart-scroll::-webkit-scrollbar {
        width: 4px;
    }

    .pos-cart-scroll::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 4px;
    }

    .pos-cart-scroll::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 4px;
    }

    .pos-cart-scroll::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

    .pos-cart-scroll {
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 #f1f5f9;
    }

    /* En pantallas grandes, más altura */
    @media (min-width: 1280px) {
        .pos-cart-scroll {
            max-height: 280px;
        }
    }

    /* En modo fullscreen, aún más altura */
    body.pos-menu-hidden .pos-cart-scroll {
        max-height: 350px;
    }

    /* Panel derecho con estructura fija */
    .pos-panel-fixed {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 200px);
    }

    .pos-panel-scroll {
        flex: 1;
        overflow-y: auto;
        padding: 0;
    }

    .pos-panel-scroll::-webkit-scrollbar {
        width: 4px;
    }

    .pos-panel-scroll::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 4px;
    }

    .pos-panel-scroll::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 4px;
    }

    .pos-panel-scroll {
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 #f1f5f9;
    }

    .pos-panel-footer {
        flex-shrink: 0;
        border-top: 1px solid #e2e8f0;
    }

    /* Estilo para la unidad de medida clickeable */
    .unidad-medida-clickable {
        cursor: pointer;
        transition: all 0.2s;
        user-select: none;
        display: inline-block;
        padding: 2px 6px;
        border-radius: 4px;
        font-weight: 700;
    }
    .unidad-medida-clickable:hover {
        background: #dbeafe;
        color: #1d4ed8;
    }
    .unidad-medida-clickable.changing {
        animation: pulse-badge 0.3s ease;
    }
    @keyframes pulse-badge {
        0% { transform: scale(1); }
        50% { transform: scale(1.15); background: #dbeafe; color: #1d4ed8; }
        100% { transform: scale(1); }
    }

    /* Estilo para el botón Agregar producto con foco */
    .btn-agregar-producto:focus {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
        background: #f0f9ff;
        border-color: #2563eb;
    }

    /* Badge de unidad en el carrito */
    .badge-unidad {
        display: inline-block;
        padding: 1px 8px;
        border-radius: 4px;
        font-size: 9px;
        font-weight: 700;
        background: #dbeafe;
        color: #1d4ed8;
        letter-spacing: 0.5px;
    }
</style>

<div
    x-data="posApp()"
    x-init="init()"
    @keydown.escape.window.capture="cerrarSelectorTeclado()"
    class="space-y-4" :class="menuLateralOculto ? 'pos-fullscreen-tight' : ''"
>

    <button
        type="button"
        x-show="menuLateralOculto"
        x-cloak
        @click="alternarMenuLateral()"
        class="pos-menu-toggle inline-flex items-center gap-2 px-3 py-2 rounded-xl bg-slate-800 text-white text-xs font-bold shadow-lg hover:bg-slate-700"
        title="Mostrar menú lateral (F4)"
    >
        ☰ Menú <kbd class="px-1.5 py-0.5 rounded bg-white/10">F4</kbd>
    </button>

    {{-- =========================================================
         HEADER
    ========================================================== --}}

    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">

        <div class="flex items-center gap-3">

            <div class="w-11 h-11 rounded-xl bg-brand-100 text-brand-600 flex items-center justify-center">
                <x-icon name="shopping-cart" />
            </div>

            <div>
                <h1 class="text-lg font-bold text-slate-800">
                    Punto de Venta
                </h1>

                <div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-slate-400">

                    <span>
                        Local:
                        <strong
                            class="text-slate-600"
                            x-text="contextoCaja.local_nombre || '—'"
                        ></strong>
                    </span>

                    <span>•</span>

                    <span>
                        POS:
                        <strong
                            class="text-slate-600"
                            x-text="contextoCaja.punto_venta_nombre || '—'"
                        ></strong>
                    </span>

                    <span>•</span>

                    <span>
                        Almacén:
                        <strong
                            class="text-slate-600"
                            x-text="contextoCaja.almacen_nombre || '—'"
                        ></strong>
                    </span>

                    <span
                        x-show="contextoCaja.caja_id"
                        x-cloak
                        class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-emerald-50 text-emerald-600 font-bold"
                    >
                        ● Caja abierta
                    </span>

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

        <div class="flex items-center gap-2 flex-wrap">

            <button
                type="button"
                @click="usarCodigoBarras = !usarCodigoBarras"
                class="inline-flex items-center gap-2 px-3 py-2 rounded-xl border text-xs font-semibold transition"
                :class="usarCodigoBarras
                    ? 'border-brand-200 bg-brand-50 text-brand-700'
                    : 'border-slate-200 bg-white text-slate-500'"
            >
                <span
                    class="relative w-8 h-4 rounded-full transition"
                    :class="usarCodigoBarras ? 'bg-brand-600' : 'bg-slate-300'"
                >
                    <span
                        class="absolute top-0.5 left-0.5 w-3 h-3 bg-white rounded-full shadow transition"
                        :class="usarCodigoBarras ? 'translate-x-4' : ''"
                    ></span>
                </span>
                Código de barras
            </button>

            <button
                type="button"
                @click="ocultarSinStock = !ocultarSinStock"
                class="inline-flex items-center gap-2 px-3 py-2 rounded-xl border text-xs font-semibold transition"
                :class="ocultarSinStock
                    ? 'border-brand-200 bg-brand-50 text-brand-700'
                    : 'border-slate-200 bg-white text-slate-500'"
            >
                <span
                    class="relative w-8 h-4 rounded-full transition"
                    :class="ocultarSinStock ? 'bg-brand-600' : 'bg-slate-300'"
                >
                    <span
                        class="absolute top-0.5 left-0.5 w-3 h-3 bg-white rounded-full shadow transition"
                        :class="ocultarSinStock ? 'translate-x-4' : ''"
                    ></span>
                </span>
                Ocultar sin stock
            </button>

            <button
                type="button"
                @click="mostrarAtajos = true"
                class="w-9 h-9 rounded-xl bg-slate-100 text-slate-600 hover:bg-slate-200"
                title="Atajos"
            >
                ⌨
            </button>

            <button
                type="button"
                @click="fullscreen()"
                class="w-9 h-9 rounded-xl bg-slate-100 text-slate-600 hover:bg-slate-200"
                title="Pantalla completa"
            >
                ⛶
            </button>

            <div class="w-10 h-9 rounded-xl bg-brand-600 text-white flex items-center justify-center font-black text-sm">
                S/
            </div>

        </div>

    </div>


    {{-- =========================================================
         POS PRINCIPAL
    ========================================================== --}}

    <div class="grid grid-cols-1 xl:grid-cols-12 gap-4">

        {{-- =====================================================
             PRODUCTOS
        ====================================================== --}}

        <div :class="menuLateralOculto ? 'xl:col-span-10' : 'xl:col-span-8'" class="space-y-3 min-w-0">

            {{-- OFERTAS / COMBOS --}}

            <div
                x-show="ofertasCarrusel.length > 0 || combosCarrusel.length > 0"
                x-cloak
                class="ofertas-ticker-viewport relative overflow-hidden rounded-2xl py-1"
            >
                <div class="ofertas-ticker-track flex gap-3 w-max">

                <template
                    x-for="(oferta, tickerIndex) in ofertasCarrusel"
                    :key="'oferta-' + oferta.id + '-' + tickerIndex"
                >
                    <div class="shrink-0 w-48 rounded-2xl bg-gradient-to-br from-rose-500 to-orange-500 text-white p-3 shadow-lg">

                        <div class="text-[9px] font-black uppercase tracking-wide opacity-80">
                            Oferta
                        </div>

                        <div
                            class="text-xs font-black mt-1 leading-tight"
                            x-text="oferta.nombre"
                        ></div>

                        <div class="text-[10px] mt-2 opacity-90 font-bold"
                             x-text="textoOferta(oferta)"></div>

                    </div>
                </template>

                <template
                    x-for="(combo, tickerIndex) in combosCarrusel"
                    :key="'combo-' + combo.id + '-' + tickerIndex"
                >
                    <button
                        type="button"
                        :disabled="combo.stock_suficiente === false"
                        @click="combo.stock_suficiente === false ? null : agregarComboAlCarrito(combo)"
                        class="shrink-0 w-48 text-left rounded-2xl p-3 shadow-lg transition"
                        :class="combo.stock_suficiente === false ? 'bg-slate-300 text-slate-500 cursor-not-allowed opacity-80' : 'bg-gradient-to-br from-brand-600 to-brand-700 text-white hover:scale-[1.02]'"
                    >
                        <div class="text-[9px] font-black uppercase tracking-wide opacity-80">
                            Combo
                        </div>

                        <div
                            class="text-xs font-black mt-1 leading-tight"
                            x-text="combo.nombre"
                        ></div>

                        <div class="flex items-center justify-between mt-2">
                            <span
                                class="text-sm font-black"
                                x-text="'S/ ' + Number(combo.precio || 0).toFixed(2)"
                            ></span>

                            <span class="text-[9px] px-2 py-0.5 rounded-full" :class="combo.stock_suficiente === false ? 'bg-white/70 text-slate-500' : 'bg-white/20'" x-text="combo.stock_suficiente === false ? 'Sin stock' : '+ Agregar'"></span>
                        </div>
                    </button>
                </template>

                </div>
            </div>


            {{-- BUSCADOR --}}

            <div class="relative">

                <svg
                    class="w-5 h-5 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    stroke-width="2"
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
                    />
                </svg>

                <input
                    type="text"
                    x-model="search"
                    x-ref="search"
                    @input="productoActivoIndex = -1"
                    @keydown.enter.stop.prevent="addFirstMatch()"
                    @keydown.down.prevent="navegarProductos(1)"
                    @keydown.up.prevent="navegarProductos(-1)"
                    @keydown.tab.prevent="navegarProductos(1)"
                    @keydown.escape.stop="limpiarBusqueda()"
                    placeholder="Buscar producto, código o principio activo..."
                    autocomplete="off"
                    class="w-full rounded-xl border border-slate-200 bg-white pl-10 pr-10 py-3 text-sm focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 focus:outline-none"
                >

                <button
                    x-show="search"
                    x-cloak
                    type="button"
                    @click="limpiarBusqueda()"
                    class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
                >
                    ✕
                </button>

            </div>


            {{-- RESULTADOS --}}

            <div class="bg-white border border-slate-200 rounded-2xl shadow-sm overflow-hidden" :class="menuLateralOculto ? 'text-[11px]' : ''">

                <div class="px-4 py-3 border-b border-slate-100 flex items-center justify-between">

                    <div>
                        <h2 class="font-bold text-slate-700 text-sm">
                            Productos
                        </h2>

                        <p
                            class="text-[10px] text-slate-400"
                            x-text="productosVisibles().length + ' resultado(s)'"
                        ></p>
                    </div>

                    <div class="text-xs text-slate-400">
                        ↑ ↓ navegar · Enter agregar
                    </div>

                </div>

                <div>
                    <div class="grid grid-cols-[minmax(180px,2fr)_90px_100px_110px_100px_90px_70px] gap-2 px-3 py-2 bg-slate-50 border-b border-slate-200 text-[9px] font-black uppercase text-slate-500">
                        <div>Nombre</div><div>Código</div><div>Referencia</div><div>Presentación</div><div>Unidad</div><div class="text-right">Precio</div><div class="text-right">Stock</div>
                    </div>
                    <div>

                    <template x-if="productosVisibles().length === 0">

                        <div class="py-12 text-center">

                            <div class="text-4xl mb-2">
                                🔎
                            </div>

                            <p class="text-sm font-bold text-slate-500">
                                No se encontraron productos
                            </p>

                            <p class="text-xs text-slate-400 mt-1">
                                Prueba con otro nombre, código o principio activo.
                            </p>

                        </div>

                    </template>

                    <template
                        x-for="(p, index) in productosVisibles()"
                        :key="'producto-' + p.id"
                    >
                        <div
                            :id="'producto-' + p.id"
                            @click="seleccionarProductoPorClick(p, index)"
                            class="grid grid-cols-[minmax(180px,2fr)_90px_100px_110px_100px_90px_70px] items-center gap-2 px-3 py-2.5 border-b border-slate-100 cursor-pointer transition"
                            :class="productoActivoIndex === index ? 'bg-brand-50 border-l-4 border-brand-600' : 'hover:bg-slate-50'"
                        >
                            <div class="min-w-0">
                                <div class="font-bold text-sm text-slate-700 truncate" x-text="p.nombre || 'Producto sin nombre'"></div>
                                <div x-show="p.principio_activo" x-cloak class="text-[10px] text-brand-600 font-semibold mt-1 truncate" x-text="p.principio_activo"></div>
                            </div>
                            <div class="text-[10px] text-slate-500 break-all" x-text="p.codigo_barras || p.codigo || '-' "></div>
                            <div class="text-[10px] text-slate-500 break-all" x-text="p.codigo || p.referencia || '-' "></div>
                            <div class="text-[10px] text-slate-600" x-text="[p.presentacion, p.concentracion].filter(Boolean).join(' ') || '-' "></div>
                            
                            {{-- UNIDAD DE MEDIDA CLICKEABLE --}}
                            <div>
                                <span 
                                    class="unidad-medida-clickable"
                                    @click.stop="cambiarUnidadMedida(p, $event)"
                                    x-text="obtenerAbreviaturaPresentacion(p)"
                                    :title="'Click para cambiar unidad de medida de ' + p.nombre"
                                ></span>
                            </div>
                            
                            <div class="text-right font-black text-slate-700" x-text="'S/ ' + Number(obtenerPrecioPresentacion(p)).toFixed(2)"></div>
                            <div class="text-right">
                                <span class="inline-flex min-w-[42px] justify-center px-2 py-1 rounded-md text-xs font-bold" :class="Number(p.stock || 0) <= 0 ? 'bg-red-100 text-red-600' : 'bg-brand-600 text-white'" x-text="p.stock"></span>
                            </div>
                        </div>
                    </template>

                    </div>
                </div>

            </div>


            {{-- RECOMENDACIONES --}}

            <div
                x-show="recomendaciones.length"
                x-cloak
                class="bg-white border border-slate-200 rounded-2xl p-4"
            >

                <div class="flex items-center justify-between mb-3">

                    <div>
                        <h3 class="text-xs font-black text-slate-700">
                            Productos recomendados
                        </h3>

                        <p class="text-[10px] text-slate-400">
                            Exclusivamente por principio activo
                        </p>
                    </div>

                    <button
                        type="button"
                        @click="recomendaciones = []"
                        class="text-[10px] text-slate-400 hover:text-slate-600"
                    >
                        ✕
                    </button>

                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">

                    <template
                        x-for="reco in recomendaciones"
                        :key="'reco-' + reco.id"
                    >

                        <div class="border border-slate-100 rounded-xl p-3">

                            <div class="flex items-center justify-between gap-2">

                                <div class="min-w-0">

                                    <div
                                        class="text-xs font-bold text-slate-700 truncate"
                                        x-text="reco.nombre"
                                    ></div>

                                    <div
                                        class="text-[10px] text-slate-400 mt-1"
                                        x-text="'Stock: ' + Number(reco.stock || 0)"
                                    ></div>

                                </div>

                                <div class="flex items-center gap-2">

                                    <span
                                        class="text-[11px] font-black text-brand-700"
                                        x-text="'S/ ' + Number(reco.precio || 0).toFixed(2)"
                                    ></span>

                                    <button
                                        type="button"
                                        @click="abrirSelectorLote(reco)"
                                        :disabled="Number(reco.stock || 0) <= 0"
                                        class="w-8 h-8 rounded-lg bg-brand-600 text-white font-black hover:bg-brand-700 disabled:opacity-30"
                                    >
                                        +
                                    </button>

                                </div>

                            </div>

                        </div>

                    </template>

                </div>

            </div>

            {{-- COMBOS RECOMENDADOS --}}
            <div
                x-show="recomendacionesCombos.length > 0"
                x-cloak
                class="bg-white border border-brand-100 rounded-2xl p-4"
            >
                <div class="mb-3">
                    <h3 class="text-xs font-black text-brand-700">Combos recomendados</h3>
                    <p class="text-[10px] text-slate-400">El producto seleccionado pertenece a estos combos.</p>
                </div>
                <div class="flex gap-2 overflow-x-auto pb-1">
                    <template x-for="combo in recomendacionesCombos" :key="'reco-combo-' + combo.id">
                        <button type="button" @click="agregarComboAlCarrito(combo)" class="shrink-0 min-w-52 rounded-xl border border-brand-200 bg-brand-50 p-3 text-left hover:bg-brand-100 transition">
                            <div class="text-xs font-black text-slate-700" x-text="combo.nombre"></div>
                            <div class="text-[10px] text-slate-500 mt-1" x-text="combo.descripcion || 'Combo disponible'"></div>
                            <div class="text-sm font-black text-brand-700 mt-2" x-text="'S/ ' + Number(combo.precio || 0).toFixed(2)"></div>
                        </button>
                    </template>
                </div>
            </div>

        </div>


        {{-- =====================================================
             PANEL VENTA
        ====================================================== --}}

        <div :class="menuLateralOculto ? 'xl:col-span-2' : 'xl:col-span-4'" class="min-w-0">

            <form
                method="POST"
                action="{{ url('/pos') }}"
                @submit="validarVenta($event)"
                class="bg-white border border-slate-200 rounded-2xl shadow-sm overflow-hidden pos-panel-fixed"
            >

                @csrf

                {{-- CONTENIDO SCROLLABLE DEL PANEL --}}
                <div class="pos-panel-scroll">

                    {{-- CLIENTE --}}

                    <div class="p-4 border-b border-slate-100">

                        <div class="flex items-center justify-between mb-3">

                            <div>
                                <h2 class="text-sm font-black text-slate-700">
                                    Cliente
                                </h2>

                                <p class="text-[10px] text-slate-400">
                                    DNI, RUC o nombre
                                </p>
                            </div>

                            <button
                                type="button"
                                @click="abrirNuevoCliente()"
                                class="inline-flex items-center gap-1 px-2.5 py-1.5 rounded-lg bg-brand-600 text-white text-[11px] font-bold hover:bg-brand-700"
                            >
                                <span>+</span>
                                Nuevo cliente
                            </button>

                        </div>

                        <div
                            x-show="clienteSeleccionado"
                            x-cloak
                            class="mb-2 flex items-center justify-between gap-2 rounded-xl bg-brand-50 border border-brand-100 px-3 py-2"
                        >

                            <div class="min-w-0">

                                <div
                                    class="text-xs font-black text-brand-700 truncate"
                                    x-text="clienteNombre()"
                                ></div>

                                <div
                                    class="text-[10px] text-brand-600"
                                    x-text="clienteSeleccionado?.numero_documento || ''"
                                ></div>

                            </div>

                            <button
                                type="button"
                                @click="quitarCliente()"
                                class="w-7 h-7 rounded-lg bg-white border border-slate-200 text-slate-400 hover:text-red-600"
                            >
                                ✕
                            </button>

                        </div>

                        <div class="relative" @click.stop>

                            <svg
                                class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none"
                                fill="none"
                                viewBox="0 0 24 24"
                                stroke="currentColor"
                                stroke-width="2"
                            >
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
                                />
                            </svg>

                            <input
                                type="text"
                                x-model="buscarCliente"
                                x-ref="buscadorCliente"
                                @focus="mostrarResultadosClientes = true"
                                @input="clienteActivoIndex = -1; mostrarResultadosClientes = true"
                                @keydown.escape.stop="mostrarResultadosClientes = false"
                                @keydown.enter.prevent="seleccionarPrimerCliente()"
                                @keydown.down.prevent="navegarClientes(1)"
                                @keydown.up.prevent="navegarClientes(-1)"
                                placeholder="Buscar DNI, RUC o nombre..."
                                autocomplete="off"
                                class="w-full rounded-xl border border-slate-200 pl-9 pr-3 py-2.5 text-xs focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 focus:outline-none"
                            >

                            <div
                                x-show="mostrarResultadosClientes"
                                x-cloak
                                data-resultados-clientes
                                class="absolute z-50 left-0 right-0 top-full mt-1 bg-white rounded-xl border border-slate-200 shadow-xl overflow-hidden"
                            >

                                <div
                                    x-show="clientesFiltrados().length === 0"
                                    class="px-3 py-4 text-center"
                                >
                                    <p class="text-xs font-bold text-slate-500">
                                        No se encontraron clientes
                                    </p>

                                    <button
                                        type="button"
                                        @click="abrirNuevoCliente()"
                                        class="mt-2 text-[11px] font-bold text-brand-600 hover:text-brand-700"
                                    >
                                        + Registrar nuevo cliente
                                    </button>

                                </div>

                                <div class="max-h-64 overflow-y-auto">

                                    <template
                                        x-for="(cliente, index) in clientesFiltrados()"
                                        :key="'cliente-' + cliente.id"
                                    >

                                        <button
                                            type="button"
                                            @click="seleccionarCliente(cliente)"
                                            @mouseenter="clienteActivoIndex = index"
                                            class="w-full px-3 py-2.5 text-left hover:bg-slate-50 border-b border-slate-100 last:border-0 transition"
                                            :class="clienteActivoIndex === index
                                                ? 'bg-brand-50 border-l-4 border-brand-500'
                                                : ''"
                                        >

                                            <div class="flex items-center justify-between gap-2">

                                                <div class="min-w-0">

                                                    <div
                                                        class="text-xs font-bold text-slate-700 truncate"
                                                        x-text="clienteNombreDesde(cliente)"
                                                    ></div>

                                                    <div
                                                        class="text-[10px] text-slate-400"
                                                        x-text="cliente.numero_documento || 'Sin documento'"
                                                    ></div>

                                                </div>

                                                <span
                                                    x-show="cliente.telefono"
                                                    x-cloak
                                                    class="text-[10px] text-slate-400"
                                                    x-text="cliente.telefono"
                                                ></span>

                                            </div>

                                        </button>

                                    </template>

                                </div>

                                <button
                                    type="button"
                                    @click="abrirNuevoCliente()"
                                    class="w-full rounded-b-xl bg-brand-600 text-white py-2 text-xs font-bold"
                                >
                                    + Registrar nuevo cliente
                                </button>

                            </div>

                        </div>

                        <input
                            type="hidden"
                            name="cliente_id"
                            :value="clienteId || ''"
                        >

                    </div>


                    {{-- PUNTOS --}}

                    <div class="p-4 border-b border-slate-100">

                        <div class="flex items-center justify-between mb-2">

                            <div>

                                <h3 class="text-xs font-black text-slate-700">
                                    Puntos
                                </h3>

                                <p
                                    class="text-[10px] text-slate-400"
                                    x-text="formatearPuntos(puntosCliente())"
                                ></p>

                            </div>

                            <button
                                type="button"
                                @click="toggleUsarPuntos()"
                                :disabled="!puedeUsarPuntos()"
                                class="rounded-lg px-3 py-1.5 text-[10px] font-black transition disabled:opacity-40"
                                :class="usarPuntos
                                    ? 'bg-amber-500 text-white'
                                    : 'bg-white border border-amber-300 text-amber-700'"
                            >
                                <span
                                    x-text="usarPuntos ? 'Usando puntos' : 'Usar puntos'"
                                ></span>
                            </button>

                        </div>

                        <div
                            x-show="usarPuntos"
                            x-cloak
                            class="space-y-2"
                        >

                            <div class="flex items-center justify-between">

                                <label class="text-[10px] font-bold text-slate-500">
                                    Puntos a canjear
                                </label>

                                <button
                                    type="button"
                                    @click="usarTodosLosPuntos()"
                                    class="text-[10px] font-bold text-brand-600"
                                >
                                    Usar máximo
                                </button>

                            </div>

                            <input
                                type="number"
                                min="0"
                                :max="maxPuntosCanjeables()"
                                step="1"
                                x-model.number="puntosUsados"
                                @input="normalizarPuntos()"
                                class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm font-bold text-right focus:border-brand-500 focus:outline-none"
                            >

                            <div class="flex items-center justify-between">

                                <span class="text-[10px] text-slate-400">
                                    Descuento
                                </span>

                                <strong
                                    class="text-xs text-amber-700"
                                    x-text="'S/ ' + descuentoPorPuntos().toFixed(2)"
                                ></strong>

                            </div>

                        </div>


                        {{-- PRODUCTOS CANJEABLES --}}

                        <div
                            x-show="productosCanjeables().length > 0"
                            x-cloak
                            class="mt-3 pt-3 border-t border-amber-100"
                        >

                            <p class="text-[10px] font-bold text-amber-700 mb-2">
                                Productos canjeables con tus puntos
                            </p>

                            <div class="grid grid-cols-2 gap-2 max-h-40 overflow-y-auto">

                                <template
                                    x-for="p in productosCanjeables()"
                                    :key="'canje-' + p.id"
                                >

                                    <button
                                        type="button"
                                        @click="canjearProductoPorPuntos(p)"
                                        class="text-left rounded-lg border border-amber-200 bg-amber-50 p-2 hover:border-amber-400"
                                    >

                                        <div
                                            class="text-[10px] font-bold text-slate-700 truncate"
                                            x-text="p.nombre"
                                        ></div>

                                        <div
                                            class="text-[10px] text-amber-700 font-black"
                                            x-text="p.puntos_necesarios + ' pts'"
                                        ></div>

                                    </button>

                                </template>

                            </div>

                        </div>


                        {{-- CUPÓN --}}

                        <div class="mt-3 pt-3 border-t border-slate-100">

                            <p class="text-[10px] font-bold text-slate-500 mb-2">
                                ¿El cliente tiene un cupón?
                            </p>

                            <div class="flex gap-2">

                                <input
                                    type="text"
                                    x-model="cuponInput"
                                    @keydown.enter.prevent="validarCupon()"
                                    placeholder="Código de cupón"
                                    class="flex-1 rounded-lg border border-slate-200 px-2 py-1.5 text-xs font-bold uppercase focus:border-brand-500 focus:outline-none"
                                >

                                <button
                                    type="button"
                                    @click="validarCupon()"
                                    :disabled="validandoCupon || !cuponInput"
                                    class="px-3 rounded-lg bg-slate-800 text-white text-[10px] font-bold disabled:opacity-50"
                                >

                                    <span x-show="!validandoCupon">
                                        Validar
                                    </span>

                                    <span x-show="validandoCupon" x-cloak>
                                        ...
                                    </span>

                                </button>

                            </div>

                            <div
                                x-show="cuponAplicado"
                                x-cloak
                                class="mt-2 flex items-center justify-between rounded-lg bg-emerald-50 border border-emerald-200 px-3 py-2"
                            >

                                <div class="min-w-0">

                                    <div
                                        class="text-[10px] font-black text-emerald-700 truncate"
                                        x-text="'✓ ' + (cuponAplicado?.nombre || cuponAplicado?.codigo)"
                                    ></div>

                                    <div
                                        class="text-[10px] text-emerald-600"
                                        x-text="'Descuento: S/ ' + descuentoCupon().toFixed(2)"
                                    ></div>

                                </div>

                                <button
                                    type="button"
                                    @click="quitarCupon()"
                                    class="w-6 h-6 rounded-lg bg-white border border-slate-200 text-slate-400 hover:text-red-600"
                                >
                                    ✕
                                </button>

                            </div>

                            <p
                                x-show="errorCupon"
                                x-cloak
                                class="mt-2 text-[10px] font-bold text-red-500"
                                x-text="errorCupon"
                            ></p>

                        </div>

                    </div>


                    {{-- CARRITO --}}

                    <div class="p-4 border-b border-slate-100">

                        <div class="flex items-center justify-between mb-3">

                            <h3 class="text-xs font-black text-slate-700">
                                Detalle de venta
                            </h3>

                            <span
                                class="text-[10px] font-bold px-2 py-1 rounded-lg bg-slate-100 text-slate-500"
                                x-text="cart.length + ' producto(s)'"
                            ></span>

                        </div>

                        <div
                            x-show="cart.length === 0"
                            class="py-8 text-center text-xs text-slate-400"
                        >
                            Agrega productos al carrito.
                        </div>

                        {{-- CARRITO CON SCROLL --}}
                        <div
                            x-show="cart.length > 0"
                            x-cloak
                            class="pos-cart-scroll space-y-2"
                        >

                            <template
                                x-for="(it, i) in cart"
                                :key="it.key"
                            >

                                <div class="rounded-xl border border-slate-100 p-3">

                                    <div class="flex items-start justify-between gap-2">

                                        <div class="min-w-0">

                                            <div
                                                class="text-xs font-bold text-slate-700"
                                                x-text="it.nombre"
                                            ></div>

                                            <div
                                                x-show="it.principio_activo"
                                                class="text-[10px] text-brand-600 mt-0.5"
                                                x-text="it.principio_activo"
                                            ></div>

                                            <div class="flex flex-wrap gap-1 mt-1">

                                                {{-- UNIDAD DE MEDIDA EN EL CARRITO --}}
                                                <span class="badge-unidad" x-text="it.presentacion_abreviatura || 'UND'"></span>

                                                <span
                                                    class="text-[10px] px-1.5 py-0.5 rounded bg-slate-100 text-slate-500"
                                                    x-text="'Lote: ' + (it.lote || 'Sin lote')"
                                                ></span>

                                                <span
                                                    class="text-[10px] px-1.5 py-0.5 rounded"
                                                    :class="loteVencimientoCercano(it)
                                                        ? 'bg-red-100 text-red-600 font-bold'
                                                        : 'bg-slate-100 text-slate-500'"
                                                >
                                                    Vence:
                                                    <strong
                                                        x-text="it.fecha_vencimiento_formateada || 'Sin vencimiento'"
                                                    ></strong>
                                                </span>

                                                <span
                                                    x-show="it.esCanjePorPuntos"
                                                    x-cloak
                                                    class="text-[10px] px-1.5 py-0.5 rounded bg-amber-500 text-white font-bold"
                                                >
                                                    🎁 Canje por puntos
                                                </span>

                                                <span
                                                    x-show="it.comboId"
                                                    x-cloak
                                                    class="text-[10px] px-1.5 py-0.5 rounded bg-brand-600 text-white font-bold"
                                                >
                                                    📦 Combo
                                                </span>

                                            </div>

                                        </div>

                                        <div class="flex items-center gap-1 shrink-0">
                                            <button
                                                type="button"
                                                @click="it.comboId ? mensaje('Precio de combo', 'El precio de los productos de un combo se determina por el precio total del combo.') : abrirEditorPrecio(i)"
                                                class="w-6 h-6 rounded-lg text-slate-300 hover:bg-amber-50 hover:text-amber-600"
                                                :title="it.comboId ? 'Precio fijado por combo' : 'Modificar precio de venta'"
                                            >
                                                ✎
                                            </button>
                                            <button
                                                type="button"
                                                @click="remove(i)"
                                                class="w-6 h-6 rounded-lg text-slate-300 hover:bg-red-50 hover:text-red-500"
                                            >
                                                ✕
                                            </button>
                                        </div>

                                    </div>

                                    <div class="flex items-center justify-between mt-3">

                                        <div class="flex items-center gap-1">

                                            <button
                                                type="button"
                                                @click="dec(i)"
                                                :disabled="Boolean(it.comboId)"
                                                class="w-6 h-6 rounded bg-slate-100 hover:bg-slate-200 text-slate-600"
                                            >
                                                −
                                            </button>

                                            <input
                                                type="number"
                                                min="1"
                                                :max="stockDisponibleParaItem(it)"
                                                x-model.number="it.cantidad"
                                                @change="validarCantidad(i)"
                                                :disabled="Boolean(it.comboId)"
                                                class="w-12 h-6 text-center border border-slate-200 rounded text-xs"
                                            >

                                            <button
                                                type="button"
                                                @click="inc(i)"
                                                :disabled="Boolean(it.comboId)"
                                                class="w-6 h-6 rounded bg-slate-100 hover:bg-slate-200 text-slate-600"
                                            >
                                                +
                                            </button>

                                        </div>

                                        <div class="text-right">

                                            <div
                                                class="text-xs font-black text-slate-700"
                                                x-text="'S/ ' + (Number(it.precio || 0) * Number(it.cantidad || 0)).toFixed(2)"
                                            ></div>

                                            <div
                                                class="text-[10px] text-slate-400"
                                                x-text="'S/ ' + Number(it.precio || 0).toFixed(2) + ' c/u'"
                                            ></div>

                                            <div
                                                x-show="it.comboId"
                                                x-cloak
                                                class="text-[9px] font-bold text-brand-600 mt-0.5"
                                                x-text="'Precio combo: S/ ' + Number(it.comboUnitPrice || 0).toFixed(2)"
                                            ></div>

                                        </div>

                                    </div>

                                </div>

                            </template>

                        </div>

                    </div>


                    {{-- COMPROBANTE --}}

                    <div class="p-4 border-b border-slate-100">

                        <h3 class="text-xs font-black text-slate-700 mb-2">
                            Comprobante
                        </h3>

                        <div class="grid grid-cols-3 gap-2">

                            <template
                                x-for="tipo in ['factura','boleta','ticket']"
                                :key="tipo"
                            >

                                <button
                                    type="button"
                                    @click="seleccionarComprobante(tipo)"
                                    :class="tipoComprobante === tipo
                                        ? 'bg-brand-600 text-white border-brand-600'
                                        : 'bg-white text-slate-600 border-slate-200'"
                                    class="rounded-lg py-2 border text-xs font-bold transition"
                                    x-text="
                                        tipo === 'factura'
                                            ? 'FACTURA'
                                            : tipo === 'boleta'
                                                ? 'BOLETA'
                                                : 'N. VENTA'
                                    "
                                ></button>

                            </template>

                        </div>

                        <input
                            type="hidden"
                            name="tipo_comprobante"
                            :value="tipoComprobante"
                        >

                        <div class="mt-3 rounded-xl border border-brand-100 bg-brand-50 px-3 py-2">
                            <div class="text-[10px] font-bold text-brand-600 uppercase">Se emitirá</div>
                            <div class="flex items-center justify-between gap-2">
                                <strong class="text-sm text-brand-800" x-text="tipoComprobanteLabel()"></strong>
                                <span class="text-sm font-black text-brand-700" x-text="numeroComprobantePreview()"></span>
                            </div>
                        </div>

                        <div class="mt-2">

                            <select
                                name="condicion_pago"
                                x-model="condicionPago"
                                @change="cambioCondicionPago()"
                                class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm"
                            >
                                <option value="contado">
                                    Contado
                                </option>

                                <option value="credito">
                                    Crédito
                                </option>
                            </select>

                        </div>

                    </div>


                    {{-- MEDIOS DE PAGO --}}
                    <div class="p-4 border-b border-slate-100" x-show="!usarPuntos" x-cloak>

                        <div class="flex items-center justify-between mb-3">
                            <h3 class="text-xs font-black text-slate-700">Medios de pago</h3>
                            <span class="text-[10px] font-black" :class="pendiente() > 0.009 ? 'text-red-500' : 'text-emerald-600'"
                                  x-text="pendiente() > 0.009 ? 'Falta S/ ' + pendiente().toFixed(2) : 'Pago completo'"></span>
                        </div>

                        <!-- BOTONES RÁPIDOS DE PAGO -->
                        <div class="grid grid-cols-2 gap-2 mb-3">
                            <button type="button" @click="pagoRapidoEfectivo()"
                                    class="rounded-xl bg-emerald-600 text-white py-2.5 text-sm font-bold hover:bg-emerald-700 transition"
                                    :disabled="cart.length === 0">
                                💵 Efectivo
                            </button>
                            <button type="button" @click="pagoRapidoMixto()"
                                    class="rounded-xl border border-slate-200 bg-white text-slate-600 py-2.5 text-sm font-bold hover:bg-slate-50 transition"
                                    :disabled="cart.length === 0">
                                💳 Pago Mixto
                            </button>
                        </div>

                        <!-- MEDIOS DE PAGO INDIVIDUALES - SOLO SE MUESTRAN EN MIXTO -->
                        <div class="space-y-2" x-show="mostrarMediosPagoIndividuales">

                            <template x-for="medio in mediosPago" :key="'medio-' + medio.id">

                                <div class="rounded-xl border border-slate-100 p-2" x-show="pago(medio.id).monto > 0">

                                    <div class="flex items-center gap-2">

                                        <span class="w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center" x-text="iconoMedioPago(medio)"></span>

                                        <div class="flex-1">

                                            <div class="text-xs font-bold text-slate-700" x-text="medio.nombre"></div>

                                            <input type="number" min="0" step="0.01"
                                                   x-model.number="pago(medio.id).monto"
                                                   @input="normalizarPago(medio.id)"
                                                   class="w-full mt-1 rounded-lg border border-slate-200 px-2 py-1.5 text-xs font-bold"
                                            >

                                        </div>

                                        <button type="button" @click="togglePago(medio.id)"
                                                class="w-7 h-7 rounded-lg bg-red-500 text-white font-bold text-xs">
                                            ✕
                                        </button>

                                    </div>

                                    <div x-show="requiereReferencia(medio)" x-cloak class="mt-2">

                                        <button type="button" @click="abrirReferenciaPago(medio.id)"
                                                class="w-full flex items-center justify-between rounded-lg border border-dashed px-2 py-1.5 text-left"
                                                :class="pago(medio.id).referencia
                                                    ? 'border-emerald-300 bg-emerald-50 text-emerald-700'
                                                    : 'border-amber-300 bg-amber-50 text-amber-700'">

                                            <span x-text="pago(medio.id).referencia
                                                    ? '✓ Ref. ' + pago(medio.id).referencia
                                                    : '⚡ Ingresar referencia'"
                                                  class="text-[10px] font-bold truncate"></span>

                                        </button>

                                    </div>

                                    <input x-show="requiereBanco(medio)" x-cloak type="text"
                                           x-model="pago(medio.id).banco"
                                           placeholder="Banco"
                                           class="w-full mt-2 rounded-lg border border-slate-200 px-2 py-1.5 text-[10px] focus:border-brand-500 focus:outline-none">

                                    <select x-show="requiereTipoTarjeta(medio)" x-cloak
                                            x-model="pago(medio.id).tipo_tarjeta"
                                            class="w-full mt-2 rounded-lg border border-slate-200 px-2 py-1.5 text-[10px]">
                                        <option value="">Tipo de tarjeta</option>
                                        <option value="visa">Visa</option>
                                        <option value="mastercard">Mastercard</option>
                                        <option value="amex">American Express</option>
                                        <option value="otro">Otro</option>
                                    </select>

                                </div>

                            </template>

                            <div x-show="mediosPago.length === 0" class="text-center py-4 text-xs text-slate-400">
                                No hay medios de pago configurados.
                            </div>

                        </div>

                        <!-- BOTONES PARA AGREGAR MEDIOS DE PAGO INDIVIDUALES (SOLO EN MIXTO) -->
                        <div class="mt-3 grid grid-cols-2 gap-2" x-show="mostrarMediosPagoIndividuales">

                            <template x-for="medio in mediosPago" :key="'boton-medio-' + medio.id">

                                <button type="button" @click="togglePago(medio.id)"
                                        class="rounded-lg border px-3 py-2 text-xs font-bold transition"
                                        :class="pago(medio.id).monto > 0
                                            ? 'border-brand-300 bg-brand-50 text-brand-700'
                                            : 'border-slate-200 bg-white text-slate-600 hover:bg-slate-50'">

                                    <span x-text="iconoMedioPago(medio)"></span>
                                    <span class="ml-1" x-text="medio.nombre"></span>

                                </button>

                            </template>

                        </div>

                    </div>

                    {{-- DESCUENTO --}}

                    <div class="p-4 border-b border-slate-100">

                        <div class="flex items-center justify-between">

                            <label class="text-xs font-bold text-slate-600">
                                Descuento
                            </label>

                            <div class="flex items-center gap-1">

                                <span class="text-xs text-slate-400">
                                    S/
                                </span>

                                <input
                                    type="number"
                                    min="0"
                                    step="0.01"
                                    x-model.number="descuento"
                                    @input="normalizarDescuento()"
                                    class="w-28 border-0 text-right text-sm font-bold focus:ring-0"
                                >

                            </div>

                        </div>

                    </div>


                    <div x-show="alertasPromocionales.length > 0" x-cloak class="p-3 border-b border-amber-200 bg-amber-50 space-y-2">
                        <template x-for="alerta in alertasPromocionales" :key="alerta.key">
                            <div class="rounded-lg border border-amber-200 bg-white px-3 py-2 flex items-start gap-2">
                                <div class="flex-1 min-w-0">
                                    <div class="text-[11px] font-black text-amber-800" x-text="alerta.titulo"></div>
                                    <div class="text-[10px] text-slate-600 mt-0.5" x-text="alerta.texto"></div>
                                </div>
                                <button type="button" @click="quitarAlertaPromocional(alerta.key)" class="shrink-0 w-6 h-6 rounded-md text-slate-400 hover:bg-slate-100 hover:text-slate-700">✕</button>
                            </div>
                        </template>
                    </div>

                </div>{{-- FIN pos-panel-scroll --}}

                {{-- =====================================================
                     TOTALES Y BOTÓN DE COBRAR (SIEMPRE VISIBLE)
                ====================================================== --}}
                <div class="p-3 bg-slate-50 pos-panel-footer">

                    <div class="space-y-2 text-xs">

                        <div class="flex justify-between">
                            <span class="text-slate-500">
                                Subtotal
                            </span>

                            <span
                                class="font-bold"
                                x-text="'S/ ' + subtotal().toFixed(2)"
                            ></span>
                        </div>

                        <div class="flex justify-between">

                            <span class="text-slate-500">
                                Descuento
                            </span>

                            <span
                                class="font-bold text-red-500"
                                x-text="'- S/ ' + Number(descuento || 0).toFixed(2)"
                            ></span>

                        </div>

                        <div x-show="Number(descuentoOfertas || 0) > 0" x-cloak class="flex justify-between">
                            <span class="text-emerald-700">Descuento por oferta</span>
                            <span class="font-bold text-emerald-700" x-text="'- S/ ' + Number(descuentoOfertas || 0).toFixed(2)"></span>
                        </div>

                        <div
                            x-show="descuentoPorPuntos() > 0"
                            x-cloak
                            class="flex justify-between"
                        >
                            <span class="text-amber-700">
                                Descuento por puntos
                            </span>

                            <span
                                class="font-bold text-amber-700"
                                x-text="'- S/ ' + descuentoPorPuntos().toFixed(2)"
                            ></span>
                        </div>

                        <div
                            x-show="descuentoPorCombos() > 0"
                            x-cloak
                            class="flex justify-between"
                        >
                            <span class="text-brand-700">
                                Descuento por combos
                            </span>

                            <span
                                class="font-bold text-brand-700"
                                x-text="'- S/ ' + descuentoPorCombos().toFixed(2)"
                            ></span>
                        </div>

                        <div
                            x-show="descuentoCupon() > 0"
                            x-cloak
                            class="flex justify-between"
                        >
                            <span class="text-emerald-700">
                                Descuento por cupón
                            </span>

                            <span
                                class="font-bold text-emerald-700"
                                x-text="'- S/ ' + descuentoCupon().toFixed(2)"
                            ></span>
                        </div>

                        <div class="flex justify-between">

                            <span class="text-slate-500">
                                IGV
                            </span>

                            <span
                                class="font-bold"
                                x-text="'S/ ' + igv().toFixed(2)"
                            ></span>

                        </div>

                        <div class="border-t border-slate-200 pt-3 flex justify-between items-center">

                            <span class="font-black text-slate-700">
                                TOTAL
                            </span>

                            <span
                                class="text-2xl font-black text-brand-700"
                                x-text="'S/ ' + total().toFixed(2)"
                            ></span>

                        </div>

                        <div class="flex justify-between">

                            <span class="text-slate-500">
                                Pagado
                            </span>

                            <span
                                class="font-bold text-slate-700"
                                x-text="'S/ ' + totalPagado().toFixed(2)"
                            ></span>

                        </div>

                        <div class="flex justify-between">

                            <span class="text-slate-500">
                                Pendiente
                            </span>

                            <span
                                class="font-bold"
                                :class="pendiente() > 0.009
                                    ? 'text-red-600'
                                    : 'text-emerald-600'"
                                x-text="'S/ ' + pendiente().toFixed(2)"
                            ></span>

                        </div>

                        <div
                            x-show="vuelto() > 0"
                            x-cloak
                            class="flex justify-between"
                        >

                            <span class="text-slate-500">
                                Vuelto
                            </span>

                            <span
                                class="font-bold text-emerald-600"
                                x-text="'S/ ' + vuelto().toFixed(2)"
                            ></span>

                        </div>

                        <div
                            x-show="usarPuntos"
                            x-cloak
                            class="pt-2 border-t border-slate-200 flex justify-between"
                        >

                            <span class="text-amber-700">
                                Puntos restantes
                            </span>

                            <strong
                                class="text-xs text-amber-800"
                                x-text="formatearPuntos(puntosRestantes())"
                            ></strong>

                        </div>

                    </div>

                    <div class="grid grid-cols-2 gap-2 mt-4">

                        <button
                            type="button"
                            @click="cancelarVenta()"
                            class="rounded-xl bg-red-600 text-white py-3 font-bold hover:bg-red-700 transition"
                        >
                            ⊗ Cancelar
                        </button>

                        <button
                            type="submit"
                            :disabled="
                                cart.length === 0 ||
                                (condicionPago === 'contado' && pendiente() > 0.009) ||
                                procesando
                            "
                            class="rounded-xl bg-brand-600 text-white py-3 font-bold hover:bg-brand-700 disabled:opacity-40 disabled:cursor-not-allowed transition"
                        >

                            <span x-show="!procesando">
                                Cobrar S/
                                <span x-text="total().toFixed(2)"></span>
                            </span>

                            <span x-show="procesando" x-cloak>
                                Procesando...
                            </span>

                        </button>

                    </div>

                </div>


                {{-- DATOS LARAVEL --}}

                <input
                    type="hidden"
                    name="items_json"
                    :value="JSON.stringify(payload())"
                >

                <input
                    type="hidden"
                    name="pagos_json"
                    :value="JSON.stringify(pagosActivos())"
                >

                <input
                    type="hidden"
                    name="usar_puntos"
                    :value="usarPuntos ? 1 : 0"
                >

                <input
                    type="hidden"
                    name="puntos_canjeados"
                    :value="Number(puntosUsados || 0)"
                >

                <input
                    type="hidden"
                    name="descuento"
                    :value="Number(descuento || 0).toFixed(2)"
                >

                <input
                    type="hidden"
                    name="codigo_canje"
                    :value="cuponAplicado?.codigo || ''"
                >

            </form>

        </div>

    </div>


    {{-- =========================================================
         MODAL MODIFICAR PRECIO DE VENTA
    ========================================================== --}}
    <div
        x-show="mostrarEditorPrecio"
        x-cloak
        class="fixed inset-0 z-[90] flex items-center justify-center bg-slate-900/50 p-4"
        @keydown.escape.window="cerrarEditorPrecio()"
    >
        <div class="w-full max-w-md bg-white rounded-2xl shadow-2xl p-5" @click.stop>
            <div class="flex items-center justify-between mb-4">
                <div>
                    <div class="text-sm font-black text-slate-700">Modificar precio de venta</div>
                    <div class="text-[11px] text-slate-400" x-text="precioEditandoIndex >= 0 ? cart[precioEditandoIndex]?.nombre : ''"></div>
                </div>
                <button type="button" @click="cerrarEditorPrecio()" class="w-8 h-8 rounded-lg bg-slate-100">✕</button>
            </div>
            <label class="block text-xs font-bold text-slate-600 mb-1">Nuevo precio</label>
            <div class="relative">
                <span class="absolute left-3 top-1/2 -translate-y-1/2 font-bold text-slate-400">S/</span>
                <input
                    x-ref="precioEditor"
                    type="number"
                    min="0"
                    step="0.01"
                    x-model.number="precioEditando"
                    @keydown.enter.prevent="guardarPrecioEditado()"
                    class="w-full rounded-xl border border-slate-200 pl-10 pr-3 py-3 text-lg font-black focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 focus:outline-none"
                >
            </div>
            <label class="block text-xs font-bold text-slate-600 mt-3 mb-1">Motivo (opcional)</label>
            <input type="text" x-model="motivoPrecioEditando" maxlength="255" placeholder="Ej. precio autorizado por encargado" class="w-full rounded-xl border border-slate-200 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none">
            <div class="flex justify-end gap-2 mt-5">
                <button type="button" @click="cerrarEditorPrecio()" class="px-4 py-2 rounded-xl bg-slate-100 text-slate-600 font-bold text-sm">Cancelar</button>
                <button type="button" @click="guardarPrecioEditado()" class="px-4 py-2 rounded-xl bg-brand-600 text-white font-bold text-sm">Guardar precio</button>
            </div>
        </div>
    </div>

    {{-- =========================================================
         MODAL LOTES
    ========================================================== --}}

    <div
        x-show="mostrarSelectorLote"
        x-cloak
        class="fixed inset-0 z-[100] flex items-center justify-center p-4"
    >

        <div
            class="absolute inset-0 bg-slate-900/60"
            @click="cerrarSelectorLote()"
        ></div>

        <div class="relative w-full max-w-lg bg-white rounded-2xl shadow-2xl overflow-hidden">

            <div class="p-4 border-b border-slate-100 flex items-center justify-between">

                <div>

                    <h3 class="font-black text-slate-700">
                        Seleccionar lote
                    </h3>

                    <p
                        class="text-xs text-slate-400 mt-1"
                        x-text="productoLote?.nombre || ''"
                    ></p>

                </div>

                <button
                    type="button"
                    @click="cerrarSelectorLote()"
                    class="w-8 h-8 rounded-lg bg-slate-100 text-slate-500 hover:bg-slate-200"
                >
                    ✕
                </button>

            </div>

            <div class="p-4 max-h-[70vh] overflow-y-auto space-y-2">

                <template
                    x-for="(lote, loteIndex) in lotesDisponibles()"
                    :key="'lote-' + lote.id"
                >

                    <button
                        type="button"
                        :data-lote-index="loteIndex"
                        tabindex="0"
                        @click.stop="seleccionarLote(lote)"
                        @keydown.enter.stop.prevent="seleccionarLote(lote)"
                        @keydown.arrowdown.stop.prevent="moverLoteConTeclado(1)"
                        @keydown.arrowup.stop.prevent="moverLoteConTeclado(-1)"
                        @mouseenter="loteActivoIndex = loteIndex; loteActivo = lote"
                        class="w-full text-left border rounded-xl p-3 transition outline-none"
                        :class="
                            loteIndex === loteActivoIndex
                                ? 'border-brand-500 bg-brand-50 ring-2 ring-brand-200'
                                : 'border-slate-200 hover:border-brand-400 hover:bg-brand-50'
                        "
                    >

                        <div class="flex items-center justify-between gap-3">

                            <div>

                                <div class="flex items-center gap-2">

                                    <span class="text-xs font-black text-slate-700">
                                        Lote:
                                    </span>

                                    <span
                                        class="text-xs text-slate-600"
                                        x-text="lote.lote || lote.codigo || 'Sin lote'"
                                    ></span>

                                    <span
                                        x-show="loteIndex === 0"
                                        x-cloak
                                        class="text-[9px] px-1.5 py-0.5 rounded-full bg-brand-100 text-brand-700 font-bold"
                                    >
                                        FEFO
                                    </span>

                                    <span
                                        x-show="loteIndex === loteActivoIndex"
                                        x-cloak
                                        class="text-[9px] px-1.5 py-0.5 rounded-full bg-emerald-100 text-emerald-700 font-bold ml-1"
                                    >
                                        ENTER
                                    </span>

                                </div>

                                <div class="text-[10px] text-slate-400 mt-1">

                                    Vencimiento:

                                    <strong
                                        class="font-bold"
                                        :class="
                                            loteVencido(lote)
                                                ? 'text-red-700'
                                                : loteVencimientoCercano(lote)
                                                    ? 'text-red-600'
                                                    : 'text-slate-600'
                                        "
                                        x-text="formatearFecha(lote.fecha_vencimiento)"
                                    ></strong>

                                </div>

                            </div>

                            <div class="text-right">

                                <div
                                    class="text-xs font-black text-brand-700"
                                    x-text="'Stock: ' + Number(lote.stock || 0)"
                                ></div>

                            </div>

                        </div>

                    </button>

                </template>

                <div
                    x-show="lotesDisponibles().length === 0"
                    class="py-8 text-center"
                >

                    <div class="text-3xl">
                        📦
                    </div>

                    <p class="text-xs font-bold text-slate-500 mt-2">
                        No hay lotes disponibles.
                    </p>

                </div>

            </div>

        </div>

    </div>


    {{-- =========================================================
         MODAL OFERTA ANTES DE AGREGAR
    ========================================================== --}}
    <div
        x-show="mostrarSelectorOferta"
        x-cloak
        class="fixed inset-0 z-[115] flex items-center justify-center p-4"
        @keydown.escape.stop="cerrarSelectorOferta()"
    >
        <div class="absolute inset-0 bg-slate-900/60" @click="cerrarSelectorOferta()"></div>

        <div class="relative w-full max-w-lg bg-white rounded-2xl shadow-2xl overflow-hidden" @click.stop>
            <div class="p-4 border-b border-slate-100 flex items-center justify-between">
                <div class="min-w-0">
                    <div class="text-[10px] font-black uppercase tracking-wide text-brand-600">
                        Promoción del producto
                    </div>
                    <h3 class="font-black text-slate-700 truncate" x-text="ofertaProductoPendiente?.nombre || ''"></h3>
                    <p class="text-[10px] text-slate-400 mt-1"
                       x-text="'Lote: ' + (ofertaLotePendiente?.lote || ofertaLotePendiente?.codigo || 'Sin lote')"></p>
                </div>
                <button type="button" @click="cerrarSelectorOferta()"
                        class="w-8 h-8 rounded-lg bg-slate-100 text-slate-500">✕</button>
            </div>

            <div class="p-4 space-y-4 max-h-[75vh] overflow-y-auto">
                <div class="rounded-xl border border-slate-200 p-3">
                    <div class="flex items-center justify-between gap-3">
                        <div>
                            <div class="text-[10px] font-black uppercase text-slate-400">Cantidad a llevar</div>
                            <div class="text-[10px] text-slate-400 mt-1">Stock disponible: <strong x-text="stockLoteDisponible()"></strong></div>
                        </div>
                        <div class="flex items-center gap-2">
                            <button type="button" @click="cambiarCantidadOfertaPendiente(-1)"
                                    class="w-8 h-8 rounded-lg bg-slate-100 text-slate-600 font-black">−</button>
                            <span class="min-w-8 text-center text-sm font-black text-slate-700"
                                  x-text="ofertaCantidadPendiente"></span>
                            <button type="button" @click="cambiarCantidadOfertaPendiente(1)"
                                    class="w-8 h-8 rounded-lg bg-slate-100 text-slate-600 font-black">+</button>
                        </div>
                    </div>
                </div>

                <div x-show="cargandoOfertaPendiente"
                     class="rounded-xl border border-slate-200 bg-slate-50 p-4 text-center text-xs text-slate-500">
                    Revisando ofertas para esta cantidad...
                </div>

                <template x-if="!cargandoOfertaPendiente && ofertasDisponiblesPendientes.length > 0">
                    <div class="space-y-2">
                        <div class="text-[10px] font-black uppercase tracking-wide text-emerald-700"
                             x-text="ofertasDisponiblesPendientes.some(o => o?.aplicable === false) && !ofertasDisponiblesPendientes.some(o => o?.aplicable !== false) ? 'Promoción disponible: falta cumplir la cantidad' : '¡Oferta disponible para esta cantidad!'">
                        </div>

                        <template x-for="(oferta, ofertaIndex) in ofertasDisponiblesPendientes"
                                  :key="'oferta-pendiente-' + oferta.id">
                            <button type="button"
                                    :data-oferta-opcion-index="ofertaIndex"
                                    tabindex="0"
                                    @click="ofertaActivaPendienteIndex = ofertaIndex"
                                    @keydown.enter.prevent="ofertaActivaPendienteIndex = ofertaIndex; ofertaPendienteActiva()?.aplicable === false ? agregarPendienteSinOferta() : agregarPendienteConOferta()"
                                    class="w-full text-left rounded-xl border p-3 transition outline-none"
                                    :class="ofertaIndex === ofertaActivaPendienteIndex
                                        ? 'border-emerald-500 bg-emerald-50 ring-2 ring-emerald-200'
                                        : 'border-slate-200 hover:border-emerald-400 hover:bg-emerald-50'">
                                <div class="flex items-center justify-between gap-3">
                                    <div class="min-w-0">
                                        <div class="text-xs font-black text-slate-700 truncate" x-text="oferta.nombre"></div>
                                        <div class="text-[10px] mt-1 font-bold"
                                             :class="oferta.aplicable === false ? 'text-amber-700' : 'text-emerald-700'"
                                             x-text="textoOfertaPendiente(oferta)"></div>
                                        <span x-show="oferta.acumulable === true" x-cloak class="inline-flex mt-1 text-[9px] px-1.5 py-0.5 rounded-full bg-sky-50 text-sky-700 font-black">Acumulable</span>
                                    </div>
                                    <span x-show="ofertaIndex === ofertaActivaPendienteIndex"
                                          class="shrink-0 text-[9px] px-2 py-1 rounded-full bg-emerald-600 text-white font-black">
                                        ENTER
                                    </span>
                                </div>
                            </button>
                        </template>

                        <template x-if="ofertaPendienteActiva()?.aplicable !== false">
                            <button type="button" @click="agregarPendienteConOferta()"
                                    class="w-full rounded-xl bg-emerald-600 text-white py-3 text-xs font-black hover:bg-emerald-700">
                                Agregar con oferta
                                <span x-text="ofertaPendienteActiva() ? ' · - S/ ' + Number(ofertaPendienteActiva().descuento || 0).toFixed(2) : ''"></span>
                            </button>
                        </template>
                        <template x-if="ofertaPendienteActiva()?.aplicable === false">
                            <div class="rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-[10px] font-bold text-amber-700"
                                 x-text="textoOfertaPendiente(ofertaPendienteActiva())"></div>
                        </template>
                    </div>
                </template>



                {{-- COMBOS DEL PRODUCTO --}}
                <template x-if="!cargandoOfertaPendiente && combosDisponiblesPendientes().length > 0">
                    <div class="rounded-xl border border-brand-200 bg-brand-50/50 p-3 space-y-2">
                        <div class="text-[10px] font-black uppercase tracking-wide text-brand-700">
                            Combo disponible para este producto
                        </div>
                        <template x-for="combo in combosDisponiblesPendientes()" :key="'modal-combo-' + combo.id">
                            <div class="rounded-xl border border-brand-200 bg-white p-3">
                                <div class="flex items-center justify-between gap-3">
                                    <div class="min-w-0">
                                        <div class="text-xs font-black text-slate-700" x-text="combo.nombre"></div>
                                        <div class="text-[10px] text-slate-500 mt-1" x-text="combo.descripcion || 'Combo disponible'"></div>
                                    </div>
                                    <div class="shrink-0 text-sm font-black text-brand-700" x-text="'S/ ' + Number(combo.precio || 0).toFixed(2)"></div>
                                </div>
                                <button type="button"
                                        @click="agregarComboPendiente(combo)"
                                        class="mt-2 w-full rounded-lg bg-brand-600 text-white py-2 text-[10px] font-black hover:bg-brand-700">
                                    Agregar combo
                                </button>
                            </div>
                        </template>
                    </div>
                </template>

                <div x-show="!cargandoOfertaPendiente && ofertasDisponiblesPendientes.length === 0"
                     x-cloak class="rounded-xl border border-slate-200 bg-slate-50 p-4">
                    <div class="text-xs font-black text-slate-600">No hay una oferta configurada para este producto.</div>
                </div>

                {{-- BOTÓN AGREGAR PRODUCTO CON FOCO --}}
                <button type="button" 
                        @click="agregarPendienteSinOferta()"
                        x-ref="btnAgregarProducto"
                        class="btn-agregar-producto w-full rounded-xl border border-slate-200 bg-white text-slate-600 py-3 text-xs font-black hover:bg-slate-50 focus:bg-slate-50 focus:border-brand-500 focus:ring-2 focus:ring-brand-200"
                        tabindex="0">
                    Agregar producto
                </button>
            </div>
        </div>
    </div>

    {{-- =========================================================
         MODAL REFERENCIA
    ========================================================== --}}

    <div
        x-show="mostrarReferenciaPago"
        x-cloak
        class="fixed inset-0 z-[110] flex items-center justify-center p-4"
    >

        <div
            class="absolute inset-0 bg-slate-900/60"
            @click="cerrarReferenciaPago()"
        ></div>

        <div class="relative w-full max-w-md bg-white rounded-2xl shadow-2xl">

            <div class="p-4 border-b border-slate-100 flex items-center justify-between">

                <div>

                    <h3 class="font-black text-slate-700">
                        Referencia del pago
                    </h3>

                    <p
                        class="text-xs text-slate-400 mt-1"
                        x-text="medioPagoReferenciaNombre"
                    ></p>

                </div>

                <button
                    type="button"
                    @click="cerrarReferenciaPago()"
                    class="w-8 h-8 rounded-lg bg-slate-100"
                >
                    ✕
                </button>

            </div>

            <div class="p-4">

                <div class="rounded-xl bg-brand-50 p-3 mb-3">

                    <div class="text-[10px] text-brand-600">
                        Monto
                    </div>

                    <strong
                        class="text-lg font-black text-brand-700"
                        x-text="'S/ ' + Number(medioPagoReferenciaMonto || 0).toFixed(2)"
                    ></strong>

                </div>

                <input
                    type="text"
                    x-model="referenciaPagoTemporal"
                    x-ref="referenciaPago"
                    @keydown.enter.prevent="guardarReferenciaPago()"
                    placeholder="Ingrese número de operación, referencia o código"
                    class="w-full rounded-xl border border-slate-200 px-3 py-3 text-sm focus:border-brand-500 focus:outline-none"
                >

                <div class="flex justify-end gap-2 mt-4">

                    <button
                        type="button"
                        @click="cerrarReferenciaPago()"
                        class="px-4 py-2.5 rounded-xl border border-slate-200 text-sm font-bold"
                    >
                        Cancelar
                    </button>

                    <button
                        type="button"
                        @click="guardarReferenciaPago()"
                        class="px-5 py-2.5 rounded-xl bg-brand-600 text-white text-sm font-bold"
                    >
                        Guardar
                    </button>

                </div>

            </div>

        </div>

    </div>


    {{-- =========================================================
         MODAL NUEVO CLIENTE
    ========================================================== --}}

    <div
        x-show="mostrarNuevoCliente"
        x-cloak
        class="fixed inset-0 z-[120] flex items-center justify-center p-4"
    >

        <div
            class="absolute inset-0 bg-slate-900/60"
            @click="cerrarNuevoCliente()"
        ></div>

        <div class="relative w-full max-w-lg bg-white rounded-2xl shadow-2xl overflow-hidden">

            <div class="p-4 border-b border-slate-100 flex items-center justify-between">

                <div>

                    <h3 class="font-black text-slate-700">
                        Registrar cliente
                    </h3>

                    <p class="text-xs text-slate-400 mt-1">
                        Puedes consultar DNI o RUC antes de guardar.
                    </p>

                </div>

                <button
                    type="button"
                    @click="cerrarNuevoCliente()"
                    class="w-8 h-8 rounded-lg bg-slate-100"
                >
                    ✕
                </button>

            </div>

            <div class="p-4 space-y-3">

                <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">

                    <select
                        x-model="nuevoCliente.tipo_documento"
                        class="rounded-lg border border-slate-200 px-3 py-2 text-sm"
                    >
                        <option value="DNI">
                            DNI
                        </option>

                        <option value="RUC">
                            RUC
                        </option>

                        <option value="CE">
                            CE
                        </option>
                    </select>

                    <div class="sm:col-span-2 flex gap-2">

                        <input
                            type="text"
                            x-model="nuevoCliente.numero_documento"
                            @keydown.enter.prevent="consultarDocumento()"
                            placeholder="Número de documento"
                            class="flex-1 rounded-lg border border-slate-200 px-3 py-2 text-sm"
                        >

                        <button
                            type="button"
                            @click="consultarDocumento()"
                            :disabled="consultandoDocumento"
                            class="px-3 rounded-lg bg-slate-800 text-white text-xs font-bold disabled:opacity-50"
                        >

                            <span x-show="!consultandoDocumento">
                                Consultar
                            </span>

                            <span x-show="consultandoDocumento" x-cloak>
                                ...
                            </span>

                        </button>

                    </div>

                </div>

                <input
                    type="text"
                    x-model="nuevoCliente.nombre"
                    placeholder="Nombre o razón social"
                    class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm"
                >

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">

                    <input
                        type="text"
                        x-model="nuevoCliente.apellido_paterno"
                        placeholder="Apellido paterno"
                        class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm"
                    >

                    <input
                        type="text"
                        x-model="nuevoCliente.apellido_materno"
                        placeholder="Apellido materno"
                        class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm"
                    >

                </div>

                <input
                    type="text"
                    x-model="nuevoCliente.telefono"
                    placeholder="Teléfono"
                    class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm"
                >

                <input
                    type="email"
                    x-model="nuevoCliente.email"
                    placeholder="Correo electrónico"
                    class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm"
                >

                <input
                    type="text"
                    x-model="nuevoCliente.direccion"
                    placeholder="Dirección"
                    class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm"
                >

                <div class="flex justify-end gap-2 pt-2">

                    <button
                        type="button"
                        @click="cerrarNuevoCliente()"
                        class="px-4 py-2.5 rounded-xl border border-slate-200 text-sm font-bold"
                    >
                        Cancelar
                    </button>

                    <button
                        type="button"
                        @click="guardarNuevoCliente()"
                        :disabled="guardandoCliente"
                        class="px-5 py-2.5 rounded-xl bg-brand-600 text-white text-sm font-bold disabled:opacity-50"
                    >

                        <span x-show="!guardandoCliente">
                            Guardar cliente
                        </span>

                        <span x-show="guardandoCliente" x-cloak>
                            Guardando...
                        </span>

                    </button>

                </div>

            </div>

        </div>

    </div>


    {{-- =========================================================
         MODAL ATAJOS
    ========================================================== --}}

    <div
        x-show="mostrarAtajos"
        x-cloak
        class="fixed inset-0 z-[130] flex items-center justify-center p-4"
    >

        <div
            class="absolute inset-0 bg-slate-900/60"
            @click="mostrarAtajos = false"
        ></div>

        <div class="relative w-full max-w-md bg-white rounded-2xl shadow-2xl overflow-hidden">

            <div class="p-4 border-b border-slate-100 flex items-center justify-between">

                <div>

                    <h3 class="font-black text-slate-700">
                        Atajos de teclado
                    </h3>

                    <p class="text-xs text-slate-400">
                        Puedes operar el POS sin utilizar el mouse.
                    </p>

                </div>

                <button
                    type="button"
                    @click="mostrarAtajos = false"
                    class="w-8 h-8 rounded-lg bg-slate-100"
                >
                    ✕
                </button>

            </div>

            <div class="p-4 space-y-2">

                <div class="flex justify-between items-center p-2 rounded-lg bg-slate-50">
                    <span class="text-xs text-slate-600">
                        Buscar producto
                    </span>
                    <kbd class="px-2 py-1 bg-white border rounded text-[10px] font-bold">
                        F2
                    </kbd>
                </div>

                <div class="flex justify-between items-center p-2 rounded-lg bg-slate-50">
                    <span class="text-xs text-slate-600">
                        Cambiar unidad de medida
                    </span>
                    <kbd class="px-2 py-1 bg-white border rounded text-[10px] font-bold">
                        F3
                    </kbd>
                </div>

                <div class="flex justify-between items-center p-2 rounded-lg bg-slate-50">
                    <span class="text-xs text-slate-600">
                        Buscar cliente
                    </span>
                    <kbd class="px-2 py-1 bg-white border rounded text-[10px] font-bold">
                        F4
                    </kbd>
                </div>

                <div class="flex justify-between items-center p-2 rounded-lg bg-slate-50">
                    <span class="text-xs text-slate-600">
                        Descuento
                    </span>
                    <kbd class="px-2 py-1 bg-white border rounded text-[10px] font-bold">
                        F6
                    </kbd>
                </div>

                <div class="flex justify-between items-center p-2 rounded-lg bg-slate-50">
                    <span class="text-xs text-slate-600">
                        Cobrar
                    </span>
                    <kbd class="px-2 py-1 bg-white border rounded text-[10px] font-bold">
                        F10
                    </kbd>
                </div>

                <div class="flex justify-between items-center p-2 rounded-lg bg-slate-50">
                    <span class="text-xs text-slate-600">
                        Navegar productos/clientes
                    </span>
                    <kbd class="px-2 py-1 bg-white border rounded text-[10px] font-bold">
                        ↑ ↓
                    </kbd>
                </div>

                <div class="flex justify-between items-center p-2 rounded-lg bg-slate-50">
                    <span class="text-xs text-slate-600">
                        Seleccionar
                    </span>
                    <kbd class="px-2 py-1 bg-white border rounded text-[10px] font-bold">
                        Enter
                    </kbd>
                </div>

            </div>

        </div>

    </div>

</div>

@endsection


<style>
/* POS: ticker continuo de ofertas/combos */
.ofertas-ticker-viewport { width: 100%; }
.ofertas-ticker-track {
    animation: posTicker 28s linear infinite;
    will-change: transform;
}
.ofertas-ticker-viewport:hover .ofertas-ticker-track { animation-play-state: paused; }
@keyframes posTicker {
    0% { transform: translateX(0); }
    92% { transform: translateX(calc(-100% + 100vw)); }
    100% { transform: translateX(0); }
}
/* El menú lateral permanece visible en modo normal; el modo Full Screen controla su ocultamiento. */
body.pos-menu-hidden aside { display: none !important; }
body.pos-menu-hidden main { margin-left: 0 !important; }
body.pos-menu-hidden [data-sidebar],
body.pos-menu-hidden [data-sidebar-menu] { display: none !important; }
.pos-menu-toggle {
    position: fixed; left: 12px; bottom: 12px; z-index: 200;
}
</style>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
function posApp() {

    return {

        /* =====================================================
           DATOS DESDE LARAVEL
        ====================================================== */

        productos: @json($productos ?? []),
        clientes: @json($clientes ?? []),
        mediosPago: @json($mediosPago ?? []),
        ofertas: @json($ofertas ?? []),
        combos: @json($combos ?? []),
        combosPorProducto: @json($combosPorProducto ?? []),
        seriesComprobantes: @json($seriesComprobantes ?? []),
        contextoCaja: @json($contextoCaja ?? []),
        reglaPuntos: @json($reglaPuntos ?? new stdClass()),
        porcentajeIGV: Number((@json($contextoCaja['igv_porcentaje'] ?? 18))) / 100,

        /* =====================================================
           BÚSQUEDA
        ====================================================== */

        search: '',
        buscarCliente: '',

        usarCodigoBarras: true,
        ocultarSinStock: true,
        menuLateralOculto: false,
        _ofertasAlertadas: new Set(),
        _combosAlertados: new Set(),
        ofertasIniciales: [],
        combosIniciales: [],

        /* =====================================================
           PRODUCTOS
        ====================================================== */

        productoActivo: null,
        productoActivoIndex: -1,
        listaFiltrada: [],
        productoSeleccionado: null,
        recomendaciones: [],
        recomendacionesCombos: [],
        alertasPromocionales: [],

        /* =====================================================
           CLIENTE
        ====================================================== */

        clienteSeleccionado: null,
        clienteId: null,
        mostrarResultadosClientes: false,
        clienteActivoIndex: -1,

        /* =====================================================
           PUNTOS
        ====================================================== */

        usarPuntos: false,
        puntosUsados: 0,
        _pendienteCanjePuntos: null,

        /* =====================================================
           CUPÓN
        ====================================================== */

        cuponInput: '',
        cuponAplicado: null,
        validandoCupon: false,
        errorCupon: '',

        /* =====================================================
           FIDELIZACIÓN
        ====================================================== */

        ofertasCarrusel: [],
        combosCarrusel: [],
        ofertasAplicadas: [],
        descuentoOfertas: 0,
        combosAplicados: [],
        cargandoFidelizacion: false,

        /* =====================================================
           CARRITO
        ====================================================== */

        cart: [],

        tipoComprobanteLabel() {
            if (this.usarPuntos) return 'NOTA DE VENTA';
            return this.tipoComprobante === 'factura' ? 'FACTURA' : this.tipoComprobante === 'boleta' ? 'BOLETA' : 'NOTA DE VENTA';
        },

        numeroComprobantePreview() {
            const tipo = this.usarPuntos ? 'nota_venta' : (this.tipoComprobante === 'ticket' ? 'nota_venta' : this.tipoComprobante);
            const serie = this.seriesComprobantes?.[tipo];
            return serie?.numero_formateado || serie?.numero || 'Pendiente';
        },

        /* =====================================================
           COMPROBANTE
        ====================================================== */

        tipoComprobante: 'ticket',
        condicionPago: 'contado',

        /* =====================================================
           DESCUENTO
        ====================================================== */

        descuento: 0,

        /* =====================================================
           PAGOS
        ====================================================== */

        pagos: {},

        /* =====================================================
           MODAL LOTES
        ====================================================== */

        mostrarSelectorLote: false,
        productoLote: null,
        loteActivo: null,
        loteActivoIndex: 0,
        _bloquearEnterProducto: false,

        /* =====================================================
           PRESENTACIONES POR PRODUCTO (ALMACENADAS POR ID)
        ====================================================== */
        _presentacionActiva: {}, // { productoId: index }

        // PROMOCIÓN ANTES DE AGREGAR
        mostrarSelectorOferta: false,
        ofertaProductoPendiente: null,
        ofertaLotePendiente: null,
        ofertaPresentacionPendiente: null,
        ofertaCantidadPendiente: 1,
        ofertasDisponiblesPendientes: [],
        ofertaActivaPendienteIndex: 0,
        cargandoOfertaPendiente: false,

        /* =====================================================
           REFERENCIA DE PAGO
        ====================================================== */

        mostrarReferenciaPago: false,
        medioPagoReferenciaId: null,
        medioPagoReferenciaNombre: '',
        medioPagoReferenciaMonto: 0,
        referenciaPagoTemporal: '',

        /* =====================================================
           NUEVO CLIENTE
        ====================================================== */

        mostrarNuevoCliente: false,
        consultandoDocumento: false,
        guardandoCliente: false,

        nuevoCliente: {
            tipo_documento: 'DNI',
            numero_documento: '',
            nombre: '',
            apellido_paterno: '',
            apellido_materno: '',
            telefono: '',
            email: '',
            direccion: ''
        },

        /* =====================================================
           UI
        ====================================================== */

        mostrarAtajos: false,
        procesando: false,
        mostrarMediosPagoIndividuales: false,

        mostrarEditorPrecio: false,
        precioEditandoIndex: -1,
        precioEditando: 0,
        motivoPrecioEditando: '',

        /* =====================================================
           INIT
        ====================================================== */

        init() {

            this.normalizarDatos();

            const clienteVarios = this.clientes.find(c => Number(c.id) === 1);
            if (clienteVarios) {
                this.seleccionarCliente(clienteVarios);
            }

            // Inicializar pagos con Efectivo por defecto
            this.inicializarPagosConEfectivo();

            this.$nextTick(() => {

                if (this.$refs.search) {
                    this.$refs.search.focus();
                }

            });

            this.configurarTeclado();

            document.addEventListener('fullscreenchange', () => {
                this.sincronizarMenuFullscreen();
            });
            this.sincronizarMenuFullscreen();

            this.ofertasIniciales = Array.isArray(this.ofertas) ? [...this.ofertas] : [];
            this.combosIniciales = Array.isArray(this.combos) ? [...this.combos] : [];
            this.ofertasCarrusel = [...this.ofertasIniciales];
            this.combosCarrusel = [...this.combosIniciales];
            this.cargarFidelizacion();

            document.addEventListener('click', (e) => {

                if (!e.target.closest('[data-resultados-clientes]') &&
                    !e.target.closest('[x-ref="buscadorCliente"]')) {

                    this.mostrarResultadosClientes = false;

                }

            });

            const self = this;

            // CORREGIDO: Watch del carrito para asignar pago en efectivo
            this.$watch('cart', function(newCart, oldCart) {
                // Siempre que el carrito tenga productos, asegurar que haya un pago en efectivo
                if (newCart && newCart.length > 0) {
                    // Si no hay pagos activos, asignar efectivo
                    const pagosActivos = self.pagosActivos();
                    if (pagosActivos.length === 0) {
                        console.log('No hay pagos activos, asignando Efectivo');
                        setTimeout(() => {
                            self.inicializarPagosConEfectivo();
                        }, 50);
                    }
                }
            });

        },

        /* =====================================================
           NORMALIZACIÓN
        ====================================================== */

        normalizarDatos() {

            this.productos = Array.isArray(this.productos)
                ? this.productos
                : Object.values(this.productos || {});

            this.clientes = Array.isArray(this.clientes)
                ? this.clientes
                : Object.values(this.clientes || {});

            this.mediosPago = Array.isArray(this.mediosPago)
                ? this.mediosPago
                : Object.values(this.mediosPago || {});

            this.productos = this.productos.map(p => {

                const presentaciones = Array.isArray(p.presentaciones) ? p.presentaciones : [];
                
                const presentacionesNormalizadas = presentaciones.map(pres => {
                    const tipo = String(pres.tipo || '').trim().toUpperCase();
                    let abreviatura = pres.abreviatura || '';
                    
                    if (!abreviatura) {
                        if (tipo.includes('BLISTER') || tipo.includes('BLIS')) {
                            abreviatura = 'BLIS';
                        } else if (tipo.includes('CAJA') || tipo.includes('CAJ')) {
                            abreviatura = 'CAJ';
                        } else if (tipo.includes('UNIDAD') || tipo.includes('UND')) {
                            abreviatura = 'UND';
                        } else if (tipo.includes('FRASCO')) {
                            abreviatura = 'FRAS';
                        } else if (tipo.includes('TUBO')) {
                            abreviatura = 'TUB';
                        } else if (tipo.includes('AMP')) {
                            abreviatura = 'AMP';
                        } else {
                            abreviatura = tipo.substring(0, 4);
                        }
                    }
                    
                    return {
                        ...pres,
                        abreviatura: abreviatura,
                        precio_venta: Number(pres.precio_venta || pres.precio || 0)
                    };
                });

                const presentacionesFinal = presentacionesNormalizadas.length > 0 
                    ? presentacionesNormalizadas 
                    : [{
                        tipo: 'UNIDAD',
                        abreviatura: 'UND',
                        equivalencia: 1,
                        precio_venta: Number(p.precio || p.precio_venta || 0),
                        es_venta: true,
                        estado: true
                    }];

                return {
                    ...p,
                    presentaciones: presentacionesFinal,
                    id: Number(p.id || 0),
                    precio: Number(p.precio ?? p.precio_venta ?? p.precio_final ?? 0),
                    stock: Number(p.stock ?? p.stock_actual ?? 0),
                    stock_minimo: Number(p.stock_minimo ?? 1),
                    lotes: Array.isArray(p.lotes) ? p.lotes : Array.isArray(p.stocks) ? p.stocks : []
                };

            });

        },

        /* =====================================================
           PRESENTACIONES - FUNCIONES
        ====================================================== */

        obtenerIndicePresentacion(producto) {
            if (!producto) return 0;
            const id = Number(producto.id);
            const presentaciones = Array.isArray(producto.presentaciones) ? producto.presentaciones : [];
            if (presentaciones.length <= 1) return 0;
            
            let index = this._presentacionActiva[id];
            if (index === undefined || index === null || index >= presentaciones.length) {
                const unidadIndex = presentaciones.findIndex(p => 
                    String(p.tipo || '').trim().toLowerCase() === 'unidad'
                );
                index = unidadIndex >= 0 ? unidadIndex : 0;
                this._presentacionActiva[id] = index;
            }
            return Math.min(Math.max(0, Number(index)), presentaciones.length - 1);
        },

        obtenerPresentacionActiva(producto) {
            if (!producto) return null;
            const presentaciones = Array.isArray(producto.presentaciones) ? producto.presentaciones : [];
            if (presentaciones.length === 0) return null;
            const index = this.obtenerIndicePresentacion(producto);
            return presentaciones[index] || presentaciones[0];
        },

        obtenerAbreviaturaPresentacion(producto) {
            const pres = this.obtenerPresentacionActiva(producto);
            return pres?.abreviatura || pres?.tipo || 'UND';
        },

        obtenerPrecioPresentacion(producto) {
            const pres = this.obtenerPresentacionActiva(producto);
            return Number(pres?.precio_venta || producto?.precio || 0);
        },

cambiarUnidadMedida(producto, event = null) {
    if (!producto) return;

    const presentaciones = Array.isArray(producto.presentaciones)
        ? producto.presentaciones
        : [];

    // Si solo tiene una presentación, no hacer nada
    if (presentaciones.length <= 1) {
        if (event && event.target) {
            const el = event.target;
            el.classList.add('changing');
            setTimeout(() => el.classList.remove('changing'), 300);
        }
        return;
    }

    const id = Number(producto.id);

    // Obtener la presentación actualmente activa
    const currentIndex = this.obtenerIndicePresentacion(producto);

    // Pasar a la siguiente presentación
    const nextIndex = (currentIndex + 1) % presentaciones.length;

    // Guardar la nueva presentación activa
    this._presentacionActiva[id] = nextIndex;

    const pres = presentaciones[nextIndex];

    // Actualizar producto activo
    this.productoActivo = producto;

    // Feedback visual cuando se cambia con mouse
    if (event && event.target) {
        const el = event.target;

        el.classList.add('changing');

        setTimeout(() => {
            el.classList.remove('changing');
        }, 300);
    }

    // Forzar actualización de Alpine sin modificar el buscador
    this.$nextTick(() => {
        // La presentación activa ya está guardada en
        // this._presentacionActiva[id]
    });
},
    


        /* =====================================================
           PRODUCTOS VISIBLES
        ====================================================== */

        productosVisibles() {

            let lista = this.productos.filter(p => {

                if (
                    this.ocultarSinStock &&
                    Number(p.stock || 0) <= 0
                ) {
                    return false;
                }

                return true;

            });

            const termino = String(this.search || '')
                .trim()
                .toLowerCase();

            if (!termino) {

                return lista.slice(0, 100);

            }

            return lista
                .filter(p => {

                    const campos = [

                        p.nombre,
                        p.codigo,
                        p.codigo_barras,
                        p.principio_activo,
                        p.presentacion,
                        p.concentracion

                    ];

                    return campos.some(valor =>
                        String(valor || '')
                            .toLowerCase()
                            .includes(termino)
                    );

                })
                .slice(0, 100);

        },

        /* =====================================================
           NAVEGAR PRODUCTOS
        ====================================================== */

        navegarProductos(direccion) {

            const lista = this.productosVisibles();

            if (!lista.length) {
                return;
            }

            let nuevoIndex =
                this.productoActivoIndex + direccion;

            if (nuevoIndex < 0) {
                nuevoIndex = lista.length - 1;
            }

            if (nuevoIndex >= lista.length) {
                nuevoIndex = 0;
            }

            this.productoActivoIndex = nuevoIndex;

            const producto = lista[nuevoIndex];

            this.productoActivo = producto;

            this.$nextTick(() => {

                const elemento =
                    document.getElementById(
                        'producto-' + producto.id
                    );

                if (elemento) {

                    elemento.scrollIntoView({
                        block: 'nearest',
                        behavior: 'smooth'
                    });

                }

            });

        },

        addFirstMatch() {

            if (this._bloquearEnterProducto) {
                this._bloquearEnterProducto = false;
                return;
            }

            const lista = this.productosVisibles();

            if (!lista.length) {
                return;
            }

            const index =
                this.productoActivoIndex >= 0
                    ? this.productoActivoIndex
                    : 0;

            const producto = lista[index];

            if (producto) {
                this.productoActivo = producto;
                const presentacion = this.obtenerPresentacionActiva(producto);
                this.abrirSelectorLote(producto, presentacion);
            }

        },

        seleccionarProductoPorClick(producto, index = -1) {

            this.productoActivo = producto;
            this.productoActivoIndex = index;
            this.actualizarRecomendaciones(producto);
            const presentacion = this.obtenerPresentacionActiva(producto);
            this.abrirSelectorLote(producto, presentacion);

        },

        limpiarBusqueda() {

            this.search = '';

            this.productoActivo = null;

            this.productoActivoIndex = -1;

            this.$nextTick(() => {

                if (this.$refs.search) {
                    this.$refs.search.focus();
                }

            });

        },

        /* =====================================================
           LOTES
        ====================================================== */

        abrirSelectorLote(producto, presentacion = null) {

            if (!producto) {
                return;
            }

            if (Number(producto.stock || 0) <= 0) {

                this.mensaje(
                    'Sin stock',
                    'El producto no tiene stock disponible.',
                    'warning'
                );

                return;
            }

            this.productoLote = producto;

            if (!presentacion) {
                presentacion = this.obtenerPresentacionActiva(producto);
            }

            this.ofertaPresentacionPendiente = presentacion || null;

            // Obtener equivalencia para saber cuántas unidades se necesitan
            const equivalencia = Number(presentacion?.equivalencia || 1);
            
            // Buscar el mejor lote disponible (FEFO con suficiente stock)
            const lotes = this.lotesDisponiblesConStockSuficiente(equivalencia);

            this.mostrarSelectorLote = true;

            if (lotes.length > 0) {
                this.loteActivoIndex = 0;
                this.loteActivo = lotes[0];

                this.$nextTick(() => {
                    this.seleccionarLote(lotes[0]);
                });
            } else {
                this.loteActivoIndex = -1;
                this.loteActivo = null;
                const alerta = this.mensaje(
                    'Sin stock suficiente',
                    `No hay un lote con suficiente stock (${equivalencia} unidades) para esta presentación.`,
                    'warning'
                );

                if (alerta && typeof alerta.then === 'function') {
                    alerta.then(() => {
                        this.cerrarSelectorLote();
                        this.$nextTick(() => {
                            if (this.$refs.search) {
                                this.$refs.search.focus();
                                this.$refs.search.select();
                            }
                        });
                    });
                }
            }
        },

        cerrarSelectorLote() {

            this.mostrarSelectorLote = false;

            this.productoLote = null;

            this.loteActivo = null;

            this.loteActivoIndex = 0;

        },

        // CORREGIDO: Calcular stock por presentación
        lotesDisponibles() {
            if (!this.productoLote) {
                return [];
            }

            let lotes = Array.isArray(this.productoLote.lotes)
                ? [...this.productoLote.lotes]
                : [];

            // Obtener la equivalencia de la presentación activa
            const presentacion = this.ofertaPresentacionPendiente || this.obtenerPresentacionActiva(this.productoLote);
            const equivalencia = Math.max(1, Number(presentacion?.equivalencia || 1));

            lotes = lotes.filter(lote =>
                Number(lote.stock || 0) > 0 &&
                !this.loteVencido(lote)
            );

            lotes.sort((a, b) => {

                const fechaA =
                    a.fecha_vencimiento
                        ? new Date(a.fecha_vencimiento).getTime()
                        : Number.MAX_SAFE_INTEGER;

                const fechaB =
                    b.fecha_vencimiento
                        ? new Date(b.fecha_vencimiento).getTime()
                        : Number.MAX_SAFE_INTEGER;

                return fechaA - fechaB;

            });

            // Calcular stock disponible en unidades de la presentación
            return lotes.map(lote => {
                const stockEnUnidades = Math.floor(Number(lote.stock || 0) / equivalencia);
                return {
                    ...lote,
                    stock: stockEnUnidades,
                    stock_real: Number(lote.stock || 0),
                    equivalencia: equivalencia
                };
            });
        },

        // NUEVA FUNCIÓN: Obtener lotes con stock suficiente para la equivalencia
        lotesDisponiblesConStockSuficiente(equivalencia) {
            if (!this.productoLote) {
                return [];
            }

            let lotes = Array.isArray(this.productoLote.lotes)
                ? [...this.productoLote.lotes]
                : [];

            lotes = lotes.filter(lote =>
                Number(lote.stock || 0) > 0 &&
                !this.loteVencido(lote)
            );

            // Ordenar por fecha de vencimiento (FEFO)
            lotes.sort((a, b) => {

                const fechaA =
                    a.fecha_vencimiento
                        ? new Date(a.fecha_vencimiento).getTime()
                        : Number.MAX_SAFE_INTEGER;

                const fechaB =
                    b.fecha_vencimiento
                        ? new Date(b.fecha_vencimiento).getTime()
                        : Number.MAX_SAFE_INTEGER;

                return fechaA - fechaB;

            });

            // Filtrar solo los lotes que tienen suficiente stock para la equivalencia
            const lotesFiltrados = lotes.filter(lote => 
                Number(lote.stock || 0) >= equivalencia
            );

            // Calcular stock disponible en unidades de la presentación
            return lotesFiltrados.map(lote => {
                const stockEnUnidades = Math.floor(Number(lote.stock || 0) / equivalencia);
                return {
                    ...lote,
                    stock: stockEnUnidades,
                    stock_real: Number(lote.stock || 0),
                    equivalencia: equivalencia
                };
            });
        },

        moverLoteConTeclado(delta) {
            if (!this.mostrarSelectorLote) return;
            const presentacion = this.ofertaPresentacionPendiente || this.obtenerPresentacionActiva(this.productoLote);
            const equivalencia = Number(presentacion?.equivalencia || 1);
            const lotes = this.lotesDisponiblesConStockSuficiente(equivalencia);
            if (!lotes.length) return;
            let siguiente = Number(this.loteActivoIndex);
            if (!Number.isFinite(siguiente) || siguiente < 0) siguiente = 0;
            siguiente = Math.max(0, Math.min(lotes.length - 1, siguiente + Number(delta || 0)));
            this.loteActivoIndex = siguiente;
            this.loteActivo = lotes[siguiente] || null;
            this.$nextTick(() => document.querySelector('[data-lote-index="' + siguiente + '"]')?.focus());
        },

        seleccionarLote(lote) {

            if (!lote || !this.productoLote) {
                return;
            }

            if (Number(lote.stock || 0) <= 0) {
                this.mensaje(
                    'Sin stock',
                    'Este lote no tiene stock disponible para esta presentación.',
                    'warning'
                );
                return;
            }

            const producto = this.productoLote;
            const presentacion = this.ofertaPresentacionPendiente || this.obtenerPresentacionActiva(producto);

            this._bloquearEnterProducto = true;

            this.prepararPromocionAntesDeAgregar(
                producto,
                lote,
                presentacion
            );

        },

        /* =====================================================
           PROMOCIÓN ANTES DE AGREGAR
        ====================================================== */

        stockLoteDisponible() {
            const lote = this.ofertaLotePendiente;
            if (!lote) return 0;
            return Math.max(0, Number(lote.stock || 0));
        },

        async prepararPromocionAntesDeAgregar(producto, lote, presentacion = null) {
            if (!producto || !lote) return;

            // Verificar que el lote tenga stock
            if (Number(lote.stock || 0) <= 0) {
                this.mensaje('Sin stock', 'No hay stock disponible para esta presentación.', 'warning');
                return;
            }

            this.cerrarSelectorLote();
            this.actualizarRecomendaciones(producto);
            this.ofertaProductoPendiente = producto;
            this.ofertaLotePendiente = lote;
            this.ofertaPresentacionPendiente = presentacion;
            
            // Establecer cantidad inicial a 1
            this.ofertaCantidadPendiente = 1;
            
            this.ofertaActivaPendienteIndex = 0;
            this.ofertasDisponiblesPendientes = [];
            this.mostrarSelectorOferta = true;

            await this.recalcularOfertaPendiente();

            // Poner foco en el botón "Agregar producto"
            this.$nextTick(() => {
                setTimeout(() => {
                    const btn = this.$refs.btnAgregarProducto;
                    if (btn) {
                        btn.focus();
                    } else {
                        const btnFallback = document.querySelector('.btn-agregar-producto');
                        if (btnFallback) btnFallback.focus();
                    }
                }, 200);
            });
        },

        // CORREGIDO: recalcular oferta con stock correcto
        async recalcularOfertaPendiente() {
            const producto = this.ofertaProductoPendiente;
            const lote = this.ofertaLotePendiente;
            if (!producto || !lote) return;

            this.cargandoOfertaPendiente = true;

            try {
                // El stock del lote ya está en unidades de la presentación
                const stockLote = Math.max(0, Number(lote.stock || 0));
                
                // Si el stock es 0, no permitir agregar
                if (stockLote <= 0) {
                    this.mensaje('Sin stock', 'No hay suficiente stock para esta presentación.', 'warning');
                    this.cerrarSelectorOferta();
                    return;
                }

                const cantidad = Math.max(
                    1,
                    Math.min(
                        Number(this.ofertaCantidadPendiente || 1),
                        stockLote
                    )
                );

                if (Number(this.ofertaCantidadPendiente || 1) > stockLote) {
                    this.ofertaCantidadPendiente = stockLote;
                } else {
                    this.ofertaCantidadPendiente = cantidad;
                }

                const precio = Number(
                    this.ofertaPresentacionPendiente?.precio_venta ??
                    this.obtenerPrecioPresentacion(producto) ??
                    producto.precio ??
                    0
                );

                const response = await fetch('{{ url('/fidelizacion/pos/consultar') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN':
                            document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
                            || '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        cliente_id: this.clienteId || 1,
                        local_id: this.contextoCaja?.local_id || null,
                        almacen_id: this.contextoCaja?.almacen_id || null,
                        subtotal: Number((precio * cantidad).toFixed(2)),
                        productos: [{
                            producto_id: Number(producto.id),
                            cantidad,
                            precio,
                            categoria_id: Number(producto.categoria_id || 0)
                        }]
                    })
                });

                if (!response.ok) throw new Error('No se pudo consultar promociones.');

                const data = await response.json();
                const f = data.fidelizacion || data;
                const ofertas = Array.isArray(f.ofertas) ? f.ofertas : [];
                const combos = Array.isArray(f.combos) ? f.combos : [];
                this.combosCarrusel = this.fusionarPromociones(this.combosIniciales, combos);

                this.ofertasDisponiblesPendientes = ofertas
                    .filter(o => Number(o?.descuento || 0) > 0 || o?.informativa === true || o?.aplicable === false)
                    .sort((a, b) => {
                        const aa = a?.aplicable === false ? 0 : 1;
                        const bb = b?.aplicable === false ? 0 : 1;
                        if (aa !== bb) return bb - aa;
                        return Number(b?.prioridad || 0) - Number(a?.prioridad || 0);
                    });

                this.ofertaActivaPendienteIndex = Math.min(
                    this.ofertaActivaPendienteIndex,
                    Math.max(0, this.ofertasDisponiblesPendientes.length - 1)
                );
            } catch (error) {
                console.warn('No se pudo consultar oferta para el producto:', error);
                this.ofertasDisponiblesPendientes = [];
            } finally {
                this.cargandoOfertaPendiente = false;
            }
        },

        ofertaPendienteActiva() {
            return this.ofertasDisponiblesPendientes[this.ofertaActivaPendienteIndex] || null;
        },

        textoOfertaPendiente(oferta) {
            if (!oferta) return '';

            const descuento = Number(oferta.descuento || 0);
            const tipo = String(oferta.tipo || '').toLowerCase();
            const cantidadCond = Array.isArray(oferta.condiciones)
                ? oferta.condiciones.find(c => String(c?.tipo || '').toLowerCase() === 'cantidad_minima')
                : null;
            const montoCond = Array.isArray(oferta.condiciones)
                ? oferta.condiciones.find(c => String(c?.tipo || '').toLowerCase() === 'monto_minimo')
                : null;

            if (oferta.aplicable === false) {
                if (cantidadCond && Number(cantidadCond.valor || 0) > 0) {
                    const minimo = Number(cantidadCond.valor);
                    if (tipo === 'precio_especial') {
                        return `Lleva ${minimo} unidades y paga S/ ${Number(oferta.valor || 0).toFixed(2)} por la promoción.`;
                    }
                    return `Lleva ${minimo} unidades para activar esta oferta.`;
                }
                if (montoCond && Number(montoCond.valor || 0) > 0) {
                    return `Compra desde S/ ${Number(montoCond.valor).toFixed(2)} para activar esta oferta.`;
                }
                return 'Oferta informativa: todavía no se puede aplicar con esta cantidad.';
            }

            if (tipo === 'porcentaje') {
                return `${Number(oferta.valor || 0)}% · Descuento S/ ${descuento.toFixed(2)}`;
            }
            if (tipo === 'precio_especial') {
                if (cantidadCond && Number(cantidadCond.valor || 0) > 0) {
                    return `${Number(cantidadCond.valor)} unidades · Precio especial S/ ${Number(oferta.valor || 0).toFixed(2)} · Descuento S/ ${descuento.toFixed(2)}`;
                }
                return `Precio especial S/ ${Number(oferta.valor || 0).toFixed(2)} · Descuento S/ ${descuento.toFixed(2)}`;
            }
            return `Descuento S/ ${descuento.toFixed(2)}`;
        },

        combosDisponiblesPendientes() {
            const producto = this.ofertaProductoPendiente;
            if (!producto) return [];

            const candidatos = [];
            const vistos = new Set();
            const fuentes = [
                ...(Array.isArray(this.combosPorProducto) ? this.combosPorProducto : []),
                ...(Array.isArray(this.combosIniciales) ? this.combosIniciales : []),
                ...(Array.isArray(this.combosCarrusel) ? this.combosCarrusel : []),
                ...(Array.isArray(this.combos) ? this.combos : [])
            ];

            const combosRelacionados = (this.recomendacionesCombos || []).concat(fuentes);
            for (const combo of combosRelacionados) {
                const id = Number(combo?.id || 0);
                if (!id || vistos.has(id) || Number(combo?.estado ?? 1) !== 1) continue;
                if (combo?.stock_suficiente === false) continue;

                const detalles = Array.isArray(combo?.detalles)
                    ? combo.detalles
                    : (Array.isArray(combo?.productos) ? combo.productos : []);
                if (!detalles.length) continue;

                const pertenece = detalles.some(d => Number(d?.producto_id ?? d?.id) === Number(producto.id));
                if (!pertenece) continue;

                const stockCompleto = detalles.every(d => {
                    const pid = Number(d?.producto_id ?? d?.id);
                    const requerido = Math.max(1, Number(d?.cantidad || 1));
                    const p = (this.productos || []).find(x => Number(x.id) === pid);
                    if (!p) return false;
                    const stock = Array.isArray(p.lotes)
                        ? p.lotes.filter(l => Number(l?.stock || 0) > 0 && !this.loteVencido(l)).reduce((t, l) => t + Number(l.stock || 0), 0)
                        : Number(p.stock || 0);
                    return stock >= requerido;
                });

                if (!stockCompleto) continue;
                vistos.add(id);
                candidatos.push(combo);
            }

            return candidatos;
        },

        agregarComboPendiente(combo) {
            if (!combo) return;
            this.agregarComboAlCarrito(combo);
            this.cerrarSelectorOferta();
        },

        // CORREGIDO: cambiar cantidad con stock correcto
        async cambiarCantidadOfertaPendiente(delta) {
            const lote = this.ofertaLotePendiente;
            if (!lote) return;

            const maximo = Math.max(0, Number(lote.stock || 0));
            if (maximo <= 0) {
                this.mensaje('Sin stock', 'No hay suficiente stock para esta presentación.', 'warning');
                this.cerrarSelectorOferta();
                return;
            }

            const nueva = Math.max(
                1,
                Math.min(maximo, Number(this.ofertaCantidadPendiente || 1) + Number(delta || 0))
            );

            if (nueva === Number(this.ofertaCantidadPendiente || 1)) return;

            this.ofertaCantidadPendiente = nueva;
            await this.recalcularOfertaPendiente();
        },

        agregarPendienteConOferta() {
            const producto = this.ofertaProductoPendiente;
            const lote = this.ofertaLotePendiente;
            const presentacion = this.ofertaPresentacionPendiente;
            if (!producto || !lote) return;

            this.agregarProductoConLote(
                producto,
                lote,
                presentacion,
                Math.max(1, Number(this.ofertaCantidadPendiente || 1))
            );

            this.cerrarSelectorOferta();
        },

        agregarPendienteSinOferta() {
            const producto = this.ofertaProductoPendiente;
            const lote = this.ofertaLotePendiente;
            const presentacion = this.ofertaPresentacionPendiente;
            if (!producto || !lote) return;

            this.agregarProductoConLote(
                producto,
                lote,
                presentacion,
                Math.max(1, Number(this.ofertaCantidadPendiente || 1))
            );

            this.cerrarSelectorOferta();
        },

        cerrarSelectorOferta() {
            this.mostrarSelectorOferta = false;
            this.ofertaProductoPendiente = null;
            this.ofertaLotePendiente = null;
            this.ofertaPresentacionPendiente = null;
            this.ofertaCantidadPendiente = 1;
            this.ofertasDisponiblesPendientes = [];
            this.ofertaActivaPendienteIndex = 0;
            this.cargandoOfertaPendiente = false;
        },

        agregarProductoConLote(producto, lote, presentacion = null, cantidadInicial = 1) {

            const pres = presentacion || this.obtenerPresentacionActiva(producto);
            
            const key =
                String(producto.id) +
                '-' +
                String(pres?.id || 'base') +
                '-' +
                String(lote.id || lote.lote || 'sin-lote');

            const existente =
                this.cart.find(item => item.key === key);

            if (existente) {

                if (
                    Number(existente.cantidad) <
                    Number(lote.stock)
                ) {

                    existente.cantidad++;

                } else {

                    this.mensaje(
                        'Stock insuficiente',
                        'No puedes agregar más unidades de este lote.',
                        'warning'
                    );

                }

                this.$nextTick(() => this.cargarFidelizacion());
                return;

            }

            this.cart.push({

                key: key,

                id: Number(producto.id),

                producto_id: Number(producto.id),

                nombre: producto.nombre,

                codigo: producto.codigo || '',

                codigo_barras: producto.codigo_barras || '',

                principio_activo:
                    producto.principio_activo || '',

                categoria_id: Number(producto.categoria_id || 0),
                categoria: producto.categoria || '',

                presentacion:
                    producto.presentacion || '',

                concentracion:
                    producto.concentracion || '',

                precio: Number(
                    pres?.precio_venta ??
                    producto.precio ??
                    0
                ),

                presentacion_id: pres?.id || null,
                presentacion_tipo: pres?.tipo || producto.presentacion || '',
                presentacion_abreviatura: pres?.abreviatura || 'UND',
                equivalencia: Number(pres?.equivalencia || 1),
                cantidad: Math.max(1, Number(cantidadInicial || 1)),

                stock: Number(
                    lote.stock || 0
                ),

                lote_id: lote.id || null,

                lote:
                    lote.lote ||
                    lote.codigo ||
                    '',

                fecha_vencimiento:
                    lote.fecha_vencimiento || null,

                fecha_vencimiento_formateada:
                    this.formatearFecha(
                        lote.fecha_vencimiento
                    ),

                esCanjePorPuntos: false,

                comboId: null,

                combo_id: null

            });

            // CORREGIDO: Después de agregar un producto, asegurar que haya pago en efectivo
            this.$nextTick(() => {
                this.inicializarPagosConEfectivo();
                this.cargarFidelizacion();
            });

            this.actualizarRecomendaciones(producto);

            const categoriaIdProducto = Number(producto?.categoria_id || 0);
            (this.ofertasIniciales || []).forEach(oferta => {
                const condiciones = Array.isArray(oferta?.condiciones) ? oferta.condiciones : [];
                const corresponde = condiciones.some(cond => {
                    const tipo = String(cond?.tipo || '').toLowerCase();
                    return (tipo === 'producto' && Number(cond?.producto_id) === Number(producto.id)) ||
                        (tipo === 'categoria' && Number(cond?.categoria_id) === categoriaIdProducto);
                });

                if (corresponde && Number(oferta?.id) && !this._ofertasAlertadas.has(`${Number(oferta.id)}-${Number(producto.id)}`)) {
                    this._ofertasAlertadas.add(`${Number(oferta.id)}-${Number(producto.id)}`);
                    const copia = { ...oferta, _productoAlerta: producto };
                    const texto = this.textoOferta(copia);
                    this.notificarFidelizacion('¡Oferta disponible!', texto, 'success');
                    this.agregarAlertaPromocional('oferta', oferta.id, '¡Oferta disponible!', texto, producto.id);
                }
            });

            const combosProducto = (this.recomendacionesCombos && this.recomendacionesCombos.length)
                ? this.recomendacionesCombos
                : (Array.isArray(this.combosCarrusel) ? this.combosCarrusel.filter(combo =>
                    Array.isArray(combo?.detalles) && combo.detalles.some(d => Number(d?.producto_id) === Number(producto.id))
                ) : []);
            combosProducto.forEach(combo => {
                const id = Number(combo?.id);
                if (id && !this._combosAlertados.has(`${id}-${Number(producto.id)}`)) {
                    this._combosAlertados.add(`${id}-${Number(producto.id)}`);
                    const textoCombo = `Este producto pertenece al combo ${combo?.nombre || ''}. Precio del combo: S/ ${Number(combo?.precio || 0).toFixed(2)}. Puedes agregar los demás productos para completarlo.`;
                    this.notificarFidelizacion('¡Hay un combo disponible!', textoCombo, 'info');
                    this.agregarAlertaPromocional('combo', id, '¡Hay un combo disponible!', textoCombo, producto.id);
                }
            });

        },

        /* =====================================================
           CARRITO
        ====================================================== */

        // CORREGIDO: stock disponible para item
        stockDisponibleParaItem(item) {
            // El stock ya viene calculado en unidades de la presentación
            return Number(item?.stock || 0);
        },

        inc(index) {

            const item = this.cart[index];

            if (!item) {
                return;
            }

            const cantidad =
                Number(item.cantidad || 0);

            const stock =
                this.stockDisponibleParaItem(item);

            if (cantidad >= stock) {

                this.mensaje(
                    'Stock máximo',
                    'No hay más unidades disponibles en este lote.',
                    'warning'
                );

                return;

            }

            item.cantidad = cantidad + 1;
            if (this.usarPuntos) this.puntosUsados = this.puntosNecesariosAutomaticos();

        },

        dec(index) {

            const item = this.cart[index];

            if (!item) {
                return;
            }

            const cantidad =
                Number(item.cantidad || 0);

            if (cantidad <= 1) {

                this.remove(index);

                return;

            }

            item.cantidad = cantidad - 1;
            if (this.usarPuntos) this.puntosUsados = this.puntosNecesariosAutomaticos();

        },

        remove(index) {

            if (
                index < 0 ||
                index >= this.cart.length
            ) {
                return;
            }

            this.cart.splice(index, 1);

            this.sincronizarAlertasPromocionales();
            this.recalcularCombos();
            
            // CORREGIDO: Después de eliminar un producto, asegurar que haya pago en efectivo
            this.$nextTick(() => {
                this.inicializarPagosConEfectivo();
                this.cargarFidelizacion();
            });

        },

        validarCantidad(index) {

            const item = this.cart[index];

            if (!item) {
                return;
            }

            let cantidad =
                Number(item.cantidad || 1);

            const stock =
                this.stockDisponibleParaItem(item);

            if (cantidad < 1) {
                cantidad = 1;
            }

            if (cantidad > stock) {
                cantidad = stock;
            }

            item.cantidad = cantidad;
            if (this.usarPuntos) {
                this.puntosUsados = this.puntosNecesariosAutomaticos();
            }

        },

        /* =====================================================
           COMBOS
        ====================================================== */

        agregarComboAlCarrito(combo) {

            if (!combo) {
                return;
            }

            const componentes =
                Array.isArray(combo.productos)
                    ? combo.productos
                    : Array.isArray(combo.detalles)
                        ? combo.detalles
                        : [];

            if (!componentes.length) {

                this.mensaje(
                    'Combo',
                    'El combo no tiene productos configurados.',
                    'warning'
                );

                return;

            }

            for (const componente of componentes) {

                const productoId =
                    componente.producto_id ??
                    componente.id;

                const producto =
                    this.productos.find(
                        p => Number(p.id) === Number(productoId)
                    );

                if (!producto) {
                    continue;
                }

                const cantidad =
                    Number(
                        componente.cantidad || 1
                    );

                // Obtener la presentación activa del producto para saber equivalencia
                const presentacion = this.obtenerPresentacionActiva(producto);
                const equivalencia = Number(presentacion?.equivalencia || 1);
                
                // Buscar un lote con stock suficiente para la equivalencia
                const lotesDisponibles = this.lotesDisponiblesConStockSuficienteParaProducto(producto, equivalencia);
                const lote = lotesDisponibles.length > 0 ? lotesDisponibles[0] : null;

                if (!lote) {

                    this.mensaje(
                        'Stock insuficiente',
                        `No hay stock suficiente (${equivalencia} unidades) para ${producto.nombre} en la presentación seleccionada.`,
                        'warning'
                    );

                    return;

                }

                const key =
                    'combo-' +
                    combo.id +
                    '-' +
                    producto.id +
                    '-' +
                    (lote.id || lote.lote || 'sin-lote');

                const existente =
                    this.cart.find(
                        item => item.key === key
                    );

                if (existente) {

                    existente.cantidad += cantidad;

                } else {

                    this.cart.push({

                        key,

                        id: Number(producto.id),

                        producto_id:
                            Number(producto.id),

                        nombre: producto.nombre,

                        codigo:
                            producto.codigo || '',

                        codigo_barras:
                            producto.codigo_barras || '',

                        principio_activo:
                            producto.principio_activo || '',

                        presentacion:
                            producto.presentacion || '',

                        concentracion:
                            producto.concentracion || '',

                        precio: Number(
                            componente.precio ??
                            producto.precio ??
                            0
                        ),

                        precio_base_combo: Number(
                            componente.precio ??
                            producto.precio ??
                            0
                        ),

                        comboUnitPrice: Number(combo.precio || 0),

                        cantidad,

                        stock:
                            Number(lote.stock || 0),

                        lote_id:
                            lote.id || null,

                        lote:
                            lote.lote ||
                            lote.codigo ||
                            '',

                        fecha_vencimiento:
                            lote.fecha_vencimiento || null,

                        fecha_vencimiento_formateada:
                            this.formatearFecha(
                                lote.fecha_vencimiento
                            ),

                        comboId:
                            combo.id,

                        combo_id:
                            combo.id,

                        esCanjePorPuntos:
                            false

                    });

                }

            }

            this.recalcularCombos();
            this.aplicarPrecioCombo(combo);
            
            // CORREGIDO: Después de agregar un combo, asegurar que haya pago en efectivo
            this.$nextTick(() => {
                this.inicializarPagosConEfectivo();
                this.cargarFidelizacion();
            });

        },

        // Función auxiliar para combos
        lotesDisponiblesConStockSuficienteParaProducto(producto, equivalencia) {
            if (!producto) return [];

            let lotes = Array.isArray(producto.lotes)
                ? [...producto.lotes]
                : [];

            lotes = lotes.filter(lote =>
                Number(lote.stock || 0) > 0 &&
                !this.loteVencido(lote)
            );

            lotes.sort((a, b) => {

                const fechaA =
                    a.fecha_vencimiento
                        ? new Date(a.fecha_vencimiento).getTime()
                        : Number.MAX_SAFE_INTEGER;

                const fechaB =
                    b.fecha_vencimiento
                        ? new Date(b.fecha_vencimiento).getTime()
                        : Number.MAX_SAFE_INTEGER;

                return fechaA - fechaB;

            });

            return lotes.filter(lote => 
                Number(lote.stock || 0) >= equivalencia
            );
        },

        aplicarPrecioCombo(combo) {
            if (!combo || !Number(combo.precio)) return;
            const items = this.cart.filter(i => Number(i.comboId) === Number(combo.id));
            if (!items.length) return;

            const detalles = Array.isArray(combo.detalles) ? combo.detalles : [];
            let sets = null;
            for (const detalle of detalles) {
                const requeridos = Math.max(1, Number(detalle.cantidad || 1));
                const disponibles = items
                    .filter(i => Number(i.producto_id) === Number(detalle.producto_id))
                    .reduce((t, i) => t + Number(i.cantidad || 0), 0);
                const posibles = Math.floor(disponibles / requeridos);
                sets = sets === null ? posibles : Math.min(sets, posibles);
            }
            sets = Math.max(1, Number(sets || 1));

            const bruto = items.reduce((t, i) => t + Number(i.precio_base_combo ?? i.precio ?? 0) * Number(i.cantidad || 0), 0);
            if (bruto <= 0) return;

            const target = Number(combo.precio || 0) * sets;
            let acumulado = 0;
            items.forEach((item, idx) => {
                const base = Number(item.precio_base_combo ?? item.precio ?? 0);
                const qty = Number(item.cantidad || 0);
                let subtotalLinea = target * (base * qty) / bruto;
                if (idx === items.length - 1) subtotalLinea = Math.max(0, target - acumulado);
                item.precio = qty > 0 ? Number((subtotalLinea / qty).toFixed(6)) : 0;
                item.comboUnitPrice = Number(combo.precio || 0);
                item.comboSets = sets;
                acumulado += Number(item.precio) * qty;
            });
        },

        recalcularCombos() {

            this.combosAplicados = [];

            for (const item of this.cart) {

                if (!item.comboId) {
                    continue;
                }

                const combo =
                    this.combosCarrusel.find(
                        c =>
                            Number(c.id) ===
                            Number(item.comboId)
                    );

                if (!combo) {
                    continue;
                }

                let encontrado =
                    this.combosAplicados.find(
                        c =>
                            Number(c.id) ===
                            Number(combo.id)
                    );

                if (!encontrado) {

                    encontrado = {
                        ...combo,
                        cantidad: 0
                    };

                    this.combosAplicados.push(
                        encontrado
                    );

                }

                encontrado.cantidad +=
                    Number(item.cantidad || 0);

            }

        },

        descuentoPorCombos() {
            return 0;
        },

        /* =====================================================
           CLIENTES
        ====================================================== */

        clientesFiltrados() {

            const termino =
                String(this.buscarCliente || '')
                    .trim()
                    .toLowerCase();

            if (!termino) {
                return this.clientes.slice(0, 50);
            }

            return this.clientes
                .filter(cliente => {

                    const nombre =
                        this.clienteNombreDesde(cliente);

                    return [

                        nombre,

                        cliente.numero_documento,

                        cliente.documento,

                        cliente.telefono,

                        cliente.email

                    ].some(valor =>
                        String(valor || '')
                            .toLowerCase()
                            .includes(termino)
                    );

                })
                .slice(0, 50);

        },

        clienteNombreDesde(cliente) {

            if (!cliente) {
                return 'Cliente';
            }

            const nombreCompleto = [

                cliente.nombre,

                cliente.apellido_paterno,

                cliente.apellido_materno

            ]
                .filter(Boolean)
                .join(' ')
                .trim();

            return (
                cliente.razon_social ||
                nombreCompleto ||
                cliente.nombre_completo ||
                'Cliente'
            );

        },

        clienteNombre() {

            return this.clienteNombreDesde(
                this.clienteSeleccionado
            );

        },

        seleccionarCliente(cliente) {

            if (!cliente) {
                return;
            }

            this.clienteSeleccionado = cliente;

            this.clienteId =
                cliente.id || null;

            this.buscarCliente = '';

            this.mostrarResultadosClientes = false;

            this.clienteActivoIndex = -1;

            this.cargarFidelizacion();

        },

        seleccionarPrimerCliente() {

            const lista =
                this.clientesFiltrados();

            if (!lista.length) {
                return;
            }

            const index =
                this.clienteActivoIndex >= 0
                    ? this.clienteActivoIndex
                    : 0;

            this.seleccionarCliente(
                lista[index]
            );

        },

        navegarClientes(direccion) {

            const lista =
                this.clientesFiltrados();

            if (!lista.length) {
                return;
            }

            let index =
                this.clienteActivoIndex +
                direccion;

            if (index < 0) {
                index = lista.length - 1;
            }

            if (index >= lista.length) {
                index = 0;
            }

            this.clienteActivoIndex = index;

        },

        quitarCliente() {

            this.clienteSeleccionado = null;

            this.clienteId = null;

            this.buscarCliente = '';

            this.usarPuntos = false;

            this.puntosUsados = 0;

            this.cuponAplicado = null;

            this.cuponInput = '';

            this.errorCupon = '';

        },

        /* =====================================================
           PUNTOS
        ====================================================== */

        puntosCliente() {

            if (!this.clienteSeleccionado) {
                return 0;
            }

            return Number(
                this.clienteSeleccionado.puntos ??
                this.clienteSeleccionado.puntos_actuales ??
                this.clienteSeleccionado.puntos_disponibles ??
                0
            );

        },

        puedeUsarPuntos() {

            return (
                this.clienteSeleccionado !== null &&
                this.puntosCliente() > 0 &&
                this.cart.length > 0
            );

        },

        toggleUsarPuntos() {
            if (!this.puedeUsarPuntos()) return;

            this.usarPuntos = !this.usarPuntos;

            if (!this.usarPuntos) {
                this.puntosUsados = 0;
                return;
            }

            this.puntosUsados = this.puntosNecesariosAutomaticos();
            this.normalizarPuntos();

            if (this.puntosUsados <= 0) {
                this.usarPuntos = false;
                return;
            }

            this.tipoComprobante = 'nota_venta';
            this.inicializarPagos();
        },

        puntosNecesariosAutomaticos() {
            const valorPunto = this.solesPorPunto();
            if (valorPunto <= 0) return 0;
            const importe = Math.max(0, this.subtotal() - Number(this.descuento || 0) - this.descuentoCupon() - this.descuentoPorCombos());
            return Math.min(this.maxPuntosCanjeables(), Math.ceil(importe / valorPunto));
        },

        maxPuntosCanjeables() {

            return Math.max(
                0,
                Math.floor(
                    this.puntosCliente()
                )
            );

        },

        usarTodosLosPuntos() {

            this.puntosUsados =
                this.maxPuntosCanjeables();

            this.normalizarPuntos();

        },

        normalizarPuntos() {

            let puntos =
                Number(this.puntosUsados || 0);

            puntos =
                Math.floor(
                    Math.max(
                        0,
                        puntos
                    )
                );

            const max =
                this.maxPuntosCanjeables();

            if (puntos > max) {
                puntos = max;
            }

            this.puntosUsados = puntos;

        },

        puntosPorSoles() {

            const regla =
                this.reglaPuntos || {};

            return Number(
                regla.puntos_por_soles ??
                regla.puntos_por_cada_soles ??
                regla.puntos_por_venta ??
                1
            ) || 1;

        },

        solesPorPunto() {

            const regla =
                this.reglaPuntos || {};

            return Number(
                regla.valor_punto ??
                regla.soles_por_punto ??
                0.01
            ) || 0.01;

        },

        descuentoPorPuntos() {

            if (!this.usarPuntos) {
                return 0;
            }

            return Math.min(
                this.subtotal(),
                Number(this.puntosUsados || 0) *
                this.solesPorPunto()
            );

        },

        puntosRestantes() {

            return Math.max(
                0,
                this.puntosCliente() -
                Number(this.puntosUsados || 0)
            );

        },

        formatearPuntos(puntos) {

            return (
                Number(puntos || 0)
                    .toLocaleString('es-PE') +
                ' pts'
            );

        },

        productosCanjeables() {

            if (!this.clienteSeleccionado) {
                return [];
            }

            return this.productos.filter(p => {

                const puntos =
                    Number(
                        p.puntos_necesarios ??
                        p.puntos_canje ??
                        p.puntos ??
                        0
                    );

                return (
                    puntos > 0 &&
                    puntos <= this.puntosCliente() &&
                    Number(p.stock || 0) > 0
                );

            });

        },

        canjearProductoPorPuntos(producto) {
            const puntos = Number(
                producto?.puntos_necesarios ??
                producto?.puntos_canje ??
                producto?.puntos ?? 0
            );

            if (!producto || puntos <= 0 || puntos > this.puntosCliente()) return;

            // Obtener la presentación activa del producto
            const presentacion = this.obtenerPresentacionActiva(producto);
            const equivalencia = Number(presentacion?.equivalencia || 1);
            
            // Buscar un lote con stock suficiente
            const lotesDisponibles = this.lotesDisponiblesConStockSuficienteParaProducto(producto, equivalencia);
            const lote = lotesDisponibles.length > 0 ? lotesDisponibles[0] : null;
            
            if (!lote) {
                this.mensaje('Sin stock', `No hay stock suficiente (${equivalencia} unidades) para este producto en la presentación seleccionada.`, 'warning');
                return;
            }

            this.cart = [];
            this.inicializarPagos();
            this.usarPuntos = true;
            this.tipoComprobante = 'nota_venta';

            const key = 'canje-' + producto.id + '-' + (lote.id || lote.lote || 'sin-lote');
            this.cart.push({
                key,
                id: Number(producto.id),
                producto_id: Number(producto.id),
                nombre: producto.nombre,
                codigo: producto.codigo || '',
                principio_activo: producto.principio_activo || '',
                precio: 0,
                cantidad: 1,
                stock: Number(lote.stock || 0),
                lote_id: lote.id || null,
                lote: lote.lote || lote.codigo || '',
                fecha_vencimiento: lote.fecha_vencimiento || null,
                fecha_vencimiento_formateada: this.formatearFecha(lote.fecha_vencimiento),
                esCanjePorPuntos: true,
                puntos_necesarios: puntos,
                puntos_canjeados: puntos,
                comboId: null,
                combo_id: null,
                presentacion_id: presentacion?.id || null,
                presentacion_abreviatura: presentacion?.abreviatura || 'UND',
                equivalencia: equivalencia
            });

            this.puntosUsados = puntos;
            this.normalizarPuntos();
        },

        /* =====================================================
           CUPONES
        ====================================================== */

        async validarCupon() {

            const codigo =
                String(
                    this.cuponInput || ''
                )
                .trim()
                .toUpperCase();

            this.errorCupon = '';

            if (!codigo) {
                return;
            }

            if (!this.clienteId) {

                this.errorCupon =
                    'Primero selecciona un cliente.';

                return;

            }

            this.validandoCupon = true;

            try {

                const response =
                    await fetch(
                        '{{ url('/fidelizacion/pos/codigo') }}',
                        {
                            method: 'POST',

                            headers: {
                                'Content-Type':
                                    'application/json',

                                'Accept':
                                    'application/json',

                                'X-CSRF-TOKEN':
                                    document.querySelector(
                                        'meta[name="csrf-token"]'
                                    )?.getAttribute('content') ||
                                    '{{ csrf_token() }}'
                            },

                            body: JSON.stringify({

                                codigo: codigo,

                                cliente_id:
                                    this.clienteId,

                                subtotal:
                                    this.subtotal(),

                                productos:
                                    this.payload().map(i => ({ producto_id: i.producto_id, cantidad: i.cantidad, precio: i.precio }))

                            })
                        }
                    );

                const data =
                    await response.json();

                if (!response.ok) {

                    throw new Error(
                        data.message ||
                        'No se pudo validar el cupón.'
                    );

                }

                if (
                    data.success === false ||
                    data.valido === false
                ) {

                    throw new Error(
                        data.message ||
                        'El cupón no es válido.'
                    );

                }

                this.cuponAplicado =
                    data.codigo ||
                    data.cupon ||
                    data.data ||
                    data;

                this.cuponInput =
                    codigo;

                this.errorCupon = '';

            } catch (error) {

                this.cuponAplicado = null;

                this.errorCupon =
                    error.message ||
                    'No se pudo validar el cupón.';

            } finally {

                this.validandoCupon = false;

            }

        },

        quitarCupon() {

            this.cuponAplicado = null;

            this.cuponInput = '';

            this.errorCupon = '';

        },

        descuentoCupon() {

            if (!this.cuponAplicado) {
                return 0;
            }

            const cupon =
                this.cuponAplicado;

            let descuento =
                Number(
                    cupon.descuento_calculado ??
                    cupon.monto_descuento ??
                    cupon.descuento ??
                    cupon.valor_descuento ??
                    cupon.beneficio ??
                    0
                );

            const tipo =
                String(
                    cupon.tipo_descuento ??
                    cupon.tipo ??
                    'monto'
                ).toLowerCase();

            if (
                tipo === 'porcentaje' ||
                tipo === 'porcentaje_descuento'
            ) {

                descuento =
                    this.subtotal() *
                    descuento /
                    100;

            }

            return Math.min(
                this.subtotal(),
                Math.max(0, descuento)
            );

        },

        /* =====================================================
           TOTALES
        ====================================================== */

        subtotal() {

            return this.cart.reduce(
                (total, item) => {

                    return total +
                        Number(item.precio || 0) *
                        Number(item.cantidad || 0);

                },
                0
            );

        },

        descuentoTotalSinIGV() {

            const subtotal =
                this.subtotal();

            const descuentos =

                Number(this.descuento || 0) +

                this.descuentoPorPuntos() +

                this.descuentoPorCombos() +

                this.descuentoCupon() +

                Number(this.descuentoOfertas || 0);

            return Math.min(
                subtotal,
                Math.max(
                    0,
                    descuentos
                )
            );

        },

        baseImponible() {

            const totalConIGV = Math.max(
                0,
                this.subtotal() - this.descuentoTotalSinIGV()
            );

            const tasa = Number(this.porcentajeIGV || 0);

            return tasa > 0
                ? totalConIGV / (1 + tasa)
                : totalConIGV;

        },

        igv() {

            const totalConIGV = Math.max(
                0,
                this.subtotal() - this.descuentoTotalSinIGV()
            );

            return Math.max(
                0,
                totalConIGV - this.baseImponible()
            );

        },

        total() {

            return Math.max(
                0,
                Number(
                    this.subtotal() - this.descuentoTotalSinIGV()
                ).toFixed(2)
            );

        },

        normalizarDescuento() {

            let valor =
                Number(this.descuento || 0);

            if (valor < 0) {
                valor = 0;
            }

            if (valor > this.subtotal()) {
                valor = this.subtotal();
            }

            this.descuento =
                Number(valor.toFixed(2));

        },

        /* =====================================================
           PAGOS
        ====================================================== */

        inicializarPagos() {

            this.pagos = {};

            for (const medio of this.mediosPago) {

                this.pagos[medio.id] = {

                    medio_pago_id:
                        medio.id,

                    monto: 0,

                    referencia: '',

                    banco: '',

                    tipo_tarjeta: ''

                };

            }

        },

        pagoRapidoEfectivo() {
            if (this.cart.length === 0) {
                this.mensaje('Carrito vacío', 'Agrega productos antes de pagar.', 'warning');
                return;
            }

            this.mostrarMediosPagoIndividuales = false;

            const efectivo = this.mediosPago.find(m =>
                String(m.nombre || '').toLowerCase().includes('efectivo')
            );

            if (!efectivo) {
                this.mensaje('Error', 'No se encontró el medio de pago "Efectivo".', 'warning');
                return;
            }

            this.inicializarPagos();
            const total = this.total();
            this.pago(efectivo.id).monto = Number(total.toFixed(2));

            this.mensaje(
                '✅ Pago en efectivo',
                `Se ha asignado S/ ${total.toFixed(2)} al pago en efectivo.`,
                'success'
            );
        },

        pagoRapidoMixto() {
            if (this.cart.length === 0) {
                this.mensaje('Carrito vacío', 'Agrega productos antes de pagar.', 'warning');
                return;
            }

            this.mostrarMediosPagoIndividuales = true;
            this.inicializarPagos();

            const total = this.total();
            const efectivo = this.mediosPago.find(m =>
                String(m.nombre || '').toLowerCase().includes('efectivo')
            );

            const tarjeta = this.mediosPago.find(m =>
                String(m.nombre || '').toLowerCase().includes('tarjeta')
            );

            if (efectivo && tarjeta) {
                const efectivoMonto = total * 0.6;
                const tarjetaMonto = total * 0.4;

                this.pago(efectivo.id).monto = Number(efectivoMonto.toFixed(2));
                this.pago(tarjeta.id).monto = Number(tarjetaMonto.toFixed(2));

                this.mensaje(
                    '✅ Pago mixto',
                    `Efectivo: S/ ${efectivoMonto.toFixed(2)} - Tarjeta: S/ ${tarjetaMonto.toFixed(2)}`,
                    'success'
                );
            } else {
                this.mensaje('Error', 'No se encontraron los medios de pago necesarios.', 'warning');
            }
        },

        // CORREGIDO: inicializar pagos con efectivo
        inicializarPagosConEfectivo() {
            // Solo reiniciar pagos si no hay pagos activos o si solo hay efectivo con monto incorrecto
            const pagosActivos = this.pagosActivos();
            
            // Si ya hay pagos activos y son correctos, no hacer nada
            if (pagosActivos.length > 0) {
                // Verificar si el efectivo ya está asignado correctamente
                const efectivo = this.mediosPago.find(m =>
                    String(m.nombre || '').toLowerCase().includes('efectivo')
                );
                if (efectivo) {
                    const pagoEfectivo = this.pago(efectivo.id);
                    const total = this.total();
                    // Si el efectivo ya está asignado y es correcto, no hacer nada
                    if (pagoEfectivo.monto > 0 && Math.abs(pagoEfectivo.monto - total) < 0.01) {
                        return;
                    }
                }
            }

            // Reiniciar todos los pagos a cero
            this.inicializarPagos();
            this.mostrarMediosPagoIndividuales = false;

            // Buscar el medio de pago Efectivo
            const efectivo = this.mediosPago.find(m =>
                String(m.nombre || '').toLowerCase().includes('efectivo')
            );

            // Si hay productos en el carrito y existe el medio Efectivo, asignar el total
            if (this.cart.length > 0 && efectivo) {
                const total = this.total();
                this.pago(efectivo.id).monto = Number(total.toFixed(2));
                console.log('Pago en efectivo asignado: S/' + total.toFixed(2));
            }
        },

        pago(id) {

            if (!this.pagos[id]) {

                this.pagos[id] = {

                    medio_pago_id: id,

                    monto: 0,

                    referencia: '',

                    banco: '',

                    tipo_tarjeta: ''

                };

            }

            return this.pagos[id];

        },

        togglePago(id) {

            const pago =
                this.pago(id);

            if (
                Number(pago.monto || 0) > 0
            ) {

                pago.monto = 0;

                pago.referencia = '';

                pago.banco = '';

                pago.tipo_tarjeta = '';

                return;

            }

            const pendiente =
                this.pendiente();

            pago.monto =
                Number(
                    Math.max(
                        0,
                        pendiente
                    ).toFixed(2)
                );

        },

        normalizarPago(id) {

            const p =
                this.pago(id);

            let monto =
                Number(p.monto || 0);

            if (monto < 0) {
                monto = 0;
            }

            p.monto =
                Number(
                    monto.toFixed(2)
                );

        },

        pagosActivos() {

            return this.mediosPago
                .map(medio => {

                    const p =
                        this.pago(medio.id);

                    return {

                        medio_pago_id:
                            medio.id,

                        id:
                            medio.id,

                        nombre:
                            medio.nombre,

                        monto:
                            Number(
                                p.monto || 0
                            ),

                        referencia:
                            p.referencia || '',

                        banco:
                            p.banco || '',

                        tipo_tarjeta:
                            p.tipo_tarjeta || ''

                    };

                })
                .filter(p =>
                    Number(p.monto || 0) > 0
                );

        },

        totalPagado() {

            return this.pagosActivos()
                .reduce(
                    (total, pago) =>
                        total +
                        Number(
                            pago.monto || 0
                        ),
                    0
                );

        },

        pendiente() {

            return Math.max(
                0,
                this.total() -
                this.totalPagado()
            );

        },

        vuelto() {

            return Math.max(
                0,
                this.totalPagado() -
                this.total()
            );

        },

        iconoMedioPago(medio) {

            const nombre =
                String(
                    medio?.nombre || ''
                ).toLowerCase();

            if (nombre.includes('yape')) {
                return '📱';
            }

            if (nombre.includes('plin')) {
                return '📲';
            }

            if (
                nombre.includes('tarjeta') ||
                nombre.includes('visa') ||
                nombre.includes('master')
            ) {
                return '💳';
            }

            if (
                nombre.includes('transfer')
            ) {
                return '🏦';
            }

            if (
                nombre.includes('efectivo')
            ) {
                return '💵';
            }

            return '💰';

        },

        requiereReferencia(medio) {

            const nombre =
                String(
                    medio?.nombre || ''
                ).toLowerCase();

            return (
                nombre.includes('yape') ||
                nombre.includes('plin') ||
                nombre.includes('tarjeta') ||
                nombre.includes('transfer') ||
                nombre.includes('depósito') ||
                nombre.includes('deposito')
            );

        },

        requiereBanco(medio) {

            const nombre =
                String(
                    medio?.nombre || ''
                ).toLowerCase();

            return (
                nombre.includes('transfer') ||
                nombre.includes('depósito') ||
                nombre.includes('deposito')
            );

        },

        requiereTipoTarjeta(medio) {

            const nombre =
                String(
                    medio?.nombre || ''
                ).toLowerCase();

            return (
                nombre.includes('tarjeta')
            );

        },

        abrirReferenciaPago(id) {

            const medio =
                this.mediosPago.find(
                    m => Number(m.id) === Number(id)
                );

            if (!medio) {
                return;
            }

            const pago =
                this.pago(id);

            this.medioPagoReferenciaId =
                id;

            this.medioPagoReferenciaNombre =
                medio.nombre;

            this.medioPagoReferenciaMonto =
                Number(pago.monto || 0);

            this.referenciaPagoTemporal =
                pago.referencia || '';

            this.mostrarReferenciaPago =
                true;

            this.$nextTick(() => {

                if (this.$refs.referenciaPago) {
                    this.$refs.referenciaPago.focus();
                }

            });

        },

        guardarReferenciaPago() {

            if (
                this.medioPagoReferenciaId === null
            ) {
                return;
            }

            this.pago(
                this.medioPagoReferenciaId
            ).referencia =
                String(
                    this.referenciaPagoTemporal || ''
                ).trim();

            this.cerrarReferenciaPago();

        },

        cerrarReferenciaPago() {

            this.mostrarReferenciaPago =
                false;

            this.medioPagoReferenciaId =
                null;

            this.medioPagoReferenciaNombre =
                '';

            this.medioPagoReferenciaMonto =
                0;

            this.referenciaPagoTemporal =
                '';

        },

        /* =====================================================
           COMPROBANTE
        ====================================================== */

        seleccionarComprobante(tipo) {

            this.tipoComprobante =
                tipo;

        },

        cambioCondicionPago() {

            if (
                this.condicionPago === 'credito'
            ) {

                this.pagosActivos()
                    .forEach(p => {

                        const pago =
                            this.pago(
                                p.medio_pago_id
                            );

                        pago.monto = 0;

                        pago.referencia = '';

                    });

            }

        },

        abrirEditorPrecio(index) {
            const item = this.cart[index];
            if (!item || item.comboId) return;
            this.precioEditandoIndex = index;
            this.precioEditando = Number(item.precio || 0);
            this.motivoPrecioEditando = '';
            this.mostrarEditorPrecio = true;
            this.$nextTick(() => this.$refs.precioEditor?.focus());
        },

        cerrarEditorPrecio() {
            this.mostrarEditorPrecio = false;
            this.precioEditandoIndex = -1;
            this.precioEditando = 0;
            this.motivoPrecioEditando = '';
        },

        guardarPrecioEditado() {
            const index = this.precioEditandoIndex;
            const item = this.cart[index];
            if (!item || item.comboId) {
                this.cerrarEditorPrecio();
                return;
            }
            const precio = Math.max(0, Number(this.precioEditando || 0));
            if (!Number.isFinite(precio)) {
                this.mensaje('Precio inválido', 'Ingresa un precio válido.', 'warning');
                return;
            }
            item.precio = Number(precio.toFixed(2));
            item.precio_modificado = true;
            item.motivo_precio = String(this.motivoPrecioEditando || '').trim();
            this.cerrarEditorPrecio();
            this.$nextTick(() => this.cargarFidelizacion());
        },

        /* =====================================================
           PAYLOAD
        ====================================================== */

        payload() {

            return this.cart.map(item => ({

                producto_id:
                    Number(item.producto_id || item.id),

                idproducto:
                    Number(item.producto_id || item.id),

                cantidad:
                    Number(item.cantidad || 0),

                precio:
                    Number(item.precio || 0),

                precio_modificado:
                    Boolean(item.precio_modificado),

                motivo_precio:
                    item.motivo_precio || null,

                lote_id:
                    item.lote_id || null,

                lote:
                    item.lote || null,

                stock_producto_id:
                    item.lote_id || null,

                presentacion_id:
                    item.presentacion_id || null,

                equivalencia:
                    Number(item.equivalencia || 1),

                fecha_vencimiento:
                    item.fecha_vencimiento || null,

                esCanjePorPuntos:
                    Boolean(item.esCanjePorPuntos),

                puntos_canjeados:
                    Number(
                        item.puntos_canjeados || 0
                    ),

                combo_id:
                    item.combo_id ||
                    item.comboId ||
                    null

            }));

        },

        /* =====================================================
           VALIDAR VENTA
        ====================================================== */

        validarVenta(event) {

            if (this.procesando) {

                event.preventDefault();

                return false;

            }

            if (!this.cart.length) {

                event.preventDefault();

                this.mensaje(
                    'Venta vacía',
                    'Agrega al menos un producto.',
                    'warning'
                );

                return false;

            }

            if (
                !this.usarPuntos &&
                this.condicionPago === 'contado' &&
                this.pendiente() > 0.009
            ) {

                event.preventDefault();

                this.mensaje(
                    'Pago incompleto',
                    'Completa el pago antes de procesar la venta.',
                    'warning'
                );

                return false;

            }

            if (this.usarPuntos && this.total() > 0.009) {
                event.preventDefault();
                this.mensaje('Puntos insuficientes', 'El canje por puntos debe cubrir totalmente el importe. Usa suficientes puntos o cancela el canje.', 'warning');
                return false;
            }

            if (this.usarPuntos && this.pagosActivos().length > 0) {
                this.inicializarPagos();
            }

            for (const pago of this.pagosActivos()) {

                if (
                    this.requiereReferencia(
                        this.mediosPago.find(
                            m =>
                                Number(m.id) ===
                                Number(pago.medio_pago_id)
                        )
                    ) &&
                    !String(
                        pago.referencia || ''
                    ).trim()
                ) {

                    event.preventDefault();

                    this.mensaje(
                        'Falta referencia',
                        'Ingresa la referencia del medio de pago.',
                        'warning'
                    );

                    return false;

                }

            }

            for (const item of this.cart) {

                if (
                    !item.producto_id ||
                    !item.cantidad ||
                    Number(item.cantidad) <= 0
                ) {

                    event.preventDefault();

                    this.mensaje(
                        'Detalle inválido',
                        'Existe un producto con datos incompletos.',
                        'error'
                    );

                    return false;

                }

                if (!item.lote_id) {
                    event.preventDefault();
                    this.mensaje('Lote requerido', `Selecciona el lote de ${item.nombre}.`, 'warning');
                    return false;
                }

                if (
                    Number(item.cantidad) >
                    Number(item.stock || 0)
                ) {

                    event.preventDefault();

                    this.mensaje(
                        'Stock insuficiente',
                        `No hay suficiente stock para ${item.nombre}.`,
                        'warning'
                    );

                    return false;

                }

            }

            this.procesando = true;

            const form = event.target;
            const formData = new FormData(form);

            fetch(form.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                this.procesando = false;

                if (data.success) {
                    const ventaId = data.venta_id;
                    const numeroComprobante = data.numero_comprobante;
                    const clienteNombre = this.clienteSeleccionado?.nombre || 'Cliente Varios';
                    const telefono = this.clienteSeleccionado?.telefono || '';

                    this.mostrarOpcionesPostVenta(ventaId, numeroComprobante, clienteNombre, telefono);

                    this.cart = [];
                    this.alertasPromocionales = [];
                    this._ofertasAlertadas.clear();
                    this._combosAlertados.clear();
                    this.descuento = 0;
                    this.usarPuntos = false;
                    this.puntosUsados = 0;
                    this.quitarCupon();
                    this.inicializarPagosConEfectivo();
                    this.recomendaciones = [];
                    this.recomendacionesCombos = [];
                    this.combosAplicados = [];
                    this.tipoComprobante = 'ticket';
                    this.condicionPago = 'contado';

                    if (this.$refs.search) {
                        this.$refs.search.focus();
                    }
                } else {
                    this.mensaje(
                        'Error',
                        data.message || 'No se pudo procesar la venta.',
                        'error'
                    );
                }
            })
            .catch(error => {
                this.procesando = false;
                this.mensaje(
                    'Error',
                    'Ocurrió un error al procesar la venta.',
                    'error'
                );
            });

            event.preventDefault();
            return false;

        },

        /* =====================================================
           ENVÍO POR WHATSAPP
        ====================================================== */

        mostrarOpcionesPostVenta(ventaId, numeroComprobante, clienteNombre, telefono) {
            if (typeof Swal !== 'undefined') {
                const tieneTelefono = telefono && telefono.trim() !== '';
                
                Swal.fire({
                    title: '✅ ¡Venta completada!',
                    html: `
                        <div class="text-center">
                            <div class="w-16 h-16 rounded-full bg-emerald-100 mx-auto flex items-center justify-center mb-3">
                                <svg class="w-8 h-8 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                            </div>
                            
                            <div class="bg-brand-50 rounded-xl p-3 mb-3">
                                <p class="text-xs text-brand-600 font-semibold uppercase tracking-wider">Comprobante emitido</p>
                                <p class="text-xl font-black text-brand-700">${numeroComprobante}</p>
                            </div>
                            
                            <p class="text-sm text-slate-600">
                                Cliente: <strong class="text-slate-800">${clienteNombre || 'Cliente Varios'}</strong>
                                ${tieneTelefono ? `<br><span class="text-xs text-slate-400">📱 ${telefono}</span>` : '<br><span class="text-xs text-amber-500">⚠️ Sin teléfono registrado</span>'}
                            </p>
                            
                            <div class="border-t border-slate-200 my-4"></div>
                            
                            <div class="flex flex-col gap-3">
                                <button id="btnWhatsApp" class="w-full py-3.5 rounded-xl flex items-center justify-center gap-3 font-bold text-sm transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] shadow-sm" 
                                        style="background:#25D366;color:white;border:none;">
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                                    </svg>
                                    ${tieneTelefono ? '📱 Enviar por WhatsApp' : '📱 Enviar por WhatsApp (ingresar teléfono)'}
                                </button>
                                
                                <button id="btnTicket" class="w-full py-3.5 rounded-xl flex items-center justify-center gap-3 font-bold text-sm bg-blue-600 text-white border-none transition-all duration-200 hover:bg-blue-700 hover:scale-[1.02] active:scale-[0.98] shadow-sm">
                                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                    </svg>
                                    📄 Ver / Imprimir Ticket
                                </button>
                                
                                <button id="btnCerrar" class="w-full py-3.5 rounded-xl flex items-center justify-center gap-3 font-bold text-sm bg-slate-100 text-slate-600 border border-slate-200 transition-all duration-200 hover:bg-slate-200 hover:scale-[1.02] active:scale-[0.98]">
                                    ✕ Cerrar
                                </button>
                            </div>
                        </div>
                    `,
                    showConfirmButton: false,
                    showCancelButton: false,
                    allowOutsideClick: true,
                    width: 420,
                    padding: '0',
                    background: '#ffffff',
                    customClass: {
                        popup: 'rounded-2xl shadow-2xl overflow-hidden',
                        htmlContainer: 'p-6'
                    },
                    didOpen: () => {
                        document.getElementById('btnWhatsApp')?.addEventListener('click', () => {
                            Swal.close();
                            this.mostrarModalWhatsApp(ventaId, numeroComprobante, clienteNombre, telefono || '');
                        });

                        document.getElementById('btnTicket')?.addEventListener('click', () => {
                            Swal.close();
                            window.open('{{ url('/pos/ticket') }}/' + ventaId, '_blank');
                        });

                        document.getElementById('btnCerrar')?.addEventListener('click', () => {
                            Swal.close();
                        });
                    }
                });
            }
        },

        mostrarModalWhatsApp(ventaId, numeroComprobante, clienteNombre, telefono) {
            const modalHtml = `
                <div class="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm" id="whatsappModal">
                    <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full overflow-hidden animate-[fadeIn_0.3s_ease]">
                        <div class="p-5 border-b border-slate-100 flex items-center justify-between" style="background: #25D366;">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
                                    <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                                    </svg>
                                </div>
                                <div>
                                    <h3 class="text-white font-bold text-lg">Enviar por WhatsApp</h3>
                                    <p class="text-white/80 text-xs">El comprobante se enviará en PDF</p>
                                </div>
                            </div>
                            <button type="button" onclick="document.getElementById('whatsappModal')?.remove()" class="w-8 h-8 rounded-full bg-white/20 text-white hover:bg-white/30 flex items-center justify-center">
                                ✕
                            </button>
                        </div>

                        <div class="p-5 space-y-4">
                            <div>
                                <label class="block text-xs font-bold text-slate-600 mb-1.5">
                                    📱 Número del cliente <span class="text-red-500">*</span>
                                </label>
                                <div class="flex items-center border-2 rounded-xl p-2.5 border-slate-200 focus-within:border-emerald-500 transition">
                                    <span class="font-bold text-slate-600 text-sm px-2">🇵🇪 +51</span>
                                    <input type="text" id="whatsappTelefono"
                                           value="${telefono || ''}"
                                           placeholder="999 999 999"
                                           class="flex-1 border-0 outline-none text-sm font-medium bg-transparent"
                                    >
                                </div>
                                <p class="text-xs text-slate-400 mt-1">Ingresa el número sin el código de país</p>
                            </div>

                            <div>
                                <label class="block text-xs font-bold text-slate-600 mb-1.5">
                                    💬 Mensaje personalizado
                                </label>
                                <textarea id="whatsappMensaje" rows="4"
                                          class="w-full rounded-xl border border-slate-200 p-3 text-sm focus:border-emerald-500 focus:outline-none transition resize-none"
                                >Estimado(a) ${clienteNombre || 'Cliente'}, le enviamos su comprobante ${numeroComprobante}.

Gracias por su preferencia. 😊</textarea>
                            </div>

                            <div class="rounded-xl bg-emerald-50 p-3 border border-emerald-200 flex items-start gap-3">
                                <svg class="w-5 h-5 text-emerald-600 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
                                </svg>
                                <div>
                                    <p class="text-xs font-semibold text-emerald-700">📎 El comprobante en PDF se adjuntará automáticamente</p>
                                    <p class="text-xs text-emerald-600/70 mt-0.5">Asegúrate de que el cliente tenga WhatsApp instalado</p>
                                </div>
                            </div>

                            <button id="btnEnviarWhatsApp"
                                    class="w-full rounded-xl py-3.5 text-white font-bold flex items-center justify-center gap-2 transition transform hover:scale-[1.02] active:scale-[0.98]"
                                    style="background: #25D366;"
                                    onclick="enviarWhatsApp(${ventaId}, '${numeroComprobante}')"
                            >
                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                                </svg>
                                Enviar mensaje
                            </button>
                        </div>
                    </div>
                </div>
            `;

            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = modalHtml;
            document.body.appendChild(tempDiv.firstElementChild);

            const style = document.createElement('style');
            style.textContent = `
                @keyframes fadeIn {
                    from { opacity: 0; transform: scale(0.95); }
                    to { opacity: 1; transform: scale(1); }
                }
            `;
            document.head.appendChild(style);

            setTimeout(() => {
                document.getElementById('whatsappTelefono')?.focus();
                document.getElementById('whatsappTelefono')?.select();
            }, 300);

            document.getElementById('whatsappModal')?.addEventListener('click', function(e) {
                if (e.target === this) {
                    this.remove();
                }
            });

            window.enviarWhatsApp = async (id, comprobante) => {
                const telefono = document.getElementById('whatsappTelefono')?.value.trim() || '';
                const mensaje = document.getElementById('whatsappMensaje')?.value || '';

                if (!telefono) {
                    this.mensaje('Teléfono requerido', 'Ingresa el número de teléfono del cliente.', 'warning');
                    return;
                }

                if (this.clienteSeleccionado && this.clienteSeleccionado.id) {
                    const telefonoActual = this.clienteSeleccionado.telefono || '';
                    if (telefono !== telefonoActual) {
                        await this.actualizarTelefonoCliente(this.clienteSeleccionado.id, telefono);
                    }
                }

                const btn = document.getElementById('btnEnviarWhatsApp');
                if (btn) {
                    btn.disabled = true;
                    btn.innerHTML = '<svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Enviando...';
                    btn.style.opacity = '0.7';
                }

                try {
                    const response = await fetch('{{ url('/pos/enviar-comprobante-whatsapp') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            venta_id: id,
                            numero_comprobante: comprobante,
                            telefono: telefono,
                            mensaje: mensaje
                        })
                    });

                    const data = await response.json();

                    document.getElementById('whatsappModal')?.remove();

                    if (data.success) {
                        this.mensaje('✅ Enviado', 'El comprobante fue enviado por WhatsApp al cliente.', 'success');
                    } else {
                        if (data.response && data.response.success) {
                            this.mensaje('✅ Enviado', 'El comprobante fue enviado por WhatsApp al cliente.', 'success');
                        } else {
                            this.mensaje('Error', data.message || 'No se pudo enviar el comprobante.', 'error');
                        }
                    }
                } catch (error) {
                    document.getElementById('whatsappModal')?.remove();
                    this.mensaje('Error', 'Ocurrió un error al enviar el comprobante.', 'error');
                }
            };
        },

        /* =====================================================
           FIDELIZACIÓN
        ====================================================== */

        agregarAlertaPromocional(tipo, id, titulo, texto, referencia = '') {
            const key = `${tipo}-${Number(id || 0)}-${String(referencia || '')}`;
            const existe = this.alertasPromocionales.some(a => a.key === key);
            if (existe) return;
            this.alertasPromocionales.push({ key, tipo, id: Number(id || 0), referencia: String(referencia || ''), titulo, texto });
        },

        quitarAlertaPromocional(key) {
            this.alertasPromocionales = this.alertasPromocionales.filter(a => a.key !== key);
        },

        sincronizarAlertasPromocionales() {
            const cart = Array.isArray(this.cart) ? this.cart : [];
            this.alertasPromocionales = this.alertasPromocionales.filter(alerta => {
                if (alerta.tipo === 'oferta') {
                    return cart.some(item => {
                        const oferta = (this.ofertasIniciales || []).find(o => Number(o.id) === Number(alerta.id))
                            || (this.ofertasCarrusel || []).find(o => Number(o.id) === Number(alerta.id));
                        const condiciones = Array.isArray(oferta?.condiciones) ? oferta.condiciones : [];
                        return condiciones.some(c => {
                            const tipo = String(c?.tipo || '').toLowerCase();
                            return (tipo === 'producto' && Number(c?.producto_id) === Number(item.producto_id))
                                || (tipo === 'categoria' && Number(c?.categoria_id) === Number(item.categoria_id));
                        });
                    });
                }
                if (alerta.tipo === 'combo') {
                    return cart.some(item => {
                        const combo = (this.combosIniciales || []).find(c => Number(c.id) === Number(alerta.id))
                            || (this.combosCarrusel || []).find(c => Number(c.id) === Number(alerta.id));
                        const detalles = Array.isArray(combo?.detalles) ? combo.detalles : (Array.isArray(combo?.productos) ? combo.productos : []);
                        return detalles.some(d => Number(d?.producto_id || d?.id) === Number(item.producto_id));
                    });
                }
                return true;
            });
        },

        textoOferta(oferta) {
            const tipo = String(oferta?.tipo || '').toLowerCase();
            const valor = Number(oferta?.valor || 0);
            const condiciones = Array.isArray(oferta?.condiciones) ? oferta.condiciones : [];
            const productoAlerta = oferta?._productoAlerta || null;
            const destinos = [];

            condiciones.forEach(cond => {
                const cTipo = String(cond?.tipo || '').toLowerCase();
                if (cTipo === 'producto') {
                    const id = Number(cond?.producto_id || 0);
                    const p = productoAlerta && Number(productoAlerta.id) === id
                        ? productoAlerta
                        : (this.productos || []).find(x => Number(x.id) === id);
                    if (p?.nombre) destinos.push(p.nombre);
                } else if (cTipo === 'categoria') {
                    const id = Number(cond?.categoria_id || 0);
                    const p = productoAlerta && Number(productoAlerta.categoria_id) === id
                        ? productoAlerta
                        : (this.productos || []).find(x => Number(x.categoria_id) === id);
                    const nombreCategoria = p?.categoria || p?.categoria_nombre;
                    if (nombreCategoria) destinos.push(nombreCategoria);
                }
            });

            const objetivos = Array.isArray(oferta?.objetivos) ? oferta.objetivos : [];
            destinos.push(...objetivos.filter(Boolean));
            const destino = [...new Set(destinos.map(x => String(x).trim()).filter(Boolean))].join(', ') || 'LA COMPRA';
            const valorTexto = tipo === 'porcentaje'
                ? `${valor.toFixed(0)}%`
                : `S/${valor.toFixed(2)}`;
            return `DESCUENTO DE ${valorTexto} EN ${destino.toUpperCase()}`;
        },

        notificarFidelizacion(titulo, texto, icon = 'info') {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon,
                    title: titulo,
                    text: texto,
                    showConfirmButton: false,
                    timer: 4500,
                    timerProgressBar: true,
                });
            }
        },

        fusionarPromociones(base, contexto) {
            const mapa = new Map();
            (Array.isArray(base) ? base : []).forEach(item => {
                if (item && Number(item.id)) mapa.set(Number(item.id), item);
            });
            (Array.isArray(contexto) ? contexto : []).forEach(item => {
                if (!item || !Number(item.id)) return;
                const anterior = mapa.get(Number(item.id)) || {};
                mapa.set(Number(item.id), { ...anterior, ...item });
            });
            return Array.from(mapa.values()).sort((a, b) => {
                const pa = Number(a?.prioridad || 0);
                const pb = Number(b?.prioridad || 0);
                return pb - pa || Number(b?.id || 0) - Number(a?.id || 0);
            });
        },

        async cargarFidelizacion() {

            if (this.cargandoFidelizacion) return;
            this.cargandoFidelizacion = true;

            try {
                const url = '{{ url('/fidelizacion/pos/consultar') }}';
                const response = await fetch(url, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        cliente_id: this.clienteId || 1,
                        local_id: this.contextoCaja?.local_id || null,
                        almacen_id: this.contextoCaja?.almacen_id || null,
                        subtotal: Number(this.subtotal().toFixed(2)),
                        productos: this.payload().map(i => ({
                            producto_id: i.producto_id,
                            cantidad: i.cantidad,
                            precio: i.precio
                        })),
                        codigo: this.cuponInput || null
                    })
                });

                if (!response.ok) throw new Error('No se pudo consultar fidelización.');
                const data = await response.json();
                const f = data.fidelizacion || data;
                const ofertasRespuesta = Array.isArray(f.ofertas) ? f.ofertas : [];
                const combosRespuesta = Array.isArray(f.combos) ? f.combos : [];

                this.ofertasCarrusel = this.fusionarPromociones(this.ofertasIniciales, ofertasRespuesta);
                this.combosCarrusel = this.fusionarPromociones(this.combosIniciales, combosRespuesta);

                ofertasRespuesta.forEach(o => {
                    const id = Number(o.id);
                    if (id && !this._ofertasAlertadas.has(id)) {
                        this._ofertasAlertadas.add(id);
                        const textoOfertaContextual = this.textoOferta(o);
                        this.notificarFidelizacion('¡Oferta disponible!', textoOfertaContextual, 'success');
                        this.agregarAlertaPromocional('oferta', id, '¡Oferta disponible!', textoOfertaContextual);
                    }
                });

                const candidatas = ofertasRespuesta
                    .filter(o => Number(o.descuento || 0) > 0)
                    .filter(o => {
                        const condiciones = Array.isArray(o.condiciones) ? o.condiciones : [];
                        const dirigidas = condiciones.filter(c => ['producto', 'categoria'].includes(String(c?.tipo || '').toLowerCase()));
                        if (!dirigidas.length) return true;
                        return dirigidas.some(c => this.cart.some(item =>
                            (String(c.tipo).toLowerCase() === 'producto' && Number(c.producto_id) === Number(item.producto_id)) ||
                            (String(c.tipo).toLowerCase() === 'categoria' && Number(c.categoria_id) === Number(item.categoria_id))
                        ));
                    });
                const noAcumulable = candidatas.find(o => !Boolean(o.acumulable));
                this.ofertasAplicadas = noAcumulable ? [noAcumulable] : candidatas;
                this.descuentoOfertas = Math.min(
                    this.subtotal(),
                    this.ofertasAplicadas.reduce((sum, o) => sum + Number(o.descuento || 0), 0)
                );
                this.sincronizarAlertasPromocionales();
            } catch (error) {
                console.warn('No se pudo cargar fidelización:', error);
                this.ofertasCarrusel = this.ofertasCarrusel.length ? this.ofertasCarrusel : this.ofertasIniciales;
                this.combosCarrusel = this.combosCarrusel.length ? this.combosCarrusel : this.combosIniciales;
                this.ofertasAplicadas = [];
                this.descuentoOfertas = 0;
                this.sincronizarAlertasPromocionales();
            } finally {
                this.cargandoFidelizacion = false;
            }

        },

        /* =====================================================
           RECOMENDACIONES
        ====================================================== */

        actualizarRecomendaciones(producto) {
            if (!producto) {
                this.recomendaciones = [];
                this.recomendacionesCombos = [];
                return;
            }

            const principio = String(producto.principio_activo_normalizado || producto.principio_activo || '')
                .trim().toLowerCase().replace(/\s+/g, ' ');

            this.recomendaciones = principio
                ? this.productos.filter(p =>
                    Number(p.id) !== Number(producto.id) &&
                    Number(p.stock || 0) > 0 &&
                    String(p.principio_activo_normalizado || p.principio_activo || '')
                        .trim().toLowerCase().replace(/\s+/g, ' ') === principio
                ).slice(0, 6)
                : [];

            const combos = this.combosPorProducto || {};
            this.recomendacionesCombos = Array.isArray(combos[producto.id]) ? combos[producto.id] : [];
        },

        /* =====================================================
           NUEVO CLIENTE
        ====================================================== */

        abrirNuevoCliente() {

            this.mostrarResultadosClientes =
                false;

            this.mostrarNuevoCliente =
                true;

            this.$nextTick(() => {

                const input =
                    document.querySelector(
                        '[x-model="nuevoCliente.numero_documento"]'
                    );

                if (input) {
                    input.focus();
                }

            });

        },

        cerrarNuevoCliente() {

            this.mostrarNuevoCliente =
                false;

        },

        async consultarDocumento() {

            const numero =
                String(
                    this.nuevoCliente.numero_documento || ''
                ).trim();

            if (!numero) {
                return;
            }

            this.consultandoDocumento =
                true;

            try {

                const response =
                    await fetch(
                        '{{ url('/clientes/consultar-documento') }}',
                        {

                            method: 'POST',

                            headers: {

                                'Content-Type':
                                    'application/json',

                                'Accept':
                                    'application/json',

                                'X-CSRF-TOKEN':
                                    document.querySelector(
                                        'meta[name="csrf-token"]'
                                    )?.getAttribute(
                                        'content'
                                    ) ||
                                    '{{ csrf_token() }}'

                            },

                            body: JSON.stringify({

                                tipo_documento:
                                    this.nuevoCliente.tipo_documento,

                                numero_documento:
                                    numero

                            })

                        }
                    );

                const data =
                    await response.json();

                if (!response.ok) {

                    throw new Error(
                        data.message ||
                        'No se pudo consultar el documento.'
                    );

                }

                const persona =
                    data.data ||
                    data.cliente ||
                    data;

                if (persona) {

                    this.nuevoCliente.nombre =
                        persona.nombre ||
                        persona.razon_social ||
                        persona.nombre_completo ||
                        this.nuevoCliente.nombre;

                    this.nuevoCliente.apellido_paterno =
                        persona.apellido_paterno ||
                        this.nuevoCliente.apellido_paterno;

                    this.nuevoCliente.apellido_materno =
                        persona.apellido_materno ||
                        this.nuevoCliente.apellido_materno;

                    this.nuevoCliente.direccion =
                        persona.direccion ||
                        this.nuevoCliente.direccion;

                }

            } catch (error) {

                this.mensaje(
                    'Consulta',
                    error.message ||
                    'No se pudo consultar el documento.',
                    'warning'
                );

            } finally {

                this.consultandoDocumento =
                    false;

            }

        },

        async guardarNuevoCliente() {

            if (
                !this.nuevoCliente.nombre &&
                !this.nuevoCliente.razon_social
            ) {

                this.mensaje(
                    'Datos incompletos',
                    'Ingresa el nombre o razón social del cliente.',
                    'warning'
                );

                return;

            }

            this.guardandoCliente =
                true;

            try {

                const response =
                    await fetch(
                        '{{ url('/clientes') }}',
                        {

                            method: 'POST',

                            headers: {

                                'Content-Type':
                                    'application/json',

                                'Accept':
                                    'application/json',

                                'X-CSRF-TOKEN':
                                    document.querySelector(
                                        'meta[name="csrf-token"]'
                                    )?.getAttribute(
                                        'content'
                                    ) ||
                                    '{{ csrf_token() }}'

                            },

                            body: JSON.stringify(
                                this.nuevoCliente
                            )

                        }
                    );

                const data =
                    await response.json();

                if (!response.ok) {

                    throw new Error(
                        data.message ||
                        'No se pudo registrar el cliente.'
                    );

                }

                const cliente =
                    data.cliente ||
                    data.data ||
                    data;

                if (cliente?.id) {

                    this.clientes.unshift(
                        cliente
                    );

                    this.seleccionarCliente(
                        cliente
                    );

                }

                this.mostrarNuevoCliente =
                    false;

                this.nuevoCliente = {

                    tipo_documento: 'DNI',

                    numero_documento: '',

                    nombre: '',

                    apellido_paterno: '',

                    apellido_materno: '',

                    telefono: '',

                    email: '',

                    direccion: ''

                };

                this.mensaje(
                    'Cliente registrado',
                    'El cliente fue registrado correctamente.',
                    'success'
                );

            } catch (error) {

                this.mensaje(
                    'Error',
                    error.message ||
                    'No se pudo registrar el cliente.',
                    'error'
                );

            } finally {

                this.guardandoCliente =
                    false;

            }

        },

        /* =====================================================
           FECHAS / LOTES
        ====================================================== */

        formatearFecha(fecha) {

            if (!fecha) {
                return 'Sin vencimiento';
            }

            const date =
                new Date(fecha);

            if (
                Number.isNaN(
                    date.getTime()
                )
            ) {
                return fecha;
            }

            return date.toLocaleDateString(
                'es-PE',
                {
                    day: '2-digit',
                    month: '2-digit',
                    year: 'numeric'
                }
            );

        },

        loteVencido(lote) {

            if (
                !lote ||
                !lote.fecha_vencimiento
            ) {
                return false;
            }

            const fecha =
                new Date(
                    lote.fecha_vencimiento
                );

            const hoy =
                new Date();

            hoy.setHours(
                0, 0, 0, 0
            );

            return fecha < hoy;

        },

        loteVencimientoCercano(lote) {

            if (
                !lote ||
                !lote.fecha_vencimiento
            ) {
                return false;
            }

            const fecha =
                new Date(
                    lote.fecha_vencimiento
                );

            const hoy =
                new Date();

            hoy.setHours(
                0, 0, 0, 0
            );

            const diferencia =
                (
                    fecha.getTime() -
                    hoy.getTime()
                ) /
                (
                    1000 *
                    60 *
                    60 *
                    24
                );

            return (
                diferencia >= 0 &&
                diferencia <= 30
            );

        },

        obtenerLoteFEFO(producto) {

            if (!producto) {
                return null;
            }

            const lotes =
                Array.isArray(producto.lotes)
                    ? producto.lotes
                    : [];

            return lotes
                .filter(l =>
                    Number(l.stock || 0) > 0 &&
                    !this.loteVencido(l)
                )
                .sort((a, b) => {

                    const fechaA =
                        a.fecha_vencimiento
                            ? new Date(
                                a.fecha_vencimiento
                            ).getTime()
                            : Number.MAX_SAFE_INTEGER;

                    const fechaB =
                        b.fecha_vencimiento
                            ? new Date(
                                b.fecha_vencimiento
                            ).getTime()
                            : Number.MAX_SAFE_INTEGER;

                    return fechaA - fechaB;

                })[0] || null;

        },

        /* =====================================================
           TECLADO - CORREGIDO
           F2: Buscar producto
           F3: Cambiar unidad de medida del producto activo
           F4: Buscar cliente
        ====================================================== */

        configurarTeclado() {

            if (this._tecladoHandler) {
                window.removeEventListener('keydown', this._tecladoHandler, true);
            }

            this._tecladoHandler = (event) => {

                    // Si SweetAlert está abierto, dejar que ENTER active Aceptar.
                    if (event.key === 'Enter' && document.querySelector('.swal2-container')) {
                        return;
                    }

                    if (event.key === 'Escape') {
                        if (this.mostrarSelectorLote) {
                            event.preventDefault();
                            event.stopPropagation();
                            this.cerrarSelectorTeclado();
                            return;
                        }
                        if (this.mostrarSelectorOferta) {
                            event.preventDefault();
                            this.cerrarSelectorOferta();
                            return;
                        }
                    }

                    // F2: Buscar producto
                    if (event.key === 'F2') {
                        event.preventDefault();

                        if (this.mostrarSelectorLote) {
                            return;
                        }

                        this.$nextTick(() => {
                            if (this.$refs.search) {
                                this.$refs.search.focus();
                                this.$refs.search.select();
                            }
                        });
                    }

                    // F3: Cambiar unidad del producto actualmente seleccionado.
                    // Usa productoActivoIndex como fuente de verdad para que funcione
                    // después de navegar con ↑ / ↓ / TAB, aunque el foco siga en el buscador.
                    if (event.key === 'F3' || event.code === 'F3') {
                        event.preventDefault();
                        event.stopPropagation();
                        if (event.stopImmediatePropagation) event.stopImmediatePropagation();

                        const lista = this.productosVisibles();

                        if (!lista.length) {
                            this.mensaje('Información', 'No hay productos disponibles para cambiar la unidad.', 'info');
                            return;
                        }

                        let index = Number(this.productoActivoIndex);
                        if (!Number.isInteger(index) || index < 0 || index >= lista.length) {
                            index = 0;
                        }

                        const producto = lista[index];
                        if (!producto) return;

                        this.productoActivoIndex = index;
                        this.productoActivo = producto;
                        this.cambiarUnidadMedida(producto);
                        return;
                    }

                    // F4: Buscar cliente
                    if (event.key === 'F4') {
                        event.preventDefault();

                        this.$nextTick(() => {
                            if (this.$refs.buscadorCliente) {
                                this.$refs.buscadorCliente.focus();
                                this.mostrarResultadosClientes = true;
                            }
                        });
                    }

                    if (event.key === 'F6') {

                        event.preventDefault();

                        const input =
                            document.querySelector(
                                'input[x-model\\.number="descuento"]'
                            );

                        if (input) {

                            input.focus();

                            input.select();

                        }

                    }

                    if (event.key === 'F10') {

                        event.preventDefault();

                        if (
                            this.cart.length > 0 &&
                            !this.procesando
                        ) {

                            const form =
                                document.querySelector(
                                    'form[action="{{ url('/pos') }}"]'
                                );

                            if (form) {
                                form.requestSubmit();
                            }

                        }

                    }

                    if (this.mostrarSelectorOferta) {
                        if (event.key === 'Escape') {
                            event.preventDefault();
                            this.cerrarSelectorOferta();
                            return;
                        }

                        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
                            event.preventDefault();
                            const total = this.ofertasDisponiblesPendientes.length;
                            if (!total) {
                                return;
                            }

                            const delta = event.key === 'ArrowDown' ? 1 : -1;
                            this.ofertaActivaPendienteIndex =
                                (this.ofertaActivaPendienteIndex + delta + total) % total;

                            this.$nextTick(() => {
                                document.querySelector(
                                    '[data-oferta-opcion-index="' +
                                    this.ofertaActivaPendienteIndex +
                                    '"]'
                                )?.focus();
                            });
                            return;
                        }

                        if (event.key === 'Enter') {
                            event.preventDefault();
                            if (this.ofertasDisponiblesPendientes.length > 0) {
                                const ofertaActiva = this.ofertaPendienteActiva();
                                if (ofertaActiva?.aplicable === false) {
                                    this.agregarPendienteSinOferta();
                                } else {
                                    this.agregarPendienteConOferta();
                                }
                            } else {
                                this.agregarPendienteSinOferta();
                            }
                            return;
                        }
                    }

                    if (
                        event.key === 'Enter' &&
                        this.mostrarSelectorLote
                    ) {

                        event.preventDefault();

                        const presentacion = this.ofertaPresentacionPendiente || this.obtenerPresentacionActiva(this.productoLote);
                        const equivalencia = Number(presentacion?.equivalencia || 1);
                        const lotes = this.lotesDisponiblesConStockSuficiente(equivalencia);

                        if (
                            this.loteActivoIndex >= 0 &&
                            lotes.length &&
                            lotes[this.loteActivoIndex]
                        ) {

                            this.seleccionarLote(
                                lotes[
                                    this.loteActivoIndex
                                ]
                            );
                            return;

                        }

                        return;

                    }

                    if (
                        event.key === 'Tab' &&
                        this.mostrarSelectorLote
                    ) {
                        event.preventDefault();
                        const presentacion = this.ofertaPresentacionPendiente || this.obtenerPresentacionActiva(this.productoLote);
                        const equivalencia = Number(presentacion?.equivalencia || 1);
                        const total = this.lotesDisponiblesConStockSuficiente(equivalencia).length;
                        if (!total) return;
                        this.loteActivoIndex = event.shiftKey
                            ? (this.loteActivoIndex <= 0 ? total - 1 : this.loteActivoIndex - 1)
                            : (this.loteActivoIndex < 0 || this.loteActivoIndex >= total - 1 ? 0 : this.loteActivoIndex + 1);
                        this.loteActivo = this.lotesDisponiblesConStockSuficiente(equivalencia)[this.loteActivoIndex];
                        return;
                    }

                    if (
                        event.key === 'ArrowDown' &&
                        this.mostrarSelectorLote
                    ) {

                        event.preventDefault();

                        const presentacion = this.ofertaPresentacionPendiente || this.obtenerPresentacionActiva(this.productoLote);
                        const equivalencia = Number(presentacion?.equivalencia || 1);
                        const total = this.lotesDisponiblesConStockSuficiente(equivalencia).length;

                        if (!total) {
                            return;
                        }

                        this.loteActivoIndex =
                            this.loteActivoIndex < 0
                                ? 0
                                : Math.min(total - 1, this.loteActivoIndex + 1);

                        this.loteActivo =
                            this.lotesDisponiblesConStockSuficiente(equivalencia)[
                                this.loteActivoIndex
                            ];

                    }

                    if (
                        event.key === 'ArrowUp' &&
                        this.mostrarSelectorLote
                    ) {

                        event.preventDefault();

                        const presentacion = this.ofertaPresentacionPendiente || this.obtenerPresentacionActiva(this.productoLote);
                        const equivalencia = Number(presentacion?.equivalencia || 1);
                        const total = this.lotesDisponiblesConStockSuficiente(equivalencia).length;

                        if (!total) {
                            return;
                        }

                        this.loteActivoIndex =
                            this.loteActivoIndex < 0
                                ? total - 1
                                : Math.max(0, this.loteActivoIndex - 1);

                        this.loteActivo =
                            this.lotesDisponiblesConStockSuficiente(equivalencia)[
                                this.loteActivoIndex
                            ];

                    }

            };

            // Capture evita que inputs/directivas de Alpine consuman F3 antes.
            window.addEventListener('keydown', this._tecladoHandler, true);

        },

        /* =====================================================
           CANCELAR
        ====================================================== */

        cancelarVenta() {

            if (!this.cart.length) {
                return;
            }

            if (
                !confirm(
                    '¿Deseas cancelar la venta actual?'
                )
            ) {
                return;
            }

            this.cart = [];
            this.alertasPromocionales = [];
            this._ofertasAlertadas.clear();
            this._combosAlertados.clear();

            this.descuento = 0;

            this.usarPuntos = false;

            this.puntosUsados = 0;

            this.quitarCupon();

            this.inicializarPagosConEfectivo();

            this.recomendaciones = [];
            this.recomendacionesCombos = [];

            this.combosAplicados = [];

            this.tipoComprobante = 'ticket';

            this.condicionPago = 'contado';

            this.procesando = false;
            this.mostrarMediosPagoIndividuales = false;

            this.$nextTick(() => {

                if (this.$refs.search) {
                    this.$refs.search.focus();
                }

            });

        },

        /* =====================================================
           MENÚ LATERAL POS
        ====================================================== */

        alternarMenuLateral() {
            if (document.fullscreenElement) {
                return;
            }

            this.menuLateralOculto = !this.menuLateralOculto;
            document.body.classList.toggle('pos-menu-hidden', this.menuLateralOculto);
        },

        sincronizarMenuFullscreen() {
            const enFullscreen = !!document.fullscreenElement;
            this.menuLateralOculto = enFullscreen;
            document.body.classList.toggle('pos-menu-hidden', enFullscreen);
        },

        cerrarSelectorTeclado() {
            let cerroAlgo = false;

            if (this.mostrarSelectorLote) {
                this.mostrarSelectorLote = false;
                this.productoLote = null;
                this.loteActivo = null;
                this.loteActivoIndex = -1;
                cerroAlgo = true;
            }

            if (this.mostrarSelectorOferta) {
                this.mostrarSelectorOferta = false;
                this.ofertaProductoPendiente = null;
                this.ofertaLotePendiente = null;
                this.ofertaPresentacionPendiente = null;
                this.ofertaCantidadPendiente = 1;
                this.ofertasDisponiblesPendientes = [];
                this.ofertaActivaPendienteIndex = 0;
                this.cargandoOfertaPendiente = false;
                cerroAlgo = true;
            }

            if (cerroAlgo) {
                this.$nextTick(() => {
                    if (this.$refs.search) {
                        this.$refs.search.focus();
                        this.$refs.search.select();
                    }
                });
            }

            return cerroAlgo;
        },

        /* =====================================================
           FULLSCREEN
        ====================================================== */

        fullscreen() {

            const elemento = document.documentElement;

            if (!document.fullscreenElement) {
                if (elemento.requestFullscreen) {
                    const resultado = elemento.requestFullscreen();
                    if (resultado && typeof resultado.catch === 'function') {
                        resultado.catch(() => {
                            this.mensaje('Pantalla completa', 'El navegador no permitió activar la pantalla completa.', 'warning');
                        });
                    }
                }
            } else if (document.exitFullscreen) {
                const resultado = document.exitFullscreen();
                if (resultado && typeof resultado.catch === 'function') {
                    resultado.catch(() => {});
                }
            }

        },

        /* =====================================================
           MENSAJES
        ====================================================== */

        mensaje(
            titulo,
            texto,
            tipo = 'info'
        ) {

            if (
                typeof Swal !== 'undefined'
            ) {

                return Swal.fire({
                    icon: tipo === 'error'
                        ? 'error'
                        : tipo === 'warning'
                            ? 'warning'
                            : tipo === 'success'
                                ? 'success'
                                : 'info',
                    title: titulo,
                    text: texto,
                    confirmButtonText: 'Aceptar',
                    focusConfirm: true,
                    allowEnterKey: true
                });

            }

            alert(
                titulo +
                '\n\n' +
                texto
            );

        }

    };

}

</script>

@endpush