@extends('layout.app')

@section('title', 'Home Page')

@section('content')
    <!-- Hero section with layer parallax gfx -->
<!-- اضافة بعض التنسيق للانتقال -->
<style>
  /* إخفاء العناصر بشكل افتراضي */
  #slider-content .slider-item,
  #slider-image .slider-img {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  /* اظهار العنصر النشط */
  #slider-content .slider-item.active,
  #slider-image .slider-img.active {
    display: block;
    opacity: 1;
  }
</style>

<!-- CSS: تثبيت حجم القسم وتأثير التلاشي ونقاط التنقل -->
<style>
  /* إعداد منطقة السلايدر كاملًا */
  #full-slider {
    position: relative;
    overflow: hidden;
  }
  /* كل شريحة تظهر فوق بعضها مع تأثير تلاشي */
  .full-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
  }
  .full-slide.active {
    opacity: 1;
    position: relative;
  }
  /* لضبط ارتفاع المنطقة إذا رغبت */
  #full-slider .slide-inner {
    min-height: 500px; /* يمكن تعديلها حسب التصميم */
  }
  /* نقاط التنقل */
  .slider-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
  }
  .slider-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.3);
    cursor: pointer;
  }
  .slider-dots .dot.active {
    background-color: #007bff;
  }
</style>

<!-- CSS: تثبيت حجم القسم وتأثير التلاشي ونقاط التنقل -->
<style>
  #full-slider {
    position: relative;
    overflow: hidden;
  }
  .full-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
  }
  .full-slide.active {
    opacity: 1;
    position: relative;
  }
  /* نقاط التنقل */
  .slider-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
  }
  .slider-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.3);
    cursor: pointer;
  }
  .slider-dots .dot.active {
    background-color: #007bff;
  }
  .start-50 {
    left: 22% !important;
}
.top-50 {
    top: 79% !important;
}
</style>

<!-- HTML: قسم السلايدر كامل المحتوى مع الفورم داخل كل شريحة -->
      <!-- Hero -->
      <section class="dark-mode position-relative jarallax pb-xl-3" data-jarallax data-speed="0.4">

        <!-- Parallax img -->
        <div class="jarallax-img bg-dark opacity-70" style="background-image: url('{{ asset('assets/img/landing/online-courses/2149178680 (1).jpg') }}');"></div>


        <!-- Overlay bg -->
        <span class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-70 zindex-1"></span>

        <!-- Overlay content -->
        <div class="container position-relative pb-5 zindex-5">

          

         <!-- Featured Educational Section -->
<div class="row mb-xxl-5 py-md-4 py-lg-5">
  <div class="col-lg-6 col-md-7 pb-3 pb-md-0 mb-4 mb-md-5">
    <div class="mb-3 fs-lg text-light">
      {{ __("home.learn_with_us") }}
    </div>
    <h1 class="display-5 pb-md-3">{{ __("home.learn_online") }}</h1>
    <div class="d-flex flex-wrap mb-md-5 mb-4 pb-md-2 text-white">
      <div class="border-end border-light h-100 mb-2 pe-3 me-3">
        <span class="badge bg-faded-light fs-base">{{ __("home.top_courses") }}</span>
      </div>
      <div class="d-flex align-items-center mb-2 text-nowrap">
        <div class="d-flex align-items-center me-3 opacity-70">
          <i class="bx bx-book-reader fs-lg me-1"></i>
          <span class="fs-sm">{{ __("home.students_count", ['count' => 1500]) }}</span>
        </div>
        <div class="d-flex align-items-center me-3 opacity-70">
          <i class="bx bx-comment-dots fs-lg me-1"></i>
          <span class="fs-sm">{{ __("home.comments_count", ['count' => 320]) }}</span>
        </div>
        
      </div>
    </div>
    
<div class="d-flex">
 <a href="javascript:void(0);" class="btn btn-primary btn-sm  me-3" onclick="scrollToCourses()">
  {{ __("home.explore_courses") }}
  <i class="bx bx-chevron-right ms-2 me-n1 lead"></i>
</a>

<script>
  function scrollToCourses() {
      console.log("fggs")
    // تحديد القسم الذي يحتوي على المعرف "courses"
    const coursesSection = document.getElementById('coursesss');
    
    // استخدام window.scrollTo للتمرير إلى القسم
    window.scrollTo({
      top: coursesSection.offsetTop,  // الموضع العلوي للقسم
      behavior: 'smooth'  // تمكين التمرير السلس
    });
  }
</script>

  <a href="{{ route('page.register') }}" class="btn btn-primary btn-sm px-2 py-1">
    {{ __('home.join_us') }}
    <i class="bx bx-chevron-right ms-2 me-n1 lead"></i>
  </a>
</div>

   
  </div>

  <!-- Add a courses slider or featured images here -->
</div>

        </div>
      </section>
<!-- JavaScript for Slide Transitions -->
<script>
  document.addEventListener("DOMContentLoaded", function() {
    const notification = document.getElementById('notification');
    if (notification) {
      setTimeout(() => { notification.style.display = 'none'; }, 20000);
    }
    
    let currentIndex = 0;
    const slides = document.querySelectorAll('.full-slide');
    const dots = document.querySelectorAll('#slider-dots .dot');
    const totalSlides = slides.length;
    
    function showSlide(index) {
      slides.forEach(slide => slide.classList.remove('active'));
      dots.forEach(dot => dot.classList.remove('active'));
      
      slides[index].classList.add('active');
      dots[index].classList.add('active');
      currentIndex = index;
    }
    
    let sliderInterval = setInterval(() => {
      let nextIndex = (currentIndex + 1) % totalSlides;
      showSlide(nextIndex);
    }, 5000);
    
    dots.forEach(dot => {
      dot.addEventListener('click', function() {
        clearInterval(sliderInterval);
        let index = parseInt(this.getAttribute('data-index'));
        showSlide(index);
        sliderInterval = setInterval(() => {
          let nextIndex = (currentIndex + 1) % totalSlides;
          showSlide(nextIndex);
        }, 5000);
      });
    });
  });
