{{-- dashboard/breadcrumb --}}

@push('style-after-global')
    <style>
        .dashboard-breadcrumb {
            margin: 1rem 0rem 0rem 0rem;
        }

        .dashboard-breadcrumb > ol {
            padding: 0rem;
            margin: 0rem;
            font-size: 0.8rem;
        }

        .dashboard-breadcrumb > ol > li > a {
            cursor: pointer;
        }
    </style>
@endpush

<nav aria-label="breadcrumb" class="dashboard-breadcrumb">
    <ol class="breadcrumb"></ol>
</nav>

@push('script-after-global')
    <script>
        const breadcrumbItem = (item, active = false) => `
            <li class="breadcrumb-item${active ? ' active' : ''}" aria-current="page">
                <a onclick="renderBreadcrumbAndMenu(${item.id ? `'${item.id}'` : item.id})">${item.name}</a>
            </li>
        `;

        const renderBreadcrumb = (activeMenuId, menuItems) => {
            const homeItem = {
                id: null,
                name: 'Home',
                icon: null,
                parent: null,
                url: null,
            };
            let active = true;

            $('.breadcrumb').empty();

            let item = menuItems.find(i => i.id === activeMenuId);
            
            while (item) {
                $('.breadcrumb').prepend(breadcrumbItem(item, active));
                active = false;

                item = menuItems.find(i => i.id === item.parent);
            }

            $('.breadcrumb').prepend(breadcrumbItem(homeItem, active));
        };
    </script>
@endpush