<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B&A SHOP - المتجر الإلكتروني</title>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap" rel="stylesheet">
    
    <style>
        /* Reset CSS */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Tajawal', sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            color: #333;
        }
        
        a {
            text-decoration: none;
            color: inherit;
        }
        
        ul {
            list-style: none;
        }
        
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }
        
        /* Header Styles */
        .header-top {
            background-color: #f8f9fa;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }
        
        .header-top-links {
            display: flex;
            justify-content: flex-end;
            gap: 20px;
        }
        
        .header-top-links a {
            font-size: 14px;
            color: #666;
        }
        
        .header-top-links a i {
            margin-left: 5px;
        }
        
        .header-main {
            padding: 15px 0;
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .logo {
            font-size: 24px;
            font-weight: 700;
            color: #333;
        }
        
        .logo span {
            color: #ff6b6b;
        }
        
        .search-box {
            display: flex;
            max-width: 500px;
            margin: 0 auto;
        }
        
        .search-box input {
            flex: 1;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 4px 0 0 4px;
            font-size: 16px;
        }
        
        .search-box button {
            padding: 0 15px;
            background-color: #ff6b6b;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
        }
        
        /* Navigation */
        .navbar {
            background-color: #333;
        }
        
        .nav-list {
            display: flex;
            justify-content: center;
        }
        
        .nav-item {
            position: relative;
        }
        
        .nav-item > a {
            display: block;
            padding: 15px 20px;
            color: white;
            font-weight: 500;
            transition: all 0.3s;
        }
        
        .nav-item > a:hover {
            background-color: #ff6b6b;
        }
        
        .dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            background-color: white;
            width: 200px;
            box-shadow: 0 5px 10px rgba(0,0,0,0.1);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
            z-index: 100;
        }
        
        .nav-item:hover .dropdown {
            opacity: 1;
            visibility: visible;
        }
        
        .dropdown a {
            display: block;
            padding: 10px 15px;
            color: #333;
            border-bottom: 1px solid #eee;
            transition: all 0.3s;
        }
        
        .dropdown a:hover {
            background-color: #f8f9fa;
            color: #ff6b6b;
        }
        
        /* Hero Section */
        .hero {
            background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://via.placeholder.com/1200x400');
            background-size: cover;
            background-position: center;
            color: white;
            padding: 100px 0;
            text-align: center;
        }
        
        .hero-content h1 {
            font-size: 48px;
            margin-bottom: 20px;
        }
        
        .hero-content p {
            font-size: 18px;
            margin-bottom: 30px;
        }
        
        .btn {
            display: inline-block;
            padding: 12px 30px;
            border-radius: 4px;
            font-weight: 500;
            transition: all 0.3s;
        }
        
        .btn-primary {
            background-color: #ff6b6b;
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #ff5252;
        }
        
        /* Products Section */
        .section-title {
            text-align: center;
            margin: 50px 0 30px;
        }
        
        .section-title h2 {
            font-size: 32px;
            color: #333;
            position: relative;
            display: inline-block;
            padding-bottom: 15px;
        }
        
        .section-title h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background-color: #ff6b6b;
        }
        
        .products-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 30px;
            margin-bottom: 50px;
        }
        
        .product-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: all 0.3s;
            position: relative;
        }
        
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        }
        
        .product-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
            color: white;
            z-index: 1;
        }
        
        .product-badge.sale {
            background-color: #ff6b6b;
        }
        
        .product-badge.new {
            background-color: #4CAF50;
        }
        
        .product-img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            display: block;
        }
        
        .product-content {
            padding: 15px;
        }
        
        .product-category {
            display: block;
            font-size: 12px;
            color: #777;
            margin-bottom: 5px;
        }
        
        .product-title {
            font-size: 16px;
            margin-bottom: 10px;
            color: #333;
            font-weight: 500;
        }
        
        .product-price {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .current-price {
            font-size: 18px;
            font-weight: 700;
            color: #ff6b6b;
        }
        
        .old-price {
            font-size: 14px;
            color: #999;
            text-decoration: line-through;
        }
        
        .product-actions {
            display: flex;
            justify-content: space-between;
        }
        
        .action-btn {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background-color: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .action-btn:hover {
            background-color: #ff6b6b;
            color: white;
        }
        
        /* Pagination */
        .pagination {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin: 30px 0 50px;
        }
        
        .page-link {
            display: inline-block;
            padding: 8px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            color: #333;
            transition: all 0.3s;
        }
        
        .page-link:hover, .page-link.active {
            background-color: #ff6b6b;
            color: white;
            border-color: #ff6b6b;
        }
        
        /* Filters */
        .filters-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #ff6b6b;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            border: none;
            cursor: pointer;
            z-index: 99;
        }
        
        .filters-sidebar {
            position: fixed;
            top: 0;
            right: -350px;
            width: 350px;
            height: 100vh;
            background-color: white;
            box-shadow: -5px 0 15px rgba(0,0,0,0.1);
            padding: 20px;
            overflow-y: auto;
            transition: all 0.3s;
            z-index: 100;
        }
        
        .filters-sidebar.show {
            right: 0;
        }
        
        .filters-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        
        .filters-title {
            font-size: 20px;
            font-weight: 500;
        }
        
        .close-filters {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: #777;
        }
        
        .filter-group {
            margin-bottom: 20px;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }
        
        .filter-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            cursor: pointer;
        }
        
        .filter-title {
            font-weight: 500;
        }
        
        .filter-toggle {
            transition: all 0.3s;
        }
        
        .filter-group.active .filter-toggle {
            transform: rotate(180deg);
        }
        
        .filter-options {
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s;
        }
        
        .filter-group.active .filter-options {
            max-height: 500px;
        }
        
        .filter-option {
            margin-bottom: 10px;
        }
        
        .filter-option input {
            margin-left: 10px;
        }
        
        .price-range-container {
            padding: 10px 0;
        }
        
        .price-range {
            width: 100%;
            margin-bottom: 10px;
        }
        
        .price-values {
            display: flex;
            justify-content: space-between;
        }
        
        .apply-filters {
            width: 100%;
            padding: 12px;
            background-color: #ff6b6b;
            color: white;
            border: none;
            border-radius: 4px;
            font-weight: 500;
            margin-top: 20px;
            cursor: pointer;
        }
        
        .reset-filters {
            display: block;
            text-align: center;
            margin-top: 10px;
            color: #777;
        }
        
        /* Footer */
        .footer {
            background-color: #333;
            color: white;
            padding: 50px 0 0;
        }
        
        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-bottom: 30px;
        }
        
        .footer-title {
            font-size: 20px;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
        }
        
        .footer-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 50px;
            height: 2px;
            background-color: #ff6b6b;
        }
        
        .footer-links li {
            margin-bottom: 10px;
        }
        
        .footer-links a {
            transition: all 0.3s;
        }
        
        .footer-links a:hover {
            color: #ff6b6b;
            padding-right: 5px;
        }
        
        .footer-links i {
            margin-left: 5px;
        }
        
        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }
        
        .social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background-color: rgba(255,255,255,0.1);
            transition: all 0.3s;
        }
        
        .social-links a:hover {
            background-color: #ff6b6b;
            transform: translateY(-3px);
        }
        
        .footer-bottom {
            text-align: center;
            padding: 20px 0;
            border-top: 1px solid rgba(255,255,255,0.1);
            font-size: 14px;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .header-main {
                flex-direction: column;
                gap: 15px;
            }
            
            .nav-list {
                flex-wrap: wrap;
            }
            
            .nav-item {
                flex: 1 0 auto;
                text-align: center;
            }
            
            .dropdown {
                width: 100%;
            }
            
            .hero-content h1 {
                font-size: 36px;
            }
            
            .filters-sidebar {
                width: 300px;
            }
        }
        
        @media (max-width: 576px) {
            .products-container {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
                gap: 15px;
            }
            
            .product-img {
                height: 150px;
            }
            
            .hero-content h1 {
                font-size: 28px;
            }
            
            .hero-content p {
                font-size: 16px;
            }
            
            .btn {
                padding: 10px 20px;
            }
        }
    </style>
