$page_title = $category['name'];
$page_description = 'Shop the latest products in ' . $category['name'];
$page_canonical = 'http://' . $_SERVER['HTTP_HOST'] . '/ecom/category/' . $category_id;

require_once __DIR__ . '/includes/header.php'; ?>

<div class="container" style="padding: 40px 20px;">
    <h1 class="section-title" style="margin-top: 0; text-align: left; border-bottom: none; font-size: 24px; padding-bottom: 0;">Girls Fashion</h1>
    <p style="color: var(--text-muted); margin-bottom: 30px; font-size: 14px;">Explore 4 items in this category</p>

    <div class="product-grid">
        <div class="product-card">    <a href="/ecom/wishlist?action=add&id=36" class="wishlist-btn"><i class="fa-solid fa-heart"></i></a>    <a href="/ecom/product?id=36" class="product-image">        <img src="/ecom/uploads/p_women_kurti.jpg" alt="Designer Silk Anarkali Suit">    </a>    <div class="product-info">        <a href="/ecom/product?id=36" class="product-title">Designer Silk Anarkali Suit</a>        <div class="product-desc-short">Girls Fashion</div>        <div class="product-price">$1899.00 <span class="old-price">$2499.00</span>        </div>    </div>    <button class="add-to-cart" onclick="addToCart(36)">Add to Bag</button></div><div class="product-card">    <a href="/ecom/wishlist?action=add&id=21" class="wishlist-btn"><i class="fa-solid fa-heart"></i></a>    <a href="/ecom/product?id=21" class="product-image">        <img src="/ecom/uploads/p_girls_dress.jpg" alt="Casual Printed Kurti - Girls">    </a>    <div class="product-info">        <a href="/ecom/product?id=21" class="product-title">Casual Printed Kurti - Girls</a>        <div class="product-desc-short">Girls Fashion</div>        <div class="product-price">$499.00        </div>    </div>    <button class="add-to-cart" onclick="addToCart(21)">Add to Bag</button></div><div class="product-card">    <a href="/ecom/wishlist?action=add&id=20" class="wishlist-btn"><i class="fa-solid fa-heart"></i></a>    <a href="/ecom/product?id=20" class="product-image">        <img src="/ecom/uploads/p_girls_dress.jpg" alt="Festive Lehenga Set for Girls">    </a>    <div class="product-info">        <a href="/ecom/product?id=20" class="product-title">Festive Lehenga Set for Girls</a>        <div class="product-desc-short">Girls Fashion</div>        <div class="product-price">$1199.00 <span class="old-price">$1599.00</span>        </div>    </div>    <button class="add-to-cart" onclick="addToCart(20)">Add to Bag</button></div><div class="product-card">    <a href="/ecom/wishlist?action=add&id=19" class="wishlist-btn"><i class="fa-solid fa-heart"></i></a>    <a href="/ecom/product?id=19" class="product-image">        <img src="/ecom/uploads/p_girls_dress.jpg" alt="Pink Tulle Party Dress">    </a>    <div class="product-info">        <a href="/ecom/product?id=19" class="product-title">Pink Tulle Party Dress</a>        <div class="product-desc-short">Girls Fashion</div>        <div class="product-price">$899.00 <span class="old-price">$1199.00</span>        </div>    </div>    <button class="add-to-cart" onclick="addToCart(19)">Add to Bag</button></div>    </div>
</div>

<!-- Cart Drawer Overlay -->
<div class="cart-drawer-overlay" id="cartDrawerOverlay" onclick="closeCartDrawer()"></div>

