@extends('layouts.app')

@section('content')
<div class="container py-4">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h4>Bible Verses</h4>
    <button
      class="btn btn-success"
      data-bs-toggle="modal"
      data-bs-target="#addVerseModal"
    >+ Add Verse</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>

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

  <div class="table-responsive">
    <table class="table table-bordered align-middle mb-0">
      <thead class="table-light">
        <tr>
          <th>VERSE</th>
          <th>POSTED BY</th>
          <th>ACTION</th>
        </tr>
      </thead>
      <tbody>
        @forelse($verses as $v)
        <tr>
          <td>
            <strong>{{ $v->reference }}</strong><br>
            {{ \Str::limit($v->text, 100) }}
          </td>
          <td>{{ $v->admin->full_name }}</td>
          <td>
            <form
              action="{{ route('verses.unpublish', $v->id) }}"
              method="POST"
              class="d-inline"
            >
              @csrf
              <button class="btn btn-sm btn-danger">Unpublish</button>
            </form>
          </td>
        </tr>
        @empty
        <tr>
          <td colspan="3" class="text-center text-muted py-4">
            No verses found.
          </td>
        </tr>
        @endforelse
      </tbody>
    </table>
  </div>

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


{{-- Add Verse Modal --}}
<div
  class="modal fade"
  id="addVerseModal"
  tabindex="-1"
  aria-labelledby="addVerseLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <form action="{{ route('verses.store') }}" method="POST">
      @csrf
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="addVerseLabel">Add Bible Verse</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">Reference*</label>
            <input
              type="text"
              name="reference"
              class="form-control"
              placeholder="e.g. John 3:16"
              required
            >
          </div>
          <div class="mb-3">
            <label class="form-label">Text*</label>
            <textarea
              name="text"
              class="form-control"
              rows="4"
              required
            ></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-success">Add Verse</button>
        </div>
      </div>
    </form>
  </div>
</div>
@endsection