@extends('layouts.app')

@section('page_title', 'Kategori Buku')
@section('breadcrumb', $breadcrumb)
@section('breadcrumb_title', 'Kategori Buku')

@push('style')
    <style>
        #category-tree {
            height: calc(100vh - 335px);
            overflow-y: auto;
        }
        .category-item {
            margin-left: 1.25rem;
            position: relative;
        }
        .toggle-btn {
            border: none;
            background: none;
            font-size: 0.9rem;
            padding: 0 0.25rem;
            cursor: pointer;
            color: #0d6efd;
        }
        .toggle-btn:focus {
            outline: none;
            box-shadow: none;
        }
  </style>
@endpush

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-secondary text-white">
                <h5 class="mb-0">Kategori Buku</h5>
            </div>
            <div class="card-body">
                <div class="text-end">
                    <button type="button" class="btn btn-secondary" data-aksi="simpan-daftar-kategori"><i class="bi bi-floppy"></i> Simpan Perubahan</button>
                </div>
                <div id="category-tree" class="list-group">
                    <!-- Level 1 -->
                    <div class="category-item">
                        <button class="toggle-btn" data-bs-toggle="collapse" data-bs-target="#cat-fiction"><i class="bi bi-plus-lg"></i></button>
                        <span>Fiction</span>
                        <div id="cat-fiction" class="collapse ms-3 mt-2">

                            <!-- Level 2 -->
                            <div class="category-item">
                                <button class="toggle-btn" data-bs-toggle="collapse" data-bs-target="#cat-fantasy"><i class="bi bi-plus-lg"></i></button>
                                <span>Fantasy</span>
                                <div id="cat-fantasy" class="collapse ms-3 mt-2">

                                    <!-- Level 3 -->
                                    <div class="category-item">
                                        <button class="toggle-btn" data-bs-toggle="collapse" data-bs-target="#cat-epic"><i class="bi bi-plus-lg"></i></button>
                                        <span>Epic Fantasy</span>
                                        <div id="cat-epic" class="collapse ms-3 mt-2">

                                            <!-- Level 4 -->
                                            <div class="category-item">
                                                <span>High Magic</span>
                                            </div>
                                            <div class="category-item">
                                                <span>Dark Realms</span>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="category-item">
                                <span>Drama</span>
                            </div>
                        </div>
                    </div>

                    <div class="category-item">
                        <button class="toggle-btn" data-bs-toggle="collapse" data-bs-target="#cat-nonfiction"><i class="bi bi-plus-lg"></i></button>
                        <span>Non-Fiction</span>
                        <div id="cat-nonfiction" class="collapse ms-3 mt-2">
                            <div class="category-item"><span>Biography</span></div>
                            <div class="category-item"><span>History</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('script')
    <script>
        $(document).ready(() => {
            $(document).on('click', '.toggle-btn', (e) => {
                const target = $($(e.currentTarget).data('bs-target'));
                const icon = $(e.currentTarget);

                target.on('shown.bs.collapse', () => icon.html(`<i class="bi bi-dash"></i>`));
                target.on('hidden.bs.collapse', () => icon.html(`<i class="bi bi-plus-lg"></i>`));
            });

            // Expand all collapse elements
            $('.collapse').each(function() {
                const collapse = new bootstrap.Collapse(this, { toggle: false });
                collapse.show();
            });

            // Update icons to`<i class="bi bi-plus-lg"></i>`
            $('.toggle-btn').html(`<i class="bi bi-dash"></i>`);
        })
    </script>
@endpush