<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title id="title">SHOP</title>
    <link rel="stylesheet" href="style.css">
    <!-- FontAwesome v4 CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow:wght@600&display=swap">
</head>
<body style="display: none;">
    <div class="container">
        <div class="pos-window">
            <button class="close-button-global"><i class="fa fa-times"></i></button>
            <!-- Sidebar -->
            <div class="sidebar">
                <!-- User Info -->
                <div class="user-info">
                    <img src="" alt="User Avatar">
                    <div>
                        <h2 id="shop-name"></h2>
                        <p id="shop-location-name"></p>
                    </div>
                </div>
                <!-- Navigation Menu -->
                <nav id="category-nav">
                    <h3 id="menu-title"></h3>
                    <ul id="category-list">
                        <!-- Categories will be generated here -->
                    </ul>
                </nav>
                <!-- Footer -->
                <div class="footer">
                    <a href="https://mrhunter.tebex.io" target="_blank">MADE BY MRHUNTER</a>
                </div>
            </div>
            <!-- Main Content -->
            <div class="main-content">
                <!-- Search Bar -->
                <div class="search-bar">
                    <input type="text" id="search-input" placeholder="">
                    <button id="clear-search"></button>
                </div>
                <!-- Menu Items Grid -->
                <div id="menu-items" class="menu-items">
                    <!-- Menu items will be generated here -->
                </div>
                <!-- Blank Footer in Main Content -->
                <div class="main-footer">
                    <!-- Blank Footer -->
                </div>
            </div>
            <div class="order-summary">
                <!-- Order Summary Header -->
                <div class="order-summary-header">
                    <h2 id="order-summary-title"></h2>
                </div>

                <!-- Cart Items -->
                <div id="cart-items" class="cart-items">
                    <p id="cart-empty-text"></p>
                </div>

                <!-- Bottom Section -->
                <div class="order-summary-bottom" style="position: absolute; bottom: 20px; width: calc(100% - 40px);">
                    <!-- Bill Calculation -->
                    <div class="bill">
                        <div class="bill-item">
                            <span id="subtotal-text"></span>
                            <span id="subtotal">$0.00</span>
                        </div>
                        <div class="bill-item">
                            <span id="tax-text"></span>
                            <span id="tax">$0.00</span>
                        </div>
                        <div class="bill-item total">
                            <span id="total-text"></span>
                            <span id="total">$0.00</span>
                        </div>
                    </div>

                    <!-- Payment Methods -->
                    <div class="payment-methods">
                        <h3 id="payment-method-title"></h3>
                        <div id="payment-methods" class="payment-methods-container">
                            <button data-method="Cash" class="payment-method" id="cash-button"></button>
                            <button data-method="Card" class="payment-method" id="card-button"></button>
                        </div>
                    </div>

                    <!-- Place Order Button -->
                    <button id="place-order" disabled></button>
                </div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>
