V15

assets/js/main.js

@@ -1,116 +1,12 @@
 document.addEventListener('DOMContentLoaded', function() {
-    const addressDisplay = document.getElementById('address-display');
-    const addressContainer = document.querySelector('.address-container');
-    const modal = document.getElementById('address-modal');
-    const closeButton = document.querySelector('.close-button');
-    const saveAddressButton = document.getElementById('save-address-button');
-    const modalAddressInput = document.getElementById('modal-address-input');
+    const hamburger = document.querySelector('.hamburger');
+    const navLinks = document.querySelector('.nav-links');
+    const navActions = document.querySelector('.nav-actions');
 
-    // Load and display saved address
-    const savedAddress = localStorage.getItem('deliveryAddress');
-    if (savedAddress) {
-        addressDisplay.textContent = savedAddress;
-    } else {
-        addressDisplay.textContent = 'Enter delivery address';
-    }
-
-    // Open modal
-    if (addressContainer) {
-        addressContainer.addEventListener('click', function() {
-            if (modal) {
-                modal.style.display = 'block';
-                modalAddressInput.value = localStorage.getItem('deliveryAddress') || '';
-            }
+    if (hamburger) {
+        hamburger.addEventListener('click', () => {
+            navLinks.classList.toggle('active');
+            navActions.classList.toggle('active');
         });
     }
-
-    // Close modal
-    if(closeButton) {
-        closeButton.addEventListener('click', function() {
-            if (modal) modal.style.display = 'none';
-        });
-    }
-
-
-    window.addEventListener('click', function(event) {
-        if (event.target == modal) {
-            modal.style.display = 'none';
-        }
-    });
-
-    // Save address
-    if(saveAddressButton) {
-        saveAddressButton.addEventListener('click', function() {
-            const newAddress = modalAddressInput.value.trim();
-            if (newAddress) {
-                localStorage.setItem('deliveryAddress', newAddress);
-                addressDisplay.textContent = newAddress;
-                modal.style.display = 'none';
-            } else {
-                alert('Please enter an address.');
-            }
-        });
-    }
-
-    // Search functionality for index.php
-    const searchInput = document.getElementById('search-input');
-    if (searchInput) {
-        const restaurantGrid = document.getElementById('restaurant-grid');
-        const restaurantCards = restaurantGrid.querySelectorAll('a.restaurant-card');
-
-        searchInput.addEventListener('keyup', function () {
-            const searchTerm = searchInput.value.toLowerCase();
-
-            restaurantCards.forEach(card => {
-                const name = card.dataset.name || '';
-                const cuisine = card.dataset.cuisine || '';
-
-                if (name.includes(searchTerm) || cuisine.includes(searchTerm)) {
-                    card.style.display = 'flex';
-                } else {
-                    card.style.display = 'none';
-                }
-            });
-        });
-    }
-
-    // Search functionality for menu.php
-    const menuSearchInput = document.getElementById('menu-search-input');
-    if (menuSearchInput) {
-        const menuGrid = document.getElementById('menu-grid');
-        const menuItems = menuGrid.querySelectorAll('.menu-item-card');
-
-        menuSearchInput.addEventListener('keyup', function () {
-            const searchTerm = menuSearchInput.value.toLowerCase();
-
-            menuItems.forEach(card => {
-                const name = card.dataset.name || '';
-                const description = card.dataset.description || '';
-
-                if (name.includes(searchTerm) || description.includes(searchTerm)) {
-                    card.style.display = 'flex';
-                } else {
-                    card.style.display = 'none';
-                }
-            });
-        });
-    }
-
-    // Filter dropdown
-    const filterDropdown = document.querySelector('.filter-dropdown');
-    if (filterDropdown) {
-        const filterButton = filterDropdown.querySelector('.filter-button');
-        const filterOptions = filterDropdown.querySelector('.filter-options');
-
-        filterButton.addEventListener('click', () => {
-            const isVisible = filterOptions.style.display === 'block';
-            filterOptions.style.display = isVisible ? 'none' : 'block';
-        });
-
-        window.addEventListener('click', (event) => {
-            if (!filterDropdown.contains(event.target)) {
-                filterOptions.style.display = 'none';
-            }
-        });
-    }
-});
+});

header.php

@@ -6,68 +6,44 @@ session_start();
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Majuro Eats</title>
+    <title>MajuroEats - Fast Island Delivery</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="assets/css/main.css?v=<?php echo time(); ?>">
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
 </head>
 <body>
 
-<header>
-    <a href="/" class="logo">Majuro Eats</a>
-    <div class="address-container">
-        <span id="address-display">Enter delivery address</span>
-    </div>
-    
-    <div class="user-actions">
-        <?php
-        require_once 'db/config.php';
-        $cart_item_count = 0;
-        $db = db();
-        if (isset($_SESSION['user_id'])) {
-            $stmt = $db->prepare('SELECT SUM(quantity) as item_count FROM cart WHERE user_id = ?');
-            $stmt->execute([$_SESSION['user_id']]);
-            $result = $stmt->fetch();
-            if ($result && $result['item_count'] > 0) {
-                $cart_item_count = $result['item_count'];
-            }
-        } else {
-            $stmt = $db->prepare('SELECT SUM(quantity) as item_count FROM cart WHERE session_id = ?');
-            $stmt->execute([session_id()]);
-            $result = $stmt->fetch();
-            if ($result && $result['item_count'] > 0) {
-                $cart_item_count = $result['item_count'];
-            }
-        }
-        ?>
-        <a href="cart.php" class="cart-icon">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
-            <span class="cart-item-count"><?= $cart_item_count ?></span>
-        </a>
-        <?php if (isset($_SESSION['user_id'])): ?>
-            <span>Welcome, <?php echo htmlspecialchars($_SESSION['user_name']); ?></span>
-            <a href="profile.php">My Profile</a>
-            <a href="order_history.php">Order History</a>
-            <a href="logout.php">Logout</a>
-        <?php else: ?>
-            <a href="login.php">Login</a>
-            <a href="signup.php">Sign Up</a>
-        <?php endif; ?>
+<header class="main-header">
+    <div class="container">
+        <nav class="main-nav">
+            <a href="/" class="logo">
+                <span class="logo-icon">🌊</span>
+                <span class="logo-text">MajuroEats</span>
+            </a>
+            <ul class="nav-links">
+                <li><a href="/">Home</a></li>
+                <li><a href="index.php">Restaurants</a></li>
+                <li><a href="#">Rewards</a></li>
+                <li><a href="driver_signup.php">Driver</a></li>
+                <li><a href="#">Help</a></li>
+            </ul>
+            <div class="nav-actions">
+                <?php if (isset($_SESSION['user_id'])): ?>
+                    <a href="profile.php" class="nav-link-button">Profile</a>
+                    <a href="logout.php" class="nav-button primary">Logout</a>
+                <?php else: ?>
+                    <a href="login.php" class="nav-link-button">Sign In</a>
+                    <a href="signup.php" class="nav-button primary">Sign Up</a>
+                <?php endif; ?>
+            </div>
+            <button class="hamburger">
+                <span></span>
+                <span></span>
+                <span></span>
+            </button>
+        </nav>
     </div>
 </header>
 
-<!-- The Modal -->
-<div id="address-modal" class="modal">
-    <div class="modal-content">
-        <span class="close-button">&times;</span>
-        <h2>Enter your delivery address</h2>
-        <input type="text" id="modal-address-input" placeholder="e.g. Uliga, Majuro">
-        <button id="save-address-button">Save Address</button>
-    </div>
-</div>
-
-<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
-<script src="assets/js/main.js?v=<?php echo time(); ?>" defer></script>
-
+<main>

hero.php

@@ -1,103 +1,15 @@
-<?php
-function get_hero_image() {
-    // Check if we have a cached image URL
-    if (isset($_SESSION['hero_image_url'])) {
-        return $_SESSION['hero_image_url'];
-    }
-
-    // If not, fetch a new one from Pexels
-    require_once __DIR__ . '/includes/pexels.php';
-    $query = 'island food';
-    $orientation = 'landscape';
-    $url = 'https://api.pexels.com/v1/search?query=' . urlencode($query) . '&orientation=' . urlencode($orientation) . '&per_page=1&page=' . rand(1, 100);
-    $data = pexels_get($url);
-
-    if (!empty($data['photos'])) {
-        $photo = $data['photos'][0];
-        $image_url = $photo['src']['large2x'] ?? $photo['src']['large'];
-        
-        // Cache the URL in the session
-        $_SESSION['hero_image_url'] = $image_url;
-
-        return $image_url;
-    }
-
-    // Fallback image
-    return 'assets/images/hero.jpg';
-}
-
-$hero_image_url = get_hero_image();
-?>
-
-<style>
-.hero-section {
-    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('<?= $hero_image_url ?>');
-    background-size: cover;
-    background-position: center;
-    color: white;
-    text-align: left;
-    padding: 100px 50px;
-    display: flex;
-    align-items: center;
-}
-
-.hero-content {
-    max-width: 600px;
-}
-
-.hero-content h1 {
-    font-size: 3.5rem;
-    font-weight: 700;
-    margin-bottom: 1rem;
-    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
-}
-
-.hero-content p {
-    font-size: 1.25rem;
-    margin-bottom: 2rem;
-}
-
-.hero-search-form {
-    display: flex;
-    border-radius: 50px;
-    overflow: hidden;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
-}
-
-.hero-search-input {
-    flex-grow: 1;
-    border: none;
-    padding: 1rem 1.5rem;
-    font-size: 1rem;
-}
-
-.hero-search-input:focus {
-    outline: none;
-}
-
-.hero-search-button {
-    border: none;
-    background-color: #FF6B6B;
-    color: white;
-    padding: 0 2rem;
-    font-size: 1rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: background-color 0.3s;
-}
-
-.hero-search-button:hover {
-    background-color: #ff4f4f;
-}
-</style>
-
 <section class="hero-section">
-    <div class="hero-content">
-        <h1>Everything you crave, delivered.</h1>
-        <p>Your favorite local restaurants, delivered to your door.</p>
-        <form action="index.php" method="get" class="hero-search-form">
-            <input type="text" name="search" class="hero-search-input" placeholder="Find restaurants" value="<?= isset($_GET['search']) ? htmlspecialchars($_GET['search']) : '' ?>">
-            <button type="submit" class="hero-search-button">Find restaurants</button>
-        </form>
+    <div class="hero-overlay"></div>
+    <div class="container hero-content-container">
+        <div class="hero-content">
+            <h1>Fast Island Delivery — From Rita to Laura!</h1>
+            <p>Get your favorite meals delivered anywhere on Majuro Island.</p>
+            <div class="location-actions">
+                <button class="location-button primary" id="pin-location-btn">📍 Pin Your Location</button>
+                <button class="location-button secondary" id="use-location-btn">Use Current Location</button>
+            </div>
+            <a href="index.php" class="find-restaurants-btn">Find Restaurants</a>
+            <p class="delivery-note">MajuroEats delivers only within the main island zone (Rita–Laura).</p>
+        </div>
     </div>
-</section>
+</section>

index.php

@@ -1,331 +1,67 @@
 <?php include 'header.php'; ?>
 <?php include 'hero.php'; ?>
 
-    <div class="container">
-                <section class="categories-section">
-            <h2 class="page-title">Discover by Category</h2>
-            <div class="category-grid">
-                <?php
-                $cuisine_stmt = db()->query("SELECT * FROM cuisines ORDER BY name");
-                $cuisines = $cuisine_stmt->fetchAll(PDO::FETCH_ASSOC);
-                // Placeholder images - we'll make these dynamic later
-                $cuisine_images = [
-                    'American' => 'assets/images/pexels/1639557.jpg',
-                    'Asian' => 'assets/images/pexels/2347311.jpg',
-                    'BBQ' => 'assets/images/pexels/161963.jpg',
-                    'Breakfast' => 'assets/images/pexels/376464.jpg',
-                    'Cafe' => 'assets/images/pexels/312418.jpg',
-                    'Dessert' => 'assets/images/pexels/1099680.jpg',
-                    'Fast Food' => 'assets/images/pexels/1633578.jpg',
-                    'Healthy' => 'assets/images/pexels/1640777.jpg',
-                    'Indian' => 'assets/images/pexels/958545.jpg',
-                    'Italian' => 'assets/images/pexels/1260968.jpg',
-                    'Mexican' => 'assets/images/pexels/461198.jpg',
-                    'Pizza' => 'assets/images/pexels/1146760.jpg',
-                    'Seafood' => 'assets/images/pexels/1639565.jpg',
-                    'Vegetarian' => 'assets/images/pexels/1143754.jpg',
-                ];
+<div class="container page-content">
 
-                foreach ($cuisines as $cuisine):
-                    $image_url = $cuisine_images[$cuisine['name']] ?? 'https://picsum.photos/600?random=' . $cuisine['id'];
-                ?>
-                    <a href="index.php?cuisine=<?= $cuisine['id'] ?>" class="category-card">
-                        <img src="<?= htmlspecialchars($image_url) ?>" alt="<?= htmlspecialchars($cuisine['name']) ?>">
-                        <div class="category-card-overlay"></div>
-                        <h3><?= htmlspecialchars($cuisine['name']) ?></h3>
-                    </a>
-                <?php endforeach; ?>
-            </div>
-        </section>
+    <section class="promo-section">
+        <div class="promo-card">
+            <h3>$0 Delivery Fee</h3>
+            <p>On your first order</p>
+        </div>
+        <div class="promo-card">
+            <h3>Earn Rewards</h3>
+            <p>With every meal</p>
+        </div>
+        <div class="promo-card">
+            <h3>Support Local</h3>
+            <p>Majuro Restaurants</p>
+        </div>
+    </section>
 
-        <form action="index.php" method="get" id="filter-form">
-            <input type="hidden" name="search" value="<?= isset($_GET['search']) ? htmlspecialchars($_GET['search']) : '' ?>">
-            <?php if (isset($_GET['cuisine'])): ?>
-                <input type="hidden" name="cuisine" value="<?= htmlspecialchars($_GET['cuisine']) ?>">
-            <?php endif; ?>
+    <section class="featured-restaurants">
+        <h2 class="section-title">Featured Restaurants</h2>
+        <div class="restaurant-grid">
+            <?php
+            require_once 'db/config.php';
+            $db = db();
+            $stmt = $db->query("SELECT r.id, r.name, r.image_url, AVG(rt.rating) as average_rating 
+                                 FROM restaurants r
+                                 LEFT JOIN ratings rt ON r.id = rt.restaurant_id
+                                 GROUP BY r.id
+                                 ORDER BY average_rating DESC, r.id DESC
+                                 LIMIT 6");
+            $restaurants = $stmt->fetchAll(PDO::FETCH_ASSOC);
 
-            <div class="filter-bar-new">
-                <div class="form-group">
-                    <label for="min_rating">Rating</label>
-                    <select name="min_rating" id="min_rating" class="form-control" onchange="this.form.submit()">
-                        <option value="">Any</option>
-                        <option value="4" <?= isset($_GET['min_rating']) && $_GET['min_rating'] == 4 ? 'selected' : '' ?>>4+ stars</option>
-                        <option value="3" <?= isset($_GET['min_rating']) && $_GET['min_rating'] == 3 ? 'selected' : '' ?>>3+ stars</option>
-                        <option value="2" <?= isset($_GET['min_rating']) && $_GET['min_rating'] == 2 ? 'selected' : '' ?>>2+ stars</option>
-                        <option value="1" <?= isset($_GET['min_rating']) && $_GET['min_rating'] == 1 ? 'selected' : '' ?>>1+ star</option>
-                    </select>
-                </div>
-                <div class="form-check">
-                    <input class="form-check-input" type="checkbox" name="open_now" value="1" id="open-now" <?= isset($_GET['open_now']) ? 'checked' : '' ?> onchange="this.form.submit()">
-                    <label class="form-check-label" for="open-now">
-                        Open Now
-                    </label>
-                </div>
-                 <a href="index.php" class="btn btn-secondary">Clear Filters</a>
-            </div>
-        </form>
+            foreach ($restaurants as $restaurant) {
+                // Get cuisines for this restaurant
+                $cuisine_sql = "SELECT c.name FROM cuisines c JOIN restaurant_cuisines rc ON c.id = rc.cuisine_id WHERE rc.restaurant_id = ?";
+                $cuisine_stmt = db()->prepare($cuisine_sql);
+                $cuisine_stmt->execute([$restaurant['id']]);
+                $restaurant_cuisines_list = $cuisine_stmt->fetchAll(PDO::FETCH_COLUMN);
 
-                <?php
-        $page_title = "All Restaurants";
-        if (isset($_GET['cuisine']) && !empty($_GET['cuisine'])) {
-            $cuisine_id = $_GET['cuisine'];
-            $cuisine_stmt = db()->prepare("SELECT name FROM cuisines WHERE id = ?");
-            $cuisine_stmt->execute([$cuisine_id]);
-            $cuisine_name = $cuisine_stmt->fetchColumn();
-            if ($cuisine_name) {
-                $page_title = htmlspecialchars($cuisine_name) . " Restaurants";
-            }
-        }
-        ?>
-        <h2 class="page-title mt-4"><?= $page_title ?></h2>
-        <section class="restaurant-list">
-            <div class="restaurant-grid" id="restaurant-grid">
-                <?php
-                // Base query
-                $sql = "SELECT DISTINCT r.id, r.name, r.image_url, r.opening_time, r.closing_time, r.days_open, AVG(rt.rating) as average_rating, COUNT(rt.id) as rating_count 
-                        FROM restaurants r
-                        LEFT JOIN ratings rt ON r.id = rt.restaurant_id";
-                $params = [];
-
-                // Join with restaurant_cuisines if filtering by cuisine
-                if (isset($_GET['cuisine']) && !empty($_GET['cuisine'])) {
-                    $sql .= " JOIN restaurant_cuisines rc ON r.id = rc.restaurant_id";
-                }
-
-                $where_clauses = [];
-
-                // Append search condition
-                if (!empty($_GET['search'])) {
-                    $where_clauses[] = "r.name LIKE ?";
-                    $params[] = '%' . $_GET['search'] . '%';
-                }
-
-                // Append cuisine filter
-                if (isset($_GET['cuisine']) && !empty($_GET['cuisine'])) {
-                    $where_clauses[] = "rc.cuisine_id = ?";
-                    $params[] = $_GET['cuisine'];
-                }
-                
-                // Append "Open Now" filter
-                if (isset($_GET['open_now'])) {
-                    $current_time = date('H:i:s');
-                    $current_day = date('D'); // Mon, Tue, etc.
-                    $where_clauses[] = "r.opening_time <= ? AND r.closing_time >= ? AND r.days_open LIKE ?";
-                    $params[] = $current_time;
-                    $params[] = $current_time;
-                    $params[] = '%' . $current_day . '%';
-                }
-
-
-                if (!empty($where_clauses)) {
-                    $sql .= " WHERE " . implode(' AND ', $where_clauses);
-                }
-
-                $sql .= " GROUP BY r.id, r.name, r.image_url, r.opening_time, r.closing_time, r.days_open";
-
-                // Add rating filter (HAVING clause)
-                $selected_min_rating = isset($_GET['min_rating']) && is_numeric($_GET['min_rating']) ? (int)$_GET['min_rating'] : 0;
-                if ($selected_min_rating > 0) {
-                    $sql .= " HAVING AVG(rt.rating) >= ?";
-                    $params[] = $selected_min_rating;
-                }
-
-                $sql .= " ORDER BY r.name";
-
-                $stmt = db()->prepare($sql);
-                $stmt->execute($params);
-                $restaurants = $stmt->fetchAll();
-
-                if (empty($restaurants)) {
-                    echo '<p>No restaurants found matching your criteria.</p>';
+                echo '<a href="menu.php?restaurant_id=' . htmlspecialchars($restaurant['id']) . '" class="restaurant-card">';
+                echo '<div class="card-image" style="background-image: url(\\''.htmlspecialchars($restaurant['image_url'] ? $restaurant['image_url'] : 'assets/images/hero.jpg').'\\\')"></div>';
+                echo '<div class="card-content">';
+                echo '<h3>' . htmlspecialchars($restaurant['name']) . '</h3>';
+                echo '<p class="cuisine-tags">' . htmlspecialchars(implode(', ', $restaurant_cuisines_list)) . '</p>';
+                echo '<div class="restaurant-info">';
+                if ($restaurant['average_rating']) {
+                    echo '<div class="rating-display"><span class="star">★</span> ' . number_format($restaurant['average_rating'], 1) . '</div>';
                 } else {
-                    foreach ($restaurants as $restaurant) {
-                        // Get cuisines for this restaurant
-                        $cuisine_sql = "SELECT c.name FROM cuisines c JOIN restaurant_cuisines rc ON c.id = rc.cuisine_id WHERE rc.restaurant_id = ?";
-                        $cuisine_stmt = db()->prepare($cuisine_sql);
-                        $cuisine_stmt->execute([$restaurant['id']]);
-                        $restaurant_cuisines_list = $cuisine_stmt->fetchAll(PDO::FETCH_COLUMN);
-
-                        echo '<a href="menu.php?restaurant_id=' . htmlspecialchars($restaurant['id']) . '" class="restaurant-card">';
-                        echo '<img src="' . htmlspecialchars($restaurant['image_url'] ? $restaurant['image_url'] : 'assets/images/hero.jpg') . '" alt="' . htmlspecialchars($restaurant['name']) . '">';
-                        echo '<div class="restaurant-card-content">';
-                        echo '<h3>' . htmlspecialchars($restaurant['name']) . '</h3>';
-                        echo '<p>' . htmlspecialchars(implode(', ', $restaurant_cuisines_list)) . '</p>';
-                        echo '<div class="restaurant-info">';
-                        if ($restaurant['rating_count'] > 0) {
-                            echo '<div class="rating-display">';
-                            echo '<span class="star">★</span>';
-                            echo '<span>' . htmlspecialchars(number_format($restaurant['average_rating'], 1)) . '</span>';
-                            echo '</div>';
-                        } else {
-                            echo '<div class="rating-display"><span class="rating-count">No ratings yet</span></div>';
-                        }
-                        echo '</div>';
-                        echo '</div>';
-                        echo '</a>';
-                    }
+                    echo '<div class="rating-display">New</div>';
                 }
-                ?>
-            </div>
-        </section>
-    </div>
-</main>
+                echo '<div class="delivery-info">25-35 min</div>';
+                echo '</div>';
+                echo '</div>';
+                echo '</a>';
+            }
+            ?>
+        </div>
+        <div class="see-all-container">
+            <a href="index.php" class="see-all-btn">See all restaurants</a>
+        </div>
+    </section>
 
-
-<div id="map-modal" class="modal">
-    <div class="modal-content">
-        <span class="close-button">&times;</span>
-        <h2>Pin Your Location</h2>
-        <div id="map" style="height: 400px;"></div>
-        <p id="map-message"></p>
-        <button id="confirm-location-button">Confirm Location</button>
-        <button id="cancel-location-button">Cancel</button>
-    </div>
 </div>
 
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    const pinLocationButton = document.getElementById('pin-location');
-    const myLocationButton = document.getElementById('my-location');
-    const locationActions = document.querySelector('.location-actions');
-    const addressDisplay = document.getElementById('address-display');
-
-    const mapModal = document.getElementById('map-modal');
-    const closeModalButton = mapModal.querySelector('.close-button');
-    const confirmLocationButton = document.getElementById('confirm-location-button');
-    const cancelLocationButton = document.getElementById('cancel-location-button');
-    const mapMessage = document.getElementById('map-message');
-
-    let map;
-    let marker;
-
-    const majuroBounds = {
-        minLat: 7.05,
-        maxLat: 7.15,
-        minLng: 171.17,
-        maxLng: 171.39
-    };
-
-    function isWithinMajuro(lat, lng) {
-        return lat >= majuroBounds.minLat && lat <= majuroBounds.maxLat &&
-               lng >= majuroBounds.minLng && lng <= majuroBounds.maxLng;
-    }
-
-    function openMapModal(lat, lng) {
-        mapModal.style.display = 'block';
-        if (!map) {
-            map = L.map('map').setView([7.09, 171.28], 12);
-            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-            }).addTo(map);
-        }
-        map.setView([lat, lng], 14);
-        if (marker) {
-            marker.setLatLng([lat, lng]);
-        } else {
-            marker = L.marker([lat, lng], { draggable: true }).addTo(map);
-        }
-        mapMessage.textContent = '';
-    }
-
-    function closeMapModal() {
-        mapModal.style.display = 'none';
-    }
-
-    pinLocationButton.addEventListener('click', function() {
-        openMapModal(7.09, 171.28);
-    });
-
-    myLocationButton.addEventListener('click', function() {
-        if (navigator.geolocation) {
-            navigator.geolocation.getCurrentPosition(function(position) {
-                const lat = position.coords.latitude;
-                const lng = position.coords.longitude;
-                if (isWithinMajuro(lat, lng)) {
-                    saveLocation(lat, lng);
-                } else {
-                    alert('Sorry, we do not offer services for your current location.');
-                }
-            }, function() {
-                alert('Could not get your location.');
-            });
-        } else {
-            alert('Geolocation is not supported by your browser.');
-        }
-    });
-
-    closeModalButton.addEventListener('click', closeMapModal);
-    cancelLocationButton.addEventListener('click', closeMapModal);
-
-    confirmLocationButton.addEventListener('click', function() {
-        const latlng = marker.getLatLng();
-        if (isWithinMajuro(latlng.lat, latlng.lng)) {
-            saveLocation(latlng.lat, latlng.lng);
-        } else {
-            mapMessage.textContent = 'Sorry, we do not offer services for the location you pinned. Please select a location within Majuro (Rita-Laura).';
-            mapMessage.style.color = 'red';
-        }
-    });
-
-    function saveLocation(lat, lng) {
-        fetch('api/save_location.php', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({ lat: lat, lng: lng })
-        })
-        .then(response => response.json())
-        .then(data => {
-            if (data.success) {
-                updateLocationUI(lat, lng);
-                closeMapModal();
-            } else {
-                alert(data.message || 'Could not save location.');
-            }
-        });
-    }
-
-    function updateLocationUI(lat, lng) {
-        locationActions.innerHTML = `
-            <div class="pinned-location">
-                <span>Pinned: ${lat.toFixed(4)}, ${lng.toFixed(4)}</span>
-                <button id="change-location">Change</button>
-            </div>
-        `;
-        addressDisplay.textContent = `Delivery to: ${lat.toFixed(4)}, ${lng.toFixed(4)}`;
-        document.getElementById('change-location').addEventListener('click', function() {
-            locationActions.innerHTML = `
-                <button class="location-button" id="pin-location">Pin a Location</button>
-                <button class="location-button" id="my-location">My Location</button>
-            `;
-            // Re-add event listeners
-            document.getElementById('pin-location').addEventListener('click', function() { openMapModal(7.09, 171.28); });
-            document.getElementById('my-location').addEventListener('click', function() { 
-                if (navigator.geolocation) {
-                    navigator.geolocation.getCurrentPosition(function(position) {
-                        const lat = position.coords.latitude;
-                        const lng = position.coords.longitude;
-                        if (isWithinMajuro(lat, lng)) {
-                            saveLocation(lat, lng);
-                        } else {
-                            alert('Sorry, we do not offer services for your current location.');
-                        }
-                    }, function() {
-                        alert('Could not get your location.');
-                    });
-                } else {
-                    alert('Geolocation is not supported by your browser.');
-                }
-            });
-        });
-    }
-
-    // On page load, check if location is in session
-    <?php if (isset($_SESSION['delivery_location'])):
-        echo "updateLocationUI(" . $_SESSION['delivery_location']['lat'] . ", " . $_SESSION['delivery_location']['lng'] . ");";
-    endif; ?>
-});
-</script>
-
-<?php include 'footer.php'; ?>
+<?php include 'footer.php'; ?>