@extends('user.layouts.app')

@section('body_class', 'archive')

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

<section class="">
  <div class="container">
    <div class="page-title">
      <h4>
        Event Archive
      </h4>
    </div>
    @if($events->isNotEmpty())
      <ul class="gallery-thum images-view event_archive_row">
        @foreach($events as $event)
        <li>
          <div class="gallery-thum-inner">
            <div class="gallery-thum-box">
              <a href="{{route('archive.detail', $event->year)}}">
                <img class="lightbox-enabled file" src="./images/file.png" data-imgsrc="./images/fashion3_big.jpg" alt="">
              </a>
            </div>
            <div class="gallery-thum-name">{{$event->year}}</div>
          </div>
        </li>
        @endforeach
      </ul>
    @else
      <div class="gallery-empty-state">
        <p>No data found.</p>
      </div>
    @endif
  </div>
</section>
<!-- <section class="lightbox-container">
      <span class="material-symbols-outlined material-icons lightbox-btn left" id="left">
      arrow_back
      </span>
      <span class="material-symbols-outlined material-icons lightbox-btn right" id="right">
      arrow_forwards
      </span>
      <span id="close" class="close material-icons material-symbols-outlined">
        <img src="{{ asset('images/close-icon.svg') }}" alt="">
      </span>
      <div class="lightbox-image-wrapper">
        <img alt="lightboximage" class="lightbox-image" />     
      </div>
    </section> -->

@endsection

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

@push('scripts')
<script>


</script>
@endpush