</script>


      <!-- Popular courses -->
      <section class="container mt-2 mt-sm-3 py-md-3 py-lg-5">
        <div class="row py-5"  id="coursesss">
          <div class="col-lg-3 col-md-4"  style="display: flex;flex-direction: column;justify-content: center;">

            <!-- Nav tabs -->
            <ul class="nav nav-tabs flex-nowrap overflow-auto flex-md-column pb-2 pb-md-0 mb-3 mb-md-5" role="tablist">
                <li class="nav-item">
                  <a href="#" id="american-tab" class="nav-link nav-linksub d-inline-block text-nowrap active" role="tab" aria-selected="true">{{ __('home.american') }}</a>
                </li>
                <li class="nav-item">
                  <a href="#" id="british-tab" class="nav-link d-inline-block text-nowrap" role="tab" aria-selected="false">{{ __('home.british') }}</a>
                </li>
                <li class="nav-item">
                  <a href="#" id="masry-tab" class="nav-link d-inline-block text-nowrap" role="tab" aria-selected="false">{{ __('home.egyptian_curriculum') }}</a>
                </li>
                <li class="nav-item">
                  <a href="#" id="quran-tab" class="nav-link d-inline-block text-nowrap" role="tab" aria-selected="false">{{ __('home.quran') }}</a>
                </li>
              </ul>
            
          </div>
          <div class="col-lg-9 col-md-8">

            <!-- Title + prev/next buttons -->
            <div class="d-flex align-items-center justify-content-between pb-4 mb-3">
              <h2 class="h1 mb-0 me-3">{{ __('home.all_subjects') }}</h2>
              <div class="d-flex">
                <button type="button" id="popular-prev" class="btn btn-prev btn-icon btn-sm me-2">
                  <i class="bx bx-chevron-left"></i>
                </button>
                <button type="button" id="popular-next" class="btn btn-next btn-icon btn-sm ms-2">
                  <i class="bx bx-chevron-right"></i>
                </button>
              </div>
            </div>

            <div id="american-courses" class="courses-category active-category">
                 <!-- Courses slider -->
                <div class="swiper swiper-nav-onhover mx-n2" data-swiper-options='{
                    "slidesPerView": 1,
                    "spaceBetween": 8,
                    "pagination": {
                    "el": ".swiper-pagination",
                    "clickable": true
                    },
                    "navigation": {
                    "prevEl": "#popular-prev",
                    "nextEl": "#popular-next"
                    },
                    "breakpoints": {
                    "560": {
                        "slidesPerView": 2
                    },
                    "768": {
                        "slidesPerView": 1
                    },
                    "850": {
                        "slidesPerView": 2
                    },
                    "1200": {
                        "slidesPerView": 3
                    }
                    }
                }'>
                
                    <div class="swiper-wrapper">
                      @php
                        $filteredCourses = [];
                        
                        foreach ($courses as $course) {
                            if($course['system'] !== 'American') {
                                continue;
                            }
                            
                            // فصل نطاق الدرجة
                            $gradeParts = explode('-', $course['grade_range']);
                            if(count($gradeParts) >= 2) {
                                $min_grade = (int)$gradeParts[0];
                                $max_grade = (int)$gradeParts[1];
                            } else {
                                // في حال عدم توفر قيمتين، يمكن تعيين قيم افتراضية أو تخطي الكورس
                                $min_grade = 0;
                                $max_grade = 0;
                            }

                            // التحقق من شرط تسجيل المستخدم والدرجة
                            if (!auth()->check() ||auth()->user()->role=='admin' || auth()->user()->role=='teacher' || (auth()->check() && auth()->user()->student->grade_level >= $min_grade && auth()->user()->student->grade_level <= $max_grade)) {
                                $filteredCourses[] = $course;
                            }
                            // dd(auth()->user()->student->grade_level);

                        }

                    @endphp

                    @if (empty($filteredCourses))
                        <div class="alert alert-info" style="text-align: center; margin-top: 20px;">
                            {{ __('home.no_courses_available') }}
                        </div>
                    @else

                      @foreach($filteredCourses as $course)
                     
                  
             
                    <div class="swiper-slide h-auto pb-3">
                        <article class="card h-100 border-0 shadow-sm mx-2">
                        <div class="position-relative">
                          <a href="#" class="d-block position-absolute w-100 h-100 top-0 start-0" onclick="checkRegistration('{{ route('coursePage',['teacherId'=>$course['teacher_id'],'courseId'=>$course['id']]) }}')"></a>                            
<img src="{{ $course['course_img'] ? asset('public/storage/' . $course['course_img']) : 'https://png.pngtree.com/thumb_back/fh260/background/20220712/pngtree-back-to-school-items-with-copy-space-start-term-schooling-photo-image_8648894.jpg' }}" class="card-img-top" alt="Image">
                        </div>
                        <div class="card-body pb-3">
                            <h3 class="h5 mb-2">
                              <a href="#" onclick="checkRegistration('{{ route('coursePage',['teacherId'=>$course['teacher_id'],'courseId'=>$course['id']]) }}')">{{$course['name']}}</a>
                            </h3>
                            <p class="fs-sm mb-2">
    <a href="{{ isset($course['teacher_id']) ? route('teacher.page', ['id' => $course['teacher_id']]) : '#' }}">
        {{ $course['teacher_name'] ?? 'Not Available' }}
    </a>
