@extends('layouts.apps')
@section('title', 'Bishop - Africa Inland Church Tanzania(AICT)')

@section('title', 'Bishops & Archbishops')

@section('content')
<div class="container py-5">
  <h1 class="text-center">Bishops &amp; Archbishops</h1>

  {{-- Choose a Bishop --}}
  <div class="row">
    <div class="col-sm-8 col-sm-offset-2">
      <form class="form-inline text-center mb-4" method="GET" action="#">
        <div class="form-group">
          <label for="bishopSelect">Choose Bishop:</label>
          <select id="bishopSelect" name="bishop" class="form-control" style="width: 70%;">
            <option value="">-- select --</option>
            @foreach($all as $b)
              <option value="{{ $b->id }}">
                {{ $b->full_name }} ({{ $b->diocese->name }})
              </option>
            @endforeach
          </select>
        </div>
        <button type="submit" class="btn btn-primary">Go</button>
      </form>
    </div>
  </div>

  {{-- Rendered Bishop Card --}}
  @php
    function bishopCard($b, $label) {
      $imgPath = asset('storage/' . $b->photo);
      $route = route('frontend.bishop-profile', $b->id);
      return '
        <div class="col-sm-3 text-center">
          <div class="thumbnail">
            <div style="width:100%; height:200px; overflow:hidden;">
              <img src="' . $imgPath . '" alt="' . e($b->full_name) . '" class="img-responsive center-block" style="width:100%; height:100%; object-fit:cover;">
            </div>
            <div class="caption">
              <h4>' . $label . '</h4>
              <strong>' . e($b->full_name) . '</strong><br>
              <em>' . e($b->diocese->name) . ' Diocese</em><br>
              <p><a href="' . $route . '" class="btn btn-xs btn-default">Read more</a></p>
            </div>
          </div>
        </div>
      ';
    }
  @endphp

  {{-- Archbishops --}}
  <h3>Archbishops</h3>
  <hr>
  <div class="row">
    @forelse($archbishops as $b)
      {!! bishopCard($b, 'Archbishop') !!}
    @empty
      <p class="text-muted col-sm-12">No archbishops found.</p>
    @endforelse
  </div>

  {{-- Divider --}}
  <div class="clearfix" style="margin:2rem 0;"></div>

  {{-- Active Bishops --}}
  <h3>Active Bishops</h3>
  <hr>
  <div class="row">
    @forelse($active as $b)
      {!! bishopCard($b, 'Bishop') !!}
    @empty
      <p class="text-muted col-sm-12">No active bishops.</p>
    @endforelse
  </div>

  {{-- Retired --}}
  <div class="clearfix" style="margin:2rem 0;"></div>
  <h3>Retired</h3>
  <hr>
  <div class="row">
    @forelse($retired as $b)
      {!! bishopCard($b, 'Retired Bishop') !!}
    @empty
      <p class="text-muted col-sm-12">No retired bishops.</p>
    @endforelse
  </div>

  {{-- Passed Away --}}
  <div class="clearfix" style="margin:2rem 0;"></div>
  <h3>Passed Away</h3>
  <hr>
  <div class="row">
    @forelse($passed as $b)
      {!! bishopCard($b, 'Late Bishop') !!}
    @empty
      <p class="text-muted col-sm-12">No passed away bishops.</p>
    @endforelse
  </div>
</div>
@endsection