@extends('layouts.landing')

@section('title', 'سمارت كير - الرعاية الصحية الذكية')

@section('content')
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light navbar-landing fixed-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">
            <img src="{{ asset('assets/images/logo.png') }}" alt="Smart Care Logo" class="navbar-logo" width="40" height="40">
            <span class="fw-bold" style="color: #78be20">عيادات سمارت كير </span>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarLanding" aria-controls="navbarLanding" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarLanding">
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link" href="#home">الرئيسية</a>
                </li>
                <!-- Removed facilities navigation item -->
                <li class="nav-item">
                    <a class="nav-link" href="#features">خدماتنا</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#doctors">الأطباء</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">اتصل بنا</a>
                </li>
                <li class="nav-item">
                    <a class="btn btn-primary btn-sm rounded-pill px-3 ms-2" href="{{ route('login') }}">تسجيل الدخول</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- Hero Section -->
<section id="home" class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 hero-content" data-aos="fade-right" data-aos-delay="100">
                <h1 class="hero-title">رعاية صحية ذكية<br>لحياة أفضل</h1>
                <p class="hero-subtitle">نقدم لك أفضل خدمات الرعاية الصحية بأحدث التقنيات وأمهر الأطباء</p>
                <div class="d-flex flex-wrap gap-3">
                    <a href="{{ route('patient.login') }}" class="btn btn-landing btn-primary-landing">احجز موعدك الآن</a>
                    <button type="button" class="btn btn-landing btn-outline-landing" data-bs-toggle="modal" data-bs-target="#quickBookingModal">حجز سريع بدون تسجيل</button>
                    <button type="button" class="btn btn-landing btn-outline-landing" data-bs-toggle="modal" data-bs-target="#appointmentStatusModal">
                        <i class="fas fa-search me-2"></i>تحقق من حالة موعدك
                    </button>
                    <a href="#contact" class="btn btn-landing btn-outline-landing">تواصل معنا</a>
                </div>
            </div>
            <div class="col-lg-6" data-aos="fade-left" data-aos-delay="300">
                <!-- Image Slider -->
                <div id="heroImageSlider" class="carousel slide" data-bs-ride="carousel">
                    <div class="carousel-indicators">
                        <button type="button" data-bs-target="#heroImageSlider" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                        <button type="button" data-bs-target="#heroImageSlider" data-bs-slide-to="1" aria-label="Slide 2"></button>
                        <button type="button" data-bs-target="#heroImageSlider" data-bs-slide-to="2" aria-label="Slide 3"></button>
                    </div>
                    <div class="carousel-inner rounded-4 shadow-lg">
                        <div class="carousel-item active">
                            <img src="{{ asset('assets/images/hero1.jpg') }}" class="d-block w-100" alt="luxor landmark" style="max-height: 800px; object-fit: cover;">
                        </div>
                        <div class="carousel-item">
                            <img src="{{ asset('assets/images/hero2.jpg') }}" class="d-block w-100" alt="smart booking system" style="max-height: 800px; object-fit: cover;">
                        </div>
                        <div class="carousel-item">
                            <img src="{{ asset('assets/images/hero3.png') }}" class="d-block w-100" alt="Healthcare protection" style="max-height: 800px; object-fit: cover;">
                        </div>
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#heroImageSlider" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">السابق</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#heroImageSlider" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">التالي</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</section>


<!-- END OF SECTION TO DELETE -->

