@extends('layouts.app')
@section('title', 'POS Terminal')

@push('styles')
<style>
    .pos-wrap { display:grid; grid-template-columns:1fr 380px; gap:0; height:calc(100vh - 60px); margin:-24px; }
    .pos-items-panel { padding:20px; overflow-y:auto; background:#f8fafc; }
    .pos-cart-panel { background:white; border-left:1px solid #e2e8f0; display:flex; flex-direction:column; }
    .search-bar { display:flex; gap:10px; margin-bottom:16px; }
    .search-bar input { flex:1; padding:10px 14px; border:1px solid #e2e8f0; border-radius:8px; font-size:14px; font-family:inherit; }
    .search-bar input:focus { outline:none; border-color:#26d9d3; }
    .category-pills { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
    .cat-pill { padding:5px 14px; border-radius:100px; border:1px solid #e2e8f0; background:white; font-size:12px; font-weight:500; cursor:pointer; transition:all .15s; }
    .cat-pill:hover,.cat-pill.active { background:#26d9d3; border-color:#26d9d3; color:white; }
    .items-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; }
    .item-card { background:white; border:1px solid #e2e8f0; border-radius:10px; padding:14px; cursor:pointer; transition:all .15s; }
    .item-card:hover { border-color:#26d9d3; box-shadow:0 0 0 3px rgba(38,217,211,0.1); transform:translateY(-1px); }
    .item-card .item-name { font-size:13px; font-weight:600; margin-bottom:4px; line-height:1.3; }
    .item-card .item-price { font-size:15px; font-weight:700; color:#26d9d3; }
    .item-card .item-code { font-size:10px; color:#94a3b8; font-family:monospace; margin-bottom:6px; }
    /* Cart */
    .cart-header { padding:16px 20px; border-bottom:1px solid #e2e8f0; }
    .cart-title { font-size:15px; font-weight:700; }
    .cart-customer { padding:12px 20px; border-bottom:1px solid #e2e8f0; }
    .cart-items { flex:1; overflow-y:auto; padding:8px 20px; }
    .cart-row { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; padding:10px 0; border-bottom:1px solid #f1f5f9; }
    .cart-row .item-info { min-width:0; }
    .cart-row .item-info .name { font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .cart-row .item-info .unit-price { font-size:11px; color:#94a3b8; }
    .cart-controls { display:flex; align-items:center; gap:6px; flex-shrink:0; }
    .qty-btn { width:24px; height:24px; border-radius:6px; border:1px solid #e2e8f0; background:white; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; }
    .qty-btn:hover { background:#f1f5f9; }
    .qty-display { min-width:28px; text-align:center; font-size:13px; font-weight:600; }
    .line-amount { font-size:13px; font-weight:600; min-width:70px; text-align:right; }
    .remove-btn { color:#ef4444; background:none; border:none; cursor:pointer; font-size:12px; padding:2px 4px; }
    /* Totals */
    .cart-totals { padding:12px 20px; border-top:1px solid #e2e8f0; }
    .total-row { display:flex; justify-content:space-between; font-size:13px; padding:3px 0; }
    .total-row.grand { font-size:18px; font-weight:700; padding-top:8px; margin-top:4px; border-top:2px solid #e2e8f0; color:#26d9d3; }
    /* Payment */
    .cart-payment { padding:16px 20px; border-top:1px solid #e2e8f0; }
    .pay-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
    .pay-btn { padding:10px; border:2px solid #e2e8f0; border-radius:8px; background:white; font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; text-align:center; }
    .pay-btn:hover,.pay-btn.selected { border-color:#26d9d3; background:#e6fafa; color:#26d9d3; }
    .charge-btn { width:100%; padding:14px; background:linear-gradient(135deg,#10b981,#059669); color:white; border:none; border-radius:10px; font-size:16px; font-weight:700; cursor:pointer; font-family:inherit; }
    .charge-btn:hover { opacity:.9; }
    .charge-btn:disabled { opacity:.5; cursor:not-allowed; }
    .empty-cart { text-align:center; padding:40px 20px; color:#94a3b8; }
    /* Session banner */
    .session-banner { background:#fef3c7; border:1px solid #fde68a; border-radius:8px; padding:10px 16px; margin-bottom:16px; font-size:13px; display:flex; align-items:center; gap:8px; }
</style>
@endpush

@section('content')
<div class="pos-wrap">
    <!-- LEFT: Items Panel -->
    <div class="pos-items-panel">
        @if(!$session)
        <div class="session-banner">
            ⚠️ No open POS session.
            <a href="{{ route('pos.sessions.create') }}" style="color:#92400e;font-weight:600;">Open a session →</a>
        </div>
        @else
        <div style="background:#d1fae5;border:1px solid #a7f3d0;border-radius:8px;padding:8px 16px;margin-bottom:16px;font-size:12px;color:#065f46;display:flex;justify-content:space-between;align-items:center;">
            <span>✓ Session open · {{ $session->posProfile->name }} · Started {{ $session->opened_at->format('h:i A') }}</span>
            <form method="POST" action="{{ route('pos.sessions.close',$session) }}" style="display:inline;">
                @csrf @method('PATCH')
                <input type="hidden" name="closing_cash" value="0">
                <button type="submit" style="font-size:11px;background:none;border:none;color:#065f46;cursor:pointer;text-decoration:underline;" onclick="return confirm('Close POS session?')">Close Session</button>
            </form>
        </div>
        @endif

        <div class="search-bar">
            <input type="text" id="item-search" placeholder="Search items by name or barcode..." oninput="filterItems()">
        </div>

        <div class="items-grid" id="items-grid">
            @foreach($items as $item)
            <div class="item-card" onclick="addToCart({{ $item->id }},'{{ addslashes($item->name) }}',{{ $item->standard_rate }},{{ $item->tax_rate }},1,'{{ $item->unit }}',{{ $item->is_stock_item?'true':'false' }})"
                 data-name="{{ strtolower($item->name) }}" data-code="{{ strtolower($item->code) }}">
                <div class="item-code">{{ $item->code }}</div>
                <div class="item-name">{{ $item->name }}</div>
                <div style="display:flex;justify-content:space-between;align-items:center;margin-top:6px;">
                    <div class="item-price">৳{{ number_format($item->standard_rate, 2) }}</div>
                    @if($item->tax_rate > 0)<span style="font-size:10px;background:#fef3c7;color:#92400e;padding:1px 5px;border-radius:4px;">{{ $item->tax_rate }}% VAT</span>@endif
                </div>
            </div>
            @endforeach
        </div>
    </div>

    <!-- RIGHT: Cart Panel -->
    <div class="pos-cart-panel">
        <div class="cart-header">
            <div style="display:flex;justify-content:space-between;align-items:center;">
                <div class="cart-title">🛒 Cart <span id="cart-count" style="font-size:12px;color:#94a3b8;font-weight:400;">(0 items)</span></div>
                <button onclick="clearCart()" style="font-size:11px;color:#ef4444;background:none;border:none;cursor:pointer;">Clear All</button>
            </div>
        </div>

        <div class="cart-customer">
            <select id="customer-select" style="width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:7px;font-size:13px;font-family:inherit;">
                <option value="">Walk-in Customer</option>
                @foreach($customers as $c)
                <option value="{{ $c->id }}">{{ $c->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="cart-items" id="cart-items">
            <div class="empty-cart" id="empty-msg">
                <div style="font-size:40px;margin-bottom:8px;">🛍️</div>
                <div>Tap an item to add it to the cart</div>
            </div>
        </div>

        <div class="cart-totals">
            <div class="total-row"><span style="color:#64748b;">Subtotal</span><span id="subtotal">৳0.00</span></div>
            <div class="total-row"><span style="color:#64748b;">Tax</span><span id="tax-total">৳0.00</span></div>
            <div class="total-row grand"><span>Total</span><span id="grand-total">৳0.00</span></div>
        </div>

        <div class="cart-payment">
            <div style="font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;">Payment Method</div>
            <div class="pay-grid">
                <button class="pay-btn selected" data-method="cash" onclick="selectPayment('cash',this)">💵 Cash</button>
                <button class="pay-btn" data-method="card" onclick="selectPayment('card',this)">💳 Card</button>
                <button class="pay-btn" data-method="mobile_banking" onclick="selectPayment('mobile_banking',this)">📱 bKash/Nagad</button>
                <button class="pay-btn" data-method="split" onclick="selectPayment('split',this)">🔀 Split</button>
            </div>
            <div style="margin-bottom:10px;">
                <label style="font-size:11px;font-weight:600;color:#64748b;display:block;margin-bottom:4px;">Amount Tendered</label>
                <input type="number" id="paid-amount" style="width:100%;padding:10px 14px;border:1px solid #e2e8f0;border-radius:8px;font-size:16px;font-weight:700;font-family:inherit;" placeholder="0.00" oninput="calcChange()">
            </div>
            <div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:12px;color:#10b981;font-weight:600;">
                <span>Change</span><span id="change-display">৳0.00</span>
            </div>
            <button class="charge-btn" id="charge-btn" onclick="processPayment()" disabled>
                Charge ৳0.00
            </button>
        </div>
    </div>
</div>

@push('scripts')
<script>
let cart = []; let paymentMethod = 'cash';

function addToCart(id, name, rate, taxRate, qty, unit, isStock) {
    const existing = cart.find(i => i.id === id);
    if (existing) { existing.qty++; }
    else { cart.push({id, name, rate, taxRate, qty: 1, unit, isStock, discount: 0}); }
    renderCart();
}

function removeFromCart(id) { cart = cart.filter(i => i.id !== id); renderCart(); }
function changeQty(id, delta) { const item = cart.find(i=>i.id===id); if(item){item.qty+=delta; if(item.qty<=0)removeFromCart(id); else renderCart();} }
function clearCart() { cart=[]; renderCart(); }
function selectPayment(m, btn) { paymentMethod=m; document.querySelectorAll('.pay-btn').forEach(b=>b.classList.remove('selected')); btn.classList.add('selected'); }

function renderCart() {
    const container = document.getElementById('cart-items');
    const emptyMsg = document.getElementById('empty-msg');
    if(cart.length===0){container.innerHTML='<div class="empty-cart" id="empty-msg"><div style="font-size:40px;margin-bottom:8px;">🛍️</div><div>Tap an item to add it to the cart</div></div>';updateTotals();return;}
    container.innerHTML = cart.map(item => {
        const lineTotal = item.qty * item.rate;
        const tax = lineTotal * item.taxRate / 100;
        const amount = lineTotal + tax;
        return `<div class="cart-row">
            <div class="item-info">
                <div class="name">${item.name}</div>
                <div class="unit-price">৳${item.rate.toFixed(2)} × ${item.qty} ${item.taxRate>0?'(+'+item.taxRate+'% tax)':''}</div>
            </div>
            <div class="cart-controls">
                <button class="qty-btn" onclick="changeQty(${item.id},-1)">−</button>
                <span class="qty-display">${item.qty}</span>
                <button class="qty-btn" onclick="changeQty(${item.id},1)">+</button>
                <span class="line-amount">৳${amount.toFixed(2)}</span>
                <button class="remove-btn" onclick="removeFromCart(${item.id})">✕</button>
            </div>
        </div>`;
    }).join('');
    updateTotals();
}

function updateTotals() {
    let sub=0, tax=0;
    cart.forEach(i => { const l=i.qty*i.rate; sub+=l; tax+=l*(i.taxRate/100); });
    const total = sub + tax;
    document.getElementById('subtotal').textContent = '৳'+sub.toFixed(2);
    document.getElementById('tax-total').textContent = '৳'+tax.toFixed(2);
    document.getElementById('grand-total').textContent = '৳'+total.toFixed(2);
    document.getElementById('cart-count').textContent = '('+cart.reduce((s,i)=>s+i.qty,0)+' items)';
    document.getElementById('charge-btn').textContent = 'Charge ৳'+total.toFixed(2);
    document.getElementById('charge-btn').disabled = cart.length === 0;
    document.getElementById('paid-amount').value = total > 0 ? total.toFixed(2) : '';
    calcChange();
}

function calcChange() {
    const total = parseFloat(document.getElementById('grand-total').textContent.replace('৳','')) || 0;
    const paid  = parseFloat(document.getElementById('paid-amount').value) || 0;
    const change = Math.max(0, paid - total);
    document.getElementById('change-display').textContent = '৳'+change.toFixed(2);
}

function processPayment() {
    if(cart.length===0) return;
    let sub=0,tax=0;
    cart.forEach(i=>{const l=i.qty*i.rate;sub+=l;tax+=l*(i.taxRate/100);});
    const total = sub+tax;
    const paid  = parseFloat(document.getElementById('paid-amount').value)||total;

    const data = {
        _token: document.querySelector('meta[name=csrf-token]').content,
        customer_id: document.getElementById('customer-select').value||null,
        items: cart.map(i=>({item_id:i.id,item_name:i.name,qty:i.qty,rate:i.rate,tax_rate:i.taxRate,discount_percent:0,amount:i.qty*i.rate*(1+i.taxRate/100),is_stock_item:i.isStock})),
        total: total, paid_amount: paid, payment_method: paymentMethod
    };

    document.getElementById('charge-btn').disabled=true;
    document.getElementById('charge-btn').textContent='Processing...';

    fetch('{{ route("pos.terminal.process") }}', {method:'POST',headers:{'Content-Type':'application/json','X-CSRF-TOKEN':data._token},body:JSON.stringify(data)})
        .then(r=>r.json()).then(res=>{
            if(res.success){
                const change=Math.max(0,paid-total);
                alert(`✅ Sale Complete!\nTotal: ৳${total.toFixed(2)}\nPaid: ৳${paid.toFixed(2)}\nChange: ৳${change.toFixed(2)}`);
                clearCart();
            } else { alert('❌ Error: '+(res.message||'Unknown error')); }
        }).catch(e=>{alert('Error processing sale: '+e.message);})
        .finally(()=>{document.getElementById('charge-btn').disabled=false;updateTotals();});
}

function filterItems() {
    const q = document.getElementById('item-search').value.toLowerCase();
    document.querySelectorAll('.item-card').forEach(card => {
        const name = card.dataset.name; const code = card.dataset.code;
        card.style.display = (!q || name.includes(q) || code.includes(q)) ? '' : 'none';
    });
}
</script>
@endpush
@endsection