@extends('layouts.app')

@section('content')
<div class="container-fluid py-5" style="padding:0 15px;">
    <h2 class="mb-4">{{ $diocese->name }} — Pastorates</h2>

    {{-- + Add Pastorate --}}
    <div class="mb-4">
        <button
            class="btn btn-success"
            data-bs-toggle="modal"
            data-bs-target="#addPastorateModal"
        >+ Add Pastorate</button>
    </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 class="btn btn-primary ms-2">Search</button>
            </form>
        </div>
    </div>

    {{-- Table --}}
    <div class="table-responsive">
        <table class="table table-bordered align-middle">
            <thead class="table-light">
                <tr>
                    <th>PASTORATE</th>
                    <th>CHURCHES</th>
                    <th>ACTION</th>
                </tr>
            </thead>
            <tbody>
                @forelse($pastorates as $p)
                <tr>
                    <td>{{ $p->name }}</td>
                    <td>{{ $p->churches_count }}</td>
                    <td>
                        <a
                          href="{{ route('dioceses.pastorates.churches.index', [$diocese->id, $p->id]) }}"
                          class="btn btn-sm btn-primary"
                        >
                          Churches
                        </a>


                        <button
                            class="btn btn-sm btn-info"
                            data-bs-toggle="modal"
                            data-bs-target="#editPastorateModal-{{ $p->id }}"
                        >Edit</button>

                        <form
                          action="{{ route('dioceses.pastorates.destroy', [$diocese->id,$p->id]) }}"
                          method="POST"
                          class="d-inline"
                        >
                          @csrf
                          @method('DELETE')
                          <button class="btn btn-sm btn-danger">Unpublish</button>
                        </form>
                    </td>
                </tr>

                {{-- Edit Modal --}}
                <div
                  class="modal fade"
                  id="editPastorateModal-{{ $p->id }}"
                  tabindex="-1"
                  aria-labelledby="editPastorateLabel-{{ $p->id }}"
                  aria-hidden="true"
                >
                  <div class="modal-dialog">
                    <form
                      method="POST"
                      action="{{ route('dioceses.pastorates.update', [$diocese->id,$p->id]) }}"
                    >
                      @csrf
                      @method('PUT')
                      <div class="modal-content">
                        <div class="modal-header">
                          <h5 class="modal-title" id="editPastorateLabel-{{ $p->id }}">
                            Edit Pastorate
                          </h5>
                          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                          <div class="mb-3">
                            <label class="form-label">Name</label>
                            <input
                              type="text"
                              name="name"
                              class="form-control"
                              value="{{ $p->name }}"
                              required
                            >
                          </div>
                        </div>
                        <div class="modal-footer">
                          <button class="btn btn-primary">Save Changes</button>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
                @empty
                <tr>
                    <td colspan="3" class="text-center py-4 text-muted">
                        No pastorates found.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Pagination --}}
    <div class="row mt-3 align-items-center">
        <div class="col-md-6">
            <p class="mb-0">
                Showing <strong>{{ $pastorates->firstItem() ?? 0 }}</strong>
                to <strong>{{ $pastorates->lastItem() ?? 0 }}</strong>
                of <strong>{{ $pastorates->total() }}</strong> entries
            </p>
        </div>
        <div class="col-md-6">
            <nav class="d-flex justify-content-end">
                {{ $pastorates->withQueryString()->links() }}
            </nav>
        </div>
    </div>
</div>

{{-- Add Pastorate Modal --}}
<div
  class="modal fade"
  id="addPastorateModal"
  tabindex="-1"
  aria-labelledby="addPastorateModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <form
      method="POST"
      action="{{ route('dioceses.pastorates.store', $diocese->id) }}"
    >
      @csrf
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="addPastorateModalLabel">
            Add Pastorate
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">Name</label>
            <input
              type="text"
              name="name"
              class="form-control"
              placeholder="Enter pastorate name"
              required
            >
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-success">Add Pastorate</button>
        </div>
      </div>
    </form>
  </div>
</div>

{{-- Bootstrap JS --}}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
@endsection