@extends('layouts.app')
@section('title','Point of Sale')
@section('page_title','Point of Sale (POS)')
@section('content')
@if($errors->any())<div class="error-box">{{ $errors->first() }}</div>@endif

<div id="posApp" class="progressive-pos">
    <div class="pos-status-banner" id="posStatusBanner" hidden><span id="posConnectionDot" class="connection-dot offline"></span><div><strong id="posConnectionTitle">Offline</strong><small id="posConnectionText">Sales will save safely on this device.</small></div><span id="posPendingCount" class="status-pill status-warning" hidden>Pending Sync</span></div>

    <form method="POST" action="{{ route('pos.store') }}" id="saleForm" class="quick-pos-form">@csrf
        <input type="hidden" name="items" id="itemsField">
        <input type="hidden" name="overall_discount_amount" id="overallDiscountField" value="0">
        <input id="product_id" type="hidden" value="">
        <div class="pos-flow-bar" aria-label="Sale progress"><div class="active" id="productsStageIndicator"><span>1</span><strong>Add Products</strong></div><i></i><div id="reviewStageIndicator"><span>2</span><strong>Review & Pay</strong></div></div>
        <div class="quick-pos-layout" id="quickPosLayout">
    <section class="card pos-products pos-product-explorer" id="productExplorerStage">
        <div class="pos-step-heading quick-pos-heading"><span><x-icon name="cart" /></span><div><h2>Add Products</h2><p>Tap a selling unit to add it straight to the cart.</p></div></div>
        <div class="pos-source-tabs" role="tablist" aria-label="Product source">
            <button class="active" id="shopProductsTab" type="button" role="tab" aria-selected="true" aria-controls="catalogProductsPanel"><x-icon name="product" /><span>Shop Products</span></button>
            @if($outsideShopEnabled)<button id="openManualOutsideBtn" type="button" role="tab" aria-selected="false" aria-controls="manualOutsidePanel"><x-icon name="stock" /><span>Outside Shop Product</span></button>@endif
        </div>
        <div id="catalogProductsPanel" role="tabpanel" aria-labelledby="shopProductsTab">
        <div class="pos-explorer-toolbar">
            <div class="form-group"><label>Search Products</label><input id="posProductSearch" placeholder="Start typing a product name..." autocomplete="off"></div>
            <div class="form-group"><label>Category</label><select id="posCategoryFilter"><option value="">All Categories</option>@foreach($products->groupBy('category_id') as $categoryId=>$categoryProducts)<option value="{{ $categoryId }}">{{ $categoryProducts->first()['category'] ?? 'General Products' }}</option>@endforeach</select></div>
            <div class="form-group"><label>Arrange By</label><select id="posProductSort"><option value="top_selling">Top Selling</option><option value="az">Name A–Z</option><option value="za">Name Z–A</option><option value="price_asc">Price Low–High</option><option value="price_desc">Price High–Low</option></select></div>
        </div>

        <div class="product-grid pos-paged-grid" id="productGrid"></div>
        <div class="pos-pagination"><button type="button" class="btn btn-secondary btn-small" id="posPrevPage">Previous</button><strong id="posPageStatus">0 products</strong><button type="button" class="btn btn-secondary btn-small" id="posNextPage">Next</button></div>
        <div id="posNoProducts" class="empty-state" hidden>No products match your search.</div>
        </div>
            @if($outsideShopEnabled)<section class="manual-outside-panel" id="manualOutsidePanel" hidden>
                <div class="table-toolbar"><div><h3>Outside Shop Product</h3><p class="muted-small outside-helper">Start typing a product name. Existing shop products are suggested without using their shop stock.</p></div><button type="button" class="icon-link" id="closeManualOutsideBtn" title="Return to shop products" aria-label="Return to shop products">×</button></div>
                <div class="outside-smart-search">
                    <div class="form-group outside-name-field"><label>Product Name</label><input id="manual_name" placeholder="Start typing product name..." autocomplete="off" aria-autocomplete="list" aria-controls="outsideProductSuggestions"><div class="outside-suggestions" id="outsideProductSuggestions" role="listbox" hidden></div></div>
                    <div class="outside-selected-product" id="outsideSelectedProduct" hidden></div>
                </div>
                <div class="sale-controls manual-simple-controls">
                    <div class="form-group outside-source-shop-field"><label>Source Shop / Store</label><input id="manual_source_shop_name" maxlength="180" placeholder="Example: Juma Wholesale" autocomplete="organization"></div>
                    <div class="form-group"><label>Category</label><input id="manual_category_name" value="Outside Purchase" readonly></div>
                    <div class="form-group"><label>Selling Type</label><select id="manual_selling_type"><option value="single">Single Item</option><option value="wholesale">Wholesale Item</option></select></div>
                    <div class="form-group"><label>Unit</label><input id="manual_unit_name" placeholder="Example: Piece, Carton, Bag"></div>
                    <div class="form-group"><label>Quantity</label><input id="manual_quantity" type="number" min="1" step="1" value="1"></div>
                    <div class="form-group"><label>Outside Purchase Cost per Unit (TZS)</label><input id="manual_cost" type="number" min="0" step="10" value="" placeholder="Amount paid outside"></div>
                    <div class="form-group"><label>Selling Price per Unit (TZS)</label><input id="manual_price" type="number" min="1" step="10" value="" placeholder="Enter selling price"></div>
                </div>
                <div class="line-preview" id="manualLinePreview">Line Total: TZS 0</div><div class="pos-item-buttons"><button class="btn" type="button" id="addManualItemBtn">+ Add Outside Product</button><button class="btn btn-danger-outline" type="button" id="clearManualItemBtn">Clear</button></div>
            </section>@endif
    </section>

        <section class="card current-sale quick-pos-cart" id="currentSalePanel">
            <div class="current-sale-head"><div><span class="step-kicker">Live cart</span><h3>Current Sale</h3><small id="cartHeaderCount">0 items</small></div><div class="current-sale-head-actions"><button class="btn btn-danger-outline" type="button" id="clearCartBtn">Clear Cart</button><button class="icon-link mobile-cart-close" type="button" id="mobileCloseCart" aria-label="Close cart">×</button></div></div>
            <div class="cart-column-head" aria-hidden="true"><span>Product</span><span>Quantity</span><span>Subtotal</span></div>
            <div id="cartBody" class="cart-list"><div class="empty-state">Cart is empty.</div></div>
            <div class="cart-build-footer"><div class="cart-build-totals"><div><span>Subtotal</span><strong id="cartSubtotal">TZS 0</strong></div><div id="checkoutDiscountRow" hidden><span>Product discounts</span><span class="checkout-discount-value"><strong id="cartDiscount">TZS 0</strong><button id="clearAllDiscountsBtn" type="button" title="Remove all product discounts" aria-label="Remove all product discounts" hidden>×</button></span></div><div id="cartOverallDiscountRow" hidden><span>Overall discount</span><strong id="cartOverallDiscount">TZS 0</strong></div><div class="cart-build-total"><span>Total</span><strong id="cartTotal">TZS 0</strong></div></div><div class="checkout-meta"><small id="cartItemsCount">0 items</small><small id="checkoutModeHint"></small></div><button class="btn btn-full" type="button" id="reviewSaleBtn" disabled>Review Sale <span>→</span></button></div>
        </section>
        </div>

        <section class="sale-review-stage" id="saleReviewStage" hidden>
            <div class="review-stage-head"><div><span class="step-kicker">Final check</span><h2>Review Your Sale</h2><p>Confirm every product, quantity and discount before payment.</p></div></div>
            <div class="sale-review-layout">
                <section class="card review-products-card" id="reviewProductsStage"><div class="review-card-head"><div><h3>Products in this sale</h3><p id="reviewItemsCount">0 items</p></div><button class="btn btn-secondary btn-small" type="button" id="reviewAddProductsBtn">+ Add Products</button></div><div class="review-table-head" aria-hidden="true"><span>Product</span><span>Quantity</span><span>Subtotal</span><span>Actions</span></div><div id="reviewItemsBody" class="review-items-list"></div></section>
                <div class="review-stage-actions" id="reviewStageActions"><button class="btn btn-secondary" type="button" id="reviewBackToShopBtn">← Back to Shop</button><button class="btn" type="button" id="proceedToPaymentBtn">Proceed to Payment →</button></div>
                <aside class="card payment-summary-card" id="reviewPaymentStage" hidden><div class="payment-summary-head"><span class="step-kicker">Payment</span><h3>Payment Summary</h3></div><div class="payment-breakdown"><div><span>Subtotal</span><strong id="reviewSubtotal">TZS 0</strong></div><div id="reviewProductDiscountRow" hidden><span>Product discounts</span><strong id="reviewProductDiscount">− TZS 0</strong></div></div><label class="overall-discount-toggle"><input id="overallDiscountEnabled" type="checkbox"><span><strong>Apply overall sale discount</strong><small>Optional · TZS amount</small></span></label><div class="overall-discount-control" id="overallDiscountControl" hidden><label for="overallDiscountAmount">Overall Discount (TZS)</label><div class="discount-input-row"><input id="overallDiscountAmount" type="text" inputmode="numeric" data-money-input value="" placeholder="Enter discount"><button class="discount-clear-button" id="clearOverallDiscountBtn" type="button" title="Remove overall discount" aria-label="Remove overall discount">×</button></div><small class="field-alert" id="overallDiscountAlert" hidden>Discount exceeds the allowed limit.</small></div><div class="review-grand-total"><span id="reviewTotalLabel">Total to Pay</span><strong id="reviewTotal">TZS 0</strong></div><div class="payment-status-block" id="paymentStatusBlock"><div class="payment-status-label">Payment Status <span>Choose one</span></div><div class="payment-status-choice" role="radiogroup" aria-label="Payment status"><label><input type="radio" name="payment_status" value="paid" required autocomplete="off"><span><strong>Paid</strong></span></label><label><input type="radio" name="payment_status" value="pending" required autocomplete="off"><span><strong>Payment Pending</strong></span></label></div><small class="payment-status-error" id="paymentStatusError" hidden>Please choose Paid or Payment Pending.</small></div><div class="pending-customer-panel" id="pendingCustomerPanel" hidden><div><strong>Who will pay?</strong><small>Add a name or phone number so the balance is easy to follow up.</small></div><div class="pending-customer-fields"><div class="form-group"><label for="customer_name">Customer Name</label><input name="customer_name" id="customer_name" maxlength="160" autocomplete="name" placeholder="Example: Asha"></div><div class="form-group"><label for="customer_phone">Phone Number</label><input name="customer_phone" id="customer_phone" maxlength="60" inputmode="tel" autocomplete="tel" placeholder="Example: 07xx xxx xxx"></div></div><small class="payment-status-error" id="pendingCustomerError" hidden>Add at least a customer name or phone number.</small></div><div class="form-group" id="paymentMethodGroup"><label>Payment Method</label><select name="payment_method" id="payment_method">@foreach($paymentMethods as $key=>$label)<option value="{{ $key }}">{{ $label }}</option>@endforeach</select><small id="paymentMethodHint">Choose the payment method.</small></div><details class="checkout-note"><summary>Add a sale note <span>Optional</span></summary><div class="form-group"><label>Sale Note</label><input name="note" id="note" placeholder="Add a short note if needed"></div></details><button class="btn btn-full review-complete-button" type="submit" id="completeSaleBtn" disabled>Complete Sale</button><div class="review-secondary-actions"><button class="btn btn-secondary btn-small" type="button" id="backToReviewItemsBtn">← Back to Items</button><button class="btn btn-secondary btn-small review-edit-sale" type="button" id="reviewEditSaleBtn">Edit Sale</button><a class="btn btn-danger-outline btn-small pos-cancel-link" href="{{ route('dashboard') }}" id="cancelSaleLink">Cancel Sale</a></div></aside>
            </div>
        </section>

        <div class="cart-edit-modal" id="cartEditModal" hidden role="dialog" aria-modal="true" aria-labelledby="cartEditTitle">
            <section class="card pos-item-config">
                <div class="cart-edit-head"><div><span class="step-kicker">Cart item</span><h2 id="cartEditTitle">Edit Item</h2><p id="productHint">Adjust quantity, price or discount.</p></div><button class="icon-link" type="button" id="closeCartEdit" aria-label="Close item editor">×</button></div>
                <div id="selectedProductBox" class="selected-product">No product selected.</div>
                <div id="productConfigPanel" class="progressive-sale-panel" hidden>
                    <div class="auto-selling-type" id="automaticSellingType" hidden></div>
                    <div class="stock-unavailable-notice" id="stockUnavailableNotice" hidden><strong>Out of Stock</strong><span>This product has no sellable stock remaining.</span></div>
                    <div class="form-group" id="sellingTypeGroup" hidden><label>Selling Type</label><select id="selling_type"><option value="">Choose selling type</option></select></div>
                    <div id="saleDetailFields" hidden>
                        <div class="sale-controls">
                            <div class="form-group"><label id="quantityLabel">Quantity</label><input id="quantity" type="number" min="1" step="1" value="1"><small id="availableForType"></small></div>
                            <div class="form-group"><label id="priceLabel">Selling Price (TZS)</label><input id="unit_price" type="number" min="0" step="1" value="0"></div>
                            <label class="discount-enable-toggle" id="lineDiscountToggle" hidden><input id="discount_enabled" type="checkbox"><span>Apply a line discount</span></label>
                            <div class="form-group sale-discount-field" id="discountField" hidden><label>Discount (TZS) <span class="muted-small">(Optional)</span></label><div class="discount-input-row"><input id="discount_amount" type="number" min="0" step="1" value="" placeholder="Enter discount"><button class="discount-clear-button" id="clearDiscountBtn" type="button" title="Remove discount" aria-label="Remove discount">×</button></div><small id="discountAlert" class="field-alert" hidden>Discount exceeds the allowed limit.</small></div>
                        </div>
                        <div class="line-preview" id="linePreview">Line Total: TZS 0</div><div class="pos-item-buttons"><button class="btn" type="button" id="addItemBtn">Save Changes</button><button class="btn btn-secondary" type="button" id="clearItemBtn">Cancel</button></div>
                    </div>
                </div>
            </section>
        </div>

        <div class="mobile-cart-overlay" id="mobileCartOverlay" hidden></div>
        <div class="mobile-cart-dock" id="mobileCartDock" hidden>
            <div class="mobile-cart-dock-summary"><span class="mobile-cart-dock-icon"><x-icon name="cart" /><b id="mobileCartProductBadge">0</b></span><div class="mobile-cart-dock-copy"><small id="mobileCartItems">0 products in cart</small><strong id="mobileCartTotal">TZS 0</strong></div></div>
            <div class="mobile-cart-dock-actions"><button class="btn btn-secondary" type="button" id="mobileViewCart">View Cart</button><button class="btn" type="button" id="mobileCheckout">Review Sale</button></div>
        </div>
    </form>
