@extends('user.layouts.app')

@section('body_class', 'committees')

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

    <section class="committees-section">
      <div class="container">
        <div class="page-title">
          <h4 data-aos="fade-up">Committees</h4>
        </div>  
        <div class="committees-wrap">          

          <div class="committees-outer">
                  @foreach($committees as $committee)
      
    <div class="committees-box icon-{{$i}}">
        <h5 class="green">
            @if($committee->image)
                <img class="committees-box-h5-img" src="{{ asset('storage/distribution/images/committee/' . $committee->image) }}" alt="{{ $committee->committee_name }}">
            @endif
            {{ $committee->committee_name }}
        </h5>
        <ul class="committees-list">
            @foreach($committieeMembers->where('committee_id', $committee->id) as $member)
                <li class="green">
                  <div>
                    {{ $member->member_name }} 
                    @if(!empty($member->member_designation))
                      — <strong>{{ $member->member_designation }}</strong>
                    @endif
                  </div>
                </li>
                
            @endforeach
        </ul>
    </div>
    @endforeach
        </div>  
        
      </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