<?php
/**
 * الصفحة الرئيسية - Roz Skin E-Commerce
 * Pinterest & iPhone Inspired Design
 */

session_start();
require_once 'config/database.php';
require_once 'models/user.php';

$database = new Database();
$conn = $database->getConnection();

// جلب إعدادات الموقع
try {
    $query = "SELECT setting_key, setting_value FROM settings 
              WHERE setting_key IN ('site_name', 'logo_text', 'font_family', 'default_currency')";
    $stmt = $conn->prepare($query);
    $stmt->execute();
    $settings = $stmt->fetchAll(PDO::FETCH_KEY_PAIR);

    $site_name = $settings['site_name'] ?? 'Roz Skin';
    $logo_text = $settings['logo_text'] ?? 'Roz Skin';
    $currency = $settings['default_currency'] ?? 'EGP';
} catch (PDOException $e) {
    $site_name = 'Roz Skin';
    $logo_text = 'Roz Skin';
    $currency = 'EGP';
}

$currency_symbols = ['EGP' => 'ج.م', 'USD' => '$', 'EUR' => '€', 'AED' => 'د.إ'];
$currency_symbol = $currency_symbols[$currency] ?? 'ج.م';

// جلب عدد السلة
$cart_count = 0;
if (isset($_SESSION['user_id'])) {
    try {
        require_once 'models/cart.php';
        $cart_model = new Cart($conn);
        $cart_count = $cart_model->getCartCount($_SESSION['user_id']);
    } catch (Exception $e) {
        $cart_count = 0;
    }
} elseif (isset($_SESSION['guest_cart'])) {
    $cart_count = array_sum($_SESSION['guest_cart']);
}

// جلب المنتجات
try {
    $query = "SELECT id, name, description, price, image FROM products 
              WHERE stock_quantity > 0 ORDER BY created_at DESC LIMIT 20";
    $productsStmt = $conn->prepare($query);
    $productsStmt->execute();
    $products = $productsStmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    $products = [];
}

