script.js

// Admin authentication check
function checkAdminAuth() {
    const isAdmin = localStorage.getItem('adminLoggedIn') === 'true';
    if (!isAdmin && window.location.pathname.includes('admin')) {
        window.location.href = '/admin-login.html';
    }
}

// Admin login function
function adminLogin(username, password) {
    // In a real app, this would verify against your backend
    if (username === 'admin' && password === 'admin123') {
        localStorage.setItem('adminLoggedIn', 'true');
        return true;
    }
    return false;
}

// Admin logout
function adminLogout() {
    localStorage.removeItem('adminLoggedIn');
    window.location.href = '/admin-login.html';
}

// Shared functionality across all pages
document.addEventListener('DOMContentLoaded', function() {
    // Check admin auth for admin pages
    if (window.location.pathname.includes('admin')) {
        checkAdminAuth();
    }

    // Initialize cart count
    updateCartCount();
    
    // Load featured products on homepage
    if (document.getElementById('featured-products')) {
        loadFeaturedProducts();
    }
    
    // Initialize tooltips
    feather.replace();
});
// Cart functionality
let cartItems = JSON.parse(localStorage.getItem('cart')) || [];

function updateCartCount() {
    const count = cartItems.reduce((total, item) => total + item.quantity, 0);
    const cartElements = document.querySelectorAll('.cart-count');
    cartElements.forEach(el => {
        el.textContent = count;
        el.style.display = count > 0 ? 'inline-flex' : 'none';
    });
}

function addToCart(productId, name, price, image) {
    const existingItem = cartItems.find(item => item.id === productId);
    
    if (existingItem) {
        existingItem.quantity += 1;
    } else {
        cartItems.push({
            id: productId,
            name: name,
            price: price,
            image: image,
            quantity: 1
        });
    }
    
    localStorage.setItem('cart', JSON.stringify(cartItems));
    updateCartCount();
    
    // Show notification
    showNotification(`${name} added to cart`);
}

function showNotification(message) {
    const notification = document.createElement('div');
    notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg flex items-center animate-fadeIn';
    notification.innerHTML = `
        <i data-feather="check-circle" class="mr-2"></i>
        <span>${message}</span>
    `;
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.classList.add('opacity-0', 'transition-opacity', 'duration-300');
        setTimeout(() => notification.remove(), 300);
    }, 3000);
    
    feather.replace();
}

// Product loading
async function loadFeaturedProducts() {
    try {
        // In a real app, this would fetch from your API
        const products = [
            {
                id: 1,
                name: "Wireless Headphones",
                price: 99.99,
                image: "http://static.photos/technology/320x240/1",
                rating: 4.5,
                discount: 20
            },
            {
                id: 2,
                name: "Smart Watch",
                price: 199.99,
                image: "http://static.photos/technology/320x240/2",
                rating: 4.2,
                discount: 15
            },
            {
                id: 3,
                name: "Bluetooth Speaker",
                price: 59.99,
                image: "http://static.photos/technology/320x240/3",
                rating: 4.7,
                discount: 10
            },
            {
                id: 4,
                name: "Laptop Backpack",
                price: 39.99,
                image: "http://static.photos/office/320x240/1",
                rating: 4.3,
                discount: 0
            }
        ];
        
        const container = document.getElementById('featured-products');
        container.innerHTML = '';
        
        products.forEach((product, index) => {
            const productCard = document.createElement('div');
            productCard.className = 'product-card bg-white rounded-lg overflow-hidden shadow-md animate-fadeIn';
            productCard.style.setProperty('--delay', index);
            
            const discountBadge = product.discount > 0 
                ? `<span class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">${product.discount}% OFF</span>`
                : '';
                
            productCard.innerHTML = `
                <div class="relative">
                    <img src="${product.image}" alt="${product.name}" class="w-full h-48 object-cover">
                    ${discountBadge}
                </div>
                <div class="p-4">
                    <h3 class="font-semibold text-lg mb-1">${product.name}</h3>
                    <div class="flex items-center mb-2">
                        ${renderRatingStars(product.rating)}
                        <span class="text-gray-500 text-sm ml-1">(${Math.floor(Math.random() * 100) + 20})</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="font-bold text-lg">$${product.price.toFixed(2)}</span>
                        <button onclick="addToCart(${product.id}, '${product.name}', ${product.price}, '${product.image}')" 
                                class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded text-sm flex items-center">
                            <i data-feather="shopping-cart" class="w-4 h-4 mr-1"></i>
                            Add
                        </button>
                    </div>
                </div>
            `;
            
            container.appendChild(productCard);
        });
        
        feather.replace();
    } catch (error) {
        console.error('Error loading featured products:', error);
    }
}

function renderRatingStars(rating) {
    const fullStars = Math.floor(rating);
    const hasHalfStar = rating % 1 >= 0.5;
    let stars = '';
    
    for (let i = 0; i < 5; i++) {
        if (i < fullStars) {
            stars += '<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>';
        } else if (i === fullStars && hasHalfStar) {
            stars += '<i data-feather="star" class="w-4 h-4 text-yellow-400"></i>';
        } else {
            stars += '<i data-feather="star" class="w-4 h-4 text-gray-300"></i>';
        }
    }
    
    return stars;
}