@extends('layouts.app')

@section('content')
{{-- POS ocupa 100% del viewport independiente del layout --}}
<div id="pos-wrap" style="
    position: fixed;
    inset: 0;
    left: 220px;  /* ancho del sidebar del sistema */
    display: flex;
    flex-direction: column;
    background: #f0eef8;
    z-index: 900;
">
    {{-- TOPBAR POS --}}
    <div style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        border-bottom: 1px solid #e5e7eb;
        padding: 10px 20px;
        flex-shrink: 0;
        box-shadow: 0 2px 8px rgba(45,27,94,0.06);
    ">
        <div style="display:flex;align-items:center;gap:12px;">
            <a href="{{ route('pos.index') }}" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-arrow-left"></i> Volver
            </a>
            <div>
                <div class="fw-bold" style="font-size:1rem;line-height:1.2;color:#1e1b3a;">🍽️ Mesa: {{ $table->name }}</div>
                <div class="text-muted" style="font-size:.75rem;">Zona: {{ $table->area->name }}</div>
            </div>
            @if($order && $mergedTables->count() > 0)
                <span class="badge bg-warning text-dark border px-2 py-1 d-flex align-items-center gap-1" style="font-size:.75rem;">
                    <i class="bi bi-link-45deg"></i> Unidas:
                    @foreach($mergedTables as $mt)
                        {{ $mt->name }}
                        <form action="{{ route('pos.separar', $mt->id) }}" method="POST" onsubmit="return confirmarEnvio(this, '¿Separar {{ $mt->name }} de esta cuenta?', {confirmText:'Sí, separar'})" style="display:inline;">
                            @csrf
                            <button type="submit" class="btn btn-sm p-0 border-0 bg-transparent text-dark" title="Separar {{ $mt->name }}" style="line-height:1;"><i class="bi bi-x-circle"></i></button>
                        </form>{{ !$loop->last ? ',' : '' }}
                    @endforeach
                </span>
            @endif
        </div>
        <div style="display:flex;align-items:center;gap:8px;" id="posTopbarActions">
            @if($order)
                <button type="button" class="btn btn-outline-primary btn-sm fw-bold" data-bs-toggle="modal" data-bs-target="#moveTableModal">
                    <i class="bi bi-arrow-left-right me-1"></i> Mover Mesa
                </button>
                <button type="button" class="btn btn-warning btn-sm fw-bold" data-bs-toggle="modal" data-bs-target="#unirMesasModal">
                    <i class="bi bi-people-fill me-1"></i> Unir Mesas
                </button>
                <form action="{{ route('pos.cancel', $order->id) }}" method="POST" onsubmit="return confirmarEnvio(this, 'Se anulará la orden actual (no se cobrará nada) y la mesa quedará libre. Esta acción no se puede deshacer.', {peligroso:true, confirmText:'Sí, cancelar mesa'})" style="display:inline;">
                    @csrf
                    <button type="submit" class="btn btn-outline-danger btn-sm fw-bold">
                        <i class="bi bi-x-circle me-1"></i> Cancelar Mesa
                    </button>
                </form>
            @endif
            <span class="badge bg-light text-dark border px-2 py-1" style="font-size:.78rem;">
                <i class="bi bi-person-fill me-1"></i> {{ auth()->user()->name }}
            </span>
        </div>
    </div>

    {{-- CUERPO: dos columnas (productos | carrito) --}}
    <div style="display:flex; flex:1; min-height:0; overflow:hidden;" id="pos-body-row">

        {{-- Productos --}}
        <div style="flex:1; min-width:0; background:#f8f7ff; overflow-y:auto; padding:12px 14px 20px;" id="products-container">
            {{-- Barra búsqueda + categorías --}}
            <div style="position:sticky;top:0;background:#f8f7ff;padding-bottom:10px;z-index:10;">
                <div class="input-group input-group-lg shadow-sm mb-3">
                    <span class="input-group-text bg-white border-end-0 text-primary"><i class="bi bi-upc-scan"></i></span>
                    <input type="text" id="barcodeInput" class="form-control border-start-0" placeholder="Escanear código o buscar por nombre..." autofocus autocomplete="off">
                </div>
                {{-- Categorías en pills horizontales --}}
                <div style="display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;">
                    <button onclick="filterProducts('all')" class="category-btn active" id="cat-btn-all"
                        style="white-space:nowrap;border:none;border-radius:30px;padding:8px 18px;font-weight:700;font-size:13px;cursor:pointer;transition:all .2s;background:#1e1b3a;color:#fff;flex-shrink:0;">
                        <i class="bi bi-grid-fill me-1"></i> Todo
                    </button>
                    @foreach($categories as $category)
                        <button onclick="filterProducts('cat-{{ $category->id }}')" class="category-btn" id="cat-btn-{{ $category->id }}"
                            style="white-space:nowrap;border:none;border-radius:30px;padding:8px 18px;font-weight:600;font-size:13px;cursor:pointer;transition:all .2s;background:#e8e5f5;color:#1e1b3a;flex-shrink:0;">
                            <i class="bi bi-tag me-1"></i> {{ $category->name }}
                        </button>
                    @endforeach
                </div>
            </div>

            @php
                // Paleta de colores por categoría (ciclo automático)
                $catPalette = [
                    ['bg'=>'#fff4e6','icon'=>'#ff8c00','border'=>'#ffd08a','iconClass'=>'bi-egg-fried'],
                    ['bg'=>'#f3eeff','icon'=>'#9b5de5','border'=>'#c9a8f5','iconClass'=>'bi-award-fill'],
                    ['bg'=>'#ecfeff','icon'=>'#06b6d4','border'=>'#67e8f9','iconClass'=>'bi-cup-straw'],
                    ['bg'=>'#f0fdf4','icon'=>'#22c55e','border'=>'#86efac','iconClass'=>'bi-cup-hot-fill'],
                    ['bg'=>'#fef2f2','icon'=>'#ef4444','border'=>'#fca5a5','iconClass'=>'bi-fire'],
                    ['bg'=>'#eff6ff','icon'=>'#3b82f6','border'=>'#93c5fd','iconClass'=>'bi-droplet-fill'],
                    ['bg'=>'#fdf4ff','icon'=>'#d946ef','border'=>'#f0abfc','iconClass'=>'bi-flower1'],
                    ['bg'=>'#fff7ed','icon'=>'#f97316','border'=>'#fdba74','iconClass'=>'bi-basket2-fill'],
                ];
                $catColorMap = [];
                $ci = 0;
                foreach($categories as $cat) {
                    $catColorMap[$cat->id] = $catPalette[$ci % count($catPalette)];
                    $ci++;
                }
            @endphp
            <div class="row row-cols-3 row-cols-lg-4 row-cols-xl-5 g-2 pb-5">
                @foreach($categories as $category)
                    @php $pal = $catColorMap[$category->id]; @endphp
                    @foreach($category->products as $product)
                        <div class="col product-item cat-{{ $category->id }}" data-name="{{ \Illuminate\Support\Str::lower($product->name) }}">
                            <div class="pos-product-card" onclick="addToOrder({{ $product->id }})" style="--pal-bg:{{ $pal['bg'] }};--pal-icon:{{ $pal['icon'] }};--pal-border:{{ $pal['border'] }};">

                                {{-- Imagen o bloque de color con ícono --}}
                                <div class="pos-product-img-wrap">
                                    @if($product->image)
                                        <img src="{{ asset('storage/'.$product->image) }}" class="pos-product-img" alt="{{ $product->name }}">
                                    @else
                                        <div class="pos-product-icon-block">
                                            <i class="bi {{ $pal['iconClass'] }} pos-product-icon"></i>
                                        </div>
                                    @endif

                                    {{-- Badge Precio --}}
                                    <div class="pos-price-badge">
                                        S/ {{ number_format($product->price, 2) }}
                                    </div>

                                    {{-- Badge Stock --}}
                                    @if(!is_null($product->stock))
                                        <div class="pos-stock-badge {{ $product->stock <= 5 ? 'pos-stock-low' : 'pos-stock-ok' }}">
                                            <i class="bi bi-box-seam me-1"></i>{{ $product->stock }}
                                        </div>
                                    @endif
                                </div>

                                {{-- Nombre --}}
                                <div class="pos-product-footer">
                                    <div class="pos-product-name">{{ $product->name }}</div>
                                    <div class="pos-product-cat">{{ $category->name }}</div>
                                </div>

                                {{-- Overlay al hover --}}
                                <div class="pos-add-overlay">
                                    <i class="bi bi-plus-circle-fill"></i>
                                    <span>Agregar</span>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @endforeach
            </div>
        </div>

        {{-- CARRITO: columna derecha con ancho fijo (en móvil se convierte en panel deslizable) --}}
        <div id="cart-panel" style="
            width: 340px;
            flex-shrink: 0;
            background: #fff;
            border-left: 1px solid #e5e7eb;
            display: flex;
            flex-direction: column;
            height: 100%;
            box-shadow: -4px 0 20px rgba(45,27,94,0.07);
        ">
            <div style="padding: 14px 16px; background: #1e1b3a; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; display:flex; align-items:center; justify-content:space-between;">
                <h6 class="fw-bold mb-0 text-white"><i class="bi bi-receipt me-1"></i> Cuenta Actual</h6>
                <button type="button" class="btn btn-sm btn-outline-light border-0 d-md-none" onclick="closeCartMobile()"><i class="bi bi-chevron-down fs-5"></i></button>
            </div>
            <div id="cart-container" style="flex: 1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto;">
                @include('pos.partials.cart', ['order' => $order, 'printers' => $printers])
            </div>
        </div>
    </div>
