File Manager

Editing: dashboard.php

<?php
// Enable error reporting
//ini_set('display_errors', 1);
//ini_set('display_startup_errors', 1);
//error_reporting(E_ALL);

// Force HTTPS (ensure this runs before any output)
if (empty($_SERVER['HTTPS']) || $_SERVER['HTTPS'] !== 'on') {
    header("Location: https://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']);
    exit();
}

session_start();

// Check if the user is logged in
if (!isset($_SESSION['user_id'])) {
    header("Location: /login");
    exit();
}

// Retrieve session variables
$user_id = $_SESSION['user_id'];
$username = $_SESSION['username'] ?? 'Guest'; // Use 'Guest' as a fallback if username is not set

// Database credentials
$host = "127.0.0.1:3306";
$db_username = "u404542307_dacotywebsites";
$password = "daCotywebs1te5";
$database = "u404542307_eizon";

try {
    // Establish database connection
    $pdo = new PDO("mysql:host=$host;dbname=$database", $db_username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    die("Could not connect to the database: " . $e->getMessage());
}

// Fetch user profile details
$stmt = $pdo->prepare("SELECT profile_image, banner_image, username, description, phone_number, location FROM profiles WHERE user_id = :user_id");
$stmt->bindParam(':user_id', $user_id, PDO::PARAM_INT);
$stmt->execute();
$profile = $stmt->fetch(PDO::FETCH_ASSOC);

// Generate full URL for the profile image
$base_url = "https://www.eizononline.com";
$profile_image_url = !empty($profile['profile_image'])
    ? $base_url . '/' . $profile['profile_image'] // Remove the extra 'uploads/' prefix
    : $base_url . '/images/profile_avatar.jpg'; // Fallback to a default avatar

// Get Google name from users table if profile username is empty
if (empty($profile['username'])) {
    $query = $pdo->prepare("SELECT username FROM users WHERE id = :user_id LIMIT 1");
    $query->execute(['user_id' => $user_id]);
    $user = $query->fetch(PDO::FETCH_ASSOC);
    $display_name = $user['username'] ?? "Guest"; // Fallback to 'Guest' if all else fails
} else {
    $display_name = $profile['username'];
}

// Autofill data
$phoneNumber = $profile['phone_number'] ?? ''; // Default to an empty string if not set
$location = $profile['location'] ?? ''; // Default to an empty string if not set

// Fetch user products
$stmt = $pdo->prepare("SELECT * FROM cards WHERE user_id = :user_id ORDER BY created_at DESC");
$stmt->bindParam(':user_id', $user_id, PDO::PARAM_INT);
$stmt->execute();
$products = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Fetch the total number of visits for the logged-in user
$stmt = $pdo->prepare("SELECT COUNT(*) AS total_visits FROM customer_count WHERE user_id = :user_id");
$stmt->bindParam(':user_id', $user_id, PDO::PARAM_INT);
$stmt->execute();
$result = $stmt->fetch(PDO::FETCH_ASSOC);
$total_visits = $result['total_visits'] ?? 0; // Default to 0 if no visits

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['delete_product_id'])) {
    $delete_product_id = intval($_POST['delete_product_id']);

// Ensure the product belongs to the logged-in user
    $stmt = $pdo->prepare("DELETE FROM cards WHERE card_id = :product_id AND user_id = :user_id");
    $stmt->bindParam(':product_id', $delete_product_id, PDO::PARAM_INT);
    $stmt->bindParam(':user_id', $user_id, PDO::PARAM_INT);
    $stmt->execute();

// Refresh the page to reflect the updated list
    header("Location: " . $_SERVER['PHP_SELF']);
    exit();
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
    
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z6RR2PMZW4"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

gtag('config', 'G-Z6RR2PMZW4');
</script>

#preview img {
  flex: 1;                       /* Each image takes equal space */
  max-width: 30%; /* 1/3 of width (minus gap) */
  height: auto;                  /* Maintain aspect ratio */
  margin: 5px;                   /* Spacing between images */
  border: 1px solid #ccc;
  border-radius: 5px;
  object-fit: contain;           /* Fit nicely inside space */
}

