{{-- dashboard/menu --}}

@push('style-after-global')
    <style>
        .dashboard-menu-item {
            height: 100px;
            width: 100px;
            margin: 1rem 1rem 0rem 0rem;
            padding: 1rem;
            cursor: pointer;
        }

        .dashboard-menu-item-icon {
            font-size: 2rem;
            cursor: pointer;
            margin-bottom: 0.5rem;
        }

        .dashboard-menu-item-label {
            font-size: 0.6rem;
            cursor: pointer;
            margin-bottom: 0rem;
        }
    </style>
@endpush

<div class="d-flex justify-content-center flex-wrap menu-container">
    {{-- menu items akan dirender di sini --}}
</div>

@push('style-after-global')
    <script>
        const menuItem = (item) => {
            const onClick = item.url ? `clickLink('{{ url('/') }}/${item.url}')` : `renderBreadcrumbAndMenu(${item.id ? `'${item.id}'` : item.id})`;

            return `
                <div class="card dashboard-menu-item d-flex justify-content-center" onclick="${onClick}">
                    <div class="card-content">
                        <div class="card-body card-dashboard text-center">
                            <i class="bx ${item.icon} dashboard-menu-item-icon"></i>
                            <br />
                            <label class="fonticon-classname text-muted dashboard-menu-item-label">${item.name}</label>
                        </div>
                    </div>
                </div>
            `;
        };

        const renderMenu = (renderedMenuId, items) => {
            $('.menu-container').empty();

            items.map((item) => {
                if (item.parent === renderedMenuId) $('.menu-container').append(menuItem(item));
            });
        };
    </script>
@endpush