@extends('layouts.admin')

@section('title', 'Verses')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="mb-0">Verses</h1>
    <a href="{{ route('admin.verses.create') }}" class="btn btn-primary">Add Verse</a>
</div>

<form method="get" class="mb-3 row g-2">
    <div class="col-auto">
        <select name="chapter_id" class="form-select form-select-sm" onchange="this.form.submit()">
            <option value="">All chapters</option>
            @foreach($chapters as $c)
            <option value="{{ $c->id }}" {{ request('chapter_id') == $c->id ? 'selected' : '' }}>{{ $c->book->slug }} {{ $c->chapter_number }}</option>
            @endforeach
        </select>
    </div>
    <div class="col-auto">
        <input type="text" name="language_code" class="form-control form-control-sm" placeholder="Lang" value="{{ request('language_code') }}">
    </div>
    <div class="col-auto"><button type="submit" class="btn btn-sm btn-secondary">Filter</button></div>
</form>

<table class="table table-bordered bg-white table-sm">
    <thead>
        <tr><th>ID</th><th>Reference</th><th>Lang</th><th>Text</th><th>Actions</th></tr>
    </thead>
    <tbody>
        @foreach($verses as $v)
        <tr>
            <td>{{ $v->id }}</td>
            <td>{{ $v->chapter->book->slug }} {{ $v->chapter->chapter_number }}:{{ $v->verse_number }}</td>
            <td>{{ $v->language_code }}</td>
            <td>{{ Str::limit($v->verse_text, 50) }}</td>
            <td>
                <a href="{{ route('admin.verses.edit', $v) }}" class="btn btn-sm btn-outline-primary">Edit</a>
                <form action="{{ route('admin.verses.destroy', $v) }}" method="post" class="d-inline" onsubmit="return confirm('Delete?');">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
                </form>
            </td>
        </tr>
        @endforeach
    </tbody>
</table>
{{ $verses->links() }}
@endsection