@extends('layouts.admin')

@section('title', 'Chapters')

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

<form method="get" class="mb-3 row g-2">
    <div class="col-auto">
        <select name="book_id" class="form-select form-select-sm" onchange="this.form.submit()">
            <option value="">All books</option>
            @foreach($books as $b)
            <option value="{{ $b->id }}" {{ request('book_id') == $b->id ? 'selected' : '' }}>{{ $b->slug }}</option>
            @endforeach
        </select>
    </div>
</form>

<table class="table table-bordered bg-white">
    <thead>
        <tr><th>ID</th><th>Book</th><th>Chapter #</th><th>Actions</th></tr>
    </thead>
    <tbody>
        @foreach($chapters as $c)
        <tr>
            <td>{{ $c->id }}</td>
            <td>{{ $c->book->slug }}</td>
            <td>{{ $c->chapter_number }}</td>
            <td>
                <a href="{{ route('admin.chapters.edit', $c) }}" class="btn btn-sm btn-outline-primary">Edit</a>
                <form action="{{ route('admin.chapters.destroy', $c) }}" 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>
{{ $chapters->links() }}
@endsection