<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hype Radio Sales Tracker</title>
    <link rel="icon" href="images/23324234.png">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Hype Radio Sales Tracker</h1>
        <a href="admin/admin-login.html" class="admin-button">Admin Panel</a>
    </header>

    <main>
        <div class="container">
            <!-- Sales Tracker Box -->
            <div class="box">
                <h2>Sales Tracker</h2>
                <form id="sales-form">
                    <label for="username">Customers Name:</label>
                    <input type="text" id="username" placeholder="Enter your name" required>

                    <label for="discord-id">Your Discord ID:</label>
                    <input type="text" id="discord-id" placeholder="Enter your Discord ID" required>

                    <label for="item">Item Sold:</label>
                    <select id="item" required>
                        <option value="Record">Record</option>
                        <option value="Boombox">Boombox</option>
                        <option value="Other">Other</option>
                    </select>

                    <label for="amount">Amount Sold:</label>
                    <input type="number" id="amount" min="1" required>

                    <button type="submit">Submit Sale</button>
                </form>
            </div>

            <!-- Shift Management Box -->
            <div class="box">
                <h2>Shift Management</h2>
                <button id="start-shift">Start Shift</button>
                <button id="end-shift">End Shift</button>
                <button id="show-shift-history">Shift History</button>
                <p id="shift-status">Shift Status: Not Started</p>
                <p id="current-shift-duration">Current Shift Duration: 0 hours and 0 minutes</p>
            </div>

            <!-- Current People on Shift Box -->
            <div class="box wide">
                <h2>Current People on Shift</h2>
                <ul id="current-people-on-shift">
                    <!-- Current people on shift entries will be added here -->
                </ul>
            </div>
        </div>
    </main>

    <!-- Success Popup -->
    <div id="popup" class="popup" style="display: none;">
        <p>Log Successfully Submitted!</p>
        <button onclick="closePopup()">Close</button>
    </div>

    <!-- Shift Type Modal -->
    <div id="shift-type-modal" class="modal">
        <div class="modal-content">
            <h2>What are you clocking on as?</h2>
            <button id="in-game-store">In game Store</button>
            <button id="live-presenting" onclick="showLivePresentingPopup()">Live Presenting</button>
        </div>
    </div>

    <!-- Live Presenting Popup -->
    <div id="live-presenting-popup" class="popup" style="display: none;">
        <p>Please run the command /assignrole in the discord</p>
        <button onclick="closeLivePresentingPopup()">Close</button>
    </div>

    <!-- Shift History Modal -->
    <div id="shift-history-modal" class="modal" style="display: none;">
        <div class="modal-content">
            <h2>Shift History</h2>
            <ul id="shift-history">
                <!-- Shift history entries will be added here -->
            </ul>
            <button onclick="closeShiftHistoryModal()">Close</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>