<!-- Features Section -->
<section id="features" class="section bg-light">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="section-title" data-aos="fade-up">خدماتنا المميزة</h2>
            <p class="text-muted" data-aos="fade-up" data-aos-delay="100">نقدم مجموعة متكاملة من الخدمات الطبية لرعايتك وراحتك</p>
        </div>
        
        <div class="row g-4">
            <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="100">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-user-md"></i>
                    </div>
                    <h4>أطباء متخصصون</h4>
                    <p class="text-muted">فريق من أمهر الأطباء المتخصصين في مختلف المجالات الطبية لتقديم أفضل رعاية لك</p>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="200">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-calendar-check"></i>
                    </div>
                    <h4>حجز المواعيد أونلاين</h4>
                    <p class="text-muted">احجز موعدك بسهولة عبر الإنترنت واختر الوقت المناسب لك دون الحاجة للانتظار</p>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-heartbeat"></i>
                    </div>
                    <h4>رعاية متكاملة</h4>
                    <p class="text-muted">نقدم رعاية صحية شاملة تلبي جميع احتياجاتك الطبية تحت سقف واحد</p>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="400">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-file-medical-alt"></i>
                    </div>
                    <h4>سجلات طبية إلكترونية</h4>
                    <p class="text-muted">نظام متكامل للسجلات الطبية الإلكترونية يضمن دقة المعلومات وسهولة الوصول إليها</p>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="500">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-microscope"></i>
                    </div>
                    <h4>مختبرات متطورة</h4>
                    <p class="text-muted">مختبرات مجهزة بأحدث التقنيات لإجراء التحاليل والفحوصات بدقة عالية وسرعة في النتائج</p>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="600">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-headset"></i>
                    </div>
                    <h4>خدمة عملاء متميزة</h4>
                    <p class="text-muted">فريق خدمة عملاء محترف متاح على مدار الساعة للرد على استفساراتكم وتلبية احتياجاتكم</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Doctors Section -->
<section id="doctors" class="section">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="section-title" data-aos="fade-up">فريقنا الطبي</h2>
            <p class="text-muted" data-aos="fade-up" data-aos-delay="100">نخبة من أفضل الأطباء والاستشاريين في مختلف التخصصات</p>
        </div>
        
        <div class="row g-4">
            <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="100">
                <div class="card h-100 border-0 shadow-sm">
                    <img src="https://img.freepik.com/free-photo/doctor-with-his-arms-crossed-white-background_1368-5790.jpg" class="card-img-top" alt="Doctor">
                    <div class="card-body text-center">
                        <h5 class="card-title">د. أحمد محمد</h5>
                        <p class="text-primary">استشاري القلب</p>
                        <p class="card-text small text-muted">خبرة أكثر من 15 عامًا في علاج أمراض القلب والشرايين</p>
                        <div class="d-flex justify-content-center gap-2">
                            <a href="#" class="btn btn-sm btn-outline-primary rounded-circle"><i class="fab fa-facebook-f"></i></a>
                            <a href="#" class="btn btn-sm btn-outline-primary rounded-circle"><i class="fab fa-twitter"></i></a>
                            <a href="#" class="btn btn-sm btn-outline-primary rounded-circle"><i class="fab fa-linkedin-in"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
                <div class="card h-100 border-0 shadow-sm">
                    <img src="https://img.freepik.com/free-photo/woman-doctor-wearing-lab-coat-with-stethoscope-isolated_1303-29791.jpg" class="card-img-top" alt="Doctor">
                    <div class="card-body text-center">
                        <h5 class="card-title">د. سارة أحمد</h5>
                        <p class="text-primary">استشاري الأطفال</p>
                        <p class="card-text small text-muted">متخصصة في طب الأطفال وحديثي الولادة بخبرة 10 سنوات</p>
                        <div class="d-flex justify-content-center gap-2">
                            <a href="#" class="btn btn-sm btn-outline-primary rounded-circle"><i class="fab fa-facebook-f"></i></a>
                            <a href="#" class="btn btn-sm btn-outline-primary rounded-circle"><i class="fab fa-twitter"></i></a>
                            <a href="#" class="btn btn-sm btn-outline-primary rounded-circle"><i class="fab fa-linkedin-in"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="300">
                <div class="card h-100 border-0 shadow-sm">
                    <img src="https://img.freepik.com/free-photo/portrait-smiling-handsome-male-doctor-man_171337-5055.jpg" class="card-img-top" alt="Doctor">
                    <div class="card-body text-center">
                        <h5 class="card-title">د. محمود خالد</h5>
                        <p class="text-primary">جراحة العظام</p>
                        <p class="card-text small text-muted">متخصص في جراحة العظام والمفاصل والإصابات الرياضية</p>
                        <div class="d-flex justify-content-center gap-2">
                            <a href="#" class="btn btn-sm btn-outline-primary rounded-circle"><i class="fab fa-facebook-f"></i></a>
                            <a href="#" class="btn btn-sm btn-outline-primary rounded-circle"><i class="fab fa-twitter"></i></a>
                            <a href="#" class="btn btn-sm btn-outline-primary rounded-circle"><i class="fab fa-linkedin-in"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="400">
                <div class="card h-100 border-0 shadow-sm">
                    <img src="https://img.freepik.com/free-photo/female-doctor-hospital-with-stethoscope_23-2148827775.jpg" class="card-img-top" alt="Doctor">
                    <div class="card-body text-center">
                        <h5 class="card-title">د. نورا سامي</h5>
                        <p class="text-primary">طب الأسنان</p>
                        <p class="card-text small text-muted">متخصصة في تجميل وعلاج الأسنان بأحدث التقنيات العالمية</p>
                        <div class="d-flex justify-content-center gap-2">
                            <a href="#" class="btn btn-sm btn-outline-primary rounded-circle"><i class="fab fa-facebook-f"></i></a>
                            <a href="#" class="btn btn-sm btn-outline-primary rounded-circle"><i class="fab fa-twitter"></i></a>
                            <a href="#" class="btn btn-sm btn-outline-primary rounded-circle"><i class="fab fa-linkedin-in"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>



