@extends('layouts.app')

@section('title', $siteSettings->siteName ?? 'IPC Shalom Chicago - Home')

@section('content')

@if(session('success'))
    <div class="container mt-3">
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    </div>
@endif

<section class="slider-section">
    <div id="carousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner" role="listbox">
            @foreach($banners as $index => $banner)
                <div class="carousel-item {{ $index == 0 ? 'active' : '' }}" style="background-image: url('{{ \App\Helpers\AssetHelper::getImage($banner->bannerFile, 'images/bg.png') }}');">
                    <div class="carousel-caption d-none d-md-block">
                        <img src="{{ asset('images/welcome.png') }}">
                    </div>
                </div>
            @endforeach
            @if($banners->isEmpty())
                <div class="carousel-item active" style="background-image: url('{{ asset('images/bg.png') }}');">
                    <div class="carousel-caption d-none d-md-block">
                        <img src="{{ asset('images/welcome.png') }}">
                    </div>
                </div>
                <div class="carousel-item" style="background-image: url('{{ asset('images/bg1.png') }}');">
                    <div class="carousel-caption d-none d-md-block">
                        <img src="{{ asset('images/welcome.png') }}">
                    </div>
                </div>
            @endif
        </div>

        <a href="#carousel" class="carousel-control-prev" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a href="#carousel" class="carousel-control-next" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </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="worship">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-sm-12">
              <div class="inner_worship">
                  <i class="fa fa-leaf"></i>
                  <span>
                    <h3>Worship</h3>
                     <p>Experiencing God's presence through praise, prayer, and devotion in our regular services.</p>
                  </span>
              </div>
            </div>

            <div class="col-lg-4 col-sm-12">
                <div class="inner_worship">
                  <i class="fa fa-heart"></i>
                  <span>
                    <h3>Bible Study</h3>
                     <p>Deepening our understanding of God's Word through systematic study and fellowship.</p>
                  </span>
              </div>
            </div>

            <div class="col-lg-4 col-sm-12">
                <div class="inner_worship">
                  <i class="fa fa-cog"></i>
                  <span>
                    <h3>Evangelize</h3>
                     <p>Sharing the Good News of salvation in Jesus Christ with our communities and the world.</p>
                  </span>
              </div>
            </div>
        </div>
    </div>
</section>

<section class="ascribe" style="background-image: url('{{ asset('images/bg4.png') }}');">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="ascribtxt">
                    <h1>“Ascribe to the Lord the glory due his name; bring an offering and come before him. Worship the Lord in the splendor of his holiness”</h1>
                    <h4>1 Chronicles 16:29</h4>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-padding">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="owl-carousel client-testimonial-carousel">
                    @foreach($testimonials as $t)
                        <div class="single-testimonial-item">
                            <p><img src="{{ asset('images/quote.png') }}">{!! strip_tags($t->testContent) !!}</p>
                            <div class="bottest">
                                <img src="{{ \App\Helpers\AssetHelper::getImage($t->testImage, 'images/test.png') }}" class="img-circle"> 
                                <h3>{{ $t->testName }} <span>{{ $t->testDesig }}</span></h3>
                            </div>
                        </div>
                    @endforeach
                    @if($testimonials->isEmpty())
                        <div class="single-testimonial-item">
                            <p><img src="{{ asset('images/quote.png') }}">Great is Thy faithfulness, Lord God my Father. There is no shadow of turning with Thee.</p>
                            <div class="bottest"><img src="{{ asset('images/test.png') }}"> <h3>Jane Doe <span>Member</span></h3></div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>

<section class="testimonial text-center">
    <div class="container">
        <div id="testimonial4" class="carousel slide testimonial4_indicators testimonial4_control_button thumb_scroll_x swipe_x" data-ride="carousel" data-pause="hover" data-interval="5000" data-duration="2000">
            <div class="carousel-inner" role="listbox">
                @foreach($recommendations as $index => $r)
                    <div class="carousel-item {{ $index == 0 ? 'active' : '' }}">
                        <div class="testimonial4_slide">
                            <img src="{{ \App\Helpers\AssetHelper::getImage($r->recomImage, 'images/test.png') }}" class="img-circle img-responsive" />
                            <p>{!! strip_tags($r->recomContent) !!}</p>
                            <h3>{{ $r->recomName }} <span>{!! $r->recomDesig !!}</span></h3>
                        </div>
                    </div>
                @endforeach
                @if($recommendations->isEmpty())
                    <div class="carousel-item active">
                        <div class="testimonial4_slide">
                            <img src="{{ asset('images/test.png') }}" class="img-circle img-responsive" />
                            <p>God is our refuge and strength, a very present help in trouble.</p>
                            <h3>Dr. Saphir Athyal <span>Principal</span></h3>
                        </div>
                    </div>
                @endif
            </div>
            <a class="carousel-control-prev" href="#testimonial4" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            </a>
            <a class="carousel-control-next" href="#testimonial4" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
            </a>
        </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>