</div>

<div class="sale-success-modal" id="saleSuccessModal" hidden role="dialog" aria-modal="true" aria-labelledby="saleSuccessTitle">
    <div class="sale-success-dialog"><div class="sale-success-heading"><div><span class="success-check">✓</span><div><h2 id="saleSuccessTitle">Sale completed successfully</h2><p>Invoice reference: <strong id="successInvoiceReference"></strong></p></div></div><button type="button" class="icon-link" id="closeSaleSuccess" title="Close" aria-label="Close sale confirmation">×</button></div>
    <div class="sale-success-grid"><section class="sale-success-summary"><h3>Sale Summary</h3><dl id="saleSuccessSummary"></dl></section><section class="sale-success-actions"><h3>What next?</h3><div class="success-action-buttons"><div class="completion-primary-row"><button class="btn" type="button" id="successNewSale">Start New Sale</button><a class="btn btn-secondary" id="successViewSale">View Sale</a></div>@if($invoiceEnabled || $receiptEnabled)<div class="completion-document-actions" id="successDocumentActions"><span>Sale documents</span><div>@if($receiptEnabled)<a class="btn btn-secondary" id="successPrintReceipt">Receipt</a>@endif @if($invoiceEnabled)<a class="btn btn-secondary" id="successViewInvoice">Invoice</a>@endif</div></div>@endif<a class="success-history-button" id="successViewSales">View Sales History</a></div></section></div>
    </div>
</div>

@php $posData=['products'=>$products,'shopName'=>$shopName,'salesUrl'=>route('sales.index'),'outsideShopEnabled'=>$outsideShopEnabled]; @endphp
<script id="posData" type="application/json">{!! json_encode($posData, JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_APOS|JSON_HEX_QUOT) !!}</script>
<script src="{{ asset('js/pos.js') }}?v=10039" defer></script>
@endsection