@extends('layouts.app')

@section('title', 'PDV – Ponto de Venda')
@section('page_title', 'PDV')
@section('page_subtitle', 'Ponto de Venda')
@section('page_actions')
    <button class="button" id="toggle-menu-btn" onclick="toggleMenu()" title="Mostrar/esconder menu">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
        Menu
    </button>
@endsection

@push('scripts')
<script>
function toggleMenu() {
    const shell = document.querySelector('.app-shell');
    shell.classList.toggle('fullscreen');
    const btn = document.getElementById('toggle-menu-btn');
    if (shell.classList.contains('fullscreen')) {
        btn.innerHTML = '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg> Menu';
    } else {
        btn.innerHTML = '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> Fechar';
    }
}
</script>
@endpush

@section('content')
<style>
.pdv-wrap { display:grid; grid-template-columns:1fr 400px; gap:1rem; height:calc(100vh - 120px); }
.pdv-left { display:flex; flex-direction:column; gap:1rem; overflow:hidden; }
.pdv-right { display:flex; flex-direction:column; gap:1rem; overflow-y:auto; }
.search-bar { display:flex; gap:.5rem; }
.items-table { flex:1; overflow-y:auto; }
.items-table table { width:100%; border-collapse:collapse; }
.items-table th, .items-table td { padding:.5rem .75rem; border-bottom:1px solid var(--border); font-size:.875rem; }
.items-table th { background:var(--bg); font-weight:600; position:sticky; top:0; }
.qty-ctrl { display:flex; align-items:center; gap:.25rem; }
.qty-ctrl button { width:24px; height:24px; border-radius:4px; border:1px solid var(--border); background:var(--bg); cursor:pointer; font-size:1rem; line-height:1; }
.qty-ctrl input { width:56px; text-align:center; border:1px solid var(--border); border-radius:4px; padding:.2rem; font-size:.875rem; }
.totals-block { background:var(--bg); border-radius:8px; padding:1rem; }
.totals-block .row { display:flex; justify-content:space-between; margin-bottom:.4rem; font-size:.9rem; }
.totals-block .row.total { font-size:1.3rem; font-weight:700; color:var(--primary); margin-top:.5rem; padding-top:.5rem; border-top:2px solid var(--border); }
.payments-block { display:flex; flex-direction:column; gap:.5rem; }
.pay-btn { display:flex; align-items:center; gap:.5rem; padding:.6rem 1rem; border:2px solid var(--border); background:var(--surface); border-radius:8px; cursor:pointer; font-size:.9rem; transition:.15s; }
.pay-btn:hover, .pay-btn.active { border-color:var(--primary); background:var(--primary-light); }
.pay-btn .icon { font-size:1.2rem; }
.change-line { font-size:1.1rem; font-weight:700; color:var(--ok); }
</style>

