@extends('dashboard.body.main')

@section('specificpagestyles')
<style>
    /* Menú lateral colapsable / ocultable */
    .iq-sidebar {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 1000 !important;
        transition: left 0.3s ease-in-out !important;
    }
    body.sidebar-main .iq-sidebar {
        left: -80px !important;
    }
    body:not(.sidebar-main) .iq-sidebar {
        left: 0 !important;
    }

    html, body {
        height: 100vh !important;
        overflow: hidden !important;
        background-color: #FFF9FB !important;
    }
    .content-page {
        padding: 85px 12px 12px 12px !important;
        background-color: #FFF9FB !important;
        height: 100vh !important;
        overflow: hidden !important;
        transition: margin-left 0.3s ease-in-out !important;
    }
    body.sidebar-main .content-page {
        margin-left: 0px !important;
    }
    body:not(.sidebar-main) .content-page {
        margin-left: 80px !important;
    }
    body.sidebar-main .iq-top-navbar {
        width: 100% !important;
        left: 0 !important;
    }
    body:not(.sidebar-main) .iq-top-navbar {
        width: calc(100% - 80px) !important;
        left: 80px !important;
    }

    :root {
        --mh-pink: #FF2B66;
        --mh-pink-hover: #E02456;
        --mh-pink-light: #FFF0F5;
        --mh-bg: #FFF9FB;
        --mh-card: #FFFFFF;
        --mh-border: #FFE5EC;
        --mh-text-dark: #0F172A;
        --mh-text-muted: #64748B;
        --radius-lg: 18px;
        --radius-xl: 24px;
    }

    /* Top Navigation Bar Blanca Fina */
    .mh-top-bar {
        background: #FFFFFF;
        border-radius: var(--radius-lg);
        padding: 8px 16px;
        border: 1px solid var(--mh-border);
        box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    }
    .mh-top-link {
        font-size: 13px;
        font-weight: 600;
        color: var(--mh-text-muted);
        padding: 6px 14px;
        border-radius: 20px;
        text-decoration: none !important;
        transition: all 0.15s ease;
    }
    .mh-top-link.active, .mh-top-link:hover {
        background: var(--mh-pink-light);
        color: var(--mh-pink);
    }

    /* Category Pills */
    .cat-pill-mh {
        background: #FFFFFF;
        border: 1px solid var(--mh-border);
        color: #475569;
        font-weight: 600;
        font-size: 12px;
        padding: 6px 16px;
        border-radius: 20px;
        cursor: pointer;
        transition: all 0.15s ease;
        white-space: nowrap;
        user-select: none;
    }
    .cat-pill-mh.active, .cat-pill-mh:hover {
        background-color: var(--mh-pink) !important;
        color: #FFFFFF !important;
        border-color: var(--mh-pink) !important;
    }

    /* Botones de Acción del Ticket */
    .action-btn-mh {
        background: #FFFFFF;
        border: 1px solid var(--mh-border);
        border-radius: 12px;
        padding: 8px 4px;
        text-align: center;
        font-size: 11px;
        font-weight: 600;
        color: var(--mh-text-dark);
        cursor: pointer;
        transition: all 0.15s ease;
    }
    .action-btn-mh:hover {
        background: var(--mh-pink-light);
        border-color: var(--mh-pink);
        color: var(--mh-pink);
    }

    /* Botón Cobrar Magenta */
    .btn-cobrar-mh {
        background-color: var(--mh-pink) !important;
        color: #FFFFFF !important;
        border: none !important;
        border-radius: 14px !important;
        padding: 12px 16px !important;
        box-shadow: 0 4px 14px rgba(255, 43, 102, 0.3) !important;
        transition: all 0.2s ease !important;
    }
    .btn-cobrar-mh:hover {
        background-color: var(--mh-pink-hover) !important;
        box-shadow: 0 6px 18px rgba(255, 43, 102, 0.4) !important;
    }

    /* Botón Agregar del Catálogo */
    .btn-add-mh {
        background: #FFFFFF;
        border: 1px solid var(--mh-pink);
        color: var(--mh-pink);
        font-size: 12px;
        font-weight: 700;
        border-radius: 8px;
        padding: 4px 10px;
        transition: all 0.15s ease;
    }
    .btn-add-mh:hover {
        background: var(--mh-pink) !important;
        color: #FFFFFF !important;
    }


    /* Layout de pantalla única sin scroll global - máximo aprovechamiento */
    /* Layout principal del POS - flex sin wrap */
    .pos-row-layout {
        display: flex !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        height: calc(100vh - 95px) !important;
        overflow: hidden !important;
        margin-bottom: 0 !important;
        gap: 10px !important;
    }
    .ticket-card-layout {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: var(--radius-lg) !important;
        border: 1px solid var(--mh-border) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
    }
    .ticket-card-layout .card-body {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        justify-content: space-between !important;
        padding: 10px 12px !important;
    }
    .ticket-items-scroll {
        flex: 1 !important;
        overflow-y: auto !important;
        min-height: 150px !important;
        max-height: none !important;
        margin-bottom: 4px !important;
        padding-right: 4px;
    }
    .catalog-card-layout {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        margin-bottom: 0px !important;
        border-radius: var(--radius-lg) !important;
        border: 1px solid var(--mh-border) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
    }
    .catalog-card-layout .card-body {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        padding: 14px !important;
    }
    .catalog-table-scroll {
        flex: 1 !important;
        overflow-y: auto !important;
        min-height: 0 !important;
        padding-right: 4px;
    }

    /* Tarjetas de Producto E-commerce */
    .product-card {
        border-radius: var(--radius-lg);
        box-shadow: 0 2px 5px rgba(0,0,0,0.01);
    }
    .product-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.04);
        border-color: var(--mh-pink) !important;
    }
    .cart-item-card {
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .cart-item-card:hover {
        transform: translateX(2px);
    }

    /* KPIs Inferiores - pegados al fondo */
    .pos-kpi-row {
        height: 58px !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
        margin-top: 6px !important;
    }



    /* Modal IA estilos */
    #aiAnalysisModal .modal-content {
        border-radius: 20px !important;
        border: none !important;
        overflow: hidden !important;
        box-shadow: 0 25px 60px rgba(255,43,102,0.15) !important;
    }
    #aiAnalysisModal .modal-header {
        background: linear-gradient(135deg, #FF2B66 0%, #FF6B9D 100%) !important;
        border-bottom: none !important;
        padding: 20px 24px !important;
    }
    #aiAnalysisModal .modal-body {
        background: #FFF9FB !important;
    }
    .ai-insight-card {
        background: #FFFFFF;
        border: 1px solid #FFE4EC;
        border-radius: 14px;
        padding: 14px 16px;
        margin-bottom: 10px;
        transition: all 0.2s ease;
    }
    .ai-insight-card:hover {
        border-color: #FF2B66;
        box-shadow: 0 4px 12px rgba(255,43,102,0.08);
    }
    .ai-insight-icon {
        width: 36px; height: 36px;
        border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        font-size: 16px;
        flex-shrink: 0;
        margin-right: 12px;
    }
</style>
@endsection

@section('container')
@if(!$activeShift)
<div class="position-fixed w-100 h-100 d-flex align-items-center justify-content-center" style="top: 0; left: 0; background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(12px); z-index: 99999;">
    <div class="card border-0 text-center" style="width: 420px; border-radius: 24px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); background: #ffffff; padding: 32px 28px;">
        <!-- Inline SVG Icon (Garantiza carga perfecta) -->
        <div class="mb-4 d-flex align-items-center justify-content-center" style="width: 64px; height: 64px; background: #FFF1F5; border-radius: 20px; margin: 0 auto; color: #FF2B66;">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
            </svg>
        </div>
        
        <h3 style="font-size: 24px; font-weight: 800; color: #0F172A; letter-spacing: -0.5px; margin-bottom: 8px;">Apertura de Caja</h3>
        <p style="font-size: 14px; color: #64748B; line-height: 1.5; margin-bottom: 28px; padding: 0 10px;">
            Para comenzar a vender, por favor ingresa el monto en efectivo inicial (sencillo) disponible en caja.
        </p>
        
        <form action="{{ route('pos.openShift') }}" method="POST">
            @csrf
            <div class="form-group mb-4 text-left" style="text-align: left;">
                <label style="font-size: 11px; font-weight: 700; text-transform: uppercase; color: #94A3B8; letter-spacing: 0.5px; display: block; margin-bottom: 8px;">Efectivo Inicial en Caja</label>
                <div class="input-group" style="position: relative; display: flex; align-items: stretch; width: 100%;">
                    <div class="input-group-prepend" style="display: flex; margin-right: -1px;">
                        <span class="input-group-text bg-white border-right-0" style="border-radius: 12px 0 0 12px; font-weight: 800; font-size: 20px; color: #64748B; border-color: #CBD5E1; padding: 0 16px;">$</span>
                    </div>
                    <input type="number" name="opening_balance" class="form-control border-left-0 font-weight-bold" placeholder="50000" required min="0" style="border-radius: 0 12px 12px 0; height: 52px; font-size: 20px; color: #FF2B66; border-color: #CBD5E1; box-shadow: none; font-weight: 700;">
                </div>
            </div>
            <button type="submit" class="btn btn-block" style="border-radius: 14px; background: #FF2B66; color: #FFFFFF; font-size: 15px; font-weight: 700; height: 50px; border: none; display: flex; align-items: center; justify-content: center; width: 100%; transition: all 0.2s ease; cursor: pointer; box-shadow: 0 4px 12px rgba(255, 43, 102, 0.2);">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 8px;">
                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                    <path d="M7 11V7a5 5 0 0 1 9.9-1"></path>
                </svg>
                Abrir Caja y Vender
            </button>
        </form>
    </div>
</div>
@endif

@php
    $cartQuantities = [];
    foreach ($productItem as $cItem) {
        $cartQuantities[$cItem->id] = ($cartQuantities[$cItem->id] ?? 0) + (int)$cItem->qty;
    }
    $frequentProduct = $products->first();
