@extends('layouts.frontend')
@section('title', 'Gallery - Yahya Playland')

@section('content')

  <!-- Hero -->
  <section id="home" class="hero" role="region" aria-label="Hero banner">
    <img src="{{ asset('images/hero-banner.jpg') }}" alt="banner">
  </section>

  <!-- Gallery Section -->
  <section class="gallery-section feature-gallery" role="region" aria-label="Gallery section">
    <div class="container">
      <div class="about-heading text-center mb-5">
        <h2>GALLERY</h2>
      </div>

      <div class="masonry mt-4" id="masonryGrid">
        <div class="row g-3">

          <div class="col-md-12">
            <figure class="gallery-item">
              <figcaption class="img-title">Accessible Slide</figcaption>
              <img src="{{ asset('images/gallery1.jpg') }}" alt="Gallery image 1"
                   data-bs-toggle="modal" data-bs-target="#galleryModal"
                   onclick="document.getElementById('modalImage').src=this.src">
            </figure>
          </div>

          <div class="col-md-6">
            <figure class="gallery-item">
              <figcaption class="img-title">Electric Swing</figcaption>
              <img src="{{ asset('images/gallery2.jpg') }}" alt="Gallery image 2"
                   data-bs-toggle="modal" data-bs-target="#galleryModal"
                   onclick="document.getElementById('modalImage').src=this.src">
            </figure>
          </div>

          <div class="col-md-6">
            <figure class="gallery-item">
              <figcaption class="img-title">Accessible Swing</figcaption>
              <img src="{{ asset('images/gallery3.jpg') }}" alt="Gallery image 3"
                   data-bs-toggle="modal" data-bs-target="#galleryModal"
                   onclick="document.getElementById('modalImage').src=this.src">
            </figure>
          </div>

          <div class="col-md-6">
            <figure class="gallery-item">
              <figcaption class="img-title">Normal Wing</figcaption>
              <img src="{{ asset('images/gallery4.jpg') }}" alt="Gallery image 4"
                   data-bs-toggle="modal" data-bs-target="#galleryModal"
                   onclick="document.getElementById('modalImage').src=this.src">
            </figure>
          </div>

          <div class="col-md-6">
            <figure class="gallery-item">
              <figcaption class="img-title">Bungee Trampoline</figcaption>
              <img src="{{ asset('images/gallery6.jpg') }}" alt="Gallery image 6"
                   data-bs-toggle="modal" data-bs-target="#galleryModal"
                   onclick="document.getElementById('modalImage').src=this.src">
            </figure>
          </div>

          <div class="col-md-6">
            <figure class="gallery-item">
              <figcaption class="img-title">Accessible Carousel</figcaption>
              <img src="{{ asset('images/gallery5.jpg') }}" alt="Gallery image 5"
                   data-bs-toggle="modal" data-bs-target="#galleryModal"
                   onclick="document.getElementById('modalImage').src=this.src">
            </figure>
          </div>

          <div class="col-md-6"></div>

          <div class="col-md-6">
            <figure class="gallery-item">
              <figcaption class="img-title">Soccer Zone</figcaption>
              <img src="{{ asset('images/gallery10.jpg') }}" alt="Gallery image 10"
                   data-bs-toggle="modal" data-bs-target="#galleryModal"
                   onclick="document.getElementById('modalImage').src=this.src">
            </figure>
          </div>

          <div class="col-md-6">
            <figure class="gallery-item">
              <figcaption class="img-title">Basketball</figcaption>
              <img src="{{ asset('images/gallery9.jpg') }}" alt="Gallery image 9"
                   data-bs-toggle="modal" data-bs-target="#galleryModal"
                   onclick="document.getElementById('modalImage').src=this.src">
            </figure>
          </div>

          <div class="col-md-6">
            <figure class="gallery-item">
              <figcaption class="img-title">Sensory Zone</figcaption>
              <img src="{{ asset('images/gallery7.jpg') }}" alt="Gallery image 7"
                   data-bs-toggle="modal" data-bs-target="#galleryModal"
                   onclick="document.getElementById('modalImage').src=this.src">
            </figure>
          </div>

          <div class="col-md-6">
            <figure class="gallery-item">
              <figcaption class="img-title">&nbsp;</figcaption>
              <img src="{{ asset('images/gallery8.jpg') }}" alt="Gallery image 8"
                   data-bs-toggle="modal" data-bs-target="#galleryModal"
                   onclick="document.getElementById('modalImage').src=this.src">
            </figure>
          </div>

        </div>
      </div>
    </div>
  </section>

  <!-- Bootstrap Modal for full-size view -->
  <div class="modal fade" id="galleryModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
      <div class="modal-content p-3">
        <div class="modal-header border-0 p-0 mb-2">
          <button type="button" class="btn-close ms-auto" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body text-center p-0">
          <img src="" alt="Large view" id="modalImage" class="modal-img">
        </div>
      </div>
    </div>
  </div>

@endsection