@extends('admin.layouts.app')
@section('page-title', 'POS')
@section('body-class', 'pos-preview')
@push('styles')
    <link rel="stylesheet" href="{{ asset('assets/pos.css') }}?v={{ filemtime(public_path('assets/pos.css')) }}">
@endpush
@push('scripts')
    <script type="module" src="{{ asset('assets/pos.js') }}?v={{ filemtime(public_path('assets/pos.js')) }}"></script>
@endpush
@section('content')
<div class="pos-layout" id="pos-workspace" data-pos-root data-lookup-url="{{ route('admin.pos.lookup') }}" data-store-url="{{ route('admin.pos.store') }}" data-csrf="{{ csrf_token() }}" data-submission-key="{{ $submissionKey }}" data-can-sell="{{ auth()->user()->hasPermission('pos.sell') ? '1' : '0' }}">
    <section class="pos-catalog" aria-label="POS product selection">
        <div class="pos-search-row"><label class="pos-search"><x-icon name="search" :size="19" /><input id="pos-search" type="search" maxlength="80" autocomplete="off" placeholder="Search products or enter a SKU…" aria-label="Search products by name or SKU"><span><x-icon name="barcode" :size="18" /></span></label><button type="button" class="pos-refresh" id="pos-refresh">Refresh catalog</button><span class="pos-product-count" id="pos-product-count">{{ count($posProducts) }} products</span></div>
        <nav class="pos-categories" aria-label="Filter POS products"><button type="button" data-pos-category="All" aria-pressed="true">All products</button>@foreach($posCategories as $category)<button type="button" data-pos-category="{{ $category->id }}" aria-pressed="false">{{ $category->name }}</button>@endforeach</nav>
        <div class="pos-catalog-meta"><span><span class="pos-dot"></span> Select a product to choose its variant</span><span class="pos-demo-label">Saved catalog - Up to 20 matches</span></div>
        <div class="pos-product-grid" id="pos-product-grid">
            @foreach($posProducts as $product)
                <button type="button" class="pos-product" data-pos-product="{{ $product['id'] }}" aria-label="Choose {{ $product['name'] }}" aria-haspopup="dialog"><span class="pos-product-photo"><img src="{{ $product['image'] }}" alt="{{ $product['name'] }}" width="200" height="190" loading="lazy"><span class="pos-product-add"><x-icon name="plus" :size="16" /></span></span><span class="pos-product-info"><small>{{ $product['category'] }}</small><strong>{{ $product['name'] }}</strong><span class="pos-product-bottom"><b>৳{{ number_format(collect($product['variants'])->min('price'), 2) }}</b><span>{{ count($product['variants']) }} variants</span></span></span></button>
            @endforeach
        </div>
        <div class="pos-no-results" id="pos-no-results" hidden><x-icon name="search" :size="28" /><p>No matching products.</p><button type="button" id="pos-reset-search">Clear search &amp; filters</button></div>
    </section>
    <aside class="pos-bill" id="pos-bill" aria-label="Current sale">
        <div class="pos-bill-heading"><div><span class="pos-bill-symbol"><x-icon name="receipt" :size="20" /></span><h2>Current sale <small id="pos-line-count">New bill</small></h2></div><button type="button" class="icon-button" id="pos-clear" aria-label="Clear current sale" title="Clear sale"><x-icon name="trash" :size="17" /></button></div>
        <div class="pos-customer"><label for="pos-customer">Customer</label><div><x-icon name="users" :size="17" /><select id="pos-customer"><option>Walk-in Customer</option></select><button type="button" id="pos-customer-add" aria-label="Add customer details" aria-haspopup="dialog"><x-icon name="user-plus" :size="18" /></button></div></div>
        <div class="pos-cart-items" id="pos-cart-items"><p class="pos-loading" role="status">Loading bill…</p></div>
        <div class="pos-bill-bottom"><details class="pos-adjustments"><summary>Discount &amp; tax <x-icon name="chevron" :size="13" /></summary><div><label>Discount (৳)<input id="pos-discount" type="number" value="0" min="0" step="0.01" inputmode="decimal"></label><label>Tax (%)<input id="pos-tax" type="number" value="0" min="0" max="100" step="0.01" inputmode="decimal"></label></div></details>
            <dl class="pos-totals"><div><dt>Subtotal</dt><dd id="pos-subtotal">৳0</dd></div><div><dt>Discount</dt><dd class="pos-discount-value" id="pos-discount-total">−৳0</dd></div><div><dt>Tax</dt><dd id="pos-tax-total">৳0</dd></div><div class="pos-total"><dt>Total payable</dt><dd id="pos-total" aria-live="polite">৳0</dd></div></dl>
            <fieldset class="pos-payment"><legend>Payment received</legend><div><label><input type="radio" name="pos-payment" value="Cash" checked><span><x-icon name="wallet" :size="15" />Cash</span></label><label><input type="radio" name="pos-payment" value="Card"><span><x-icon name="credit-card" :size="15" />Card</span></label><label><input type="radio" name="pos-payment" value="Mobile"><span><x-icon name="phone" :size="15" />Mobile</span></label></div></fieldset>
            <div class="pos-cash-fields" id="pos-cash-fields"><label for="pos-received">Received amount (৳)</label><div><input id="pos-received" type="number" inputmode="decimal" min="0" step="0.01" value="0"><button type="button" id="pos-exact">Exact</button></div><p><span id="pos-balance-label">Change</span><strong id="pos-change">৳0</strong></p></div>
            <div class="pos-reference" id="pos-reference-field" hidden><label for="pos-reference">Payment reference</label><input id="pos-reference" maxlength="80" autocomplete="off"><small>Record only a payment already completed outside this POS.</small></div><button type="button" class="pos-checkout" id="pos-preview-receipt" aria-haspopup="dialog" aria-describedby="pos-payment-note"><x-icon name="receipt" :size="17" /><span>Review sale</span><x-icon name="arrow" :size="17" /></button>
            <p class="pos-payment-note" id="pos-payment-note">Review and confirm to save the sale and reduce stock.</p>
        </div>
    </aside>
    <a class="pos-mobile-bill-link" href="#pos-bill"><span><x-icon name="receipt" :size="18" />View bill <small id="pos-mobile-count">0</small></span><strong id="pos-mobile-total">৳0</strong></a>