</div>

{{-- Botón flotante "Ver Cuenta" — solo visible en celular --}}
<button type="button" id="mobileCartBtn" onclick="openCartMobile()" class="d-md-none" style="
    position: fixed;
    left: 14px; right: 14px; bottom: 14px;
    z-index: 950;
    background: #ff8c00;
    color: #fff;
    border: none;
    border-radius: 16px;
    padding: 14px 18px;
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0 8px 24px rgba(255,140,0,0.45);
    display: none;
    align-items: center;
    justify-content: space-between;
">
    <span><i class="bi bi-basket3-fill me-2"></i>Ver Cuenta</span>
    <span id="mobileCartTotal">S/ 0.00</span>
</button>

<div id="cartOverlay" onclick="closeCartMobile()" style="display:none; position:fixed; inset:0; background:rgba(20,10,45,0.55); z-index:960;"></div>


<div class="modal fade" id="noteModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header py-2 bg-warning">
                <h6 class="modal-title fw-bold text-dark">Nota Cocina</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="noteDetailId">
                <textarea id="noteText" class="form-control" rows="3"></textarea>
            </div>
            <div class="modal-footer p-1">
                <button type="button" class="btn btn-warning w-100 btn-sm text-dark fw-bold" onclick="saveNote()">Guardar Nota</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="moveTableModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header py-2 bg-info text-white">
                <h6 class="modal-title fw-bold">Mover Mesa</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            @if($order)
                <form action="{{ route('pos.move', $order->id) }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <label class="form-label small text-muted">Destino:</label>
                        <select name="target_table_id" class="form-select" required>
                            <option value="" selected disabled>-- Elegir Mesa --</option>
                            @foreach($freeTables as $ft)
                                <option value="{{ $ft->id }}">{{ $ft->name }} ({{ $ft->area->name }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="modal-footer p-1">
                        <button type="submit" class="btn btn-info w-100 btn-sm text-white fw-bold">Confirmar</button>
                    </div>
                </form>
            @endif
        </div>
    </div>
</div>

<div class="modal fade" id="unirMesasModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header py-2 bg-warning text-dark">
                <h6 class="modal-title fw-bold">Unir Mesas</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            @if($order)
                <form action="{{ route('pos.unir', $order->id) }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <label class="form-label small text-muted">Elige las mesas libres que se unirán a {{ $table->name }} (todo se cobrará junto):</label>
                        @if($freeTables->count() > 0)
                            @foreach($freeTables as $ft)
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="table_ids[]" value="{{ $ft->id }}" id="union-{{ $ft->id }}">
                                    <label class="form-check-label" for="union-{{ $ft->id }}">{{ $ft->name }} ({{ $ft->area->name }})</label>
                                </div>
                            @endforeach
                        @else
                            <p class="text-muted small mb-0">No hay mesas libres disponibles para unir.</p>
                        @endif
                    </div>
                    <div class="modal-footer p-1">
                        <button type="submit" class="btn btn-warning w-100 btn-sm fw-bold" {{ $freeTables->count() === 0 ? 'disabled' : '' }}>Confirmar</button>
                    </div>
                </form>
            @endif
        </div>
    </div>
</div>

<div class="modal fade" id="optionsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-light py-2">
                <h6 class="modal-title fw-bold">Ajustes</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label small fw-bold text-muted">Descuento Global</label>
                    <input type="number" step="0.01" id="inputDiscount" class="form-control" value="{{ $order ? $order->discount : 0 }}" onclick="this.select()">
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-bold text-muted">Propina</label>
                    <input type="number" step="0.01" id="inputTip" class="form-control" value="{{ $order ? $order->tip : 0 }}" onclick="this.select()">
                </div>
            </div>
            <div class="modal-footer p-1">
                <button type="button" class="btn btn-primary w-100 btn-sm fw-bold" onclick="applyOptions()">Aplicar Cambios</button>
            </div>
        </div>
    </div>
</div>

@if($order)
<div class="modal fade" id="checkoutModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <form action="{{ route('pos.checkout', $order->id) }}" method="POST" class="modal-content border-0 shadow-lg">
            @csrf
            <div class="modal-header bg-success text-white py-2">
                <h6 class="modal-title fw-bold">Cobrar Venta</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4">
                <div class="mb-3">
                    <label class="form-label fw-bold small text-muted">CLIENTE</label>
                    <div class="input-group">
                        <span class="input-group-text bg-light"><i class="bi bi-search"></i></span>
                        <input type="text" class="form-control" list="clientsList" id="clientSearchInput" placeholder="Buscar..." oninput="searchClient(this)" autocomplete="off">
                        <button class="btn btn-light border" type="button" onclick="document.getElementById('clientSearchInput').value=''; searchClient({value:''})"><i class="bi bi-x"></i></button>
                    </div>
                    <datalist id="clientsList">
                        @foreach($clients as $client)
                            <option value="{{ $client->name }}" data-id="{{ $client->id }}" data-document="{{ $client->document_number }}"></option>
                        @endforeach
                    </datalist>
                    <input type="hidden" name="client_id" id="clientId">
                    <input type="hidden" name="client_name" id="clientNameHidden">
                    <input type="hidden" name="client_address" id="clientAddressHidden">
                </div>
                <div class="row g-2 mb-2">
                    <div class="col-8">
                        <div class="input-group">
                            <input type="text" name="client_document" id="clientDoc" class="form-control" placeholder="DNI (8) o RUC (11)" oninput="posAutoSearch(this.value)">
                            <button class="btn fw-bold text-white" type="button" onclick="posBuscarDoc()" style="background:#f97316;border-color:#f97316;" title="Buscar en RENIEC/SUNAT">
                                <i class="bi bi-search"></i>
                            </button>
                        </div>
                        <div id="posApiResult" class="small mt-1 d-none"></div>
                    </div>
                    <div class="col-4"><select name="document_type" class="form-select fw-bold"><option value="Ticket">Nota de Venta</option><option value="Boleta">Boleta</option><option value="Factura">Factura</option></select></div>
                </div>
                <div class="mb-3 text-center">
                    <div class="btn-group w-100" role="group">
                        <input type="radio" class="btn-check" name="payment_method" id="payCash" value="cash" checked onclick="toggleCashInput(true)">
                        <label class="btn btn-outline-success fw-bold" for="payCash">Efectivo</label>
                        <input type="radio" class="btn-check" name="payment_method" id="payCard" value="card" onclick="toggleCashInput(false)">
                        <label class="btn btn-outline-primary fw-bold" for="payCard">Tarjeta</label>
                        <input type="radio" class="btn-check" name="payment_method" id="payYape" value="yape" onclick="toggleCashInput(false)">
                        <label class="btn btn-outline-warning fw-bold" for="payYape">Yape</label>
                        <input type="radio" class="btn-check" name="payment_method" id="payPlin" value="plin" onclick="toggleCashInput(false)">
                        <label class="btn btn-outline-info fw-bold" for="payPlin">Plin</label>
                        <input type="radio" class="btn-check" name="payment_method" id="payTransfer" value="transferencia" onclick="toggleCashInput(false)">
                        <label class="btn btn-outline-secondary fw-bold" for="payTransfer">Transf.</label>
                        <input type="radio" class="btn-check" name="payment_method" id="payMixed" value="mixed" onclick="toggleCashInput(false, true)">
                        <label class="btn btn-outline-dark fw-bold" for="payMixed">Mixto</label>
                    </div>
                </div>
                <div id="mixedPaymentBox" class="d-none mb-3 p-2 border rounded-3" style="background:#f8f9fa">
                    <div class="d-flex gap-2 mb-2">
                        <select id="mixMethodSelect" class="form-select form-select-sm">
                            <option value="cash">Efectivo</option>
                            <option value="card">Tarjeta</option>
                            <option value="yape">Yape</option>
                            <option value="plin">Plin</option>
                            <option value="transferencia">Transferencia</option>
                        </select>
                        <input type="number" step="0.01" min="0" id="mixAmountInput" class="form-control form-control-sm" placeholder="Monto" style="max-width:110px">
                        <button type="button" class="btn btn-sm btn-dark fw-bold" onclick="agregarPagoMixto()">+</button>
                    </div>
                    <div id="mixedPaymentList" class="small mb-2"></div>
                    <div class="d-flex justify-content-between fw-bold small">
                        <span>Pagado: <span id="mixedPaidSoFar">0.00</span></span>
                        <span id="mixedRemaining" class="text-danger">Falta: 0.00</span>
                    </div>
                    <div id="mixedInputsContainer"></div>
                </div>
                <div id="cashInputGroup">
                    <div class="mb-3">
                        <label class="form-label fw-bold small">Recibido</label>
                        <input type="number" step="0.01" name="received_amount" id="receivedAmount" class="form-control text-center fw-bold fs-4 text-success" 
                               value="{{ number_format($order->total + ($order->tip ?? 0) - ($order->discount ?? 0), 2, '.', '') }}" 
                               oninput="calculateChange()" onclick="this.select()">
                    </div>
                    <div class="d-flex justify-content-between">
                        <small>Cambio:</small>
                        <h4 class="fw-bold mb-0 text-secondary" id="changeAmount">0.00</h4>
                    </div>
                </div>
                <input type="hidden" id="hiddenTotal" value="{{ number_format($order->total + ($order->tip ?? 0) - ($order->discount ?? 0), 2, '.', '') }}">
            </div>
            <div class="modal-footer p-2 bg-light">
                <button type="submit" class="btn btn-success w-100 btn-lg fw-bold">CONFIRMAR PAGO</button>
            </div>
        </form>
    </div>
</div>
@endif

<script>
    const tableId = {{ $table->id }};
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    // Escáner
    const barcodeInput = document.getElementById('barcodeInput');
    if(barcodeInput) {
        barcodeInput.focus();
        barcodeInput.addEventListener('keypress', function (e) {
            if (e.key === 'Enter') {
                e.preventDefault(); 
                let code = barcodeInput.value.trim();
                if(code.length > 0) addByBarcode(code); 
            }
        });
        // Mientras escribes (sin Enter), filtra los productos visibles por nombre
        barcodeInput.addEventListener('input', function () {
            if (window.applyProductFilter) window.applyProductFilter();
        });
    }

    // AJAX
    window.addByBarcode = function(code) {
        fetch(`{{ url('/pos/order') }}/${tableId}/barcode`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
            body: JSON.stringify({ barcode: code })
        }).then(r => r.text()).then(html => {
            document.getElementById('cart-container').innerHTML = html;
            barcodeInput.value = ''; barcodeInput.focus();
            updateCheckoutTotal();
        });
    };

    window.addToOrder = function(productId) {
        fetch(`{{ url('/pos/order') }}/${tableId}/add`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
            body: JSON.stringify({ product_id: productId })
        }).then(r => r.text()).then(html => {
            document.getElementById('cart-container').innerHTML = html;
            updateCheckoutTotal();
        });
    };

    window.updateQty = function(id, qty) {
        function proceed() {
            fetch(`{{ url('/pos/detail') }}/${id}/update`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
                body: JSON.stringify({ quantity: qty })
            }).then(r => r.text()).then(html => {
                document.getElementById('cart-container').innerHTML = html;
                updateCheckoutTotal();
            });
        }
        if (qty < 1) {
            confirmarAccion('¿Eliminar este producto de la cuenta?', {confirmText:'Sí, eliminar', peligroso:true}).then(ok => { if (ok) proceed(); });
        } else {
            proceed();
        }
    };

    window.removeItem = function(id) {
        fetch(`{{ url('/pos/detail') }}/${id}`, {
            method: 'DELETE',
            headers: { 'X-CSRF-TOKEN': csrfToken }
        }).then(r => r.text()).then(html => {
            document.getElementById('cart-container').innerHTML = html;
            updateCheckoutTotal();
        });
    };

    window.applyOptions = function() {
        var discount = document.getElementById('inputDiscount').value;
        var tip = document.getElementById('inputTip').value;
        var modal = bootstrap.Modal.getInstance(document.getElementById('optionsModal'));
        modal.hide();

        @if(!$order)
        mostrarAlerta('Agrega productos primero antes de aplicar descuento o propina.', 'warning');
        return;
        @endif

        fetch(`{{ url('/pos/order') }}/{{ $order ? $order->id : 0 }}/discount`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
            body: JSON.stringify({ discount: discount, tip: tip })
        }).then(r => r.text()).then(html => {
            document.getElementById('cart-container').innerHTML = html;
            updateCheckoutTotal();
        });
    };

    // Utils
    window.currentCat = 'all';
    window.filterProducts = function(cat) {
        window.currentCat = cat;
        document.querySelectorAll('.category-btn').forEach(btn => btn.classList.remove('active'));
        document.getElementById(cat === 'all' ? 'cat-btn-all' : 'cat-btn-' + cat.replace('cat-', '')).classList.add('active');
        applyProductFilter();
    };

    // Filtro por nombre en vivo (el mismo campo de "Escanear código" también
    // filtra por nombre mientras escribes, sin perder su función de escaneo
    // con lector de código de barras al presionar Enter).
    window.applyProductFilter = function() {
        const search = (document.getElementById('barcodeInput')?.value || '').toLowerCase().trim();
        const cat = window.currentCat || 'all';
        document.querySelectorAll('.product-item').forEach(item => {
            const matchCat  = (cat === 'all' || item.classList.contains(cat));
            const matchName = !search || (item.dataset.name || '').includes(search);
            item.style.display = (matchCat && matchName) ? 'block' : 'none';
        });
    };

    window.updateCheckoutTotal = function() {
        setTimeout(() => {
            var newTotal = document.getElementById('cartTotalValue') ? document.getElementById('cartTotalValue').value : 0;
            var hiddenInput = document.getElementById('hiddenTotal');
            var receivedInput = document.getElementById('receivedAmount');
            if(hiddenInput) hiddenInput.value = newTotal;
            if(receivedInput) receivedInput.value = newTotal;

            // Botón flotante "Ver Cuenta" en móvil
            var mobileBtn = document.getElementById('mobileCartBtn');
            var mobileTotalSpan = document.getElementById('mobileCartTotal');
            if (mobileBtn && mobileTotalSpan) {
                var totalNum = parseFloat(newTotal) || 0;
                mobileTotalSpan.textContent = 'S/ ' + totalNum.toFixed(2);
                mobileBtn.style.display = totalNum > 0 ? 'flex' : 'none';
            }
        }, 500);
    };

    // Botón flotante "Ver Cuenta" en móvil: solo hace scroll hasta la
    // cuenta (que ahora vive normalmente debajo de los productos, sin
    // paneles flotantes que puedan fallar en algunos navegadores).
    window.openCartMobile = function() {
        var panel = document.getElementById('cart-panel');
        if (panel) panel.scrollIntoView({ behavior: 'smooth', block: 'start' });
    };
    window.closeCartMobile = function() {
        var products = document.getElementById('products-container');
        if (products) products.scrollIntoView({ behavior: 'smooth', block: 'start' });
    };
    // Al cargar, si ya hay cuenta abierta, mostramos el botón flotante con el total actual
    updateCheckoutTotal();

    // Modal Notas
    var noteModalEl = document.getElementById('noteModal');
    if(noteModalEl){
        noteModalEl.addEventListener('show.bs.modal', function (event) {
            var button = event.relatedTarget;
            document.getElementById('noteDetailId').value = button.getAttribute('data-detail-id');
            document.getElementById('noteText').value = button.getAttribute('data-note-content') || '';
            setTimeout(() => document.getElementById('noteText').focus(), 500);
        });
    }
    window.saveNote = function() {
        var detailId = document.getElementById('noteDetailId').value;
        var note = document.getElementById('noteText').value;
        var modal = bootstrap.Modal.getInstance(document.getElementById('noteModal'));
        modal.hide();
        fetch(`{{ url('/pos/detail') }}/${detailId}/note`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
            body: JSON.stringify({ note: note })
        }).then(r => r.text()).then(html => document.getElementById('cart-container').innerHTML = html);
    };

    // Cobro
    window.toggleCashInput = function(show, isMixed) {
        document.getElementById('cashInputGroup').style.display = show ? 'block' : 'none';
        var mixBox = document.getElementById('mixedPaymentBox');
        if (mixBox) mixBox.classList.toggle('d-none', !isMixed);
        if (!isMixed) { mixedPayments = []; renderMixedPayments(); }
    }
    window.calculateChange = function() {
        var total = parseFloat(document.getElementById('hiddenTotal').value) || 0;
        var received = parseFloat(document.getElementById('receivedAmount').value) || 0;
        var el = document.getElementById('changeAmount');
        if(el) el.innerText = (received - total).toFixed(2);
    }

    // ── Pago mixto ──────────────────────────────────────────────────────
    var mixedPayments = [];
    var mixLabels = {cash:'Efectivo', card:'Tarjeta', yape:'Yape', plin:'Plin', transferencia:'Transferencia'};

    window.agregarPagoMixto = function() {
        var metodo = document.getElementById('mixMethodSelect').value;
        var monto = parseFloat(document.getElementById('mixAmountInput').value);
        if (!monto || monto <= 0) { alert('Ingresa un monto válido.'); return; }
        mixedPayments.push({method: metodo, amount: monto});
        document.getElementById('mixAmountInput').value = '';
        document.getElementById('mixAmountInput').focus();
        renderMixedPayments();
    }
    window.quitarPagoMixto = function(i) {
        mixedPayments.splice(i, 1);
        renderMixedPayments();
    }
    function renderMixedPayments() {
        var total = parseFloat(document.getElementById('hiddenTotal').value) || 0;
        var lista = document.getElementById('mixedPaymentList');
        var pagado = mixedPayments.reduce(function(s,p){ return s + p.amount; }, 0);
        lista.innerHTML = mixedPayments.map(function(p, i) {
            return '<div class="d-flex justify-content-between align-items-center py-1">' +
                '<span>' + mixLabels[p.method] + ': S/ ' + p.amount.toFixed(2) + '</span>' +
                '<button type="button" class="btn btn-sm btn-link text-danger p-0" onclick="quitarPagoMixto(' + i + ')">✕</button>' +
                '</div>';
        }).join('') || '<div class="text-muted">Sin pagos agregados todavía.</div>';

        document.getElementById('mixedPaidSoFar').innerText = pagado.toFixed(2);
        var faltante = total - pagado;
        var remainingEl = document.getElementById('mixedRemaining');
        if (Math.abs(faltante) < 0.01) {
            remainingEl.className = 'text-success';
            remainingEl.innerText = '✓ Completo';
        } else if (faltante > 0) {
            remainingEl.className = 'text-danger';
            remainingEl.innerText = 'Falta: ' + faltante.toFixed(2);
        } else {
            remainingEl.className = 'text-danger';
            remainingEl.innerText = 'Sobra: ' + Math.abs(faltante).toFixed(2);
        }

        // Reconstruir los inputs ocultos que sí viajan en el formulario
        var cont = document.getElementById('mixedInputsContainer');
        cont.innerHTML = mixedPayments.map(function(p) {
            return '<input type="hidden" name="mix_method[]" value="' + p.method + '">' +
                   '<input type="hidden" name="mix_amount[]" value="' + p.amount + '">';
        }).join('');
    }
    // Si el formulario de este modal se envía en modo Mixto, validamos que cuadre antes de dejarlo pasar.
    (function() {
        var formCobro = document.getElementById('checkoutModal')?.querySelector('form');
        if (!formCobro) return;
        formCobro.addEventListener('submit', function(e) {
            var esMixto = document.getElementById('payMixed')?.checked;
            if (!esMixto) return;
            var total = parseFloat(document.getElementById('hiddenTotal').value) || 0;
            var pagado = mixedPayments.reduce(function(s,p){ return s + p.amount; }, 0);
            if (Math.abs(total - pagado) > 0.01 || mixedPayments.length === 0) {
                e.preventDefault();
                alert('El pago mixto debe sumar exactamente el total a cobrar (S/ ' + total.toFixed(2) + ').');
            }
        });
    })();
    window.searchClient = function(input) {
        var list = document.getElementById('clientsList');
        if(!list || input.value === '') {
            document.getElementById('clientId').value='';
            document.getElementById('clientDoc').value='';
            var hn = document.getElementById('clientNameHidden');
            if(hn) hn.value='';
            return;
        }
        for(var i=0; i<list.options.length; i++) {
            if(list.options[i].value === input.value) {
                document.getElementById('clientId').value = list.options[i].getAttribute('data-id');
                document.getElementById('clientDoc').value = list.options[i].getAttribute('data-document');
                var hn = document.getElementById('clientNameHidden');
                if(hn) hn.value = input.value;
                break;
            }
        }
    }

