@extends('layouts.app')

@section('title', 'POS Rápido')

@section('content')
<style>
    /* Ocultar topbar solo en POS Rápido */
    .top-navbar { display: none !important; }
    .main-content { padding-top: 0 !important; }

    .product-card {
        cursor: pointer;
        transition: transform .15s, box-shadow .15s;
        border-radius: 12px;
        border: 2px solid transparent;
        user-select: none;
    }
    .product-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
    .product-card.selected { border-color: #f97316; box-shadow: 0 0 0 3px rgba(249,115,22,.2); }
    .price-badge { background: #f97316; color: #fff; font-size: 11px; font-weight: 700; border-radius: 20px; padding: 2px 8px; }
    .cart-item { border-bottom: 1px solid #f0f0f0; }
    .cart-item:last-child { border-bottom: none; }
    .qty-btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #dee2e6; background: #f8f9fa; font-weight: bold; font-size: 14px; line-height: 1; cursor: pointer; }
    .qty-btn:hover { background: #f97316; color: #fff; border-color: #f97316; }
    #cartPanel { position: sticky; top: 80px; }
    .cat-btn.active { background: #f97316 !important; color: #fff !important; border-color: #f97316 !important; }
    .method-btn { border-radius: 8px; padding: 6px 14px; font-size: 13px; font-weight: 600; border: 2px solid #dee2e6; background: #fff; cursor: pointer; transition: all .15s; }
    .method-btn.active { background: #f97316; color: #fff; border-color: #f97316; }
</style>

<div class="container-fluid py-3 px-3">
<div class="row g-3">

    {{-- COLUMNA IZQUIERDA: PRODUCTOS --}}
    <div class="col-lg-8">
        <div class="d-flex align-items-center gap-2 mb-3">
            <h5 class="fw-bold mb-0"><i class="bi bi-lightning-charge-fill text-warning"></i> POS Rápido</h5>

        </div>

        @if($pendingOrders->count() > 0)
            <div class="card border-0 shadow-sm mb-3" style="border-left:4px solid #f97316 !important;">
                <div class="card-header bg-white fw-bold d-flex align-items-center justify-content-between py-2">
                    <span><i class="bi bi-hourglass-split text-warning me-1"></i> Pendientes de Caja ({{ $pendingOrders->count() }})</span>
                </div>
                <div class="card-body p-2">
                    @foreach($pendingOrders as $po)
                        <div class="d-flex align-items-center justify-content-between border rounded-3 p-2 mb-2">
                            <div>
                                <div class="fw-bold small">#{{ $po->id }} — {{ $po->user->name ?? 'Mozo' }}</div>
                                <div class="text-muted" style="font-size:.72rem;">
                                    {{ $po->details->count() }} producto(s) · {{ $po->created_at->diffForHumans() }}
                                </div>
                            </div>
                            <div class="d-flex align-items-center gap-2">
                                <span class="fw-bold text-primary">S/ {{ number_format($po->total, 2) }}</span>
                                @if($po->details->count() > 0)
                                    <a href="{{ route('pos.split.content', $po->id) }}" class="btn btn-success btn-sm fw-bold">
                                        <i class="bi bi-cash-coin"></i> Cobrar
                                    </a>
                                @endif
                                <form action="{{ route('pos.cancel', $po->id) }}" method="POST" onsubmit="return confirmarEnvio(this, '¿Cancelar este pedido pendiente? Esta acción no se puede deshacer.', {peligroso:true, confirmText:'Sí, cancelar'})" style="display:inline;">
                                    @csrf
                                    <button type="submit" class="btn btn-outline-danger btn-sm" title="Cancelar">
                                        <i class="bi bi-x-lg"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif

        {{-- Buscador --}}
        <div class="input-group mb-3">
            <span class="input-group-text bg-white"><i class="bi bi-search text-muted"></i></span>
            <input type="text" id="searchProduct" class="form-control border-start-0" placeholder="Buscar producto..." oninput="filterProducts()">
        </div>

        {{-- Categorías --}}
        <div class="d-flex gap-2 flex-wrap mb-3" id="catButtons">
            <button class="btn btn-sm btn-outline-secondary cat-btn active" onclick="filterCat(0, this)">Todos</button>
            @foreach($categories as $cat)
            <button class="btn btn-sm btn-outline-secondary cat-btn" onclick="filterCat({{ $cat->id }}, this)">{{ $cat->name }}</button>
            @endforeach
        </div>

        {{-- Grid de productos --}}
        <div class="row g-2" id="productsGrid">
            @foreach($products as $p)
            <div class="col-6 col-sm-4 col-md-3 product-item" data-cat="{{ $p->category_id }}" data-name="{{ strtolower($p->name) }}">
                <div class="product-card card h-100 p-2 text-center" data-product-id="{{ $p->id }}" onclick="addToCart({{ $p->id }}, '{{ addslashes($p->name) }}', {{ $p->price }})">
                    <div class="mb-1">
                        @if($p->image)
                        <img src="{{ asset('storage/'.$p->image) }}" class="rounded" style="width:50px;height:50px;object-fit:cover;">
                        @else
                        <div style="width:50px;height:50px;background:#f3f4f6;border-radius:8px;display:flex;align-items:center;justify-content:center;margin:0 auto;">
                            <i class="bi bi-cup-hot text-muted" style="font-size:20px;"></i>
                        </div>
                        @endif
                    </div>
                    <div class="fw-semibold" style="font-size:12px;line-height:1.2;">{{ $p->name }}</div>
                    <div class="mt-1"><span class="price-badge">S/ {{ number_format($p->price,2) }}</span></div>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    {{-- COLUMNA DERECHA: CARRITO --}}
    <div class="col-lg-4">
        <div id="cartPanel" class="card border-0 shadow-sm" style="border-radius:16px;">
            <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center" style="border-radius:14px 14px 0 0;">
                <span class="fw-bold"><i class="bi bi-cart3"></i> Cuenta</span>
                <button class="btn btn-sm btn-outline-light" onclick="clearCart()"><i class="bi bi-trash3"></i></button>
            </div>

            <div class="card-body p-0">
                {{-- Items del carrito --}}
                <div id="cartItems" style="max-height:220px;overflow-y:auto;padding:8px 12px;">
                    <p class="text-muted text-center small py-3 mb-0" id="emptyMsg">Agrega productos</p>
                </div>

                <div class="px-3 pb-2 border-top">
                    <div class="d-flex justify-content-between align-items-center py-2">
                        <span class="fw-bold">TOTAL</span>
                        <span class="fw-bold fs-4 text-primary" id="cartTotal">S/ 0.00</span>
                    </div>
                </div>

                {{-- Comprobante + DNI --}}
                <div class="px-3 pb-2">
                    <div class="row g-2">
                        <div class="col-6">
                            <label class="form-label small fw-bold mb-1">Comprobante</label>
                            <select id="docType" class="form-select form-select-sm" onchange="onDocTypeChange()">
                                <option value="Ticket">🎫 Nota de Venta</option>
                                <option value="Boleta">📄 Boleta</option>
                                <option value="Factura">🧾 Factura</option>
                            </select>
                        </div>
                        <div class="col-6">
                            <label class="form-label small fw-bold mb-1">DNI / RUC</label>
                            <div class="input-group input-group-sm">
                                <input type="text" id="docNumber" class="form-control" placeholder="Opcional" maxlength="11" oninput="quickAutoSearch(this.value)">
                                <button class="btn btn-warning btn-sm" type="button" onclick="quickBuscar()"><i class="bi bi-search"></i></button>
                            </div>
                        </div>
                    </div>
                    <div id="quickApiResult" class="small mt-1 d-none"></div>
                    <input type="hidden" id="clientNameHidden">
                </div>

                {{-- Efectivo recibido --}}
                <div class="px-3 pb-2" id="cashRow">
                    <label class="form-label small fw-bold mb-1">Efectivo recibido</label>
                    <input type="number" id="receivedAmount" class="form-control form-control-sm text-center fw-bold text-success" placeholder="0.00" step="0.50" oninput="calcChange()">
                    <div class="d-flex justify-content-between small mt-1">
                        <span class="text-muted">Cambio:</span>
                        <span class="fw-bold text-success" id="changeDisplay">S/ 0.00</span>
                    </div>
                </div>

                {{-- Método de pago --}}
                <div class="px-3 pb-2">
                    <label class="form-label small fw-bold mb-1">Método de pago</label>
                    <div class="d-flex flex-wrap gap-1" id="methodBtns">
                        <button class="method-btn active" onclick="selectMethod('cash',this)">Efectivo</button>
                        <button class="method-btn" onclick="selectMethod('card',this)">Tarjeta</button>
                        <button class="method-btn" onclick="selectMethod('yape',this)">Yape</button>
                        <button class="method-btn" onclick="selectMethod('plin',this)">Plin</button>
                        <button class="method-btn" onclick="selectMethod('transferencia',this)">Transf.</button>
                        <button class="method-btn" onclick="selectMethod('mixed',this)">Mixto</button>
                    </div>
                </div>
                <div id="quickMixedBox" class="px-3 pb-2 d-none">
                    <div class="d-flex gap-1 mb-2">
                        <select id="quickMixMethodSelect" 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="quickMixAmountInput" class="form-control form-control-sm" placeholder="Monto" style="max-width:100px">
                        <button type="button" class="btn btn-sm btn-dark fw-bold" onclick="agregarPagoMixtoQuick()">+</button>
                    </div>
                    <div id="quickMixedList" class="small mb-1"></div>
                    <div class="d-flex justify-content-between fw-bold small">
                        <span>Pagado: <span id="quickMixedPaidSoFar">0.00</span></span>
                        <span id="quickMixedRemaining" class="text-danger">Falta: 0.00</span>
                    </div>
                    <div id="quickMixedInputsContainer"></div>
                </div>

                {{-- Botón cobrar --}}
                <div class="px-3 pb-3">
                    <button class="btn btn-success w-100 fw-bold py-2" onclick="procesarVenta()" id="btnCobrar">
                        <i class="bi bi-cash-coin me-1"></i> COBRAR
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

{{-- Botón flotante "Ver Cuenta" — solo visible en celular --}}
<button type="button" id="mobileQuickCartBtn" onclick="scrollToQuickCart()" class="d-lg-none" style="
    position: fixed;
    left: 14px; right: 14px; bottom: 14px;
    z-index: 950;
    background: #f97316;
    color: #fff;
    border: none;
    border-radius: 16px;
    padding: 14px 18px;
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0 8px 24px rgba(249,115,22,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="mobileQuickCartTotal">S/ 0.00</span>
</button>

<style>
    @keyframes pulseOnce { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } }
    .pulse-once { animation: pulseOnce .3s ease; }
    @media (max-width: 991px) {
        .main-content { padding-bottom: 90px !important; }
    }
</style>

{{-- Form para submit --}}
<form id="quickForm" action="{{ route('quickpos.checkout') }}" method="POST">
    @csrf
    <input type="hidden" name="items" id="formItems">
    <input type="hidden" name="payment_method" id="formMethod" value="cash">
    <input type="hidden" name="received_amount" id="formReceived">
    <input type="hidden" name="document_type" id="formDocType" value="Ticket">
    <input type="hidden" name="client_document" id="formClientDoc">
    <input type="hidden" name="client_name" id="formClientName">
    <input type="hidden" name="client_address" id="formClientAddress">
</form>

<script>
let cart = {};
let selectedMethod = 'cash';

function addToCart(id, name, price) {
    if (cart[id]) {
        cart[id].qty++;
    } else {
        cart[id] = { id, name, price, qty: 1 };
    }
    renderCart();
    flashAdded(id);
}

function flashAdded(id) {
    // Feedback visual inmediato al tocar un producto (importante en móvil,
    // donde el carrito puede quedar fuera de la vista al agregarlo).
    var card = document.querySelector('.product-card[data-product-id="' + id + '"]');
    if (card) {
        card.classList.add('selected');
        setTimeout(() => card.classList.remove('selected'), 350);
    }
    var mobileBtn = document.getElementById('mobileQuickCartBtn');
    if (mobileBtn) {
        mobileBtn.classList.add('pulse-once');
        setTimeout(() => mobileBtn.classList.remove('pulse-once'), 350);
    }
}

function renderCart() {
    const container = document.getElementById('cartItems');
    const emptyMsg  = document.getElementById('emptyMsg');
    const keys = Object.keys(cart);

    if (keys.length === 0) {
        container.innerHTML = '<p class="text-muted text-center small py-3 mb-0">Agrega productos</p>';
        document.getElementById('cartTotal').textContent = 'S/ 0.00';
        updateMobileQuickCartBtn(0, 0);
        return;
    }

    let html = '';
    let total = 0;
    keys.forEach(id => {
        const item = cart[id];
        const sub = item.price * item.qty;
        total += sub;
        html += `<div class="cart-item py-2 d-flex align-items-center gap-2">
            <div class="flex-grow-1">
                <div class="fw-semibold" style="font-size:13px;">${item.name}</div>
                <div class="text-muted" style="font-size:11px;">S/ ${item.price.toFixed(2)} c/u</div>
            </div>
            <div class="d-flex align-items-center gap-1">
                <button class="qty-btn" onclick="changeQty(${id},-1)">−</button>
                <span class="fw-bold" style="min-width:20px;text-align:center;">${item.qty}</span>
                <button class="qty-btn" onclick="changeQty(${id},1)">+</button>
            </div>
            <div class="fw-bold text-end" style="min-width:50px;font-size:13px;">S/ ${sub.toFixed(2)}</div>
            <button class="btn btn-sm btn-outline-danger border-0 p-1" title="Eliminar producto" onclick="removeItem(${id})"><i class="bi bi-x-circle"></i></button>
        </div>`;
    });

    container.innerHTML = html;
    document.getElementById('cartTotal').textContent = 'S/ ' + total.toFixed(2);
    updateMobileQuickCartBtn(keys.length, total);
    calcChange();
}

function updateMobileQuickCartBtn(itemCount, total) {
    var btn = document.getElementById('mobileQuickCartBtn');
    if (!btn) return;
    if (itemCount > 0) {
        btn.style.display = 'flex';
        document.getElementById('mobileQuickCartTotal').textContent = 'S/ ' + total.toFixed(2);
    } else {
        btn.style.display = 'none';
    }
}

function scrollToQuickCart() {
    var panel = document.getElementById('cartPanel');
    if (panel) panel.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

function changeQty(id, delta) {
    if (!cart[id]) return;
    cart[id].qty += delta;
    if (cart[id].qty <= 0) delete cart[id];
    renderCart();
}

function removeItem(id) {
    delete cart[id];
    renderCart();
}

function clearCart() {
    cart = {};
    renderCart();
}

function selectMethod(method, btn) {
    selectedMethod = method;
    document.querySelectorAll('.method-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    document.getElementById('cashRow').style.display = method === 'cash' ? '' : 'none';
    document.getElementById('quickMixedBox').classList.toggle('d-none', method !== 'mixed');
    if (method !== 'mixed') { quickMixedPayments = []; renderQuickMixedPayments(); }
}

// ── Pago mixto (POS Rápido) ──────────────────────────────────────────
var quickMixedPayments = [];
var quickMixLabels = {cash:'Efectivo', card:'Tarjeta', yape:'Yape', plin:'Plin', transferencia:'Transferencia'};

function agregarPagoMixtoQuick() {
    var metodo = document.getElementById('quickMixMethodSelect').value;
    var monto = parseFloat(document.getElementById('quickMixAmountInput').value);
    if (!monto || monto <= 0) { mostrarAlerta('Ingresa un monto válido.', 'warning'); return; }
    quickMixedPayments.push({method: metodo, amount: monto});
    document.getElementById('quickMixAmountInput').value = '';
    renderQuickMixedPayments();
}
function quitarPagoMixtoQuick(i) {
    quickMixedPayments.splice(i, 1);
    renderQuickMixedPayments();
}
function renderQuickMixedPayments() {
    var total = Object.values(cart).reduce((s,i) => s + i.price * i.qty, 0);
    var lista = document.getElementById('quickMixedList');
    var pagado = quickMixedPayments.reduce(function(s,p){ return s + p.amount; }, 0);
    lista.innerHTML = quickMixedPayments.map(function(p, i) {
        return '<div class="d-flex justify-content-between align-items-center py-1">' +
            '<span>' + quickMixLabels[p.method] + ': S/ ' + p.amount.toFixed(2) + '</span>' +
            '<button type="button" class="btn btn-sm btn-link text-danger p-0" onclick="quitarPagoMixtoQuick(' + i + ')">✕</button>' +
            '</div>';
    }).join('') || '<div class="text-muted">Sin pagos agregados todavía.</div>';

    document.getElementById('quickMixedPaidSoFar').innerText = pagado.toFixed(2);
    var faltante = total - pagado;
    var remainingEl = document.getElementById('quickMixedRemaining');
    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);
    }

    var cont = document.getElementById('quickMixedInputsContainer');
    cont.innerHTML = quickMixedPayments.map(function(p) {
        return '<input type="hidden" name="mix_method[]" value="' + p.method + '">' +
               '<input type="hidden" name="mix_amount[]" value="' + p.amount + '">';
    }).join('');
}

function calcChange() {
    const total = Object.values(cart).reduce((s,i) => s + i.price * i.qty, 0);
    const received = parseFloat(document.getElementById('receivedAmount').value) || 0;
    const change = Math.max(0, received - total);
    document.getElementById('changeDisplay').textContent = 'S/ ' + change.toFixed(2);
}

function onDocTypeChange() {
    const doc = document.getElementById('docType').value;
    const row = document.getElementById('docNumber').closest('.col-6');
    // Si es ticket, el DNI es opcional; si es boleta/factura sugerimos ingresarlo
    document.getElementById('docNumber').placeholder = doc === 'Ticket' ? 'Opcional' : (doc === 'Factura' ? 'RUC (11 dígitos)' : 'DNI (8 dígitos)');
}

function filterCat(catId, btn) {
    document.querySelectorAll('.cat-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    document.querySelectorAll('.product-item').forEach(el => {
        const match = catId === 0 || parseInt(el.dataset.cat) === catId;
        const search = document.getElementById('searchProduct').value.toLowerCase();
        el.style.display = (match && el.dataset.name.includes(search)) ? '' : 'none';
    });
}

function filterProducts() {
    const search = document.getElementById('searchProduct').value.toLowerCase();
    const activeCat = document.querySelector('.cat-btn.active');
    const catId = activeCat ? parseInt(activeCat.dataset.cat || 0) : 0;
    document.querySelectorAll('.product-item').forEach(el => {
        const matchCat  = !catId || parseInt(el.dataset.cat) === catId;
        const matchName = el.dataset.name.includes(search);
        el.style.display = (matchCat && matchName) ? '' : 'none';
    });
}

// Búsqueda RENIEC/SUNAT
function quickAutoSearch(val) {
    val = val.replace(/[^0-9]/g,'');
    document.getElementById('docNumber').value = val;
    if (val.length === 8) { document.getElementById('docType').value = 'Boleta'; quickBuscar(); }
    if (val.length === 11) { document.getElementById('docType').value = 'Factura'; quickBuscar(); }
}

function quickBuscar() {
    const numero = document.getElementById('docNumber').value.replace(/[^0-9]/g,'');
    const tipo   = numero.length === 11 ? 'RUC' : (numero.length === 8 ? 'DNI' : null);
    const res    = document.getElementById('quickApiResult');
    if (!tipo) { res.className='small mt-1 text-danger'; res.textContent='Ingresa 8 (DNI) o 11 (RUC) dígitos'; 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();
                document.getElementById('clientNameHidden').value = nombre;
                document.getElementById('formClientAddress').value = data.direccion || '';
                res.className='small mt-1 text-success fw-bold'; res.textContent='✔ '+nombre;
            }
        } catch(e) {
            res.className='small mt-1 text-danger';
            res.textContent = xhr.status === 403
                ? '❌ Sin permiso para buscar (contacta al administrador)'
                : '❌ Error del servidor (código ' + xhr.status + ')';
        }
    };
    xhr.ontimeout = function() { res.className='small mt-1 text-danger'; res.textContent='⏱ Sin respuesta.'; };
    xhr.send();
}

function procesarVenta() {
    const keys = Object.keys(cart);
    if (keys.length === 0) { mostrarAlerta('Agrega al menos un producto.', 'warning'); return; }

    const docType = document.getElementById('docType').value;
    const docNum  = document.getElementById('docNumber').value.trim();
    const clientName = document.getElementById('clientNameHidden').value.trim();

    if (docType === 'Factura' && docNum.replace(/[^0-9]/g,'').length !== 11) {
        mostrarAlerta('Para Factura debes ingresar un RUC de 11 dígitos.', 'warning'); return;
    }

    const total    = Object.values(cart).reduce((s,i) => s + i.price * i.qty, 0);
    const received = selectedMethod === 'cash' ? (parseFloat(document.getElementById('receivedAmount').value) || total) : total;

    if (selectedMethod === 'mixed') {
        const pagado = quickMixedPayments.reduce((s,p) => s + p.amount, 0);
        if (quickMixedPayments.length === 0 || Math.abs(total - pagado) > 0.01) {
            mostrarAlerta('El pago mixto debe sumar exactamente el total (S/ ' + total.toFixed(2) + ').', 'warning');
            return;
        }
        // Los inputs mix_method[]/mix_amount[] viven fuera del <form>, hay que
        // copiarlos adentro justo antes de enviar.
        document.getElementById('quickForm').querySelectorAll('input[name="mix_method[]"], input[name="mix_amount[]"]').forEach(el => el.remove());
        quickMixedPayments.forEach(p => {
            const f1 = document.createElement('input'); f1.type='hidden'; f1.name='mix_method[]'; f1.value=p.method;
            const f2 = document.createElement('input'); f2.type='hidden'; f2.name='mix_amount[]'; f2.value=p.amount;
            document.getElementById('quickForm').appendChild(f1);
            document.getElementById('quickForm').appendChild(f2);
        });
    }

    document.getElementById('formItems').value     = JSON.stringify(Object.values(cart));
    document.getElementById('formMethod').value    = selectedMethod;
    document.getElementById('formReceived').value  = received;
    document.getElementById('formDocType').value   = docType;
    document.getElementById('formClientDoc').value = docNum;
    document.getElementById('formClientName').value= clientName || (docType === 'Ticket' ? 'Público' : '');

    document.getElementById('quickForm').submit();
}
</script>
@endsection