<?php
// Start session at the very beginning
session_start();

// Simple routing for API calls
if (isset($_GET['url']) && strpos($_GET['url'], 'api/') === 0) {
    $api_file = $_GET['url'];

    // Security: Prevent path traversal and only allow .php files within the 'api' directory.
    $api_base_path = realpath(__DIR__ . '/api');
    $requested_path = realpath(__DIR__ . '/' . $api_file);

    // Check if the resolved path is within the api base path and the file exists.
    if ($requested_path && strpos($requested_path, $api_base_path) === 0 && pathinfo($requested_path, PATHINFO_EXTENSION) === 'php') {
        require_once $requested_path;
        exit;
    }

    // If we reach here, the file is not found or not allowed.
    http_response_code(404);
    header('Content-Type: application/json');
    echo json_encode(['success' => false, 'message' => 'API endpoint not found.']);
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quicky Quicky - Delivery Service</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/auth.css">
</head>
<body>
    <div id="app">
        <!-- Header will be loaded here -->
        <div id="header"></div>
        
        <!-- Main content area -->
        <main id="main-content">
            <div class="loading">Loading Quicky Quicky...</div>
        </main>
        
        <!-- Footer navigation -->
        <div id="footer-nav"></div>
        
        <!-- Account menu - Moved outside app div for better z-index control -->
    </div>

    <!-- Account menu placed here for proper z-index -->
    <div id="account-menu" class="account-menu"></div>

    <!-- Notification container -->
    <div id="notification-container"></div>

    <!-- Templates -->
    <template id="header-template">
        <header>
            <div class="logo">Quicky<span>Quicky</span></div>
            <div class="header-icons" id="header-icons">
                <!-- Icons will be populated based on login status -->
            </div>
        </header>
    </template>

    <template id="footer-template">
        <nav class="footer-nav">
            <div class="nav-item active" data-page="home">
                <i class="fas fa-home"></i>
                <span>Home</span>
            </div>
            <div class="nav-item" data-page="orders">
                <i class="fas fa-clipboard-list"></i>
                <span>Orders</span>
            </div>
            <div class="nav-item" data-page="shops">
                <i class="fas fa-store"></i>
                <span>Shops</span>
            </div>
            <div class="nav-item account-trigger" id="account-menu-trigger">
                <i class="fas fa-user"></i>
                <span>Account</span>
            </div>
        </nav>
    </template>

    <template id="account-menu-template">
        <div class="account-menu-content">
            <div class="account-header">
                <div class="account-avatar">
                    <i class="fas fa-user"></i>
                </div>
                <div class="account-info">
                    <h3 id="user-name">Guest</h3>
                    <p id="user-email">Please log in</p>
                </div>
            </div>
            <div class="menu-items" id="menu-items">
                <!-- Menu items will be populated based on login status and role -->
            </div>
        </div>
    </template>

    <template id="header-icons-loggedin">
        <button class="icon-btn" id="messages-btn">
            <i class="fas fa-comment-dots"></i>
        </button>
        <button class="icon-btn" id="notifications-btn">
            <i class="fas fa-bell"></i>
            <span class="notification-badge"></span>
        </button>
        <button class="icon-btn" id="cart-btn">
            <i class="fas fa-shopping-cart"></i>
            <span class="notification-badge"></span>
        </button>
    </template>

    <template id="header-icons-loggedout">
        <button class="icon-btn" id="login-btn">
            <i class="fas fa-sign-in-alt"></i>
            <span class="btn-text">Login</span>
        </button>
        <button class="icon-btn" id="register-btn">
            <i class="fas fa-user-plus"></i>
            <span class="btn-text">Register</span>
        </button>
    </template>

    <template id="cart-panel-template">
        <div id="cart-panel" class="cart-panel">
            <div class="cart-header">
                <h3>Your Cart</h3>
                <button class="close-btn" onclick="document.getElementById('cart-panel').classList.remove('active')">&times;</button>
            </div>
            <div class="cart-body">
                <div id="cart-items">
                    <!-- Cart items will be rendered here -->
                </div>
            </div>
            <div class="cart-footer">
                <div id="cart-summary">
                    <!-- Cart summary will be rendered here -->
                </div>
            </div>
        </div>
    </template>

    <!-- JavaScript Files -->
    <script src="assets/js/modal.js"></script>
    <script src="assets/js/notifications.js"></script>
    <script src="assets/js/slideshow.js"></script>
    <script src="assets/js/auth.js"></script> <!-- Defines AuthManager -->
    <script src="assets/js/customer.js"></script> <!-- Defines CustomerManager -->
    <script src="assets/js/ShopService.js"></script> <!-- Handles Shop API calls -->
    <script src="assets/js/ShopUI.js"></script> <!-- Handles Shop UI rendering -->
    <script src="assets/js/shop.js"></script> <!-- Defines ShopManager -->
    <script src="assets/js/rider.js"></script> <!-- Defines RiderManager -->
    <script src="assets/js/admin.js"></script> <!-- Defines AdminManager -->
    <script src="assets/js/cart.js"></script> <!-- Defines CartManager -->
    <!-- Main app script, must be loaded last -->
    <script src="assets/js/app.js"></script>
    <script>
        new MabangaExpress();
    </script>
</body>
</html>