@extends('web.layouts.layout')
<title>@yield('meta_title', 'priaacademy.org')</title>
<meta name="description" content="@yield('')">
<meta name="keywords" content="@yield('')">
@section('content')
 
<main class="main-area">
  <section class="bd-banner-area">
    <div class="swiper bdSliderActive p-relative">
      <div class="swiper-wrapper">

        @foreach($banner as $ban)
        <div class="swiper-slide">
          <div class="bd-banner-slider-wrapper">
            <div class="bd-banner-bg-image" data-background="{{asset('/banner/'.$ban->image)}}"> </div>
            <div class="container">
              <div class="row justify-content-center">
                <div class="col-xxl-6 col-xl-8">
                  <div class="bd-banner-content-two text-center">
                    <div class="bd-banner-subtitle mb-10">{{$ban->title??''}}</div>
                    <h1 class="bd-banner-title white-text mb-25">{{$ban->subtitle??''}}</h1>
                    <div class="bd-banner-form">
                      <div class="form-list">
                        <div class="form-list-item">
                          <p class="description"> {{$ban->description??''}}  </p>
                        </div>
                      </div>
                    </div>
                    <p class="bd-banner-title pt-25"><a class="bd-btn btn-outline-border-white" href="{{$ban->button_link??''}}" target="_blank"> Call to Action </a> </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        @endforeach 
      </div>
      <div class="bd-banner-navigation d-none d-xl-block">
        <div class="bd-banner-navigation-btn-two">
          <button class="banner-navigation-prev"><i class="fa-regular fa-angle-left"></i></button>
          <button class="banner-navigation-next"><i class="fa-regular fa-angle-right"></i></button>
        </div>
      </div>
    </div>
  </section>
  <section class="bd-category-area section-space fix whatNew">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-xl-6">
          <div class="bd-section-wrapper section-title-space text-center">
            <h2 class="bd-section-title mb-20">What's New</h2>
          </div>
        </div>
      </div>
      <div class="p-relative">
        <div class="row justify-content-center">
          <div class="col-lg-10 col-md-12">
            <div class="swiper categorySliderActive">
              <div class="swiper-wrapper">
                @foreach($cources_for_whats_new as $course)
                <div class="swiper-slide">
                  <div class="bd-category-grid-item"><a href="{{route('course-details',['id'=>$course->slug])}}" target="_blank" class="bd-category-wrapper style-seven">
                    <div class="bd-category-item">
                       <div class="bd-pricing-thumb">
                        <img src="{{ asset('upload/courses/' . $course->image) }}" alt="pricing">
                       </div>
                      <div class="bd-category-content">
                        <h6 class="bd-category-title">{{$course->title??""}}</h6>
                        <span class="bd-category-subtitle"><span class="total-course">{{DB::table('services')->where('id',$course->service_id??"")->value('title')}}</span></span> </div>
                    </div>
                    </a>
                  </div>
                </div>
                @endforeach
              </div>
            </div>
          </div>
        </div>
        <div class="bd-category-navigation">
          <button class="category-nav-prev"><i class="fa-regular fa-angle-left"></i></button>
          <button class="category-nav-next"><i class="fa-regular fa-angle-right"></i></button>
        </div>
      </div>
    </div>
  </section>
 <section class="bd-why-choose-area primary-bg image-bg our-servicesH" data-background="assets/images/banner/banner-2/banner-bg1.jpg" style="background-size: 100% 100%;background-attachment: fixed;">
    <div class="servicesHBG">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-xl-6">
          <div class="bd-section-wrapper section-title-space text-center">             <h2 class="bd-section-title mb-20"> Our Services </h2>
          </div>
        </div>
      </div>
      <div class="row gy-30">
        @foreach($services as $service)
        <div class="col-xl-3 col-lg-6 col-md-6">
          <div class="bd-why-choose-wrapper style-three">
            <div class="bd-why-choose-item"> <span class="bd-why-choose-icon"><img src="{{asset('/admin_upload/'.$service->image??'')}}" alt="icon"></span>
              <div class="bd-why-choose-content">
                <h5 class="bd-why-choose-title">{{$service->title??''}}</h5>
                <div  class="bd-why-choose-description">
                 <p>{{$service->sub_title??''}}</p>
                  <p><a href="{{route('services-details',['id'=>$service->slug])}}">View More</a></p>
               </div>
              </div>
            </div>
          </div>
        </div>
        @endforeach
      <div class="col-xl-3 col-lg-6 col-md-6">
          <div class="bd-why-choose-wrapper style-three">
            <div class="bd-why-choose-item"> <span class="bd-why-choose-icon"><img src="assets/images/services4w.png" alt="icon"></span>
               <div class="bd-why-choose-content">
                <h5 class="bd-why-choose-title">HEI Exposure Visits</h5>
                <div  class="bd-why-choose-description">
                <p>Learn from industry-leading experts, combining real-world experience with innovative teaching techniques. </p>
                <p><a href="{{route('hei.learning.visits')}}">View More</a></p>
              </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
 </div>
  </section>
  <section class="bd-about-area section-space theme-bg p-relative bd-noise-bg">
    <div class="container">
      <div class="bd-about-shape-wrap">
        <div class="shape-1"><img src="assets/images/shape/about-solid-circle.webp" alt="shape"></div>
        <div class="shape-2"><img src="assets/images/shape/about-book-shape.webp" alt="shape"></div>
        <div class="shape-3"><img src="assets/images/shape/about-wave-shape.webp" alt="shape"></div>
        <div class="shape-4"><img src="assets/images/shape/about-circle.webp" alt="shape"></div>
      </div>
      <div class="row g-5">
        <div class="col-xl-5 col-lg-5 col-md-12">
          <div class="bd-about-wrapper style-one">
            <div class="bd-about-thumb-inner">
              <div class="bd-about-thumb-wrapper">
                <div class="bd-about-thumb"> <img src="{{asset('/admin_upload/'.$about->image1??'')}}" alt="image"> </div>
                <div class="bd-about-thumb-small"> <img src="{{asset('/admin_upload/'.$about->image2??'')}}" alt="image"> </div>
              </div>
              <div class="bd-about-thumb-shape"> <img src="assets/images/shape/dot-shape-01.webp" alt="image"> </div>
            </div>
          </div>
        </div>
        <div class="col-xl-7 col-lg-7 col-md-12">
          <div class="bd-about-wrapper style-one">
            <div class="bd-about-content-wrapper">
              <div class="bd-section-title-wrapper">                 <h2 class="bd-section-title white-text">{{$about->title??""}} </h2>
                <p class="bd-section-paragraph has-border-sec">{{ Str::words($about->subtitle ?? '', 40, '...') }}</p>
              </div>
              <div class="bd-about-feature-list">
                <div class="bd-about-feature-item">
                  <div class="bd-about-feature-icon"> <span><img src="{{asset('/admin_upload/'.$about->vision_image??'')}}" alt="Icon"></span></div>
                  <div class="bd-about-feature-content">
                    <h6 class="bd-about-feature-title">{{$about->vision_heading??""}}  </h6>
                    <p class="bd-about-feature-desc">{{$about->vision_text??""}}</p>
                  </div>
                </div>
                <div class="bd-about-feature-item">
                  <div class="bd-about-feature-icon"> <span><img src="{{asset('/admin_upload/'.$about->mission_image??'')}}" alt="Icon"></span> </div>
                  <div class="bd-about-feature-content">
                    <h6 class="bd-about-feature-title"> {{$about->mission_heading??""}} </h6>
                    <p class="bd-about-feature-desc"> {{$about->mission_text??""}} </p>
                  </div>
                </div>
              </div>
              <div class="bd-about-btn"> <a class="bd-btn btn-secondary-white" href="{{route('about')}}">Know More</a> </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="bd-category-area section-space">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-xl-8">
          <div class="bd-section-title-wrapper section-title-space pb-30 text-center">
                        <h2 class="bd-section-title">Find Your Course </h2>
          </div>
        </div>
      </div>
      