@endphp
<div class="container-fluid px-2">




    <div class="pos-row-layout">
        <!-- Columna Izquierda: Ticket de Venta -->
        <div style="flex: 0 0 380px; width: 380px; max-width: 380px; height: 100%;">
            <div class="card shadow-sm border-0 bg-white ticket-card-layout">

                {{-- Ticket Header compacto (2 líneas) --}}
                <div class="card-header bg-white py-2 px-3 border-bottom d-flex justify-content-between align-items-center">
                    <div>
                        <div class="d-flex align-items-center" style="gap: 8px;">
                            <span class="font-weight-bold text-dark" style="font-size: 14px; font-weight: 800; letter-spacing: -0.3px;">TICKET N° {{ str_replace('INV-', '', $nextInvoiceNo) }}</span>
                            <span class="font-weight-bold font-size-11" style="color: var(--mh-pink);"><i class="fa-solid fa-user mr-1"></i>Venta al Público</span>
                        </div>
                        <small class="text-muted font-size-10">Caja 01 • {{ now()->format('d/m/Y H:i') }}</small>
                    </div>
                </div>

                <div class="card-body p-3 bg-white">
                    {{-- Items del Ticket --}}
                    <div class="ticket-items-scroll">
                        <div id="ticket-table-body" class="d-flex flex-column" style="gap: 8px;">
                            @forelse ($productItem as $item)
                            <div class="cart-item-card d-flex align-items-center justify-content-between p-2 bg-white border rounded-xl" data-product-id="{{ $item->id }}" style="border-radius: 12px; border: 1px solid #E2E8F0 !important; gap: 6px;">
                                <div class="d-flex align-items-center" style="flex: 1; min-width: 0; gap: 8px;">
                                    @if(!empty($item->options->image) && file_exists(public_path('upload/products/' . $item->options->image)))
                                        <img src="{{ asset('upload/products/' . $item->options->image) }}" class="rounded border" style="width: 38px; height: 38px; object-fit: cover; aspect-ratio: 1/1; flex-shrink: 0;">
                                    @elseif(!empty($item->options->image) && file_exists(storage_path('app/public/products/' . $item->options->image)))
                                        <img src="{{ asset('storage/products/' . $item->options->image) }}" class="rounded border" style="width: 38px; height: 38px; object-fit: cover; aspect-ratio: 1/1; flex-shrink: 0;">
                                    @else
                                        <img src="{{ asset('assets/images/product/default.webp') }}" class="rounded border" style="width: 38px; height: 38px; object-fit: cover; aspect-ratio: 1/1; opacity: 0.6; flex-shrink: 0;">
                                    @endif
                                    <strong class="text-dark font-size-12 text-truncate" style="font-weight: 700; line-height: 1.2; flex: 1; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;" title="{{ $item->name }}">{{ $item->name }}</strong>
                                </div>
                                <div class="d-flex align-items-center justify-content-end" style="flex-shrink: 0; gap: 8px;">
                                    {{-- Controles de cantidad --}}
                                    <div class="d-flex align-items-center border rounded-pill px-1" style="height: 26px; background: #FFFFFF; border-color: var(--mh-pink) !important; border-width: 1px !important; flex-shrink: 0;">
                                        <button type="button" class="btn btn-sm text-danger rounded-circle p-0 ajax-update-btn d-flex align-items-center justify-content-center" data-rowid="{{ $item->rowId }}" data-qty="{{ max(1, $item->qty - 1) }}" style="font-size: 13px; font-weight: bold; width: 20px; height: 20px; border: none; background: transparent;">-</button>
                                        <span class="font-weight-bold px-1 text-center text-dark" style="font-size: 11px; min-width: 16px;">{{ $item->qty }}</span>
                                        <button type="button" class="btn btn-sm text-danger rounded-circle p-0 ajax-update-btn d-flex align-items-center justify-content-center" data-rowid="{{ $item->rowId }}" data-qty="{{ $item->qty + 1 }}" style="font-size: 13px; font-weight: bold; width: 20px; height: 20px; border: none; background: transparent;">+</button>
                                    </div>

                                    {{-- Precio --}}
                                    <span class="font-weight-extrabold text-dark font-size-12 text-nowrap" style="min-width: 55px; text-align: right;">
                                        ${{ number_format($item->subtotal, 0, ',', '.') }}
                                    </span>
                                    
                                    {{-- Botón Eliminar --}}
                                    <button type="button" class="btn btn-sm text-danger ajax-delete-btn p-0 border-0 ml-1 d-flex align-items-center justify-content-center" data-rowid="{{ $item->rowId }}" style="font-size: 20px; font-weight: 700; background: transparent; width: 20px; height: 20px; line-height: 1; color: var(--mh-pink) !important;" title="Eliminar">
                                        &times;
                                    </button>
                                </div>
                            </div>
                            @empty
                            <div class="border rounded-xl p-4 text-center" style="border-style: dashed !important; border-color: #F472B6 !important; background-color: #FFF0F5; border-radius: 12px;">
                                <div class="text-danger font-size-22 mb-1" style="color: var(--mh-pink) !important;"><i class="fa-solid fa-circle-plus"></i></div>
                                <h6 class="font-weight-bold text-dark font-size-13 mb-1">Agregar productos al ticket</h6>
                                <small class="text-muted font-size-11">Escanea, busca o selecciona un producto</small>
                            </div>
                            @endforelse
                        </div>
                    </div>
             
                    {{-- Fila de acción rápida: Producto Común & Borrar todo (compacto) --}}
                    <div class="d-flex justify-content-between mt-1 mb-1">
                        <button type="button" id="btn-producto-comun-link" data-toggle="modal" data-target="#modalProductoComun" class="btn btn-sm border-0 bg-transparent font-size-11 font-weight-bold px-2 py-1" style="border-radius: 8px; color: var(--mh-pink) !important;">
                            <i class="fa-solid fa-cart-plus mr-1"></i> + Prod. Común
                        </button>
                        <button type="button" id="btn-clear-cart-pos" class="btn btn-sm text-danger border-0 bg-transparent font-size-11 font-weight-bold px-2 py-1" style="border-radius: 8px;">
                            <i class="fa-solid fa-trash-can mr-1"></i> Borrar todo
                        </button>
                    </div>

                    {{-- Resumen Totales Compacto --}}
                    <div class="border-top pt-1 mb-1">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <span class="text-muted font-size-11">Cant. Artículos:</span>
                            <span id="ticket-cart-count" class="font-weight-bold font-size-11 text-dark">{{ Cart::count() }}</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center pt-1 border-top">
                            <span class="font-weight-bold font-size-13 text-dark">TOTAL COMPRA:</span>
                            <span class="font-weight-bold font-size-20 ticket-total-display" style="color: var(--mh-pink);">${{ number_format((float)Cart::total(), 0, ',', '.') }}</span>
                        </div>
                    </div>

                    {{-- Botón COBRAR Destacado --}}
                    <button type="button" id="btn-cobrar-main" class="btn btn-cobrar-mh btn-block font-weight-bold d-flex align-items-center justify-content-center py-2" data-toggle="modal" data-target="#cobrarModal" {{ Cart::count() == 0 ? 'disabled' : '' }}>
                        <i class="fa-solid fa-cash-register font-size-16 mr-2"></i>
                        <span class="font-size-15 font-weight-bold ticket-total-display-btn">COBRAR</span>
                    </button>



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

        <!-- Columna Derecha: Catálogo & Buscador -->
        <div style="flex: 1 1 0%; min-width: 0; height: 100%;" class="col-catalog-container d-flex flex-column">
            <div class="card shadow-sm border-0 bg-white mb-2 catalog-card-layout">
                <div class="card-body p-3 d-flex flex-column overflow-hidden">

                    {{-- Buscador con escaneo de código de barras + Cámara IA --}}
                    <form id="search-form" action="{{ route('pos.index') }}" method="GET" class="mb-1">
                        <div class="input-group" style="border: 1px solid #E2E8F0; border-radius: 12px; overflow: hidden; background: #fff;">
                            <div class="input-group-prepend bg-white">
                                <span class="input-group-text bg-white border-0 text-muted pl-3"><i class="fa-solid fa-magnifying-glass font-size-14"></i></span>
                            </div>
                            <input type="text" id="search" name="search" class="form-control bg-white text-dark border-0 pl-2" placeholder="Buscar o escanear código de barras..." value="{{ request('search') }}" autofocus autocomplete="off" style="font-size: 13px; height: 42px;">
                            <div class="input-group-append bg-white">
                                <span class="input-group-text bg-white border-0 text-muted pr-3"><i class="fa-solid fa-barcode font-size-16"></i></span>
                            </div>
                        </div>
                    </form>










                    {{-- Category Pills dinámicos sincronizados en tiempo real con la Base de Datos --}}
                    <div class="d-flex align-items-center mb-2 overflow-auto py-1" style="gap: 8px; scrollbar-width: none;">
                        <span class="cat-pill-mh active" data-category="all">Catálogo</span>
                        @foreach($categories as $cat)
                            <span class="cat-pill-mh" data-category="{{ $cat->id }}" title="Filtrar por {{ $cat->name }}">
                                {{ $cat->name }}
                            </span>
                        @endforeach
                    </div>


                    <script>
                    (function() {
                        // Consultar IA → abre el modal de análisis
                        var btnConsultar = document.getElementById('btn-consultar-ai');
                        if (btnConsultar) {
                            btnConsultar.addEventListener('click', function(e) {
                                e.preventDefault();
                                e.stopPropagation();
                                // Abrir modal con Bootstrap
                                if (typeof $ !== 'undefined' && $('#aiAnalysisModal').length) {
                                    $('#aiAnalysisModal').modal('show');
                                }
                            });
                        }
                    })();
                    </script>

                    {{-- Catálogo de Productos tipo E-commerce Grid --}}
                    <div class="catalog-table-scroll rounded mb-1 border-0">
                        <div class="row no-gutters product-grid" id="product-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 10px; padding: 2px;">
                            @forelse ($products as $product)
                            @php
                                $inCartQty = $cartQuantities[$product->id] ?? 0;
                                $hasCustomImage = false;
                                $imgUrl = '';
                                if (!empty($product->product_image)) {
                                    if (file_exists(public_path('upload/products/thumbnail/' . $product->product_image))) {
                                        $hasCustomImage = true;
                                        $imgUrl = asset('upload/products/thumbnail/' . $product->product_image);
                                    } elseif (file_exists(storage_path('app/public/products/thumbnail/' . $product->product_image))) {
                                        $hasCustomImage = true;
                                        $imgUrl = asset('storage/products/thumbnail/' . $product->product_image);
                                    } elseif (file_exists(public_path('upload/products/' . $product->product_image))) {
                                        $hasCustomImage = true;
                                        $imgUrl = asset('upload/products/' . $product->product_image);
                                    } elseif (file_exists(storage_path('app/public/products/' . $product->product_image))) {
                                        $hasCustomImage = true;
                                        $imgUrl = asset('storage/products/' . $product->product_image);
                                    }
                                }
                            @endphp
                            <div class="product-card bg-white border p-2 d-flex flex-column justify-content-between position-relative product-row" 
                                 data-product-id="{{ $product->id }}" 
                                 data-code="{{ strtolower($product->product_code) }}" 
                                 data-stock="{{ $product->product_store }}" 
                                 style="border-radius: 14px; border: 1px solid var(--mh-border) !important; transition: all 0.2s ease; height: 185px;">
                                
                                {{-- Insignia 'Llevas: X' en posición absoluta fija --}}
                                @if($inCartQty > 0)
                                    <span class="badge badge-success position-absolute px-1.5 py-0.5 product-cart-badge font-size-10 text-white font-weight-bold" style="top: 4px; left: 4px; background-color: #22C55E !important; border-radius: 4px; z-index: 5;">Llevas: {{ $inCartQty }}</span>
                                @endif

                                <div class="cursor-pointer btn-show-details w-100 overflow-hidden" 
                                     data-toggle="modal" data-target="#productDetailsModal"
                                     data-id="{{ $product->id }}"
                                     data-name="{{ $product->product_name }}"
                                     data-code="{{ $product->product_code ?? 'Sin SKU' }}"
                                     data-category="{{ $product->category->name ?? 'Catálogo' }}"
                                     data-price="{{ $product->selling_price }}"
                                     data-stock="{{ $product->product_store }}"
                                     data-image="{{ $hasCustomImage ? $imgUrl : asset('assets/images/product/default.webp') }}">
                                     
                                    {{-- Imagen del producto (siempre se muestra, si no tiene foto se usa la genérica) --}}
                                    <div class="text-center mb-1 position-relative">
                                        <img src="{{ $hasCustomImage ? $imgUrl : asset('assets/images/product/default.webp') }}"
                                             alt="{{ $product->product_name }}"
                                             class="rounded"
                                             style="width: 100%; height: 70px; object-fit: cover; border-radius: 8px; pointer-events: none; {{ $hasCustomImage ? '' : 'opacity: 0.6;' }}">
                                    </div>
                                    
                                    {{-- Nombre y Stock disponible --}}
                                    <div class="text-center px-1">
                                        <strong class="product-name-str font-size-11 text-dark d-block text-truncate mb-0" style="font-weight: 700; line-height: 1.2;" title="{{ $product->product_name }}">
                                            {{ $product->product_name }}
                                        </strong>
                                        <small class="text-muted font-size-9 d-block">
                                            Stk: {{ $product->product_store > 0 ? $product->product_store . ' uds' : 'Agotado' }}
                                        </small>
                                    </div>
                                </div>

                                {{-- Precio & Botón Agregar Fijo --}}
                                <div>
                                    <div class="font-weight-extrabold font-size-13 text-dark mb-1 text-center" style="font-weight: 800; line-height: 1; color: var(--mh-pink) !important;">
                                        ${{ number_format($product->selling_price, 0, ',', '.') }}
                                    </div>
                                    
                                    <form action="{{ route('pos.addCart') }}" method="POST" class="form-add-cart mb-0">
                                        @csrf
                                        <input type="hidden" name="id" value="{{ $product->id }}">
                                        <input type="hidden" name="name" value="{{ $product->product_name }}">
                                        <input type="hidden" name="price" value="{{ $product->selling_price }}">

                                        <button type="submit" class="btn btn-add-mh btn-sm btn-block btn-add-catalog py-1 font-size-11 font-weight-bold" style="border-radius: 8px; height: 28px; line-height: 1;">
                                            Agregar
                                        </button>
                                    </form>
                                </div>
                            </div>
                            @empty
                            <div class="col-12 text-center py-4 bg-white">
                                <div class="alert text-white bg-warning mb-0 p-2" role="alert">
                                    <div class="iq-alert-text font-size-12">No se encontraron productos en el catálogo.</div>
                                </div>
                            </div>
                            @endforelse
                        </div>
                    </div>
                    
                </div>
            </div>

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

