@extends('layouts.app')

@section('content')
<div class="container py-4">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="fw-bold">All Secretaries</h4>
    <a href="{{ route('leaders.secretaries.create') }}" class="btn btn-success">
      + Add Secretary
    </a>
  </div>

  {{-- per‑page & search --}}
  <div class="row mb-3 align-items-center">
    <div class="col-md-6">
      <form method="GET" class="d-flex align-items-center">
        <label class="me-2 mb-0">Show</label>
        <select name="perPage" class="form-select w-auto" onchange="this.form.submit()">
          @foreach([5,10,25,50] as $n)
            <option value="{{ $n }}" {{ request('perPage',10)==$n?'selected':'' }}>
              {{ $n }}
            </option>
          @endforeach
        </select>
        <label class="ms-2 mb-0">entries</label>
        <input type="hidden" name="search" value="{{ request('search') }}">
      </form>
    </div>
    <div class="col-md-6">
      <form method="GET" class="d-flex justify-content-end">
        <input type="text"
               name="search"
               class="form-control w-50"
               placeholder="Search..."
               value="{{ request('search') }}">
        <button type="submit" class="btn btn-primary ms-2">Search</button>
      </form>
    </div>
  </div>

  @if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
  @endif

  <div class="table-responsive">
    <table class="table table-bordered align-middle">
      <thead class="table-light">
        <tr>
          <th>FULLNAMES</th>
          <th>POSITION</th>
          <th>DIOCESE</th>
          <th>ACTION</th>
        </tr>
      </thead>
      <tbody>
        @forelse($secretaries as $sec)
        <tr>
          <td>{{ $sec->full_name }}</td>
          <td>{{ $sec->position->position }}</td>
          <td>{{ $sec->diocese->name }}</td>
          <td>
            <form action="{{ route('leaders.secretaries.destroy',$sec->id) }}"
                  method="POST" class="d-inline">
              @csrf @method('DELETE')
              <button class="btn btn-sm btn-danger">Remove</button>
            </form>
          </td>
        </tr>
        @empty
        <tr>
          <td colspan="4" class="text-center text-muted py-4">
            No secretaries found.
          </td>
        </tr>
        @endforelse
      </tbody>
    </table>
  </div>

  {{-- pagination --}}
  <div class="d-flex justify-content-between align-items-center mt-3">
    <div>
      Showing <strong>{{ $secretaries->firstItem()??0 }}</strong>
      to <strong>{{ $secretaries->lastItem()??0 }}</strong>
      of <strong>{{ $secretaries->total() }}</strong> entries
    </div>
    <nav>{{ $secretaries->withQueryString()->links() }}</nav>
  </div>
</div>
@endsection