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

@section('content')
<div class="container py-5">
  <h1 class="text-center mb-4">Department Leaders</h1>

  {{-- choose department --}}
  <div class="row mb-4">
    <div class="col-md-8 col-md-offset-2 text-center">
      <form class="form-inline justify-content-center" method="GET" action="{{ route('frontend.department-leaders.index') }}">
        <label class="me-2">Select Department:</label>
        <select name="department_id" class="form-control me-2" style="width: 250px;">
          <option value="">-- all --</option>
          @foreach($departments as $dept)
            <option value="{{ $dept->id }}"
              {{ request('department_id') == $dept->id ? 'selected':'' }}>
              {{ $dept->name }}
            </option>
          @endforeach
        </select>
        <button class="btn btn-primary">Go</button>
      </form>
    </div>
  </div>

  @if(request()->filled('department_id'))
    <h3 class="mb-3">
      Showing for 
      <em>{{ $departments->firstWhere('id',request('department_id'))->name }}</em>
    </h3>
    <div class="row">
      @forelse($leaders as $ldr)
        <div class="col-sm-3 text-center mb-4">
          <div class="thumbnail">
            <div style="width:100%; height:200px; overflow:hidden;">
              <img
                src="{{ asset('storage/'.$ldr->photo) }}"
                alt="{{ $ldr->full_name }}"
                class="img-responsive center-block"
                style="width:100%; height:100%; object-fit:cover;"
              >
            </div>
            <div class="caption">
              <h4>{{ $ldr->is_director ? 'Head':'Leader' }}</h4>
              <strong>{{ $ldr->full_name }}</strong><br>
              <small>{{ $ldr->department->name }} Dept.</small><br>
              <a href="{{ route('frontend.department-leaders.show',$ldr->id) }}"
                 class="btn btn-xs btn-default mt-2">Read more</a>
            </div>
          </div>
        </div>
      @empty
        <p class="text-muted">No leaders found in this department.</p>
      @endforelse
    </div>
  @endif
</div>
@endsection