shubraVeil/js/cart.js

class ShoppingCart {
    constructor() {
        this.cart = JSON.parse(localStorage.getItem('cart')) || [];
        this.cartIcon = document.querySelector('.cart-icon');
        this.cartCount = document.querySelector('.cart-count');
        this.cartTotal = document.querySelector('.cart-total');
        this.cartItems = document.querySelector('.cart-items');
        this.cartDropdown = document.querySelector('.cart-dropdown');
        
        this.initializeCart();
    }

    initializeCart() {
        // تحديث عداد السلة
        this.updateCartCount();
        
        // إضافة مستمعي الأحداث
        document.querySelectorAll('.add-to-cart').forEach(button => {
            button.addEventListener('click', (e) => this.addToCart(e));
        });

        // تفعيل القائمة المنسدلة للسلة
        this.cartIcon?.addEventListener('click', () => {
            this.cartDropdown?.classList.toggle('active');
        });

        // إغلاق القائمة عند النقر خارجها
        document.addEventListener('click', (e) => {
            if (!e.target.closest('.cart-container') && this.cartDropdown?.classList.contains('active')) {
                this.cartDropdown.classList.remove('active');
            }
        });
    }

    addToCart(e) {
        const productCard = e.target.closest('.product-card');
        const productId = productCard.dataset.id;
        const productName = productCard.querySelector('h3').textContent;
        const productPrice = parseFloat(productCard.querySelector('.product-price').textContent);
        const productImage = productCard.querySelector('img').src;

        const existingItem = this.cart.find(item => item.id === productId);

        if (existingItem) {
            existingItem.quantity += 1;
        } else {
            this.cart.push({
                id: productId,
                name: productName,
                price: productPrice,
                image: productImage,
                quantity: 1
            });
        }

        this.updateCart();
        this.showNotification('تمت إضافة المنتج إلى السلة');
    }

    removeFromCart(productId) {
        this.cart = this.cart.filter(item => item.id !== productId);
        this.updateCart();
    }

    updateQuantity(productId, change) {
        const item = this.cart.find(item => item.id === productId);
        if (item) {
            item.quantity = Math.max(1, item.quantity + change);
            this.updateCart();
        }
    }

    updateCart() {
        // تحديث Local Storage
        localStorage.setItem('cart', JSON.stringify(this.cart));
        
        // تحديث عداد السلة
        this.updateCartCount();
        
        // تحديث عرض السلة
        this.updateCartDisplay();
    }

    updateCartCount() {
        const totalItems = this.cart.reduce((total, item) => total + item.quantity, 0);
        if (this.cartCount) {
            this.cartCount.textContent = totalItems;
            this.cartCount.style.display = totalItems > 0 ? 'block' : 'none';
        }
    }

    updateCartDisplay() {
        if (!this.cartItems) return;

        if (this.cart.length === 0) {
            this.cartItems.innerHTML = '<p class="empty-cart">السلة فارغة</p>';
            return;
        }

        this.cartItems.innerHTML = this.cart.map(item => `
            <div class="cart-item" data-id="${item.id}">
                <img src="${item.image}" alt="${item.name}">
                <div class="item-details">
                    <h4>${item.name}</h4>
                    <div class="item-price">${item.price} جنيه</div>
                    <div class="quantity-controls">
                        <button onclick="cart.updateQuantity('${item.id}', -1)">-</button>
                        <span>${item.quantity}</span>
                        <button onclick="cart.updateQuantity('${item.id}', 1)">+</button>
                    </div>
                </div>
                <button class="remove-item" onclick="cart.removeFromCart('${item.id}')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        `).join('');

        // تحديث المجموع
        const total = this.cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
        if (this.cartTotal) {
            this.cartTotal.textContent = `المجموع: ${total.toFixed(2)} جنيه`;
        }
    }

    showNotification(message) {
        const notification = document.createElement('div');
        notification.className = 'cart-notification';
        notification.textContent = message;
        
        document.body.appendChild(notification);
        
        setTimeout(() => {
            notification.classList.add('show');
        }, 100);

        setTimeout(() => {
            notification.classList.remove('show');
            setTimeout(() => notification.remove(), 300);
        }, 2000);
    }

    async checkout() {
        if (this.cart.length === 0) {
            alert('السلة فارغة');
            return;
        }

        try {
            const response = await fetch('/api/checkout.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    items: this.cart,
                    total: this.cart.reduce((sum, item) => sum + (item.price * item.quantity), 0)
                })
            });

            if (!response.ok) throw new Error('فشلت عملية الشراء');

            // تفريغ السلة بعد نجاح عملية الشراء
            this.cart = [];
            this.updateCart();
            alert('تمت عملية الشراء بنجاح!');
        } catch (error) {
            console.error('Checkout error:', error);
            alert('حدث خطأ أثناء إتمام عملية الشراء');
        }
    }
}

// تهيئة سلة المشتريات
const cart = new ShoppingCart();