@extends('layouts.app')

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

    {{-- + Add Church --}}
    <div class="mb-4">
        <button
            class="btn btn-success"
            data-bs-toggle="modal"
            data-bs-target="#addChurchModal"
        >+ Add Church</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>CHURCH</th>
                    <th>MEMBERS</th>
                    <th>ACTION</th>
                </tr>
            </thead>
            <tbody>
                @forelse($churches as $church)
                <tr>
                    <td>{{ $church->name }}</td>
                    <td>{{ $church->members_count ?? '--' }}</td>
                    <td>
                        {{-- Edit --}}
                        <button
                            class="btn btn-sm btn-info"
                            data-bs-toggle="modal"
                            data-bs-target="#editChurchModal-{{ $church->id }}"
                        >Edit</button>

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

                {{-- Edit Church Modal --}}
                <div
                  class="modal fade"
                  id="editChurchModal-{{ $church->id }}"
                  tabindex="-1"
                  aria-labelledby="editChurchLabel-{{ $church->id }}"
                  aria-hidden="true"
                >
                  <div class="modal-dialog">
                    <form
                      method="POST"
                      action="{{ route('dioceses.pastorates.churches.update', [$diocese->id, $pastorate->id, $church->id]) }}"
                    >
                      @csrf
                      @method('PUT')
                      <div class="modal-content">
                        <div class="modal-header">
                          <h5 class="modal-title" id="editChurchLabel-{{ $church->id }}">
                            Edit Church
                          </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="{{ $church->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 churches 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>{{ $churches->firstItem() ?? 0 }}</strong>
            to <strong>{{ $churches->lastItem() ?? 0 }}</strong>
            of <strong>{{ $churches->total() }}</strong> entries
            </p>
        </div>
        <div class="col-md-6">
            <nav class="d-flex justify-content-end">
            {{ $churches->withQueryString()->links() }}
            </nav>
        </div>
        </div>

{{-- Add Church Modal --}}
<div
  class="modal fade"
  id="addChurchModal"
  tabindex="-1"
  aria-labelledby="addChurchModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <form
      method="POST"
      action="{{ route('dioceses.pastorates.churches.store', [$diocese->id, $pastorate->id]) }}"
    >
      @csrf
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="addChurchModalLabel">
            + Add Church
          </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 church name"
              required
            >
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-success">Add Church</button>
        </div>
      </div>
    </form>
  </div>
</div>

{{-- Bootstrap & FontAwesome --}}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
@endsection