Order-page.js

// for Loading screen to
function showLoadingScreen(message) {
    // Create the loading screen HTML
    document.body.innerHTML = `
        <div class="loading-screen">
            <div class="log-in">${message}</div>
            <div class="loading-image">
                <img src="https://res.cloudinary.com/drkmgpcad/image/upload/v1726841328/rahjpg3k7mdtnow4ttux.png" alt="Loading Image">
            </div>
        </div>
    `;

    // Set a timeout to remove the loading screen after 1 second
    setTimeout(() => {
        document.body.innerHTML = ''; // Clear the loading screen
    }, 2000); // 2000 milliseconds = 2 seconds (1 second longer than before)
}

// For Loading Screen yung nasa taas
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');
        }
    });

    // Quantity validation
    const quantityInput = document.getElementById('quantity');
    const maxStock = parseInt(quantityInput.max); // Get the max stock value

    quantityInput.addEventListener('input', function() {
        let value = parseInt(quantityInput.value);

        // Check if the value exceeds the available stock
        if (value > maxStock) {
            quantityInput.value = maxStock;
        } else if (value < 1) {
            quantityInput.value = 1; // Ensure minimum value is 1
        }
    });
});

function openModal() {
    document.getElementById("sizeChartModal").style.display = "block";
}

function closeModal() {
    document.getElementById("sizeChartModal").style.display = "none";
}

// Close the modal when clicking outside of the modal content
window.onclick = function(event) {
    const modal = document.getElementById("sizeChartModal");
    if (event.target === modal) {
        closeModal();
    }
}


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');
    }
});