{{-- Modal Detalle Producto --}}
<div class="modal fade" id="productDetailsModal" tabindex="-1" role="dialog" aria-labelledby="productDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document" style="max-width: 760px;">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 20px; overflow: hidden;">

            {{-- Header --}}
            <div class="modal-header border-0 px-4 py-3" style="background: linear-gradient(135deg, #FF2B66 0%, #E01F55 100%);">
                <h5 class="modal-title font-weight-bold text-white mb-0" id="productDetailsModalLabel" style="font-size: 14px; letter-spacing: 0.5px;">
                    <i class="ri-box-3-line mr-2"></i> DETALLE DEL PRODUCTO
                </h5>
                <button type="button" class="close text-white p-0 m-0" data-dismiss="modal" aria-label="Close" style="opacity: 1;">
                    <i class="ri-close-line font-size-20"></i>
                </button>
            </div>

            {{-- Body --}}
            <div class="modal-body p-0 bg-white">
                <div class="d-flex" style="min-height: 280px;">

                    {{-- Columna Izquierda: Imagen --}}
                    <div class="d-flex flex-column align-items-center justify-content-center p-4" style="background: #FFF5F8; border-right: 1px solid #FFE4EC; width: 220px; min-width: 220px;">
                        <div style="width: 140px; height: 140px; border-radius: 16px; overflow: hidden; border: 2px solid #FFE4EC; box-shadow: 0 4px 16px rgba(255,43,102,0.12); background: #fff;">
                            <img id="detail-product-img" src="" style="width: 100%; height: 100%; object-fit: cover;">
                        </div>
                        <div id="detail-stock-badge" class="mt-3 px-3 py-1 rounded-pill font-weight-bold font-size-11 text-center" style="background: #FFF0F5; color: #FF2B66; border: 1px solid #FFE4EC; min-width: 100px;">
                            Stock: —
                        </div>
                    </div>

                    {{-- Columna Derecha: Info --}}
                    <div class="flex-fill p-4 d-flex flex-column justify-content-between">
                        {{-- Nombre --}}
                        <div>
                            <div class="d-flex align-items-center mb-1">
                                <h4 id="detail-product-name" class="font-weight-extrabold text-dark mb-0" style="font-size: 20px; font-weight: 800; line-height: 1.2;"></h4>
                                <button type="button" id="btn-edit-detail-name" class="btn btn-link p-0 ml-2 text-muted" style="line-height: 1;" title="Editar Nombre">
                                    <i class="ri-edit-2-line font-size-16" style="color: var(--mh-pink) !important;"></i>
                                </button>
                            </div>

                            {{-- Chips info --}}
                            <div class="d-flex align-items-center mb-3" style="gap: 8px; flex-wrap: wrap;">
                                <span class="px-2 py-1 rounded font-size-11 font-weight-bold" style="background: #F1F5F9; color: #475569;">
                                    <i class="ri-barcode-line mr-1"></i><span id="detail-product-code">—</span>
                                </span>
                                <span class="px-2 py-1 rounded font-size-11 font-weight-bold" style="background: #FFF0F5; color: #FF2B66;">
                                    <i class="ri-price-tag-3-line mr-1"></i><span id="detail-product-category">—</span>
                                </span>
                            </div>

                            {{-- Precio actual --}}
                            <div class="mb-3 p-3 rounded-lg" style="background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 12px;">
                                <small class="text-muted font-size-10 font-weight-bold text-uppercase d-block mb-1">Precio de Venta</small>
                                <span id="detail-price-display" class="font-weight-extrabold" style="font-size: 26px; color: #FF2B66; font-weight: 800; letter-spacing: -0.5px;">$0</span>
                            </div>

                            {{-- Campo ajuste precio --}}
                            <div class="p-3 rounded-lg" style="background: #FFF5F8; border: 1px dashed #FFB3C6; border-radius: 12px;">
                                <label class="font-size-11 font-weight-bold text-uppercase text-dark d-flex align-items-center mb-2" style="gap: 6px;">
                                    <i class="ri-edit-line" style="color: #FF2B66;"></i> Ajustar precio para esta venta
                                </label>
                                <div class="input-group" style="border-radius: 10px; overflow: hidden;">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text font-weight-bold bg-white" style="border-color: #FFB3C6; color: #FF2B66; font-size: 18px; border-right: 0; padding: 0 12px;">$</span>
                                    </div>
                                    <input type="number"
                                           id="detail-editable-price-input"
                                           class="form-control font-weight-bold"
                                           style="border-color: #FFB3C6; border-left: 0; font-size: 18px; color: #0F172A; font-weight: 700; height: 46px;"
                                           min="0" step="1">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Footer --}}
            <div class="modal-footer bg-white p-3" style="border-top: 1px solid #F1F5F9;">
                <form action="{{ route('pos.addCart') }}" method="POST" id="form-detail-add-cart"
                      class="form-add-cart d-flex align-items-center w-100" style="gap: 10px;">
                    @csrf
                    <input type="hidden" name="id"    id="detail-input-id">
                    <input type="hidden" name="name"  id="detail-input-name">
                    <input type="hidden" name="price" id="detail-input-price">

                    {{-- Cantidad --}}
                    <div class="d-flex align-items-center" style="gap: 6px;">
                        <span class="font-weight-bold font-size-12 text-muted">Cant:</span>
                        <input type="number" name="qty" id="detail-input-qty" value="1" min="1"
                               class="form-control text-center font-weight-bold"
                               style="width: 70px; border-radius: 8px; height: 40px; font-size: 15px;">
                    </div>

                    <div class="d-flex ml-auto" style="gap: 8px;">
                        <button type="button" class="btn font-weight-bold px-4"
                                data-dismiss="modal"
                                style="border-radius: 10px; border: 1px solid #E2E8F0; color: #64748B; background: #F8FAFC; height: 40px;">
                            Cancelar
                        </button>
                        <button type="submit" class="btn font-weight-bold px-4"
                                style="border-radius: 10px; background: #FF2B66; color: #fff; border: none; height: 40px; font-size: 14px;">
                            <i class="ri-shopping-cart-2-line mr-1"></i> Agregar al ticket
                        </button>
                    </div>
                </form>
            </div>

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





{{-- ===== Modal Producto Común ===== --}}
<div class="modal fade" id="modalProductoComun" tabindex="-1" role="dialog" aria-labelledby="modalProductoComunLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document" style="max-width:380px;">
        <div class="modal-content border-0" style="border-radius:22px; overflow:hidden; box-shadow:0 25px 60px rgba(0,0,0,0.20);">
            {{-- Header --}}
            <div class="modal-header border-0 py-3 px-4" style="background:linear-gradient(135deg,#FF2B66,#ff6b9d);">
                <h5 class="modal-title font-weight-extrabold text-white" id="modalProductoComunLabel" style="font-size:15px; font-weight:800; letter-spacing:-0.3px;">
                    <i class="fa-solid fa-cart-plus mr-2"></i> Producto Común
                </h5>
                <button type="button" class="close border-0 bg-transparent p-0" data-dismiss="modal" style="font-size:24px; font-weight:900; color:#fff; opacity:1; cursor:pointer;">&times;</button>
            </div>
            {{-- Body --}}
            <div class="modal-body p-4 bg-white">
                <p class="text-muted font-size-11 mb-3" style="line-height:1.5;">
                    Agrega cualquier producto sin código de barras: huevos, dulces, cecina, etc.
                </p>
                <div class="form-group mb-3">
                    <label class="font-weight-bold font-size-11 text-uppercase text-muted mb-1">Nombre del producto</label>
                    <input type="text" id="pc-nombre" class="form-control" placeholder="Ej: Huevos, Cecina, Dulces..." autocomplete="off"
                        style="border-radius:10px; border-color:#E2E8F0; height:42px; font-size:13px;">
                </div>
                <div class="form-row">
                    <div class="col-6">
                        <div class="form-group mb-3">
                            <label class="font-weight-bold font-size-11 text-uppercase text-muted mb-1 d-block text-truncate">Cantidad</label>
                            <input type="number" id="pc-cantidad" class="form-control" value="1" min="1" step="1"
                                style="border-radius:10px; border-color:#E2E8F0; height:42px; font-size:13.5px; text-align:center; font-weight:700; color:#0F172A;">
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group mb-3">
                            <label class="font-weight-bold font-size-11 text-uppercase text-muted mb-1 d-block text-truncate">Precio unitario</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text bg-light text-muted font-weight-bold" style="border-radius:10px 0 0 10px; border-color:#E2E8F0; font-size:13px; padding-left:10px; padding-right:10px;">$</span>
                                </div>
                                <input type="number" id="pc-precio" class="form-control" placeholder="0" min="0" step="1"
                                    style="border-radius:0 10px 10px 0; border-color:#E2E8F0; height:42px; font-size:13.5px; font-weight:700; color:#0F172A;">
                            </div>
                        </div>
                    </div>
                </div>
                {{-- Preview subtotal --}}
                <div class="d-flex justify-content-between align-items-center px-3 py-2 mb-1" style="background:#FFF1F5; border-radius:10px; border:1px solid #FFD6E3;">
                    <span class="font-size-11 font-weight-bold text-muted text-uppercase">Subtotal</span>
                    <span id="pc-subtotal-preview" class="font-size-17 font-weight-bold" style="color:#FF2B66;">$0</span>
                </div>
            </div>
            {{-- Footer --}}
            <div class="modal-footer border-0 px-4 pb-4 pt-0 bg-white" style="gap:10px;">
                <button type="button" class="btn btn-light font-weight-bold flex-fill py-2" data-dismiss="modal" style="border-radius:12px; height:42px;">Cancelar</button>
                <button type="button" id="btn-pc-agregar" class="btn font-weight-bold flex-fill py-2 text-white" style="background:linear-gradient(135deg,#FF2B66,#ff6b9d); border:none; border-radius:12px; height:42px; font-size:13px; box-shadow:0 4px 14px rgba(255,43,102,.35);">
                    <i class="fa-solid fa-plus mr-1"></i> Agregar al Ticket
                </button>
            </div>
        </div>
    </div>
</div>


{{-- Modal Ajustes de Cuenta --}}
<div class="modal fade" id="accountSettingsModal" tabindex="-1" role="dialog" aria-labelledby="accountSettingsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 20px; overflow: hidden;">
            <div class="modal-header text-white border-0" style="background-color: var(--mh-pink);">
                <h5 class="modal-title font-weight-bold text-white" id="accountSettingsModalLabel">
                    <i class="fa-solid fa-user-gear mr-2"></i> AJUSTES DE LA CUENTA
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" class="text-white">&times;</span>
                </button>
            </div>
            <div class="modal-body p-4 bg-white text-left" style="text-align: left !important;">
                <!-- Nav tabs -->
                <ul class="nav nav-pills mb-3 justify-content-center" id="accountTabs" role="tablist" style="gap: 8px;">
                    <li class="nav-item">
                        <a class="nav-link active font-weight-bold px-3 py-1.5" id="profile-tab" data-toggle="pill" href="#profile-sect" role="tab" style="border-radius: 20px; font-size: 12px;">Editar Perfil</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link font-weight-bold px-3 py-1.5" id="password-tab" data-toggle="pill" href="#password-sect" role="tab" style="border-radius: 20px; font-size: 12px;">Contraseña</a>
                    </li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <!-- Tab 1: Editar Perfil -->
                    <div class="tab-pane fade show active" id="profile-sect" role="tabpanel">
                        <form id="form-update-profile" action="{{ route('profile.update') }}" method="POST">
                            @csrf
                            @method('PUT')
                            <div class="form-group mb-2">
                                <label class="font-weight-bold text-dark font-size-11 text-uppercase">Nombre Completo</label>
                                <input type="text" name="name" class="form-control" value="{{ auth()->user()->name }}" required style="border-radius: 10px; height: 40px; font-size: 13px;">
                            </div>
                            <div class="form-group mb-2">
                                <label class="font-weight-bold text-dark font-size-11 text-uppercase">Nombre de Usuario</label>
                                <input type="text" name="username" class="form-control" value="{{ auth()->user()->username }}" required style="border-radius: 10px; height: 40px; font-size: 13px;">
                            </div>
                            <div class="form-group mb-3">
                                <label class="font-weight-bold text-dark font-size-11 text-uppercase">Correo Electrónico</label>
                                <input type="email" name="email" class="form-control" value="{{ auth()->user()->email }}" required style="border-radius: 10px; height: 40px; font-size: 13px;">
                            </div>
                            <button type="submit" class="btn btn-cobrar-mh btn-block font-weight-bold py-2" style="border-radius: 10px;">
                                Guardar Cambios <i class="fa-solid fa-save ml-1"></i>
                            </button>
                        </form>
                    </div>

                    <!-- Tab 2: Cambiar Contraseña -->
                    <div class="tab-pane fade" id="password-sect" role="tabpanel">
                        <form id="form-update-password" action="{{ route('password.update') }}" method="POST">
                            @csrf
                            @method('PUT')
                            <div class="form-group mb-2">
                                <label class="font-weight-bold text-dark font-size-11 text-uppercase">Contraseña Actual</label>
                                <input type="password" name="current_password" class="form-control" required style="border-radius: 10px; height: 40px; font-size: 13px;">
                            </div>
                            <div class="form-group mb-2">
                                <label class="font-weight-bold text-dark font-size-11 text-uppercase">Nueva Contraseña</label>
                                <input type="password" name="password" class="form-control" required style="border-radius: 10px; height: 40px; font-size: 13px;">
                            </div>
                            <div class="form-group mb-3">
                                <label class="font-weight-bold text-dark font-size-11 text-uppercase">Confirmar Nueva Contraseña</label>
                                <input type="password" name="password_confirmation" class="form-control" required style="border-radius: 10px; height: 40px; font-size: 13px;">
                            </div>
                            <button type="submit" class="btn btn-cobrar-mh btn-block font-weight-bold py-2" style="border-radius: 10px;">
                                Actualizar Contraseña <i class="fa-solid fa-key ml-1"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer bg-light p-3">
                <form action="{{ route('logout') }}" method="POST" class="mb-0 w-100">
                    @csrf
                    <button type="submit" class="btn btn-danger font-weight-bold btn-block py-2" style="border-radius: 10px; font-size: 13px; background-color: #DC2626 !important; border-color: #DC2626 !important;">
                        <i class="fa-solid fa-right-from-bracket mr-2"></i> Cerrar Sesión
                    </button>
                </form>
            </div>
        </div>