<div class="pdv-wrap">

    {{-- LEFT: items --}}
    <div class="pdv-left">
        {{-- Search --}}
        <div style="background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem;">
            <div class="search-bar">
                <input type="text" id="product-search" placeholder="Codigo, nome ou barcode... (F2 para focar)" autocomplete="off" style="flex:1;">
                <button onclick="searchProduct()" class="button primary">Buscar</button>
            </div>
            <div id="search-results" style="position:relative;"></div>
        </div>

        {{-- Items --}}
        <div style="flex:1;overflow:hidden;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);">
            <div style="padding:.75rem 1rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--surface-2);">
                <span style="font-weight:700;font-size:.9rem;">Itens da Venda</span>
                <span id="item-count" style="font-size:.8rem;color:var(--muted);">0 item(s)</span>
            </div>
            <div class="items-table" style="flex:1;overflow-y:auto;">
                <table>
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Produto</th>
                            <th style="text-align:center;">Qtd</th>
                            <th style="text-align:right;">Unit.</th>
                            <th style="text-align:right;">Desc.</th>
                            <th style="text-align:right;">Total</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="cart-body">
                        <tr id="empty-row"><td colspan="7" style="text-align:center;padding:3rem;color:var(--muted);">Nenhum item adicionado</td></tr>
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Discounts --}}
        <div style="background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem;">
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:.75rem;align-items:center;">
                <div>
                    <label style="margin-bottom:.25rem;font-size:.8rem;">Desconto (R$)</label>
                    <input type="number" id="discount_amount" step="0.01" min="0" value="0" oninput="recalc()">
                </div>
                <div>
                    <label style="margin-bottom:.25rem;font-size:.8rem;">Acrescimo (R$)</label>
                    <input type="number" id="addition_amount" step="0.01" min="0" value="0" oninput="recalc()">
                </div>
            </div>
        </div>
    </div>

    {{-- RIGHT: totals + payments --}}
    <div class="pdv-right">

        {{-- Customer --}}
        <div style="background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem;">
            <label style="font-size:.8rem;margin-bottom:.25rem;">Cliente (opcional)</label>
            <input type="text" id="customer_name" placeholder="Nome do cliente..." style="margin-bottom:.4rem;">
            <input type="text" id="customer_cpf_cnpj" placeholder="CPF / CNPJ...">
        </div>

        {{-- Guide (if plan has mod_guide) --}}
        @if(auth()->user()->getActivePlan()?->mod_guide && $guides->isNotEmpty())
        <div style="background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem;">
            <label style="font-size:.8rem;margin-bottom:.25rem;">Guia Turistico</label>
            <select id="guide_id">
                <option value="">Sem guia</option>
                @foreach($guides as $g)
                    <option value="{{ $g->id }}">{{ $g->name }} ({{ number_format($g->commission_percent,1) }}%)</option>
                @endforeach
            </select>
        </div>
        @endif

        {{-- Totals --}}
        <div style="background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem;">
            <div class="totals-block">
                <div class="row"><span>Subtotal</span><span id="disp-subtotal">R$ 0,00</span></div>
                <div class="row"><span>Desconto</span><span id="disp-discount" style="color:var(--danger);">- R$ 0,00</span></div>
                <div class="row"><span>Acrescimo</span><span id="disp-addition" style="color:var(--ok);">+ R$ 0,00</span></div>
                <div class="row total"><span>TOTAL</span><span id="disp-total">R$ 0,00</span></div>
            </div>
        </div>

        {{-- Payments --}}
        <div style="flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem;">
            <div style="margin-bottom:.75rem;font-size:.9rem;font-weight:600;">Formas de Pagamento</div>
            <div class="payments-block" id="payment-methods-list">
                @foreach($paymentMethods as $pm)
                @php $icon = match($pm->type){ 'cash'=>'💵','credit_card'=>'💳','debit_card'=>'💳','pix'=>'⚡','transfer'=>'🏦',default=>'💰'}; @endphp
                <button class="pay-btn" onclick="selectPayment({{ $pm->id }}, '{{ $pm->name }}', {{ $pm->requires_change ? 'true' : 'false' }})" data-pm="{{ $pm->id }}">
                    <span class="icon">{{ $icon }}</span>
                    <span>{{ $pm->name }}</span>
                </button>
                @endforeach
            </div>

            <div id="payment-entry" style="display:none;margin-top:.75rem;border-top:1px solid var(--border);padding-top:.75rem;">
                <input type="hidden" id="pay-method-id">
                <input type="hidden" id="pay-method-name">
                <label style="font-size:.8rem;">Valor Recebido (R$)</label>
                <input type="number" id="pay-amount" step="0.01" min="0" oninput="calcChange()">
                <div id="change-display" class="change-line" style="margin-top:.5rem;display:none;">Troco: R$ <span id="change-val">0,00</span></div>
                <div style="display:flex;gap:.5rem;margin-top:.75rem;">
                    <button onclick="addPayment()" class="button primary" style="flex:1;">Confirmar</button>
                    <button onclick="cancelPayment()" class="button">Cancelar</button>
                </div>
            </div>

            <div id="added-payments" style="margin-top:.75rem;display:flex;flex-direction:column;gap:.4rem;"></div>
        </div>

        {{-- Finalize --}}
        <button id="btn-finalize" onclick="finalizeSale()" class="button primary" style="width:100%;padding:1rem;font-size:1.1rem;" disabled>
            Finalizar Venda (F10)
        </button>
    </div>
</div>

<script>
const cart = [];
const payments = [];
let requiresChange = false;

document.addEventListener('keydown', e => {
    if (e.key === 'F2') { e.preventDefault(); document.getElementById('product-search').focus(); }
    if (e.key === 'F10') { e.preventDefault(); finalizeSale(); }
});

document.getElementById('product-search').addEventListener('keydown', e => {
    if (e.key === 'Enter') searchProduct();
});

async function searchProduct() {
    const q = document.getElementById('product-search').value.trim();
    if (!q) return;

    const res = await fetch(`{{ route('pdv.search') }}?q=${encodeURIComponent(q)}`, {
        headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content }
    });
    const data = await res.json();

    if (data.length === 0) {
        showResults('<div style="padding:.75rem;color:var(--muted);">Nenhum produto encontrado.</div>');
        return;
    }
    if (data.length === 1) {
        addToCart(data[0]);
        document.getElementById('search-results').innerHTML = '';
        document.getElementById('product-search').value = '';
        return;
    }

    let html = `<div style="position:absolute;top:4px;left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 4px 16px rgba(0,0,0,.1);z-index:100;max-height:300px;overflow-y:auto;">`;
    data.forEach(p => {
        html += `<div onclick='addToCartFromSearch(${JSON.stringify(p)})' style="padding:.65rem 1rem;cursor:pointer;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;" onmouseover="this.style.background='var(--primary-light)'" onmouseout="this.style.background='transparent'">
            <div><strong>${p.name}</strong><br><small style="color:var(--muted);">${p.code ?? ''} ${p.barcode ?? ''}</small></div>
            <div style="text-align:right;font-weight:600;">R$ ${fmtBR(p.price_sale)}<br><small style="color:var(--muted);">${p.unit}</small></div>
        </div>`;
    });
    html += `</div>`;
    showResults(html);
}

