@extends('layouts.app')

@section('title', $title . ' - ' . ($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($title) }}</h1>
          <h3>MEET OUR LEADERS & MINISTERS</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="teams" style="padding: 60px 0; background-color: #fff;">
  <div class="container">
    
    <!-- Team Filters Navigation -->
    <div class="row mb-5">
      <div class="col-lg-12 text-center">
        <div class="btn-group" role="group" aria-label="Team Categories" style="box-shadow: 0 4px 10px rgba(0,0,0,0.05); border-radius: 30px; overflow: hidden; border: 1px solid #eee;">
          <a href="{{ route('team') }}" class="btn btn-light px-4 py-2 {{ is_null($type) ? 'active font-weight-bold text-white bg-danger' : '' }}" style="border-radius: 0; font-size: 15px; border: none;">All Members</a>
          <a href="{{ route('team', 'pastors') }}" class="btn btn-light px-4 py-2 {{ $type == 'pastors' ? 'active font-weight-bold text-white bg-danger' : '' }}" style="border-radius: 0; font-size: 15px; border: none;">Pastors</a>
          <a href="{{ route('team', 'management') }}" class="btn btn-light px-4 py-2 {{ $type == 'management' ? 'active font-weight-bold text-white bg-danger' : '' }}" style="border-radius: 0; font-size: 15px; border: none;">Management</a>
          <a href="{{ route('team', 'sundayschool') }}" class="btn btn-light px-4 py-2 {{ $type == 'sundayschool' ? 'active font-weight-bold text-white bg-danger' : '' }}" style="border-radius: 0; font-size: 15px; border: none;">Sunday School</a>
        </div>
      </div>
    </div>

    @if(is_null($type))
      <!-- Grouped by Type -->
      @php
        $grouped = $members->groupBy('teamType');
        $typesOrder = ['Pastors', 'Management', 'Sunday School'];
      @endphp

      @foreach($typesOrder as $tKey)
        @if(isset($grouped[$tKey]))
          <div class="row mb-5">
            <div class="col-lg-12">
              <div class="team_heading mb-4">
                <h2 style="color: #333; font-weight: 800; border-left: 5px solid #E22B27; padding-left: 15px;">{{ $tKey }}</h2>
                <hr style="border-top: 1px solid #eee; margin-top: 15px;">
              </div>
            </div>
            @foreach($grouped[$tKey] as $member)
              <div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-4">
                <div class="team-card text-center" style="border: 1px solid #eee; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.02); transition: all 0.3s ease; background-color: #fff; height: 100%;">
                  <div style="height: 250px; overflow: hidden; position: relative;">
                    <img src="{{ \App\Helpers\AssetHelper::getImage($member->teamImage, 'images/team-member.jpg') }}" alt="{{ $member->teamName }}" style="width: 100%; height: 100%; object-fit: cover;">
                  </div>
                  <div class="teamname" style="padding: 20px 15px;">
                    <h4 style="font-size: 18px; font-weight: 700; color: #333; margin-bottom: 5px;">{{ $member->teamName }}</h4>
                    <h5 style="font-size: 14px; color: #E22B27; font-weight: 500; margin: 0;">{{ $member->teamDesignation ?: $member->teamType }}</h5>
                  </div>
                </div>
              </div>
            @endforeach
          </div>
        @endif
      @endforeach

    @else
      <!-- Single Filtered Type -->
      <div class="row">
        <div class="col-lg-12">
          <div class="team_heading mb-4">
            <h2 style="color: #333; font-weight: 800; border-left: 5px solid #E22B27; padding-left: 15px;">{{ $title }}</h2>
            <hr style="border-top: 1px solid #eee; margin-top: 15px;">
          </div>
        </div>
        @forelse($members as $member)
          <div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-4">
            <div class="team-card text-center" style="border: 1px solid #eee; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.02); transition: all 0.3s ease; background-color: #fff; height: 100%;">
              <div style="height: 250px; overflow: hidden; position: relative;">
                <img src="{{ \App\Helpers\AssetHelper::getImage($member->teamImage, 'images/team-member.jpg') }}" alt="{{ $member->teamName }}" style="width: 100%; height: 100%; object-fit: cover;">
              </div>
              <div class="teamname" style="padding: 20px 15px;">
                <h4 style="font-size: 18px; font-weight: 700; color: #333; margin-bottom: 5px;">{{ $member->teamName }}</h4>
                <h5 style="font-size: 14px; color: #E22B27; font-weight: 500; margin: 0;">{{ $member->teamDesignation ?: $member->teamType }}</h5>
              </div>
            </div>
          </div>
        @empty
          <div class="col-lg-12 text-center py-5">
              <p style="color: #999; font-style: italic;">No members found in this category.</p>
          </div>
        @endforelse
      </div>
    @endif

  </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>
.team-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
}
.btn-group .btn-light:hover {
  background-color: #e9ecef;
}
</style>

@endsection