@extends('layouts.app')

@section('title', 'Contact Us - ' . ($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>CONTACT US</h1>
          <h3>GET IN TOUCH WITH US</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="#contact-form-section">Send Message</a>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="contact-form-section" style="padding: 60px 0; background-color: #fff;">
  <div class="container">
    
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
            {{ session('success') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    <div class="row">
      <!-- Contact Info Section -->
      <div class="col-lg-5 col-md-12 mb-5 mb-lg-0">
        <div style="background-color: #f8f9fa; border: 1px solid #eee; border-radius: 8px; padding: 40px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); height: 100%;">
          <h2 style="font-size: 24px; font-weight: bold; color: #333; margin-bottom: 25px; border-left: 5px solid #E22B27; padding-left: 15px;">Contact Info</h2>
          
          <div class="d-flex mb-4">
            <div style="width: 50px; height: 50px; background-color: rgba(226, 43, 39, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #E22B27; font-size: 20px; flex-shrink: 0;">
              <i class="fa fa-map-marker"></i>
            </div>
            <div class="ml-3">
              <h4 style="font-size: 16px; font-weight: bold; color: #333; margin-bottom: 5px;">Church Location</h4>
              @if($siteSettings && $siteSettings->addressOnline)
                <p style="color: #666; font-size: 15px; margin: 0; line-height: 1.5;">{!! nl2br(e($siteSettings->addressOnline)) !!}</p>
              @else
                <p style="color: #666; font-size: 15px; margin: 0; line-height: 1.5;">River Trails Center (The zone)<br>550 E Business Center Drive<br>Mount Prospect, IL - 60056</p>
              @endif
            </div>
          </div>

          <div class="d-flex mb-4">
            <div style="width: 50px; height: 50px; background-color: rgba(226, 43, 39, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #E22B27; font-size: 20px; flex-shrink: 0;">
              <i class="fa fa-phone"></i>
            </div>
            <div class="ml-3">
              <h4 style="font-size: 16px; font-weight: bold; color: #333; margin-bottom: 5px;">Call Us</h4>
              <p style="color: #666; font-size: 15px; margin: 0;">{{ $siteSettings->phone ?? '+1 (847) 550-0056' }}</p>
            </div>
          </div>

          <div class="d-flex mb-4">
            <div style="width: 50px; height: 50px; background-color: rgba(226, 43, 39, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #E22B27; font-size: 20px; flex-shrink: 0;">
              <i class="fa fa-envelope"></i>
            </div>
            <div class="ml-3">
              <h4 style="font-size: 16px; font-weight: bold; color: #333; margin-bottom: 5px;">Email Us</h4>
              <p style="color: #666; font-size: 15px; margin: 0;">{{ $siteSettings->email ?? 'info@ipcshalomchicago.org' }}</p>
            </div>
          </div>

          <div class="mt-4" style="border-radius: 8px; overflow: hidden; border: 1px solid #eee; height: 230px;">
            @if($siteSettings && $siteSettings->siteKey)
                {!! $siteSettings->siteKey !!}
            @else
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2961.451739744264!2d-87.92854138460328!3d42.07636977920685!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x880fb9f24c516667%3A0x655167c3d2392cd9!2sIPC%20Shalom%20Chicago!5e0!3m2!1sen!2sin!4v1614167652177!5m2!1sen!2sin" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
            @endif
          </div>
        </div>
      </div>

      <!-- Contact Form Section -->
      <div class="col-lg-7 col-md-12">
        <div style="border: 1px solid #eee; border-radius: 8px; padding: 40px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); background-color: #fff; height: 100%;">
          <h2 style="font-size: 24px; font-weight: bold; color: #333; margin-bottom: 25px; border-left: 5px solid #E22B27; padding-left: 15px;">Send Us a Message</h2>
          
          @if($page->pageContent)
            <div class="mb-4 text-muted" style="font-size: 15px; line-height: 1.6;">
                {!! $page->pageContent !!}
            </div>
          @endif

          <form action="{{ route('contact.submit') }}" method="POST">
            @csrf
            <div class="row">
              <div class="col-md-6 form-group">
                <label style="font-size: 14px; font-weight: bold; color: #555;">Name *</label>
                <input type="text" name="name" class="form-control" placeholder="Your Name" required style="border-radius: 5px; height: 45px; border: 1px solid #ddd;">
              </div>
              <div class="col-md-6 form-group">
                <label style="font-size: 14px; font-weight: bold; color: #555;">Email *</label>
                <input type="email" name="email" class="form-control" placeholder="Your Email Address" required style="border-radius: 5px; height: 45px; border: 1px solid #ddd;">
              </div>
            </div>
            
            <div class="row">
              <div class="col-md-6 form-group">
                <label style="font-size: 14px; font-weight: bold; color: #555;">Phone</label>
                <input type="text" name="phone" class="form-control" placeholder="Your Phone Number" style="border-radius: 5px; height: 45px; border: 1px solid #ddd;">
              </div>
              <div class="col-md-6 form-group">
                <label style="font-size: 14px; font-weight: bold; color: #555;">Subject</label>
                <input type="text" name="subject" class="form-control" placeholder="Subject" style="border-radius: 5px; height: 45px; border: 1px solid #ddd;">
              </div>
            </div>

            <div class="form-group">
              <label style="font-size: 14px; font-weight: bold; color: #555;">Message *</label>
              <textarea name="message" class="form-control" rows="5" placeholder="How can we help you?" required style="border-radius: 5px; border: 1px solid #ddd;"></textarea>
            </div>

            <button type="submit" class="btn btn-danger btn-lg px-5 mt-2" style="background-color: #E22B27; border-color: #E22B27; font-weight: bold; border-radius: 5px; transition: all 0.3s;">Send Message</button>
          </form>
        </div>
      </div>
    </div>

  </div>
</section>

@endsection