@extends('layouts.app')
@section('title', 'New sale')
@section('section', 'Register')
@section('main_class', 'shell-wide')

@php
    $cur = config('payments.currency');
    $dp  = \App\Payments\Support\Currency::decimals($cur);
    $catalog = $items->map(fn ($i) => [
        'id'       => (int) $i->id,
        'name'     => trim($i->product.($i->variant && $i->variant !== 'Default' ? ' · '.$i->variant : '')),
        'price'    => (float) $i->price,
        'sku'      => $i->sku,
        'category' => $i->category ?: 'Other',
        'stock'    => (float) $i->stock,
        'track'    => (bool) $i->track,
    ])->values();
@endphp

@section('content')
    <div class="page-head">
        <p class="eyebrow">Register</p>
        <h1>New sale</h1>
    </div>

    @if ($items->isEmpty())
        <div class="empty">
            <div class="glyph">— NO PRODUCTS —</div>
            <p>Add products (or run the demo seeder) before ringing up a sale.</p>
        </div>
    @else
        <div class="pos" x-data="pos()" x-cloak>
            {{-- ── Catalog ── --}}
            <section>
                <div class="pos-tools">
                    <input class="input pos-search" type="search" x-model="search"
                        placeholder="Search products or scan a barcode…" autofocus>
                </div>

                <div class="cats">
                    <template x-for="c in categories" :key="c">
                        <button type="button" class="cat" :class="{ 'is-active': category === c }"
                            x-on:click="category = c" x-text="c === 'all' ? 'All' : c"></button>
                    </template>
                </div>

                <div class="prod-grid">
                    <template x-for="item in filtered" :key="item.id">
                        <button type="button" class="prod" :disabled="outOfStock(item)" x-on:click="add(item)">
                            <span class="prod-name" x-text="item.name"></span>
                            <span class="prod-foot">
                                <span class="prod-price" x-text="'{{ $cur }} ' + fmt(item.price)"></span>
                                <span class="prod-stock" :class="{ 'is-out': outOfStock(item) }"
                                    x-text="item.track ? (outOfStock(item) ? 'Out of stock' : 'Stock ' + item.stock) : 'In stock'"></span>
                            </span>
                        </button>
                    </template>
                    <template x-if="filtered.length === 0">
                        <p class="cart-empty">No products match your search.</p>
                    </template>
                </div>
            </section>

            {{-- ── Cart / receipt ── --}}
            <form class="cart" method="POST" action="{{ route('pos.store') }}">
                @csrf
                <div class="cart-head">
                    <div class="cart-head-top">
                        <span class="cart-title">Current sale</span>
                        <span class="cart-count" x-text="count + (count === 1 ? ' item' : ' items')"></span>
                    </div>
                    <div class="cart-store">{{ $warehouse->name }}</div>
                </div>

                <div class="cart-lines">
                    <template x-if="cart.length === 0">
                        <div class="cart-empty">No items yet.<br>Tap a product to add it.</div>
                    </template>
                    <template x-for="line in cart" :key="line.id">
                        <div class="line">
                            <div>
                                <div class="line-name" x-text="line.name"></div>
                                <div class="line-unit" x-text="'{{ $cur }} ' + fmt(line.price) + ' each'"></div>
                            </div>
                            <div class="line-total" x-text="fmt(line.qty * line.price)"></div>
                            <div class="line-ctl">
                                <span class="qty">
                                    <button type="button" x-on:click="dec(line)" aria-label="Decrease">−</button>
                                    <span x-text="line.qty"></span>
                                    <button type="button" x-on:click="inc(line)" aria-label="Increase">+</button>
                                </span>
                                <button type="button" class="line-rm" x-on:click="remove(line)">Remove</button>
                            </div>
                        </div>
                    </template>
                </div>

                <div class="cart-foot">
                    <div class="tot-row">
                        <span class="k">Subtotal</span>
                        <span class="v" x-text="'{{ $cur }} ' + fmt(subtotal)"></span>
                    </div>
                    <div class="tot-row tot-grand">
                        <span class="k">Total</span>
                        <span class="v"><span class="cur">{{ $cur }}</span><span x-text="fmt(total)"></span></span>
                    </div>

                    <div class="pay-field">
                        <label class="label" for="pos-customer" style="margin:0">Customer</label>
                        <select id="pos-customer" class="select" x-model="customer">
                            <option value="">Walk-in customer</option>
                            @foreach ($customers as $c)
                                <option value="{{ $c->id }}">{{ $c->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="pay-field">
                        <label class="label" for="pos-paid" style="margin:0">Amount paid</label>
                        <div class="pay-row">
                            <input id="pos-paid" class="input" type="number" min="0" step="any" inputmode="decimal"
                                x-model.number="tendered" x-on:input="tenderedTouched = true">
                            <button type="button" class="btn" x-on:click="exact()">Exact</button>
                        </div>
                        <template x-if="change > 0">
                            <div class="changeline is-change">
                                <span class="k">Change</span>
                                <span class="v" x-text="'{{ $cur }} ' + fmt(change)"></span>
                            </div>
                        </template>
                        <template x-if="due > 0 && cart.length > 0">
                            <div class="changeline is-due">
                                <span class="k">Remaining due</span>
                                <span class="v" x-text="'{{ $cur }} ' + fmt(due)"></span>
                            </div>
                        </template>
                    </div>

                    <input type="hidden" name="warehouse_id" value="{{ $warehouse->id }}">
                    <input type="hidden" name="contact_id" :value="customer">
                    <input type="hidden" name="paid_amount" :value="applied.toFixed(dp)">
                    <input type="hidden" name="cart" :value="cartJSON">

                    <button class="btn btn-primary btn-lg" type="submit" :disabled="cart.length === 0">
                        Complete sale · {{ $cur }} <span x-text="fmt(total)"></span>
                    </button>
                </div>
            </form>
        </div>

        <script>
            function pos() {
                return {
                    items: @json($catalog),
                    cart: [],
                    search: '',
                    category: 'all',
                    customer: '',
                    tendered: 0,
                    tenderedTouched: false,
                    dp: {{ $dp }},

                    get categories() {
                        return ['all', ...Array.from(new Set(this.items.map(i => i.category))).sort()];
                    },
                    get filtered() {
                        const q = this.search.trim().toLowerCase();
                        return this.items.filter(i => {
                            const inCat = this.category === 'all' || i.category === this.category;
                            const inQ = !q || i.name.toLowerCase().includes(q) || (i.sku || '').toLowerCase().includes(q);
                            return inCat && inQ;
                        });
                    },
                    get subtotal() { return this.cart.reduce((s, l) => s + l.qty * l.price, 0); },
                    get total() { return this.round(this.subtotal); },
                    get applied() { return this.round(Math.min(this.tendered || 0, this.total)); },
                    get change() { return this.round(Math.max((this.tendered || 0) - this.total, 0)); },
                    get due() { return this.round(Math.max(this.total - (this.tendered || 0), 0)); },
                    get count() { return this.cart.reduce((s, l) => s + l.qty, 0); },
                    get cartJSON() {
                        return JSON.stringify(this.cart.map(l => ({ id: l.id, qty: l.qty, price: l.price })));
                    },

                    round(n) { const f = Math.pow(10, this.dp); return Math.round((n + Number.EPSILON) * f) / f; },
                    fmt(n) { return this.round(n).toFixed(this.dp); },
                    outOfStock(item) { return item.track && item.stock <= 0; },
                    lineFor(id) { return this.cart.find(l => l.id === id); },

                    add(item) {
                        if (this.outOfStock(item)) return;
                        const line = this.lineFor(item.id);
                        if (line) {
                            if (item.track && line.qty + 1 > item.stock) return;
                            line.qty++;
                        } else {
                            this.cart.push({ id: item.id, name: item.name, price: item.price, qty: 1, stock: item.stock, track: item.track });
                        }
                        this.syncTender();
                    },
                    inc(line) {
                        if (line.track && line.qty + 1 > line.stock) return;
                        line.qty++;
                        this.syncTender();
                    },
                    dec(line) {
                        line.qty--;
                        if (line.qty <= 0) { this.remove(line); return; }
                        this.syncTender();
                    },
                    remove(line) {
                        this.cart = this.cart.filter(l => l.id !== line.id);
                        this.syncTender();
                    },
                    exact() { this.tendered = this.total; this.tenderedTouched = true; },
                    syncTender() { if (!this.tenderedTouched) this.tendered = this.total; },
                };
            }
        </script>
        <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js"></script>
    @endif
@endsection