<section class="lens">
    <div class="row">
        <div class="col-lg-12">
            <div class="lens_heading">
                <h1>Through the Lens</h1>
                <p>Images that speak about the various activities in the church</p>
            </div>
        </div>
        
        @foreach($lensPhotos as $photo)
            <div class="col-lg-3 col-sm-12">
                <img src="{{ \App\Helpers\AssetHelper::getImage($photo->gphotoFile, 'images/lens.png') }}" class="img-fluid" style="width: 100%; height: 250px; object-fit: cover;">
            </div>
        @endforeach
        @if($lensPhotos->isEmpty())
            <div class="col-lg-3 col-sm-12"><img src="{{ asset('images/lens.png') }}"></div>
            <div class="col-lg-3 col-sm-12"><img src="{{ asset('images/lens.png') }}"></div>
            <div class="col-lg-3 col-sm-12"><img src="{{ asset('images/lens.png') }}"></div>
            <div class="col-lg-3 col-sm-12"><img src="{{ asset('images/lens.png') }}"></div>
        @endif

        <div class="col-lg-12">
            <div class="lens_btn">
                <a href="{{ url('/gallery/albums') }}">More Photos</a>
            </div>
        </div>
    </div>
</section>

<section class="events" style="background-image: url('{{ asset('images/bg2.png') }}');">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-sm-12">
                <div class="inner_events">
                    <h1>Upcoming Events</h1>
                    <hr>
                    
                    @if(isset($sundaySchedules) && $sundaySchedules->count() > 0)
                        @foreach($sundaySchedules as $sched)
                            <div class="row mb-3">
                               <div class="col-md-3">
                                   <div class="date" style="font-size: 11px; padding: 5px;">
                                       SUN<span>Weekly</span>
                                   </div>
                               </div>
                               <div class="col-md-9">
                                   <div class="ssa">
                                       <h2>{{ $sched->meetingName }}</h2>
                                       <p>@ {{ $sched->meetingTime }}</p>
                                   </div>
                               </div>
                            </div>
                        @endforeach
                    @else
                        <div class="row">
                           <div class="col-md-2">
                               <div class="date">
                                   12<span>March</span>
                               </div>
                           </div>
                           <div class="col-md-10">
                               <div class="ssa">
                                   <h2>Sunday School Anniversary</h2>
                                   <p>@ Church Hall starting at 9.30 am</p>
                               </div>
                           </div>
                        </div>
                    @endif
                    <a href="{{ url('/events') }}" class="mt-2 d-inline-block"> More Schedules...</a>
                </div>
            </div>

            <div class="col-lg-4 col-sm-12">
                <div class="inner_events artcle">
                    <h1>Latest Articles</h1>
                    <hr>
                    
                    @foreach($latestArticles as $art)
                        <div class="row mb-3">
                           <div class="col-md-3">
                               <div class="articleimg">
                                   <img src="{{ \App\Helpers\AssetHelper::getImage($art->articleImage, 'images/girl.png') }}">
                               </div>
                           </div>
                           <div class="col-md-9">
                               <div class="articletxt">
                                   <h2>{{ $art->articleTitle }}</h2>
                                   <h4>Church Bulletin</h4>
                                   <p>{{ Str::limit(strip_tags($art->articleContent), 100) }}</p>
                               </div>
                           </div>
                        </div>
                    @endforeach
                    
                    @if($latestArticles->isEmpty())
                        <div class="row">
                           <div class="col-md-3">
                               <div class="articleimg">
                                   <img src="{{ asset('images/girl.png') }}">
                               </div>
                           </div>
                           <div class="col-md-9">
                               <div class="articletxt">
                                   <h2>Church & The New Generation</h2>
                                   <h4>Richard Mathews</h4>
                                   <p>Living out Biblical values in a rapidly changing modern culture.</p>
                               </div>
                           </div>
                        </div>
                    @endif

                    <a href="{{ url('/articles') }}" class="mt-2 d-inline-block"> More Articles...</a>
                </div>
            </div>

            <div class="col-lg-4 col-sm-12">
                <div class="inner_events vid">
                    <h1>Latest Videos...</h1>
                    <hr>
                    <div class="row">
                       <div class="col-md-12 mb-3">
                           <div class="videos">
                               <img src="{{ asset('images/video.png') }}" class="img-fluid" style="width: 100%;">
                           </div>
                       </div>
                       <div class="col-md-12 mb-3">
                           <div class="videos">
                               <img src="{{ asset('images/video.png') }}" class="img-fluid" style="width: 100%;">
                           </div>
                       </div>
                    </div>
                    <a href="{{ url('/gallery/videos') }}" class="mt-2 d-inline-block"> More Videos...</a>
                </div>
            </div>

        </div>
    </div>
</section>

<section class="ascribe" style="background-image: url('{{ asset('images/bg3.png') }}');">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="ascribtxtwhite">
                    <h1>“Ascribe to the Lord the glory due his name; bring an offering and come before him. Worship the Lord in the splendor of his holiness”</h1>
                    <h4>1 Chronicles 16:29</h4>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@section('scripts')
<script>
$(document).ready(function(){
  $(".client-testimonial-carousel").owlCarousel({
      items: 3,
      margin: 30,
      loop: true,
      dots: true,
      responsive: {
        0: { items: 1 },
        768: { items: 2 },
        992: { items: 3 }
      }
  });
});
</script>
@endsection