<?php
session_start();
// الاتصال بقاعدة البيانات
$host = 'localhost';
$dbname = 'med';
$username = 'root';
$password = '';

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    die("Connection failed: " . $e->getMessage());
}

// استعلام SQL للحصول على المنتجات المميزة (is_active = 1)
$featured_products = array();
try {
    $stmt = $pdo->prepare("SELECT * FROM products WHERE is_active = 1 ORDER BY created_at DESC LIMIT 4");
    $stmt->execute();
    $featured_products = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    die("Error fetching featured products: " . $e->getMessage());
}

// استعلام SQL للحصول على المنتجات الجديدة (أحدث المنتجات)
$new_products = array();
try {
    $stmt = $pdo->prepare("SELECT * FROM products ORDER BY created_at DESC LIMIT 4");
    $stmt->execute();
    $new_products = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    die("Error fetching new products: " . $e->getMessage());
}

// حساب عدد العناصر في المفضلة والسلة
$wishlist_count = count($_SESSION['wishlist']);
$cart_count = array_sum($_SESSION['cart']);
?>
<!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>نون - المتجر الإلكتروني الأفضل</title>
  
  <!-- Favicon -->
  <link rel="shortcut icon" href="https://via.placeholder.com/32" type="image/x-icon">
  
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  
  <!-- Google Font -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">

