<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://kit.fontawesome.com/78879dfdec.js" crossorigin="anonymous"></script>
        <audio id="clickSound" src="https://pic.pikbest.com/00/56/79/04e888piCYRV.mp3"></audio>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div id="vehicleUI" style="display:none;">
            <div class="modal">
                <div id="loadingSpinner" class="spinner"></div>

                <div class="container"> 

                    <div class="header">
                        <div class="profile-container" id="profileContainer">
                            <img src="https://via.placeholder.com/50" alt="Profile" class="profile-image" id="profileImage" style="cursor: pointer;">
                            <div class="profile-info">
                                <div class="profile-name">Player Name</div>
                                <div class="profile-level">Level: <span id="profileLevel">10</span></div>
                            </div>
                        </div>

                        <div class="tab-container">
                            <button class="tab active" data-tab="home">
                                <i class="fas fa-truck"></i>
                            </button>
                            <button class="tab" data-tab="history">
                                <i class="fas fa-history"></i>
                            </button>
                            <button class="tab" data-tab="topList"> <!-- New Top List tab -->
                                <i class="fas fa-trophy"></i> <!-- Optional: Icon for Top List -->
                            </button>
                            <button class="close-btn" id="closeBtn">&times;</button>
                        </div>
                        
                    </div>

                    <div class="tab-content" id="homeContent">
                        <h2>Choose a Truck</h2>
                        <p class="description">Select a truck from the available options to start your delivery.</p>
                        <div class="carousel-container">
                            <button class="arrow left-arrow" id="leftArrow">&#10094;</button>
                            <div id="vehicleGrid" class="vehicle-grid"></div>
                            <button class="arrow right-arrow" id="rightArrow">&#10095;</button>
                        </div>
                        <div id="dotIndicators" class="dot-indicators"></div>
                    </div>

                    <div class="tab-content" id="historyContent" style="display: none;">
                        <h2>Deliveries History</h2>
                        <p class="description">View your past deliveries, including status, earnings, and delivery times.</p>
                        <div class="history-container">
                            <table class="history-table">
                                <thead>
                                    <tr>
                                        <th>Delivery ID</th>
                                        <th>Status</th>
                                        <th>Started at</th>
                                        <th>Total Deliveries</th>
                                        <th>Total Earnings</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Rows will be dynamically generated here -->
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="tab-content" id="topListContent" style="display: none;">
                        <h2>Top Players</h2>
                        <p class="description">Check out the top players based on their level and total deliveries.</p>
                        <div class="top-list-container">
                            <table class="top-list-table">
                                <thead>
                                    <tr>
                                        <th>Player</th>
                                        <th>Level</th>
                                        <th>Total Deliveries</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Rows will be dynamically generated here -->
                                </tbody>
                            </table>
                        </div>
                    </div>

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