<!-- Cart Drawer Container -->
<div class="cart-drawer" id="cartDrawer">
    <div class="cart-drawer-header">
        <div class="cart-drawer-title">
            <i class="fa-solid fa-bag-shopping"></i> Your Shopping Bag (<span id="drawer-cart-count">0</span>)
        </div>
        <button type="button" class="cart-drawer-close" onclick="closeCartDrawer()" aria-label="Close Cart">
            <i class="fa-solid fa-xmark"></i>
        </button>
    </div>

    <!-- Free Shipping Progress Bar -->
    <div class="cart-drawer-shipping" id="cartDrawerShipping">
        <div class="shipping-bar-text" id="shippingBarText">Add &#8377;499 more to unlock <strong>FREE Express Shipping</strong>!</div>
        <div class="shipping-bar-track">
            <div class="shipping-bar-fill" id="shippingBarFill" style="width: 0%;"></div>
        </div>
    </div>

    <!-- Cart Items Body -->
    <div class="cart-drawer-body" id="cartDrawerBody">
        <div class="cart-drawer-empty" id="cartDrawerEmpty">
            <i class="fa-solid fa-bag-shopping" style="font-size: 48px; color: var(--border); margin-bottom: 16px;"></i>
            <p style="font-size: 15px; font-weight: 700; color: var(--text-dark); margin-bottom: 6px;">Your bag is currently empty</p>
            <p style="font-size: 13px; color: var(--text-muted); margin-bottom: 20px;">Explore our collection and discover something special!</p>
            <a href="/ecom/products" onclick="closeCartDrawer()" class="btn btn-primary" style="padding: 10px 24px; font-size: 13px;">Shop Now</a>
        </div>

        <div id="cartDrawerItemsList" style="display: none;"></div>
    </div>

    <!-- Cart Upsell Block ("Pair it with...") -->
    <div id="cartDrawerUpsell" style="padding: 14px 18px; background: var(--surface); border-top: 1.5px solid var(--border); display: none;">
        <div style="font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--text-dark); margin-bottom: 8px; display: flex; align-items: center; gap: 6px;">
            <i class="fa-solid fa-sparkles" style="color: var(--primary);"></i> PAIR IT WITH (1-CLICK ADD)
        </div>
        <div id="cartDrawerUpsellContent"></div>
    </div>

    <!-- Cart Drawer Footer -->
    <div class="cart-drawer-footer" id="cartDrawerFooter" style="display: none;">
        <div class="cart-drawer-subtotal">
            <span>Subtotal</span>
            <strong id="drawer-subtotal-price">&#8377;0</strong>
        </div>
        <p style="font-size: 11px; color: var(--text-muted); margin-bottom: 14px;">Taxes, shipping &amp; coupons calculated at checkout</p>
        
        <div style="display: flex; gap: 10px; margin-bottom: 12px;">
            <a href="/ecom/cart" class="btn btn-outline" style="flex: 1; text-align: center; justify-content: center; font-size: 12px; padding: 12px;">VIEW BAG</a>
            <a href="/ecom/checkout" class="btn btn-primary" style="flex: 2; text-align: center; justify-content: center; font-size: 13px; font-weight: 800; background: var(--primary);">
                CHECKOUT &rarr;
            </a>
        </div>
    </div>
</div>
<footer>
    <div class="footer-top">
        <div class="footer-brand">
            <div class="logo-text">
                                    <img src="/ecom/uploads/store_logo_1787294894.png" alt="STORE." style="max-width: 40px; max-height: 48px; object-fit: contain;">
                            </div>
            <p>Your one-stop destination for premium fashion, accessories and essentials. Curated for the bold and the beautiful.</p>
            <div style="font-size: 12px; color: #888; margin-top: 10px; line-height: 1.6;">
                                    <div><i class="fa-solid fa-phone" style="color: var(--primary); margin-right: 6px;"></i>+91 98765 43210</div>
                                                    <div><i class="fa-solid fa-envelope" style="color: var(--primary); margin-right: 6px;"></i>support@prestigecouture.com</div>
                                                    <div><i class="fa-solid fa-receipt" style="color: var(--primary); margin-right: 6px;"></i>GSTIN: 07AAACG1234F1Z9</div>
                            </div>
            <div class="footer-socials" style="margin-top: 12px;">
                <a href="#" aria-label="Instagram"><i class="fa-brands fa-instagram"></i></a>
                <a href="#" aria-label="Facebook"><i class="fa-brands fa-facebook-f"></i></a>
                <a href="#" aria-label="Twitter"><i class="fa-brands fa-twitter"></i></a>
                <a href="#" aria-label="YouTube"><i class="fa-brands fa-youtube"></i></a>
            </div>
        </div>
        <div class="footer-col">
            <h4>Shop</h4>
            <ul>
                <li><a href="/ecom/products">New Arrivals</a></li>
                <li><a href="/ecom/products?sort=bestselling">Bestsellers</a></li>
                <li><a href="/ecom/products?sort=discount">Sale</a></li>
                <li><a href="/ecom/products">All Products</a></li>
            </ul>
        </div>
        <div class="footer-col">
            <h4>Support</h4>
            <ul>
                <li><a href="/ecom/account">My Account</a></li>
                <li><a href="/ecom/account">Track Order</a></li>
                <li><a href="/ecom/account">Returns & Refunds</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div>
        <div class="footer-col">
            <h4>Newsletter</h4>
            <p style="font-size: 13px; color: #888; line-height: 1.7; margin-bottom: 14px;">Get exclusive deals, new arrivals and style tips — straight to your inbox.</p>
            <form onsubmit="event.preventDefault(); showToast('Thanks for subscribing! 🎉', 'success'); this.reset();" class="footer-newsletter-input">
                <input type="email" placeholder="Enter your email" required>
                <button type="submit">Go</button>
            </form>
        </div>
    </div>
    <div class="footer-bottom">
        <span>&copy; 2026 STORE.. All rights reserved.</span>
        <div class="footer-bottom-links">
            <a href="#">Privacy Policy</a>
            <a href="#">Terms of Service</a>
            <a href="#">Sitemap</a>
        </div>
    </div>