.sellform input,
.sellform select,
.sellform textarea {
    width: 100%; /* Forces all inputs to fill their container */
    box-sizing: border-box; /* Includes padding & border in width */
    padding: 0.5em; /* Optional: Adds inner spacing */
    border: none; /* Optional: Cleaner look */
    border-radius: 4px; /* Optional: Matches form's rounded style */
}

.phone-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.phone-input select,
.phone-input input {
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.phone-input select {
    width: 150px;
}

.phone-input input {
    flex: 1;
}

.share-icon {
        position: absolute;
        bottom: 10px;
        right: 10px;
        background:  #3135318e;
        border-radius: 10%;
        padding: 8px;
        cursor: pointer;
        z-index: 10;
        transition: background 0.3s ease;
    }

.share-icon:hover {
        background: rgba(255, 255, 255, 1);
    }

.share-icon i {
        font-size: 30px;
        color: #24e037;
    }
    
    
     /* Message Banner Styles */
    .message-banner {
        background-color: #0b0e39; /* Blue background */
        color: #fff; /* White text */
        padding: 15px;
        text-align: center;
        position: fixed; /* Fixed at the top */
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000; /* Ensure it's above other content */
        transform: translateY(-100%); /* Start off-screen */
        transition: transform 0.6s ease; /* Smooth transition */
    }

.message-banner.visible {
        transform: translateY(0); /* Slide into view */
    }

.message-banner p {
        margin: 0;
        font-size: 16px;
        line-height: 1.5; /* Improve readability */
    }

.message-banner .share-link {
        display: block; /* Ensure the link appears on a new line */
        margin-top: 10px; /* Add spacing between lines */
    }

.message-banner a {
        color: #fff; /* White text for the link */
        text-decoration: underline; /* Underline the link */
        font-weight: bold; /* Make the link bold */
    }

.message-banner a:hover {
        color: #ccc; /* Light gray on hover */
    }

.close-banner {
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
    }

.close-banner:hover {
        color: #ccc; /* Light gray on hover */
    }

/* Responsive Design */
    @media (max-width: 768px) {
        .message-banner p {
            font-size: 14px; /* Smaller font size for mobile */
        }

.message-banner .share-link {
            margin-top: 5px; /* Reduce spacing for mobile */
        }

.close-banner {
            font-size: 18px; /* Smaller close button for mobile */
        }
       
    }
    
    .modal {
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.5); 
    justify-content: center; 
    align-items: center; 
    z-index: 20;
  }
  .modal-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    width: 300px;
  }
  .progress-bar-container {
    width: 100%;
    background: #f3f3f3;
    border-radius: 5px;
    overflow: hidden;
  }
  .progress-bar {
    height: 20px;
    width: 0;
    background: #4caf50;
    transition: width 0.3s ease;
  }
  
  
   /* Footer styles */
        footer {
            background: #1b5e20;
            color: white;
            border-radius: 15px 15px 0 0;
            
        }
        
  
    /* Mobile Bottom Navigation */
        .mobile-nav {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            box-shadow: 0 -2px 20px rgba(0,0,0,0.15);
            z-index: 1000;
            padding: 10px 0;
        }
        
        .nav-items {
            display: flex;
            justify-content: space-around;
            list-style: none;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            flex: 1;
        }
        
        .nav-item a {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: #40e351;
            font-size: 0.75rem;
            padding: 5px 0;
            width: 100%;
        }
        
        .nav-item i {
            font-size: 1.4rem;
            margin-bottom: 4px;
            transition: color 0.3s;
        }
        
        .nav-item.active a {
            color: #2e7d32;
        }
        
        .nav-item.active i {
            color: #ff9800;
        }
        
        .nav-item:hover i {
            color: #43a047;
        }
        
        /* Show mobile nav only on mobile screens */
        @media (max-width: 768px) {
            .mobile-nav {
                display: block;
            }
            
            body {
                padding-bottom: 70px;
            }
            
           
        }
        
       
</style>
    
</head>
<body style="margin-top:0px;">
  
<div id="message-banner" class="message-banner hidden">
    <p id="banner-message">
        Attract more customers to your business! 
        <span class="share-link">
           <a href="https://wa.me/?text=<?= urlencode('Check out my products on eizon: https://www.eizononline.com/profile.php?user=' . urlencode($display_name)) ?>" target="_blank">
    Share your account now
</a>