<!-- CTA Section -->
<section class="cta-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8 mb-4 mb-lg-0" data-aos="fade-right">
                <h2 class="mb-3">هل تحتاج إلى استشارة طبية؟</h2>
                <p class="lead mb-0">احجز موعدك الآن واحصل على رعاية صحية متميزة من أفضل الأطباء</p>
            </div>
            <div class="col-lg-4 text-lg-end" data-aos="fade-left">
                <a href="{{ route('patient.login') }}" class="btn btn-landing btn-primary-landing">احجز موعدك الآن</a>
            </div>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section id="contact" class="section">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="section-title" data-aos="fade-up">اتصل بنا</h2>
            <p class="text-muted" data-aos="fade-up" data-aos-delay="100">نحن هنا للإجابة على استفساراتك ومساعدتك</p>
        </div>
        
        <div class="row g-4">
            <div class="col-lg-6" data-aos="fade-right">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body p-4">
                        <h4 class="mb-4">معلومات التواصل</h4>
                        
                        <div class="d-flex mb-4">
                            <div class="flex-shrink-0">
                                <div class="bg-primary bg-opacity-10 p-3 rounded-circle text-primary">
                                    <i class="fas fa-map-marker-alt"></i>
                                </div>
                            </div>
                            <div class="ms-3">
                                <h5>العنوان</h5>
                                <p class="text-muted mb-0">ألاقصر - شارع أحمد عرابى - بجوار موقف ارمنت</p>
                            </div>
                        </div>
                        
                        <div class="d-flex mb-4">
                            <div class="flex-shrink-0">
                                <div class="bg-primary bg-opacity-10 p-3 rounded-circle text-primary">
                                    <i class="fas fa-phone-alt"></i>
                                </div>
                            </div>
                            <div class="ms-3">
                                <h5>الهاتف</h5>
                                <p class="text-muted mb-0">01550314129</p>
                            </div>
                        </div>
                        
                        <div class="d-flex">
                            <div class="flex-shrink-0">
                                <div class="bg-primary bg-opacity-10 p-3 rounded-circle text-primary">
                                    <i class="fas fa-envelope"></i>
                                </div>
                            </div>
                            <div class="ms-3">
                                <h5>البريد الإلكتروني</h5>
                                <p class="text-muted mb-0">info@smartcare.com</p>
                                <p class="text-muted mb-0">support@smartcare.com</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-6" data-aos="fade-left">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body p-4">
                        <h4 class="mb-4">أرسل رسالة</h4>
                        <form>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="name" class="form-label">الاسم</label>
                                    <input type="text" class="form-control" id="name" placeholder="أدخل اسمك">
                                </div>
                                <div class="col-md-6">
                                    <label for="email" class="form-label">البريد الإلكتروني</label>
                                    <input type="email" class="form-control" id="email" placeholder="أدخل بريدك الإلكتروني">
                                </div>
                                <div class="col-12">
                                    <label for="subject" class="form-label">الموضوع</label>
                                    <input type="text" class="form-control" id="subject" placeholder="أدخل موضوع الرسالة">
                                </div>
                                <div class="col-12">
                                    <label for="message" class="form-label">الرسالة</label>
                                    <textarea class="form-control" id="message" rows="5" placeholder="اكتب رسالتك هنا"></textarea>
                                </div>
                                <div class="col-12">
                                    <button type="submit" class="btn btn-primary">إرسال الرسالة</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Footer -->