// ── Búsqueda RENIEC/SUNAT en POS ─────────────────────────────────────────
function posAutoSearch(val) {
    val = val.replace(/\D/g,'');
    document.getElementById('clientDoc').value = val;
    if (val.length === 8 || val.length === 11) posBuscarDoc();
}

function posBuscarDoc() {
    const numero = document.getElementById('clientDoc').value.replace(/\D/g,'');
    const tipo   = numero.length === 11 ? 'RUC' : (numero.length === 8 ? 'DNI' : null);
    const res    = document.getElementById('posApiResult');
    if (!tipo) { res.className='small mt-1 text-danger'; res.textContent='Ingresa 8 dígitos (DNI) o 11 (RUC)'; res.classList.remove('d-none'); return; }
    res.className='small mt-1 text-secondary'; res.textContent='🔍 Consultando...'; res.classList.remove('d-none');
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '{{ route("documento.buscar") }}?tipo='+tipo+'&numero='+numero, true);
    xhr.timeout = 10000;
    xhr.onreadystatechange = function() {
        if (xhr.readyState !== 4) return;
        try {
            const data = JSON.parse(xhr.responseText);
            if (data.error) {
                res.className='small mt-1 text-danger'; res.textContent='❌ '+data.error;
            } else {
                const nombre = (data.nombre+' '+(data.apellido||'')).trim();
                // Llenar nombre en búsqueda y en campo hidden
                const ci = document.getElementById('clientSearchInput');
                if (ci) ci.value = nombre;
                const hn = document.getElementById('clientNameHidden');
                if (hn) hn.value = nombre;
                const ha = document.getElementById('clientAddressHidden');
                if (ha) ha.value = data.direccion || '';
                res.className='small mt-1 text-success fw-bold'; res.textContent='✔ '+nombre;
                // Cambiar tipo comprobante si es RUC
                const sel = document.querySelector('select[name="document_type"]');
                if (sel && tipo==='RUC') sel.value='Factura';
            }
        } catch(e) { res.className='small mt-1 text-danger'; res.textContent='❌ Error de respuesta'; }
    };
    xhr.ontimeout = function() { res.className='small mt-1 text-danger'; res.textContent='⏱ Sin respuesta. Verifica token.'; };
    xhr.send();
}

