@extends('user.layouts.app')

@section('body_class', 'introduction_tolly')

@section('content')
     <section class="banner-slider">
      @foreach($bannerImages as $image)
      <div class="slider-item"><img src="{{ asset('/storage/distribution/images/banner_image/' . $image->image) }}" alt="Slide {{ $loop->iteration }}"></div>
      @endforeach
    </section>
    <div class="banner-inner-content">
      <div class="container">
        <ul class="bread-come">
          <li>
            <a href="/">Home</a>
          </li>
          <li>Introduction to Tolly</li>
        </ul>
      </div>
    </div>

    <section class="affiliated-clubs">
      <div class="container">
        <div class="page-title">
          <h4 data-aos="fade-up">An Introduction to Tolly</h4>
          @if(!empty($introduction_main))
          <div class="section-description green">
              {!! $introduction_main->description !!}
          </div>
         
          
            <ul class="box-thum">
              @if($introduction_main->image_one)
              <li>
                <div class="section-banner">
                  <img data-aos="fade-down" data-aos-easing="linear" data-aos-duration="300" src="{{ asset('/storage/distribution/images/all_information/' . $introduction_main->image_one) }}" alt="" />
                </div>
              </li>
              @endif
              @if($introduction_main->image_two)
              <li>
                <div class="section-banner">
                  <img data-aos="fade-down" data-aos-easing="linear" data-aos-duration="300" src="{{ asset('/storage/distribution/images/all_information/' . $introduction_main->image_two) }}" alt="" />
                </div>
              </li>
              @endif
              @if($introduction_main->image_three)
              <li>
                <div class="section-banner">
                  <img data-aos="fade-down" data-aos-easing="linear" data-aos-duration="300" src="{{ asset('/storage/distribution/images/all_information/' . $introduction_main->image_three) }}" alt="" />
                </div>
              </li>
              @endif
            </ul>
           @endif
        </div>     
      </div>
    </section>

    <section class="sport-details">
      <div class="container">
        <div class="sport-details-plate">  
          @if($introduction_sections->isNotEmpty())
          <div class="sport-nav p-0 facility-left-tab">
            <ul> 
              @foreach($introduction_sections as $value)
              <li>
                <a href="#{{$value->slug}}">{{$value->title}}</a>
              </li>
              @endforeach
            </ul>
          </div>
          <div class="sport-nav-content">
            @foreach($introduction_sections as $section)
            <div class="activeSection" id="{{ $section->slug }}">
              <div class="section-inner">
                <div class="title">
                  <h4 data-aos="fade-up">{{ $section->title }}</h4>
                </div>
                <div class="section-description green">
                    {!! $section->description !!}
                </div> 



                <ul class="box-thum ms-0">
                  @if($section->image_one)
                  <li class="ps-0">
                    <div class="section-banner">
                      <img data-aos="fade-down" data-aos-easing="linear" data-aos-duration="300" src="{{ asset('/storage/distribution/images/all_information/' . $section->image_one) }}" alt="" />
                    </div>
                  </li>
                  @endif
                  @if($section->image_two)
                  <li>
                    <div class="section-banner">
                      <img data-aos="fade-down" data-aos-easing="linear" data-aos-duration="300" src="{{ asset('/storage/distribution/images/all_information/' . $section->image_two) }}" alt="" />
                    </div>
                  </li>
                  @endif
                  @if($section->image_three)
                  <li>
                    <div class="section-banner">
                      <img data-aos="fade-down" data-aos-easing="linear" data-aos-duration="300" src="{{ asset('/storage/distribution/images/all_information/' . $section->image_three) }}" alt="" />
                    </div>
                  </li>
                  @endif
                </ul>
              </div>
            </div>
            @endforeach

          </div>
          @endif
        </div>
      </div>
    </section>
@endsection

@section('footer')
<!-- footer bottom appears here -->
@endsection

@push('scripts')
<script>
    let slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    function currentSlide(n) {
        showSlides(slideIndex = n);
    }

    function showSlides(n) {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        let dots = document.getElementsByClassName("dot");
        if (n > slides.length) {
            slideIndex = 1
        }
        if (n < 1) {
            slideIndex = slides.length
        }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " active";
    }
</script>
@endpush