@extends('layouts.admin')

@section('title', __('admin.classes.chapters.title') . ' - ' . $subject->name)

@section('content')
<div class="page-header">
    <div>
        <nav aria-label="breadcrumb" class="mb-3">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.classes.management') }}">{{ __('admin.classes.chapters.breadcrumb.classes') }}</a></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.classes.subjects', $subject->class_id) }}">{{ $subject->class->name }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ $subject->name }}</li>
            </ol>
        </nav>
        <h1>{{ __('admin.classes.chapters.title') }} - {{ $subject->name }}</h1>
        <p>{{ $subject->class->name }}</p>
    </div>
    <div>
        <button type="button" class="btn btn-primary" onclick="Livewire.dispatch('openModal')">
            <i class="bi bi-plus-lg"></i> {{ __('admin.classes.chapters.new_chapter') }}
        </button>
    </div>
</div>

@if(session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    {{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

@livewire('admin.chapters.chapter-management', ['subjectId' => $subject->id])
@livewire('admin.chapters.create-chapter-modal', ['subjectId' => $subject->id])
@livewire('admin.chapters.edit-chapter-modal')

<script>
document.addEventListener('livewire:init', () => {
    Livewire.on('chapter-created', () => {
        location.reload();
    });
    
    Livewire.on('chapter-updated', () => {
        location.reload();
    });
    
    Livewire.on('chapter-status-toggled', () => {
        location.reload();
    });
});
</script>
@endsection