@extends('layouts.app')

@section('title', 'Photo Albums - ' . ($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>PHOTO ALBUMS</h1>
          <h3>MEMORIES & ACTIVITIES OF IPC SHALOM CHICAGO</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="albums-section" style="padding: 60px 0; background-color: #fafafa;">
  <div class="container">
    <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;">Our Photo Gallery</h2>
        <p class="text-muted mt-2" style="font-size: 16px;">Browse through the visual memories of our church family and programs</p>
      </div>
    </div>

    <div class="row">
      @forelse($albums as $album)
        <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
          <div class="album-card" style="background: #fff; 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; height: 100%; display: flex; flex-direction: column;">
            <div class="album-cover-wrapper" style="height: 230px; overflow: hidden; position: relative; background-color: #eee;">
              <img src="{{ \App\Helpers\AssetHelper::getImage($album->albumCover, 'images/lens.png') }}" alt="{{ $album->albumName }}" style="width: 100%; height: 100%; object-fit: cover; transition: all 0.5s ease;">
              <div class="photo-count-badge" style="position: absolute; bottom: 15px; right: 15px; background: rgba(226, 43, 39, 0.9); color: white; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">
                <i class="fa fa-camera mr-1"></i> {{ $album->photos->count() }}
              </div>
            </div>
            <div class="album-info" style="padding: 20px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between;">
              <div>
                <h4 style="font-size: 18px; font-weight: 700; color: #333; margin-bottom: 10px; line-height: 1.4;">{{ $album->albumName }}</h4>
              </div>
              <div class="mt-3">
                <a href="{{ route('gallery.album', $album->albumId) }}" class="btn btn-danger btn-block" style="background-color: #E22B27; border-color: #E22B27; font-weight: 700; border-radius: 5px; transition: all 0.3s;">View Photos</a>
              </div>
            </div>
          </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 photo albums available at the moment.</p>
          </div>
        </div>
      @endforelse
    </div>
  </div>
</section>

<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>
.album-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08) !important;
}
.album-card:hover img {
  transform: scale(1.05);
}
.album-card .btn-danger:hover {
  background-color: #c81e1a !important;
  border-color: #c81e1a !important;
}
</style>

@endsection