</span>
         <button class="dashboardRequests" style="background-color:#40e351;padding:8px 25px;border:none;border-radius:5px;">
     <a href="https://wa.me/?text=<?= urlencode('Check out my products on eizon: https://www.eizononline.com/profile.php?user=' . urlencode($display_name)) ?>" target="_blank"  style="text-decoration:none;color:white;">SHARE</a>
 </button>
    </p>
    <button id="close-banner" class="close-banner">&times;</button>
</div>

<div  id="loginAdd" class="loggedin">
    <p onclick="closeAdd()">DISCARD</p>

<form class="sellform" id="sellForm" action="/processproductuser" method="POST" enctype="multipart/form-data">
    <h2>Sell on eizon</h2>
    
      <label for="images">Product Images(3) Images:</label>
        <input type="file" id="images" name="images[]" accept="image/*" multiple required style="background-color:white;padding:5px;color:black;">
         <div id="preview"></div>
        
        
        <label for="name">Product Name:</label>
        <input type="text" id="name" name="name" placeholder="Eg:SAA YA MKONONI" required>
        <label for="description">Short Description:</label>
        <textarea id="description" name="description" rows="4" placeholder="Eg: BRAND: LOREX, saa kali sana" required></textarea>
        <label for="state">Condition:</label>
        <select id="state" name="state" required>
            <option class="option" value="" disabled selected>condition</option>
            <option class="option" value="NEW">NEW</option>
            <option class="option" value="REFURBISHED">REFURBISHED</option>
            <option value="USED">USED</option>
        </select>
      
     <label for="location">Location:</label>
    <input 
        type="text" 
        id="region" 
        name="region" 
        placeholder="Eg: ARUSHA" 
        value="<?= htmlspecialchars($location); ?>" 
        required>
        
      
        <label for="price">Price (TZS):</label>
        <input type="number" id="price" name="price" min="0" placeholder="Eg:15000" required>
      
         
          <label for="contact">WhatsApp number:</label>
    <div class="phone-input">
        <select id="country-code" name="country_code" required style="width:40%;">
            <option value="+255" selected>Tz (+255)</option>
            <option value="+254">Keny (+254)</option>
            <option value="+256">Uga (+256)</option>
            <option value="+250">Rwnd (+250)</option>
            <option value="+1">USA (+1)</option>
            <option value="+44">UK (+44)</option>
        </select>
        <input type="tel" id="contact" name="contacts" placeholder="711***675" required pattern="[0-9]{6,15}" style="width:40%;" value="<?= htmlspecialchars($phoneNumber); ?>" >
    </div>

<label for="category">Category:</label>
        <select id="category" name="category" required>
            <option class="option" value="" disabled selected>Select a category</option>
            <option class="option" value="Electronics">Electronics</option>
            <option class="option" value="Fashion and Beauty">Fashion & Beauty</option>
            <option value="Home Accessories">Home Accessories</option>
            <option value="Decorations">Decorations</option>
            <option value="Food and Nutrition">Food & Nutrition</option>
            <option value="Services">Services</option>
            <option value="Other">Other</option>
        </select>
        <button type="submit">Add Product</button>
    </form>

</div>

<div class="dashbanner"   style=" background: 
    linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.8),
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.2)
    ),
    url('<?php echo htmlspecialchars(!empty($profile['banner_image']) ? $profile['banner_image'] : 'images/default-banner.jpg'); ?>')
    center / cover no-repeat;">
    
        <div class="dashboard">
            <div class="profile"    style="background-image: url('<?php echo htmlspecialchars($profile['profile_image'] ?? 'images/profile_avatar.jpg'); ?>');background-position:center;
            background-size:100% 100%;background-repeat:no-repeat;">
           
            </div>
            <div class="business-name">
           
             <h2 style="margin:0;text-align:center;">Welcome, </h2>
             <h4 style="margin:0;text-align:center;padding:1px;"> <?php echo htmlspecialchars($display_name); ?>! </h4>
            </div>
            <div class="menu">
                        <div class="nav">
                            <span class="open-btn" onclick="openNav()">&#9776;</span>
                        </div>
            </div>
            <div id="myNav" class="overlay">
                <a href="javascript:void(0)" class="close-btn" onclick="closeNav()">&times;</a>
                <div class="overlay-content">
                   <a href="/home"><h1 style="margin:0;">e!zon</h1> </a>
                    <a href="/home">
        <i class="fas fa-home"></i> Home
    </a>
                     
                    
                  <p>Share</p>
