<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enterprise ERP | Professional POS</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="style.css">
</head>
<body class="theme-modern">

    <aside id="sidebar" class="sidebar-collapsed">
        <div class="sidebar-header">
            <h5 class="m-0 fw-bold text-white">CORE<span class="text-primary">ERP</span></h5>
        </div>
        <nav class="nav flex-column">
            <div class="nav-link active" onclick="ui.view('dash')"><i class="bi bi-speedometer2"></i> <span>Dashboard</span></div>
            <div class="nav-link" onclick="ui.view('pos')"><i class="bi bi-cpu"></i> <span>Terminal</span></div>
            <div class="nav-link" onclick="ui.view('reports')"><i class="bi bi-file-bar-graph"></i> <span>Reports</span></div>
            <div class="nav-group-label">Inventory</div>
            <div class="nav-link" onclick="ui.view('products')"><i class="bi bi-box-seam"></i> <span>Products</span></div>
            <div class="nav-link" onclick="ui.view('masters')"><i class="bi bi-layers"></i> <span>Masters</span></div>
            <div class="nav-group-label">System</div>
            <div class="nav-link" onclick="ui.view('settings')"><i class="bi bi-gear"></i> <span>Settings</span></div>
        </nav>
    </aside>

    <main class="viewport">
        <header class="navbar-custom">
            <div class="d-flex align-items-center gap-3">
                <button class="btn btn-dark" onclick="ui.toggleSidebar()"><i class="bi bi-list"></i></button>
                <h6 id="current-view-title" class="m-0 fw-bold text-uppercase">Terminal</h6>
            </div>
            <div class="d-flex align-items-center gap-3">
                <span id="sync-status" class="badge bg-success-subtle text-success border border-success-subtle">Synced</span>
                <div class="user-profile">
                    <span class="small fw-medium" id="biz-name-display">Platinum Firm</span>
                </div>
            </div>
        </header>

        <section class="content-area">
            <div id="scr-pos" class="screen active">
                <div class="pos-layout">
                    <div class="pos-main">
                        <div class="category-bar mb-3" id="cat-scroll">
                            </div>
                        <div class="product-grid" id="pos-product-grid">
                            </div>
                    </div>
                    <aside class="pos-billing">
                        <div class="billing-header">ACTIVE TICKET</div>
                        <div class="cart-items" id="cart-list"></div>
                        <div class="billing-footer">
                            <div class="summary-row"><span>Subtotal</span><span id="sum-sub">₹0.00</span></div>
                            <div class="summary-row tax-row"><span>GST</span><span id="sum-tax">₹0.00</span></div>
                            <div class="summary-total mt-2"><span>Total</span><span id="sum-total">₹0.00</span></div>
                            <button class="btn btn-primary btn-lg w-100 mt-3 fw-bold shadow-sm" onclick="ui.openPayment()">CHECKOUT</button>
                        </div>
                    </aside>
                </div>
            </div>

            <div id="scr-products" class="screen">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
                        <h6 class="m-0 fw-bold">Manage Inventory</h6>
                        <button class="btn btn-primary btn-sm" onclick="ui.modalProduct()">+ Add Product</button>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead><tr><th>Item Name</th><th>Category</th><th>Counter</th><th>Stock</th><th>Price</th><th>Actions</th></tr></thead>
                            <tbody id="tbl-products-body"></tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            </section>
    </main>

    <div class="modal fade" id="modalProduct" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <div class="modal-header"><h5 class="fw-bold m-0">Product Setup</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
                <div class="modal-body">
                    <input type="hidden" id="f-id">
                    <div class="mb-3"><label class="form-label small fw-bold">Name</label><input type="text" id="f-name" class="form-control" placeholder="e.g. Espresso"></div>
                    <div class="row g-2 mb-3">
                        <div class="col-6"><label class="form-label small fw-bold">Price (₹)</label><input type="number" id="f-price" class="form-control"></div>
                        <div class="col-6"><label class="form-label small fw-bold">Current Stock</label><input type="number" id="f-stock" class="form-control"></div>
                    </div>
                    <div class="row g-2 mb-3">
                        <div class="col-6"><label class="form-label small fw-bold">Category</label><select id="f-cat" class="form-select"></select></div>
                        <div class="col-6"><label class="form-label small fw-bold">Counter/Station</label><select id="f-counter" class="form-select"></select></div>
                    </div>
                </div>
                <div class="modal-footer"><button class="btn btn-light" data-bs-dismiss="modal">Cancel</button><button class="btn btn-primary" onclick="app.saveProduct()">Save Product</button></div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalPay" tabindex="-1">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content text-center p-4">
                <h6 class="text-muted mb-1">TOTAL AMOUNT</h6>
                <h1 class="display-5 fw-bold text-primary mb-4" id="p-total">₹0.00</h1>
                <input type="number" id="p-cash" class="form-control form-control-lg text-center mb-3" placeholder="Cash Received">
                <div class="p-3 bg-light rounded mb-4">
                    <small class="text-muted d-block">BALANCE CHANGE</small>
                    <span class="h4 fw-bold text-success" id="p-bal">₹0.00</span>
                </div>
                <button class="btn btn-success btn-lg w-100 fw-bold" onclick="app.completeSale()">FINALIZE & PRINT</button>
            </div>
        </div>
    </div>

    <div id="print-area"></div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="pos-logic.js"></script>
</body>
</html>