Devco1 Shell

Filename : script.js
back
// إدارة سلة التسوق
class ShoppingCart {
    constructor() {
        this.init();
    }

    init() {
        this.bindEvents();
        this.updateCartCount();
    }

    bindEvents() {
        // إضافة منتج إلى السلة
        document.addEventListener('click', (e) => {
            if (e.target.classList.contains('add-to-cart') || e.target.closest('.add-to-cart')) {
                const button = e.target.classList.contains('add-to-cart') ? e.target : e.target.closest('.add-to-cart');
                this.addToCart(button.dataset.productId);
            }
            
            // إزالة منتج من السلة
            if (e.target.classList.contains('remove-item') || e.target.closest('.remove-item')) {
                const button = e.target.classList.contains('remove-item') ? e.target : e.target.closest('.remove-item');
                this.removeFromCart(button.dataset.cartId);
            }
        });

        // تحديث الكمية في سلة التسوق
        document.addEventListener('click', (e) => {
            if (e.target.classList.contains('increase') || e.target.closest('.increase')) {
                const button = e.target.classList.contains('increase') ? e.target : e.target.closest('.increase');
                const cartItem = button.closest('.cart-item');
                this.updateQuantity(cartItem.dataset.cartId, 'increase');
            }
            
            if (e.target.classList.contains('decrease') || e.target.closest('.decrease')) {
                const button = e.target.classList.contains('decrease') ? e.target : e.target.closest('.decrease');
                const cartItem = button.closest('.cart-item');
                this.updateQuantity(cartItem.dataset.cartId, 'decrease');
            }
        });
    }

    async addToCart(productId) {
        try {
            const quantity = document.getElementById('quantity') ? parseInt(document.getElementById('quantity').value) : 1;
            
            const response = await fetch('ajax/add_to_cart.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    product_id: productId,
                    quantity: quantity
                })
            });

            const result = await response.json();
            
            if (result.success) {
                this.showMessage('تمت إضافة المنتج إلى السلة', 'success');
                this.updateCartCount();
            } else {
                this.showMessage(result.message, 'error');
            }
        } catch (error) {
            console.error('Error:', error);
            this.showMessage('حدث خطأ في الاتصال', 'error');
        }
    }

    async removeFromCart(cartId) {
        if (!confirm('هل تريد حذف هذا المنتج من السلة؟')) return;

        try {
            const response = await fetch('ajax/remove_from_cart.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ cart_id: cartId })
            });

            const result = await response.json();
            
            if (result.success) {
                document.querySelector(`.cart-item[data-cart-id="${cartId}"]`).remove();
                this.updateCartCount();
                this.showMessage('تم حذف المنتج من السلة', 'success');
                location.reload(); // إعادة تحميل الصفحة لتحديث الإجمالي
            }
        } catch (error) {
            console.error('Error:', error);
            this.showMessage('حدث خطأ أثناء الحذف', 'error');
        }
    }

    async updateQuantity(cartId, action) {
        try {
            const response = await fetch('ajax/update_cart_quantity.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    cart_id: cartId,
                    action: action
                })
            });

            const result = await response.json();
            
            if (result.success) {
                location.reload(); // إعادة تحميل الصفحة لتحديث الإجمالي
            }
        } catch (error) {
            console.error('Error:', error);
            this.showMessage('حدث خطأ أثناء التحديث', 'error');
        }
    }

    async updateCartCount() {
        try {
            const response = await fetch('ajax/get_cart_count.php');
            const result = await response.json();
            
            if (result.success) {
                const cartCount = document.getElementById('cartCount');
                if (cartCount) {
                    cartCount.textContent = result.count;
                }
            }
        } catch (error) {
            console.error('Error:', error);
        }
    }

    showMessage(message, type) {
        // إنشاء عنصر الرسالة
        const messageDiv = document.createElement('div');
        messageDiv.className = `alert alert-${type === 'success' ? 'success' : 'danger'} alert-dismissible fade show`;
        messageDiv.style.position = 'fixed';
        messageDiv.style.top = '20px';
        messageDiv.style.right = '20px';
        messageDiv.style.zIndex = '9999';
        messageDiv.style.minWidth = '300px';
        messageDiv.innerHTML = `
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;

        document.body.appendChild(messageDiv);

        // إزالة الرسالة تلقائياً بعد 3 ثواني
        setTimeout(() => {
            if (messageDiv.parentNode) {
                messageDiv.remove();
            }
        }, 3000);
    }
}

// البحث والفلاتر
class SearchFilter {
    constructor() {
        this.init();
    }

    init() {
        const filterBtn = document.getElementById('filterBtn');
        if (filterBtn) {
            filterBtn.addEventListener('click', this.filterProducts.bind(this));
        }
    }

    async filterProducts() {
        const searchTerm = document.getElementById('searchInput').value;
        const brand = document.getElementById('brandFilter').value;
        const priceRange = document.getElementById('priceFilter').value;

        try {
            const response = await fetch('ajax/filter_products.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    search: searchTerm,
                    brand: brand,
                    price_range: priceRange
                })
            });

            const products = await response.json();
            this.updateProductsGrid(products);
        } catch (error) {
            console.error('Error:', error);
        }
    }

    updateProductsGrid(products) {
        const container = document.getElementById('productsContainer');
        if (!container) return;

        container.innerHTML = products.map(product => `
            <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
                <div class="card product-card h-100">
                    ${product.old_price && product.old_price > product.price ? 
                        `<div class="discount-badge"><span class="badge bg-danger">خصم ${Math.round((product.old_price - product.price) / product.old_price * 100)}%</span></div>` : ''}
                    <img src="${product.image_url || 'images/placeholder.jpg'}" 
                         class="card-img-top" 
                         alt="${product.name}"
                         style="height: 200px; object-fit: cover;">
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title">${product.name}</h5>
                        <p class="card-text text-muted small">${product.brand}</p>
                        
                        <div class="price-section mb-2">
                            ${product.old_price ? `<span class="text-muted text-decoration-line-through me-2">$${product.old_price}</span>` : ''}
                            <span class="h5 text-primary">$${product.price}</span>
                        </div>
                        
                        <div class="stock-info mb-2">
                            <small class="${product.stock_quantity > 10 ? 'text-success' : 'text-warning'}">
                                <i class="fas fa-box"></i> ${product.stock_quantity} متوفر
                            </small>
                        </div>
                        
                        <div class="mt-auto">
                            <div class="d-grid gap-2">
                                <a href="product.php?id=${product.id}" class="btn btn-outline-primary">
                                    <i class="fas fa-eye"></i> عرض التفاصيل
                                </a>
                                <button class="btn btn-primary add-to-cart" data-product-id="${product.id}">
                                    <i class="fas fa-cart-plus"></i> إضافة إلى السلة
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `).join('');
    }
}

// تهيئة التطبيق عند تحميل الصفحة
document.addEventListener('DOMContentLoaded', function() {
    new ShoppingCart();
    new SearchFilter();
});