@extends('site.layouts.app')
@section('content')
	<!-- PAGE HERO -->
  <section class="page-hero">
    <div class="page-hero-bg">
      <img src="{{ asset('site/images/page-hider.png') }}" alt="صور آراء العملاء">
    </div>
    <div class="breadcrumb">
      <a href="{{ route('site.home') }}">الرئيسية</a>
      <span class="separator">←</span>
      <span>آراء العملاء</span>
    </div>
  </section>

  <!-- REVIEWS GALLERY SECTION -->
  <section class="section">
    <div class="container">
      <div class="section-title-wrapper">
        <h2 class="section-title">صور آراء العملاء</h2>
        <p style="text-align: center; color: var(--text-secondary); max-width: 600px; margin: 0 auto; font-size: 16px;">
          نفخر بثقة عملائنا ونسعى دائماً لتقديم أفضل مستويات الرعاية الطبية للحفاظ على نعمة البصر. إليكم بعض من رسائل
          وشكر مرضانا.
        </p>
      </div>

      <div class="reviews-gallery">
        @forelse($reviews as $review)
          <div class="review-card" onclick="openLightbox(this)">
            <div class="review-image-placeholder">
              <img src="{{ asset('storage/' . $review->image) }}" alt="{{ $review->title }}">
            </div>
          </div>
        @empty
          <p class="text-center" style="color: var(--text-secondary);">لا توجد صور آراء العملاء حالياً.</p>
        @endforelse
      </div>
    </div>
  </section>

  <!-- LIGHTBOX MODAL -->
  <div id="lightbox" class="lightbox">
    <span class="close-lightbox" onclick="closeLightbox()">&times;</span>
    <div class="lightbox-content-wrapper">
      <div id="lightbox-content-clone"></div>
    </div>
  </div>
@endsection


<!-- Inline Lightbox Script -->
<script>
  function openLightbox(element) {
    const lightbox = document.getElementById('lightbox');
    const contentClone = document.getElementById('lightbox-content-clone');

    // Clone the inner content of the clicked card
    contentClone.innerHTML = '';
    const clone = element.cloneNode(true);
    clone.removeAttribute('onclick'); // prevent recursion
    contentClone.appendChild(clone);

    lightbox.classList.add('active');
  }

  function closeLightbox() {
    document.getElementById('lightbox').classList.remove('active');
  }

  // Close on background click
  document.getElementById('lightbox').addEventListener('click', function (e) {
    if (e.target === this || e.target.classList.contains('lightbox-content-wrapper')) {
      closeLightbox();
    }
  });

  // Close on escape key
  document.addEventListener('keydown', function (event) {
    if (event.key === "Escape") {
      closeLightbox();
    }
  });
</script>