@extends('layouts.app')

@section('title', $article->articleTitle . ' - ' . ($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($article->articleTitle) }}</h1>
          <h3>{{ strtoupper($siteSettings->siteName ?? '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="article-detail-section" style="padding: 60px 0; background-color: #fff; min-height: 500px;">
  <div class="container">
    <div class="row">
      <!-- Main Content -->
      <div class="col-lg-8 col-md-12 mb-5 mb-lg-0">
        @if($article->articleImage)
          <div class="article-featured-image mb-4" style="border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05);">
            <img src="{{ \App\Helpers\AssetHelper::getImage($article->articleImage, 'images/girl.png') }}" alt="{{ $article->articleTitle }}" class="img-fluid w-100" style="max-height: 450px; object-fit: cover;">
          </div>
        @endif

        <div class="article-meta mb-3" style="font-size: 14px; color: #888; border-bottom: 1px solid #eee; padding-bottom: 15px;">
          <span class="mr-3"><i class="fa fa-calendar-o text-danger"></i> {{ $article->articleDate ? \Carbon\Carbon::parse($article->articleDate)->format('F d, Y') : 'Published Bulletin' }}</span>
          @if($article->contentType)
            <span><i class="fa fa-tag text-danger"></i> {{ $article->contentType }}</span>
          @endif
        </div>

        <div class="rich-text-content" style="font-size: 16px; color: #444; line-height: 1.8;">
          {!! $article->articleContent !!}
        </div>

        @if($article->youtubeurl)
          <div class="embed-responsive embed-responsive-16by9 mt-5" style="border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05);">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/{{ $article->youtubeurl }}" allowfullscreen></iframe>
          </div>
        @endif

        <div class="mt-5 pt-4 border-top">
          <a href="{{ route('articles.index') }}" class="btn btn-danger" style="background-color: #E22B27; border-color: #E22B27; font-weight: bold;"><i class="fa fa-chevron-left mr-2"></i> Back to Articles</a>
        </div>
      </div>

      <!-- Sidebar -->
      <div class="col-lg-4 col-md-12">
        <div class="sidebar-wrapper" style="position: sticky; top: 100px;">
          
          <!-- Recent Articles -->
          @if(isset($recentArticles) && $recentArticles->count() > 0)
            <div class="card mb-4" style="border: 1px solid #eee; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); overflow: hidden;">
              <div class="card-header" style="background-color: #f8f9fa; border-bottom: 1px solid #eee; padding: 15px 20px;">
                <h4 style="font-size: 18px; font-weight: bold; color: #333; margin: 0;">Recent Readings</h4>
              </div>
              <div class="card-body" style="padding: 20px;">
                @foreach($recentArticles as $recent)
                  <div class="recent-post-item d-flex align-items-center mb-3 pb-3 border-bottom">
                    <div style="width: 60px; height: 60px; overflow: hidden; border-radius: 4px; background-color: #eee; flex-shrink: 0;" class="mr-3">
                      <img src="{{ \App\Helpers\AssetHelper::getImage($recent->articleImage, 'images/girl.png') }}" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    <div>
                      <h5 style="font-size: 14px; font-weight: bold; margin-bottom: 5px; line-height: 1.4;">
                        <a href="{{ route('articles.show', $recent->articleid) }}" style="color: #333; text-decoration: none;">{{ Str::limit($recent->articleTitle, 45) }}</a>
                      </h5>
                      <span style="font-size: 11px; color: #999;"><i class="fa fa-calendar-o"></i> {{ $recent->articleDate ? \Carbon\Carbon::parse($recent->articleDate)->format('M d, Y') : 'Bulletin' }}</span>
                    </div>
                  </div>
                @endforeach
              </div>
            </div>
          @endif

          <!-- Quick Contact Callout -->
          <div class="card p-4 text-center text-white bg-dark" style="border-radius: 8px; border: none; background: linear-gradient(135deg, #1f1f1f 0%, #111 100%);">
            <h3 style="font-size: 20px; font-weight: bold; margin-bottom: 15px;">Need Prayer or Guidance?</h3>
            <p style="font-size: 14px; opacity: 0.8; line-height: 1.6; margin-bottom: 20px;">Our pastoral team is here for you. Reach out to request a prayer or schedule a counseling session.</p>
            <a href="{{ url('/page/contact-us') }}" class="btn btn-danger btn-block" style="background-color: #E22B27; border-color: #E22B27; font-weight: bold;">Contact Pastors</a>
          </div>

        </div>
      </div>
    </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>
.rich-text-content h1, .rich-text-content h2, .rich-text-content h3 {
  color: #333;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 15px;
}
.rich-text-content h1 { font-size: 28px; }
.rich-text-content h2 { font-size: 24px; }
.rich-text-content h3 { font-size: 20px; }
.rich-text-content p {
  margin-bottom: 20px;
}
.rich-text-content ul, .rich-text-content ol {
  margin-bottom: 25px;
  padding-left: 20px;
}
.rich-text-content li {
  margin-bottom: 10px;
}
</style>

@endsection