{{-- Header Navigation --}}
<header class="header" id="header">
    {{-- Main Navigation --}}
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            {{-- Logo --}}
            <a class="navbar-brand" href="{{ url('/') }}">
                <img src="{{ asset('assets/images/logo-alt.png') }}" alt="ASETQU V.2" class="logo-img" onerror="handleImageError(this)">
            </a>

            {{-- Mobile Toggle --}}
            <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#mobileMenu" aria-controls="mobileMenu" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            {{-- Desktop Navigation --}}
            <div class="collapse navbar-collapse" id="mainNavbar">
                <ul class="navbar-nav mx-auto">
                    @isset($navMenus)
                        @foreach($navMenus as $menuName => $menuItems)
                            @php
                                $firstItem = $menuItems->first();
                                $hasSubmenu = $menuItems->count() > 1 || ($menuItems->count() == 1 && $firstItem->submenu);
                                $menuUrl = $firstItem->url;

                                // Check if current route matches any of the menu items
                                $isActive = false;
                                foreach ($menuItems as $item) {
                                    if ($item->url) {
                                        $cleanUrl = ltrim($item->url, '/');
                                        // Special handling for homepage - only exact match
                                        if ($cleanUrl === '' || $item->url === '/') {
                                            $isActive = request()->path() === '/';
                                        } else {
                                            $isActive = request()->is($cleanUrl . '*');
                                        }
                                        if ($isActive) break;
                                    }
                                }
                            @endphp

                            @if($hasSubmenu && $menuItems->whereNotNull('submenu')->count() > 0)
                                {{-- Menu with Submenu (Mega Menu) --}}
                                <li class="nav-item dropdown mega-dropdown">
                                    <a class="nav-link {{ $isActive ? 'active' : '' }}" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        {{ $menuName }} <i class="fas fa-chevron-down ms-1 nav-chevron"></i>
                                    </a>
                                    <div class="dropdown-menu mega-menu">
                                        <div class="mega-menu-inner">
                                            <div class="row g-0">
                                                @php
                                                    $submenus = $menuItems->whereNotNull('submenu');
                                                    $halfCount = ceil($submenus->count() / 2);
                                                    $leftColumn = $submenus->take($halfCount);
                                                    $rightColumn = $submenus->skip($halfCount);
                                                @endphp

                                                {{-- Left Column --}}
                                                <div class="col-lg-6">
                                                    <div class="mega-menu-column">
                                                        @foreach($leftColumn as $submenu)
                                                            <a href="{{ url($submenu->url) }}" class="mega-menu-item">
                                                                <h6 class="item-title">{{ $submenu->submenu }}</h6>
                                                                @if($submenu->description)
                                                                    <p class="item-desc">{{ $submenu->description }}</p>
                                                                @endif
                                                            </a>
                                                        @endforeach
                                                    </div>
                                                </div>
                                                {{-- Right Column --}}
                                                @if($rightColumn->count() > 0)
                                                <div class="col-lg-6">
                                                    <div class="mega-menu-column">
                                                        @foreach($rightColumn as $submenu)
                                                            <a href="{{ url($submenu->url) }}" class="mega-menu-item">
                                                                <h6 class="item-title">{{ $submenu->submenu }}</h6>
                                                                @if($submenu->description)
                                                                    <p class="item-desc">{{ $submenu->description }}</p>
                                                                @endif
                                                            </a>
                                                        @endforeach
                                                    </div>
                                                </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            @else
                                {{-- Single Menu Item --}}
                                <li class="nav-item">
                                    <a class="nav-link {{ $isActive ? 'active' : '' }}" href="{{ url($menuUrl) }}">
                                        {{ $menuName }}
                                    </a>
                                </li>
                            @endif
                        @endforeach
                    @else
                        {{-- Fallback static menu if database not available --}}
                        <li class="nav-item">
                            <a class="nav-link {{ request()->is('/') ? 'active' : '' }}" href="{{ url('/') }}">
                                Beranda
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link {{ request()->is('games*') ? 'active' : '' }}" href="{{ url('/games') }}">
                                Games
                            </a>
                        </li>
                    @endisset
                </ul>

                {{-- Right Side Actions --}}
                <div class="navbar-actions">
                    @guest
                        <button type="button" class="btn btn-login" data-bs-toggle="modal" data-bs-target="#loginModal">
                            Masuk
                        </button>
                    @else
                        {{-- User Profile Section --}}
                        <div class="dropdown user-dropdown">
                            <button class="btn btn-link dropdown-toggle user-profile-btn" type="button" data-bs-toggle="dropdown">
                                <div class="user-info-header">
                                    <span class="user-name">{{ auth()->user()->name }}</span>
                                    <span class="user-date">{{ \Carbon\Carbon::now()->locale('id')->isoFormat('dddd, MMMM D, Y') }}</span>
                                </div>
                                @if(auth()->user()->avatar)
                                    <img src="{{ asset('storage/' . auth()->user()->avatar) }}" alt="Avatar" class="user-avatar">
                                @else
                                    <div class="user-avatar-placeholder">
                                        <span>{{ strtoupper(substr(auth()->user()->name, 0, 1)) }}</span>
                                    </div>
                                @endif
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li class="dropdown-header">
                                    <div class="user-info">
                                        <strong>{{ auth()->user()->name }}</strong>
                                        <span class="text-muted">{{ auth()->user()->email }}</span>
                                    </div>
                                </li>
                                <li><hr class="dropdown-divider"></li>
                                @if(auth()->user()->isAdmin())
                                    <li><a class="dropdown-item" href="{{ url('/admin') }}"><i class="fas fa-tachometer-alt me-2"></i> Admin Dashboard</a></li>
                                    <li><a class="dropdown-item" href="{{ url('/admin/profile') }}"><i class="fas fa-user me-2"></i> Profile</a></li>
                                @else
                                    <li><a class="dropdown-item" href="{{ url('/dashboard') }}"><i class="fas fa-tachometer-alt me-2"></i> Dashboard</a></li>
                                    {{-- <li><a class="dropdown-item" href="{{ url('/dashboard/profile') }}"><i class="fas fa-user me-2"></i> Profile</a></li>
                                    <li><a class="dropdown-item" href="{{ url('/dashboard/wallet') }}"><i class="fas fa-wallet me-2"></i> My Wallet</a></li> --}}
                                @endif
                                <li><hr class="dropdown-divider"></li>
                                <li>
                                    <form action="{{ url('/logout') }}" method="POST">
                                        @csrf
                                        <button type="submit" class="dropdown-item text-danger"><i class="fas fa-sign-out-alt me-2"></i> Logout</button>
                                    </form>
                                </li>
                            </ul>
                        </div>
                    @endguest
                </div>
            </div>
        </div>
    </nav>

    {{-- Mobile Offcanvas Menu --}}
    <div class="offcanvas offcanvas-start mobile-menu" tabindex="-1" id="mobileMenu">
        <div class="offcanvas-header">
            <a href="{{ url('/') }}" class="offcanvas-brand">
                <img src="{{ asset('assets/images/logo.png') }}" alt="ASETQU V.2" onerror="handleImageError(this)">
            </a>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <ul class="mobile-nav">
                @isset($navMenus)
                    @foreach($navMenus as $menuName => $menuItems)
                        @php
                            $firstItem = $menuItems->first();
                            $hasSubmenu = $menuItems->whereNotNull('submenu')->count() > 0;
                            $menuUrl = $firstItem->url;

                            $isActive = false;
                            foreach ($menuItems as $item) {
                                if ($item->url) {
                                    $cleanUrl = ltrim($item->url, '/');
                                    // Special handling for homepage - only exact match
                                    if ($cleanUrl === '' || $item->url === '/') {
                                        $isActive = request()->path() === '/';
                                    } else {
                                        $isActive = request()->is($cleanUrl . '*');
                                    }
                                    if ($isActive) break;
                                }
                            }
                        @endphp

                        @if($hasSubmenu)
                            <li class="has-submenu">
                                <a href="#" class="submenu-toggle">{{ $menuName }} <i class="fas fa-chevron-down"></i></a>
                                <ul class="submenu">
                                    @foreach($menuItems->whereNotNull('submenu') as $submenu)
                                        <li><a href="{{ url($submenu->url) }}">{{ $submenu->submenu }}</a></li>
                                    @endforeach
                                </ul>
                            </li>
                        @else
                            <li><a href="{{ url($menuUrl) }}" class="{{ $isActive ? 'active' : '' }}">{{ $menuName }}</a></li>
                        @endif
                    @endforeach
                @else
                    {{-- Fallback static menu --}}
                    <li><a href="{{ url('/') }}" class="{{ request()->is('/') ? 'active' : '' }}">Beranda</a></li>
                    <li><a href="{{ url('/games') }}" class="{{ request()->is('games*') ? 'active' : '' }}">Games</a></li>
                @endisset
            </ul>

            <div class="mobile-auth mt-4">
                @guest
                    <button type="button" class="btn btn-login w-100" data-bs-toggle="modal" data-bs-target="#loginModal" data-bs-dismiss="offcanvas">Masuk</button>
                @else
                    <div class="mobile-user-info mb-3">
                        @if(auth()->user()->avatar)
                            <img src="{{ asset('storage/' . auth()->user()->avatar) }}" alt="Avatar" class="mobile-avatar">
                        @else
                            <div class="mobile-avatar-placeholder">
                                <span>{{ strtoupper(substr(auth()->user()->name, 0, 1)) }}</span>
                            </div>
                        @endif
                        <div>
                            <strong>{{ auth()->user()->name }}</strong>
                            <small class="d-block text-muted">{{ auth()->user()->email }}</small>
                        </div>
                    </div>
                    @if(auth()->user()->isAdmin())
                        <a href="{{ url('/admin') }}" class="btn btn-outline-light w-100 mb-2">Admin Dashboard</a>
                    @else
                        <a href="{{ url('/dashboard') }}" class="btn btn-outline-light w-100 mb-2">Dashboard</a>
                    @endif
                    <form action="{{ url('/logout') }}" method="POST">
                        @csrf
                        <button type="submit" class="btn btn-danger w-100">Logout</button>
                    </form>
                @endguest
            </div>
        </div>
    </div>
</header>