@extends('layouts.app')

@section('title', 'Articles - ' . ($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>Articles</h1>
          <h3>BULLETINS & SPIRITUAL WRITINGS</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="articles-section" style="padding: 60px 0; background-color: #fcfcfc;">
  <div class="container">
    <div class="row">
      @if($articles->count() > 0)
        @foreach($articles as $art)
          <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
            <div class="card h-100 article-card" style="border: 1px solid #eee; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: transform 0.3s ease; background-color: #fff;">
              <div class="position-relative" style="height: 200px; overflow: hidden; background-color: #eee;">
                <img src="{{ \App\Helpers\AssetHelper::getImage($art->articleImage, 'images/girl.png') }}" class="card-img-top w-100 h-100" style="object-fit: cover;" alt="{{ $art->articleTitle }}">
              </div>
              <div class="card-body d-flex flex-column" style="padding: 25px;">
                <div class="article-meta mb-2" style="font-size: 13px; color: #888;">
                  <i class="fa fa-calendar-o"></i> {{ $art->articleDate ? \Carbon\Carbon::parse($art->articleDate)->format('M d, Y') : 'Bulletin' }}
                </div>
                <h4 class="card-title" style="font-size: 18px; font-weight: bold; color: #333; line-height: 1.4; margin-bottom: 12px; height: 50px; overflow: hidden;">
                  {{ $art->articleTitle }}
                </h4>
                <p class="card-text" style="font-size: 14px; color: #666; line-height: 1.6; flex-grow: 1;">
                  {{ Str::limit(strip_tags($art->articleContent), 120) }}
                </p>
                <div class="mt-3">
                  <a href="{{ route('articles.show', $art->articleid) }}" class="btn btn-outline-danger btn-sm" style="border-radius: 4px; font-weight: bold; border-color: #E22B27; color: #E22B27;">Read Article</a>
                </div>
              </div>
            </div>
          </div>
        @endforeach
        
        <div class="col-12 mt-4 d-flex justify-content-center">
            {{ $articles->links() }}
        </div>
      @else
        <!-- Featured Sample/Default Articles if empty -->
        <div class="col-12 text-center mb-5">
          <div class="alert alert-light border p-4 d-inline-block" style="border-radius: 8px; background-color: #fff;">
            <p class="mb-0 text-muted" style="font-size: 15px;"><i class="fa fa-info-circle text-danger"></i> Currently, no custom articles are loaded in the database. Enjoy our curated spiritual reading materials below.</p>
          </div>
        </div>

        <!-- Sample Article 1 -->
        <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
          <div class="card h-100 article-card" style="border: 1px solid #eee; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: transform 0.3s ease; background-color: #fff;">
            <div class="position-relative" style="height: 200px; overflow: hidden; background-color: #eee;">
              <img src="{{ asset('images/girl.png') }}" class="card-img-top w-100 h-100" style="object-fit: cover;" alt="Church & The New Generation">
            </div>
            <div class="card-body d-flex flex-column" style="padding: 25px;">
              <div class="article-meta mb-2" style="font-size: 13px; color: #888;">
                <i class="fa fa-calendar-o"></i> May 22, 2026
              </div>
              <h4 class="card-title" style="font-size: 18px; font-weight: bold; color: #333; line-height: 1.4; margin-bottom: 12px;">
                Church & The New Generation
              </h4>
              <p class="card-text" style="font-size: 14px; color: #666; line-height: 1.6; flex-grow: 1;">
                Living out Biblical values in a rapidly changing modern culture. Learn how we can support and guide our youths to maintain their faith.
              </p>
              <div class="mt-3">
                <a href="#" class="btn btn-outline-danger btn-sm disabled" style="border-radius: 4px; font-weight: bold; border-color: #E22B27; color: #E22B27;">Featured Bulletin</a>
              </div>
            </div>
          </div>
        </div>

        <!-- Sample Article 2 -->
        <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
          <div class="card h-100 article-card" style="border: 1px solid #eee; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: transform 0.3s ease; background-color: #fff;">
            <div class="position-relative" style="height: 200px; overflow: hidden; background-color: #eee;">
              <img src="{{ asset('images/bg4.png') }}" class="card-img-top w-100 h-100" style="object-fit: cover;" alt="The Power of Prayer">
            </div>
            <div class="card-body d-flex flex-column" style="padding: 25px;">
              <div class="article-meta mb-2" style="font-size: 13px; color: #888;">
                <i class="fa fa-calendar-o"></i> Apr 15, 2026
              </div>
              <h4 class="card-title" style="font-size: 18px; font-weight: bold; color: #333; line-height: 1.4; margin-bottom: 12px;">
                The Power of Prayer
              </h4>
              <p class="card-text" style="font-size: 14px; color: #666; line-height: 1.6; flex-grow: 1;">
                A deep study on intercessory prayer and its foundational role in our community. Explore scripts and testimonies of answered prayers.
              </p>
              <div class="mt-3">
                <a href="#" class="btn btn-outline-danger btn-sm disabled" style="border-radius: 4px; font-weight: bold; border-color: #E22B27; color: #E22B27;">Featured Bulletin</a>
              </div>
            </div>
          </div>
        </div>

        <!-- Sample Article 3 -->
        <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
          <div class="card h-100 article-card" style="border: 1px solid #eee; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: transform 0.3s ease; background-color: #fff;">
            <div class="position-relative" style="height: 200px; overflow: hidden; background-color: #eee;">
              <img src="{{ asset('images/bg2.png') }}" class="card-img-top w-100 h-100" style="object-fit: cover;" alt="Worship in Splendor">
            </div>
            <div class="card-body d-flex flex-column" style="padding: 25px;">
              <div class="article-meta mb-2" style="font-size: 13px; color: #888;">
                <i class="fa fa-calendar-o"></i> Mar 10, 2026
              </div>
              <h4 class="card-title" style="font-size: 18px; font-weight: bold; color: #333; line-height: 1.4; margin-bottom: 12px;">
                Worship in the Splendor of Holiness
              </h4>
              <p class="card-text" style="font-size: 14px; color: #666; line-height: 1.6; flex-grow: 1;">
                Understanding the biblical meaning of worship, praise, and offering. Experience God's presence through devotion in our regular services.
              </p>
              <div class="mt-3">
                <a href="#" class="btn btn-outline-danger btn-sm disabled" style="border-radius: 4px; font-weight: bold; border-color: #E22B27; color: #E22B27;">Featured Bulletin</a>
              </div>
            </div>
          </div>
        </div>
      @endif
    </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>
.article-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
}
</style>

@endsection