<?php
session_start();
require_once '../config/database.php';
require_once '../models/user.php';

$service_id = $_GET['id'] ?? 0;

$database = new Database();
$conn = $database->getConnection();
$user_model = new User($conn);

// Get service details
$stmt = $conn->prepare("SELECT * FROM services WHERE id = ? AND is_active = 1");
$stmt->execute([$service_id]);
$service = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$service) {
    header('Location: services.php');
    exit;
}

// Calculate final price
$final_price = $service['price'];
if ($service['discount_percentage'] > 0) {
    $final_price = $service['price'] - ($service['price'] * $service['discount_percentage'] / 100);
}

// Get branches
$branches = [];
if ($service['available_branches']) {
    $branch_ids = json_decode($service['available_branches'], true);
    if (is_array($branch_ids) && !empty($branch_ids)) {
        $placeholders = str_repeat('?,', count($branch_ids) - 1) . '?';
        $stmt = $conn->prepare("SELECT * FROM branches WHERE id IN ($placeholders) AND is_active = 1");
        $stmt->execute($branch_ids);
        $branches = $stmt->fetchAll(PDO::FETCH_ASSOC);
    }
}

// Categories
$categories = [
    'skin_care' => 'العناية بالبشرة',
    'hair_care' => 'العناية بالشعر',
    'massage' => 'المساج والاسترخاء',
    'makeup' => 'المكياج',
    'nails' => 'العناية بالأظافر'
];

// Benefits based on category
$benefits_map = [
    'skin_care' => [
        'تنظيف عميق للبشرة',
        'إزالة الشوائب والرؤوس السوداء',
        'تفتيح وتوحيد لون البشرة',
        'ترطيب مكثف',
        'نتائج فورية ومرئية'
    ],
    'hair_care' => [
        'تغذية عميقة للشعر',
        'إصلاح الشعر التالف',
        'لمعان طبيعي',
        'حماية من التقصف',
        'نتائج تدوم طويلاً'
    ],
    'massage' => [
        'استرخاء تام للجسم',
        'تخفيف التوتر والإجهاد',
        'تحسين الدورة الدموية',
        'تخفيف آلام العضلات',
        'شعور بالراحة والانتعاش'
    ],
    'makeup' => [
        'مظهر احترافي',
        'مكياج يدوم طويلاً',
        'مناسب لجميع المناسبات',
        'منتجات عالية الجودة',
        'تطبيق احترافي'
    ],
    'nails' => [
        'أظافر صحية وجميلة',
        'تلميع احترافي',
        'ألوان عصرية',
        'عناية كاملة',
        'نتائج تدوم أسبوعين'
    ]
];

$benefits = $benefits_map[$service['category']] ?? [
    'خدمة احترافية',
    'نتائج مضمونة',
    'منتجات عالية الجودة',
    'فريق متخصص',
    'أسعار مناسبة'
];

$page_title = $service['name'];

// Get settings
try {
    $stmt = $conn->prepare("SELECT setting_key, setting_value FROM settings WHERE setting_key IN ('site_name', 'logo_text')");
    $stmt->execute();
    $settings = $stmt->fetchAll(PDO::FETCH_KEY_PAIR);
    $site_name = $settings['site_name'] ?? 'Roz Skin';
    $logo_text = $settings['logo_text'] ?? 'Roz Skin';
} catch (PDOException $e) {
    $site_name = 'Roz Skin';
    $logo_text = 'Roz Skin';
}

// 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 htmlspecialchars($service['name']); ?> - <?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;">
                <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;">حسابي</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;">تسجيل الدخول</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;">روز فيد</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;">المنتجات</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;">الخدمات</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-detail-image {
    height: 500px;
    background: linear-gradient(135deg, #E57393 0%, #D1537A 100%);
}
.sticky-booking {
    position: sticky;
    top: 100px;
}
</style>

<!-- Breadcrumb -->
<section style="padding: 16px 0; background: #f9fafb; border-bottom: 1px solid #e5e7eb;">
    <div style="max-width: 1200px; margin: 0 auto; padding: 0 16px;">
        <div style="display: flex; align-items: center; gap: 8px; font-size: 14px; color: #6b7280; flex-wrap: wrap;">
            <a href="index.php" style="color: #6b7280; text-decoration: none; transition: color 0.3s;" onmouseover="this.style.color='#E57393'" onmouseout="this.style.color='#6b7280'">الرئيسية</a>
            <i class="fas fa-chevron-left" style="font-size: 10px;"></i>
            <a href="services.php" style="color: #6b7280; text-decoration: none; transition: color 0.3s;" onmouseover="this.style.color='#E57393'" onmouseout="this.style.color='#6b7280'">الخدمات</a>
            <i class="fas fa-chevron-left" style="font-size: 10px;"></i>
            <span style="color: #E57393;"><?php echo htmlspecialchars($service['name']); ?></span>
        </div>
    </div>
