@extends('user.layouts.app')

@section('body_class', 'others_facility')

@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>Other Facilities</li>
        </ul>
      </div>
    </div>

    <section class="sport-details">
      <div class="container">
          <div class="sport-details-plate">
            <div class="sport-nav pt-4 facility-left-tab">
              <ul>  
                @if(!empty($data))
                @foreach($data as $facility)
                <li>
                    <a href="#{{$facility->slug}}">{{$facility->title}}</a>
                </li>
                @endforeach
                @endif 
                <!-- <li>
                  <a href="#Library">Library</a>
                </li>
                <li>
                  <a href="#TheSalon">Transcend – The Salon</a>
                </li>
                <li>
                  <a href="#AnantaSpa">Ananta Spa</a>
                </li> -->
                <!-- <li>
                  <a href="{{route('showProshopPage')}}">Proshop</a>
                </li> -->
              </ul>
            </div>

            <div class="sport-nav-content">
              @if(!empty($data))
              @foreach ($data as $facility)
                <div class="pt-4" id="{{ $facility->slug }}">
                    <div class="section-inner">
                        <div class="title">
                            <h4 data-aos="fade-up">{{ $facility->title }}</h4>
                        </div>
                        <div class="two-columns-facility">
                            <div class="section-description">
                                 
                                @if($facility->description && $facility->description != '')
                                {!! $facility->description !!}
                                @endif
                                @if (isset($facilityImages[$facility->id]))
                              @foreach ($facilityImages[$facility->id] as $image)
                                  {!! $image->image_description !!}
                              @endforeach
                          @endif
                            </div>
                           <div>
                          @if (isset($facilityImages[$facility->id]))
                              @foreach ($facilityImages[$facility->id] as $image)
                                  <div class="section-banner">
                                      <img data-aos="fade-down" data-aos-easing="linear" data-aos-duration="300" src="{{ $image->image }}" alt="image" />
                                  </div>
                              @endforeach
                          @endif
                          </div>
                        </div>
                    </div>
                </div>
              @endforeach
              @endif
            </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