<div class="swiper kindergartenProgramActive swiper-shadow-add">
  <div class="swiper-wrapper">
    @foreach($cources as $course)
    <!-- Slide 1 -->
    <div class="swiper-slide">
      <div class="bd-course-wrapper style-seven">
          <a href="{{route('course-details',['id'=>$course->slug])}}" class="bd-course-thumb-wrapper bd-course-thumb-style p-relative">
            <div class="bd-course-thumb-bg">
              <img src="{{ asset('upload/courses/' . $course->image) }}" alt="course image" class="img-fluid">
            </div>
          </a>
          <div class="bd-course-content">
            <div class="bd-course-content-bottom d-flex align-items-center gap-30 mb-10">
              <div class="bd-course-lesson has-separator"> <span><i class="fa-light fa-clock"></i> {{$course->lessons??''}}</span> </div>
              <div class="bd-course-lesson"> <span><i class="fa-sharp fa-solid fa-list"></i> {{$course->students??''}}</span> </div>
            </div>
            <h5 class="bd-course-title underline mb-10"><a href="{{route('course-details',['id'=>$course->slug])}}">{{ $course->title ?? '' }}</a></h5>
            <p class="bd-course-description mb-10">{{ $course->short_title ?? '' }}</p>

            <div class="bd-course-rating d-inline-flex align-items-center gap-10 mb-30">
              <div class="bd-course-rating-icon d-flex rating-color">
                @php
                    $rating = $course->rating ?? 0; 
                    $fullStars = floor($rating);
                    $halfStar = ($rating - $fullStars) >= 0.5;
                    $emptyStars = 5 - ceil($rating);
                @endphp

                <!-- Full Stars -->
                @for ($i = 0; $i < $fullStars; $i++)
                    <i class="fa-solid fa-star"></i>
                @endfor

                <!-- Half Star -->
                @if ($halfStar)
                    <i class="fa-solid fa-star-half"></i>
                @endif

                <!-- Empty Stars -->
                @for ($i = 0; $i < $emptyStars; $i++)
                    <i class="fa-solid fa-star" style="color: #e4e4e4;"></i>
                @endfor
              </div>
              <div class="bd-course-rating-text"><span>({{ $course->rating ?? '' }} / 5 Ratings)</span></div>
            </div>
          </div>
          <div class="bd-course-info">
            <div class="bd-course-info-wrapper">
              <a class="bd-badge badge-primary mb-15" href="#">{{ $course->certificate_badge ?? '' }}</a>
              <h5 class="bd-course-title underline mb-10"><a href="{{route('course-details',['id'=>$course->slug])}}">{{ $course->title ?? '' }}</a></h5>
              <div class="bd-course-info-label mb-15">Level: <span>{{ $course->level ?? '' }}</span></div>
              <p>{{ $course->short_title ?? '' }}</p>
              <p>{{ $course->description ?? '' }}</p>
              
              <div class="bd-course-price mb-20">
                <span class="current-price has-big">₹ {{ $course->amount2 ?? '' }}</span>
                <span class="old-price has-big">₹ {{ $course->amount ?? '' }}</span>
              </div>
              <div class="bd-course-action-btn d-flex align-items-center gap-15">
                <a href="{{route('course-details',['id'=>$course->slug])}}" class="bd-btn btn-outline-border-primary">View Details</a>
               </div>
            </div>
          </div>
      </div>
    </div>
    @endforeach
  </div>

  <!-- Navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- Pagination -->
   </div>

