@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>
    <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="javascript:void(0)">
              <img class="lightbox-enabled file" src="/images/file.png" data-imgsrc="./images/fashion3_big.jpg" alt="">
            </a> -->
            <!-- Loop through the photos of the event -->
            @foreach($event->photos as $photo)
            <a href="javascript:void(0)" class="lightbox-trigger" data-imgsrc="{{ asset('storage/distribution/images/events/' . $photo->name) }}">
              <img class="lightbox-enabled file tour-{{ $event->id }}" src="{{ asset('storage/distribution/images/events/' . $photo->name) }}" alt="{{ $event->name }}">
            </a>
            @endforeach
          </div>
          <div class="gallery-thum-name">{{$event->name}}</div>
        </div>
      </li>
      @endforeach
    </ul>
  </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