homepageScript.js

document.addEventListener('DOMContentLoaded', function() {
    const profileDropdown = document.querySelector('.profile-dropdown');
    const usernameLink = document.getElementById('usernameLink');

    // Toggle dropdown visibility on click
    usernameLink.addEventListener('click', function(event) {
        event.preventDefault();
        profileDropdown.classList.toggle('show');
    });

    // Close the dropdown if clicked outside
    document.addEventListener('click', function(event) {
        if (!profileDropdown.contains(event.target) && !usernameLink.contains(event.target)) {
            profileDropdown.classList.remove('show');
        }
    });
});

let lastProductID = 0;
let randomMode = false;
let isLoading = false;
let currentCategory = null; // Track the current category

function fetchProducts() {
    if (isLoading) return;
    isLoading = true;
    document.getElementById('loading').style.display = 'block';

    // Prepare category parameters
    let categoryParam = '';
    if (currentCategory) {
        categoryParam = `&productType=${encodeURIComponent(currentCategory)}`;
    }

    fetch(`fetch_product.php?lastProductID=${lastProductID}&randomMode=${randomMode}${categoryParam}`)
        .then(response => response.json())
        .then(products => {
            if (products.length > 0) {
                products.forEach(product => {
                    addProductToGrid(product);
                    lastProductID = product.ProductID; // Update lastProductID
                });
            } else {
                // If no products are returned, switch to random mode
                randomMode = true;
                lastProductID = 0; // Reset lastProductID if switching to random mode
            }
            isLoading = false;
            document.getElementById('loading').style.display = 'none';
        })
        .catch(error => {
            console.error('Error fetching products:', error);
            isLoading = false;
            document.getElementById('loading').style.display = 'none';
        });
}

function addProductToGrid(product) {
    const productGrid = document.getElementById('productGrid');

    // Create an anchor element for the product item
    const productLink = document.createElement('a');
    productLink.href = `order-page.php?productId=${product.ProductID}`;
    productLink.className = 'product-item'; // Add class for styling

    const productImage = document.createElement('div');
    productImage.className = 'product-image';
    productImage.innerHTML = `<img src="${product.ImageUrl}" alt="${product.ProductName}">`;

    const productName = document.createElement('p');
    productName.className = 'product-name';
    productName.innerHTML = product.ProductName; // No need for an inner anchor here

    const productDescription = document.createElement('div');
    productDescription.className = 'product-description';
    productDescription.innerHTML = `<p class="product-price">₱ ${product.Price}</p>`;

    // Only add stock information if it's greater than 0
    if (product.Stock > 0) {
        productDescription.innerHTML += `<p class="product-stock">Stock: ${product.Stock}</p>`;
    }

    productLink.appendChild(productImage);
    productLink.appendChild(productName);
    productLink.appendChild(productDescription);

    productGrid.appendChild(productLink);
}


// Infinite scroll
window.addEventListener('scroll', () => {
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500) {
        fetchProducts();
    }
});

function toggleCategory(category) {
    // Check if the clicked category is already the current category
    if (currentCategory === category) {
        // If it's the same category, remove the 'active' class
        const categoryButton = document.getElementById(`${category}Button`);
        if (categoryButton) {
            categoryButton.classList.remove('active');
        }
        currentCategory = null; // Reset current category
    } else {
        // If it's a different category, remove 'active' from all and add to the clicked one
        document.querySelectorAll('.categories').forEach(el => {
            el.classList.remove('active');
        });
        currentCategory = category; // Set new current category
        
        // Add the 'active' class to the clicked category button
        const categoryButton = document.getElementById(`${category}Button`);
        if (categoryButton) {
            categoryButton.classList.add('active');
        }
    }

    lastProductID = 0; // Reset lastProductID to fetch from the start
    document.getElementById('productGrid').innerHTML = ''; // Clear existing products
    fetchProducts(); // Fetch new products based on the selected category
}

// Handle category toggling
document.getElementById('coffinButton').addEventListener('click', () => toggleCategory('coffin'));
document.getElementById('urnButton').addEventListener('click', () => toggleCategory('urn'));

// Handle button clicks to toggle categories
document.getElementById('button1').addEventListener('click', () => toggleCategory('coffin'));
document.getElementById('button2').addEventListener('click', () => toggleCategory('urn'));

const showDistance = 1050; // Change this value as needed
const middleButtons = document.getElementById('middle-buttons');

window.addEventListener('scroll', function() {
    if (window.scrollY >= showDistance) {
        middleButtons.classList.add('visible');
    } else {
        middleButtons.classList.remove('visible');
    }
});


// for Searching

function searchProducts() {
    const query = document.getElementById('search-query').value;
    const resultsContainer = document.getElementById('search-results');

    if (query.length < 2) {
        resultsContainer.innerHTML = ''; // Clear results if query is too short
        resultsContainer.classList.remove('show'); // Hide results
        return;
    }

    fetch(`search.php?query=${encodeURIComponent(query)}`)
        .then(response => response.json())
        .then(data => {
            resultsContainer.innerHTML = ''; // Clear previous results

            if (data.results.length > 0) {
                data.results.forEach(product => {
                    const productLink = document.createElement('a');
                    productLink.href = `order-page.php?productId=${product.ProductID}`;
                    productLink.textContent = product.ProductName;
                    resultsContainer.appendChild(productLink);
                });
                resultsContainer.classList.add('show'); // Show results
            } else if (data.suggestions.length > 0) {
                resultsContainer.innerHTML = `<p>Did you mean:</p>`;
                data.suggestions.forEach(product => {
                    const suggestionLink = document.createElement('a');
                    suggestionLink.href = `order-page.php?productId=${product.ProductID}`;
                    suggestionLink.textContent = product.ProductName;
                    resultsContainer.appendChild(suggestionLink);
                });
                resultsContainer.classList.add('show'); // Show suggestions
            } else {
                resultsContainer.innerHTML = '<p>No results found.</p>';
                resultsContainer.classList.add('show'); // Show no results message
            }
        })
        .catch(error => {
            console.error('Error fetching search results:', error);
        });
}

document.addEventListener('click', function(event) {
    const resultsContainer = document.getElementById('search-results');
    const searchInput = document.getElementById('search-query');

    // Hide results if the click is outside the search input and results container
    if (!searchInput.contains(event.target) && !resultsContainer.contains(event.target)) {
        resultsContainer.classList.remove('show');
    }
});