<div class="share-button" style="display:flex;justify-content:space-around;">
    
     <a href="https://wa.me/?text=<?= urlencode('Check out my products on eizon: https://www.eizononline.com/profile.php?user=' . urlencode($display_name)) ?>" target="_blank" style="font-size:30px;">
     <i class="fa-brands fa-square-whatsapp"></i>
</a>
    
    
    <a href="https://www.threads.net/share?text=<?php echo urlencode('Check out ' . $display_name . "'s profile on Eizon: " . 'https://eizononline.com/profile.php?user=' . $display_name); ?>" target="_blank" style="font-size:30px;">
        <i class="fa-brands fa-square-threads"></i>
    </a>

<a href="https://twitter.com/intent/tweet?text=<?php echo urlencode('Check out ' . $display_name . "'s profile on Eizon: " . 'https://eizononline.com/profile.php?user=' . $display_name); ?>" target="_blank" style="font-size:30px;">
        <i class="fa-brands fa-square-x-twitter"></i>
    </a>

<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode('https://eizononline.com/profile.php?user=' . $display_name); ?>" target="_blank" style="font-size:30px;">
        <i class="fa-brands fa-facebook"></i>
    </a>
</div>
                   
                    <a href="/edit_profile">Edit profile</a>
                    <a href="/add_request">Request a product</a>
                    <a href="/requests_page">See product requests</a>
                    
                    <a href="/terms-and-conditions">Terms and conditions</a>
                    <a href="/privacy-policy">Privacy policy</a>  
                    <a href="/about-us">About Us</a>
                    <a href="logout.php">Logout</a>
                
                </div>
            </div>
        </div>

</div>

<div style="padding: 2px; background-color: #f0f0f0; border-radius: 10px; text-align: center; margin: 10px 3px;">
    <h3 style="margin: auto; font-weight: bold;">Customer Count</h3>
    <p style="font-size: 24px; font-weight: bold;margin: auto;"><?= $total_visits ?></p>
    <p style="margin: auto;">Total profile visits</p>
</div>

<div class="addnew">
 <button class="dashboardRequests" style="background-color:#40e351;">
     <a href="/requests_page"  style="text-decoration:none;color:white;">Product Requests</a>
 </button>
<button href="javascript:void(0)" onclick="openAdd()">Add a new product</button>
</div>

<div id="message" style="margin-bottom: 20px; font-weight: bold;"></div>
 
  
<div class="products-section">
    <?php if (count($products) > 0): ?>
        <div class="products">
            <?php foreach ($products as $row): ?>
                <div class="generalcard">
                    <div class="card">
                        <div class="card-inner">
                            
                            <div class="card-front">
                                
                                <div class="share-icon" onclick="window.location.href='https://wa.me/?text=Habari!%20Check%20out%20<?= urlencode($row['name']) ?>%20on%20eizon:%20<?= urlencode('https://www.eizononline.com/product.php?card_id=' . $row['card_id']) ?>';">
                                    <i class="fas fa-share-alt"></i> 
                                </div>

<div class="slideshow">
                                    <?php if (!empty($row['image1'])): ?>
                                        <img src="<?php echo htmlspecialchars($row['image1']); ?>" alt="Image 1">
                                    <?php endif; ?>
                                    <?php if (!empty($row['image2'])): ?>
                                        <img src="<?php echo htmlspecialchars($row['image2']); ?>" alt="Image 2">
                                    <?php endif; ?>
                                    <?php if (!empty($row['image3'])): ?>
                                        <img src="<?php echo htmlspecialchars($row['image3']); ?>" alt="Image 3">
                                    <?php endif; ?>
                                </div>
                            </div>

<div class="card-back">
                                <h3><?php echo htmlspecialchars($row['name']); ?></h3>
                                <p class="over"><?php echo htmlspecialchars($row['description']); ?></p>
                                <p><?php echo htmlspecialchars($row['state']); ?></p>
                                
                       
  
                                <form method="POST" class="delete-form" onsubmit="return confirm('Are you sure you want to delete this product?');">
                                    <input type="hidden" name="delete_product_id" value="<?php echo $row['card_id']; ?>">
                                    <button type="submit" class="delete-btn">Delete</button>
                                </form>
                            </div>
                        </div>
                    </div>

