feat: improve campsites and events management UX

- Add map-based location picker with centered pin for campsites (two-step process)
- Hide edit buttons for campsites not owned by current user
- Allow numbers in campsite names (fix validateName function)
- Prepopulate edit form with existing campsite data
- Preserve country/province selection when confirming location
- Add real-time filter functionality to campsites table
- Fix events publish button error handling (use output buffering cleanup)
- Improve AJAX response handling with complete callback

Changes:
- src/pages/bookings/campsites.php: Location mode UI, filter, edit form improvements
- src/config/functions.php: Allow numbers in validateName regex
- src/admin/toggle_event_published.php: Clean output buffers before JSON response
- src/admin/admin_events.php: Use complete callback instead of success/error handlers

header.php

@@ -296,15 +296,21 @@ if ($headerStyle === 'light') {
                                             </li>
                                         <?php } ?>
                                         <li><a href="contact">Contact</a></li>
-                                        <?php if ($is_member) : ?>
+                                        <?php if ($is_logged_in) : ?>
                                             <li class="dropdown"><a href="#">Members Area</a>
                                                 <ul>
-                                                    <li><a href="campsites">Campsites</a></li>
+                                                    <?php
+                                                    if (getUserMemberStatus($_SESSION['user_id'])) {
+                                                        echo "<li><a href=\"campsites\">Campsites Directory</a></li>";
+                                                    } else { 
+                                                        echo "<li><a href=\"membership\">Campsites Directory</a><i class='fal fa-lock'></i></li>";
+                                                    } 
+                                                    ?>
                                                 </ul>
                                             </li>
-                                        <?php endif; ?>
                                         
-                                        <?php if ($is_logged_in) : ?>
+
+                                        
                                             <li class="dropdown"><a href="#">My Account</a>
                                                 <ul>
                                                     <li><a href="account_settings">Account Settings</a></li>

src/admin/admin_events.php

@@ -224,25 +224,29 @@ if ($result && $result->num_rows > 0) {
                     event_id: eventId
                 },
                 dataType: 'json',
-                success: function(response) {
+                complete: function(xhr, status) {
-                    if (response.status === 'success') {
+                    // Handle all response codes
-                        if (response.published == 1) {
+                    try {
-                            button.removeClass('btn-success').addClass('btn-warning');
+                        var response = JSON.parse(xhr.responseText);
-                            button.find('i').removeClass('fa-eye').addClass('fa-eye-slash');
+                        
-                            button.attr('title', 'Unpublish');
+                        if (response.status === 'success') {
-                            row.find('td:nth-child(5)').html('<span class="badge bg-success">Published</span>');
+                            if (response.published == 1) {
+                                button.removeClass('btn-success').addClass('btn-warning');
+                                button.find('i').removeClass('fa-eye').addClass('fa-eye-slash');
+                                button.attr('title', 'Unpublish');
+                                row.find('td:nth-child(5)').html('<span class="badge bg-success">Published</span>');
+                            } else {
+                                button.removeClass('btn-warning').addClass('btn-success');
+                                button.find('i').removeClass('fa-eye-slash').addClass('fa-eye');
+                                button.attr('title', 'Publish');
+                                row.find('td:nth-child(5)').html('<span class="badge bg-warning">Draft</span>');
+                            }
                         } else {
-                            button.removeClass('btn-warning').addClass('btn-success');
+                            alert('Error: ' + response.message);
-                            button.find('i').removeClass('fa-eye-slash').addClass('fa-eye');
-                            button.attr('title', 'Publish');
-                            row.find('td:nth-child(5)').html('<span class="badge bg-warning">Draft</span>');
                         }
-                    } else {
+                    } catch (e) {
-                        alert('Error: ' + response.message);
+                        alert('Error updating event status. Response: ' + xhr.responseText);
                     }
-                },
-                error: function() {
-                    alert('Error updating event status');
                 }
             });
         });

src/admin/toggle_event_published.php

@@ -1,9 +1,21 @@
 <?php