</p>

                                                      
                          <p class="fs-lg fw-semibold text-primary mb-0">{{$course['description']}}</p>
                        </div>
                        <div class="card-footer d-flex align-items-center fs-sm text-muted py-4">
                            {{-- <div class="d-flex align-items-center me-4">
                            <i class="bx bx-time fs-xl me-1"></i>
                            4 hours
                            </div> --}}
                            
                        </div>
                        </article>
                    </div>
                    @endforeach
                    @endif
                    </div>
    
                    <!-- Pagination (bullets) -->
                    <div class="swiper-pagination position-relative pt-2 pt-sm-3 mt-4"></div>
                </div>
            </div>
            
            <div id="british-courses" class="courses-category active-category">
    <!-- Courses slider -->
    <div class="swiper swiper-nav-onhover mx-n2" data-swiper-options='{
        "slidesPerView": 1,
        "spaceBetween": 8,
        "pagination": {
        "el": ".swiper-pagination",
        "clickable": true
        },
        "navigation": {
        "prevEl": "#popular-prev",
        "nextEl": "#popular-next"
        },
        "breakpoints": {
        "560": {
            "slidesPerView": 2
        },
        "768": {
            "slidesPerView": 1
        },
        "850": {
            "slidesPerView": 2
        },
        "1200": {
            "slidesPerView": 3
        }
        }
    }'>
    
    <div class="swiper-wrapper">
        @php
            $filteredCoursesBritish = [];
            
            foreach ($courses as $course) {
                // التأكد من نظام "British"
                if($course['system'] !== 'British') {
                    continue;
                }
                
                // فصل نطاق الدرجة
                $gradeParts = explode('-', $course['grade_range']);
                if(count($gradeParts) >= 2) {
                    $min_grade = (int)$gradeParts[0];
                    $max_grade = (int)$gradeParts[1];
                } else {
                    // في حال عدم توفر قيمتين، يمكن تعيين قيم افتراضية أو تخطي الكورس
                    $min_grade = 0;
                    $max_grade = 0;
                }

                // التحقق من شرط تسجيل المستخدم والدرجة
                if (!auth()->check() || auth()->user()->role == 'admin' || auth()->user()->role == 'teacher' || (auth()->check() && auth()->user()->student->grade_level >= $min_grade && auth()->user()->student->grade_level <= $max_grade)) {
                    $filteredCoursesBritish[] = $course;
                }
            }
        @endphp

        @if (empty($filteredCoursesBritish))
            <div class="alert alert-info" style="text-align: center; margin-top: 20px;">
                {{__('home.no_courses_available') }}
            </div>
        @else
            @foreach($filteredCoursesBritish as $course)
                <div class="swiper-slide h-auto pb-3">
                    <article class="card h-100 border-0 shadow-sm mx-2">
                        <div class="position-relative">
                            <a href="#" class="d-block position-absolute w-100 h-100 top-0 start-0" onclick="checkRegistration('{{ route('coursePage', ['teacherId' => $course['teacher_id'], 'courseId' => $course['id']]) }}')"></a>                            
  <img src="{{ $course['course_img'] ? asset('public/storage/' . $course['course_img']) : 'https://png.pngtree.com/thumb_back/fh260/background/20220712/pngtree-back-to-school-items-with-copy-space-start-term-schooling-photo-image_8648894.jpg' }}" class="card-img-top" alt="Image">
                        </div>
                        <div class="card-body pb-3">
                            <h3 class="h5 mb-2">
                                <a href="#" onclick="checkRegistration('{{ route('coursePage', ['teacherId' => $course['teacher_id'], 'courseId' => $course['id']]) }}')">{{ $course['name'] }}</a>
                            </h3>
                            <p class="fs-sm mb-2">
                                <a href="{{ route('teacher.page', ['id' => $course['teacher_id']]) }}">
                                    {{ $course['teacher_name'] }}
                                </a>
                            </p>
                            <p class="fs-lg fw-semibold text-primary mb-0">{{ $course['description'] }}</p>
                        </div>
                        <div class="card-footer d-flex align-items-center fs-sm text-muted py-4">
                            {{-- <div class="d-flex align-items-center me-4">
                            <i class="bx bx-time fs-xl me-1"></i>
                            4 hours
                            </div> --}}
                        </div>
                    </article>
                </div>
            @endforeach
        @endif
    </div>

    <!-- Pagination (bullets) -->
    <div class="swiper-pagination position-relative pt-2 pt-sm-3 mt-4"></div>
    </div>
</div>

