@extends('web.layouts.layout')
<title>@yield('meta_title', 'Services Online Course')</title>
<meta name="description" content="@yield('')">
<meta name="keywords" content="@yield('')">
@section('content')
<main>
  <!-- breadcrumb area start -->
  <section class="bd-breadcrumb-area p-relative fix z-index-11">
    <div class="bd-breadcrumb-bg-two" data-background="assets/images/breadcrumb/breadcrumb-bg-2.webp"></div>
    <div class="bd-breadcrumb-wrapper p-relative">
      <div class="container">
        <div class="row">
          <div class="col-xl-12">
            <div class="bd-breadcrumb style-two d-flex-center">
              <div class="bd-breadcrumb-content">
                <h1 class="bd-breadcrumb-title"> Hybrid Training Workshops </h1>
                <div class="bd-breadcrumb-list"> <span><a href="/">Home</a></span> <span class="divider"><i class="fa-regular fa-angle-right"></i></span> <span class="active"> Hybrid Training Workshops </span> </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- breadcrumb area end -->
  <section class="bd-why-choose-area fix online-self">
    <div class="container">
  
      <div class="row justify-content-center pb-4">
              <div class="col-xl-12">
                <div class="bd-section-wrapper section-title-space">
                  <p>{!!$Hybrid_Training_Header->description??''!!}</p>
                 </div>
              </div>
         </div>



<div class="row gy-30">
  @foreach($Hybrid_Training_Workshops as $workshop)
  <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
    <div class="bd-pricing-plan-wrap style-two">
      <div class="bd-pricing-plan-card">
        <div class="pricing-header">
          <h3 class="title mt-0">{{ $workshop->title ?? '' }}</h3>
          <p>{!! $workshop->description ?? '' !!}</p>
          <div class="pricing-btn">
            <a class="bd-btn btn-outline-primary w-100" href="{{ $workshop->link ?? '' }}">Learn More</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  @endforeach
</div>




 
    </div>
  </section>


     




<section class="bd-category-area section-space">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-6">
        <div class="bd-section-wrapper section-title-space text-center">
          <span class="bd-section-subtitle">Testimonial</span>
          <h2 class="bd-section-title mb-20">Testimonial Videos </h2>
        </div>
      </div>
    </div>
    <div class="swiper kindergartenProgramActive swiper-shadow-add">
      <div class="swiper-wrapper">
      @foreach($learning_circles as $testimonial)
      <div class="swiper-slide">
        <div class="bd-course-wrapper style-four">
        <!-- <iframe width="100%" height="210" src="{{$testimonial->url??''}}" title="Shweta Pathak" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> -->
              </div>
      </div>
      @endforeach
      </div>
       <div class="bd-testimonial-pagination bd-dots-pagination has-primary"> </div>
    </div>
  </div>
</section>


<!-- brand area start -->
        <div class="bd-brand-area pt-50 pb-50 theme-bg-05 fix">
            <div class="container">
                <div class="row">
                    <div class="bd-brand-wrapper style-two">
                        <div class="bd-brand-box has-border">
                            @foreach($partner as $row)
                            <div class="bd-brand-item">
                                <img src="{{asset('/admin_upload/'.$row->image??'')}}" alt="brand">
                            </div>
                            @endforeach 
                        </div>
                    </div>
                </div>
            </div>
        </div>


</main>
@endsection
@section('js')

<script>
  // Get all video elements
  const videos = document.querySelectorAll('video');

  videos.forEach((video) => {
    video.addEventListener('play', () => {
      // Pause all other videos
      videos.forEach((v) => {
        if (v !== video) {
          v.pause();
        }
      });
    });
  });
</script>
<script>
    new Swiper('.client-slider', {
  slidesPerView: 6,
  spaceBetween: 15,
  loop: true,

  // Autoplay settings
  autoplay: {
    delay: 2500,              // Time (ms) between slides
    disableOnInteraction: false, // Continue autoplay after interaction
    pauseOnMouseEnter: true      // Pause when pointer is over slider
  },

  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  breakpoints: {
    320:  { slidesPerView: 2, spaceBetween: 5 },
    640:  { slidesPerView: 4, spaceBetween: 10 },
    1024: { slidesPerView: 6, spaceBetween: 10 },
  },
});

  </script>
<style>
    iframe {
      height: 210px!important;
      border: 0!important;
      width: 100%!important;
  }
  .bd-testimonial-pagination{
    margin-top: -307px;
  }
  </style>
@endsection