+// Set JSON header FIRST before any includes that might output
+header('Content-Type: application/json');
+header('Cache-Control: no-cache, no-store, must-revalidate');
+header('Pragma: no-cache');
+header('Expires: 0');
+
+// Clean any output buffers before including header
+while (ob_get_level() > 0) {
+    ob_end_clean();
+}
+
 $rootPath = dirname(dirname(__DIR__));
 include_once($rootPath . '/header.php');
 checkAdmin();
 
-header('Content-Type: application/json');
+// Clean output buffer again in case header.php added content
+ob_clean();
 
 $event_id = $_POST['event_id'] ?? null;
 
@@ -44,6 +56,7 @@ try {
     $update_stmt->bind_param("ii", $new_status, $event_id);
 
     if ($update_stmt->execute()) {
+        ob_clean(); // Clean any buffered output before sending JSON
         http_response_code(200);
         echo json_encode([
             'status' => 'success',
@@ -55,6 +68,7 @@ try {
     }
     $update_stmt->close();
 } catch (Exception $e) {
+    ob_clean(); // Clean any buffered output before sending JSON
     http_response_code(500);
     echo json_encode(['status' => 'error', 'message' => 'Database error: ' . $e->getMessage()]);
 }

src/config/functions.php

@@ -2195,8 +2195,8 @@ function validateName($name, $minLength = 2, $maxLength = 100) {
         return false;
     }
     
-    // Only allow letters, spaces, hyphens, and apostrophes
+    // Allow letters, numbers, spaces, hyphens, and apostrophes
-    if (!preg_match('/^[a-zA-Z\s\'-]+$/', $name)) {
+    if (!preg_match('/^[a-zA-Z0-9\s\'-]+$/', $name)) {
         return false;
     }
     

src/pages/bookings/campsites.php

@@ -29,14 +29,72 @@ while ($row = $result->fetch_assoc()) {
     #map {
         height: 600px;
         width: 100%;
+        position: relative;
     }
 
-    .gm-style .info-box {
+    /* Center pin overlay */
-        max-width: 250px;
+    .map-center-pin {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -100%);
+        z-index: 10;
+        pointer-events: none;
+        font-size: 48px;
     }
 
-    .info-box img {
+    /* Location mode indicator */
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    .location-mode-indicator {
+        position: absolute;
+        top: 20px;
+        left: 20px;
+        background: #4CAF50;
+        color: white;
+        padding: 12px 20px;
+        border-radius: 6px;
+        z-index: 11;
+        font-weight: 500;
+        display: none;
+    }
+
+    /* Confirm location button */
+    .confirm-location-btn {
+        position: absolute;
+        bottom: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        background: #4CAF50;
+        color: white;
+        padding: 12px 30px;
+        border: none;
+        border-radius: 6px;
+        cursor: pointer;
+        font-weight: 500;
+        z-index: 11;
+        display: none;
+    }
+
+    .confirm-location-btn:hover {
+        background: #45a049;
+    }
+
+    .cancel-location-btn {
+        position: absolute;
+        bottom: 20px;
+        left: 20px;
+        background: #f44336;
+        color: white;
+        padding: 12px 30px;
+        border: none;
+        border-radius: 6px;
+        cursor: pointer;
+        font-weight: 500;
+        z-index: 11;
+        display: none;
+    }
+
+    .cancel-location-btn:hover {
+        background: #da190b;
     }
 
     /* Form styling to match manage_trips */
@@ -171,7 +229,7 @@ while ($row = $result->fetch_assoc()) {
 </style>
 
 <?php
-$pageTitle = 'Campsites';
+$pageTitle = 'Campsites Directory';
 $breadcrumbs = [['Home' => 'index.php']];
 require_once($rootPath . '/components/banner.php');
 ?>
@@ -182,11 +240,29 @@ require_once($rootPath . '/components/banner.php');
             <div class="col-lg-12">
                 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                     <h3>Campsites Map</h3>
-                    <button class="theme-btn" id="toggleFormBtn" onclick="toggleCampsiteForm()">
+                    <button class="theme-btn" id="toggleFormBtn" onclick="startLocationMode()">
                         <i class="far fa-plus"></i> Add Campsite
                     </button>
                 </div>
-                <p style="color: #666; margin-bottom: 15px;">Click on the map to add a new campsite, or click on a marker to view details.</p>
+                <p style="color: #666; margin-bottom: 15px;">Click on a marker to view details, or use the "Add Campsite" button to add a new location.</p>
+
+                <!-- Map with location mode UI -->
+                <div style="position: relative; margin-bottom: 20px;">
+                    <div id="map" style="width: 100%; height: 500px;"></div>
+                    
+                    <!-- Location Mode Indicator -->
+                    <div class="location-mode-indicator">
+                        📍 Position the map center pin over your campsite location
+                    </div>
+                    
+                    <!-- Confirm and Cancel Buttons -->
+                    <button type="button" class="confirm-location-btn" onclick="confirmLocation()">
+                        ✓ Confirm Location
+                    </button>
+                    <button type="button" class="cancel-location-btn" onclick="cancelLocationMode()">
+                        ✕ Cancel
+                    </button>
+                </div>
 
                 <!-- Collapsible Campsite Form -->
                 <div class="campsite-form-container" id="campsiteFormContainer">
@@ -282,8 +358,6 @@ require_once($rootPath . '/components/banner.php');
                     </form>
                 </div>
 
-                <div id="map" style="width: 100%; height: 500px;"></div>
-
                 <!-- Campsites Table -->
                 <div style="margin-top: 40px;">
                     <h4 style="margin-bottom: 20px;">All Campsites</h4>
@@ -294,7 +368,7 @@ require_once($rootPath . '/components/banner.php');
                                 <tr>
                                     <th>Name</th>
                                     <th>Description</th>
-                                    <th>Website</th>
+                                    <th>Booking Website</th>
                                     <th>Phone</th>
                                     <th>Added By</th>
                                     <th>Actions</th>
@@ -314,9 +388,113 @@ require_once($rootPath . '/components/banner.php');
 
 <script>
     let map;
+    let centerPinMarker;
+    let isLocationMode = false;
+    const currentUserId = <?php echo $_SESSION['user_id']; ?>;
     const campsites = <?php echo json_encode($campsites); ?>;
 
+    function startLocationMode() {
+        if (isLocationMode) return;
+        
+        isLocationMode = true;
+        
+        // Show location mode UI elements
+        document.querySelector(".location-mode-indicator").style.display = "block";
+        document.querySelector(".confirm-location-btn").style.display = "block";
+        document.querySelector(".cancel-location-btn").style.display = "block";
+        document.getElementById("toggleFormBtn").disabled = true;
+        
+        // Create invisible marker at map center
+        const mapCenter = map.getCenter();
+        centerPinMarker = new google.maps.Marker({
+            position: mapCenter,
+            map: map,
+            title: "Campsite Location",
+            draggable: true,
+            icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png'
+        });
+        
+        // Update coordinates when marker is dragged
+        centerPinMarker.addListener('drag', function() {
+            const position = centerPinMarker.getPosition();
+            updateCoordinatesDisplay(position.lat(), position.lng());
+        });
+        
+        // Set initial coordinates
+        updateCoordinatesDisplay(mapCenter.lat(), mapCenter.lng());
+        
+        // Update coordinates when map is moved
+        const moveListener = map.addListener('center_changed', function() {
+            const mapCenter = map.getCenter();
+            centerPinMarker.setPosition(mapCenter);
+            updateCoordinatesDisplay(mapCenter.lat(), mapCenter.lng());
+        });
+        
+        // Store listener for cleanup
+        window.mapMoveListener = moveListener;
+    }
+
+    function updateCoordinatesDisplay(lat, lng) {
+        document.getElementById("latitude").value = lat;
+        document.getElementById("longitude").value = lng;
+        document.getElementById("latitude_display").value = lat.toFixed(6);
+        document.getElementById("longitude_display").value = lng.toFixed(6);
+    }
+
+    function confirmLocation() {
+        if (!isLocationMode) return;
+        
+        isLocationMode = false;
+        
+        // Hide location mode UI elements
+        document.querySelector(".location-mode-indicator").style.display = "none";
+        document.querySelector(".confirm-location-btn").style.display = "none";
+        document.querySelector(".cancel-location-btn").style.display = "none";
+        document.getElementById("toggleFormBtn").disabled = false;
+        
+        // Remove map move listener
+        if (window.mapMoveListener) {
+            google.maps.event.removeListener(window.mapMoveListener);
+        }
+        
+        // Remove the center marker
+        if (centerPinMarker) {
+            centerPinMarker.setMap(null);
+            centerPinMarker = null;
+        }
+        
+        // Reset form fields and show form (for new campsite only)
+        resetFormForNewCampsite();
+        document.getElementById("campsiteFormContainer").style.display = "block";
+        document.getElementById("campsiteFormContainer").scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }
+
+    function cancelLocationMode() {
+        if (!isLocationMode) return;
+        
+        isLocationMode = false;
+        
+        // Hide location mode UI elements
+        document.querySelector(".location-mode-indicator").style.display = "none";
+        document.querySelector(".confirm-location-btn").style.display = "none";
+        document.querySelector(".cancel-location-btn").style.display = "none";
+        document.getElementById("toggleFormBtn").disabled = false;
+        
+        // Remove map move listener
+        if (window.mapMoveListener) {
+            google.maps.event.removeListener(window.mapMoveListener);
+        }
+        
+        // Remove the center marker
+        if (centerPinMarker) {
+            centerPinMarker.setMap(null);
+            centerPinMarker = null;
+        }
+    }
+
     function toggleCampsiteForm() {
+        if (isLocationMode) return;
+        
         const container = document.getElementById("campsiteFormContainer");
         container.style.display = container.style.display === "none" ? "block" : "none";
         if (container.style.display === "block") {
@@ -324,14 +502,40 @@ require_once($rootPath . '/components/banner.php');
         }
     }
 
-    function resetForm() {
+    function resetFormForNewCampsite() {
-        // Clear the form
+        // This is called when confirming location for a NEW campsite
-        document.getElementById("addCampsiteForm").reset();
+        // Only clears text fields and removes ID, but keeps country/province selections
+        document.querySelector("#addCampsiteForm input[name='name']").value = '';
+        document.querySelector("#addCampsiteForm textarea[name='description']").value = '';
+        document.querySelector("#addCampsiteForm input[name='website']").value = '';
+        document.querySelector("#addCampsiteForm input[name='telephone']").value = '';
+        
         // Remove the ID input if it exists
         let idInput = document.querySelector("#addCampsiteForm input[name='id']");
         if (idInput) {
             idInput.remove();
         }
+        
+        // Change form heading
+        document.querySelector("#campsiteFormContainer h5").textContent = "Add New Campsite";
+    }
+
+    function resetForm() {
+        // This is called when canceling the form - fully resets everything
+        document.querySelector("#campsiteFormContainer h5").textContent = "Add New Campsite";
+        
+        // Clear the form completely
+        document.getElementById("addCampsiteForm").reset();
+        
+        // Remove the ID input if it exists
+        let idInput = document.querySelector("#addCampsiteForm input[name='id']");
+        if (idInput) {
+            idInput.remove();
+        }
+        
+        // Clear coordinate displays
+        document.getElementById("latitude_display").value = '';
+        document.getElementById("longitude_display").value = '';
     }
 
     function initMap() {
@@ -339,25 +543,10 @@ require_once($rootPath . '/components/banner.php');
             center: {
                 lat: -28.0,
                 lng: 24.0
-            }, // SA center
+            },
             zoom: 6,
         });
 
-        map.addListener("click", function(e) {
-            const lat = e.latLng.lat();
-            const lng = e.latLng.lng();
-
-            resetForm();
-            document.getElementById("latitude").value = lat;
-            document.getElementById("longitude").value = lng;
-            document.getElementById("latitude_display").value = lat.toFixed(6);
-            document.getElementById("longitude_display").value = lng.toFixed(6);
-
-            // Show the form container
-            document.getElementById("campsiteFormContainer").style.display = "block";
-            document.getElementById("campsiteFormContainer").scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-        });
-
         // Load existing campsites from PHP
         fetch("get_campsites")
             .then(response => response.json())
@@ -378,7 +567,7 @@ require_once($rootPath . '/components/banner.php');
                     ${site.description ? site.description + "<br>" : ""}
                     ${site.website ? `<a href="${site.website}" target="_blank">Visit Website</a><br>` : ""}
                     ${site.telephone ? `Phone: ${site.telephone}<br>` : ""}
-                    ${site.thumbnail ? `<img src="${site.thumbnail}" style="width: 100%; max-width: 200px; border-radius: 8px; margin-top: 5px;">` : ""}
+                    ${site.thumbnail ? `<img src="${site.thumbnail}" style="width: 100%; max-width: 200px; border-radius: 8px; margin-top: 5px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);">` : ""}
                     ${site.user && site.user.first_name ? `
                         <div class="user-info mt-2 d-flex align-items-center">
                             <img src="${site.user.profile_pic}" style="width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-right: 10px;">
@@ -463,6 +652,11 @@ require_once($rootPath . '/components/banner.php');
                         ? `${site.user.first_name} ${site.user.last_name}` 
                         : "Unknown";
                     
+                    // Only show edit button if current user is the owner
+                    const editButtonHTML = site.user_id == currentUserId 
+                        ? `<button class="btn btn-sm btn-warning" onclick='editCampsite(${JSON.stringify(site)})'>Edit</button>` 
+                        : '';
+
                     row.innerHTML = `
                         <td><strong>${site.name}</strong></td>
                         <td>${site.description ? site.description.substring(0, 50) + (site.description.length > 50 ? '...' : '') : '-'}</td>
@@ -470,7 +664,7 @@ require_once($rootPath . '/components/banner.php');
                         <td>${site.telephone || '-'}</td>
                         <td><small>${userName}</small></td>
                         <td>
-                            <button class="btn btn-sm btn-warning" onclick='editCampsite(${JSON.stringify(site)})'>Edit</button>
+                            ${editButtonHTML}
                             <a href="https://www.google.com/maps/dir/?api=1&destination=${site.latitude},${site.longitude}" target="_blank" class="btn btn-sm btn-outline-primary">Directions</a>
                         </td>
                     `;
@@ -481,32 +675,89 @@ require_once($rootPath . '/components/banner.php');
     }
 
     function editCampsite(site) {
-        // Pre-fill form
+        // Change form heading to indicate editing
-        document.querySelector("#addCampsiteForm input[name='name']").value = site.name;
+        document.querySelector("#campsiteFormContainer h5").textContent = "Edit Campsite";
-        document.querySelector("#addCampsiteForm select[name='country']").value = site.country || '';
-        document.querySelector("#addCampsiteForm select[name='province']").value = site.province || '';
-        document.querySelector("#addCampsiteForm textarea[name='description']").value = site.description || "";
-        document.querySelector("#addCampsiteForm input[name='website']").value = site.website || "";
-        document.querySelector("#addCampsiteForm input[name='telephone']").value = site.telephone || "";
-        document.querySelector("#addCampsiteForm input[name='latitude']").value = site.latitude;
-        document.querySelector("#addCampsiteForm input[name='longitude']").value = site.longitude;
-        document.getElementById("latitude_display").value = parseFloat(site.latitude).toFixed(6);
-        document.getElementById("longitude_display").value = parseFloat(site.longitude).toFixed(6);
         
-        // Add hidden ID input
+        // Pre-fill form with a slight delay to ensure DOM is ready
-        let idInput = document.querySelector("#addCampsiteForm input[name='id']");
+        setTimeout(() => {
-        if (!idInput) {
+            document.querySelector("#addCampsiteForm input[name='name']").value = site.name;
-            idInput = document.createElement("input");
+            document.querySelector("#addCampsiteForm textarea[name='description']").value = site.description || "";
-            idInput.type = "hidden";
+            document.querySelector("#addCampsiteForm input[name='website']").value = site.website || "";
-            idInput.name = "id";
+            document.querySelector("#addCampsiteForm input[name='telephone']").value = site.telephone || "";
-            document.querySelector("#addCampsiteForm").appendChild(idInput);
+            document.querySelector("#addCampsiteForm input[name='latitude']").value = site.latitude;
-        }
+            document.querySelector("#addCampsiteForm input[name='longitude']").value = site.longitude;
-        idInput.value = site.id;
+            document.getElementById("latitude_display").value = parseFloat(site.latitude).toFixed(6);
+            document.getElementById("longitude_display").value = parseFloat(site.longitude).toFixed(6);
+            
+            // Set country and province LAST to ensure they stick
+            document.querySelector("#addCampsiteForm select[name='country']").value = site.country || '';
+            document.querySelector("#addCampsiteForm select[name='province']").value = site.province || '';
+
+            // Add hidden ID input
+            let idInput = document.querySelector("#addCampsiteForm input[name='id']");
+            if (!idInput) {
+                idInput = document.createElement("input");
+                idInput.type = "hidden";
+                idInput.name = "id";
+                document.querySelector("#addCampsiteForm").appendChild(idInput);
+            }
+            idInput.value = site.id;
+        }, 0);
 
         // Show the form container
         document.getElementById("campsiteFormContainer").style.display = "block";
         document.getElementById("campsiteFormContainer").scrollIntoView({ behavior: 'smooth', block: 'nearest' });
     }
+
+    function filterCampsites() {
+        const filterInput = document.getElementById("campsitesFilter");
+        const filterValue = filterInput.value.toLowerCase();
+        const tableBody = document.getElementById("campsitesTableBody");
+        const rows = tableBody.getElementsByTagName("tr");
+        
+        let visibleRows = 0;
+        
+        for (let i = 0; i < rows.length; i++) {
+            const row = rows[i];
+            const text = row.textContent.toLowerCase();
+            
+            // Show rows that match the filter or are group headers
+            if (text.includes(filterValue) || row.innerHTML.includes('fas fa-globe')) {
+                row.style.display = "";
+                if (row.innerHTML.includes('fas fa-globe') === false) {
+                    visibleRows++;
+                }
+            } else {
+                row.style.display = "none";
+            }
+        }
+        
+        // Hide group headers if no campsites match in that group
+        for (let i = 0; i < rows.length; i++) {
+            const row = rows[i];
+            if (row.innerHTML.includes('fas fa-globe')) {
+                // Check if next visible row is also a header
+                let hasVisibleChildren = false;
+                for (let j = i + 1; j < rows.length; j++) {
+                    if (rows[j].style.display !== "none") {
+                        if (!rows[j].innerHTML.includes('fas fa-globe')) {
+                            hasVisibleChildren = true;
+                        }
+                        break;
+                    }
+                }
+                row.style.display = hasVisibleChildren ? "" : "none";
+            }
+        }
+    }
+
+    // Add filter event listener when page loads
+    document.addEventListener("DOMContentLoaded", function() {
+        const filterInput = document.getElementById("campsitesFilter");
+        if (filterInput) {
+            filterInput.addEventListener("keyup", filterCampsites);
+        }
+    });
 </script>
 
 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC-JuvnbUYc8WGjQBFFVZtKiv5_bFJoWLU&callback=initMap" async defer></script>

src/pages/memberships/renew_membership.php

@@ -9,7 +9,7 @@ $eft_id = strtoupper("SUBS " . date("Y") . " " . getLastName($user_id));
 $status = 'AWAITING PAYMENT';
 $description = 'Membership Fees ' . date("Y") . " " . getLastName($user_id);
 
-$payment_amount = 2500; // Assuming a fixed membership fee, adjust as needed
+$payment_amount = 2600; // Assuming a fixed membership fee, adjust as needed
 $payment_date = date('Y-m-d');
 $membership_start_date = date('Y-01-01');
 $membership_end_date = date('Y-12-31');