@extends('layouts.base')
@section('title')
Photo Gallery
@endsection

@section('content')
<div class="container-fluid p-0" style="background-image: url('https://static.vecteezy.com/system/resources/previews/005/240/727/original/abstract-background-design-white-and-gray-abstract-white-pattern-box-free-vector.jpg'); background-size:cover; background-repeat: no-repeat;">

  <div class="row">
    <div class="col-sm-12 my-auto text-center backimghead"
      style="background: linear-gradient(rgba(84, 51, 34, 0.78), rgba(84, 51, 34, 0.788)), url('{{ asset('img/bdc.jpeg') }}') center/cover; height: 430px;">
      <h2 style="padding-top: 210px; color:white;" class="fw-bold text-uppercase heading21 headerinner">
        Photo
      </h2>
      <span style="color:white; font-family: Lexend, serif;" class="fw-bold subheading">
        <a href="{{ asset('/') }}" style="text-decoration: none; color:white;">HOME</a>&nbsp;/&nbsp;
        <a href="javascript:void(0)" style="color:white; text-decoration: none;" class="text-uppercase">
          Photo
        </a>
      </span>
    </div>
  </div>

  <div class="container py-5" style="font-family:'Poppins', sans-serif;">
    <div class="text-center mb-4">
      <h2 class="fw-bold text-uppercase" style="color:#ff6600;">Our Photos</h2>
      <div class="mx-auto" style="width:80px;height:3px;background:#ff6600;border-radius:10px;"></div>
    </div>

    <div class="row g-4">
      @forelse($photos as $photo)
      <div class="col-md-6 col-lg-4">
        <div class="card shadow-sm rounded-4 overflow-hidden gallery-card h-100" style="border:1px dashed #ff6600;">

          <div class="overflow-hidden" style="height:250px;">
            <img
              src="{{ asset($photo->image) }}"
              alt="Photo"
              class="img-fluid w-100 h-100 gallery-img"
              data-bs-toggle="modal"
              data-bs-target="#photoModal"
              data-img="{{ asset($photo->image) }}"
              style="cursor:pointer; object-fit:cover;">
          </div>


          <p class="mb-1 fw-bold text-secondary ps-2">
            {{ $photo->title ?? 'Untitled' }}
          </p>

          <p class="mb-0 fw-bold ps-2" style="color:#ff6600; font-size:16px;">
            {{ $photo->description ?? '' }}
          </p>
        </div>
      </div>
      @empty
      <div class="col-12 text-center">
        <p class="text-muted">No photo gallery data found.</p>
      </div>
      @endforelse
    </div>
  </div>

  <div class="modal fade" id="photoModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
      <div class="modal-content bg-transparent border-0">
        <div class="modal-body text-center position-relative">
          <button type="button"
            class="btn-close btn-close-white position-absolute end-0 top-0 m-3"
            data-bs-dismiss="modal"></button>

          <img id="modalPhotoImage"
            src=""
            class="img-fluid rounded-4 shadow-lg"
            style="max-height:90vh;">
        </div>
      </div>
    </div>
  </div>

</div>
<style>
  .gallery-card {
    transition: all 0.3s ease-in-out;
  }

  .gallery-card:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-5px);
  }

  .gallery-card:hover img {
    transform: scale(1.05);
  }

  .gallery-img {
    transition: 0.3s ease-in-out;
  }

  #photoModal {
    z-index: 99999 !important;
  }

  #photoModal .modal-dialog {
    z-index: 99999 !important;
  }

  .modal-backdrop {
    z-index: 99998 !important;
  }

  header,
  .navbar,
  .header,
  .main-header {
    z-index: 1030 !important;
  }

  @media (max-width: 576px) {
    .gallery-card img {
      height: 200px !important;
    }
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const modalPhotoImage = document.getElementById('modalPhotoImage');

    document.querySelectorAll('.gallery-img').forEach(img => {
      img.addEventListener('click', function() {
        modalPhotoImage.src = this.getAttribute('data-img');
      });
    });
  });
</script>

@endsection