</div>
  </section>
  <section class="bd-testimonial-area p-relative theme-bg">
    <div class="bd-testimonial-video" data-background="assets/images/bg/testimonial-bg-online-2.webp">
      <div class="bd-testimonial-video-btn animation-two"> <a href="{{$home_page_video->youtube_link??''}}" class="bd-play-btn popup-video"><i class="fa-regular fa-play"></i></a> </div>
    </div>
    <div class="bd-testimonial-bg-two d-none d-lg-block bd-noise-bg"></div>
    <div class="container">
      <div class="row justify-content-end align-items-center">
        <div class="col-xxl-7 col-xl-6 col-lg-6">
          <div class="bd-testimonial-wrap section-space">
            <div class="bd-testimonial-shape-quote"> <img src="assets/images/shape/testimonial-quote-icon.webp" alt="shape"> </div>
            <div class="bd-section-title-wrapper section-title-space">               <h2 class="bd-section-title white-text mb-20"> Hear From Our Participants </h2>
            </div>
            <div class="swiper testimonialActiveFour">
              <div class="swiper-wrapper">
                @foreach($testimonials as $testimonial)
                <div class="swiper-slide">
                  <div class="bd-testimonial-wrapper style-six">
                    <div class="bd-testimonial-item">
                    <div class="bd-testimonial-rating mb-30">
    @for ($i = 1; $i <= 5; $i++)
        <i class="{{ $i <= ($testimonial->rating ?? 0) ? 'fas fa-star' : 'far fa-star' }}"></i>
    @endfor
</div>
                      <div class="bd-testimonial-content">
                        <p>{{$testimonial->description??""}}</p>
                      </div>
                      <div class="bd-testimonial-meta d-flex-between">
                        <div class="author">
                          <div class="thumb"> <img src="{{ asset('news_pic/' . ($testimonial->news_pic ?? 'No Image')) }}" alt="images"> </div>
                          <div class="details">
                            <h6 class="name">{{$testimonial->name??""}}</h6>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                @endforeach
               
              </div>
            </div>
                      </div>
        </div>
      </div>
    </div>
  </section>
</main>


<script>
  document.addEventListener("DOMContentLoaded", function () {
    var swiper = new Swiper(".kindergartenProgramActive", {
      loop: true,
      spaceBetween: 30,
      slidesPerView: 1,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      pagination: {
        el: ".bd-testimonial-pagination",
        clickable: true,
      },
      breakpoints: {
        768: {
          slidesPerView: 2,
        },
        1024: {
          slidesPerView: 3,
        },
      },
    });
  });
</script>



<style type="text/css">
.swiper-button-next,
.swiper-button-prev {color: #ffffff; background-color: #951c4b; width: 40px;height: 40px;border-radius: 50%;top: 50%;transform: translateY(-50%);box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);z-index: 10;}
.swiper-button-next::after,
.swiper-button-prev::after {font-size: 18px;font-weight: bold;}
.swiper-button-next {right: 10px;}
.swiper-button-prev {left: 10px;}
.swiper-button-next:hover,
.swiper-button-prev:hover {background-color: #0056b3;color: #fff;}

.bd-course-thumb-style .bd-course-thumb-bg img {
    width: 100%;
    height: -webkit-fill-available;
    border-radius: 12px;
    object-fit: cover;
}

</style>



@endsection