<footer class="footer">
    <div class="container">
        <div class="row g-4">
            <div class="col-lg-4 col-md-6">
                <h4 class="footer-title">عيادات سمارت كير التخصصية</h4>
                <p>جميع التخصصات الطبية في مكان واحد.</p>
                <div class="mt-4">
                    <a href="#" class="social-icon"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
                    <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
                    <a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>
            
            <div class="col-lg-2 col-md-6">
                <h4 class="footer-title">روابط سريعة</h4>
                <ul class="list-unstyled">
                    <li><a href="#home" class="footer-link">الرئيسية</a></li>
                    <li><a href="#features" class="footer-link">خدماتنا</a></li>
                    <li><a href="#doctors" class="footer-link">الأطباء</a></li>
                    <li><a href="#contact" class="footer-link">اتصل بنا</a></li>
                </ul>
            </div>
            
            <div class="col-lg-3 col-md-6">
                <h4 class="footer-title">الخدمات</h4>
                <ul class="list-unstyled">
                    <li><a href="#" class="footer-link">الاستشارات الطبية</a></li>
                    <li><a href="#" class="footer-link">الفحوصات الشاملة</a></li>
                    <li><a href="#" class="footer-link">العمليات الجراحية</a></li>
                    <li><a href="#" class="footer-link">طب الأسنان</a></li>
                    <li><a href="#" class="footer-link">الأشعة والتصوير</a></li>
                </ul>
            </div>
            
            <div class="col-lg-3 col-md-6">
                <h4 class="footer-title">ساعات العمل</h4>
                <ul class="list-unstyled">
                    <li class="d-flex justify-content-between mb-2">
                        <span>السبت - الخميس:</span>
                        <span>8:00 ص - 12:00 م</span>
                    </li>
                    <li class="d-flex justify-content-between mb-2">
                        <span>الجمعة:</span>
                        <span>12:00 م - 3:00 م</span>
                    </li>
                 
                    <li class="mt-3">
                        <strong class="text-white">الطوارئ: متاحة 24/7</strong>
                    </li>
                </ul>
            </div>
        </div>
        
        <hr class="mt-4 mb-3 border-secondary">
        
        <div class="row">
            <div class="col-md-6">
                <p class="mb-0">© {{ date('Y') }} عيادات سمارت كير التخصصية - جميع الحقوق محفوظة</p>
            </div>
            <div class="col-md-6 text-md-end">
                <p class="mb-0">تم التطوير بواسطة <a href="https://www.facebook.com/profile.php?id=61577392716732" class="text-white">MostaX</a></p>
            </div>
        </div>
    </div>
</footer>