</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> 0551234567</a>
        <a href="#"><i class="fas fa-envelope"></i> info@example.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 class="header-actions">
          <a href="#" class="header-action">
            <i class="far fa-heart"></i>
            <span>المفضلة</span>
            <span class="count"><?php echo $wishlist_count; ?></span>
          </a>
          <a href="#" class="header-action">
            <i class="fas fa-shopping-cart"></i>
            <span>السلة</span>
            <span class="count"><?php echo $cart_count; ?></span>
          </a>
        </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">
              <a href="#">إلكترونيات</a>
              <a href="#">ملابس رجالية</a>
              <a href="#">ملابس نسائية</a>
              <a href="#">الأطفال</a>
              <a href="#">المنزل</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">
    <!-- Featured Products -->
    <section>
      <div class="section-title">
        <h2>المنتجات المميزة</h2>
      </div>
      
      <div class="products-container">
        <?php foreach ($featured_products as $product): ?>
        <div class="product-card">
          <?php if ($product['discounted_price'] < $product['price']): ?>
          <?php 
            $discount_percent = round(($product['price'] - $product['discounted_price']) / $product['price'] * 100);
          ?>
          <span class="product-badge sale">خصم <?php echo $discount_percent; ?>%</span>
          <?php elseif (strtotime($product['created_at']) > strtotime('-1 week')): ?>
          <span class="product-badge new">جديد</span>
          <?php endif; ?>
          
          <img src="<?php echo $product['image']; ?>" alt="<?php echo htmlspecialchars($product['name']); ?>" class="product-img">
          <div class="product-content">
            <span class="product-category">
              <?php 
                echo $product['category_id'] == 1 ? 'إلكترونيات' : 
                     ($product['category_id'] == 2 ? 'ملابس رجالية' : 
                     ($product['category_id'] == 3 ? 'ملابس نسائية' : 
                     ($product['category_id'] == 4 ? 'الأطفال' : 'أخرى')));
              ?>
            </span>
            <h3 class="product-title"><?php echo htmlspecialchars($product['name']); ?></h3>
            
            <div class="product-price">
              <span class="current-price"><?php echo number_format($product['discounted_price'] > 0 ? $product['discounted_price'] : $product['price'], 2); ?> دج</span>
              <?php if ($product['discounted_price'] > 0 && $product['old_price'] > 0): ?>
              <span class="old-price"><?php echo number_format($product['price'], 2); ?> دج</span>
              <?php endif; ?>
            </div>
            <div class="product-actions">
              <a href="?action=<?php echo in_array($product['id'], $_SESSION['wishlist']) ? 'remove_from_wishlist' : 'add_to_wishlist'; ?>&product_id=<?php echo $product['id']; ?>" class="action-btn">
                <i class="far fa-heart <?php echo in_array($product['id'], $_SESSION['wishlist']) ? 'active' : ''; ?>"></i>
              </a>
              <a href="?action=add_to_cart&product_id=<?php echo $product['id']; ?>" class="action-btn">
                <i class="fas fa-shopping-cart"></i>
              </a>
              <a href="product.php?id=<?php echo $product['id']; ?>" class="action-btn">
                <i class="far fa-eye"></i>
              </a>
            </div>
          </div>
        </div>
        <?php endforeach; ?>
      </div>
    </section>
    
    <!-- New Arrivals -->
    <section>
      <div class="section-title">
        <h2>المنتجات</h2>
      </div>
      
      <div class="products-container">
        <?php foreach ($new_products as $product): ?>
        <div class="product-card">
          <?php if ($product['discounted_price'] < $product['price']): ?>
          <?php 
            $discount_percent = round(($product['price'] - $product['discounted_price']) / $product['price'] * 100);
          ?>
          <span class="product-badge sale">خصم <?php echo $discount_percent; ?>%</span>
          <?php elseif (strtotime($product['created_at']) > strtotime('-1 week')): ?>
          <span class="product-badge new">جديد</span>
          <?php endif; ?>
          
          <img src="<?php echo $product['image']; ?>" alt="<?php echo htmlspecialchars($product['name']); ?>" class="product-img">
          <div class="product-content">
            <span class="product-category">
              <?php 
                echo $product['category_id'] == 1 ? 'إلكترونيات' : 
                     ($product['category_id'] == 2 ? 'ملابس رجالية' : 
                     ($product['category_id'] == 3 ? 'ملابس نسائية' : 
                     ($product['category_id'] == 4 ? 'الأطفال' : 'أخرى')));
              ?>
            </span>
            <h3 class="product-title"><?php echo htmlspecialchars($product['name']); ?></h3>
            
            <div class="product-price">
              <span class="current-price"><?php echo number_format($product['discounted_price'] > 0 ? $product['discounted_price'] : $product['price'], 2); ?> دج</span>
              <?php if ($product['discounted_price'] > 0 && $product['old_price'] > 0): ?>
              <span class="old-price"><?php echo number_format($product['price'], 2); ?> دج</span>
              <?php endif; ?>
            </div>
            <div class="product-actions">
              <a href="?action=<?php echo in_array($product['id'], $_SESSION['wishlist']) ? 'remove_from_wishlist' : 'add_to_wishlist'; ?>&product_id=<?php echo $product['id']; ?>" class="action-btn">
                <i class="far fa-heart <?php echo in_array($product['id'], $_SESSION['wishlist']) ? 'active' : ''; ?>"></i>
              </a>
              <a href="?action=add_to_cart&product_id=<?php echo $product['id']; ?>" class="action-btn">
                <i class="fas fa-shopping-cart"></i>
              </a>
              <a href="det.php?id=<?php echo $product['id']; ?>" class="action-btn">
                <i class="far fa-eye"></i>
              </a>
            </div>
          </div>
        </div>
        <?php endforeach; ?>
      </div>
    </section>
  </main>
  <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>
    
    <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="checkbox" id="category1" checked>
          <label for="category1">إلكترونيات</label>
        </div>
        <div class="filter-option">
          <input type="checkbox" id="category2">
          <label for="category2">ملابس رجالية</label>
        </div>
        <div class="filter-option">
          <input type="checkbox" id="category3">
          <label for="category3">ملابس نسائية</label>
        </div>
                <div class="filter-option">
          <input type="checkbox" id="category5">
          <label for="category5">أجهزة منزلية</label>
        </div>
        <div class="filter-option">
          <input type="checkbox" id="category6">
          <label for="category6">الأطفال</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="1000" value="500" class="price-range" id="priceRange">
          <div class="price-values">
            <span>0 دج</span>
            <span>1000 دج</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>
    </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" id="discount">
          <label for="discount">عروض فقط</label>
        </div>
      </div>
    </div>
    
    <button class="apply-filters">تطبيق الفلتر</button>
  </div>
  
  <!-- Mobile Navigation -->
  <nav class="mobile-nav">
    <ul class="mobile-nav-list">
      <li class="mobile-nav-item active">
        <i class="fas fa-home mobile-nav-icon"></i>
        <span>الرئيسية</span>
      </li>
      <li class="mobile-nav-item">
        <i class="fas fa-th-large mobile-nav-icon"></i>
        <span>الأقسام</span>
      </li>
      <li class="mobile-nav-item">
        <i class="fas fa-search mobile-nav-icon"></i>
        <span>بحث</span>
      </li>
      <li class="mobile-nav-item">
        <i class="fas fa-heart mobile-nav-icon"></i>
        <span>المفضلة</span>
        <span class="mobile-nav-badge"><?php echo $wishlist_count; ?></span>
      </li>
      <li class="mobile-nav-item">
        <i class="fas fa-shopping-cart mobile-nav-icon"></i>
        <span>السلة</span>
        <span class="mobile-nav-badge"><?php echo $cart_count; ?></span>
      </li>
    </ul>
  </nav>
  
  <!-- Footer -->
  <footer class="footer">
    <div class="container">
      <div class="footer-grid">
        <div class="footer-col">
          <h3 class="footer-title">نون ستور</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><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> 0551234567</li>
            <li><i class="fas fa-envelope"></i> info@example.com</li>
            <li><i class="fas fa-clock"></i> يومياً من 8 ص إلى 10 م</li>
          </ul>
        </div>
      </div>
      
      <div class="footer-bottom">
        <p>جميع الحقوق محفوظة &copy; 2023 نون ستور</p>
      </div>
    </div>
  </footer>
  
  <script src="js/script.js"></script>