<div class="pricetag">
                        <p><?= htmlspecialchars(number_format($row['price'], 2)) ?> Tsh</p>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    
<?php else: ?>
    <p style="margin-bottom:300px;padding-top:20%;">Apper in the "Top Accounts" by adding more products and sharing your Account!</p>
<?php endif; ?>
 
</div>

<div id="uploadModal" class="modal">
  <div class="modal-content">
    <h2>Uploading...</h2>
    <div class="progress-bar-container">
      <div id="progress-bar" class="progress-bar"></div>
    </div>
    <p id="progress-text">0%</p>
     <p>Increase your customer count by sharing your products on WhatsApp!</p>
  </div>
</div>

<br><br>
    
<footer>
<div class="socialmediaicons">
            <hr>
                <div class="socials">
                    <a href="https://www.instagram.com/eizononline">
                        <i class="fa-brands fa-square-instagram"></i>
                    </a>
                      <a href="https://www.facebook.com/eizononline/">
                        <i class="fa-brands fa-facebook"></i>
                    </a>
                    <a href="https://chat.whatsapp.com/BjYHA7zTwzN0EA0cdZJnzd">
                        <i class="fa-brands fa-square-whatsapp"></i>
                    </a>
                    
                </div>  
            <hr>
        </div>
        <div class="footerlogo">
            <h1>e!zon</h1>
            <p>
            Copyright ©<?= date('Y'); ?> eizon, a daCotyINDUSTRY Company. All Rights Reserved.
            </p>
        </div>       
</footer>
   
    <nav class="mobile-nav">
        <ul class="nav-items" style="padding-left:0px;margin:0;">
            <li class="nav-item active">
                <a href="/home">
                    <i class="fas fa-home"></i>
                    <span>Home</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="/allproducts">
                    <i class="fas fa-shopping-cart"></i>
                    <span>Shop</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="/sell">
                    <i class="fas fa-plus-circle"></i>
                    <span>Add Product</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="/requests_page">
                    <i class="fas fa-clipboard-list"></i>
                    <span>Request</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="/dashboard">
                    <i class="fas fa-user"></i>
                    <span>Account</span>
                </a>
            </li>
        </ul>
    </nav>
    
<script>
           function openNav() {
            document.getElementById("myNav").style.width = "250px";
        }
        function closeNav() {
            document.getElementById("myNav").style.width = "0";
        }

function openAdd() {
            document.getElementById("loginAdd").style.display = "block";
        }
        function closeAdd() {
            document.getElementById("loginAdd").style.display = "none";
        }
        
        
    // Close the navigation menu when clicking outside of it
    document.addEventListener("click", function (event) {
        const nav = document.getElementById("myNav");
        const openButton = document.querySelector(".open-btn"); // Assuming you have a button to open the nav

// Check if the click is outside the nav and not on the open button
        if (!nav.contains(event.target) && !openButton.contains(event.target)) {
            closeNav();
        }
    });
    </script>
    
     <script src="https://cdn.jsdelivr.net/npm/compressorjs@latest/dist/compressor.min.js"></script>
    
    <script>
    const input = document.getElementById('images'); // Image input
    const preview = document.getElementById('preview'); // Image preview container
    let processedFiles = []; // To store compressed and converted files

input.addEventListener('change', function (event) {
        const files = Array.from(event.target.files); // Get selected files
        processedFiles = []; // Reset processed files
        preview.innerHTML = ""; // Clear previous previews

// Check if more than 3 images are selected
        if (files.length < 3) {
            alert("Please upload 3 images of your product.");
            input.value = ""; // Clear input
            return;
        }
         if (files.length > 3) {
            alert("Please upload only 3 images of your product.");
            input.value = ""; // Clear input
            return;
        }

files.forEach((file, index) => {
            // Compress and convert each file
            new Compressor(file, {
                quality: 0.6, // Adjust compression quality (0 to 1)
                convertTypes: ['image/jpeg'], // Convert to JPEG
                convertSize: 0, // Convert regardless of the original file size
                success(compressedFile) {
                    processedFiles.push(compressedFile);

// Create and display thumbnail preview
                    const img = document.createElement('img');
                    img.src = URL.createObjectURL(compressedFile);
                    img.alt = `Image ${index + 1}`;
            
                    img.style.margin = "5px";
                    preview.appendChild(img);

// Replace the original file input with processed files once all are done
                    if (processedFiles.length === files.length) {
                        const dataTransfer = new DataTransfer();
                        processedFiles.forEach(file => dataTransfer.items.add(file));
                        input.files = dataTransfer.files;
                    }
                },
                error(err) {
                    console.error("Compression or conversion failed:", err.message);
                },
            });
        });
    });