function showResults(html) {
    const r = document.getElementById('search-results');
    r.style.position = 'relative';
    r.innerHTML = html;
}

function addToCartFromSearch(p) {
    addToCart(p);
    document.getElementById('search-results').innerHTML = '';
    document.getElementById('product-search').value = '';
}

function addToCart(product) {
    const existing = cart.find(i => i.product_id === product.id);
    if (existing) {
        existing.quantity += 1;
    } else {
        cart.push({
            product_id: product.id,
            product_name: product.name,
            product_code: product.code,
            product_unit: product.unit,
            quantity: 1,
            unit_price: parseFloat(product.price_sale),
            discount_amount: 0,
            discount_percent: 0,
        });
    }
    renderCart();
}

function renderCart() {
    const tbody = document.getElementById('cart-body');

    if (cart.length === 0) {
        tbody.innerHTML = '<tr id="empty-row"><td colspan="7" style="text-align:center;padding:3rem;color:var(--muted);">Nenhum item adicionado</td></tr>';
        recalc();
        return;
    }

    tbody.innerHTML = cart.map((item, i) => {
        const total = item.quantity * item.unit_price - item.discount_amount;
        return `<tr>
            <td>${i+1}</td>
            <td>
                <div style="font-weight:500;">${item.product_name}</div>
                ${item.product_code ? `<small style="color:var(--muted);">${item.product_code}</small>` : ''}
            </td>
            <td>
                <div class="qty-ctrl">
                    <button onclick="changeQty(${i},-1)">−</button>
                    <input type="number" value="${item.quantity}" min="0.001" step="0.001" onchange="setQty(${i}, this.value)">
                    <button onclick="changeQty(${i},1)">+</button>
                </div>
            </td>
            <td style="text-align:right;"><input type="number" value="${item.unit_price.toFixed(4)}" step="0.0001" min="0" style="width:80px;text-align:right;border:1px solid var(--border);border-radius:4px;padding:.2rem;" onchange="setPrice(${i},this.value)"></td>
            <td style="text-align:right;"><input type="number" value="${item.discount_amount.toFixed(2)}" step="0.01" min="0" style="width:70px;text-align:right;border:1px solid var(--border);border-radius:4px;padding:.2rem;" onchange="setDiscount(${i},this.value)"></td>
            <td style="text-align:right;font-weight:600;">R$ ${fmtBR(total)}</td>
            <td><button onclick="removeItem(${i})" style="background:none;border:none;color:var(--danger);cursor:pointer;font-size:1.1rem;">✕</button></td>
        </tr>`;
    }).join('');

    document.getElementById('item-count').textContent = cart.length + ' item(s)';
    recalc();
}

function changeQty(i, delta) {
    cart[i].quantity = Math.max(0.001, cart[i].quantity + delta);
    renderCart();
}
function setQty(i, v) { cart[i].quantity = Math.max(0.001, parseFloat(v)||0.001); renderCart(); }
function setPrice(i, v) { cart[i].unit_price = Math.max(0, parseFloat(v)||0); renderCart(); }
function setDiscount(i, v) { cart[i].discount_amount = Math.max(0, parseFloat(v)||0); renderCart(); }
function removeItem(i) { cart.splice(i,1); renderCart(); }

function recalc() {
    const subtotal  = cart.reduce((s,i) => s + i.quantity*i.unit_price - i.discount_amount, 0);
    const discount  = parseFloat(document.getElementById('discount_amount').value)||0;
    const addition  = parseFloat(document.getElementById('addition_amount').value)||0;
    const total     = Math.max(0, subtotal - discount + addition);

    document.getElementById('disp-subtotal').textContent = 'R$ ' + fmtBR(subtotal);
    document.getElementById('disp-discount').textContent = '- R$ ' + fmtBR(discount);
    document.getElementById('disp-addition').textContent = '+ R$ ' + fmtBR(addition);
    document.getElementById('disp-total').textContent    = 'R$ ' + fmtBR(total);

    const paid = payments.reduce((s,p)=>s+p.amount,0);
    document.getElementById('btn-finalize').disabled = cart.length === 0 || paid < total;
}

