@extends('layouts.app')

@section('title', 'Church Live - ' . ($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>CHURCH LIVE</h1>
          <h3>WORSHIP WITH US ONLINE</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="live-stream-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;">Live Stream Broadcast</h2>
        <p class="text-muted mt-2" style="font-size: 16px;">Watch our services live on Sunday mornings and other special programs</p>
      </div>
    </div>

    <div class="row justify-content-center">
      <div class="col-lg-10">
        <!-- Live stream player card -->
        <div style="background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); margin-bottom: 40px;">
          <div class="embed-responsive embed-responsive-16by9 mb-4" style="border-radius: 8px; overflow: hidden; background-color: #000;">
            <!-- Placeholder Youtube Live Embed or database siteKey/custom html -->
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/live_stream?channel=UC_x5XG1OV2P6uYZ5FHSFvAw" allowfullscreen></iframe>
          </div>

          <div class="d-md-flex justify-content-between align-items-center">
            <div>
              <span class="badge badge-danger mr-2 mb-2 mb-md-0" style="background-color: #E22B27; font-weight: 700; padding: 6px 12px; text-transform: uppercase;">
                <span class="spinner-grow spinner-grow-sm text-light mr-1" role="status" style="width: 10px; height: 10px; vertical-align: middle;"></span> Live Broadcast
              </span>
              <h3 class="d-inline-block align-middle m-0" style="font-size: 20px; font-weight: 800; color: #333;">Sunday Worship Service</h3>
            </div>
            <div class="mt-3 mt-md-0">
              <a href="https://www.youtube.com" target="_blank" class="btn btn-outline-danger btn-sm mr-2" style="font-weight: bold; border-radius: 5px; border-width: 2px;">
                <i class="fa fa-youtube-play mr-1"></i> YouTube Channel
              </a>
              <a href="https://www.facebook.com" target="_blank" class="btn btn-outline-primary btn-sm" style="font-weight: bold; border-radius: 5px; border-width: 2px; border-color: #3b5998; color: #3b5998;">
                <i class="fa fa-facebook-official mr-1"></i> Facebook Live
              </a>
            </div>
          </div>
        </div>

        @if($page->pageContent)
          <div class="live-info-content mt-5" style="font-size: 16px; color: #555; line-height: 1.8; border-top: 1px solid #eee; padding-top: 35px;">
            {!! $page->pageContent !!}
          </div>
        @else
          <div class="live-info-content mt-5" style="font-size: 16px; color: #555; line-height: 1.8; border-top: 1px solid #eee; padding-top: 35px;">
            <h3>Broadcast Schedule</h3>
            <p>If the stream is not currently live, please join us at our regular broadcast hours:</p>
            <ul>
              <li><strong>Sunday School:</strong> Sundays @ 9:30 AM - 10:30 AM</li>
              <li><strong>Worship Service (English):</strong> Sundays @ 10:30 AM - 12:30 PM</li>
              <li><strong>Weekly Prayer Line:</strong> Monday through Friday @ 5:00 AM</li>
            </ul>
          </div>
        @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>

@endsection