@extends('user.layouts.app')

@section('body_class', 'sports')

@section('content')
<main class="site-main">
  <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>Sports</li>
      </ul>
    </div>
  </div>

  <section class="affiliated-clubs">
    <div class="container">
      <div class="page-title">
        <h4 data-aos="fade-up">Sports</h4>

        <p data-aos="fade-up">{!! optional($sports)->description ?? " " !!}</p>
      </div>
      <!-- <ul class="sports-item-list">      
          @foreach($sportCategory as $sport)
          <li>
            <a href="#{{$sport->slug}}" class="sport-item-inner" data-aos="fade-up">
              <div class="sport-image">
                <img src="{{ asset('/storage/distribution/images/sport_categories/thumbnails/' . $sport->thumbnail) }}" alt="no-img" />
              </div>
              <div class="sport-name">
                <div class="sport-name-text">{{ $sport->title }}</div>
              </div>
            </a>
          </li>
          @endforeach
        </ul>        -->
    </div>
  </section>

  <section class="sport-details">
    <div class="container">
      <div class="sport-details-plate">
        <div class="sport-nav pt-0 facility-left-tab">
          <ul>
            @foreach($sportCategory as $sport)

            <li>
              <a href="#{{$sport->slug}}">{{ $sport->title }}</a>
            </li>
            @endforeach

          </ul>
        </div>

        <div class="sport-nav-content pt-0 mt-0">
          @foreach($sportCategory as $sport)

          <div class="activeSection" id="{{$sport->slug}}">
            <div class="section-inner">
              <div class="title">
                 <h4 class="mt-2 mt-lg-4" data-aos="fade-up">{{ $sport->title }}</h4>
              </div>
                <div class="two-columns-facility">
                  <div class="">
                   
                    <div class="section-description green">
                      {!! $sport->description !!}
                    </div>
                  </div>
                  <div class="section-banner">
                    <img data-aos="fade-down" data-aos-easing="linear" data-aos-duration="300"
                      src="{{ asset('/storage/distribution/images/sport_categories/' . $sport->image) }}"
                      alt="no-img" />
                  </div>
                </div>


            </div>
          </div>
          @endforeach
        </div>
      </div>
    </div>
  </section>

</main>
@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