<div id="masry-courses" class="courses-category active-category">
    <!-- Courses slider -->
    <div class="swiper swiper-nav-onhover mx-n2" data-swiper-options='{
        "slidesPerView": 1,
        "spaceBetween": 8,
        "pagination": {
        "el": ".swiper-pagination",
        "clickable": true
        },
        "navigation": {
        "prevEl": "#popular-prev",
        "nextEl": "#popular-next"
        },
        "breakpoints": {
        "560": {
            "slidesPerView": 2
        },
        "768": {
            "slidesPerView": 1
        },
        "850": {
            "slidesPerView": 2
        },
        "1200": {
            "slidesPerView": 3
        }
        }
    }'>
    
    <div class="swiper-wrapper">
        @php
            $filteredCoursesMasry = [];
            
            foreach ($courses as $course) {
                // التأكد من نظام "Masry"
                if($course['system'] !== 'Masry') {
                    continue;
                }
                
                // فصل نطاق الدرجة
                $gradeParts = explode('-', $course['grade_range']);
                if(count($gradeParts) >= 2) {
                    $min_grade = (int)$gradeParts[0];
                    $max_grade = (int)$gradeParts[1];
                } else {
                    // في حال عدم توفر قيمتين، يمكن تعيين قيم افتراضية أو تخطي الكورس
                    $min_grade = 0;
                    $max_grade = 0;
                }

                // التحقق من شرط تسجيل المستخدم والدرجة
                if (!auth()->check() || auth()->user()->role == 'admin' || auth()->user()->role == 'teacher' || (auth()->check() && auth()->user()->student->grade_level >= $min_grade && auth()->user()->student->grade_level <= $max_grade)) {
                    $filteredCoursesMasry[] = $course;
                }
            }
        @endphp

        @if (empty($filteredCoursesMasry))
            <div class="alert alert-info" style="text-align: center; margin-top: 20px;">
                {{__('home.no_courses_available') }}
            </div>
        @else
            @foreach($filteredCoursesMasry as $course)
                <div class="swiper-slide h-auto pb-3">
                    <article class="card h-100 border-0 shadow-sm mx-2">
                        <div class="position-relative">
                            <a href="#" class="d-block position-absolute w-100 h-100 top-0 start-0" onclick="checkRegistration('{{ route('coursePage', ['teacherId' => $course['teacher_id'], 'courseId' => $course['id']]) }}')"></a>                            
  <img src="{{ $course['course_img'] ? asset('public/storage/' . $course['course_img']) : 'https://png.pngtree.com/thumb_back/fh260/background/20220712/pngtree-back-to-school-items-with-copy-space-start-term-schooling-photo-image_8648894.jpg' }}" class="card-img-top" alt="Image">
                        </div>
                        <div class="card-body pb-3">
                            <h3 class="h5 mb-2">
                                <a href="#" onclick="checkRegistration('{{ route('coursePage', ['teacherId' => $course['teacher_id'], 'courseId' => $course['id']]) }}')">{{ $course['name'] }}</a>
                            </h3>
                            <p class="fs-sm mb-2">
                                <a href="{{ route('teacher.page', ['id' => $course['teacher_id']]) }}">
                                    {{ $course['teacher_name'] }}
                                </a>
                            </p>
                            <p class="fs-lg fw-semibold text-primary mb-0">{{ $course['description'] }}</p>
                        </div>
                        <div class="card-footer d-flex align-items-center fs-sm text-muted py-4">
                            {{-- <div class="d-flex align-items-center me-4">
                            <i class="bx bx-time fs-xl me-1"></i>
                            4 hours
                            </div> --}}
                        </div>
                    </article>
                </div>
            @endforeach
        @endif
    </div>

    <!-- Pagination (bullets) -->
    <div class="swiper-pagination position-relative pt-2 pt-sm-3 mt-4"></div>
    </div>
</div>