</footer>

<!-- Floating WhatsApp Support Button -->
<a href="https://wa.me/918268686894?text=Hi%20STORE%20Team!%20I%20have%20a%20question%20about%20an%20order." target="_blank" rel="noopener" style="position: fixed; bottom: 24px; right: 24px; z-index: 9999; width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 8px 24px rgba(37,211,102,0.4); transition: transform 0.25s ease, box-shadow 0.25s ease;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'" title="Chat with STORE Support on WhatsApp">
    <i class="fa-brands fa-whatsapp"></i>
</a>

<!-- Social Proof Purchase Toast Popup -->
<div id="socialProofToast" style="position: fixed; bottom: 24px; left: 24px; z-index: 9998; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 12px 16px; box-shadow: 0 12px 32px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 12px; max-width: 320px; opacity: 0; transform: translateY(20px); transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); pointer-events: none;">
    <div style="width: 40px; height: 40px; border-radius: 50%; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;">
        <i class="fa-solid fa-bag-shopping"></i>
    </div>
    <div>
        <div id="spName" style="font-size: 12px; font-weight: 800; color: var(--text-dark);">Ankit from Delhi</div>
        <div id="spMsg" style="font-size: 12px; color: var(--text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;">just purchased Silk Saree</div>
        <div id="spTime" style="font-size: 10px; color: var(--text-muted); margin-top: 2px;">2 minutes ago &bull; Verified Buyer</div>
    </div>
</div>

<!-- Toast Container -->
<div id="toast-container" style="position: fixed; top: 80px; right: 20px; z-index: 10000; display: flex; flex-direction: column; gap: 10px;"></div>

<script>
// Shopify-Style Social Proof Live Purchases Popup Engine
(function() {
    const purchases = [
        { name: 'Priya from Mumbai', item: 'Matte Velvet Liquid Lipstick', time: '4 minutes ago' },
        { name: 'Ankit from Yamunanagar', item: 'Royal Blue Banarasi Saree', time: '8 minutes ago' },
        { name: 'Rahul from Delhi', item: 'HD Full Coverage Foundation', time: '12 minutes ago' },
        { name: 'Sneha from Bangalore', item: 'Teal Anarkali Kurti Set', time: '15 minutes ago' },
        { name: 'Karan from Chandigarh', item: 'Keratin Hair Smoothing Kit', time: '19 minutes ago' }
    ];

    let idx = 0;
    function triggerSocialProof() {
        const toast = document.getElementById('socialProofToast');
        if (!toast) return;

        const p = purchases[idx];
        document.getElementById('spName').textContent = p.name;
        document.getElementById('spMsg').textContent = 'just purchased ' + p.item;
        document.getElementById('spTime').textContent = p.time + ' \u2022 Verified Buyer';

        toast.style.opacity = '1';
        toast.style.transform = 'translateY(0)';
        toast.style.pointerEvents = 'auto';

        setTimeout(() => {
            toast.style.opacity = '0';
            toast.style.transform = 'translateY(20px)';
            toast.style.pointerEvents = 'none';
        }, 5500);

        idx = (idx + 1) % purchases.length;
    }

    setTimeout(() => {
        triggerSocialProof();
        setInterval(triggerSocialProof, 18000);
    }, 6000);
})();

