@extends('layout.app')

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

@section('content')
    <!-- Hero section with layer parallax gfx -->
    <section class="position-relative py-5">

        <!-- Gradient BG -->
        <div class="position-absolute top-0 start-0 w-100 h-100 bg-gradient-primary opacity-10"></div>

        <!-- Content -->
        <div class="container position-relative zindex-2 py-lg-4">
          <div class="row">
            <div class="col-lg-5 d-flex flex-column pt-lg-4 pt-xl-5">
              <h5 class="my-2">Welcome!</h5>
              <h1 class="display-3 mb-4">Learn <span class="text-primary">Online</span> with Star Shine</h1>
              <p class="fs-lg mb-5">Enjoy our great selection of courses.</p>

              <!-- Desktop form -->
                <form action="{{ route('home') }}" method="GET" class="d-none d-sm-flex mb-5">
                  <div class="input-group d-block d-sm-flex input-group-lg me-3">
                      <input type="text" name="search" class="form-control w-50" placeholder="Search courses..." value="{{ request('search') }}">
                      
                      <select name="system" class="form-select w-50">
                          <option value="" disabled {{ request('system') ? '' : 'selected' }}>Systems</option>
                          <option value="American" {{ request('system') == 'American' ? 'selected' : '' }}>American</option>
                          <option value="British" {{ request('system') == 'British' ? 'selected' : '' }}>British</option>
                          <option value="Masry" {{ request('system') == 'Masry' ? 'selected' : '' }}>Egyptian curriculum</option>
                      </select>
                  </div>
                  <button type="submit" class="btn btn-icon btn-primary btn-lg">
                      <i class="bx bx-search"></i>
                  </button>
                </form>

              
              <!-- Mobile form -->
              <form action="{{ route('home') }}" method="GET"  class="d-sm-none mb-5">
                <input type="text" class="form-control form-control-lg mb-2" placeholder="Search courses...">
                <select class="form-select form-select-lg mb-2">
                  <option value="" disabled {{ request('system') ? '' : 'selected' }}>Systems</option>
                  <option value="American" {{ request('system') == 'American' ? 'selected' : '' }}>American</option>
                  <option value="British" {{ request('system') == 'British' ? 'selected' : '' }}>British</option>
                  <option value="Masry" {{ request('system') == 'Masry' ? 'selected' : '' }}>Egyptian curriculum</option>
                </select>
                <button type="submit" class="btn btn-icon btn-primary btn-lg w-100 d-sm-none">
                  <i class="bx bx-search"></i>
                </button>
              </form>

            </div>
            <div class="col-lg-7">

              <!-- Parallax gfx -->
              <div class="parallax mx-auto me-lg-0" style="max-width: 648px;">
                <div class="parallax-layer" data-depth="0.1">
                  <img src="assets/img/landing/online-courses/hero/layer01.png" alt="Layer">
                </div>
                <div class="parallax-layer" data-depth="0.13">
                  <img src="assets/img/landing/online-courses/hero/layer02.png" alt="Layer">
                </div>
                <div class="parallax-layer zindex-5" data-depth="-0.12">
                  <img src="assets/img/landing/online-courses/hero/layer03.png" alt="Layer">
                </div>
                <div class="parallax-layer zindex-3" data-depth="0.27">
                  <img src="assets/img/landing/online-courses/hero/layer04.png" alt="Layer">
                </div>
                <div class="parallax-layer zindex-1" data-depth="-0.18">
                  <img src="assets/img/landing/online-courses/hero/layer05.png" alt="Layer">
                </div>
                <div class="parallax-layer zindex-1" data-depth="0.1">
                  <img src="assets/img/landing/online-courses/hero/layer06.png" alt="Layer">
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>


      <!-- Popular courses -->
      <section class="container mt-2 mt-sm-3 py-md-3 py-lg-5">
        <div class="row py-5">
          <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 d-inline-block text-nowrap active" role="tab" aria-selected="true">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">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">Egyptian curriculum
                  </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">Popular Courses</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">
                    @foreach($courses as $course)
                    @if($course['system']=='American')
                    <!-- 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="{{ route('coursePage',['teacherId'=>$course['teacher_id'],'courseId'=>$course['id']]) }}" class="d-block position-absolute w-100 h-100 top-0 start-0"></a>
                            
                          <img src="{{ asset('storage/' . $course['course_img']) }}" class="card-img-top" alt="Image">
                        </div>
                        <div class="card-body pb-3">
                            <h3 class="h5 mb-2">
                            <a href="{{ route('coursePage',['teacherId'=>$course['teacher_id'],'courseId'=>$course['id']]) }}">{{$course['name']}}</a>
                            </h3>
                            <p class="fs-sm mb-2">{{$course['teacher_name']}}</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>
                    @endif
                    @endforeach
    
                    {{-- <!-- 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>
            <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">
                  @foreach($courses as $course)
                  @if($course['system']=='British')
                  <!-- 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="{{ route('coursePage',['teacherId'=>$course['teacher_id'],'courseId'=>$course['id']]) }}" class="d-block position-absolute w-100 h-100 top-0 start-0"></a>
                          
                          <img src="assets/img/portfolio/courses/01.jpg" class="card-img-top" alt="Image">
                      </div>
                      <div class="card-body pb-3">
                          <h3 class="h5 mb-2">
                          <a href="{{ route('coursePage',['teacherId'=>$course['teacher_id'],'courseId'=>$course['id']]) }}">{{$course['name']}}</a>
                          </h3>
                          <p class="fs-sm mb-2">{{$course['teacher_name']}}</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>
                  @endif
                  @endforeach
  
                  {{-- <!-- 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>
            <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">
                  @foreach($courses as $course)
                  @if($course['system']=='Masry')
                  <!-- 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="{{ route('coursePage',['teacherId'=>$course['teacher_id'],'courseId'=>$course['id']]) }}" class="d-block position-absolute w-100 h-100 top-0 start-0"></a>
                          
                          <img src="assets/img/portfolio/courses/01.jpg" class="card-img-top" alt="Image">
                      </div>
                      <div class="card-body pb-3">
                          <h3 class="h5 mb-2">
                          <a href="{{ route('coursePage',['teacherId'=>$course['teacher_id'],'courseId'=>$course['id']]) }}">{{$course['name']}}</a>
                          </h3>
                          <p class="fs-sm mb-2">{{$course['teacher_name']}}</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>
                  @endif
                  @endforeach
  
                  {{-- <!-- 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>
                document.addEventListener('DOMContentLoaded', function () {
                const tabs = document.querySelectorAll('.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>
            <a href="portfolio-courses.html" class="btn btn-outline-primary btn-lg w-100 d-md-none mt-3">
              See all courses
              <i class="bx bx-right-arrow-alt fs-xl ms-2"></i>
            </a>
          </div>
        </div>
      </section>
      <script>
        document.addEventListener('DOMContentLoaded', function () {
          const tabs = document.querySelectorAll('.nav-link');
          const categories = document.querySelectorAll('.courses-category');
      
          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>


      <!-- How it works (Steps) -->
      <section class="container pt-4 pt-lg-0 pb-4 pb-lg-5">
        <h2 class="h1 text-center pb-3 pb-md-0 mb-md-5">How Does It Work?</h2>
        <div class="steps">
          <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">Choose a Fun Course and Start Learning!</h3>
                <p class="mb-0">Pick a course that interests you and begin your exciting learning journey with fun activities!</p>
              </div>
            </div>
          </div>
          <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">Learn Through Play and Exploration</h3>
                <p class="mb-0">Enjoy interactive games and fun activities that help you learn new things while playing!</p>
              </div>
            </div>
          </div>
          <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">Get Help from Teachers and Friends</h3>
                <p class="mb-0">Ask questions and get answers from friendly teachers and fellow students to make learning even more fun!</p>
              </div>
            </div>
          </div>
          <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">Show Off What You Learned!</h3>
                <p class="mb-0">Share your achievements and show everyone how much you’ve learned and grown with your new skills!</p>
              </div>
            </div>
          </div>
        </div>
      </section>
      


      <!-- Sign up form -->
      <section class="bg-secondary pb-lg-5" 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">Ready to Kick-Start Your Career?<br>Start Learning Today</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">Sign in and get your first 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" class="needs-validation mb-2" novalidate>
                    @csrf

                    <div class="position-relative mb-4">
                      <label for="email" class="form-label fs-base">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">Please provide a valid email address.</div>
                    </div>
                    <div class="mb-4 pt-1 pb-2">
                      <label for="password" class="form-label fs-base">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">Please provide a valid email address.</div>
                      </div>
                    </div>
                    <button type="submit" class="btn btn-primary btn-lg shadow-primary">Go to Your account</button><br><br>
                    <p class="text-center text-xl-start pb-3 mb-3">Don’t have an account yet? <a href="{{route('page.register')}}">Register here.</a></p>

                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
@endsection