</div>
<div id="pos-notice" class="pos-notice" role="status" hidden></div>
<dialog id="pos-variant-dialog" class="pos-dialog" aria-labelledby="pos-variant-title"><div class="pos-dialog-heading"><h2 id="pos-variant-title">Choose a variant</h2><button type="button" class="icon-button" data-pos-close aria-label="Close variant picker"><x-icon name="close" /></button></div><div id="pos-variant-body"></div></dialog>
<dialog id="pos-customer-dialog" class="pos-dialog pos-customer-dialog" aria-labelledby="pos-customer-title"><div class="pos-dialog-heading"><h2 id="pos-customer-title">Customer details</h2><button type="button" class="icon-button" data-pos-close aria-label="Close customer dialog"><x-icon name="close" /></button></div><form id="pos-customer-form" method="dialog"><label>Customer name<input name="name" required minlength="2" maxlength="80" autocomplete="off"></label><label>Phone <small>Optional</small><input name="phone" type="tel" maxlength="25" autocomplete="off"></label><p>Saved on this invoice. Customer account linking will be added separately.</p><button type="submit" class="pos-primary-button">Use customer details</button></form></dialog>
<dialog id="pos-receipt-dialog" class="pos-dialog pos-receipt-dialog" aria-labelledby="pos-receipt-title"><div class="pos-dialog-heading"><h2 id="pos-receipt-title">Review sale</h2><button type="button" class="icon-button" data-pos-close aria-label="Close sale review"><x-icon name="close" /></button></div><div id="pos-receipt-body" data-brand="{{ $brand['name'] }}"></div><p id="pos-save-message" class="pos-save-message" role="status" aria-live="polite"></p><div class="pos-confirm-actions"><button type="button" class="pos-primary-button" id="pos-save-sale">Confirm &amp; save sale</button></div></dialog>
<script type="application/json" id="pos-products">{!! json_encode($posProducts, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) !!}</script>
<noscript><p>Enable JavaScript to use POS.</p></noscript>
@endsection