<div id="quran-courses" class="courses-category active-category">
    <!-- Courses slider -->
    <div class="swiper swiper-nav-onhover mx-n2" data-swiper-options='{
        "slidesPerView": 1,
        "spaceBetween": 8,
        "pagination": {
        "el": ".swiper-pagination",
        "clickable": true
        },
        "navigation": {
        "prevEl": "#popular-prev",
        "nextEl": "#popular-next"
        },
        "breakpoints": {
        "560": {
            "slidesPerView": 2
        },
        "768": {
            "slidesPerView": 1
        },
        "850": {
            "slidesPerView": 2
        },
        "1200": {
            "slidesPerView": 3
        }
        }
    }'>
    
    <div class="swiper-wrapper">
        @php
            // تصفية الكورسات بناءً على نظام "Quran" والشرط الخاص بالعمر
            $filteredCoursesQuran = [];

            foreach ($courses as $course) {
                // فصل النطاق العمري
                $ageParts = explode('-', $course['age_range']);

                if (count($ageParts) >= 2) {
                    $min_age = (int) $ageParts[0];
                    $max_age = (int) $ageParts[1];
                } else {
                    // في حال كانت قيمة age_range غير متوقعة
                    $min_age = 0;
                    $max_age = 0;
                }

                // التحقق من النظام والعمر
                if (
                    $course['system'] == 'Quran' &&
                    (
                        !auth()->check() || auth()->user()->role == 'admin' || auth()->user()->role == 'teacher' ||
                        (auth()->check() && auth()->user()->student->age >= $min_age && auth()->user()->student->age <= $max_age)
                    )
                ) {
                    $filteredCoursesQuran[] = $course;
                }

            }
        @endphp

        @if (empty($filteredCoursesQuran))
            <div class="alert alert-info" style="text-align: center; margin-top: 20px;">
                {{__('home.no_courses_available') }}
            </div>
        @else
            @foreach($filteredCoursesQuran as $course)
                

                {{-- @if($course['system'] == 'Quran' && ( !auth()->check() || ( auth()->check() && auth()->user()->age >= $min_age && auth()->user()->age <= $max_age ) )) --}}

               
                <div class="swiper-slide h-auto pb-3">
                  <article class="card h-100 border-0 shadow-sm mx-2">
                  <div class="position-relative">
                    <a href="#" class="d-block position-absolute w-100 h-100 top-0 start-0" onclick="checkRegistration('{{ route('coursePage',['teacherId'=>$course['teacher_id'],'courseId'=>$course['id']]) }}')"></a>                            
                    <img src="{{ $course['course_img'] ? asset('public/storage/' . $course['course_img']) : 'https://media.istockphoto.com/id/642999034/photo/muslims-prayer-in-mosque.jpg?s=2048x2048&w=is&k=20&c=1GczmjT9FK5RdcIIm18_jggH3jDqpnsIhZZnxDtg9qA=' }}" class="card-img-top" alt="Image">

                  </div>
                  <div class="card-body pb-3">
                      <h3 class="h5 mb-2">
                        <a href="#" onclick="checkRegistration('{{ route('coursePage',['teacherId'=>$course['teacher_id'],'courseId'=>$course['id']]) }}')">{{$course['name']}}</a>
                      </h3>
                      <p class="fs-sm mb-2">
                        <a href="{{ route('teacher.page', ['id' => $course['teacher_id']]) }}">
                            {{ $course['teacher_name'] }}
                        </a>
                    </p>
                                                
                    <p class="fs-lg fw-semibold text-primary mb-0">{{$course['description']}}</p>
                  </div>
                  <div class="card-footer d-flex align-items-center fs-sm text-muted py-4">
                      {{-- <div class="d-flex align-items-center me-4">
                      <i class="bx bx-time fs-xl me-1"></i>
                      4 hours
                      </div> --}}
                      
                  </div>
                  </article>
              </div>
                
                @endforeach
                @endif

                {{-- <!-- Item -->
                <div class="swiper-slide h-auto pb-3">
                    <article class="card h-100 border-0 shadow-sm mx-2">
                    <div class="position-relative">
                        <a href="portfolio-single-course.html" class="d-block position-absolute w-100 h-100 top-0 start-0"></a>
                        
                        <img src="assets/img/portfolio/courses/02.jpg" class="card-img-top" alt="Image">
                    </div>
                    <div class="card-body pb-3">
                        <h3 class="h5 mb-2">
                        <a href="portfolio-single-course.html">American Course 2</a>
                        </h3>
                        <p class="fs-sm mb-2">By By teacher 2</p>
                        <p class="fs-lg fw-semibold text-primary mb-0">$15.99</p>
                    </div>
                    <div class="card-footer d-flex align-items-center fs-sm text-muted py-4">
                        <div class="d-flex align-items-center me-4">
                        <i class="bx bx-time fs-xl me-1"></i>
                        4 hours
                        </div>
                        
                    </div>
                    </article>
                </div>

                <!-- Item -->
                <div class="swiper-slide h-auto pb-3">
                    <article class="card h-100 border-0 shadow-sm mx-2">
                    <div class="position-relative">
                        <a href="portfolio-single-course.html" class="d-block position-absolute w-100 h-100 top-0 start-0"></a>
                        <span class="badge bg-danger position-absolute top-0 start-0 zindex-2 mt-3 ms-3">Sale!</span>
                    
                        <img src="assets/img/portfolio/courses/03.jpg" class="card-img-top" alt="Image">
                    </div>
                    <div class="card-body pb-3">
                        <h3 class="h5 mb-2">
                        <a href="portfolio-single-course.html">American Course 3</a>
                        </h3>
                        <p class="fs-sm mb-2">By By teacher 3</p>
                        <p class="text-muted mb-0"><span class="fs-lg fw-semibold text-danger me-2">$9.99</span><del>$44.99</del></p>
                    </div>
                    <div class="card-footer d-flex align-items-center fs-sm text-muted py-4">
                        <div class="d-flex align-items-center me-4">
                        <i class="bx bx-time fs-xl me-1"></i>
                        4 hours
                        </div>
                        
                    </div>
                    </article>
                </div>

                <!-- Item -->
                <div class="swiper-slide h-auto pb-3">
                    <article class="card h-100 border-0 shadow-sm mx-2">
                    <div class="position-relative">
                        <a href="portfolio-single-course.html" class="d-block position-absolute w-100 h-100 top-0 start-0"></a>
                        
                        <img src="assets/img/portfolio/courses/05.jpg" class="card-img-top" alt="Image">
                    </div>
                    <div class="card-body pb-3">
                        <h3 class="h5 mb-2">
                        <a href="portfolio-single-course.html">American Course 4</a>
                        </h3>
                        <p class="fs-sm mb-2">By By teacher 4</p>
                        <p class="fs-lg fw-semibold text-primary mb-0">$13.99</p>
                    </div>
                    <div class="card-footer d-flex align-items-center fs-sm text-muted py-4">
                        <div class="d-flex align-items-center me-4">
                        <i class="bx bx-time fs-xl me-1"></i>
                        4 hours
                        </div>
                    
                    </div>
                    </article>
                </div> --}}


                </div>
                  <!-- Pagination (bullets) -->
                  <div class="swiper-pagination position-relative pt-2 pt-sm-3 mt-4"></div>
              </div>
          </div>
          <script>
            function checkRegistration(url) {
                const isLoggedIn = {{ auth()->check() ? 'true' : 'false' }};
                if (!isLoggedIn) {
                    alert('يجب عليك التسجيل للدخول إلى محتوى الكورس');
                    // يمكنك استبدال alert ب modal أنيق
                } else {
                    window.location.href = url;
                }
            }
        </script>
            <script>
                document.addEventListener('DOMContentLoaded', function () {
            const tabs = document.querySelectorAll('ul.nav-tabs .nav-link');
                const categories = document.querySelectorAll('.courses-category');

                // تفعيل أول زر تلقائيًا
                if (tabs.length > 0) {
                    tabs[0].classList.add('active');
                }

                // عرض القسم الأول فقط عند التحميل
                if (categories.length > 0) {
                    categories.forEach((category, index) => {
                    if (index === 0) {
                        category.classList.remove('d-none'); // عرض القسم الأول
                    } else {
                        category.classList.add('d-none'); // إخفاء الباقي
                    }
                    });
                }

                tabs.forEach(tab => {
                    tab.addEventListener('click', function (event) {
                    event.preventDefault();

                    // إزالة الفئة النشطة من جميع الأزرار
                    tabs.forEach(t => t.classList.remove('active'));

                    // إضافة الفئة النشطة للزر الحالي
                    this.classList.add('active');

                    // إخفاء جميع أقسام الكورسات
                    categories.forEach(category => category.classList.add('d-none'));

                    // عرض القسم المحدد بناءً على الزر الذي تم النقر عليه
                    const targetId = this.id.replace('-tab', '-courses'); // على سبيل المثال 'american-tab' يصبح 'american-courses'
                    const targetCategory = document.getElementById(targetId);

                    if (targetCategory) {
                        targetCategory.classList.remove('d-none');
                    }
                    });
                });
                });

            </script>
            
          </div>
        </div>
      </section>
      <script>
        document.addEventListener('DOMContentLoaded', function () {
            const tabs = document.querySelectorAll('ul.nav-tabs .nav-link');

      
          tabs.forEach(tab => {
            tab.addEventListener('click', function (event) {
              event.preventDefault();
      
              // إزالة الفئة النشطة من جميع الأزرار
              tabs.forEach(t => t.classList.remove('active'));
      
              // إضافة الفئة النشطة للزر الحالي
              this.classList.add('active');
      
              // إخفاء جميع أقسام الكورسات
              categories.forEach(category => category.classList.add('d-none'));
      
              // عرض القسم المحدد بناءً على الزر الذي تم النقر عليه
              const targetId = this.id.replace('-tab', '-courses'); // على سبيل المثال 'american-tab' يصبح 'american-courses'
              const targetCategory = document.getElementById(targetId);
      
              if (targetCategory) {
                targetCategory.classList.remove('d-none');
              }
            });
          });
        });
      </script>
      <!-- What you get (Icon boxes) -->