@section('scripts')
<script>
    // Initialize AOS animations
    AOS.init({
        duration: 800,
        easing: 'ease-in-out',
        once: true
    });
    
    // Initialize carousels with options
    document.addEventListener('DOMContentLoaded', function() {
        // Hero Image Slider
        const heroSlider = new bootstrap.Carousel(document.getElementById('heroImageSlider'), {
            interval: 5000,
            wrap: true,
            touch: true
        });
        

        
        // Add swipe support for touch devices
        const carousels = document.querySelectorAll('.carousel');
        carousels.forEach(carousel => {
            let touchStartX = 0;
            let touchEndX = 0;
            
            carousel.addEventListener('touchstart', e => {
                touchStartX = e.changedTouches[0].screenX;
            }, false);
            
            carousel.addEventListener('touchend', e => {
                touchEndX = e.changedTouches[0].screenX;
                handleSwipe(carousel);
            }, false);
            
            function handleSwipe(element) {
                const carouselInstance = bootstrap.Carousel.getInstance(element);
                if (touchEndX < touchStartX - 50) {
                    // Swipe left, go to next slide
                    carouselInstance.next();
                }
                if (touchEndX > touchStartX + 50) {
                    // Swipe right, go to previous slide
                    carouselInstance.prev();
                }
            }
        });
    });
    
    // Smooth scrolling for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                window.scrollTo({
                    top: target.offsetTop - 80,
                    behavior: 'smooth'
                });
            }
        });
    });
    
    // Add active class to navbar items on scroll
    window.addEventListener('scroll', function() {
        const sections = document.querySelectorAll('section');
        const navLinks = document.querySelectorAll('.navbar-nav .nav-link');
        
        let current = '';
        
        sections.forEach(section => {
            const sectionTop = section.offsetTop - 100;
            const sectionHeight = section.clientHeight;
            if (pageYOffset >= sectionTop && pageYOffset < sectionTop + sectionHeight) {
                current = section.getAttribute('id');
            }
        });
        
        navLinks.forEach(link => {
            link.classList.remove('active');
            if (link.getAttribute('href') === `#${current}`) {
                link.classList.add('active');
            }
        });
    });
</script>