<script src="https://unpkg.com/dexie@3/dist/dexie.js"></script>
<script>
    // Inicializar base de datos IndexedDB local para el carro
    const db = new Dexie("POSCartDatabase");
    db.version(1).stores({
        cart: 'id, name, qty, price, image, category'
    });

    document.addEventListener('DOMContentLoaded', function() {
        // Sincronizar items del servidor al iniciar
        @php
            $initialCartData = $productItem->map(function($item) {
                return [
                    'id' => (int)$item->id,
                    'name' => $item->name,
                    'qty' => (int)$item->qty,
                    'price' => (float)$item->price,
                    'image' => $item->options->image ?? '',
                    'category' => $item->options->category ?? '',
                ];
            });
        @endphp
        const initialCart = {!! json_encode($initialCartData) !!};

        db.transaction('rw', db.cart, async () => {
            await db.cart.clear();
            for (const item of initialCart) {
                await db.cart.put(item);
            }
        }).then(() => {
            updateCartUI();
        }).catch(err => {
            console.error('Error al sincronizar carro inicial:', err);
            updateCartUI();
        });
        
        // Reloj en tiempo real en la barra superior
        setInterval(function() {
            const el = document.getElementById('live-clock');
            if (el) {
                const now = new Date();
                const h = String(now.getHours()).padStart(2, '0');
                const m = String(now.getMinutes()).padStart(2, '0');
                el.textContent = h + ':' + m;
            }
        }, 1000);

        const searchInput = document.getElementById('search');
        const searchForm = document.getElementById('search-form');
        const ticketBody = document.getElementById('ticket-table-body');

        // --- Lógica del Modal Producto Común ---
        const btnProductoComun = document.getElementById('btn-producto-comun-link');
        if (btnProductoComun) {
            btnProductoComun.addEventListener('click', function() {
                // Resetear campos
                document.getElementById('pc-nombre').value = '';
                document.getElementById('pc-cantidad').value = '1';
                document.getElementById('pc-precio').value = '';
                document.getElementById('pc-subtotal-preview').textContent = '$0';
                
                // Mostrar modal con jQuery (Bootstrap)
                if (window.jQuery) {
                    $('#modalProductoComun').modal('show');
                }
            });
        }

        const pcCantidad = document.getElementById('pc-cantidad');
        const pcPrecio = document.getElementById('pc-precio');
        const pcSubtotalPreview = document.getElementById('pc-subtotal-preview');

        function updatePCSubtotal() {
            const qty = parseFloat(pcCantidad.value) || 0;
            const price = parseFloat(pcPrecio.value) || 0;
            const subtotal = qty * price;
            pcSubtotalPreview.textContent = '$' + new Intl.NumberFormat('es-CL').format(subtotal);
        }

        if (pcCantidad) pcCantidad.addEventListener('input', updatePCSubtotal);
        if (pcPrecio) pcPrecio.addEventListener('input', updatePCSubtotal);

        const btnPcAgregar = document.getElementById('btn-pc-agregar');
        if (btnPcAgregar) {
            btnPcAgregar.addEventListener('click', async function() {
                const name = document.getElementById('pc-nombre').value.trim();
                const qty = parseFloat(pcCantidad.value) || 0;
                const price = parseFloat(pcPrecio.value) || 0;

                if (!name) {
                    alert('Por favor ingrese el nombre del producto.');
                    return;
                }
                if (qty <= 0) {
                    alert('La cantidad debe ser mayor a 0.');
                    return;
                }
                if (price < 0) {
                    alert('El precio no puede ser negativo.');
                    return;
                }

                // Generar ID negativo único virtual
                const id = -Date.now();
                const item = {
                    id: id,
                    name: name,
                    price: price,
                    qty: qty,
                    is_custom: true,
                    image: '',
                    category: 'Producto Común'
                };

                try {
                    await db.cart.put(item);
                    updateCartUI();
                    if (window.jQuery) {
                        $('#modalProductoComun').modal('hide');
                    }
                } catch (err) {
                    console.error('Error al agregar producto común:', err);
                }
            });
        }
        // Atajos de teclado en el Modal Producto Común
        const modalPC = document.getElementById('modalProductoComun');
        if (modalPC) {
            modalPC.addEventListener('keydown', function(e) {
                const activeEl = document.activeElement;

                // Si presiona Enter, guardar/enviar inmediatamente
                if (e.key === 'Enter') {
                    e.preventDefault();
                    if (btnPcAgregar) btnPcAgregar.click();
                    return;
                }

                // Si presiona + o -, sumar o restar cantidades (excepto si está escribiendo texto en nombre o precio)
                if (e.key === '+' || e.key === '-' || e.key === 'Add' || e.key === 'Subtract') {
                    if (activeEl && (activeEl.id === 'pc-nombre' || activeEl.id === 'pc-precio')) {
                        return; // Dejar escribir el carácter
                    }
                    e.preventDefault();
                    const qtyVal = parseFloat(pcCantidad.value) || 0;
                    if (e.key === '+' || e.key === 'Add') {
                        pcCantidad.value = qtyVal + 1;
                    } else {
                        pcCantidad.value = Math.max(1, qtyVal - 1);
                    }
                    updatePCSubtotal();
                }
            });

            // Dar foco automático al campo Nombre al abrir el modal
            $(modalPC).on('shown.bs.modal', function () {
                const nameInput = document.getElementById('pc-nombre');
                if (nameInput) nameInput.focus();
            });
        }

        // --- Lógica de Escaneo de Códigos de Barras e Integración de Beeper ---
        // Beep con Web Audio API
        function playBeep() {
            try {
                var ctx = new (window.AudioContext || window.webkitAudioContext)();
                var osc = ctx.createOscillator();
                var gain = ctx.createGain();
                osc.connect(gain);
                gain.connect(ctx.destination);
                osc.frequency.value = 880;
                osc.type = 'sine';
                gain.gain.setValueAtTime(0.3, ctx.currentTime);
                gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.15);
                osc.start(ctx.currentTime);
                osc.stop(ctx.currentTime + 0.15);
            } catch(e) {}
        }

        var barcodeBuffer = '';
        var barcodeTimer = null;
        var lastKeyTime = 0;
        var SCAN_SPEED_MS = 50; // los scanners escriben más rápido que un humano

        // Buscar y agregar producto por código de barras o SKU (búsqueda en DOM primero, luego AJAX BD)
        async function processBarcodeScan(code) {
            if (!code) return false;
            let cleanCode = code.trim().toLowerCase();
            let isScaleBarcode = false;
            let scaleValue = 0;

            // Detectar códigos de barra de balanza (13 dígitos que inician con 20, 21 o 22)
            if (cleanCode.length === 13 && (cleanCode.startsWith('20') || cleanCode.startsWith('21') || cleanCode.startsWith('22'))) {
                isScaleBarcode = true;
                scaleValue = parseInt(cleanCode.substring(7, 12)) || 0;
                cleanCode = cleanCode.substring(0, 7); // El código de búsqueda es el prefijo + SKU (primeros 7 dígitos)
            }
            
            // 1. Intentar coincidencia directa por atributo data-code o data-product-id en las tarjetas del DOM (0ms)
            // Para códigos de balanza omitimos el DOM click para procesar cantidades decimales/precios dinámicos
            if (!isScaleBarcode) {
                const domCards = Array.from(document.querySelectorAll('.product-row'));
                const matchedCard = domCards.find(row => {
                    const attrCode = (row.getAttribute('data-code') || '').trim().toLowerCase();
                    const attrId = (row.getAttribute('data-product-id') || '').trim().toLowerCase();
                    return attrCode === cleanCode || attrId === cleanCode;
                });

                if (matchedCard) {
                    const form = matchedCard.querySelector('.form-add-cart');
                    if (form) {
                        form.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
                        playBeep();
                        if (searchInput) {
                            searchInput.value = '';
                            searchInput.focus();
                        }
                        return true;
                    }
                }
            }

            // 2. Si no está en las tarjetas visibles del DOM (o es código de balanza), buscar en la Base de Datos vía AJAX
            try {
                const response = await fetch(`/pos/products/search?search=${encodeURIComponent(cleanCode)}`, {
                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                });
                const data = await response.json();
                if (data.success && data.products && data.products.length > 0) {
                    // Coincidencia por código de barras exacto, o por ID, o el único resultado retornado
                    const match = data.products.find(p => (p.product_code || '').trim().toLowerCase() === cleanCode || p.id == cleanCode) 
                               || (data.products.length === 1 ? data.products[0] : null);
                    
                    if (match) {
                        let qtyToAdd = 1;
                        const sellingPrice = parseFloat(match.selling_price);

                        if (isScaleBarcode) {
                            const lowerName = match.product_name.toLowerCase();
                            // Si contiene palabras clave de peso, interpretamos el valor como gramos (ej: 00350 -> 0.35 Kg)
                            const isWeightBased = lowerName.includes('kg') || lowerName.includes('gr') || lowerName.includes('kilo') || lowerName.includes('granel') || lowerName.includes('pesable');
                            if (isWeightBased) {
                                qtyToAdd = scaleValue / 1000;
                            } else {
                                // De lo contrario, interpretamos como dinero total (ej: 01500 -> $1.500 CLP)
                                if (sellingPrice > 0) {
                                    qtyToAdd = scaleValue / sellingPrice;
                                } else {
                                    qtyToAdd = 1;
                                }
                            }
                        }

                        const existing = await db.cart.get(match.id);
                        const qty = existing ? existing.qty + qtyToAdd : qtyToAdd;
                        
                        await db.cart.put({
                            id: parseInt(match.id),
                            name: match.product_name,
                            price: parseFloat(match.selling_price),
                            image: match.product_image || '',
                            category: match.category_name || 'Catálogo',
                            qty: qty
                        });
                        
                        await updateCartUI();
                        playBeep();
                        
                        if (searchInput) {
                            searchInput.value = '';
                            searchInput.focus();
                        }
                        return true;
                    }
                }
                
                alert(`⚠️ Producto con código "${code}" no fue encontrado.`);
                if (searchInput) {
                    searchInput.value = '';
                    searchInput.focus();
                }
                return false;
            } catch (err) {
                console.error('Error al procesar escaneo:', err);
                return false;
            }
        }

        // Prevenir envío del formulario al presionar Enter en el buscador y manejar el escaneo o búsqueda AJAX
        if (searchForm) {
            searchForm.addEventListener('submit', function(e) {
                e.preventDefault();
                var code = searchInput ? searchInput.value.trim() : '';
                if (code.length > 0) {
                    processBarcodeScan(code);
                }
            });
        }

        document.addEventListener('keydown', function(e) {
            if (e.target === searchInput && e.key === 'Enter') {
                e.preventDefault();
                var code = searchInput.value.trim();
                if (code.length > 0) {
                    processBarcodeScan(code);
                }
            }
        });

        // --- Lógica del Banner de Asistente de IA ---
        const btnConsultarAi = document.getElementById('btn-consultar-ai');
        if (btnConsultarAi) {
            btnConsultarAi.addEventListener('click', function(e) {
                e.preventDefault();
                alert('¡Recomendación inteligente! El stock crítico de lácteos requiere reposición rápida hoy.');
                const container = document.getElementById('ai-banner-container');
                if (container) {
                    container.style.display = 'none';
                }
            });
        }

        const btnCloseAi = document.getElementById('btn-close-ai-banner');
        if (btnCloseAi) {
            btnCloseAi.addEventListener('click', function(e) {
                e.preventDefault();
                const container = document.getElementById('ai-banner-container');
                if (container) {
                    container.style.display = 'none';
                }
            });
        }

        // Category Pills Filtering (AJAX database backed)
        let currentCategory = 'all';
        document.querySelectorAll('.cat-pill-mh').forEach(pill => {
            pill.addEventListener('click', function() {
                document.querySelectorAll('.cat-pill-mh').forEach(p => p.classList.remove('active'));
                this.classList.add('active');
                currentCategory = this.getAttribute('data-category');
                triggerAjaxSearch();
            });
        });

        // Actualización de la UI del Carrito en Tiempo Real vía AJAX
        // Actualización de la UI del Carrito en Tiempo Real desde IndexedDB local
        async function updateCartUI() {
            if (!ticketBody) return;
            
            try {
                const items = await db.cart.toArray();
                
                if (items.length === 0) {
                    ticketBody.innerHTML = `
                        <div class="border rounded-xl p-4 text-center" style="border-style: dashed !important; border-color: #F472B6 !important; background-color: #FFF0F5; border-radius: 12px;">
                            <div class="text-danger font-size-22 mb-1" style="color: var(--mh-pink) !important;"><i class="fa-solid fa-circle-plus"></i></div>
                            <h6 class="font-weight-bold text-dark font-size-13 mb-1">Agregar productos al ticket</h6>
                            <small class="text-muted font-size-11">Escanea, busca o selecciona un producto</small>
                        </div>
                    `;
                } else {
                    let html = '';
                    items.forEach(item => {
                        const imgPath = item.image ? item.image : '/assets/images/product/default.webp';
                        const imgStyle = item.image ? '' : 'opacity: 0.6;';
                        const itemSubtotal = item.price * item.qty;
                        const formattedSubtotal = new Intl.NumberFormat('es-CL').format(itemSubtotal);
                        const formattedQty = (item.qty % 1 === 0) ? item.qty : item.qty.toFixed(3);
                        const badgeHtml = item.is_custom ? `<span class="badge badge-warning text-white font-weight-bold ml-1" style="background-color: #F59E0B !important; font-size: 8px; padding: 2px 5px; border-radius: 4px;">🏷️ Común</span>` : '';
                        
                        html += `
                            <div class="cart-item-card d-flex align-items-center justify-content-between p-2 bg-white border rounded-xl" data-product-id="${item.id}" style="border-radius: 12px; border: 1px solid #E2E8F0 !important; gap: 6px;">
                                <div class="d-flex align-items-center" style="flex: 1; min-width: 0; gap: 8px;">
                                    <img src="${imgPath}" class="rounded mr-2 border" style="width: 38px; height: 38px; object-fit: cover; aspect-ratio: 1/1; flex-shrink: 0; ${imgStyle}">
                                    <strong class="text-dark font-size-12 text-truncate" style="font-weight: 700; line-height: 1.2; flex: 1; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;" title="${item.name}">${item.name}${badgeHtml}</strong>
                                </div>
                                <div class="d-flex align-items-center justify-content-end" style="flex-shrink: 0; gap: 8px;">
                                    <div class="d-flex align-items-center border rounded-pill px-1" style="height: 26px; background: #FFFFFF; border-color: var(--mh-pink) !important; border-width: 1px !important; flex-shrink: 0;">
                                        <button type="button" class="btn btn-sm text-danger rounded-circle p-0 ajax-update-btn d-flex align-items-center justify-content-center" data-qty="${Math.max(0, item.qty - 1)}" style="font-size: 13px; font-weight: bold; width: 20px; height: 20px; border: none; background: transparent;">-</button>
                                        <span class="font-weight-bold px-1 text-center text-dark" style="font-size: 11px; min-width: 16px;">${formattedQty}</span>
                                        <button type="button" class="btn btn-sm text-danger rounded-circle p-0 ajax-update-btn d-flex align-items-center justify-content-center" data-qty="${item.qty + 1}" style="font-size: 13px; font-weight: bold; width: 20px; height: 20px; border: none; background: transparent;">+</button>
                                    </div>

                                    <span class="font-weight-extrabold text-dark font-size-12 text-nowrap" style="min-width: 55px; text-align: right;">
                                        $${formattedSubtotal}
                                    </span>
                                    
                                    <button type="button" class="btn btn-sm text-danger ajax-delete-btn p-0 border-0 ml-1 d-flex align-items-center justify-content-center" style="font-size: 20px; font-weight: 700; background: transparent; width: 20px; height: 20px; line-height: 1; color: var(--mh-pink) !important;" title="Eliminar">
                                        &times;
                                    </button>
                                </div>
                            </div>
                        `;
                    });
                    ticketBody.innerHTML = html;
                }

                // Calcular totales locales
                const totalCount = items.reduce((acc, curr) => acc + curr.qty, 0);
                const totalSum = items.reduce((acc, curr) => acc + (curr.price * curr.qty), 0);
                const formattedTotal = new Intl.NumberFormat('es-CL').format(totalSum);

                const elCartCount = document.querySelector('#ticket-cart-count');
                if (elCartCount) {
                    const formattedTotalQty = (totalCount % 1 === 0) ? totalCount : totalCount.toFixed(3);
                    elCartCount.textContent = formattedTotalQty;
                }

                document.querySelectorAll('.ticket-total-display').forEach(el => {
                    el.textContent = `$${formattedTotal}`;
                });

                const cobroBtn = document.querySelector('#btn-cobrar-main');
                if (cobroBtn) {
                    cobroBtn.disabled = (items.length === 0);
                    const btnTotalDisplay = cobroBtn.querySelector('.ticket-total-display-btn');
                    if (btnTotalDisplay) {
                        btnTotalDisplay.textContent = 'COBRAR';
                    }
                }

                // Actualizar catálogo de productos e-commerce
                const cartQtyMap = {};
                items.forEach(item => {
                    cartQtyMap[item.id] = item.qty;
                });

                document.querySelectorAll('.product-row').forEach(row => {
                    const prodId = parseInt(row.getAttribute('data-product-id'));
                    const qty = cartQtyMap[prodId] || 0;
                    const btnEl = row.querySelector('.btn-add-catalog');

                    let cartBadge = row.querySelector('.product-cart-badge');
                    if (qty > 0) {
                        const formattedQty = (qty % 1 === 0) ? qty : qty.toFixed(3);
                        if (!cartBadge) {
                            row.insertAdjacentHTML('afterbegin', `<span class="badge badge-success position-absolute px-1.5 py-0.5 product-cart-badge font-size-10 text-white font-weight-bold" style="top: 4px; left: 4px; background-color: #22C55E !important; border-radius: 4px; z-index: 5;">Llevas: ${formattedQty}</span>`);
                        } else {
                            cartBadge.textContent = `Llevas: ${formattedQty}`;
                        }
                        if (btnEl) {
                            btnEl.className = 'btn btn-add-mh btn-sm btn-block btn-add-catalog py-1 font-size-11 font-weight-bold';
                            btnEl.innerHTML = `Agregar`;
                        }
                    } else {
                        if (cartBadge) {
                            cartBadge.remove();
                        }
                        if (btnEl) {
                            btnEl.className = 'btn btn-add-mh btn-sm btn-block btn-add-catalog py-1 font-size-11 font-weight-bold';
                            btnEl.innerHTML = `Agregar`;
                        }
                    }
                });

                if (searchInput) searchInput.focus();
            } catch (err) {
                console.error('Error al actualizar UI del carro:', err);
            }
        }

        // 1. Interceptar envío del formulario de agregar al carrito (IndexedDB local)
        document.addEventListener('submit', function(e) {
            if (e.target && e.target.classList.contains('form-add-cart')) {
                e.preventDefault();
                const form = e.target;
                const id = parseInt(form.querySelector('input[name="id"]').value);
                const name = form.querySelector('input[name="name"]').value;
                const price = parseFloat(form.querySelector('input[name="price"]').value);
                
                // Obtener cantidad si viene especificada en el formulario
                const qtyInput = form.querySelector('input[name="qty"]');
                const qtyToAdd = qtyInput ? (parseFloat(qtyInput.value) || 1) : 1;

                // Obtener datos del catálogo si es posible
                const row = form.closest('.product-row');
                let image = '';
                let category = '';
                if (row) {
                    const details = row.querySelector('.btn-show-details');
                    if (details) {
                        image = details.getAttribute('data-image') || '';
                        category = details.getAttribute('data-category') || '';
                    }
                } else if (form.id === 'form-detail-add-cart') {
                    const imgEl = document.getElementById('detail-product-img');
                    if (imgEl) image = imgEl.getAttribute('src') || '';
                    const catEl = document.getElementById('detail-product-category');
                    if (catEl) category = catEl.textContent || '';
                }

                db.cart.get(id).then(existingItem => {
                    let qty = 0;
                    if (form.id === 'form-detail-add-cart') {
                        qty = existingItem ? existingItem.qty + qtyToAdd : qtyToAdd;
                    } else {
                        qty = existingItem ? existingItem.qty + 1 : 1;
                    }
                    
                    db.cart.put({ id, name, price, image, category, qty }).then(() => {
                        updateCartUI();
                        if (form.id === 'form-detail-add-cart') {
                            if (window.jQuery) {
                                $('#productDetailsModal').modal('hide');
                            }
                        }
                    });
                });
            }
        });

        // 2. Interceptar botones + y - y eliminar en el Ticket (IndexedDB local)
        document.addEventListener('click', function(e) {
            const updateBtn = e.target.closest('.ajax-update-btn');
            const deleteBtn = e.target.closest('.ajax-delete-btn');

            if (updateBtn) {
                e.preventDefault();
                const card = updateBtn.closest('.cart-item-card');
                const id = parseInt(card.getAttribute('data-product-id'));
                const qty = parseInt(updateBtn.getAttribute('data-qty'));

                if (qty <= 0) {
                    db.cart.delete(id).then(() => updateCartUI());
                } else {
                    db.cart.update(id, { qty }).then(() => updateCartUI());
                }
            } else if (deleteBtn) {
                e.preventDefault();
                const card = deleteBtn.closest('.cart-item-card');
                const id = parseInt(card.getAttribute('data-product-id'));
                db.cart.delete(id).then(() => updateCartUI());
            }
        });

        // 3. Buscador & Escáner Continuo en Tiempo Real (AJAX & Base de datos)
        if (searchInput) {
            function redrawProductGrid(products) {
                const grid = document.getElementById('product-grid');
                if (!grid) return;
                grid.innerHTML = '';

                if (products.length === 0) {
                    grid.innerHTML = `
                        <div class="col-12 text-center py-4 bg-white w-100">
                            <div class="alert text-white bg-warning mb-0 p-2" role="alert">
                                <div class="iq-alert-text font-size-12">No se encontraron productos en el catálogo.</div>
                            </div>
                        </div>
                    `;
                    return;
                }

                products.forEach(product => {
                    let stockIndicator = '';
                    if (product.product_store <= 0) {
                        stockIndicator = '<span class="text-danger">🔴 Agotado</span>';
                    } else if (product.product_store <= 5) {
                        stockIndicator = `<span class="text-warning">🟡 Poco (${product.product_store})</span>`;
                    } else {
                        stockIndicator = '<span class="text-success">🟢 Disponible</span>';
                    }

                    let badge = '';
                    if (product.in_cart_qty > 0) {
                        badge = `<span class="badge badge-success position-absolute px-1.5 py-0.5 product-cart-badge font-size-10 text-white font-weight-bold" style="top: 4px; left: 4px; background-color: #22C55E !important; border-radius: 4px; z-index: 5;">Llevas: ${product.in_cart_qty}</span>`;
                    }

                    const isCartActive = product.in_cart_qty > 0;
                    const hasImage = product.product_image && !product.product_image.includes('default.webp');
                    const imgUrl = hasImage ? product.product_image : '/assets/images/product/default.webp';
                    const cardStyle = `border-radius: 14px; border: 1px solid var(--mh-border) !important; transition: all 0.2s ease; height: 185px;`;

                    const card = document.createElement('div');
                    card.className = 'product-card bg-white border p-2 d-flex flex-column justify-content-between position-relative product-row';
                    card.setAttribute('data-product-id', product.id);
                    card.setAttribute('data-code', (product.product_code || '').toLowerCase());
                    card.setAttribute('data-stock', product.product_store);
                    card.setAttribute('style', cardStyle);

                    const priceFormatted = `$${new Intl.NumberFormat('es-CL').format(product.selling_price)}`;
                    const imgHtml = `
                        <div class="text-center mb-1 position-relative">
                            <img src="${imgUrl}"
                                 alt="${product.product_name}"
                                 class="rounded"
                                 style="width: 100%; height: 70px; object-fit: cover; border-radius: 8px; pointer-events: none; ${hasImage ? '' : 'opacity: 0.6;'}">
                        </div>
                    `;

                    const stockStr = parseInt(product.product_store) > 0 ? `${product.product_store} uds` : 'Agotado';

                    card.innerHTML = `
                        ${badge}
                        <div class="cursor-pointer btn-show-details w-100 overflow-hidden" 
                             data-toggle="modal" data-target="#productDetailsModal"
                             data-id="${product.id}"
                             data-name="${product.product_name}"
                             data-code="${product.product_code}"
                             data-category="${product.category_name}"
                             data-price="${product.selling_price}"
                             data-stock="${product.product_store}"
                             data-image="${imgUrl}">
                             
                            ${imgHtml}

                            <div class="text-center px-1">
                                <strong class="product-name-str font-size-11 text-dark d-block text-truncate mb-0" style="font-weight: 700; line-height: 1.2;" title="${product.product_name}">
                                    ${product.product_name}
                                </strong>
                                <small class="text-muted font-size-9 d-block">
                                    Stk: ${stockStr}
                                </small>
                            </div>
                        </div>

                        <div>
                            <div class="font-weight-extrabold font-size-13 text-dark mb-1 text-center" style="font-weight: 800; line-height: 1; color: var(--mh-pink) !important;">
                                $${product.formatted_price}
                            </div>
                            
                            <form action="{{ route('pos.addCart') }}" method="POST" class="form-add-cart mb-0">
                                @csrf
                                <input type="hidden" name="id" value="${product.id}">
                                <input type="hidden" name="name" value="${product.product_name}">
                                <input type="hidden" name="price" value="${product.selling_price}">

                                <button type="submit" class="btn btn-add-mh btn-sm btn-block btn-add-catalog py-1 font-size-11 font-weight-bold" style="border-radius: 8px; height: 28px; line-height: 1;">
                                    Agregar
                                </button>
                            </form>
                        </div>
                    `;
                    grid.appendChild(card);
                });
            }

            function triggerAjaxSearch() {
                const query = searchInput.value.trim();
                fetch(`/pos/products/search?search=${encodeURIComponent(query)}&category=${encodeURIComponent(currentCategory)}`, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        redrawProductGrid(data.products);
                    }
                })
                .catch(err => console.error('Error en búsqueda AJAX:', err));
            }

            let searchTimeout;
            searchInput.addEventListener('input', function() {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(triggerAjaxSearch, 250);
            });

            searchInput.focus();

            // Sincronización automática de inventario en tiempo real (segundo plano cada 5 segundos si el buscador está libre)
            setInterval(function() {
                if (searchInput.value.trim() === "") {
                    triggerAjaxSearch();
                }
            }, 5000);
        }



        // --- Lógica de Modal de Pago Interactivo ---
        let shiftExpectedCash = {{ $activeShift ? $activeShift->expected_cash : 0 }};
        let shiftExpectedCard = {{ $activeShift ? $activeShift->expected_card : 0 }};
        let shiftOpeningBalance = {{ $activeShift ? $activeShift->opening_balance : 0 }};

        const getCartTotalValue = () => {
            const el = document.querySelector('.ticket-total-display');
            if (!el) return 0;
            return parseFloat(el.textContent.replace(/[^0-9]/g, '')) || 0;
        };

        const labels = document.querySelectorAll('.payment-option-label');
        const efectivoSection = document.getElementById('modal-efectivo-section');
        const modalMixtoSection = document.getElementById('modal-mixto-section');
        const payInput = document.getElementById('modal-pay-input');
        const changeDisplay = document.getElementById('modal-change-display');
        const mixtoCardInput = document.getElementById('mixto-card-input');
        const mixtoCashInput = document.getElementById('mixto-cash-input');

        labels.forEach(label => {
            label.addEventListener('click', function() {
                labels.forEach(l => {
                    l.classList.remove('active');
                    l.style.borderWidth = '1px';
                    l.style.fontWeight = 'normal';
                });
                this.classList.add('active');
                this.style.borderWidth = '2px';
                this.style.fontWeight = 'bold';

                const val = this.querySelector('input').value;
                if (val === 'HandCash') {
                    if (efectivoSection) efectivoSection.style.display = 'block';
                    if (modalMixtoSection) modalMixtoSection.style.display = 'none';
                    if (payInput) payInput.required = true;
                    if (mixtoCardInput) mixtoCardInput.required = false;
                    if (mixtoCashInput) mixtoCashInput.required = false;
                } else if (val === 'Mixto') {
                    if (efectivoSection) efectivoSection.style.display = 'none';
                    if (modalMixtoSection) modalMixtoSection.style.display = 'block';
                    if (payInput) {
                        payInput.required = false;
                        payInput.value = '';
                    }
                    if (mixtoCardInput) mixtoCardInput.required = true;
                    if (mixtoCashInput) mixtoCashInput.required = true;
                    calculateMixto();
                } else {
                    if (efectivoSection) efectivoSection.style.display = 'none';
                    if (modalMixtoSection) modalMixtoSection.style.display = 'none';
                    if (payInput) {
                        payInput.required = false;
                        payInput.value = '';
                    }
                    if (mixtoCardInput) mixtoCardInput.required = false;
                    if (mixtoCashInput) mixtoCashInput.required = false;
                    if (changeDisplay) changeDisplay.textContent = '$0';
                }
            });
        });

        const calculateChange = () => {
            const total = getCartTotalValue();
            const payVal = parseFloat(payInput.value) || 0;
            const diff = payVal - total;
            if (changeDisplay) {
                if (diff >= 0) {
                    changeDisplay.textContent = '$' + diff.toLocaleString('es-CL');
                    changeDisplay.className = 'font-weight-extrabold text-success mb-0';
                } else {
                    changeDisplay.textContent = 'Monto insuficiente';
                    changeDisplay.className = 'font-weight-bold text-danger mb-0 font-size-18';
                }
            }
        };

        const calculateMixto = () => {
            const total = getCartTotalValue();
            const cardVal = parseFloat(mixtoCardInput.value) || 0;
            const cashVal = parseFloat(mixtoCashInput.value) || 0;
            const totalPaid = cardVal + cashVal;

            const dueBox = document.getElementById('mixto-status-box');
            const dueLabel = document.getElementById('mixto-status-label');
            const dueDisplay = document.getElementById('mixto-status-display');

            if (!dueBox || !dueLabel || !dueDisplay) return;

            if (totalPaid >= total) {
                const missingBeforeCash = Math.max(0, total - cardVal);
                const change = Math.max(0, cashVal - missingBeforeCash);
                
                dueLabel.textContent = 'Vuelto al Cliente (en Efectivo)';
                dueDisplay.textContent = '$' + change.toLocaleString('es-CL');
                dueBox.style.backgroundColor = '#E8F5E9';
                dueBox.style.borderColor = '#C8E6C9';
                dueDisplay.style.color = '#2E7D32';
                dueLabel.style.color = '#2E7D32';
                dueLabel.className = 'text-success font-weight-bold font-size-10 d-block text-uppercase';
                dueDisplay.className = 'font-weight-extrabold text-success mb-0';
            } else {
                const missing = total - totalPaid;
                dueLabel.textContent = 'Falta por Cobrar';
                dueDisplay.textContent = '$' + missing.toLocaleString('es-CL');
                dueBox.style.backgroundColor = '#EFF6FF';
                dueBox.style.borderColor = '#BFDBFE';
                dueDisplay.style.color = '#1D4ED8';
                dueLabel.style.color = '#1D4ED8';
                dueLabel.className = 'text-primary font-weight-bold font-size-10 d-block text-uppercase';
                dueDisplay.className = 'font-weight-extrabold text-primary mb-0';
            }
        };

        if (payInput) payInput.addEventListener('input', calculateChange);
        if (mixtoCardInput) mixtoCardInput.addEventListener('input', calculateMixto);
        if (mixtoCashInput) mixtoCashInput.addEventListener('input', calculateMixto);

        if (window.jQuery) {
            $('#cobrarModal').on('show.bs.modal', function () {
                if (payInput) payInput.value = '';
                if (mixtoCardInput) mixtoCardInput.value = '';
                if (mixtoCashInput) mixtoCashInput.value = '';
                const defaultLabel = document.querySelector('.payment-option-label');
                if (defaultLabel) defaultLabel.click();
            });
        }


        // Interceptar envío de venta y procesar vía AJAX enviando el carro de IndexedDB
        const formStoreOrder = document.getElementById('form-store-order');
        if (formStoreOrder) {
            formStoreOrder.addEventListener('submit', function(e) {
                e.preventDefault();
                const submitBtn = this.querySelector('button[type="submit"]');

                // Validar monto suficiente si es Efectivo o Pago Mixto
                const formData = new FormData(formStoreOrder);
                const payStatus = formData.get('payment_status');
                const saleTotal = getCartTotalValue();
                
                if (payStatus === 'HandCash') {
                    const payVal = parseFloat(document.getElementById('modal-pay-input').value) || 0;
                    if (payVal < saleTotal) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Pago Insuficiente',
                            text: 'El monto recibido en efectivo es menor al total a pagar.',
                            confirmButtonColor: '#FF2B66'
                        });
                        return;
                    }
                } else if (payStatus === 'Mixto') {
                    const cardVal = parseFloat(document.getElementById('mixto-card-input').value) || 0;
                    const cashVal = parseFloat(document.getElementById('mixto-cash-input').value) || 0;
                    if ((cardVal + cashVal) < saleTotal) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Pago Insuficiente',
                            text: 'La suma de Débito y Efectivo es menor al total a pagar.',
                            confirmButtonColor: '#FF2B66'
                        });
                        return;
                    }
                }

                if (submitBtn) {
                    submitBtn.disabled = true;
                    submitBtn.innerHTML = 'PROCESANDO VENTA... <i class="fa-solid fa-spinner fa-spin ml-1"></i>';
                }

                db.cart.toArray().then(items => {
                    if (items.length === 0) {
                        alert('El carro de compras está vacío.');
                        if (submitBtn) {
                            submitBtn.disabled = false;
                            submitBtn.innerHTML = 'CONFIRMAR VENTA <i class="fa-solid fa-check ml-1"></i>';
                        }
                        return;
                    }

                    const formData = new FormData(formStoreOrder);
                    
                    // Enviar los productos en formato cart[index][id], cart[index][qty], etc.
                    items.forEach((item, index) => {
                        formData.append(`cart[${index}][id]`, item.id);
                        formData.append(`cart[${index}][qty]`, item.qty);
                        formData.append(`cart[${index}][price]`, item.price);
                        formData.append(`cart[${index}][name]`, item.name);
                        if (item.is_custom) {
                            formData.append(`cart[${index}][is_custom]`, 1);
                            formData.append(`cart[${index}][custom_name]`, item.name);
                        }
                    });

                    fetch("{{ route('pos.storeOrder') }}", {
                        method: 'POST',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: formData
                    })
                    .then(res => res.json())
                    .then(data => {
                        if (submitBtn) {
                            submitBtn.disabled = false;
                            submitBtn.innerHTML = 'CONFIRMAR VENTA <i class="fa-solid fa-check ml-1"></i>';
                        }

                        if (data.success) {
                            // Actualizar totales de caja del turno localmente
                            const saleTotal = getCartTotalValue();
                            const payStatus = formData.get('payment_status');
                            
                            if (payStatus === 'HandCash') {
                                shiftExpectedCash += saleTotal;
                            } else if (payStatus === 'Tarjeta') {
                                shiftExpectedCard += saleTotal;
                            } else if (payStatus === 'Mixto') {
                                let cardAmt = parseFloat(formData.get('mixto_card_amount')) || 0;
                                let cashAmt = parseFloat(formData.get('mixto_cash_amount')) || 0;
                                const totalPaid = cardAmt + cashAmt;
                                if (totalPaid > saleTotal) {
                                    const change = totalPaid - saleTotal;
                                    cashAmt = Math.max(0, cashAmt - change);
                                }
                                shiftExpectedCard += cardAmt;
                                shiftExpectedCash += cashAmt;
                            }
                            
                            // Actualizar la interfaz del modal de cierre de caja
                            const elCash = document.getElementById('shift-display-cash');
                            const elCard = document.getElementById('shift-display-card');
                            const elTotalExpected = document.getElementById('shift-display-total-expected');
                            
                            if (elCash) elCash.textContent = '$' + shiftExpectedCash.toLocaleString('es-CL');
                            if (elCard) elCard.textContent = '$' + shiftExpectedCard.toLocaleString('es-CL');
                            if (elTotalExpected) elTotalExpected.textContent = '$' + (shiftOpeningBalance + shiftExpectedCash).toLocaleString('es-CL');

                            // 1. Ocultar modal de cobro
                            if (window.jQuery && $('#cobrarModal').length) {
                                $('#cobrarModal').modal('hide');
                            }

                            // 2. Cargar ticket en iframe oculto para impresión nativa rápida (con cache busting)
                            let printFrame = document.getElementById('pos-print-iframe');
                            if (!printFrame) {
                                printFrame = document.createElement('iframe');
                                printFrame.id = 'pos-print-iframe';
                                printFrame.style.display = 'none';
                                document.body.appendChild(printFrame);
                            }
                            printFrame.src = data.print_url + '?t=' + new Date().getTime();

                            // 3. Limpiar IndexedDB local y actualizar interfaz al instante
                            db.cart.clear().then(() => {
                                updateCartUI();
                            });
                            
                            // Resetear formulario de cobro
                            formStoreOrder.reset();
                            if (changeDisplay) changeDisplay.textContent = '$0';
                        } else {
                            alert(data.message || 'No se pudo completar la venta. Por favor intente nuevamente.');
                        }
                    })
                    .catch(err => {
                        console.error('Error al procesar orden:', err);
                        if (submitBtn) {
                            submitBtn.disabled = false;
                            submitBtn.innerHTML = 'CONFIRMAR VENTA <i class="fa-solid fa-check ml-1"></i>';
                        }
                        alert('Error de conexión al procesar la venta.');
                    });
                });
            });
        }

        // --- Lógica del Modal Detalle Producto ---
        document.addEventListener('click', function(e) {
            const btn = e.target.closest('.btn-show-details');
            if (btn) {
                const id = btn.getAttribute('data-id');
                const name = btn.getAttribute('data-name');
                const code = btn.getAttribute('data-code');
                const category = btn.getAttribute('data-category');
                const price = btn.getAttribute('data-price');
                const stock = parseInt(btn.getAttribute('data-stock')) || 0;
                const image = btn.getAttribute('data-image');

                document.getElementById('detail-product-img').src = image;
                document.getElementById('detail-product-name').textContent = name;
                document.getElementById('detail-product-code').textContent = code || 'Sin SKU';
                document.getElementById('detail-product-category').textContent = category || 'Sin categoría';

                // Precio sin decimales
                const priceInt = parseInt(price) || 0;
                const priceDisplay = document.getElementById('detail-price-display');
                if (priceDisplay) priceDisplay.textContent = '$' + priceInt.toLocaleString('es-CL');

                // Cargar datos en el formulario
                document.getElementById('detail-input-id').value = id;
                document.getElementById('detail-input-name').value = name;
                document.getElementById('detail-input-price').value = priceInt;
                document.getElementById('detail-input-qty').value = 1;

                const editablePriceInput = document.getElementById('detail-editable-price-input');
                if (editablePriceInput) {
                    editablePriceInput.value = priceInt;
                }

                // Badge de stock
                const stockBadge = document.getElementById('detail-stock-badge');
                if (stockBadge) {
                    if (stock <= 0) {
                        stockBadge.style.background = '#FFF0F5';
                        stockBadge.style.color = '#FF2B66';
                        stockBadge.style.border = '1px solid #FFE4EC';
                        stockBadge.innerHTML = '🔴 Agotado (0 uds)';
                    } else if (stock <= 5) {
                        stockBadge.style.background = '#FFFBEB';
                        stockBadge.style.color = '#D97706';
                        stockBadge.style.border = '1px solid #FDE68A';
                        stockBadge.innerHTML = `🟡 Poco Stock (${stock} uds)`;
                    } else {
                        stockBadge.style.background = '#F0FDF4';
                        stockBadge.style.color = '#16A34A';
                        stockBadge.style.border = '1px solid #BBF7D0';
                        stockBadge.innerHTML = `🟢 ${stock} uds`;
                    }
                }

                $('#productDetailsModal').modal('show');
            }
        });

        const editablePriceInput = document.getElementById('detail-editable-price-input');
        if (editablePriceInput) {
            editablePriceInput.addEventListener('input', function() {
                document.getElementById('detail-input-price').value = parseInt(this.value) || 0;
            });
        }

        // --- Editar Nombre del Producto en Detalle de POS vía AJAX ---
        $(document).on('click', '#btn-edit-detail-name', function() {
            const prodId = document.getElementById('detail-input-id').value;
            const currentName = document.getElementById('detail-product-name').textContent.trim();
            
            Swal.fire({
                title: 'Modificar Nombre del Producto',
                input: 'text',
                inputValue: currentName,
                showCancelButton: true,
                confirmButtonColor: '#FF2B66',
                cancelButtonColor: '#64748B',
                confirmButtonText: 'Guardar',
                cancelButtonText: 'Cancelar',
                inputValidator: (value) => {
                    if (!value || !value.trim()) {
                        return '¡El nombre no puede estar vacío!';
                    }
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    const newName = result.value.trim();
                    
                    $.ajax({
                        url: `/products/${prodId}/quick-update`,
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            product_name: newName
                        },
                        success: function(response) {
                            if (response.success) {
                                // 1. Actualizar en el modal
                                document.getElementById('detail-product-name').textContent = response.product.name;
                                document.getElementById('detail-input-name').value = response.product.name;
                                
                                // 2. Actualizar en el catálogo de productos visible
                                const card = document.querySelector(`.product-card[data-product-id="${prodId}"]`);
                                if (card) {
                                    const detailsBtn = card.querySelector('.btn-show-details');
                                    if (detailsBtn) {
                                        detailsBtn.setAttribute('data-name', response.product.name);
                                    }
                                    const nameStr = card.querySelector('.product-name-str');
                                    if (nameStr) {
                                        nameStr.textContent = response.product.name;
                                        nameStr.setAttribute('title', response.product.name);
                                    }
                                }
                                
                                Swal.fire({
                                    icon: 'success',
                                    title: '¡Nombre Actualizado!',
                                    text: 'El nombre se ha modificado con éxito.',
                                    timer: 1500,
                                    showConfirmButton: false
                                });
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: response.message || 'No se pudo actualizar el nombre.'
                                });
                            }
                        },
                        error: function(err) {
                            console.error('Error al actualizar nombre:', err);
                            Swal.fire({
                                icon: 'error',
                                title: 'Error de Conexión',
                                text: 'Hubo un problema de conexión al actualizar.'
                            });
                        }
                    });
                }
            });
        });


        // --- Lógica de Ajustes de la Cuenta vía AJAX ---
        const formUpdateProfile = document.getElementById('form-update-profile');
        if (formUpdateProfile) {
            formUpdateProfile.addEventListener('submit', function(e) {
                e.preventDefault();
                const submitBtn = this.querySelector('button[type="submit"]');
                if (submitBtn) {
                    submitBtn.disabled = true;
                    submitBtn.innerHTML = 'Guardando... <i class="fa-solid fa-spinner fa-spin ml-1"></i>';
                }

                fetch(this.action, {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: new FormData(this)
                })
                .then(res => {
                    if (res.ok) {
                        alert('¡Perfil actualizado con éxito!');
                        location.reload();
                    } else {
                        return res.json().then(errors => {
                            let msg = 'Errores de validación:\n';
                            if (errors.errors) {
                                Object.keys(errors.errors).forEach(key => {
                                    msg += `- ${errors.errors[key].join(', ')}\n`;
                                });
                            } else {
                                msg += errors.message || 'Error desconocido';
                            }
                            alert(msg);
                            if (submitBtn) {
                                submitBtn.disabled = false;
                                submitBtn.innerHTML = 'Guardar Cambios <i class="fa-solid fa-save ml-1"></i>';
                            }
                        });
                    }
                })
                .catch(err => {
                    console.error('Error al actualizar perfil:', err);
                    alert('Error al procesar la actualización del perfil.');
                    if (submitBtn) {
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = 'Guardar Cambios <i class="fa-solid fa-save ml-1"></i>';
                    }
                });
            });
        }

        const formUpdatePassword = document.getElementById('form-update-password');
        if (formUpdatePassword) {
            formUpdatePassword.addEventListener('submit', function(e) {
                e.preventDefault();
                const submitBtn = this.querySelector('button[type="submit"]');
                if (submitBtn) {
                    submitBtn.disabled = true;
                    submitBtn.innerHTML = 'Actualizando... <i class="fa-solid fa-spinner fa-spin ml-1"></i>';
                }

                fetch(this.action, {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: new FormData(this)
                })
                .then(res => {
                    if (res.ok) {
                        alert('¡Contraseña actualizada con éxito!');
                        $('#accountSettingsModal').modal('hide');
                        formUpdatePassword.reset();
                        if (submitBtn) {
                            submitBtn.disabled = false;
                            submitBtn.innerHTML = 'Actualizar Contraseña <i class="fa-solid fa-key ml-1"></i>';
                        }
                    } else {
                        return res.json().then(errors => {
                            let msg = 'Errores de validación:\n';
                            if (errors.errors) {
                                Object.keys(errors.errors).forEach(key => {
                                    msg += `- ${errors.errors[key].join(', ')}\n`;
                                });
                            } else {
                                msg += errors.message || 'Error de contraseña incorrecta.';
                            }
                            alert(msg);
                            if (submitBtn) {
                                submitBtn.disabled = false;
                                submitBtn.innerHTML = 'Actualizar Contraseña <i class="fa-solid fa-key ml-1"></i>';
                            }
                        });
                    }
                });
            });
        }

        // --- Lógica de Cierre de Caja vía AJAX ---
        const formCerrarCaja = document.getElementById('form-cerrar-caja');
        if (formCerrarCaja) {
            formCerrarCaja.addEventListener('submit', function(e) {
                e.preventDefault();
                const submitBtn = this.querySelector('button[type="submit"]');
                if (submitBtn) {
                    submitBtn.disabled = true;
                    submitBtn.innerHTML = 'Cerrando Turno... <i class="fa-solid fa-spinner fa-spin ml-1"></i>';
                }

                fetch(this.action, {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: new FormData(this)
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        $('#cerrarCajaModal').modal('hide');
                        
                        // Cargar e imprimir Z-Report en el iframe
                        let printFrame = document.getElementById('pos-print-iframe');
                        if (!printFrame) {
                            printFrame = document.createElement('iframe');
                            printFrame.id = 'pos-print-iframe';
                            printFrame.style.display = 'none';
                            document.body.appendChild(printFrame);
                        }
                        printFrame.src = data.print_url + '?t=' + new Date().getTime();

                        // Esperar un par de segundos para que se mande a imprimir, y recargar la página para bloquear con la apertura
                        setTimeout(function() {
                            window.location.reload();
                        }, 2500);
                    } else {
                        alert(data.message || 'Error al cerrar caja.');
                        if (submitBtn) {
                            submitBtn.disabled = false;
                            submitBtn.innerHTML = 'Confirmar & Cerrar Caja';
                        }
                    }
                })
                .catch(err => {
                    console.error('Error al cerrar caja:', err);
                    alert('Error de red al procesar el cierre de caja.');
                    if (submitBtn) {
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = 'Confirmar & Cerrar Caja';
                    }
                });
            });
        }

        // --- Vaciar ticket con SweetAlert ---
        $('#btn-clear-cart-pos').on('click', function(e) {
            e.preventDefault();
            Swal.fire({
                title: '¿Vaciar el ticket?',
                text: "Se quitarán todos los productos agregados.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#FF2B66',
                cancelButtonColor: '#6C757D',
                confirmButtonText: 'Sí, vaciar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    db.cart.clear().then(() => {
                        updateCartUI();
                        fetch('/pos/empty').then(() => {
                            // Sincronizado
                        });
                    });
                }
            });
        });

        // --- Atajos de Teclado del POS ---
        document.addEventListener('keydown', function(e) {
            // F8 -> Enfocar buscador de productos
            if (e.key === 'F8') {
                e.preventDefault();
                if (searchInput) {
                    searchInput.value = '';
                    searchInput.focus();
                }
                return;
            }

            // F2 o tecla '+' -> Cobrar (si el carrito no está vacío y no estamos en un input)
            const isInputFocused = e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.isContentEditable;
            
            if (e.key === 'F2' || (e.key === '+' && !isInputFocused)) {
                e.preventDefault();
                const cobroBtn = document.querySelector('#btn-cobrar-main');
                if (cobroBtn && !cobroBtn.disabled) {
                    cobroBtn.click();
                }
                return;
            }

            // F9 -> Vaciar carrito (solo si no es input enfocado)
            if (e.key === 'F9' && !isInputFocused) {
                e.preventDefault();
                $('#btn-clear-cart-pos').click();
                return;
            }

            // Atajos dentro del modal de cobro (cuando el modal está abierto)
            if ($('#cobrarModal').is(':visible')) {
                // Teclas rápidas para método de pago (si no está escribiendo en montos)
                if (e.target.id !== 'modal-pay-input' && e.target.id !== 'mixto-card-input' && e.target.id !== 'mixto-cash-input') {
                    if (e.key === '1' || e.key.toLowerCase() === 'c') {
                        e.preventDefault();
                        $('input[name="payment_status"][value="HandCash"]').parent().click();
                        setTimeout(() => $('#modal-pay-input').focus(), 150);
                    } else if (e.key === '2' || e.key.toLowerCase() === 't') {
                        e.preventDefault();
                        $('input[name="payment_status"][value="Tarjeta"]').parent().click();
                    } else if (e.key === '3' || e.key.toLowerCase() === 'm') {
                        e.preventDefault();
                        $('input[name="payment_status"][value="Mixto"]').parent().click();
                        setTimeout(() => $('#mixto-card-input').focus(), 150);
                    }
                }
            }
        });
    });
