@extends('layouts.app')

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

@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="heading" style="background-image: url('{{ asset('images/bg.png') }}');">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="topheader">
          <h1>EVENTS</h1>
          <h3>EVENTS & SERVICES OF {{ 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="eventdetails">
  <div class="container">
    <div class="row">
      <div class="col-lg-8">
        <div class="month_accordion">
          <h2 class="mb-4" style="color: #333; font-weight: bold; border-left: 5px solid #E22B27; padding-left: 15px;">Upcoming Special Events</h2>
          <div id="accordion">
            @php $count = 0; @endphp
            @foreach($groupedEvents as $monthYear => $eventsInMonth)
                @php 
                    $collapseId = "collapse_" . Str::slug($monthYear);
                    $count++;
                @endphp
                <div class="card mb-3" style="border: 1px solid #ddd; border-radius: 5px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                  <div class="card-header" style="background-color: #f8f9fa; border-bottom: 1px solid #ddd; padding: 15px 20px;">
                    <a class="card-link {{ $count == 1 ? '' : 'collapsed' }}" data-toggle="collapse" href="#{{ $collapseId }}" style="font-size: 18px; font-weight: bold; color: #333; display: flex; justify-content: space-between; align-items: center; text-decoration: none;">
                      {{ $monthYear }}
                      <i class="fa fa-chevron-down" style="font-size: 14px; color: #888;"></i>
                    </a>
                  </div>
                  <div id="{{ $collapseId }}" class="collapse {{ $count == 1 ? 'show' : '' }}" data-parent="#accordion">
                    <div class="card-body" style="padding: 20px;">
                      @foreach($eventsInMonth as $event)
                          <div class="row mb-4 pb-4 {{ !$loop->last ? 'border-bottom' : '' }}">
                            <div class="col-lg-2 col-sm-12 text-center mb-3 mb-lg-0">
                              <div class="calander" style="background-color: #E22B27; color: white; border-radius: 8px; padding: 10px; display: inline-block; min-width: 80px;">
                                <div style="font-size: 12px; text-transform: uppercase; font-weight: bold;">{{ $event->eventDateMonth }}</div>
                                <div style="font-size: 28px; font-weight: 900; line-height: 1;">{{ $event->eventDateNo }}</div>
                                <div style="font-size: 12px; font-weight: bold;">{{ $event->eventDateYear }}</div>
                              </div>
                            </div>
                            <div class="col-lg-10 col-sm-12">
                              <div class="caltext">
                                <h3 style="font-size: 20px; font-weight: bold; color: #333; margin-bottom: 5px;">{{ $event->eventName }}</h3>
                                <h4 style="font-size: 14px; color: #E22B27; margin-bottom: 8px;">
                                    <i class="fa fa-calendar-o"></i> {{ $event->eventDate }}
                                </h4>
                                @if($event->eventDesc)
                                    <p style="font-size: 14px; color: #666; line-height: 1.6;">{!! nl2br(e($event->eventDesc)) !!}</p>
                                @endif
                              </div>
                            </div>
                          </div>
                      @endforeach
                    </div>
                  </div>
                </div>
            @endforeach
            
            @if(empty($groupedEvents))
                <div class="alert alert-info text-center py-5" style="background-color: #fcfcfc; border: 1px dashed #ccc; border-radius: 8px;">
                    <i class="fa fa-calendar-o fa-3x mb-3" style="color: #bbb;"></i>
                    <h4 style="color: #666; font-weight: bold;">No Special Events Scheduled</h4>
                    <p style="color: #888; max-width: 500px; margin: 10px auto 0;">Currently there are no special monthly events on our calendar. However, we have vibrant weekly services and fellowship meetings. Please review our regular schedules on the right.</p>
                </div>
            @endif
          </div> 
        </div>
      </div>
      
      <div class="col-lg-4">
        <div class="events_places" style="background-color: #f8f9fa; border: 1px solid #eee; border-radius: 8px; padding: 30px; box-shadow: 0 2px 10px rgba(0,0,0,0.02);">
           <h2 style="font-size: 22px; font-weight: bold; color: #E22B27; border-bottom: 2px solid #E22B27; padding-bottom: 10px; margin-bottom: 20px;">Sunday Services</h2>
           @forelse($sundaySchedules as $sched)
               <div style="margin-bottom: 15px;">
                   <h4 style="font-size: 16px; font-weight: bold; color: #333; margin-bottom: 2px;">{{ $sched->meetingName }}</h4>
                   <p style="font-size: 14px; color: #666;"><i class="fa fa-clock-o" style="color: #E22B27;"></i> {{ $sched->meetingTime }}</p>
               </div>
           @empty
               <p style="color: #999; font-style: italic;">No Sunday schedules found.</p>
           @endforelse

           <h2 class="mt-4" style="font-size: 22px; font-weight: bold; color: #E22B27; border-bottom: 2px solid #E22B27; padding-bottom: 10px; margin-bottom: 20px;">Weekday Meetings</h2>
           @forelse($weekdaySchedules as $sched)
               <div style="margin-bottom: 15px;">
                   <h4 style="font-size: 16px; font-weight: bold; color: #333; margin-bottom: 2px;">{{ $sched->meetingName }}</h4>
                   <p style="font-size: 14px; color: #666;">
                       <i class="fa fa-calendar" style="color: #E22B27;"></i> {{ $sched->dayName }} 
                       <span class="mx-1">|</span> 
                       <i class="fa fa-clock-o" style="color: #E22B27;"></i> {{ $sched->meetingTime }}
                   </p>
               </div>
           @empty
               <p style="color: #999; font-style: italic;">No weekday schedules found.</p>
           @endforelse

           <h2 class="mt-4" style="font-size: 22px; font-weight: bold; color: #E22B27; border-bottom: 2px solid #E22B27; padding-bottom: 10px; margin-bottom: 20px;">Saturday Meetings</h2>
           @forelse($saturdaySchedules as $sched)
               <div style="margin-bottom: 15px;">
                   <h4 style="font-size: 16px; font-weight: bold; color: #333; margin-bottom: 2px;">{{ $sched->meetingName }}</h4>
                   <p style="font-size: 14px; color: #666;"><i class="fa fa-clock-o" style="color: #E22B27;"></i> {{ $sched->meetingTime }}</p>
               </div>
           @empty
               <p style="color: #999; font-style: italic;">No Saturday schedules found.</p>
           @endforelse
        </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>

@endsection