@extends('layouts.app')

@section('title', $page->pageTitle . ' - ' . ($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($page->pageTitle) }}</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="page-content-section" style="padding: 60px 0; background-color: #fff; min-height: 400px;">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-10 col-md-12">
        @if($page->pageImage)
          <div class="page-featured-image mb-5 text-center" style="border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05);">
            <img src="{{ \App\Helpers\AssetHelper::getImage($page->pageImage, '') }}" alt="{{ $page->pageTitle }}" class="img-fluid" style="max-height: 450px; width: 100%; object-fit: cover;">
          </div>
        @endif

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

        @if(isset($opportunities))
          <div class="opportunities-list mt-5">
            <h2 class="mb-4" style="color: #333; font-weight: 800; border-bottom: 2px solid #E22B27; padding-bottom: 10px; display: inline-block;">Open Positions & Ministry Opportunities</h2>
            @if($opportunities->count() > 0)
              <div class="row">
                @foreach($opportunities as $op)
                  <div class="col-12 mb-4">
                    <div class="card opportunity-card" style="border: 1px solid #eee; border-left: 5px solid #E22B27; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); transition: all 0.3s ease;">
                      <div class="card-body" style="padding: 30px;">
                        <div class="row align-items-center">
                          <div class="col-md-9">
                            <h3 style="font-size: 20px; font-weight: 700; color: #333; margin-bottom: 8px;">{{ $op->opTitle }}</h3>
                            <div class="text-muted mb-3" style="font-size: 13px;">
                              <i class="fa fa-calendar-o mr-1"></i> Posted on {{ $op->opDate ? \Carbon\Carbon::parse($op->opDate)->format('M d, Y') : 'N/A' }}
                            </div>
                            <div style="font-size: 15px; color: #555; line-height: 1.6;">
                              {!! $op->opDetails !!}
                            </div>
                          </div>
                          <div class="col-md-3 text-md-right mt-3 mt-md-0">
                            <a href="{{ url('/page/contact-us') }}" class="btn btn-danger font-weight-bold" style="background-color: #E22B27; border-color: #E22B27; border-radius: 5px; padding: 10px 20px;">Apply Now</a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                @endforeach
              </div>
            @else
              <div class="alert alert-light border p-4 text-center" style="border-radius: 8px; background-color: #fcfcfc;">
                <p class="mb-0 text-muted" style="font-size: 15px;"><i class="fa fa-info-circle text-danger mr-2"></i> No active job openings or ministry opportunities at the moment. Please check back later or contact us to see how you can get involved.</p>
              </div>
            @endif
          </div>

          <style>
            .opportunity-card:hover {
              transform: translateY(-3px);
              box-shadow: 0 8px 25px rgba(0,0,0,0.06) !important;
            }
          </style>
        @endif
      </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