// جلب الفئات
try {
    $categoriesStmt = $conn->prepare("
        SELECT c.id, c.name, COUNT(p.id) as product_count
        FROM categories c
        LEFT JOIN products p ON c.id = p.category_id AND p.stock_quantity > 0
        WHERE c.type = 'product' AND c.is_active = 1
        GROUP BY c.id, c.name
        ORDER BY c.name
    ");
    $categoriesStmt->execute();
    $categories = $categoriesStmt->fetchAll(PDO::FETCH_ASSOC);
} catch(PDOException $e) {
    $categories = [];
}

// جلب التقييمات المعتمدة
try {
    $query = "SELECT r.rating, r.comment, u.name as customer_name
              FROM reviews r
              JOIN users u ON r.user_id = u.id
              WHERE r.is_approved = 1 AND r.is_visible = 1
              ORDER BY r.created_at DESC
              LIMIT 6";
    $testimonialsStmt = $conn->prepare($query);
    $testimonialsStmt->execute();
    $testimonials = $testimonialsStmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    $testimonials = [];
}

if (empty($testimonials)) {
    $testimonials = [
        [
            'rating' => 5,
            'comment' => 'منتجات رائعة جداً! البشرة أصبحت أكثر نعومة وإشراقاً. أنصح بها بشدة لكل الفتيات.',
            'customer_name' => 'سارة أحمد'
        ],
        [
            'rating' => 5,
            'comment' => 'خدمة العملاء ممتازة وسرعة في التوصيل. سأعاود الشراء بالتأكيد.',
            'customer_name' => 'منى خالد'
        ],
        [
            'rating' => 4,
            'comment' => 'تجربة رائعة مع المنتجات الطبيعية. أحسست بفرق واضح في بشرتي.',
            'customer_name' => 'ليلى محمد'
        ]
    ];
}
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <title><?php echo htmlspecialchars($site_name); ?> - متجر العناية بالجمال</title>
    
    <!-- Fonts -->
    <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@400;500;700&display=swap" rel="stylesheet">
    
    <!-- Styles -->
    <link rel="stylesheet" href="assets/css/pinterest-style.css">
    
    <style>
        /* Additional RTL Adjustments */
        * {
            font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
        }
        
        html {
            scroll-behavior: smooth;
        }
        
        body {
            font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        }
        
        .search-input {
            padding: 12px 44px 12px 16px;
        }
        
        .search-icon {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-tertiary);
        }
        
        /* Smooth transitions for all interactive elements */
        button, a, .product-card, .action-btn {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        /* Focus states for accessibility */
        button:focus, a:focus, input:focus {
            outline: 2px solid #E57393;
            outline-offset: 2px;
        }
        
        /* Loading skeleton */
        .skeleton {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: loading 1.5s infinite;
        }
        
        @keyframes loading {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
    </style>
</head>
<body>

    <!-- Navigation -->
    <nav class="nav-pinterest">
        <div class="container-pinterest">
            <div class="nav-content">
                <!-- Logo -->
                <a href="index.php" class="nav-logo" style="font-size: 28px; font-weight: 700; letter-spacing: -0.5px;">
                    <?php echo htmlspecialchars($logo_text); ?>
                </a>

                <!-- Search -->
                <div class="nav-search">
                    <div style="position: relative;">
                        <input type="text" 
                               class="search-input" 
                               placeholder="ابحث عن المنتجات..."
                               id="searchInput">
                        <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <circle cx="11" cy="11" r="8"></circle>
                            <path d="m21 21-4.35-4.35"></path>
                        </svg>
                    </div>
                </div>

                <!-- Actions -->
                <div class="nav-actions">
                    <?php if (isset($_SESSION['user_id'])): ?>
                        <button class="nav-icon-btn" onclick="window.location.href='account.php'" title="حسابي">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                <circle cx="12" cy="7" r="4"></circle>
                            </svg>
                        </button>
                    <?php else: ?>
                        <button class="nav-icon-btn" onclick="showLoginModal()" title="تسجيل الدخول">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
                                <polyline points="10 17 15 12 10 7"></polyline>
                                <line x1="15" y1="12" x2="3" y2="12"></line>
                            </svg>
                        </button>
                    <?php endif; ?>

                    <button class="nav-icon-btn" onclick="window.location.href='wishlist.php'" title="المفضلة">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                        </svg>
                    </button>

                    <button class="nav-icon-btn" onclick="window.location.href='cart.php'" title="السلة">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <circle cx="9" cy="21" r="1"></circle>
                            <circle cx="20" cy="21" r="1"></circle>
                            <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
                        </svg>
                        <?php if ($cart_count > 0): ?>
                            <span class="nav-badge"><?php echo $cart_count; ?></span>
                        <?php endif; ?>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero-pinterest">
        <div class="container-pinterest">
            <h1 class="hero-title">اكتشفي جمالك الطبيعي</h1>
            <p class="hero-subtitle">
                منتجات عناية بالبشرة والجمال طبيعية 100% مع خدمات متخصصة في مركزنا
            </p>
            <div class="hero-cta">
                <button class="btn-primary" onclick="window.location.href='products.php'">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="9" cy="21" r="1"></circle>
                        <circle cx="20" cy="21" r="1"></circle>
                        <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
                    </svg>
                </button>
                <button class="btn-secondary" onclick="window.location.href='services.php'">
                    احجزي موعد
                </button>
            </div>
        </div>
    </section>

    <!-- Categories -->
    <?php if (!empty($categories)): ?>
    <section class="categories-section">
        <div class="container-pinterest">
            <div class="categories-scroll">
                <button class="category-chip active" onclick="filterProducts('all')">
                    الكل
                </button>
                <?php foreach($categories as $category): ?>
                    <button class="category-chip" onclick="filterProducts(<?php echo $category['id']; ?>)">
                        <?php echo htmlspecialchars($category['name']); ?>
                        <?php if($category['product_count'] > 0): ?>
                            <span style="opacity: 0.6; margin-right: 4px;">(<?php echo $category['product_count']; ?>)</span>
                        <?php endif; ?>
                    </button>
                <?php endforeach; ?>
            </div>
        </div>
    </section>
    <?php endif; ?>

    <!-- Products Grid -->
    <section style="padding: var(--space-xl) 0;">
        <div class="container-pinterest">
            <div class="section-header">
                <h2 class="section-title">منتجاتنا المميزة</h2>
                <p class="section-subtitle">اكتشفي مجموعتنا الحصرية من منتجات العناية بالجمال</p>
            </div>

            <div class="products-grid" id="productsGrid">
                <?php foreach($products as $product): 
                    $imageUrl = !empty($product['image']) && file_exists('uploads/products/' . $product['image']) 
                        ? 'uploads/products/' . htmlspecialchars($product['image']) 
                        : 'https://images.unsplash.com/photo-1556228578-8c89e6adf883?w=400&h=500&fit=crop';
                ?>
                    <div class="product-card" onclick="window.location.href='product.php?id=<?php echo $product['id']; ?>'">
                        <div class="product-image-wrapper">
                            <img src="<?php echo $imageUrl; ?>" 
                                 alt="<?php echo htmlspecialchars($product['name']); ?>"
                                 class="product-image"
                                 loading="lazy">
                            <div class="product-overlay"></div>
                            <div class="product-actions" onclick="event.stopPropagation();">
                                <button class="action-btn" 
                                        onclick="toggleWishlist(<?php echo $product['id']; ?>)"
                                        data-product-id="<?php echo $product['id']; ?>"
                                        title="إضافة للمفضلة">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                                    </svg>
                                </button>
                            </div>
                        </div>
                        <div class="product-info">
                            <h3 class="product-title"><?php echo htmlspecialchars($product['name']); ?></h3>
                            <p class="product-description"><?php echo htmlspecialchars($product['description']); ?></p>
                            <div class="product-footer">
                                <span class="product-price">
                                    <?php echo $currency_symbol; ?> <?php echo number_format($product['price'], 0); ?>
                                </span>
                                <button class="add-to-cart-btn" 
                                        onclick="event.stopPropagation(); addToCart(<?php echo $product['id']; ?>, '<?php echo addslashes($product['name']); ?>');"
                                        title="إضافة للسلة">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <line x1="12" y1="5" x2="12" y2="19"></line>
                                        <line x1="5" y1="12" x2="19" y2="12"></line>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>

            <?php if (empty($products)): ?>
                <div style="text-align: center; padding: var(--space-2xl); color: var(--text-secondary);">
                    <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" style="margin: 0 auto 16px; opacity: 0.3;">
                        <circle cx="12" cy="12" r="10"></circle>
                        <line x1="12" y1="8" x2="12" y2="12"></line>
                        <line x1="12" y1="16" x2="12.01" y2="16"></line>
                    </svg>
                    <p>لا توجد منتجات متاحة حالياً</p>
                </div>
            <?php endif; ?>

            <!-- View All Products Link -->
            <div style="text-align: center; margin-top: var(--space-xl);">
                <a href="products.php" class="btn-primary" style="display: inline-flex; align-items: center; gap: var(--space-sm); padding: 14px 32px; text-decoration: none;">
                    <span>عرض جميع المنتجات</span>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="5" y1="12" x2="19" y2="12"></line>
                        <polyline points="12 5 19 12 12 19"></polyline>
                    </svg>
                </a>
            </div>
        </div>
    </section>

    <!-- Services/Bookings Section -->
    <section style="padding: var(--space-2xl) 0; background: var(--bg-secondary);">
        <div class="container-pinterest">
            <div class="section-header">
                <h2 class="section-title">خدماتنا المتخصصة</h2>
                <p class="section-subtitle">احجزي موعدك في بيوتي سنتر روز سكين</p>
            </div>

            <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); max-width: 900px; margin: 0 auto;">
                <style>
                    @media (max-width: 768px) {
                        .services-grid {
                            grid-template-columns: 1fr !important;
                        }
                    }
                </style>
                <!-- Service 1 -->
                <div style="background: white; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); transition: all 0.3s;" onmouseover="this.style.transform='translateY(-8px)'; this.style.boxShadow='var(--shadow-lg)'" onmouseout="this.style.transform=''; this.style.boxShadow='var(--shadow-md)'">
                    <div style="background: linear-gradient(135deg, #E57393 0%, #D1537A 100%); padding: var(--space-lg); color: white;">
                        <div style="width: 56px; height: 56px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-md);">
                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path>
                                <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
                                <line x1="12" y1="19" x2="12" y2="22"></line>
                            </svg>
                        </div>
                        <h3 style="font-size: 22px; font-weight: 700; margin-bottom: var(--space-xs);">علاج البشرة المتقدم</h3>
                        <p style="font-size: 32px; font-weight: 700;">500 ج.م</p>
                    </div>
                    <div style="padding: var(--space-lg);">
                        <p style="color: var(--text-secondary); margin-bottom: var(--space-md); line-height: 1.6; font-size: 15px;">
                            جلسات علاج شاملة لجميع أنواع البشرة باستخدام أحدث التقنيات والمنتجات الطبيعية
                        </p>
                        <ul style="list-style: none; margin-bottom: var(--space-lg);">
                            <li style="display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); color: var(--text-secondary);">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#E57393" stroke-width="2">
                                    <polyline points="20 6 9 17 4 12"></polyline>
                                </svg>
                                تنظيف عميق للبشرة
                            </li>
                            <li style="display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); color: var(--text-secondary);">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#E57393" stroke-width="2">
                                    <polyline points="20 6 9 17 4 12"></polyline>
                                </svg>
                                ماسك طبيعي مخصص
                            </li>
                            <li style="display: flex; align-items: center; gap: var(--space-sm); color: var(--text-secondary);">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#E57393" stroke-width="2">
                                    <polyline points="20 6 9 17 4 12"></polyline>
                                </svg>
                                استشارة مجانية
                            </li>
                        </ul>
                        <button class="btn-primary" style="width: 100%; justify-content: center; padding: 14px 24px; font-size: 16px;" onclick="showBookingModal(1, 'علاج البشرة المتقدم')">
                            احجزي الآن
                        </button>
                    </div>
                </div>

                <!-- Service 2 -->
                <div style="background: white; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); transition: all 0.3s;" onmouseover="this.style.transform='translateY(-8px)'; this.style.boxShadow='var(--shadow-lg)'" onmouseout="this.style.transform=''; this.style.boxShadow='var(--shadow-md)'">
                    <div style="background: linear-gradient(135deg, #F2A8C0 0%, #E57393 100%); padding: var(--space-lg); color: white;">
                        <div style="width: 56px; height: 56px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-md);">
                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                            </svg>
                        </div>
                        <h3 style="font-size: 22px; font-weight: 700; margin-bottom: var(--space-xs);">المساج والاسترخاء</h3>
                        <p style="font-size: 32px; font-weight: 700;">300 ج.م</p>
                    </div>
                    <div style="padding: var(--space-lg);">
                        <p style="color: var(--text-secondary); margin-bottom: var(--space-md); line-height: 1.6; font-size: 15px;">
                            جلسات مساج علاجية تساعد على الاسترخاء والتخلص من التوتر مع زيوت طبيعية مميزة
                        </p>
                        <ul style="list-style: none; margin-bottom: var(--space-lg);">
                            <li style="display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); color: var(--text-secondary);">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#E57393" stroke-width="2">
                                    <polyline points="20 6 9 17 4 12"></polyline>
                                </svg>
                                مساج بالزيوت الطبيعية
                            </li>
                            <li style="display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); color: var(--text-secondary);">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#E57393" stroke-width="2">
                                    <polyline points="20 6 9 17 4 12"></polyline>
                                </svg>
                                جلسة استرخاء كاملة
                            </li>
                            <li style="display: flex; align-items: center; gap: var(--space-sm); color: var(--text-secondary);">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#E57393" stroke-width="2">
                                    <polyline points="20 6 9 17 4 12"></polyline>
                                </svg>
                                بيئة هادئة ومريحة
                            </li>
                        </ul>
                        <button class="btn-primary" style="width: 100%; justify-content: center; padding: 14px 24px; font-size: 16px;" onclick="showBookingModal(2, 'المساج والاسترخاء')">
                            احجزي الآن
                        </button>
                    </div>
                </div>
            </div>

            <!-- View All Services Link -->
            <div style="text-align: center; margin-top: var(--space-xl);">
                <a href="services.php" class="btn-secondary" style="display: inline-flex; align-items: center; gap: var(--space-sm); padding: 12px 24px; text-decoration: none;">
                    <span>عرض جميع الخدمات</span>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="5" y1="12" x2="19" y2="12"></line>
                        <polyline points="12 5 19 12 12 19"></polyline>
                    </svg>
                </a>
            </div>
        </div>
    </section>

    <!-- Testimonials Section -->
    <section style="padding: var(--space-2xl) 0; background: var(--bg-secondary);">
        <div class="container-pinterest">
            <div class="section-header">
                <h2 class="section-title">آراء عملائنا</h2>
                <p class="section-subtitle">تجارب حقيقية من عملائنا المميزين</p>
            </div>

            <!-- Testimonials Carousel -->
            <div style="max-width: 900px; margin: 0 auto; position: relative;">
                <div id="testimonialsCarousel" style="overflow: hidden; position: relative; min-height: 300px;">
                    <?php foreach($testimonials as $index => $testimonial): ?>
                        <div class="testimonial-slide" data-index="<?php echo $index; ?>" style="position: absolute; width: 100%; opacity: <?php echo $index === 0 ? '1' : '0'; ?>; transition: opacity 0.6s ease; padding: 0 var(--space-md);">
                            <div style="background: white; border-radius: var(--radius-xl); padding: var(--space-2xl); box-shadow: var(--shadow-lg); text-align: center;">
                                <!-- Stars -->
                                <div style="display: flex; gap: 8px; justify-content: center; margin-bottom: var(--space-lg);">
                                    <?php for($i = 1; $i <= 5; $i++): ?>
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="<?php echo $i <= $testimonial['rating'] ? '#E57393' : '#e0e0e0'; ?>" stroke="none">
                                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                        </svg>
                                    <?php endfor; ?>
                                </div>
                                
                                <!-- Comment -->
                                <p style="color: var(--text-primary); line-height: 1.8; margin-bottom: var(--space-xl); font-size: 18px; font-style: italic;">
                                    "<?php echo htmlspecialchars($testimonial['comment']); ?>"
                                </p>
                                
                                <!-- Customer -->
                                <div style="display: flex; align-items: center; justify-content: center; gap: var(--space-md);">
                                    <div style="width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #E57393 0%, #D1537A 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 24px;">
                                        <?php echo mb_substr($testimonial['customer_name'], 0, 1); ?>
                                    </div>
                                    <div style="text-align: right;">
                                        <p style="font-weight: 700; color: var(--text-primary); margin: 0; font-size: 18px;">
                                            <?php echo htmlspecialchars($testimonial['customer_name']); ?>
                                        </p>
                                        <p style="font-size: 14px; color: var(--text-secondary); margin: 0;">عميلة مميزة</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </section>

    <script>
        // Testimonials Auto-Rotate (Fade Effect)
        let currentTestimonialIndex = 0;
        const testimonialSlides = document.querySelectorAll('.testimonial-slide');
        const totalTestimonialSlides = testimonialSlides.length;

        function showNextTestimonial() {
            if (totalTestimonialSlides <= 1) return;
            
            // Hide current
            testimonialSlides[currentTestimonialIndex].style.opacity = '0';
            
            // Move to next
            currentTestimonialIndex = (currentTestimonialIndex + 1) % totalTestimonialSlides;
            
            // Show next
            testimonialSlides[currentTestimonialIndex].style.opacity = '1';
        }

        // Auto-rotate every 4 seconds
        if (totalTestimonialSlides > 1) {
            setInterval(showNextTestimonial, 4000);
        }
    </script>

    <!-- Booking Modal -->
    <div id="bookingModal" class="modal-overlay hidden" onclick="if(event.target === this) closeBookingModal()">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="bookingServiceName">حجز موعد</h3>
                <button class="modal-close" onclick="closeBookingModal()">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                </button>
            </div>
            <div class="modal-body">
                <form id="bookingForm" onsubmit="handleBooking(event)">
                    <input type="hidden" id="serviceId" name="service_id">
                    
                    <div class="form-group">
                        <label class="form-label">اختر التاريخ</label>
                        <input type="date" name="appointment_date" class="form-input" required>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">اختر الوقت</label>
                        <select name="appointment_time" class="form-input" required>
                            <option value="">اختر الوقت</option>
                            <option value="09:00">9:00 صباحاً</option>
                            <option value="10:00">10:00 صباحاً</option>
                            <option value="11:00">11:00 صباحاً</option>
                            <option value="12:00">12:00 ظهراً</option>
                            <option value="13:00">1:00 مساءً</option>
                            <option value="14:00">2:00 مساءً</option>
                            <option value="15:00">3:00 مساءً</option>
                            <option value="16:00">4:00 مساءً</option>
                            <option value="17:00">5:00 مساءً</option>
                            <option value="18:00">6:00 مساءً</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">ملاحظات (اختياري)</label>
                        <textarea name="notes" class="form-input" rows="3" placeholder="أي ملاحظات خاصة..."></textarea>
                    </div>
                    
                    <button type="submit" class="btn-primary" style="width: 100%; justify-content: center;">
                        تأكيد الحجز
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Login Modal -->
    <div id="loginModal" class="modal-overlay hidden" onclick="if(event.target === this) closeLoginModal()">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">تسجيل الدخول</h3>
                <button class="modal-close" onclick="closeLoginModal()">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                </button>
            </div>
            <div class="modal-body">
                <form id="loginForm" onsubmit="handleLogin(event)">
                    <div class="form-group">
                        <label class="form-label">رقم الهاتف</label>
                        <input type="tel" name="phone" class="form-input" placeholder="01234567890" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">كلمة المرور</label>
                        <input type="password" name="password" class="form-input" placeholder="••••••••" required>
                    </div>
                    <button type="submit" class="btn-primary" style="width: 100%; justify-content: center;">
                        تسجيل الدخول
                    </button>
                    <div style="text-align: center; margin-top: var(--space-md);">
                        <a href="register.php" style="color: var(--text-secondary); font-size: 14px;">
                            ليس لديك حساب؟ سجل الآن
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Toast Notification -->
    <div id="toast" class="toast-notification hidden"></div>

    <!-- Footer -->
    <footer style="background: var(--secondary); color: white; padding: var(--space-2xl) 0 var(--space-lg);">
        <div class="container-pinterest">
            <!-- Footer Top -->
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-xl); margin-bottom: var(--space-xl);">
                <!-- About -->
                <div>
                    <h3 style="font-size: 20px; font-weight: 700; margin-bottom: var(--space-md); color: white;">
                        روز سكين
                    </h3>
                    <p style="color: rgba(255,255,255,0.8); line-height: 1.6; margin-bottom: var(--space-md); font-size: 14px;">
                        متجر إلكتروني متخصص في منتجات العناية بالبشرة والجمال الطبيعية 100% مع خدمات متخصصة في مركزنا المتطور.
                    </p>
                    <div style="display: flex; gap: var(--space-sm);">
                        <a href="https://facebook.com" target="_blank" style="width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; transition: all 0.2s; text-decoration: none;" onmouseover="this.style.background='rgba(255,255,255,0.2)'" onmouseout="this.style.background='rgba(255,255,255,0.1)'">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
                                <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                            </svg>
                        </a>
                        <a href="https://instagram.com" target="_blank" style="width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; transition: all 0.2s; text-decoration: none;" onmouseover="this.style.background='rgba(255,255,255,0.2)'" onmouseout="this.style.background='rgba(255,255,255,0.1)'">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
                                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                            </svg>
                        </a>
                        <a href="https://twitter.com" target="_blank" style="width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; transition: all 0.2s; text-decoration: none;" onmouseover="this.style.background='rgba(255,255,255,0.2)'" onmouseout="this.style.background='rgba(255,255,255,0.1)'">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
                                <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                            </svg>
                        </a>
                        <a href="https://wa.me/201234567890" target="_blank" style="width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; transition: all 0.2s; text-decoration: none;" onmouseover="this.style.background='rgba(255,255,255,0.2)'" onmouseout="this.style.background='rgba(255,255,255,0.1)'">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
                                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
                            </svg>
                        </a>
                    </div>
                </div>

                <!-- Quick Links -->
                <div>
                    <h3 style="font-size: 18px; font-weight: 700; margin-bottom: var(--space-md); color: white;">
                        روابط سريعة
                    </h3>
                    <ul style="list-style: none;">
                        <li style="margin-bottom: var(--space-sm);">
                            <a href="products.php" style="color: rgba(255,255,255,0.8); text-decoration: none; font-size: 14px; transition: color 0.2s;" onmouseover="this.style.color='white'" onmouseout="this.style.color='rgba(255,255,255,0.8)'">
                                المنتجات
                            </a>
                        </li>
                        <li style="margin-bottom: var(--space-sm);">
                            <a href="services.php" style="color: rgba(255,255,255,0.8); text-decoration: none; font-size: 14px; transition: color 0.2s;" onmouseover="this.style.color='white'" onmouseout="this.style.color='rgba(255,255,255,0.8)'">
                                الخدمات
                            </a>
                        </li>
                        <li style="margin-bottom: var(--space-sm);">
                            <a href="cart.php" style="color: rgba(255,255,255,0.8); text-decoration: none; font-size: 14px; transition: color 0.2s;" onmouseover="this.style.color='white'" onmouseout="this.style.color='rgba(255,255,255,0.8)'">
                                السلة
                            </a>
                        </li>
                        <li style="margin-bottom: var(--space-sm);">
                            <a href="wishlist.php" style="color: rgba(255,255,255,0.8); text-decoration: none; font-size: 14px; transition: color 0.2s;" onmouseover="this.style.color='white'" onmouseout="this.style.color='rgba(255,255,255,0.8)'">
                                المفضلة
                            </a>
                        </li>
                        <li>
                            <a href="account.php" style="color: rgba(255,255,255,0.8); text-decoration: none; font-size: 14px; transition: color 0.2s;" onmouseover="this.style.color='white'" onmouseout="this.style.color='rgba(255,255,255,0.8)'">
                                حسابي
                            </a>
                        </li>
                    </ul>
                </div>

                <!-- Categories -->
                <div>
                    <h3 style="font-size: 18px; font-weight: 700; margin-bottom: var(--space-md); color: white;">
                        الفئات
                    </h3>
                    <ul style="list-style: none;">
                        <?php 
                        $footerCategories = array_slice($categories, 0, 5);
                        foreach($footerCategories as $category): 
                        ?>
                            <li style="margin-bottom: var(--space-sm);">
                                <a href="products.php?category=<?php echo $category['id']; ?>" style="color: rgba(255,255,255,0.8); text-decoration: none; font-size: 14px; transition: color 0.2s;" onmouseover="this.style.color='white'" onmouseout="this.style.color='rgba(255,255,255,0.8)'">
                                    <?php echo htmlspecialchars($category['name']); ?>
                                </a>
                            </li>
                        <?php endforeach; ?>
                    </ul>
                </div>

                <!-- Contact -->
                <div>
                    <h3 style="font-size: 18px; font-weight: 700; margin-bottom: var(--space-md); color: white;">
                        تواصل معنا
                    </h3>
                    <ul style="list-style: none;">
                        <li style="margin-bottom: var(--space-sm); display: flex; align-items: center; gap: var(--space-sm);">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.8)" stroke-width="2">
                                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
                            </svg>
                            <span style="color: rgba(255,255,255,0.8); font-size: 14px;">01234567890</span>
                        </li>
                        <li style="margin-bottom: var(--space-sm); display: flex; align-items: center; gap: var(--space-sm);">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.8)" stroke-width="2">
                                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                                <polyline points="22,6 12,13 2,6"></polyline>
                            </svg>
                            <span style="color: rgba(255,255,255,0.8); font-size: 14px;">info@rozskin.com</span>
                        </li>
                        <li style="display: flex; align-items: start; gap: var(--space-sm);">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.8)" stroke-width="2" style="margin-top: 2px;">
                                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                                <circle cx="12" cy="10" r="3"></circle>
                            </svg>
                            <span style="color: rgba(255,255,255,0.8); font-size: 14px; line-height: 1.5;">القاهرة، مصر</span>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Footer Bottom -->
            <div style="border-top: 1px solid rgba(255,255,255,0.1); padding-top: var(--space-lg); text-align: center;">
                <p style="color: rgba(255,255,255,0.6); font-size: 14px; margin: 0;">
                    © <?php echo date('Y'); ?> روز سكين. جميع الحقوق محفوظة.
                </p>
            </div>
        </div>
    </footer>

    <script>
        // Enhanced Toast Notification with Icons
        function showToast(message, duration = 3000) {
            const toast = document.getElementById('toast');
            
            // Add icon based on message
            let icon = '';
            if (message.includes('✓') || message.includes('نجاح') || message.includes('تم')) {
                icon = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-left: 8px;"><polyline points="20 6 9 17 4 12"></polyline></svg>';
            } else if (message.includes('خطأ') || message.includes('فشل')) {
                icon = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-left: 8px;"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>';
            }
            
            toast.innerHTML = '<div style="display: flex; align-items: center; justify-content: center;">' + icon + '<span>' + message + '</span></div>';
            toast.classList.remove('hidden');
            toast.style.animation = 'slideDown 0.3s ease-out';
            
            setTimeout(() => {
                toast.style.animation = 'slideUp 0.3s ease-in';
                setTimeout(() => {
                    toast.classList.add('hidden');
                }, 300);
            }, duration);
        }
        
        // Add toast animations
        const toastStyle = document.createElement('style');
        toastStyle.textContent = `
            @keyframes slideDown {
                from {
                    opacity: 0;
                    transform: translate(-50%, -20px);
                }
                to {
                    opacity: 1;
                    transform: translate(-50%, 0);
                }
            }
            @keyframes slideUp {
                from {
                    opacity: 1;
                    transform: translate(-50%, 0);
                }
                to {
                    opacity: 0;
                    transform: translate(-50%, -20px);
                }
            }
        `;
        document.head.appendChild(toastStyle);

        // Booking Modal
        function showBookingModal(serviceId, serviceName) {
            <?php if (!isset($_SESSION['user_id'])): ?>
                showToast('يجب تسجيل الدخول أولاً');
                showLoginModal();
                return;
            <?php endif; ?>
            
            document.getElementById('serviceId').value = serviceId;
            document.getElementById('bookingServiceName').textContent = serviceName;
            document.getElementById('bookingModal').classList.remove('hidden');
        }

        function closeBookingModal() {
            document.getElementById('bookingModal').classList.add('hidden');
            document.getElementById('bookingForm').reset();
        }

        function handleBooking(event) {
            event.preventDefault();
            const formData = new FormData(event.target);
            const submitBtn = event.target.querySelector('button[type="submit"]');
            const originalText = submitBtn.textContent;
            
            submitBtn.textContent = 'جاري الحجز...';
            submitBtn.disabled = true;

            fetch('book_appointment.php', {
                method: 'POST',
                body: formData,
                headers: {'X-Requested-With': 'XMLHttpRequest'}
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showToast('تم الحجز بنجاح! ✓');
                    closeBookingModal();
                } else {
                    showToast(data.message || 'حدث خطأ في الحجز');
                    submitBtn.textContent = originalText;
                    submitBtn.disabled = false;
                }
            })
            .catch(() => {
                showToast('حدث خطأ، حاول مرة أخرى');
                submitBtn.textContent = originalText;
                submitBtn.disabled = false;
            });
        }

        // Login Modal
        function showLoginModal() {
            document.getElementById('loginModal').classList.remove('hidden');
        }

        function closeLoginModal() {
            document.getElementById('loginModal').classList.add('hidden');
        }

        // Login Handler
        function handleLogin(event) {
            event.preventDefault();
            const formData = new FormData(event.target);
            const submitBtn = event.target.querySelector('button[type="submit"]');
            const originalText = submitBtn.textContent;
            
            submitBtn.textContent = 'جاري التحميل...';
            submitBtn.disabled = true;

            fetch('login.php', {
                method: 'POST',
                body: formData,
                headers: {'X-Requested-With': 'XMLHttpRequest'}
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showToast('تم تسجيل الدخول بنجاح');
                    setTimeout(() => window.location.reload(), 1000);
                } else {
                    showToast(data.message || 'خطأ في تسجيل الدخول');
                    submitBtn.textContent = originalText;
                    submitBtn.disabled = false;
                }
            })
            .catch(error => {
                showToast('حدث خطأ، حاول مرة أخرى');
                submitBtn.textContent = originalText;
                submitBtn.disabled = false;
            });
        }

        // Add to Cart with Loading State
        function addToCart(productId, productName) {
            <?php if (!isset($_SESSION['user_id'])): ?>
                showToast('يجب تسجيل الدخول أولاً');
                showLoginModal();
                return;
            <?php endif; ?>

            // Find the button
            const buttons = document.querySelectorAll('.add-to-cart-btn');
            let targetBtn = null;
            buttons.forEach(btn => {
                if (btn.onclick && btn.onclick.toString().includes(productId)) {
                    targetBtn = btn;
                }
            });

            if (targetBtn) {
                // Show loading
                targetBtn.disabled = true;
                targetBtn.style.opacity = '0.6';
                const originalHTML = targetBtn.innerHTML;
                targetBtn.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="animation: spin 1s linear infinite;"><circle cx="12" cy="12" r="10" stroke-opacity="0.25"></circle><path d="M12 2a10 10 0 0 1 10 10" stroke-opacity="0.75"></path></svg>';
            }

            fetch('add_to_cart.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: 'product_id=' + productId + '&quantity=1'
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showToast('✓ تم إضافة ' + productName + ' للسلة');
                    updateCartBadge(data.cart_count);
                    
                    // Success animation
                    if (targetBtn) {
                        targetBtn.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>';
                        setTimeout(() => {
                            targetBtn.innerHTML = originalHTML;
                            targetBtn.disabled = false;
                            targetBtn.style.opacity = '1';
                        }, 1000);
                    }
                } else {
                    showToast(data.message || 'حدث خطأ');
                    if (targetBtn) {
                        targetBtn.innerHTML = originalHTML;
                        targetBtn.disabled = false;
                        targetBtn.style.opacity = '1';
                    }
                }
            })
            .catch(() => {
                showToast('حدث خطأ، حاول مرة أخرى');
                if (targetBtn) {
                    targetBtn.innerHTML = originalHTML;
                    targetBtn.disabled = false;
                    targetBtn.style.opacity = '1';
                }
            });
        }
        
        // Add spin animation
        const style = document.createElement('style');
        style.textContent = `
            @keyframes spin {
                from { transform: rotate(0deg); }
                to { transform: rotate(360deg); }
            }
        `;
        document.head.appendChild(style);

        // Toggle Wishlist with Animation
        function toggleWishlist(productId) {
            <?php if (!isset($_SESSION['user_id'])): ?>
                showToast('يجب تسجيل الدخول أولاً');
                showLoginModal();
                return;
            <?php endif; ?>

            const btn = document.querySelector(`[data-product-id="${productId}"]`);
            const svg = btn.querySelector('svg');
            const path = svg.querySelector('path');
            
            // Add loading animation
            btn.style.pointerEvents = 'none';
            svg.style.transform = 'scale(0.8)';
            
            fetch('toggle_wishlist.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: 'product_id=' + productId
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Animate heart
                    svg.style.transform = 'scale(1.3)';
                    setTimeout(() => {
                        svg.style.transform = 'scale(1)';
                    }, 200);
                    
                    // Update state
                    if (data.in_wishlist) {
                        // Fill with red/pink
                        path.setAttribute('fill', '#E57393');
                        path.setAttribute('stroke', '#E57393');
                        btn.classList.add('active');
                    } else {
                        // Empty heart
                        path.setAttribute('fill', 'none');
                        path.setAttribute('stroke', 'currentColor');
                        btn.classList.remove('active');
                    }
                    
                    // Update wishlist count in navigation
                    updateWishlistCount();
                    
                    showToast(data.message);
                } else {
                    showToast(data.message || 'حدث خطأ');
                }
            })
            .catch(() => {
                showToast('حدث خطأ، حاول مرة أخرى');
            })
            .finally(() => {
                btn.style.pointerEvents = 'auto';
            });
        }
        
        // Update Wishlist Count
        function updateWishlistCount() {
            fetch('wishlist_count.php', {
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                const badge = document.querySelector('.nav-icon-btn[title="المفضلة"] .nav-badge');
                const wishlistBtn = document.querySelector('.nav-icon-btn[title="المفضلة"]');
                
                if (data.count > 0) {
                    if (badge) {
                        badge.textContent = data.count;
                    } else if (wishlistBtn) {
                        // Create badge if doesn't exist
                        const newBadge = document.createElement('span');
                        newBadge.className = 'nav-badge';
                        newBadge.textContent = data.count;
                        wishlistBtn.appendChild(newBadge);
                    }
                } else {
                    if (badge) {
                        badge.remove();
                    }
                }
            })
            .catch(error => {
                console.error('Error updating wishlist count:', error);
            });
        }

        // Update Cart Badge
        function updateCartBadge(count) {
            const badge = document.querySelector('.nav-badge');
            if (count > 0) {
                if (badge) {
                    badge.textContent = count;
                } else {
                    const cartBtn = document.querySelector('[title="السلة"]');
                    const newBadge = document.createElement('span');
                    newBadge.className = 'nav-badge';
                    newBadge.textContent = count;
                    cartBtn.appendChild(newBadge);
                }
            } else if (badge) {
                badge.remove();
            }
        }

        // Filter Products (placeholder)
        function filterProducts(categoryId) {
            // Update active state
            document.querySelectorAll('.category-chip').forEach(chip => {
                chip.classList.remove('active');
            });
            event.target.classList.add('active');
            
            // Redirect to products page with filter
            if (categoryId === 'all') {
                window.location.href = 'products.php';
            } else {
                window.location.href = 'products.php?category=' + categoryId;
            }
        }

        // Search functionality
        document.getElementById('searchInput')?.addEventListener('input', function(e) {
            const searchTerm = e.target.value.toLowerCase();
            if (searchTerm.length < 2) return;
            
            // Simple client-side search (you can enhance with AJAX)
            document.querySelectorAll('.product-card').forEach(card => {
                const title = card.querySelector('.product-title').textContent.toLowerCase();
                const desc = card.querySelector('.product-description').textContent.toLowerCase();
                
                if (title.includes(searchTerm) || desc.includes(searchTerm)) {
                    card.style.display = '';
                } else {
                    card.style.display = 'none';
                }
            });
        });
    </script>
</body>
</html>