function sendCajaAutoSearch(val) {
    val = val.replace(/[^0-9]/g,'');
    document.getElementById('sendCajaDoc').value = val;
    if (val.length === 8 || val.length === 11) sendCajaBuscar();
}

function sendCajaBuscar() {
    const numero = document.getElementById('sendCajaDoc').value.replace(/[^0-9]/g,'');
    const tipo   = numero.length === 11 ? 'RUC' : (numero.length === 8 ? 'DNI' : null);
    const res    = document.getElementById('sendCajaResult');
    if (!tipo) { res.className='small mt-1 text-danger'; res.textContent='Ingresa 8 dígitos (DNI) o 11 (RUC)'; return; }
    res.className='small mt-1 text-secondary'; res.textContent='🔍 Consultando...';
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '{{ route("documento.buscar") }}?tipo='+tipo+'&numero='+numero, true);
    xhr.timeout = 10000;
    xhr.onreadystatechange = function() {
        if (xhr.readyState !== 4) return;
        try {
            const data = JSON.parse(xhr.responseText);
            if (data.error) {
                res.className='small mt-1 text-danger'; res.textContent='❌ '+data.error;
            } else {
                const nombre = (data.nombre+' '+(data.apellido||'')).trim();
                document.getElementById('sendCajaName').value = nombre;
                res.className='small mt-1 text-success fw-bold'; res.textContent='✔ '+nombre;
                if (tipo === 'RUC') document.getElementById('sendCajaDocType').value = 'Factura';
            }
        } catch(e) {
            res.className='small mt-1 text-danger';
            res.textContent = xhr.status === 403 ? '❌ Sin permiso para buscar' : '❌ Error de respuesta';
        }
    };
    xhr.ontimeout = function() { res.className='small mt-1 text-danger'; res.textContent='⏱ Sin respuesta.'; };
    xhr.send();
}