<section class="container pt-1 pt-xl-3 pb-5">
  <h2 class="h1 text-center pb-3 pb-md-0 mb-md-5">{{ __('home.what_you_get') }}</h2>
  <h5 class="text-center pb-3 pb-md-0 mb-md-5">{{ __('home.explore_curriculums') }}</h5>
  <div class="swiper swiper-nav-onhover mt-n3 mx-n2" data-swiper-options='{
    "slidesPerView": 1,
    "spaceBetween": 8,
    "pagination": {
      "el": ".swiper-pagination",
      "clickable": true
    },
    "breakpoints": {
      "600": {
        "slidesPerView": 2
      },
      "1000": {
        "slidesPerView": 3
      }
    }
  }'>
    <div class="swiper-wrapper">

      <!-- British System -->
      <div class="swiper-slide h-auto py-3">
        <div class="card card-hover h-100 mx-2">
          <div class="card-body">
            <div class="d-table position-relative p-3 mb-4">
              <img src="assets/img/landing/online-courses/circle_10576577.png" class="position-relative zindex-2" width="32" alt="Icon">
              <span class="bg-primary position-absolute top-0 start-0 w-100 h-100 rounded-circle opacity-8"></span>
            </div>
            <h3 class="h5 pb-1 mb-2">{{ __('home.british_system') }}</h3>
            <p class="mb-0">{{ __('home.british_system_description') }}</p>
          </div>
        </div>
      </div>

      <!-- American System -->
      <div class="swiper-slide h-auto py-3">
        <div class="card card-hover h-100 mx-2">
          <div class="card-body">
            <div class="d-table position-relative p-3 mb-4">
              <img src="assets/img/landing/online-courses/flags_16021822.png" class="position-relative zindex-2" width="32" alt="Icon">
              <span class="bg-primary position-absolute top-0 start-0 w-100 h-100 rounded-circle opacity-8"></span>
            </div>
            <h3 class="h5 pb-1 mb-2">{{ __('home.american_system') }}</h3>
            <p class="mb-0">{{ __('home.american_system_description') }}</p>
          </div>
        </div>
      </div>

      <!-- Quran Learning -->
      <div class="swiper-slide h-auto py-3">
        <div class="card card-hover h-100 mx-2">
          <div class="card-body">
            <div class="d-table position-relative p-3 mb-4">
              <img src="assets/img/landing/online-courses/book_13757355.png" class="position-relative zindex-2" width="32" alt="Icon">
              <span class="bg-primary position-absolute top-0 start-0 w-100 h-100 rounded-circle opacity-8"></span>
            </div>
            <h3 class="h5 pb-1 mb-2">{{ __('home.quran_learning') }}</h3>
            <p class="mb-0">{{ __('home.quran_learning_description') }}</p>
          </div>
        </div>
      </div>

      <!-- Egyptian Curriculum -->
      <div class="swiper-slide h-auto py-3">
        <div class="card card-hover h-100 mx-2">
          <div class="card-body">
            <div class="d-table position-relative p-3 mb-4">
              <img src="assets/img/landing/online-courses/circle_12365941.png" class="position-relative zindex-2" width="32" alt="Icon">
              <span class="bg-primary position-absolute top-0 start-0 w-100 h-100 rounded-circle opacity-8"></span>
            </div>
            <h3 class="h5 pb-1 mb-2">{{ __('home.egyptian_curriculum') }}</h3>
            <p class="mb-0">{{ __('home.egyptian_curriculum_description') }}</p>
          </div>
        </div>
      </div>

    </div>

    <!-- Pagination (bullets) -->
    <div class="swiper-pagination position-relative pt-2 pt-sm-3 mt-4"></div>
  </div>
</section>

<script>
  var swiper = new Swiper('.swiper', {
    slidesPerView: 1,
    spaceBetween: 8,
    pagination: {
      el: '.swiper-pagination',
      clickable: true
    },
    breakpoints: {
      600: {
        slidesPerView: 2
      },
      1000: {
        slidesPerView: 3
      }
    }
  });
</script>
    <!-- Bootstrap JS (Optional, for interactive components if needed) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

    <!-- Quran Section -->
