<?php
session_start();
require_once '../config/database.php';
require_once '../models/user.php';

$page_title = 'خدماتنا';
$base_path = '../';

$database = new Database();
$conn = $database->getConnection();
$user_model = new User($conn);

// Get all active services
$stmt = $conn->prepare("SELECT * FROM services WHERE is_active = 1 ORDER BY created_at DESC");
$stmt->execute();
$services = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Get categories
$categories = [
    'all' => 'جميع الخدمات',
    'skin_care' => 'العناية بالبشرة',
    'hair_care' => 'العناية بالشعر',
    'massage' => 'المساج والاسترخاء',
    'makeup' => 'المكياج',
    'nails' => 'العناية بالأظافر'
];

// Get settings
try {
    $stmt = $conn->prepare("SELECT setting_key, setting_value FROM settings WHERE setting_key IN ('site_name', 'logo_text', 'default_currency')");
    $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';
}

// Cart count
$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;
    }
}
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $page_title; ?> - <?php echo htmlspecialchars($site_name); ?></title>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../assets/css/pinterest-style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        * {
            font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
        }
        body {
            background: linear-gradient(135deg, #fff5f7 0%, #ffe8f0 100%);
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav id="mainNav" style="background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(229, 115, 147, 0.08); position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: transform 0.3s ease;">
        <div style="max-width: 1400px; margin: 0 auto; padding: 0 24px;">
            <div style="display: flex; align-items: center; justify-content: space-between; height: 60px;">
                <div style="display: flex; align-items: center; gap: 20px;">
                    <button id="burgerBtn" onclick="toggleBurgerMenu()" style="background: transparent; border: none; padding: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#E57393" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <line x1="3" y1="12" x2="21" y2="12"></line>
                            <line x1="3" y1="6" x2="21" y2="6"></line>
                            <line x1="3" y1="18" x2="21" y2="18"></line>
                        </svg>
                    </button>
                </div>
                <a href="index.php" style="font-size: 22px; font-weight: 800; background: linear-gradient(135deg, #E57393 0%, #D1537A 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-decoration: none; letter-spacing: -0.3px;">
                    <?php echo htmlspecialchars($logo_text); ?>
                </a>
            </div>
        </div>
    </nav>

    <button onclick="window.location.href='cart.php'" title="السلة" style="position: fixed; bottom: 24px; right: 24px; z-index: 999; background: linear-gradient(135deg, #E57393 0%, #D1537A 100%); border: none; width: 56px; height: 56px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(229, 115, 147, 0.4); transition: all 0.3s;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 6px 24px rgba(229, 115, 147, 0.5)'" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='0 4px 16px rgba(229, 115, 147, 0.4)'">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <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 style="position: absolute; top: -4px; right: -4px; background: white; color: #E57393; font-size: 11px; font-weight: 800; min-width: 22px; height: 22px; border-radius: 11px; display: flex; align-items: center; justify-content: center; padding: 0 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.15);"><?php echo $cart_count; ?></span>
        <?php endif; ?>
    </button>

    <div id="burgerMenu" style="position: fixed; top: 0; right: -100%; width: 320px; height: 100vh; background: white; box-shadow: -4px 0 20px rgba(0,0,0,0.1); z-index: 9999; transition: right 0.3s ease; overflow-y: auto;">
        <div style="padding: 20px;">
            <button onclick="toggleBurgerMenu()" style="background: rgba(229, 115, 147, 0.1); border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; margin-bottom: 30px; transition: all 0.3s;" onmouseover="this.style.background='rgba(229, 115, 147, 0.2)'" onmouseout="this.style.background='rgba(229, 115, 147, 0.1)'">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#E57393" stroke-width="2.5">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
            </button>
            <div style="display: flex; flex-direction: column; gap: 8px;">
                <?php if (isset($_SESSION['user_id'])): ?>
                    <a href="account.php" style="display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; text-decoration: none; color: #333; font-weight: 600; transition: all 0.3s;" onmouseover="this.style.background='rgba(229, 115, 147, 0.1)'" onmouseout="this.style.background='transparent'">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#E57393" 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>
                        حسابي
                    </a>
                <?php else: ?>
                    <a href="#" onclick="alert('يرجى تسجيل الدخول'); return false;" style="display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; text-decoration: none; color: #333; font-weight: 600; transition: all 0.3s;" onmouseover="this.style.background='rgba(229, 115, 147, 0.1)'" onmouseout="this.style.background='transparent'">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#E57393" 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>
                        تسجيل الدخول
                    </a>
                <?php endif; ?>
                <a href="blog.php" style="display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; text-decoration: none; color: #333; font-weight: 600; transition: all 0.3s;" onmouseover="this.style.background='rgba(229, 115, 147, 0.1)'" onmouseout="this.style.background='transparent'">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#E57393" stroke-width="2">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                        <polyline points="14 2 14 8 20 8"></polyline>
                        <line x1="16" y1="13" x2="8" y2="13"></line>
                        <line x1="16" y1="17" x2="8" y2="17"></line>
                    </svg>
                    روز فيد
                </a>
                <div style="height: 1px; background: rgba(229, 115, 147, 0.1); margin: 12px 0;"></div>
                <a href="products.php" style="display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; text-decoration: none; color: #333; font-weight: 600; transition: all 0.3s;" onmouseover="this.style.background='rgba(229, 115, 147, 0.1)'" onmouseout="this.style.background='transparent'">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#E57393" 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>
                    المنتجات
                </a>
                <a href="services.php" style="display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; text-decoration: none; color: #333; font-weight: 600; transition: all 0.3s;" onmouseover="this.style.background='rgba(229, 115, 147, 0.1)'" onmouseout="this.style.background='transparent'">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#E57393" stroke-width="2">
                        <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                        <line x1="16" y1="2" x2="16" y2="6"></line>
                        <line x1="8" y1="2" x2="8" y2="6"></line>
                        <line x1="3" y1="10" x2="21" y2="10"></line>
                    </svg>
                    الخدمات
                </a>
            </div>
        </div>
    </div>

    <div id="burgerBackdrop" onclick="toggleBurgerMenu()" style="position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.5); z-index: 9998; display: none; opacity: 0; transition: opacity 0.3s;"></div>

    <script>
        function toggleBurgerMenu() {
            const menu = document.getElementById('burgerMenu');
            const backdrop = document.getElementById('burgerBackdrop');
            const isOpen = menu.style.right === '0px';
            if (isOpen) {
                menu.style.right = '-100%';
                backdrop.style.display = 'none';
                backdrop.style.opacity = '0';
                document.body.style.overflow = '';
            } else {
                menu.style.right = '0';
                backdrop.style.display = 'block';
                setTimeout(() => backdrop.style.opacity = '1', 10);
                document.body.style.overflow = 'hidden';
            }
        }
        let lastScrollTop = 0;
        const navbar = document.getElementById('mainNav');
        window.addEventListener('scroll', function() {
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            if (scrollTop > lastScrollTop && scrollTop > 100) {
                navbar.style.transform = 'translateY(-100%)';
            } else {
                navbar.style.transform = 'translateY(0)';
            }
            lastScrollTop = scrollTop;
        });
    </script>

    <div style="height: 60px;"></div>

<style>
.service-card {
    transition: all 0.3s ease;
    overflow: hidden;
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(229, 115, 147, 0.1);
}
.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(229, 115, 147, 0.2);
}
.service-image {
    height: 240px;
    background: linear-gradient(135deg, #E57393 0%, #D1537A 100%);
    position: relative;
    overflow: hidden;
}
.service-image img {
    transition: transform 0.5s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.service-card:hover .service-image img {
    transform: scale(1.1);
}
.category-badge {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #E57393;
}
.price-tag {
    background: linear-gradient(135deg, #E57393 0%, #D1537A 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 700;
}
.category-btn {
    font-family: 'Tajawal', sans-serif !important;
    font-weight: 600;
}
.category-btn.active {
    background: linear-gradient(135deg, #E57393 0%, #D1537A 100%) !important;
    color: white !important;
}
</style>

<!-- Hero Section -->
<section style="padding: 80px 20px; background: white; text-align: center;">
    <div style="max-width: 800px; margin: 0 auto;">
        <h1 style="font-size: 42px; font-weight: 800; margin-bottom: 16px; background: linear-gradient(135deg, #E57393 0%, #D1537A 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
            خدماتنا المميزة
        </h1>
        <p style="font-size: 18px; color: #6b7280; margin-bottom: 32px; line-height: 1.6;">
            نقدم لك أفضل خدمات التجميل والعناية بأحدث التقنيات وأمهر المتخصصين
        </p>
        
        <!-- Search Bar -->
        <div style="max-width: 600px; margin: 0 auto; position: relative;">
            <input type="text" id="searchInput" placeholder="ابحث عن الخدمة التي تريدها..."
                   style="width: 100%; padding: 16px 50px 16px 20px; border-radius: 50px; border: 2px solid rgba(229, 115, 147, 0.2); font-size: 16px; outline: none; transition: all 0.3s;"
                   onfocus="this.style.borderColor='#E57393'" onblur="this.style.borderColor='rgba(229, 115, 147, 0.2)'">
            <i class="fas fa-search" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: #E57393; font-size: 18px;"></i>
        </div>
    </div>
</section>

<!-- Categories Filter -->
<section style="padding: 20px 0; background: white; border-bottom: 1px solid rgba(229, 115, 147, 0.1); position: sticky; top: 60px; z-index: 40;">
    <div style="max-width: 1200px; margin: 0 auto; padding: 0 20px;">
        <div style="display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px;">
            <?php foreach ($categories as $key => $label): ?>
            <button onclick="filterByCategory('<?php echo $key; ?>')" 
                    data-category="<?php echo $key; ?>"
                    class="category-btn <?php echo $key === 'all' ? 'active' : ''; ?>"
                    style="padding: 10px 24px; border-radius: 50px; white-space: nowrap; transition: all 0.3s; border: 2px solid rgba(229, 115, 147, 0.2); background: <?php echo $key === 'all' ? 'linear-gradient(135deg, #E57393 0%, #D1537A 100%)' : 'white'; ?>; color: <?php echo $key === 'all' ? 'white' : '#6b7280'; ?>; cursor: pointer;"
                    onmouseover="if(!this.classList.contains('active')) { this.style.background='rgba(229, 115, 147, 0.1)'; this.style.borderColor='#E57393'; }"
                    onmouseout="if(!this.classList.contains('active')) { this.style.background='white'; this.style.borderColor='rgba(229, 115, 147, 0.2)'; }">
                <?php echo $label; ?>
            </button>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- Services Grid -->
<section class="py-16 bg-gray-50">
    <div class="container mx-auto px-4">
        <div id="servicesGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <?php foreach ($services as $service): 
                $final_price = $service['price'];
                if ($service['discount_percentage'] > 0) {
                    $final_price = $service['price'] - ($service['price'] * $service['discount_percentage'] / 100);
                }
            ?>
            <div class="service-card bg-white rounded-2xl shadow-lg" 
                 data-category="<?php echo htmlspecialchars($service['category']); ?>"
                 data-name="<?php echo htmlspecialchars($service['name']); ?>">
                
                <!-- Image -->
                <div class="service-image relative">
                    <?php if ($service['image']): ?>
                        <img src="../uploads/services/<?php echo htmlspecialchars($service['image']); ?>" 
                             alt="<?php echo htmlspecialchars($service['name']); ?>"
                             class="w-full h-full object-cover"
                             onerror="this.src='../uploads/products/placeholder.svg'">
                    <?php else: ?>
                        <div class="w-full h-full flex items-center justify-center">
                            <i class="fas fa-spa text-white text-6xl opacity-50"></i>
                        </div>
                    <?php endif; ?>
                    
                    <!-- Discount Badge -->
                    <?php if ($service['discount_percentage'] > 0): ?>
                    <div class="absolute top-4 left-4 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">
                        خصم <?php echo $service['discount_percentage']; ?>%
                    </div>
                    <?php endif; ?>
                    
                    <!-- Category Badge -->
                    <div class="absolute bottom-4 right-4 category-badge px-3 py-1 rounded-full text-sm font-medium text-gray-700">
                        <?php echo $categories[$service['category']] ?? $service['category']; ?>
                    </div>
                </div>
                
                <!-- Content -->
                <div class="p-6">
                    <h3 class="text-xl font-bold text-gray-800 mb-2">
                        <?php echo htmlspecialchars($service['name']); ?>
                    </h3>
                    
                    <p class="text-gray-600 text-sm mb-4 line-clamp-2">
                        <?php echo htmlspecialchars($service['description']); ?>
                    </p>
                    
                    <!-- Info -->
                    <div class="flex items-center gap-4 mb-4 text-sm text-gray-500">
                        <div class="flex items-center gap-1">
                            <i class="far fa-clock text-pink-500"></i>
                            <span><?php echo $service['duration']; ?> دقيقة</span>
                        </div>
                    </div>
                    
                    <!-- Price & Action -->
                    <div class="flex items-center justify-between">
                        <div>
                            <?php if ($service['discount_percentage'] > 0): ?>
                                <div class="flex items-center gap-2">
                                    <span class="text-2xl font-bold text-[#E57393]">
                                        <?php echo number_format($final_price, 0); ?> ج.م
                                    </span>
                                    <span class="text-sm text-gray-400 line-through">
                                        <?php echo number_format($service['price'], 0); ?>
                                    </span>
                                </div>
                            <?php else: ?>
                                <span class="text-2xl font-bold text-[#E57393]">
                                    <?php echo number_format($service['price'], 0); ?> ج.م
                                </span>
                            <?php endif; ?>
                        </div>
                        
                        <a href="service-detail.php?id=<?php echo $service['id']; ?>"
                           class="inline-block px-6 py-2 bg-gradient-to-r from-[#E57393] to-[#D1537A] text-white rounded-full font-medium hover:shadow-lg transition-all text-center">
                            عرض التفاصيل
                        </a>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        
        <!-- No Results -->
        <div id="noResults" class="hidden text-center py-16">
            <i class="fas fa-search text-gray-300 text-6xl mb-4"></i>
            <h3 class="text-2xl font-bold text-gray-400 mb-2">لا توجد نتائج</h3>
            <p class="text-gray-500">جرب البحث بكلمات أخرى</p>
        </div>
    </div>
</section>

<!-- Booking Modal -->
<div id="bookingModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full max-h-[90vh] overflow-y-auto">
        <div class="sticky top-0 bg-white border-b p-6 flex justify-between items-center">
            <div>
                <h3 class="text-2xl font-bold text-gray-800">احجز موعدك</h3>
                <p id="modalServiceName" class="text-sm text-gray-500 mt-1"></p>
            </div>
            <button onclick="closeBookingModal()" class="text-gray-400 hover:text-gray-600">
                <i class="fas fa-times text-2xl"></i>
            </button>
        </div>
        
        <form id="bookingForm" method="POST" action="../api/bookings/create.php" class="p-6">
            <input type="hidden" name="service_id" id="serviceId">
            
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">التاريخ *</label>
                    <input type="date" name="booking_date" required
                           min="<?php echo date('Y-m-d'); ?>"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent">
                </div>
                
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">الوقت *</label>
                    <select name="booking_time" required
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent">
                        <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>
                    <label class="block text-sm font-bold text-gray-700 mb-2">ملاحظات (اختياري)</label>
                    <textarea name="notes" rows="3"
                              placeholder="أي ملاحظات أو طلبات خاصة..."
                              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent"></textarea>
                </div>
            </div>
            
            <button type="submit" 
                    class="w-full mt-6 py-4 bg-gradient-to-r from-[#E57393] to-[#D1537A] text-white rounded-lg font-bold text-lg hover:shadow-xl transition-all">
                تأكيد الحجز
            </button>
        </form>
    </div>
</div>

<script>
// Search functionality
document.getElementById('searchInput').addEventListener('input', function(e) {
    const searchTerm = e.target.value.toLowerCase();
    filterServices(searchTerm);
});

// Category filter
function filterByCategory(category) {
    // Update active button
    document.querySelectorAll('.category-btn').forEach(btn => {
        if (btn.dataset.category === category) {
            btn.className = 'category-btn px-6 py-2 rounded-full whitespace-nowrap transition-all bg-gradient-to-r from-[#E57393] to-[#D1537A] text-white';
        } else {
            btn.className = 'category-btn px-6 py-2 rounded-full whitespace-nowrap transition-all bg-gray-100 text-gray-700 hover:bg-gray-200';
        }
    });
    
    // Filter services
    const cards = document.querySelectorAll('.service-card');
    let visibleCount = 0;
    
    cards.forEach(card => {
        if (category === 'all' || card.dataset.category === category) {
            card.style.display = 'block';
            visibleCount++;
        } else {
            card.style.display = 'none';
        }
    });
    
    document.getElementById('noResults').classList.toggle('hidden', visibleCount > 0);
}

function filterServices(searchTerm) {
    const cards = document.querySelectorAll('.service-card');
    let visibleCount = 0;
    
    cards.forEach(card => {
        const name = card.dataset.name.toLowerCase();
        if (name.includes(searchTerm)) {
            card.style.display = 'block';
            visibleCount++;
        } else {
            card.style.display = 'none';
        }
    });
    
    document.getElementById('noResults').classList.toggle('hidden', visibleCount > 0);
}

// Booking modal
function openBookingModal(serviceId, serviceName) {
    <?php if (!isset($_SESSION['user_id'])): ?>
        alert('يجب تسجيل الدخول أولاً لحجز موعد');
        window.location.href = 'login.php?redirect=services';
        return;
    <?php endif; ?>
    
    document.getElementById('serviceId').value = serviceId;
    document.getElementById('modalServiceName').textContent = serviceName;
    document.getElementById('bookingModal').classList.remove('hidden');
}

function closeBookingModal() {
    document.getElementById('bookingModal').classList.add('hidden');
    document.getElementById('bookingForm').reset();
}

// Close modal on outside click
document.getElementById('bookingModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeBookingModal();
    }
});

// Form submission
document.getElementById('bookingForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const submitBtn = this.querySelector('button[type="submit"]');
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري الحجز...';
    
    fetch(this.action, {
        method: 'POST',
        body: formData
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            alert(data.message || 'تم الحجز بنجاح!');
            // Redirect to account page
            window.location.href = 'account.php?tab=bookings';
        } else {
            alert(data.message || 'حدث خطأ في الحجز');
        }
    })
    .catch(() => {
        alert('حدث خطأ في الاتصال');
    })
    .finally(() => {
        submitBtn.disabled = false;
        submitBtn.innerHTML = 'تأكيد الحجز';
    });
});
</script>

<?php include '../includes/unified-footer.php'; ?>