</head>
<body>
    <!-- Header Top -->
    <div class="header-top">
        <div class="container">
            <div class="header-top-links">
                <a href="#"><i class="fas fa-phone-alt"></i> 0567289188</a>
                <a href="#"><i class="fas fa-envelope"></i> imadallouache110@gmail.com</a>
            </div>
        </div>
    </div>
    
    <!-- Header Main -->
    <header class="header">
        <div class="header-main">
            <div class="container">
                <a href="#" class="logo">B&A<span>SHOP</span></a>
                <div class="search-box">
                    <input type="text" placeholder="ابحث عن منتجات...">
                    <button><i class="fas fa-search"></i></button>
                </div>
            </div>
        </div>
        
        <!-- Desktop Navigation -->
        <nav class="navbar">
            <div class="container">
                <ul class="nav-list">
                    <li class="nav-item"><a href="#">الرئيسية</a></li>
                    <li class="nav-item">
                        <a href="#">المنتجات</a>
                        <div class="dropdown">
                            <a href="#">كل المنتجات</a>
                            <a href="#">العروض الخاصة</a>
                            <a href="#">المنتجات الجديدة</a>
                            <a href="#">الأكثر مبيعاً</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a href="#">الأقسام</a>
                        <div class="dropdown">
                            <?php
                            // تفعيل عرض الأخطاء لأغراض التصحيح
                            error_reporting(E_ALL);
                            ini_set('display_errors', 1);

                            // الاتصال بقاعدة البيانات
                            $host = 'localhost';
                            $db = 'med';
                            $user = 'root';
                            $pass = '';
                            $charset = 'utf8mb4';
                            $dsn = "mysql:host=$host;dbname=$db;charset=$charset";
                            $options = [
                                PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
                                PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
                                PDO::ATTR_EMULATE_PREPARES => false,
                            ];

                            try {
                                $pdo = new PDO($dsn, $user, $pass, $options);
                            } catch (PDOException $e) {
                                die("فشل الاتصال بقاعدة البيانات: " . $e->getMessage());
                            }

                            // جلب الفئات من قاعدة البيانات
                            $stmt = $pdo->query("SELECT * FROM categories");
                            $categories = $stmt->fetchAll();
                            foreach ($categories as $category) {
                                echo '<a href="?category=' . $category['id'] . '">' . htmlspecialchars($category['name']) . '</a>';
                            }
                            ?>
                        </div>
                    </li>
                    <li class="nav-item"><a href="#">عنا</a></li>
                    <li class="nav-item"><a href="#">اتصل بنا</a></li>
                </ul>
            </div>
        </nav>
    </header>
    
    <!-- Hero Section -->
    <section class="hero">
        <div class="container">
            <div class="hero-content">
                <h1>أفضل العروض والخصومات</h1>
                <p>احصل على خصم يصل إلى 50% على مجموعة مختارة من المنتجات</p>
                <a href="#" class="btn btn-primary">تسوق الآن</a>
            </div>
        </div>
    </section>
    
    <!-- Main Content -->
    <main class="container">
        <!-- Products Section -->
        <section>
            <div class="section-title">
                <h2>المنتجات</h2>
            </div>
            
            <div class="products-container">
                <?php
                // تحديد عدد المنتجات لكل صفحة
                $productsPerPage = 8;
                $page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
                $offset = ($page - 1) * $productsPerPage;

                // الحصول على معلمات الفلترة
                $categoryFilter = isset($_GET['category']) ? (int)$_GET['category'] : null;
                $maxPriceFilter = isset($_GET['max_price']) ? (float)$_GET['max_price'] : null;
                $discountFilter = isset($_GET['discount']) && $_GET['discount'] == '1';

                // بناء الاستعلام الأساسي
                $query = "SELECT p.*, pi.image_url as main_image 
                          FROM products p
                          LEFT JOIN product_images pi ON p.id = pi.product_id AND pi.is_primary = 1
                          WHERE p.is_active = 1";
                
                $countQuery = "SELECT COUNT(*) 
                               FROM products p
                               WHERE p.is_active = 1";
                
                $params = [];
                $countParams = [];

                // فلترة حسب الفئة
                if ($categoryFilter) {
                    $query .= " AND p.category_id = :category_id";
                    $countQuery .= " AND p.category_id = :category_id";
                    $params[':category_id'] = $categoryFilter;
                    $countParams[':category_id'] = $categoryFilter;
                }

                // فلترة حسب السعر
                if ($maxPriceFilter) {
                    $query .= " AND (p.discounted_price IS NOT NULL AND p.discounted_price <= :max_price OR p.discounted_price IS NULL AND p.price <= :max_price)";
                    $countQuery .= " AND (p.discounted_price IS NOT NULL AND p.discounted_price <= :max_price OR p.discounted_price IS NULL AND p.price <= :max_price)";
                    $params[':max_price'] = $maxPriceFilter;
                    $countParams[':max_price'] = $maxPriceFilter;
                }

                // فلترة حسب العروض
                if ($discountFilter) {
                    $query .= " AND p.discounted_price IS NOT NULL AND p.discounted_price < p.price";
                    $countQuery .= " AND p.discounted_price IS NOT NULL AND p.discounted_price < p.price";
                }

                // إضافة التقسيم للصفحات للاستعلام الرئيسي فقط
                $query .= " GROUP BY p.id LIMIT :limit OFFSET :offset";

                // تنفيذ الاستعلام الرئيسي
                $stmt = $pdo->prepare($query);
                
                // ربط معلمات الفلترة
                foreach ($params as $key => $value) {
                    $stmt->bindValue($key, $value, is_int($value) ? PDO::PARAM_INT : PDO::PARAM_STR);
                }
                
                // ربط معلمات التقسيم
                $stmt->bindValue(':limit', $productsPerPage, PDO::PARAM_INT);
                $stmt->bindValue(':offset', $offset, PDO::PARAM_INT);
                
                $stmt->execute();
                $products = $stmt->fetchAll();

                // جلب العدد الكلي للمنتجات
                $countStmt = $pdo->prepare($countQuery);
                
                // ربط معلمات الفلترة لاستعلام العد
                foreach ($countParams as $key => $value) {
                    $countStmt->bindValue($key, $value, is_int($value) ? PDO::PARAM_INT : PDO::PARAM_STR);
                }
                
                $countStmt->execute();
                $totalProducts = $countStmt->fetchColumn();
                $totalPages = ceil($totalProducts / $productsPerPage);

                // عرض المنتجات
                foreach ($products as $product) {
                    $discountBadge = '';
                    if ($product['discounted_price'] && $product['discounted_price'] < $product['price']) {
                        $discountPercentage = round(($product['price'] - $product['discounted_price']) / $product['price'] * 100);
                        $discountBadge = '<span class="product-badge sale">خصم ' . $discountPercentage . '%</span>';
                    }
                    
                    echo '
                    <div class="product-card">
                        ' . $discountBadge . '
                        <img src="' . ($product['main_image'] ?: 'https://via.placeholder.com/300') . '" alt="' . htmlspecialchars($product['name']) . '" class="product-img">
                        <div class="product-content">
                            <span class="product-category">' . getCategoryName($pdo, $product['category_id']) . '</span>
                            <h3 class="product-title">' . htmlspecialchars($product['name']) . '</h3>
                            <div class="product-price">';
                            if ($product['discounted_price']) {
                                echo '<span class="current-price">' . number_format($product['discounted_price'], 2) . ' دج</span>
                                      <span class="old-price">' . number_format($product['price'], 2) . ' دج</span>';
                            } else {
                                echo '<span class="current-price">' . number_format($product['price'], 2) . ' دج</span>';
                            }
                            echo '</div>
                            <div class="product-actions">
                                <button class="action-btn view-product" data-product-id="' . $product['id'] . '"><i class="far fa-eye"></i></button>
                                <button class="action-btn add-to-cart" data-product-id="' . $product['id'] . '"><i class="fas fa-shopping-cart"></i></button>
                            </div>
                        </div>
                    </div>';
                }
                
                // دالة للحصول على اسم الفئة
                function getCategoryName($pdo, $categoryId) {
                    if (!$categoryId) return 'غير مصنف';
                    $stmt = $pdo->prepare("SELECT name FROM categories WHERE id = ?");
                    $stmt->execute([$categoryId]);
                    return $stmt->fetchColumn() ?: 'غير مصنف';
                }
                ?>
            </div>
            
            <!-- شريط التصفح -->
            <?php if ($totalPages > 1): ?>
            <div class="pagination">
                <?php if ($page > 1): ?>
                    <a href="?page=<?= $page - 1 ?>&<?= http_build_query($_GET, '', '&') ?>" class="page-link">السابق</a>
                <?php endif; ?>
                <?php for ($i = 1; $i <= $totalPages; $i++): ?>
                    <a href="?page=<?= $i ?>&<?= http_build_query($_GET, '', '&') ?>" class="page-link <?= $i == $page ? 'active' : '' ?>"><?= $i ?></a>
                <?php endfor; ?>
                <?php if ($page < $totalPages): ?>
                    <a href="?page=<?= $page + 1 ?>&<?= http_build_query($_GET, '', '&') ?>" class="page-link">التالي</a>
                <?php endif; ?>
            </div>
            <?php endif; ?>
        </section>
    </main>
    
    <!-- Filters Button -->
    <button class="filters-btn" id="filtersBtn">
        <i class="fas fa-filter"></i>
    </button>
    
    <!-- Filters Sidebar -->
    <div class="filters-sidebar" id="filtersSidebar">
        <div class="filters-header">
            <h3 class="filters-title">تصفية المنتجات</h3>
            <button class="close-filters" id="closeFilters">
                <i class="fas fa-times"></i>
            </button>
        </div>
        
        <form action="" method="GET">
            <!-- الحفاظ على معلمة الصفحة عند الفلترة -->
            <?php if (isset($_GET['page'])): ?>
                <input type="hidden" name="page" value="<?= $_GET['page'] ?>">
            <?php endif; ?>
            
            <div class="filter-group active">
                <div class="filter-header">
                    <span class="filter-title">الفئات</span>
                    <i class="fas fa-chevron-up filter-toggle"></i>
                </div>
                <div class="filter-options">
                    <div class="filter-option">
                        <input type="radio" name="category" id="categoryAll" value="" <?= !isset($_GET['category']) ? 'checked' : '' ?>>
                        <label for="categoryAll">كل الفئات</label>
                    </div>
                    <?php
                    foreach ($categories as $category) {
                        $checked = (isset($_GET['category']) && $_GET['category'] == $category['id']) ? 'checked' : '';
                        echo '
                        <div class="filter-option">
                            <input type="radio" name="category" id="category' . $category['id'] . '" value="' . $category['id'] . '" ' . $checked . '>
                            <label for="category' . $category['id'] . '">' . htmlspecialchars($category['name']) . '</label>
                        </div>';
                    }
                    ?>
                </div>
            </div>
            
            <div class="filter-group">
                <div class="filter-header">
                    <span class="filter-title">السعر</span>
                    <i class="fas fa-chevron-down filter-toggle"></i>
                </div>
                <div class="filter-options">
                    <div class="price-range-container">
                        <input type="range" min="0" max="10000" value="<?= isset($_GET['max_price']) ? $_GET['max_price'] : 5000 ?>" class="price-range" id="priceRange" name="max_price">
                        <div class="price-values">
                            <span>0 دج</span>
                            <span id="maxPriceValue"><?= isset($_GET['max_price']) ? $_GET['max_price'] : 10000 ?> دج</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="filter-group">
                <div class="filter-header">
                    <span class="filter-title">خصومات</span>
                    <i class="fas fa-chevron-down filter-toggle"></i>
                </div>
                <div class="filter-options">
                    <div class="filter-option">
                        <input type="checkbox" name="discount" id="discount" value="1" <?= isset($_GET['discount']) && $_GET['discount'] == '1' ? 'checked' : '' ?>>
                        <label for="discount">عروض فقط</label>
                    </div>
                </div>
            </div>
            
            <button type="submit" class="apply-filters">تطبيق الفلتر</button>
            <a href="?" class="reset-filters">إعادة تعيين</a>
        </form>
    </div>
    
    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-col">
                    <h3 class="footer-title">B&A SHOP</h3>
                    <p>متجر إلكتروني يوفر لك كل ما تحتاجه من منتجات بجودة عالية وأسعار تنافسية.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
                
                <div class="footer-col">
                    <h3 class="footer-title">روابط سريعة</h3>
                    <ul class="footer-links">
                        <li><a href="#">الرئيسية</a></li>
                        <li><a href="#">من نحن</a></li>
                        <li><a href="#">المنتجات</a></li>
                        <li><a href="#">العروض</a></li>
                        <li><a href="#">اتصل بنا</a></li>
                    </ul>
                </div>
                
                <div class="footer-col">
                    <h3 class="footer-title">اتصل بنا</h3>
                    <ul class="footer-links">
                        <li><i class="fas fa-map-marker-alt"></i> الجزائر، الشلف</li>
                        <li><i class="fas fa-phone"></i> 0567289188</li>
                        <li><i class="fas fa-envelope"></i> imadallouache110@gmail.com</li>
                        <li><i class="fas fa-clock"></i> يومياً من 8 ص إلى 10 م</li>
                    </ul>
                </div>
            </div>
            
            <div class="footer-bottom">
                <p>جميع الحقوق محفوظة © <?= date('Y') ?> B&A SHOP</p>
            </div>
        </div>
    </footer>
    
    <script>
    // JavaScript للتحكم في واجهة الفلتر
    document.getElementById('filtersBtn').addEventListener('click', function() {
        document.getElementById('filtersSidebar').classList.add('show');
    });
    
    document.getElementById('closeFilters').addEventListener('click', function() {
        document.getElementById('filtersSidebar').classList.remove('show');
    });
    
    // تحديث قيمة السعر المعروضة
    const priceRange = document.getElementById('priceRange');
    const maxPriceValue = document.getElementById('maxPriceValue');
    
    priceRange.addEventListener('input', function() {
        maxPriceValue.textContent = this.value + ' دج';
    });
    
    // تبديل عرض خيارات الفلتر
    const filterHeaders = document.querySelectorAll('.filter-header');
    filterHeaders.forEach(header => {
        header.addEventListener('click', function() {
            const filterGroup = this.parentElement;
            filterGroup.classList.toggle('active');
            
            // تغيير أيقونة السهم
            const icon = this.querySelector('.filter-toggle');
            if (filterGroup.classList.contains('active')) {
                icon.classList.remove('fa-chevron-down');
                icon.classList.add('fa-chevron-up');
            } else {
                icon.classList.remove('fa-chevron-up');
                icon.classList.add('fa-chevron-down');
            }
        });
    });
    
    // إضافة منتج إلى السلة
    document.querySelectorAll('.add-to-cart').forEach(button => {
        button.addEventListener('click', function() {
            const productId = this.getAttribute('data-product-id');
            alert('تمت إضافة المنتج رقم ' + productId + ' إلى السلة');
        });
    });
    
    // عرض تفاصيل المنتج
    document.querySelectorAll('.view-product').forEach(button => {
        button.addEventListener('click', function() {
            const productId = this.getAttribute('data-product-id');
            window.location.href = 'product.php?id=' + productId;
        });
    });
    </script>
</body>
</html>