<!-- Quick Booking Modal -->
<div class="modal fade" id="quickBookingModal" tabindex="-1" aria-labelledby="quickBookingModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="quickBookingModalLabel">حجز موعد سريع</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="quickBookingForm" action="{{ route('quick-booking.store') }}" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="patient_name" class="form-label">الاسم الكامل</label>
                            <input type="text" class="form-control" id="patient_name" name="patient_name" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="mobile" class="form-label">رقم الهاتف</label>
                            <input type="tel" class="form-control" id="mobile" name="mobile" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="doctor_id" class="form-label">اختر الطبيب</label>
                            <select class="form-select" id="doctor_id" name="doctor_id" required>
                                <option value="">اختر الطبيب...</option>
                                @foreach($doctors as $doctor)
                                    <option value="{{ $doctor->id }}">{{ $doctor->name }} - {{ $doctor->specialization }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="preferred_date" class="form-label">التاريخ المفضل</label>
                            <input type="date" class="form-control" id="preferred_date" name="preferred_date" min="{{ date('Y-m-d') }}" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="preferred_time" class="form-label">الوقت المفضل</label>
                            <select class="form-control" id="preferred_time" name="preferred_time" required>
                                <option value="">اختر الوقت المفضل</option>
                                <option value="07:00">07:00 صباحاً</option>
                                <option value="07:30">07:30 صباحاً</option>
                                <option value="08:00">08:00 صباحاً</option>
                                <option value="08:30">08:30 صباحاً</option>
                                <option value="09:00">09:00 صباحاً</option>
                                <option value="09:30">09:30 صباحاً</option>
                                <option value="10:00">10:00 صباحاً</option>
                                <option value="10:30">10:30 صباحاً</option>
                                <option value="11:00">11:00 صباحاً</option>
                                <option value="11:30">11:30 صباحاً</option>
                                <option value="12:00">12:00 ظهراً</option>
                                <option value="12:30">12:30 ظهراً</option>
                                <option value="13:00">01:00 ظهراً</option>
                                <option value="13:30">01:30 ظهراً</option>
                                <option value="14:00">02:00 ظهراً</option>
                                <option value="14:30">02:30 ظهراً</option>
                                <option value="15:00">03:00 ظهراً</option>
                                <option value="15:30">03:30 ظهراً</option>
                                <option value="16:00">04:00 ظهراً</option>
                                <option value="16:30">04:30 ظهراً</option>
                                <option value="17:00">05:00 مساءً</option>
                                <option value="17:30">05:30 مساءً</option>
                                <option value="18:00">06:00 مساءً</option>
                                <option value="18:30">06:30 مساءً</option>
                                <option value="19:00">07:00 مساءً</option>
                                <option value="19:30">07:30 مساءً</option>
                                <option value="20:00">08:00 مساءً</option>
                                <option value="20:30">08:30 مساءً</option>
                                <option value="21:00">09:00 مساءً</option>
                                <option value="21:30">09:30 مساءً</option>
                                <option value="22:00">10:00 مساءً</option>
                                <option value="22:30">10:30 مساءً</option>
                                <option value="23:00">11:00 مساءً</option>
                                <option value="23:30">11:30 مساءً</option>
                                <option value="23:50">11:50 مساءً</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="notes" class="form-label">ملاحظات إضافية</label>
                            <textarea class="form-control" id="notes" name="notes" rows="3" placeholder="أي ملاحظات أو تفاصيل إضافية..."></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                <button type="submit" form="quickBookingForm" class="btn btn-primary">إرسال طلب الحجز</button>
            </div>
        </div>
    </div>
</div>

<!-- Appointment Status Modal -->
<div class="modal fade" id="appointmentStatusModal" tabindex="-1" aria-labelledby="appointmentStatusModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="appointmentStatusModalLabel">
                    <i class="fas fa-search me-2"></i>تحقق من حالة موعدك
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-8 mx-auto">
                        <form id="appointmentStatusForm">
                            @csrf
                            <div class="mb-4">
                                <label for="search_mobile" class="form-label">
                                    <i class="fas fa-phone me-2"></i>أدخل رقم الهاتف المحمول
                                </label>
                                <input type="tel" class="form-control form-control-lg" id="search_mobile" name="mobile" 
                                       placeholder="مثال: 01234567890" required>
                                <div class="form-text">أدخل رقم الهاتف المسجل به الموعد</div>
                            </div>
                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="fas fa-search me-2"></i>البحث عن المواعيد
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                
                <!-- Loading Spinner -->
                <div id="statusLoading" class="text-center mt-4" style="display: none;">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">جاري البحث...</span>
                    </div>
                    <p class="mt-2">جاري البحث عن مواعيدك...</p>
                </div>
                
                <!-- Results Container -->
                <div id="statusResults" class="mt-4" style="display: none;">
                    <!-- Results will be populated here -->
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('quickBookingForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    
    fetch(this.action, {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('تم إرسال طلب الحجز بنجاح! سيتم التواصل معك قريباً.');
            document.getElementById('quickBookingModal').querySelector('.btn-close').click();
            document.getElementById('quickBookingForm').reset();
        } else {
            alert('حدث خطأ أثناء إرسال الطلب. يرجى المحاولة مرة أخرى.');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('حدث خطأ أثناء إرسال الطلب. يرجى المحاولة مرة أخرى.');
    });
});

// Appointment Status Form Handler
document.getElementById('appointmentStatusForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const mobile = document.getElementById('search_mobile').value.trim();
    
    if (!mobile) {
        alert('يرجى إدخال رقم الهاتف');
        return;
    }
    
    // Show loading
    document.getElementById('statusLoading').style.display = 'block';
    document.getElementById('statusResults').style.display = 'none';
    
    const formData = new FormData(this);
    
    fetch('{{ route("appointment.status") }}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
        }
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('statusLoading').style.display = 'none';
        
        if (data.success) {
            displayAppointmentResults(data);
        } else {
            displayNoResults(data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        document.getElementById('statusLoading').style.display = 'none';
        displayNoResults('حدث خطأ أثناء البحث. يرجى المحاولة مرة أخرى.');
    });
});

