Blame for booking.html

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>حجز خدمة - Shine & Go</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');
        body {
            font-family: 'Tajawal', sans-serif;
        }
        .flatpickr-calendar {
            font-family: 'Tajawal', sans-serif;
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <nav class="bg-white shadow-lg">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex justify-between items-center h-20">
                <div class="flex items-center">
                    <a href="index.html">
                        <i data-feather="droplet" class="text-blue-600 w-8 h-8"></i>
                        <span class="text-xl font-bold text-blue-600 mr-2">Shine & Go</span>
                    </a>
                </div>
                <div class="hidden md:flex space-x-1 space-x-reverse">
                    <a href="index.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50">الرئيسية</a>
                    <a href="index.html#services" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50">خدماتنا</a>
                    <a href="index.html#pricing" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50">الأسعار</a>
                    <a href="booking.html" class="px-3 py-2 rounded-md text-sm font-medium text-blue-600 bg-blue-50">حجز خدمة</a>
                </div>
                <div class="md:hidden">
                    <button class="mobile-menu-button p-2 rounded-md text-gray-700 hover:text-blue-600 hover:bg-blue-50">
                        <i data-feather="menu"></i>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <div class="container mx-auto px-4 py-12 max-w-4xl">
        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
            <div class="bg-blue-600 text-white p-6">
                <h1 class="text-2xl font-bold">حجز خدمة غسيل السيارات</h1>
                <p class="mt-2 opacity-90">املأ النموذج أدناه لحجز موعدك</p>
            </div>

            <div class="p-6 md:p-8">
                <form id="bookingForm">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Personal Info -->
                        <div class="md:col-span-2">
                            <h2 class="text-xl font-semibold mb-4 border-b pb-2">المعلومات الشخصية</h2>
                        </div>
                        <div>
                            <label class="block text-gray-700 mb-2">الاسم الكامل</label>
                            <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" required>
                        </div>
                        <div>
                            <label class="block text-gray-700 mb-2">رقم الجوال</label>
                            <input type="tel" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" required>
                        </div>
                        <div>
                            <label class="block text-gray-700 mb-2">البريد الإلكتروني</label>
                            <input type="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600">
                        </div>

                        <!-- Vehicle Info -->
                        <div class="md:col-span-2 mt-6">
                            <h2 class="text-xl font-semibold mb-4 border-b pb-2">معلومات المركبة</h2>
                        </div>
                        <div>
                            <label class="block text-gray-700 mb-2">نوع المركبة</label>
                            <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" required>
                                <option value="">اختر نوع المركبة</option>
                                <option value="sedan">سيارة صغيرة</option>
                                <option value="suv">سيارة دفع رباعي</option>
                                <option value="truck">شاحنة</option>
                                <option value="luxury">سيارة فاخرة</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-gray-700 mb-2">طراز المركبة</label>
                            <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" required>
                        </div>
                        <div>
                            <label class="block text-gray-700 mb-2">رقم اللوحة</label>
                            <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" required>
                        </div>
                        <div>
                            <label class="block text-gray-700 mb-2">لون المركبة</label>
                            <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" required>
                        </div>

                        <!-- Service Selection -->
                        <div class="md:col-span-2 mt-6">
                            <h2 class="text-xl font-semibold mb-4 border-b pb-2">اختر الخدمة</h2>
                        </div>
                        <div class="md:col-span-2 grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div class="service-option bg-gray-50 p-4 rounded-lg border border-gray-200 cursor-pointer hover:border-blue-500 transition-colors">
                                <div class="flex items-center">
                                    <input type="radio" name="service" id="basic" value="basic" class="mr-2" checked>
                                    <label for="basic" class="font-medium">غسيل أساسي</label>
                                </div>
                                <p class="text-gray-600 text-sm mt-2">غسيل خارجي وتنظيف العجلات والزجاج</p>
                                <p class="text-blue-600 font-bold mt-2">30 ريال</p>
                            </div>
                            <div class="service-option bg-gray-50 p-4 rounded-lg border border-gray-200 cursor-pointer hover:border-blue-500 transition-colors">
                                <div class="flex items-center">
                                    <input type="radio" name="service" id="premium" value="premium" class="mr-2">
                                    <label for="premium" class="font-medium">غسيل مميز</label>
                                </div>
                                <p class="text-gray-600 text-sm mt-2">يشمل الأساسي مع شفط الداخلية</p>
                                <p class="text-blue-600 font-bold mt-2">60 ريال</p>
                            </div>
                            <div class="service-option bg-gray-50 p-4 rounded-lg border border-gray-200 cursor-pointer hover:border-blue-500 transition-colors">
                                <div class="flex items-center">
                                    <input type="radio" name="service" id="full" value="full" class="mr-2">
                                    <label for="full" class="font-medium">تفصيل كامل</label>
                                </div>
                                <p class="text-gray-600 text-sm mt-2">تنظيف كامل مع شمع وتلميع</p>
                                <p class="text-blue-600 font-bold mt-2">150 ريال</p>
                            </div>
                        </div>

                        <!-- Date & Time -->
                        <div class="md:col-span-2 mt-6">
                            <h2 class="text-xl font-semibold mb-4 border-b pb-2">الموعد</h2>
                        </div>
                        <div>
                            <label class="block text-gray-700 mb-2">التاريخ</label>
                            <input type="text" id="datePicker" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" placeholder="اختر التاريخ" required>
                        </div>
                        <div>
                            <label class="block text-gray-700 mb-2">الوقت</label>
                            <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" required>
                                <option value="">اختر الوقت</option>
                                <option value="08:00">8:00 ص</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>
                            </select>
                        </div>

                        <!-- Location -->
                        <div class="md:col-span-2 mt-6">
                            <h2 class="text-xl font-semibold mb-4 border-b pb-2">الموقع</h2>
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-gray-700 mb-2">اختر الفرع</label>
                            <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" required>
                                <option value="">اختر الفرع</option>
                                <option value="north">الفرع الشمالي - الرياض</option>
                                <option value="south">الفرع الجنوبي - الرياض</option>
                                <option value="east">الفرع الشرقي - الرياض</option>
                                <option value="west">الفرع الغربي - الرياض</option>
                            </select>
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-gray-700 mb-2">ملاحظات إضافية (اختياري)</label>
                            <textarea rows="3" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"></textarea>
                        </div>
                    </div>

                    <div class="mt-8">
                        <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg shadow-md font-medium text-lg">
                            تأكيد الحجز
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <footer class="bg-gray-800 text-white py-8 mt-12">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="flex items-center mb-4 md:mb-0">
                    <i data-feather="droplet" class="text-blue-400 w-6 h-6"></i>
                    <span class="text-xl font-bold text-blue-400 mr-2">Shine & Go</span>
                </div>
                <div class="text-gray-400 text-sm">
                    © 2023 جميع الحقوق محفوظة
                </div>
            </div>
        </div>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            feather.replace();

            // Initialize date picker
            flatpickr("#datePicker", {
                minDate: "today",
                dateFormat: "Y-m-d",
                locale: "ar"
            });

            // Service option selection
            document.querySelectorAll('.service-option').forEach(option => {
                option.addEventListener('click', function() {
                    document.querySelectorAll('.service-option').forEach(opt => {
                        opt.classList.remove('border-blue-500', 'bg-blue-50');
                    });
                    this.classList.add('border-blue-500', 'bg-blue-50');
                    const radio = this.querySelector('input[type="radio"]');
                    radio.checked = true;
                });
            });

            // Form submission
            document.getElementById('bookingForm').addEventListener('submit', function(e) {
                e.preventDefault();
                alert('تم استلام طلب الحجز بنجاح! سنتصل بك لتأكيد الموعد.');
                this.reset();
            });
        });
    </script>
</body>
</html>