@extends('layouts.admin')

@section('title', 'Menu Items')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0">Menu Items</h4>
    <a href="{{ route('admin.menu-items.create') }}" class="btn btn-dark btn-sm">
        <i class="bi bi-plus-lg me-1"></i> Add Menu
    </a>
</div>

<div class="card">
    <div class="card-body">
        @if ($menus->isEmpty())
            <p class="text-muted mb-0">No menu items yet. Click "Add Menu" to create one.</p>
        @else
            <div class="table-responsive">
                <table class="table align-middle">
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>URL</th>
                            <th>Order</th>
                            <th>Status</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($menus as $menu)
                            @include('admin.menu-items._menu-row', ['menu' => $menu, 'depth' => 0])
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="mt-3">
                {{ $menus->links('pagination::bootstrap-5') }}
            </div>
        @endif
    </div>
</div>

<style>
    [data-bs-toggle="collapse"][aria-expanded="true"] .toggle-icon {
        transform: rotate(90deg);
    }
    .toggle-icon {
        transition: transform 0.2s ease;
        font-size: 0.75rem;
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.toggle-children').forEach(function (btn) {
        btn.addEventListener('click', function () {
            const parentId = this.dataset.targetParent;
            const icon = this.querySelector('i');
            const isOpen = icon.classList.contains('bi-chevron-down');

            document.querySelectorAll('tr[data-child-of="' + parentId + '"]').forEach(function (row) {
                row.style.display = isOpen ? 'none' : '';

                // if collapsing, also collapse any expanded grandchildren
                if (isOpen) {
                    const nestedToggle = row.querySelector('.toggle-children i');
                    if (nestedToggle) {
                        nestedToggle.classList.remove('bi-chevron-down');
                        nestedToggle.classList.add('bi-chevron-right');
                    }
                    document.querySelectorAll('tr[data-child-of="' + row.dataset.id + '"]').forEach(function (r) {
                        r.style.display = 'none';
                    });
                }
            });

            icon.classList.toggle('bi-chevron-right', isOpen);
            icon.classList.toggle('bi-chevron-down', !isOpen);
        });
    });
});
</script>
@endsection