@php
    $title_group = $title_group ?? '';
    $url_menu = $url_menu ?? '';
    $currentUrl = ltrim($url_menu, '/');
    $sidebar_dmenu_by_gmenu = $sidebar_dmenu_by_gmenu ?? [];
    $sidebar_notif_by_dmenu = $sidebar_notif_by_dmenu ?? [];
@endphp
<aside class="sidenav bg-white navbar navbar-vertical navbar-expand-xs border-0 border-radius-xl my-3 fixed-start ms-4 "
    id="sidenav-main">
    <div class="sidenav-header">
        <i class="fas fa-times p-3 cursor-pointer text-secondary opacity-5 position-absolute end-0 top-0 d-none d-xl-none"
            aria-hidden="true" id="iconSidenav"></i>
        <a class="navbar-brand m-0" href="{{ URL::to('/') }}" target="">
            <img src="{{ asset('/storage' . '/' . @$setup_app->logo_small) }}" class="navbar-brand-img h-100"
                alt="main_logo">
            <span class="ms-1 font-weight-bold">{{ @$setup_app->appname }}</span>
        </a>
    </div>
    <hr class="horizontal dark mt-0">
    <div class="collapse navbar-collapse  w-auto " id="sidenav-collapse-main">
        <ul class="navbar-nav">
            {{-- LOOPING GMENU --}}
            @foreach ($gmenu as $g)
                @php
                    $querydmenu = collect($sidebar_dmenu_by_gmenu[$g->gmenu] ?? []);
                    // Determine if this group is active based on current URL or title_group
                    $isGroupActive = $g->name == $title_group;
                    if (!$isGroupActive) {
                        $isGroupActive = $querydmenu->contains(function ($d) use ($currentUrl) {
                            return ltrim($d->url, '/') == $currentUrl;
                        });
                    }
                @endphp
                @if ($g->gmenu == 'blankx')
                    @foreach ($querydmenu as $d)
                        @if ($d->dmenu === 'trstuk' || $d->url === 'trstuk')
                            @continue
                        @endif
                        <li class="nav-item">
                            <a class="nav-link blank {{ ltrim($d->url, '/') == $currentUrl ? 'active' : '' }}"
                                href="{{ URL::to($d->url) }}">
                                <div
                                    class="icon icon-shape icon-sm text-center d-flex align-items-center justify-content-center">
                                    <i class="ni {{ $d->icon }} text-primary text-sm opacity-10"></i>
                                </div>
                                <span class="nav-link-text ms-1 py-1">{{ $d->name }}</span>
                                {{-- check query notif --}}
                                @if ($d->notif != '')
                                    @php $notif = $sidebar_notif_by_dmenu[$d->dmenu] ?? '0'; @endphp
                                    <span style="background-color: #f33b3b;position: absolute;right: 20px;"
                                        class="badge text-white ms-1">{{ $notif }}</span>
                                @endif
                            </a>
                        </li>
                    @endforeach
                @else
                    <li class="nav-item">
                        <a data-bs-toggle="collapse" href="#{{ $g->gmenu }}"
                            class="nav-link {{ $isGroupActive ? 'active' : '' }}"
                            aria-controls="{{ $g->gmenu }}" role="button"
                            {{ $isGroupActive ? 'aria-expanded=true' : '' }}>
                            <div
                                class="icon icon-shape icon-sm text-center d-flex align-items-center justify-content-center">
                                <i class="ni {{ $g->icon }} text-primary text-sm opacity-10"></i>
                            </div>
                            <span class="nav-link-text ms-1">{{ $g->name }}</span>
                        </a>
                        <div class="collapse {{ $isGroupActive ? 'show' : '' }}" id="{{ $g->gmenu }}"
                            style="">
                            <ul class="nav ms-2 ps-0">
                                @foreach ($querydmenu as $d)
                                    @if ($d->dmenu === 'trstuk' || $d->url === 'trstuk')
                                        @continue
                                    @endif
                                    <li class="nav-item">
                                        <a class="nav-link {{ ltrim($d->url, '/') == $currentUrl ? 'active' : '' }}"
                                            href="{{ URL::to($d->url) }}">
                                            <div
                                                class="icon icon-shape icon-sm text-center d-flex align-items-center justify-content-center">
                                                <i class="ni {{ $d->icon }} text-primary text-sm opacity-10"></i>
                                            </div>
                                            <span class="nav-link-text ms-1 py-1">{{ $d->name }}</span>
                                            {{-- check query notif --}}
                                            @if ($d->notif != '')
                                                @php $notif = $sidebar_notif_by_dmenu[$d->dmenu] ?? '0'; @endphp
                                                <span style="background-color: #f33b3b;position: absolute;right: 20px;"
                                                    class="badge text-white ms-1">{{ $notif }}</span>
                                            @endif
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </li>
                @endif
            @endforeach
        </ul>
    </div>
</aside>

<style>
    /* Submenu margin & padding fix so long text fits without clipping */
    .sidenav .collapse .nav {
        margin-left: 0.5rem !important;
        padding-left: 0 !important;
    }
    .sidenav .collapse .nav .nav-link {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Desktop: ensure main content shifts away from the visible sidebar */
    @media (min-width: 1200px) {
        body.g-sidenav-show .sidenav {
            transform: translateX(0) !important;
        }
        body.g-sidenav-show .main-content {
            margin-left: 17.125rem !important;
        }
    }

    /* Tablet/mobile: hidden by default, show only when toggled */
    @media (max-width: 1023.98px) {
        body.g-sidenav-show.g-sidenav-pinned .sidenav {
            transform: translateX(0) !important;
        }
        body.g-sidenav-show.g-sidenav-pinned .main-content {
            margin-left: 17.125rem !important;
        }
        body.g-sidenav-show:not(.g-sidenav-pinned) .main-content {
            margin-left: 0 !important;
        }
    }

    /* For 1024-1200px: keep sidenav visible and push content */
    @media (min-width: 1024px) and (max-width: 1199.98px) {
        body.sidenav-desktop .sidenav {
            transform: translateX(0) !important;
        }
        body.sidenav-desktop .main-content {
            margin-left: 17.125rem !important;
        }
    }
</style>

@push('addjs')
<script>
    $(document).ready(function() {
        function handleSidenavResponsive() {
            var isSmallScreen = window.innerWidth < 1024;
            var body = document.body;

            body.classList.add('g-sidenav-show');

            if (isSmallScreen) {
                body.classList.remove('g-sidenav-pinned');
                body.classList.add('g-sidenav-hidden');
                body.classList.remove('sidenav-desktop');
            } else {
                body.classList.add('g-sidenav-pinned');
                body.classList.remove('g-sidenav-hidden');
                body.classList.add('sidenav-desktop');
            }
        }

        handleSidenavResponsive();

        $(window).on('resize', function() {
            handleSidenavResponsive();
        });
    });
</script>
@endpush