</section>

<!-- Service Detail -->
<section style="padding: 60px 20px; background: transparent;">
    <div style="max-width: 1200px; margin: 0 auto;">
        <div style="display: flex; gap: 32px; flex-wrap: wrap;">
            
            <!-- Main Content -->
            <div style="flex: 2; min-width: 300px;">
                <!-- Image -->
                <div class="service-detail-image" style="border-radius: 20px; overflow: hidden; margin-bottom: 32px; position: relative;">
                    <?php if ($service['image']): ?>
                        <img src="../uploads/services/<?php echo htmlspecialchars($service['image']); ?>" 
                             alt="<?php echo htmlspecialchars($service['name']); ?>"
                             style="width: 100%; height: 100%; object-fit: cover;"
                             onerror="this.parentElement.innerHTML='<div class=\'w-full h-full flex items-center justify-center\'><i class=\'fas fa-spa text-white text-8xl opacity-50\'></i></div>'">
                    <?php else: ?>
                        <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-spa" style="color: white; font-size: 80px; opacity: 0.5;"></i>
                        </div>
                    <?php endif; ?>
                    
                    <?php if ($service['discount_percentage'] > 0): ?>
                    <div style="position: absolute; top: 24px; left: 24px; background: #ef4444; color: white; padding: 12px 24px; border-radius: 50px; font-size: 18px; font-weight: 700; box-shadow: 0 4px 12px rgba(0,0,0,0.2);">
                        خصم <?php echo $service['discount_percentage']; ?>%
                    </div>
                    <?php endif; ?>
                </div>
                
                <!-- Title & Description -->
                <h1 style="font-size: 36px; font-weight: 800; color: #1f2937; margin-bottom: 16px;">
                    <?php echo htmlspecialchars($service['name']); ?>
                </h1>
                
                <div style="display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap;">
                    <span style="padding: 8px 16px; background: rgba(229, 115, 147, 0.1); color: #E57393; border-radius: 50px; font-size: 14px; font-weight: 600;">
                        <?php echo $categories[$service['category']] ?? $service['category']; ?>
                    </span>
                    <div style="display: flex; align-items: center; gap: 8px; color: #6b7280;">
                        <i class="far fa-clock" style="color: #E57393;"></i>
                        <span><?php echo $service['duration']; ?> دقيقة</span>
                    </div>
                </div>
                
                <p style="color: #374151; font-size: 18px; line-height: 1.8; margin-bottom: 32px;">
                    <?php echo nl2br(htmlspecialchars($service['description'])); ?>
                </p>
                
                <!-- Benefits -->
                <div style="background: #f0fdf4; border-radius: 16px; padding: 24px; margin-bottom: 32px;">
                    <h3 style="font-size: 24px; font-weight: 800; color: #1f2937; margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
                        <i class="fas fa-check-circle" style="color: #10b981;"></i>
                        فوائد الخدمة
                    </h3>
                    <ul style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px;">
                        <?php foreach ($benefits as $benefit): ?>
                        <li style="display: flex; align-items: center; gap: 8px; color: #374151;">
                            <i class="fas fa-check" style="color: #10b981;"></i>
                            <span><?php echo $benefit; ?></span>
                        </li>
                        <?php endforeach; ?>
                    </ul>
                </div>
                
                <!-- Branches -->
                <?php if (!empty($branches)): ?>
                <div style="background: #eff6ff; border-radius: 16px; padding: 24px;">
                    <h3 style="font-size: 24px; font-weight: 800; color: #1f2937; margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
                        <i class="fas fa-map-marker-alt" style="color: #2563eb;"></i>
                        الفروع المتاحة
                    </h3>
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;">
                        <?php foreach ($branches as $branch): ?>
                        <div style="background: white; border-radius: 12px; padding: 16px; box-shadow: 0 2px 8px rgba(229, 115, 147, 0.1);">
                            <h4 style="font-weight: 700; color: #1f2937; margin-bottom: 8px;"><?php echo htmlspecialchars($branch['name']); ?></h4>
                            <p style="font-size: 14px; color: #6b7280; margin-bottom: 8px;">
                                <i class="fas fa-map-marker-alt" style="color: #2563eb; font-size: 12px;"></i>
                                <?php echo htmlspecialchars($branch['address']); ?>
                            </p>
                            <p style="font-size: 14px; color: #6b7280;">
                                <i class="fas fa-phone" style="color: #2563eb; font-size: 12px;"></i>
                                <?php echo htmlspecialchars($branch['phone']); ?>
                            </p>
                        </div>
                        <?php endforeach; ?>
                    </div>
                </div>
                <?php endif; ?>
            </div>
            
            <!-- Booking Sidebar -->
            <div style="flex: 1; min-width: 300px;">
                <div class="sticky-booking" style="background: white; border-radius: 20px; box-shadow: 0 8px 24px rgba(229, 115, 147, 0.15); padding: 24px; border: 2px solid rgba(229, 115, 147, 0.1);">
                    <!-- Price -->
                    <div class="mb-6">
                        <?php if ($service['discount_percentage'] > 0): ?>
                            <div class="flex items-center gap-3 mb-2">
                                <span class="text-4xl font-bold text-[#E57393]">
                                    <?php echo number_format($final_price, 0); ?> ج.م
                                </span>
                                <span class="text-xl text-gray-400 line-through">
                                    <?php echo number_format($service['price'], 0); ?>
                                </span>
                            </div>
                            <p class="text-sm text-green-600 font-medium">
                                وفر <?php echo number_format($service['price'] - $final_price, 0); ?> ج.م
                            </p>
                        <?php else: ?>
                            <span class="text-4xl font-bold text-[#E57393]">
                                <?php echo number_format($service['price'], 0); ?> ج.م
                            </span>
                        <?php endif; ?>
                    </div>
                    
                    <!-- Quick Info -->
                    <div class="space-y-3 mb-6 pb-6 border-b">
                        <div class="flex items-center gap-3 text-gray-700">
                            <i class="far fa-clock text-pink-500 w-5"></i>
                            <span>المدة: <?php echo $service['duration']; ?> دقيقة</span>
                        </div>
                        <div class="flex items-center gap-3 text-gray-700">
                            <i class="fas fa-tag text-pink-500 w-5"></i>
                            <span><?php echo $categories[$service['category']] ?? $service['category']; ?></span>
                        </div>
                        <?php if (!empty($branches)): ?>
                        <div class="flex items-center gap-3 text-gray-700">
                            <i class="fas fa-map-marker-alt text-pink-500 w-5"></i>
                            <span><?php echo count($branches); ?> فرع متاح</span>
                        </div>
                        <?php endif; ?>
                    </div>
                    
                    <!-- Booking Button -->
                    <button onclick="openBookingModal(<?php echo $service['id']; ?>, '<?php echo addslashes($service['name']); ?>')"
                            class="w-full py-4 bg-gradient-to-r from-[#E57393] to-[#D1537A] text-white rounded-xl font-bold text-lg hover:shadow-xl transition-all mb-3">
                        <i class="fas fa-calendar-check ml-2"></i>
                        احجز الآن
                    </button>
                    
                    <a href="services.php" 
                       class="block w-full py-3 text-center border-2 border-gray-300 text-gray-700 rounded-xl font-medium hover:border-pink-300 hover:text-pink-600 transition-all">
                        <i class="fas fa-arrow-right ml-2"></i>
                        العودة للخدمات
                    </a>
                    
                    <!-- Trust Badges -->
                    <div class="mt-6 pt-6 border-t space-y-2 text-sm text-gray-600">
                        <div class="flex items-center gap-2">
                            <i class="fas fa-shield-alt text-green-600"></i>
                            <span>حجز آمن ومضمون</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <i class="fas fa-user-check text-blue-600"></i>
                            <span>متخصصون محترفون</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <i class="fas fa-star text-yellow-500"></i>
                            <span>جودة عالية</span>
                        </div>
                    </div>
                </div>
            </div>
            
        </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 style="background: white; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); max-width: 28rem; width: 100%; max-height: 90vh; overflow-y: auto;">
        <div style="position: sticky; top: 0; background: white; border-bottom: 1px solid rgba(229, 115, 147, 0.1); padding: 24px; display: flex; justify-content: space-between; align-items: center;">
            <div>
                <h3 class="text-2xl font-bold text-gray-800">احجز موعدك</h3>
                <p id="modalServiceName" class="text-sm text-gray-500 mt-1"><?php echo htmlspecialchars($service['name']); ?></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" value="<?php echo $service['id']; ?>">
            
            <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>
                
                <?php if (!empty($branches)): ?>
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">الفرع *</label>
                    <select name="branch_id" 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>
                        <?php foreach ($branches as $branch): ?>
                        <option value="<?php echo $branch['id']; ?>">
                            <?php echo htmlspecialchars($branch['name']); ?>
                        </option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <?php endif; ?>
                
                <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>
function openBookingModal(serviceId, serviceName) {
    <?php if (!isset($_SESSION['user_id'])): ?>
        alert('يجب تسجيل الدخول أولاً لحجز موعد');
        window.location.href = 'login.php?redirect=service-detail&id=<?php echo $service_id; ?>';
        return;
    <?php endif; ?>
    
    document.getElementById('bookingModal').classList.remove('hidden');
}

function closeBookingModal() {
    document.getElementById('bookingModal').classList.add('hidden');
}

document.getElementById('bookingModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeBookingModal();
    }
});

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>

</body>
</html>