function fmtBR(v) {
    return parseFloat(v).toFixed(2).replace('.',',').replace(/\B(?=(\d{3})+(?!\d))/g,'.');
}

let selectedPm = null;
function selectPayment(id, name, reqChange) {
    document.querySelectorAll('.pay-btn').forEach(b=>b.classList.remove('active'));
    document.querySelector(`[data-pm="${id}"]`).classList.add('active');
    document.getElementById('pay-method-id').value  = id;
    document.getElementById('pay-method-name').value = name;
    requiresChange = reqChange;

    const total  = parseFloat(document.getElementById('disp-total').textContent.replace('R$ ','').replace(',','.').replace(/\./g,'').replace(',','.'))||0;
    const paid   = payments.reduce((s,p)=>s+p.amount,0);
    const remain = Math.max(0, total - paid);

    document.getElementById('pay-amount').value = remain.toFixed(2);
    document.getElementById('payment-entry').style.display = 'block';
    document.getElementById('pay-amount').focus();
    calcChange();
}

function calcChange() {
    const total   = getTotalNum();
    const paid    = payments.reduce((s,p)=>s+p.amount,0);
    const remain  = Math.max(0, total - paid);
    const entered = parseFloat(document.getElementById('pay-amount').value)||0;
    const change  = Math.max(0, entered - remain);

    if (requiresChange && change > 0) {
        document.getElementById('change-display').style.display = 'block';
        document.getElementById('change-val').textContent = fmtBR(change);
    } else {
        document.getElementById('change-display').style.display = 'none';
    }
}

function addPayment() {
    const pmId   = document.getElementById('pay-method-id').value;
    const pmName = document.getElementById('pay-method-name').value;
    const amount = parseFloat(document.getElementById('pay-amount').value)||0;
    if (!pmId || amount <= 0) return;

    const total  = getTotalNum();
    const paid   = payments.reduce((s,p)=>s+p.amount,0);
    const remain = Math.max(0, total - paid);
    const change = Math.max(0, amount - remain);

    payments.push({ payment_method_id: pmId, method_name: pmName, amount, change_amount: change });

    renderPayments();
    cancelPayment();
    recalc();
}

function cancelPayment() {
    document.getElementById('payment-entry').style.display = 'none';
    document.querySelectorAll('.pay-btn').forEach(b=>b.classList.remove('active'));
}

function renderPayments() {
    const el = document.getElementById('added-payments');
    el.innerHTML = payments.map((p,i) => `
        <div style="display:flex;justify-content:space-between;align-items:center;background:var(--primary-light);border-radius:6px;padding:.5rem .75rem;">
            <span>${p.method_name}: <strong>R$ ${fmtBR(p.amount)}</strong>${p.change_amount>0?' (troco: R$ '+fmtBR(p.change_amount)+')':''}</span>
            <button onclick="removePayment(${i})" style="background:none;border:none;color:var(--danger);cursor:pointer;">✕</button>
        </div>`).join('');
}

function removePayment(i) {
    payments.splice(i,1);
    renderPayments();
    recalc();
}

function getTotalNum() {
    const t = document.getElementById('disp-total').textContent.replace('R$ ','');
    return parseFloat(t.replace(/\./g,'').replace(',','.')) || 0;
}

async function finalizeSale() {
    if (cart.length === 0 || payments.length === 0) return;

    const payload = {
        items: cart,
        payments,
        discount_amount:   parseFloat(document.getElementById('discount_amount').value)||0,
        addition_amount:   parseFloat(document.getElementById('addition_amount').value)||0,
        customer_name:     document.getElementById('customer_name').value,
        customer_cpf_cnpj: document.getElementById('customer_cpf_cnpj').value,
        guide_id:          document.getElementById('guide_id')?.value || null,
        _token:            document.querySelector('meta[name=csrf-token]').content,
    };

    const btn = document.getElementById('btn-finalize');
    btn.disabled = true;
    btn.textContent = 'Processando...';

    try {
        const res = await fetch('{{ route('pdv.finalize') }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': payload._token },
            body: JSON.stringify(payload),
        });
        const data = await res.json();
        if (data.success) {
            alert('Venda finalizada! #' + data.sale_id);
            cart.length = 0;
            payments.length = 0;
            document.getElementById('discount_amount').value = 0;
            document.getElementById('addition_amount').value = 0;
            document.getElementById('customer_name').value = '';
            document.getElementById('customer_cpf_cnpj').value = '';
            renderCart();
            renderPayments();
        } else {
            alert('Erro ao finalizar: ' + JSON.stringify(data));
        }
    } catch(e) {
        alert('Erro de comunicacao: ' + e.message);
    } finally {
        btn.disabled = false;
        btn.textContent = 'Finalizar Venda (F10)';
    }
}
</script>
@endsection