@extends('layouts.apps')
@section('title', 'Bishop Profile - Africa Inland Church Tanzania(AICT)')
@section('title', $bishop->full_name . ' profile')

@section('content')
<div class="container py-5">
  <div class="row">
    {{-- Left Column: Photo + Bio, Posts, Photos --}}
    <div class="col-md-4">
      {{-- Bishop Photo --}}
      <img src="{{ asset('storage/' . $bishop->photo) }}" alt="{{ $bishop->full_name }}" class="img-responsive img-thumbnail">

      {{-- Biography --}}
      <hr>
      <h3>Biography</h3>
      <p>{{ $bishop->biography ?: 'No biography available.' }}</p>

      {{-- Posts --}}
      <h3>Posts</h3>
      <p class="alert alert-warning">No posts made yet by this leader</p> {{-- Update this if you have posts --}}

      {{-- Photos --}}
      <h3>Photos</h3>
      @if($bishop->photos && $bishop->photos->isNotEmpty())
        <div class="row">
          @foreach($bishop->photos as $photo)
            <div class="col-xs-4">
              <img src="{{ asset('storage/' . $photo->image_path) }}" class="img-responsive img-thumbnail" />
            </div>
          @endforeach
        </div>
      @else
        <p class="alert alert-warning">No photos uploaded yet</p>
      @endif
    </div>

    {{-- Center Column: Profile Details --}}
    <div class="col-md-6">
      <h2>{{ $bishop->full_name }} profile</h2>
      <p><strong>Position:</strong> {{ $bishop->is_archbishop ? 'Archbishop' : 'Bishop' }}</p>
      <hr>
      <p><strong>Full names:</strong> <em>{{ $bishop->full_name }}</em></p>
      <p><strong>Date Of Birth:</strong> <em>{{ \Carbon\Carbon::parse($bishop->dob)->format('d/m/Y') }}</em></p>
      <p><strong>Married to:</strong> <em>{{ $bishop->married_to ?: 'N/A' }}</em></p>
      <p><strong>Diocese(s):</strong>
        @if($bishop->diocese)
          Joined {{ $bishop->diocese->name }} in {{ $bishop->start_year }}
        @else
          <em>None</em>
        @endif
      </p>
    </div>

    {{-- Right Column: Sidebar --}}
    <div class="col-md-2">
      <h4>Quick Links</h4>
      <ul class="list-unstyled">
        <li><a href="{{ route('frontend.show-bishop') }}">Bishops</a></li>
        <li><a href="{{ route('frontend.show-bishop') }}">Pastors</a></li>
        <li><a href="{{ route('frontend.show-bishop') }}">Department Leaders</a></li>
      </ul>
    </div>
  </div>
</div>
@endsection