</body>
</html><?php
session_start();
// الاتصال بقاعدة البيانات
$host = 'localhost';
$dbname = 'med';
$username = 'root';
$password = '';

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    die("Connection failed: " . $e->getMessage());
}

// استعلام SQL للحصول على المنتجات المميزة (is_active = 1)
$featured_products = array();
try {
    $stmt = $pdo->prepare("SELECT * FROM products WHERE is_active = 1 ORDER BY created_at DESC LIMIT 4");
    $stmt->execute();
    $featured_products = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    die("Error fetching featured products: " . $e->getMessage());
}

// استعلام SQL للحصول على المنتجات الجديدة (أحدث المنتجات)
$new_products = array();
try {
    $stmt = $pdo->prepare("SELECT * FROM products ORDER BY created_at DESC LIMIT 4");
    $stmt->execute();
    $new_products = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    die("Error fetching new products: " . $e->getMessage());
}

// حساب عدد العناصر في المفضلة والسلة
$wishlist_count = count($_SESSION['wishlist']);
$cart_count = array_sum($_SESSION['cart']);
?>
<!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>نون - المتجر الإلكتروني الأفضل</title>
  
  <!-- Favicon -->
  <link rel="shortcut icon" href="https://via.placeholder.com/32" type="image/x-icon">
  
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  
  <!-- Google Font -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">

