@extends('layouts.app')

@section('title', $album->albumName . ' - ' . ($siteSettings->siteName ?? 'IPC Shalom Chicago'))

@section('content')

<section class="heading" style="background-image: url('{{ asset('images/bg.png') }}');">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="topheader">
          <h1>{{ strtoupper($album->albumName) }}</h1>
          <h3>ALBUM PHOTO GALLERY</h3>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="becomepart" style="background-image: url('{{ asset('images/bg5.png') }}');">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-sm-12">
                <div class="part">
                    <h1><span class="red_color">Want to become a part of</span> {{ $siteSettings->siteName ?? 'IPC Shalom Chicago' }}?</h1>
                </div>
            </div>
            <div class="col-lg-4 col-sm-12">
                <div class="part_btn">
                   <a href="{{ url('/page/contact-us') }}">Contact Us</a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="photos-section" style="padding: 60px 0; background-color: #fafafa;">
  <div class="container">
    <div class="row mb-4">
      <div class="col-lg-12">
        <a href="{{ route('gallery.albums') }}" class="btn btn-outline-danger px-4" style="border-radius: 20px; font-weight: 700; border-width: 2px;">
            <i class="fa fa-arrow-left mr-2"></i> Back to Albums
        </a>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12 text-center mb-5">
        <h2 style="color: #333; font-weight: 800; display: inline-block; border-bottom: 3px solid #E22B27; padding-bottom: 10px;">{{ $album->albumName }}</h2>
        <p class="text-muted mt-2">{{ $photos->count() }} photos in this album</p>
      </div>
    </div>

    <div class="row">
      @forelse($photos as $index => $photo)
        <div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-4">
          <div class="photo-card" style="border: 1px solid #eee; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.02); transition: all 0.3s ease; background-color: #fff; cursor: pointer;" onclick="openLightbox({{ $index }})">
            <div style="height: 200px; overflow: hidden; position: relative;">
              <img src="{{ \App\Helpers\AssetHelper::getImage($photo->gphotoFile, 'images/lens.png') }}" alt="{{ $photo->gphotoCourse ?? 'Gallery Photo' }}" style="width: 100%; height: 100%; object-fit: cover; transition: all 0.3s ease;">
              <div class="photo-overlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); opacity: 0; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease;">
                <i class="fa fa-search-plus text-white" style="font-size: 30px;"></i>
              </div>
            </div>
            @if($photo->gphotoCourse && $photo->gphotoCourse !== 'None')
              <div style="padding: 12px; text-align: center;">
                <p style="font-size: 14px; font-weight: 600; color: #555; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ $photo->gphotoCourse }}</p>
              </div>
            @endif
          </div>
        </div>
      @empty
        <div class="col-lg-12 text-center py-5">
          <div class="alert alert-info py-4">
            <i class="fa fa-picture-o fa-2x mb-2"></i>
            <p class="m-0">No photos in this album yet.</p>
          </div>
        </div>
      @endforelse
    </div>
  </div>
</section>

<!-- Lightbox Modal -->
<div class="modal fade" id="lightboxModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content" style="background: transparent; border: none;">
      <div class="modal-body p-0 position-relative text-center">
        <button type="button" class="close text-white position-absolute" data-dismiss="modal" aria-label="Close" style="top: -35px; right: 0; font-size: 35px; opacity: 0.8; outline: none;">
          <span aria-hidden="true">&times;</span>
        </button>
        <div style="max-height: 80vh; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: #000; border-radius: 8px;">
          <img id="lightboxImage" src="" class="img-fluid" style="max-height: 80vh; object-fit: contain;">
        </div>
        <div id="lightboxCaption" class="text-white mt-2 font-weight-bold" style="font-size: 16px;"></div>
        
        <!-- Controls -->
        <a class="position-absolute text-white" href="#" onclick="prevPhoto()" style="top: 50%; left: -50px; transform: translateY(-50%); font-size: 40px; text-decoration: none; opacity: 0.8;">
          <i class="fa fa-chevron-left"></i>
        </a>
        <a class="position-absolute text-white" href="#" onclick="nextPhoto()" style="top: 50%; right: -50px; transform: translateY(-50%); font-size: 40px; text-decoration: none; opacity: 0.8;">
          <i class="fa fa-chevron-right"></i>
        </a>
      </div>
    </div>
  </div>
</div>

<section class="joinus" style="background-image: url('{{ asset('images/join.png') }}');">
    <div class="container">
        <div class="row">
            <div class="col-lg-7 col-sm-12">
                <div class="inner_joinus">
                    <h1>Join Us in Worship</h1>
                    <form action="{{ route('contact.join_worship') }}" method="POST">
                        @csrf
                        <input type="text" name="name" placeholder="Name" required>
                        <input class="fifty" type="email" name="email" placeholder="Email" required>
                        <input class="fifty" type="text" name="phone" placeholder="Phone">
                        <input class="fifty" type="text" name="location" placeholder="Location">
                        <select class="fifty" name="interest">
                            <option value="">I want to...</option>
                            <option value="Attend Service">Attend Service</option>
                            <option value="Join a Ministry">Join a Ministry</option>
                            <option value="Request Prayer">Request Prayer</option>
                        </select>
                        <div style="clear: both; padding-top: 15px;">
                            <button type="submit" class="btn btn-danger btn-lg px-4" style="background-color: #E22B27; border-color: #E22B27; font-weight: bold; border-radius: 5px;">Submit Request</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-lg-5 col-sm-12">
                
            </div>
        </div>
    </div>
</section>

<style>
.photo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.06) !important;
}
.photo-card:hover .photo-overlay {
  opacity: 1;
}
.photo-card:hover img {
  transform: scale(1.03);
}
</style>

@endsection

@section('scripts')
<script>
  var photos = [
    @foreach($photos as $photo)
      {
        url: "{{ \App\Helpers\AssetHelper::getImage($photo->gphotoFile, 'images/lens.png') }}",
        caption: "{{ $photo->gphotoCourse && $photo->gphotoCourse !== 'None' ? $photo->gphotoCourse : '' }}"
      },
    @endforeach
  ];
  
  var currentIndex = 0;

  function openLightbox(index) {
    currentIndex = index;
    updateLightbox();
    $('#lightboxModal').modal('show');
  }

  function updateLightbox() {
    if (photos.length > 0) {
      $('#lightboxImage').attr('src', photos[currentIndex].url);
      $('#lightboxCaption').text(photos[currentIndex].caption);
    }
  }

  function nextPhoto() {
    event.preventDefault();
    currentIndex = (currentIndex + 1) % photos.length;
    updateLightbox();
  }

  function prevPhoto() {
    event.preventDefault();
    currentIndex = (currentIndex - 1 + photos.length) % photos.length;
    updateLightbox();
  }

  // Keyboard navigation
  $(document).keydown(function(e) {
    if ($('#lightboxModal').hasClass('show')) {
      if (e.keyCode == 37) { // Left arrow
        prevPhoto();
      } else if (e.keyCode == 39) { // Right arrow
        nextPhoto();
      }
    }
  });
</script>
@endsection