// Toast Notification System
function showToast(message, type = 'info') {
    const container = document.getElementById('toast-container');
    const toast = document.createElement('div');
    const colors = {
        success: { bg: '#e6f4ea', border: '#03a685', text: '#137333', icon: 'fa-circle-check' },
        error:   { bg: '#ffebee', border: '#c5221f', text: '#c5221f', icon: 'fa-circle-xmark' },
        info:    { bg: '#e8f0fe', border: '#1a73e8', text: '#1a73e8', icon: 'fa-circle-info' },
    };
    const c = colors[type] || colors.info;
    toast.style.cssText = `background: ${c.bg}; border: 1px solid ${c.border}; color: ${c.text}; padding: 14px 20px; border-radius: 6px; font-size: 14px; font-weight: 500; min-width: 280px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 10px; animation: slideIn 0.3s ease;`;
    toast.innerHTML = `<i class="fa-solid ${c.icon}"></i> ${message}`;
    container.appendChild(toast);
    setTimeout(() => {
        toast.style.opacity = '0';
        toast.style.transform = 'translateX(100%)';
        toast.style.transition = 'all 0.3s';
        setTimeout(() => toast.remove(), 300);
    }, 3000);
}

// Search Auto-complete + Enter to search
const searchInput = document.getElementById('searchInput');
const searchSuggestions = document.getElementById('searchSuggestions');

if (searchInput) {
    searchInput.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            const q = this.value.trim();
            if (q.length >= 1) {
                window.location.href = '/ecom/products?q=' + encodeURIComponent(q);
            }
        }
    });

    searchInput.addEventListener('input', function() {
        const query = this.value.trim();
        if (query.length >= 2) {
            fetch('/ecom/ajax/search.php?q=' + encodeURIComponent(query))
                .then(response => response.json())
                .then(data => {
                    searchSuggestions.innerHTML = '';
                    if (data.length > 0) {
                        data.forEach(item => {
                            const div = document.createElement('div');
                            div.innerHTML = `<strong>${item.name}</strong> - $${item.price}`;
                            div.onclick = function() {
                                window.location.href = '/ecom/product/' + item.id;
                            };
                            searchSuggestions.appendChild(div);
                        });
                        // Add "View All Results" link
                        const viewAll = document.createElement('div');
                        viewAll.style.cssText = 'color: var(--primary-color); font-weight: 600; text-align: center;';
                        viewAll.innerHTML = `View all results for "${query}" →`;
                        viewAll.onclick = function() {
                            window.location.href = '/ecom/products?q=' + encodeURIComponent(query);
                        };
                        searchSuggestions.appendChild(viewAll);
                        searchSuggestions.style.display = 'block';
                    } else {
                        searchSuggestions.style.display = 'none';
                    }
                })
                .catch(err => console.error(err));
        } else {
            searchSuggestions.style.display = 'none';
        }
    });

    document.addEventListener('click', function(e) {
        if (!searchInput.contains(e.target) && !searchSuggestions.contains(e.target)) {
            searchSuggestions.style.display = 'none';
        }
    });
}

// Cart Badge Update
function updateCartBadge() {
    fetch('/ecom/ajax/cart_count.php')
        .then(r => r.json())
        .then(data => {
            const badge = document.getElementById('cart-badge');
            if (badge) {
                if (data.count > 0) {
                    badge.textContent = data.count;
                    badge.style.display = 'flex';
                } else {
                    badge.style.display = 'none';
                }
            }
        }).catch(() => {});
}

// Add to Cart
function addToCart(productId) {
    const csrfToken = '7f9837cd8f1f84b1f8a648a6855e28b79cf67c196395e71e921bea2270a1361c';
    fetch('/ecom/ajax/cart_action.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'action=add&product_id=' + productId + '&csrf_token=' + csrfToken
    })
    .then(response => response.json())
    .then(data => {
        if(data.success) {
            showToast('Item added to your bag!', 'success');
            openCartDrawer();
        } else {
            if(data.redirect) {
                window.location.href = data.redirect;
            } else {
                showToast(data.message || 'Error adding to bag', 'error');
            }
        }
    });
}

// Init cart badge on page load
document.addEventListener('DOMContentLoaded', updateCartBadge);
</script>

<style>
@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
</style>

</body>
</html>