</script>

const formData = new FormData(this);
      const xhr = new XMLHttpRequest();

// Show the modal
      document.getElementById('uploadModal').style.display = 'flex';

// Simulate progress bar
      let progress = 0;
      const interval = setInterval(() => {
        progress += 10;
        document.getElementById('progress-bar').style.width = progress + '%';
        document.getElementById('progress-text').textContent = progress + '%';
        if (progress >= 90) clearInterval(interval);
      }, 800); // Adjust timing to match realistic speeds

// Handle upload completion
      xhr.onload = function() {
        if (xhr.status === 200) {
          // Reload the page after successful upload
          location.reload();
        }
        document.getElementById('uploadModal').style.display = 'none';
      };

xhr.open('POST', '/processproductuser', true);
      xhr.send(formData);
    });
  } else {
    console.error('Sell form not found.');
  }
});

</script>
 
<script>
    //handles profile sharing
    document.addEventListener("DOMContentLoaded", () => {
    const shareButton = document.querySelector(".share-profile-btn");

if (shareButton) {
        shareButton.addEventListener("click", () => {
            const link = shareButton.getAttribute("data-link");

if (navigator.share) {
                // Use Web Share API for mobile devices
                navigator.share({
                    title: "Check out this profile on eizon!",
                    text: "I found this amazing profile on our site:",
                    url: link,
                }).catch(err => console.error("Sharing failed:", err));
            } else {
                // Fallback: Copy the link or display a modal
                alert("Share this profile link: " + link);
            }
        });
    }
});

</script>

// Show the banner after 5 seconds
        setTimeout(() => {
            banner.classList.add('visible'); // Slide into view
            document.body.style.paddingTop = `${banner.offsetHeight}px`; // Push content down
        }, 5000); // 5 seconds delay
    }

// Function to hide the message banner
    function hideBanner() {
        const banner = document.getElementById('message-banner');

banner.classList.remove('visible'); // Slide out of view

// Wait for the transition to complete before hiding the banner
        setTimeout(() => {
            banner.style.display = 'none';
            document.body.style.paddingTop = '0'; // Restore content position
        }, 300); // Match the transition duration
    }

// Show the banner when the page loads
    showBanner();

// Close banner on button click
    document.getElementById('close-banner').addEventListener('click', hideBanner);
</script>

let matched = false;

navItems.forEach(item => {
        const link = item.querySelector("a");
        const linkPath = link.getAttribute("href");

let isActive = false;

// ✅ Special cases
        if (linkPath === "/sell" && (currentPath.startsWith("/sell") || currentPath.startsWith("/addproduct"))) {
            isActive = true; // /sell OR /addproduct = Add Product
        } 
        else if (linkPath === "/dashboard" && currentPath.startsWith("/dashboard")) {
            isActive = true; // /dashboard/* = Account
        } 
         else if (linkPath === "/allproducts" && (currentPath.startsWith("/products") || currentPath.startsWith("/regions"))) {
            isActive = true; // /products/* or /regions/* = Shop
        }
        else if (currentPath === linkPath || currentPath.startsWith(linkPath + "/")) {
            isActive = true; // Normal match
        }

if (isActive) {
            item.classList.add("active");
            matched = true;
        } else {
            item.classList.remove("active");
        }
    });

// ✅ Fallback: Home if nothing else matches
    if (!matched) {
        const homeItem = document.querySelector('.mobile-nav .nav-item a[href="/home"]')?.parentElement;
        if (homeItem) homeItem.classList.add("active");
    }
});
</script>

<?php include_once __DIR__ . '/cordova-bridge.php'; ?>
</body>
</html>

⬅ Back