<section class="py-5 text-white  mt-5 mb-5">
  <div class="container text-center">
    <h2 class="mb-4">{{__('home.quran_learning_zone') }}</h2>
    <div class="row g-4 justify-content-center">
      <!-- Feature 1: Quran Reading -->
      <div class="col-lg-4 col-md-6 col-sm-12 ">
        <div class="p-4 bg-white rounded shadow text-center">
          <i class="bx bx-book-open fs-1 text-primary mb-3"></i>
          <img src="assets/img/2147868974.jpg" 
               alt="{{__('home.quran_reading') }}" class="img-fluid rounded mb-3" style="height: 250px;">
          <h4 class="text-dark">{{__('home.quran_reading') }}</h4>
          <p class="text-muted">{{__('home.learn_with_fun') }}</p>
        </div>
      </div>
      <!-- Feature 2: Quran Memorization -->
      <div class="col-lg-4 col-md-6 col-sm-12">
        <div class="p-4 bg-white rounded shadow text-center">
          <i class="bx bx-pen fs-1 text-primary mb-3"></i>
          <img src="assets/img/139534.jpg" 
               alt="{{__('home.quran_memorization') }}" class="img-fluid rounded mb-3" style="height: 250px; width: 367px;">
          <h4 class="text-dark">{{__('home.quran_memorization') }}</h4>
          <p class="text-muted">{{__('home.memorize_with_techniques') }}</p>
        </div>
      </div>
      <!-- Feature 3: Quran Recitation -->
      <div class="col-lg-4 col-md-6 col-sm-12">
        <div class="p-4 bg-white rounded shadow text-center">
          <i class="bx bx-microphone fs-1 text-primary mb-3"></i>
          <img src="assets/img/2147868946.jpg" 
               alt="{{__('home.quran_recitation') }}" class="img-fluid rounded mb-3" style="height: 250px;">
          <h4 class="text-dark">{{__('home.quran_recitation') }}</h4>
          <p class="text-muted">{{__('home.improve_recitation') }}</p>
        </div>
      </div>
    </div>
  </div>
</section>




      <!-- How it works (Steps) -->
<section class="container pt-4 pt-lg-0 pb-4 pb-lg-5 mb-5">
    <h2 class="h1 text-center pb-3 pb-md-0 mb-md-5">{{__('home.how_it_works') }}</h2>
    <div class="steps">
        <!-- Step 1 -->
        <div class="step pt-0 pt-md-3 pb-5">
            <div class="step-number">
                <div class="step-number-inner">1</div>
            </div>
            <div class="step-body d-flex align-items-center ps-xl-5">
                <div class="rellax d-none d-lg-block flex-shrink-0 mx-4 mx-xl-5" data-rellax-percentage="0.5" data-rellax-speed="-0.3" data-disable-parallax-down="lg">
                    <img src="assets/img/landing/online-courses/steps/01-dark.svg" class="d-dark-mode-none" width="306" alt="Illustration">
                    <img src="assets/img/landing/online-courses/steps/01-light.svg" class="d-none d-dark-mode-block" width="306" alt="Illustration">
                </div>
                <div class="rellax ps-md-4 ps-xl-5" data-rellax-percentage="0.5" data-rellax-speed="0.4" data-disable-parallax-down="lg">
                    <h3 class="h4">{{__('home.choose_course') }}</h3>
                    <p class="mb-0">{{__('home.pick_course') }}</p>
                </div>
            </div>
        </div>

        <!-- Step 2 -->
        <div class="step pt-0 pt-md-4 pb-5">
            <div class="step-number">
                <div class="step-number-inner">2</div>
            </div>
            <div class="step-body d-flex align-items-center ps-xl-5">
                <div class="rellax d-none d-lg-block flex-shrink-0 mx-4 mx-xl-5" data-rellax-percentage="0.5" data-rellax-speed="-0.5" data-disable-parallax-down="lg">
                    <img src="assets/img/landing/online-courses/steps/02-dark.svg" class="d-dark-mode-none" width="306" alt="Illustration">
                    <img src="assets/img/landing/online-courses/steps/02-light.svg" class="d-none d-dark-mode-block" width="306" alt="Illustration">
                </div>
                <div class="rellax ps-md-4 ps-xl-5" data-rellax-percentage="0.5" data-rellax-speed="0.5" data-disable-parallax-down="lg">
                    <h3 class="h4">{{__('home.learn_through_play') }}</h3>
                    <p class="mb-0">{{__('home.interactive_games') }}</p>
                </div>
            </div>
        </div>

        <!-- Step 3 -->
        <div class="step pt-0 pt-md-4 pb-5">
            <div class="step-number">
                <div class="step-number-inner">3</div>
            </div>
            <div class="step-body d-flex align-items-center ps-xl-5">
                <div class="rellax d-none d-lg-block flex-shrink-0 mx-4 mx-xl-5" data-rellax-percentage="0.5" data-rellax-speed="-0.3" data-disable-parallax-down="lg">
                    <img src="assets/img/landing/online-courses/steps/03-dark.svg" class="d-dark-mode-none" width="306" alt="Illustration">
                    <img src="assets/img/landing/online-courses/steps/03-light.svg" class="d-none d-dark-mode-block" width="306" alt="Illustration">
                </div>
                <div class="rellax ps-md-4 ps-xl-5" data-rellax-percentage="0.5" data-rellax-speed="0.4" data-disable-parallax-down="lg">
                    <h3 class="h4">{{__('home.get_help') }}</h3>
                    <p class="mb-0">{{__('home.ask_questions') }}</p>
                </div>
            </div>
        </div>

        <!-- Step 4 -->
        <div class="step pt-0 pt-md-4 pb-5">
            <div class="step-number">
                <div class="step-number-inner">4</div>
            </div>
            <div class="step-body d-flex align-items-center ps-xl-5">
                <div class="rellax d-none d-lg-block flex-shrink-0 mx-4 mx-xl-5" data-rellax-percentage="0.5" data-rellax-speed="-0.5" data-disable-parallax-down="lg">
                    <img src="assets/img/landing/online-courses/steps/04-dark.svg" class="d-dark-mode-none" width="306" alt="Illustration">
                    <img src="assets/img/landing/online-courses/steps/04-light.svg" class="d-none d-dark-mode-block" width="306" alt="Illustration">
                </div>
                <div class="rellax ps-md-4 ps-xl-5" data-rellax-percentage="0.5" data-rellax-speed="0.6" data-disable-parallax-down="lg">
                    <h3 class="h4">{{__('home.show_off') }}</h3>
                    <p class="mb-0">{{__('home.share_achievements') }}</p>
                </div>
            </div>
        </div>
    </div>