</script>

{{-- Iframe oculto para impresión fluida en segundo plano --}}
<iframe id="pos-print-iframe" style="display:none; width:0; height:0; border:0;"></iframe>

@endsection

@section('modals')
                    <style>
                        /* Style payment inputs and hide spin buttons */
                        #modal-pay-input, #mixto-card-input, #mixto-cash-input {
                            -moz-appearance: textfield;
                        }
                        #modal-pay-input::-webkit-outer-spin-button,
                        #modal-pay-input::-webkit-inner-spin-button,
                        #mixto-card-input::-webkit-outer-spin-button,
                        #mixto-card-input::-webkit-inner-spin-button,
                        #mixto-cash-input::-webkit-outer-spin-button,
                        #mixto-cash-input::-webkit-inner-spin-button {
                            -webkit-appearance: none;
                            margin: 0;
                        }
                        .mh-pay-box {
                            border: 2px solid #CBD5E1;
                            border-radius: 12px;
                            transition: all 0.2s ease;
                            overflow: hidden;
                        }
                        .mh-pay-box:focus-within {
                            border-color: var(--mh-pink) !important;
                            box-shadow: 0 0 0 3px rgba(255, 43, 102, 0.15);
                        }
                    </style>

                    {{-- Modal de Cobro Moderno Directo --}}
                    <div class="modal fade" id="cobrarModal" tabindex="-1" role="dialog" aria-labelledby="cobrarModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 480px; width: 95%; margin: auto;">
                            <div class="modal-content border-0 shadow-lg" style="border-radius: 20px; overflow: hidden;">
                                <div class="modal-header text-white border-0" style="background-color: var(--mh-pink);">
                                    <h5 class="modal-title font-weight-bold text-white" id="cobrarModalLabel">
                                        <i class="ri-calculator-line mr-2"></i> FINALIZAR VENTA
                                    </h5>
                                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true" class="text-white">&times;</span>
                                    </button>
                                </div>
                                <form id="form-store-order" action="{{ route('pos.storeOrder') }}" method="POST">
                                    @csrf
                                    <div class="modal-body p-3 bg-white text-left" style="text-align: left !important;">
                                        
                                        {{-- Mostrar total gigante --}}
                                        <div class="text-center mb-2 p-2 bg-white border" style="border-radius: 12px;">
                                            <span class="text-muted font-size-10 d-block text-uppercase font-weight-bold">Total a Pagar</span>
                                            <h1 class="font-weight-extrabold ticket-total-display mb-0" style="color: var(--mh-pink); font-size: 30px; font-weight: 800;">${{ number_format((float)Cart::total(), 0, ',', '.') }}</h1>
                                        </div>

                                        {{-- 1. Método de Pago con Tarjetas de Colores --}}
                                        <div class="form-group mb-2">
                                            <label class="font-weight-bold text-dark font-size-12"><i class="ri-credit-card-line mr-1 text-muted"></i> Método de Pago</label>
                                            <div class="row no-gutters text-center" style="gap: 6px; display: grid; grid-template-columns: repeat(3, 1fr);">
                                                <label class="py-2 border rounded-lg cursor-pointer mb-0 payment-option-label active" style="border-radius: 10px; background-color: #E8F5E9; border-color: #2E7D32 !important; color: #2E7D32; font-weight: bold;">
                                                    <input type="radio" name="payment_status" value="HandCash" checked class="d-none">
                                                    <i class="ri-money-dollar-circle-line d-block font-size-18 mb-1"></i>
                                                    <span style="font-size: 11px;">Efectivo</span>
                                                </label>

                                                <label class="py-2 border rounded-lg cursor-pointer mb-0 payment-option-label" style="border-radius: 10px; background-color: #E3F2FD; border-color: #E2E8F0; color: #1565C0;">
                                                    <input type="radio" name="payment_status" value="Tarjeta" class="d-none">
                                                    <i class="ri-bank-card-line d-block font-size-18 mb-1"></i>
                                                    <span style="font-size: 11px;">Débito</span>
                                                </label>

                                                <label class="py-2 border rounded-lg cursor-pointer mb-0 payment-option-label" style="border-radius: 10px; background-color: #F5F3FF; border-color: #E2E8F0; color: #7C3AED;">
                                                    <input type="radio" name="payment_status" value="Mixto" class="d-none">
                                                    <i class="ri-refund-2-line d-block font-size-18 mb-1"></i>
                                                    <span style="font-size: 11px;">Pago Mixto</span>
                                                </label>
                                            </div>
                                        </div>

                                        {{-- 2. Sección de pago en Efectivo --}}
                                        <div id="modal-efectivo-section">
                                            <div class="form-group mb-2">
                                                <label class="font-weight-bold text-dark font-size-12"><i class="ri-coins-line mr-1 text-muted"></i> Paga con (Monto recibido)</label>
                                                <div class="d-flex align-items-center mh-pay-box bg-white">
                                                    <span class="font-weight-bold text-muted px-3 font-size-16">$</span>
                                                    <input type="number" id="modal-pay-input" name="pay" class="form-control border-0 font-weight-bold font-size-18 pl-0" placeholder="Escriba monto..." style="height: 44px; outline: none; box-shadow: none; border-radius: 0;">
                                                </div>
                                            </div>

                                            {{-- Vuelto --}}
                                            <div class="p-2 mb-2 rounded-xl text-center" style="background-color: #E8F5E9; border: 1px solid #C8E6C9; border-radius: 12px;">
                                                <span class="text-success font-weight-bold font-size-10 d-block text-uppercase">Vuelto al Cliente</span>
                                                <h2 id="modal-change-display" class="font-weight-extrabold text-success mb-0" style="font-size: 24px; font-weight: 800;">$0</h2>
                                            </div>
                                        </div>

                                        {{-- 2.1 Sección de Pago Mixto --}}
                                        <div id="modal-mixto-section" style="display: none;">
                                            <div class="row no-gutters mb-2" style="gap: 8px; display: grid; grid-template-columns: 1fr 1fr;">
                                                <div class="form-group mb-0">
                                                    <label class="font-weight-bold text-dark font-size-11 mb-1"><i class="ri-bank-card-line text-muted mr-1"></i> Monto Débito</label>
                                                    <div class="d-flex align-items-center mh-pay-box bg-white">
                                                        <span class="font-weight-bold text-muted px-2 font-size-13">$</span>
                                                        <input type="number" id="mixto-card-input" name="mixto_card_amount" class="form-control border-0 font-weight-bold font-size-15 pl-0" placeholder="0" style="height: 38px; outline: none; box-shadow: none; border-radius: 0;">
                                                    </div>
                                                </div>
                                                <div class="form-group mb-0">
                                                    <label class="font-weight-bold text-dark font-size-11 mb-1"><i class="ri-coins-line text-muted mr-1"></i> Monto Efectivo</label>
                                                    <div class="d-flex align-items-center mh-pay-box bg-white">
                                                        <span class="font-weight-bold text-muted px-2 font-size-13">$</span>
                                                        <input type="number" id="mixto-cash-input" name="mixto_cash_amount" class="form-control border-0 font-weight-bold font-size-15 pl-0" placeholder="0" style="height: 38px; outline: none; box-shadow: none; border-radius: 0;">
                                                    </div>
                                                </div>
                                            </div>

                                            {{-- Estado de pago mixto --}}
                                            <div id="mixto-status-box" class="p-2 mb-2 rounded-xl text-center" style="background-color: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 12px;">
                                                <span id="mixto-status-label" class="text-primary font-weight-bold font-size-10 d-block text-uppercase">Falta por Cobrar</span>
                                                <h2 id="mixto-status-display" class="font-weight-extrabold text-primary mb-0" style="font-size: 24px; font-weight: 800;">$0</h2>
                                            </div>
                                        </div>

                                        {{-- Campo oculto de Cliente General --}}
                                        @php
                                            $generalCustomer = $customers->firstWhere('name', 'Cliente General') ?? $customers->first();
                                        @endphp
                                        <input type="hidden" name="customer_id" value="{{ $generalCustomer->id ?? 1 }}">

                                    </div>
                                    <div class="modal-footer bg-white border-top p-2 d-flex">
                                        <button type="submit" class="btn btn-cobrar-mh btn-block font-weight-bold py-2 col-12" style="border-radius: 10px; font-size: 14px;">CONFIRMAR VENTA <i class="ri-check-line ml-1"></i></button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

    {{-- Modal Cierre de Caja --}}
    @if($activeShift)
    <div class="modal fade" id="cerrarCajaModal" tabindex="-1" role="dialog" aria-labelledby="cerrarCajaModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 460px;">
            <div class="modal-content border-0" style="border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.15);">
                <div class="modal-header border-0 bg-white py-3 px-4 d-flex align-items-center justify-content-between">
                    <h5 class="modal-title font-weight-extrabold text-dark" style="font-size: 15px; font-weight: 800; letter-spacing: -0.3px; text-transform: uppercase;">
                        <i class="ri-calculator-line mr-2" style="color: var(--mh-pink);"></i> Arqueo Ciego de Caja
                    </h5>
                    <button type="button" class="close font-size-26 bg-transparent border-0 p-0 text-muted" data-dismiss="modal" aria-label="Close" style="cursor: pointer; font-weight: 900; line-height: 0.8;">
                        &times;
                    </button>
                </div>

                {{-- PASO 1: Formulario de conteo ciego --}}
                <div id="blind-count-step">
                    <form id="form-cerrar-caja" action="{{ route('pos.closeShift') }}" method="POST">
                        @csrf
                        <div class="modal-body p-4 bg-white text-left">

                            {{-- Resumen del turno (solo operacional, no el efectivo esperado) --}}
                            <div class="mb-3 p-3 rounded-xl border" style="background-color: #F8FAFC; border-radius: 12px;">
                                <small class="text-muted d-block text-uppercase font-weight-bold font-size-10 mb-2">Resumen del Turno</small>
                                <div class="d-flex justify-content-between mb-1">
                                    <small class="text-muted">Apertura de Caja:</small>
                                    <span class="font-weight-bold text-dark font-size-12">${{ number_format($activeShift->opening_balance, 0, ',', '.') }}</span>
                                </div>
                                <div class="d-flex justify-content-between mb-1">
                                    <small class="text-muted">Ventas en Efectivo:</small>
                                    <span id="shift-display-cash" class="font-weight-bold text-success font-size-12">${{ number_format($activeShift->expected_cash, 0, ',', '.') }}</span>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <small class="text-muted">Ventas con Débito/Tarjeta:</small>
                                    <span id="shift-display-card" class="font-weight-bold text-primary font-size-12">${{ number_format($activeShift->expected_card, 0, ',', '.') }}</span>
                                </div>
                            </div>

                            {{-- Aviso de arqueo ciego --}}
                            <div class="alert d-flex align-items-start mb-3 p-3" style="background-color: #FFFBEB; border: 1px solid #FDE68A; border-radius: 12px;">
                                <i class="ri-eye-off-line mr-2 mt-1" style="color: #D97706; font-size: 16px; flex-shrink: 0;"></i>
                                <div>
                                    <strong class="d-block font-size-11 text-uppercase" style="color: #92400E; font-weight: 800;">Arqueo Ciego Activado</strong>
                                    <small class="font-size-11" style="color: #78350F;">Cuenta el dinero en la gaveta sin mirar el monto esperado. El sistema calculará el descuadre al confirmar.</small>
                                </div>
                            </div>

                            {{-- Input del efectivo físico contado --}}
                            <div class="form-group mb-3 text-left">
                                <label class="font-weight-bold font-size-11 text-uppercase text-muted mb-1">Efectivo Físico Contado en Gaveta</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-white border-right-0 font-weight-800" style="border-radius: 10px 0 0 10px; font-weight: 800; border-color: #E2E8F0;">$</span>
                                    </div>
                                    <input type="number" id="actual_cash_count" name="actual_cash" class="form-control border-left-0 font-weight-bold font-size-20" placeholder="0" required min="0" autocomplete="off" style="border-radius: 0 10px 10px 0; height: 52px; color: #1a202c; border-color: #E2E8F0; letter-spacing: -0.5px;">
                                </div>
                            </div>

                            {{-- Input de conciliación de terminal (opcional) --}}
                            <div class="form-group mb-0 text-left">
                                <label class="font-weight-bold font-size-11 text-uppercase text-muted mb-1">
                                    Monto en Terminal de Débito <small class="text-muted font-weight-normal text-lowercase">(opcional)</small>
                                </label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-white border-right-0 font-weight-800" style="border-radius: 10px 0 0 10px; font-weight: 800; border-color: #E2E8F0;">$</span>
                                    </div>
                                    <input type="number" id="actual_card_terminal" name="actual_card_terminal" class="form-control border-left-0 font-weight-bold font-size-14" placeholder="0 (dejar vacío si no aplica)" min="0" autocomplete="off" style="border-radius: 0 10px 10px 0; height: 44px; border-color: #E2E8F0;">
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer border-0 p-3 bg-light d-flex" style="gap: 10px;">
                            <button type="button" class="btn btn-light font-weight-bold flex-fill py-2" data-dismiss="modal" style="border-radius: 12px; height: 42px;">Cancelar</button>
                            <button type="submit" class="btn font-weight-bold flex-fill py-2 text-white" style="background-color: var(--mh-pink); border: none; border-radius: 12px; height: 42px; font-size: 13px;">
                                <i class="ri-check-line mr-1"></i> Cerrar Turno
                            </button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
    @endif



@endsection

@section('specificpagescripts')
<script src="https://cdn.jsdelivr.net/npm/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
@endsection