function abrirModalCobro() { window.abrirCheckout(); }

window.abrirCheckout = function() {
    var m = document.getElementById('checkoutModal');
    if (m) {
        var modal = bootstrap.Modal.getOrCreateInstance(m);
        modal.show();
    }
};

// Delegación de eventos: captura clicks en #btnCobrarPos aunque sea dinámico
document.addEventListener('click', function(e) {
    if (e.target && (e.target.id === 'btnCobrarPos' || e.target.closest('#btnCobrarPos'))) {
        e.preventDefault();
        window.abrirCheckout();
    }
});

</script>

<style>
    /* ── POS Product Cards ─────────────────────────────────────── */
    .pos-product-card {
        position: relative;
        border-radius: 16px;
        border: 2px solid var(--pal-border);
        background: #fff;
        cursor: pointer;
        overflow: hidden;
        transition: transform .18s, box-shadow .18s, border-color .18s;
        box-shadow: 0 2px 10px rgba(0,0,0,0.06);
        height: 100%;
        display: flex;
        flex-direction: column;
        user-select: none;
    }
    .pos-product-card:hover {
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 10px 28px rgba(0,0,0,0.14);
        border-color: var(--pal-icon);
    }
    .pos-product-card:active {
        transform: scale(0.97);
        box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    }

    /* Image / icon block */
    .pos-product-img-wrap {
        position: relative;
        width: 100%;
        height: 90px;
        flex-shrink: 0;
    }
    .pos-product-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .pos-product-icon-block {
        width: 100%;
        height: 100%;
        background: var(--pal-bg);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .pos-product-icon {
        font-size: 2rem;
        color: var(--pal-icon);
        opacity: .9;
    }

    /* Price badge */
    .pos-price-badge {
        position: absolute;
        top: 6px;
        right: 6px;
        background: var(--pal-icon);
        color: #fff;
        font-size: .60rem;
        font-weight: 700;
        padding: 1px 6px;
        border-radius: 20px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        letter-spacing: .01em;
    }

    /* Stock badge */
    .pos-stock-badge {
        position: absolute;
        bottom: 8px;
        left: 8px;
        font-size: .67rem;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 20px;
        border: 2px solid #fff;
        box-shadow: 0 1px 6px rgba(0,0,0,0.15);
    }
    .pos-stock-ok  { background: #22c55e; color: #fff; }
    .pos-stock-low { background: #ef4444; color: #fff; animation: pulse-red 1.2s infinite; }
    @keyframes pulse-red {
        0%,100% { opacity: 1; } 50% { opacity: .65; }
    }
    .category-btn.active {
        background: #f97316 !important;
        color: #fff !important;
    }
    .category-btn:hover:not(.active) {
        background: #d5d0ee !important;
    }

    /* Footer */
    .pos-product-footer {
        padding: 5px 8px 7px;
        text-align: center;
        border-top: 1.5px solid var(--pal-border);
        background: var(--pal-bg);
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .pos-product-name {
        font-size: .78rem;
        font-weight: 800;
        color: #1e1b3a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
    }
    .pos-product-cat {
        font-size: .60rem;
        color: var(--pal-icon);
        font-weight: 600;
        margin-top: 2px;
        opacity: .8;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Hover overlay */
    .pos-add-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.38);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        opacity: 0;
        transition: opacity .18s;
        color: #fff;
        pointer-events: none;
        border-radius: 14px;
    }
    .pos-add-overlay i { font-size: 2rem; }
    .pos-add-overlay span { font-size: .8rem; font-weight: 700; letter-spacing: .06em; }
    .pos-product-card:hover .pos-add-overlay { opacity: 1; }

    /* ══════════════════════════════════════════════════════════
       RESPONSIVE MÓVIL — POS / Mesas
       ══════════════════════════════════════════════════════════ */
    @media (max-width: 767px) {
        #pos-wrap { left: 0 !important; }

        /* Grid de productos: 2 columnas, más cómodo para el dedo */
        #products-container .row-cols-3 > * { flex: 0 0 50% !important; max-width: 50% !important; }
        .pos-product-img-wrap { height: 74px; }
        .pos-product-name { font-size: .72rem; }

        /* La cuenta ya no flota encima de todo: va simplemente debajo de
           los productos, en la misma página con scroll normal. Esto evita
           los problemas de capas/altura que dan los paneles fijos en
           navegadores móviles (igual que en POS Rápido, que sí funciona bien). */
        #pos-body-row {
            flex-direction: column;
            overflow-y: auto !important;
            overflow-x: hidden;
        }
        #products-container { overflow-y: visible !important; padding-bottom: 90px !important; }
        #cart-panel {
            width: 100% !important;
            flex-shrink: 0;
            border-left: none !important;
            border-top: 4px solid #ff8c00;
            padding-bottom: 84px; /* que el botón flotante "Ver Cuenta" no tape el último botón */
        }
        #cart-panel .btn-sm.d-md-none { display: none !important; } /* la flechita de cerrar ya no aplica */

        /* Topbar: que quepan los botones sin desbordar */
        #pos-wrap > div:first-child { flex-wrap: wrap; row-gap: 8px; }
        #posTopbarActions {
            flex-wrap: wrap !important;
            width: 100%;
            gap: 6px !important;
        }
        #posTopbarActions .btn,
        #posTopbarActions form { flex: 1 1 auto; }
        #posTopbarActions .btn {
            font-size: .72rem;
            padding: 7px 8px;
            white-space: nowrap;
        }
        #posTopbarActions form .btn { width: 100%; }
        #posTopbarActions .badge { flex-basis: 100%; order: 99; text-align: center; margin-top: 2px; }
    }
</style>
@endsection