</section>

      <!-- Features (Icon boxes) -->
<section class="container py-5 my-2 my-md-4 my-lg-5">
  <h2 class="h1 text-center pt-1 pt-xl-3 mb-lg-4">{{ __('home.why_us') }}</h2>
  <div class="swiper mx-n2" data-swiper-options='{
    "slidesPerView": 1,
    "spaceBetween": 8,
    "pagination": {
      "el": ".swiper-pagination",
      "clickable": true
    },
    "breakpoints": {
      "500": { "slidesPerView": 2 },
      "800": { "slidesPerView": 3 },
      "1200": { "slidesPerView": 4 }
    }
  }'>
    <div class="swiper-wrapper w-100">
    
      <!-- Top Qualified Teachers -->
      <div class="swiper-slide h-auto py-3">
        <div class="card h-100 card-body card-hover mx-2">
          <i class="bx bx-user-voice display-5 fw-normal card-icon" style="color: #b4b7c9;"></i>
          <h3 class="h5 pt-3 pb-1 mb-2">{{ __('home.top_teachers_title') }}</h3>
          <p class="mb-0">{{ __('home.top_teachers_desc') }}</p>
        </div>
      </div>

      <!-- Flexible Scheduling -->
      <div class="swiper-slide h-auto py-3">
        <div class="card h-100 card-body card-hover mx-2">
          <i class="bx bx-calendar-check display-5 fw-normal card-icon" style="color: #b4b7c9;"></i>
          <h3 class="h5 pt-3 pb-1 mb-2">{{ __('home.flexible_scheduling_title') }}</h3>
          <p class="mb-0">{{ __('home.flexible_scheduling_desc') }}</p>
        </div>
      </div>

      <!-- 24/7 Customer Support -->
      <div class="swiper-slide h-auto py-3">
        <div class="card h-100 card-body card-hover mx-2">
          <i class="bx bx-headphone display-5 fw-normal card-icon" style="color: #b4b7c9;"></i>
          <h3 class="h5 pt-3 pb-1 mb-2">{{ __('home.customer_support_title') }}</h3>
          <p class="mb-0">{{ __('home.customer_support_desc') }}</p>
        </div>
      </div>

      <!-- Affordable Prices -->
      <div class="swiper-slide h-auto py-3">
        <div class="card h-100 card-body card-hover mx-2">
          <i class="bx bx-wallet display-5 fw-normal card-icon" style="color: #b4b7c9;"></i>
          <h3 class="h5 pt-3 pb-1 mb-2">{{ __('home.affordable_prices_title') }}</h3>
          <p class="mb-0">{{ __('home.affordable_prices_desc') }}</p>
        </div>
      </div>

    </div>

    <!-- Pagination (bullets) -->
    <div class="swiper-pagination position-relative d-xl-none pt-3 mt-4"></div>
  </div>
</section>
    @if(!Auth::check())

      <!-- Sign up form -->
     <section class="container" style="margin-top: -240px; padding-top: 300px;">
    <div class="container pt-2 pt-md-3 pt-lg-5 pb-5">
        <h2 class="h1 text-center pb-2 mb-4 mb-lg-5">{{__('home.ready_to_start') }}</h2>
        <div class="row pb-3">
            <div class="col-xl-7 col-md-6">
                <div class="d-flex flex-column w-100 h-100 rounded-3 bg-position-center bg-repeat-0 bg-size-cover" style="background-image: url(assets/img/landing/online-courses/signup-img.jpg);"></div>
            </div>
            <div class="col-xl-5 col-md-6">
                <div class="card border-0 p-lg-4">
                    <div class="card-body">
                        <h3 class="pb-3 pb-lg-4">{{__('home.sign_in_get_course') }}</h3>
                        @if (session('status'))
                            <div class="alert alert-success">{{ session('status') }}</div>
                        @endif
                        @if ($errors->any())
                            <div class="alert alert-danger mb-4">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        <form class="needs-validation mb-4 pb-2 pb-lg-0 mb-lg-5" action="{{ route('login') }}" method="POST" novalidate>
                            @csrf
                            <div class="position-relative mb-4">
                                <label for="email" class="form-label fs-base">{{__('home.email_address') }}</label>
                                <input type="email" id="email" name="email" class="form-control form-control-lg" required>
                                <div class="invalid-tooltip position-absolute top-100 start-0">{{__('home.please_provide_email') }}</div>
                            </div>
                            <div class="mb-4 pt-1 pb-2">
                                <label for="password" class="form-label fs-base">{{__('home.password') }}</label>
                                <div class="password-toggle">
                                    <input type="password" id="password" name="password" class="form-control form-control-lg" required>
                                    <label class="password-toggle-btn" aria-label="Show/hide password">
                                        <input class="password-toggle-check" type="checkbox">
                                        <span class="password-toggle-indicator"></span>
                                    </label>
                                    <div class="invalid-tooltip position-absolute top-100 start-0">{{__('home.please_provide_password') }}</div>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary btn-lg shadow-primary">{{__('home.go_to_account') }}</button><br><br>
                            <p class="text-center text-xl-start pb-3 mb-3">{!!__('home.dont_have_account') !!}</p>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
 <script>
                      document.addEventListener('DOMContentLoaded', function () {
                        var toggle = document.getElementById('accountDropdown');
                        var menu = document.getElementById('accountMenu');
                    
                        toggle.addEventListener('click', function (e) {
                          e.preventDefault();
                          menu.classList.toggle('show'); // تضيف/تشيل الكلاس اللي بيظهر القائمة
                        });
                    
                        // اختياري: اغلاق القائمة لو المستخدم ضغط برة القائمة
                        document.addEventListener('click', function (e) {
                          if (!toggle.contains(e.target) && !menu.contains(e.target)) {
                            menu.classList.remove('show');
                          }
                        });
                      });
                    </script>
@endif
@endsection