function displayAppointmentResults(data) {
    const resultsContainer = document.getElementById('statusResults');
    let html = `
        <div class="alert alert-success">
            <h6><i class="fas fa-user me-2"></i>مرحباً ${data.patient_name}</h6>
        </div>
    `;
    
    if (data.today_appointments && data.today_appointments.length > 0) {
        html += `
            <div class="card mb-3">
                <div class="card-header bg-primary text-white">
                    <h6 class="mb-0"><i class="fas fa-calendar-day me-2"></i>مواعيد اليوم</h6>
                </div>
                <div class="card-body">
        `;
        
        data.today_appointments.forEach(appointment => {
            const queueText = appointment.queue_position > 0 
                ? `يوجد ${appointment.queue_position} مريضي ينتظر قبلك` 
                : 'دورك الآن!';
            
            const waitTimeText = appointment.estimated_wait_time > 0 
                ? `الانتظار المتوقع: ${appointment.estimated_wait_time} دقيقة` 
                : 'لا يوجد انتظار';
            
            const statusColor = appointment.status === 'في الانتظار' ? 'warning' : 'info';
            
            html += `
                <div class="appointment-card mb-3 p-3 border rounded">
                    <div class="row">
                        <div class="col-md-8">
                            <h6 class="text-primary">د. ${appointment.doctor_name}</h6>
                            <p class="text-muted mb-1">${appointment.doctor_specialization}</p>
                            <p class="mb-1"><i class="fas fa-clock me-2"></i>الموعد: ${appointment.appointment_time}</p>
                            <p class="mb-1"><i class="fas fa-barcode me-2"></i>رقم الحجز: ${appointment.booking_reference}</p>
                        </div>
                        <div class="col-md-4 text-end">
                            <span class="badge bg-${statusColor} mb-2">${appointment.status}</span>
                            <div class="queue-info">
                                <div class="text-primary fw-bold">${queueText}</div>
                                <small class="text-muted">${waitTimeText}</small>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        });
        
        html += `
                </div>
            </div>
        `;
    }
    
    if (data.upcoming_appointments && data.upcoming_appointments.length > 0) {
        html += `
            <div class="card">
                <div class="card-header bg-info text-white">
                    <h6 class="mb-0"><i class="fas fa-calendar-alt me-2"></i>المواعيد القادمة</h6>
                </div>
                <div class="card-body">
        `;
        
        data.upcoming_appointments.forEach(appointment => {
            html += `
                <div class="appointment-card mb-3 p-3 border rounded">
                    <div class="row">
                        <div class="col-md-8">
                            <h6 class="text-primary">د. ${appointment.doctor_name}</h6>
                            <p class="text-muted mb-1">${appointment.doctor_specialization}</p>
                            <p class="mb-1"><i class="fas fa-calendar me-2"></i>التاريخ: ${appointment.appointment_date_formatted}</p>
                            <p class="mb-1"><i class="fas fa-clock me-2"></i>الوقت: ${appointment.appointment_time}</p>
                            <p class="mb-1"><i class="fas fa-barcode me-2"></i>رقم الحجز: ${appointment.booking_reference}</p>
                        </div>
                        <div class="col-md-4 text-end">
                            <span class="badge bg-success">${appointment.status}</span>
                        </div>
                    </div>
                </div>
            `;
        });
        
        html += `
                </div>
            </div>
        `;
    }
    
    if (!data.has_appointments) {
        html += `
            <div class="alert alert-info">
                <i class="fas fa-info-circle me-2"></i>لا توجد مواعيد مؤكدة لهذا الرقم في الوقت الحالي.
            </div>
        `;
    }
    
    resultsContainer.innerHTML = html;
    resultsContainer.style.display = 'block';
}

function displayNoResults(message) {
    const resultsContainer = document.getElementById('statusResults');
    resultsContainer.innerHTML = `
        <div class="alert alert-warning">
            <i class="fas fa-exclamation-triangle me-2"></i>${message}
        </div>
    `;
    resultsContainer.style.display = 'block';
}

// Reset modal when closed
document.getElementById('appointmentStatusModal').addEventListener('hidden.bs.modal', function() {
    document.getElementById('appointmentStatusForm').reset();
    document.getElementById('statusLoading').style.display = 'none';
    document.getElementById('statusResults').style.display = 'none';
});
</script>
@endsection