36037-vm/views/cashier_checkout.php

<?php
// Main view for the cashier checkout process
// This interface is designed for rapid entry via barcode scanner and manual search.
?>

<div class="row g-4">
    <!-- Left side: Cart and Checkout -->
    <div class="col-lg-5 col-md-12">
        <div class="card shadow-sm sticky-top" style="top: 1rem;">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h2 class="h5 mb-0">Current Sale</h2>
                <span class="badge bg-primary rounded-pill" id="cart-item-count">0</span>
            </div>
            <div class="card-body">
                <div id="cart-items" class="mb-3" style="max-height: 40vh; overflow-y: auto;">
                    <!-- Cart items will be injected here as a table -->
                    <div id="cart-placeholder" class="text-center text-muted p-4">
                        <p class="mb-0">Scan a barcode or search for a product to begin.</p>
                    </div>
                </div>
                <div class="d-grid gap-2">
                    <div class="row fs-5">
                        <div class="col">Subtotal:</div>
                        <div class="col text-end" id="cart-subtotal">PKR 0.00</div>
                    </div>
                    <div class="row text-muted">
                        <div class="col">Tax (0%):</div>
                        <div class="col text-end" id="cart-tax">PKR 0.00</div>
                    </div>
                    <hr class="my-1">
                    <div class="d-flex justify-content-between align-items-center fs-4 fw-bold">
                        <span>Total:</span>
                        <span id="cart-total">PKR 0.00</span>
                    </div>
                    <button id="complete-sale-btn" class="btn btn-success btn-lg" disabled>Complete Sale</button>
                    <div class="btn-group">
                        <button id="cancel-sale-btn" class="btn btn-outline-danger">Cancel Sale</button>
                        <button id="print-last-invoice-btn" class="btn btn-outline-secondary">Print Last Invoice</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Right side: Product Search and Barcode Input -->
    <div class="col-lg-7 col-md-12">
        <div class="card shadow-sm mb-4">
            <div class="card-header">
                <h2 class="h5 mb-0">Barcode Scan</h2>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label for="barcode-scanner-input" class="form-label">Scan Product Barcode</label>
                    <input type="text" id="barcode-scanner-input" class="form-control form-control-lg" placeholder="Ready for barcode scan..." autofocus>
                </div>
            </div>
        </div>
        <div class="card shadow-sm">
            <div class="card-header">
                <h2 class="h5 mb-0">Manual Product Search</h2>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <input type="text" id="product-search" class="form-control" placeholder="Start typing product name...">
                </div>
                <div id="product-grid" class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-3" style="max-height: 400px; overflow-y: auto;">
                    <!-- Search results will be injected here by JavaScript -->
                    <div id="product-grid-placeholder" class="col-12 text-center text-muted p-4">
                        <p>Search results will appear here.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Hidden Printable Invoice -->
<div id="invoice-container" class="d-none">
    <div id="printable-invoice" class="p-4">
        <div class="text-center mb-4">
            <h2 class="mb-1">Opulent POS</h2>
            <p class="mb-0">123 Business Rd, Cityville</p>
            <p>Sale Invoice</p>
        </div>
        <div class="row mb-3">
            <div class="col">
                <strong>Receipt No:</strong> <span id="invoice-receipt-number"></span><br>
                <strong>Cashier:</strong> <span id="invoice-cashier-name"></span>
            </div>
            <div class="col text-end">
                <strong>Date:</strong> <span id="invoice-date"></span>
            </div>
        </div>
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Item</th>
                    <th class="text-center">Qty</th>
                    <th class="text-end">Price</th>
                    <th class="text-end">Total</th>
                </tr>
            </thead>
            <tbody id="invoice-items-table">
                <!-- Items here -->
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="4" class="text-end">Subtotal:</th>
                    <td class="text-end" id="invoice-subtotal"></td>
                </tr>
                <tr>
                    <th colspan="4" class="text-end">Tax:</th>
                    <td class="text-end" id="invoice-tax"></td>
                </tr>
                <tr>
                    <th colspan="4" class="text-end fs-5">Total:</th>
                    <td class="text-end fs-5" id="invoice-total"></td>
                </tr>
            </tfoot>
        </table>
        <div class="text-center mt-4">
            <p class="small">Thank you for your business!</p>
        </div>
    </div>
</div>