</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> 0551234567</a>
        <a href="#"><i class="fas fa-envelope"></i> info@example.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 class="header-actions">
          <a href="#" class="header-action">
            <i class="far fa-heart"></i>
            <span>المفضلة</span>
            <span class="count"><?php echo $wishlist_count; ?></span>
          </a>
          <a href="#" class="header-action">
            <i class="fas fa-shopping-cart"></i>
            <span>السلة</span>
            <span class="count"><?php echo $cart_count; ?></span>
          </a>
        </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">
              <a href="#">إلكترونيات</a>
              <a href="#">ملابس رجالية</a>
              <a href="#">ملابس نسائية</a>
              <a href="#">الأطفال</a>
              <a href="#">المنزل</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">
    <!-- Featured Products -->
    <section>
      <div class="section-title">
        <h2>المنتجات المميزة</h2>
      </div>
      
      <div class="products-container">
        <?php foreach ($featured_products as $product): ?>
        <div class="product-card">
          <?php if ($product['discounted_price'] < $product['price']): ?>
          <?php 
            $discount_percent = round(($product['price'] - $product['discounted_price']) / $product['price'] * 100);
          ?>
          <span class="product-badge sale">خصم <?php echo $discount_percent; ?>%</span>
          <?php elseif (strtotime($product['created_at']) > strtotime('-1 week')): ?>
          <span class="product-badge new">جديد</span>
          <?php endif; ?>
          
          <img src="<?php echo $product['image']; ?>" alt="<?php echo htmlspecialchars($product['name']); ?>" class="product-img">
          <div class="product-content">
            <span class="product-category">
              <?php 
                echo $product['category_id'] == 1 ? 'إلكترونيات' : 
                     ($product['category_id'] == 2 ? 'ملابس رجالية' : 
                     ($product['category_id'] == 3 ? 'ملابس نسائية' : 
                     ($product['category_id'] == 4 ? 'الأطفال' : 'أخرى')));
              ?>
            </span>
            <h3 class="product-title"><?php echo htmlspecialchars($product['name']); ?></h3>
            
            <div class="product-price">
              <span class="current-price"><?php echo number_format($product['discounted_price'] > 0 ? $product['discounted_price'] : $product['price'], 2); ?> دج</span>
              <?php if ($product['discounted_price'] > 0 && $product['old_price'] > 0): ?>
              <span class="old-price"><?php echo number_format($product['price'], 2); ?> دج</span>
              <?php endif; ?>
            </div>
            <div class="product-actions">
              <a href="?action=<?php echo in_array($product['id'], $_SESSION['wishlist']) ? 'remove_from_wishlist' : 'add_to_wishlist'; ?>&product_id=<?php echo $product['id']; ?>" class="action-btn">
                <i class="far fa-heart <?php echo in_array($product['id'], $_SESSION['wishlist']) ? 'active' : ''; ?>"></i>
              </a>
              <a href="?action=add_to_cart&product_id=<?php echo $product['id']; ?>" class="action-btn">
                <i class="fas fa-shopping-cart"></i>
              </a>
              <a href="product.php?id=<?php echo $product['id']; ?>" class="action-btn">
                <i class="far fa-eye"></i>
              </a>
            </div>
          </div>
        </div>
        <?php endforeach; ?>
      </div>
    </section>
    
    <!-- New Arrivals -->
    <section>
      <div class="section-title">
        <h2>المنتجات</h2>
      </div>
      
      <div class="products-container">
        <?php foreach ($new_products as $product): ?>
        <div class="product-card">
          <?php if ($product['discounted_price'] < $product['price']): ?>
          <?php 
            $discount_percent = round(($product['price'] - $product['discounted_price']) / $product['price'] * 100);
          ?>
          <span class="product-badge sale">خصم <?php echo $discount_percent; ?>%</span>
          <?php elseif (strtotime($product['created_at']) > strtotime('-1 week')): ?>
          <span class="product-badge new">جديد</span>
          <?php endif; ?>
          
          <img src="<?php echo $product['image']; ?>" alt="<?php echo htmlspecialchars($product['name']); ?>" class="product-img">
          <div class="product-content">
            <span class="product-category">
              <?php 
                echo $product['category_id'] == 1 ? 'إلكترونيات' : 
                     ($product['category_id'] == 2 ? 'ملابس رجالية' : 
                     ($product['category_id'] == 3 ? 'ملابس نسائية' : 
                     ($product['category_id'] == 4 ? 'الأطفال' : 'أخرى')));
              ?>
            </span>
            <h3 class="product-title"><?php echo htmlspecialchars($product['name']); ?></h3>
            
            <div class="product-price">
              <span class="current-price"><?php echo number_format($product['discounted_price'] > 0 ? $product['discounted_price'] : $product['price'], 2); ?> دج</span>
              <?php if ($product['discounted_price'] > 0 && $product['old_price'] > 0): ?>
              <span class="old-price"><?php echo number_format($product['price'], 2); ?> دج</span>
              <?php endif; ?>
            </div>
            <div class="product-actions">
              <a href="?action=<?php echo in_array($product['id'], $_SESSION['wishlist']) ? 'remove_from_wishlist' : 'add_to_wishlist'; ?>&product_id=<?php echo $product['id']; ?>" class="action-btn">
                <i class="far fa-heart <?php echo in_array($product['id'], $_SESSION['wishlist']) ? 'active' : ''; ?>"></i>
              </a>
              <a href="?action=add_to_cart&product_id=<?php echo $product['id']; ?>" class="action-btn">
                <i class="fas fa-shopping-cart"></i>
              </a>
              <a href="det.php?id=<?php echo $product['id']; ?>" class="action-btn">
                <i class="far fa-eye"></i>
              </a>
            </div>
          </div>
        </div>
        <?php endforeach; ?>
      </div>
    </section>
  </main>
  <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>
    
    <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="checkbox" id="category1" checked>
          <label for="category1">إلكترونيات</label>
        </div>
        <div class="filter-option">
          <input type="checkbox" id="category2">
          <label for="category2">ملابس رجالية</label>
        </div>
        <div class="filter-option">
          <input type="checkbox" id="category3">
          <label for="category3">ملابس نسائية</label>
        </div>
                <div class="filter-option">
          <input type="checkbox" id="category5">
          <label for="category5">أجهزة منزلية</label>
        </div>
        <div class="filter-option">
          <input type="checkbox" id="category6">
          <label for="category6">الأطفال</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="1000" value="500" class="price-range" id="priceRange">
          <div class="price-values">
            <span>0 دج</span>
            <span>1000 دج</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>
    </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" id="discount">
          <label for="discount">عروض فقط</label>
        </div>
      </div>
    </div>
    
    <button class="apply-filters">تطبيق الفلتر</button>
  </div>
  
  <!-- Mobile Navigation -->
  <nav class="mobile-nav">
    <ul class="mobile-nav-list">
      <li class="mobile-nav-item active">
        <i class="fas fa-home mobile-nav-icon"></i>
        <span>الرئيسية</span>
      </li>
      <li class="mobile-nav-item">
        <i class="fas fa-th-large mobile-nav-icon"></i>
        <span>الأقسام</span>
      </li>
      <li class="mobile-nav-item">
        <i class="fas fa-search mobile-nav-icon"></i>
        <span>بحث</span>
      </li>
      <li class="mobile-nav-item">
        <i class="fas fa-heart mobile-nav-icon"></i>
        <span>المفضلة</span>
        <span class="mobile-nav-badge"><?php echo $wishlist_count; ?></span>
      </li>
      <li class="mobile-nav-item">
        <i class="fas fa-shopping-cart mobile-nav-icon"></i>
        <span>السلة</span>
        <span class="mobile-nav-badge"><?php echo $cart_count; ?></span>
      </li>
    </ul>
  </nav>
  
  <!-- Footer -->
  <footer class="footer">
    <div class="container">
      <div class="footer-grid">
        <div class="footer-col">
          <h3 class="footer-title">نون ستور</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><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> 0551234567</li>
            <li><i class="fas fa-envelope"></i> info@example.com</li>
            <li><i class="fas fa-clock"></i> يومياً من 8 ص إلى 10 م</li>
          </ul>
        </div>
      </div>
      
      <div class="footer-bottom">
        <p>جميع الحقوق محفوظة &copy; 2023 نون ستور</p>
      </div>
    </div>
  </footer>
  
  <script src="js/script.js"></script>
</body>
</html>