@php
    $parents = menus(1);
@endphp

{{-- Include CSS and JS --}}
@push('styles')
<link rel="stylesheet" href="{{ asset('css/mobile-menu.css') }}">
@endpush

@push('scripts')
<script src="{{ asset('js/mobile-menu.js') }}"></script>
@endpush

<section class="main--menu--section">
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand" href="{{ url('/') }}">
                <img src="{{ asset('asian') }}/img/logo_asian_online.png" alt="asian tv logo">
            </a>

            {{-- Mobile Toggle Button --}}
            <button class="navbar-toggler" type="button">
                <span class="navbar-toggler-icon"></span>
            </button>

            {{-- Desktop Menu --}}
            <div class="collapse navbar-collapse" id="navbarSupported">
                <ul class="navbar-nav main_header_navbar_nav">
                    @forelse($parents as $key=>$parent)
                        @php
                            $menu = $parent;
                            $parent = $parent->category;
                        @endphp

                        @if ($menu->type == 'category')
                            @if ($parent->is_mega_menu == 1)
                                @include('asian.layouts.mega-li')
                            @else
                                @include('asian.layouts.dropdown-li')
                            @endif
                        @endif

                        @if ($menu->type == 'custom')
                            <li class="nav-item dropdown mega--munu">
                                <a class="nav-link" href="{{ $menu->url }}">{{ $menu->title }}</a>
                            </li>
                        @endif

                        @if ($menu->type == 'page' && isset($menu->page->slug))
                            <li class="nav-item dropdown mega--munu">
                                <a class="nav-link" target="_blank"
                                    href="{{ $menu->page && $menu->page->slug ? route('page.details', $menu->page->slug) : '#' }}">
                                    {{ $menu->title }}
                                </a>
                            </li>
                        @endif
                    @empty
                    @endforelse
                </ul>
            </div>
        </nav>
    </div>
</section>

{{-- Mobile Drawer Menu --}}
<div class="drawer-overlay" id="drawerOverlay"></div>
<div class="mobile-drawer" id="mobileDrawer">
    <div class="drawer-header">
        <div class="drawer-logo">
            <img src="{{ asset('asian') }}/img/logo_asian_online.png" alt="asian tv logo">
        </div>
        <button class="drawer-close" id="drawerClose">&times;</button>
    </div>

    <ul class="drawer-menu">
        @forelse($parents as $key=>$parent)
            @php
                $menu = $parent;
                $parent = $parent->category;
            @endphp

            @if ($menu->type == 'category')
                @if ($parent->is_mega_menu == 1)
                    @include('asian.layouts.menu.drawer-mega-menu', ['parent' => $parent])
                @else
                    @include('asian.layouts.menu.drawer-dropdown-menu', ['parent' => $parent])
                @endif
            @endif

            @if ($menu->type == 'custom')
                <li>
                    <a href="{{ $menu->url }}">{{ $menu->title }}</a>
                </li>
            @endif

            @if ($menu->type == 'page' && isset($menu->page->slug))
                <li>
                    <a target="_blank" href="{{ $menu->page && $menu->page->slug ? route('page.details', $menu->page->slug) : '#' }}">
                        {{ $menu->title }}
                    </a>
                </li>
            @endif
        @empty
        @endforelse
    </ul>
</div>
<style>
    /* Mobile Drawer Menu Styles */

/* Drawer overlay */
.drawer-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.drawer-overlay.active {
    display: block;
    opacity: 1;
}

/* Mobile drawer */
.mobile-drawer {
    position: fixed;
    top: 0;
    left: -300px;
    width: 280px;
    height: 100%;
    background: #fff;
    z-index: 9999;
    overflow-y: auto;
    transition: left 0.3s ease;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.mobile-drawer.active {
    left: 0;
    z-index: 999999999999;
}

/* Drawer header */
.drawer-header {
    padding: 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.drawer-logo img {
    max-height: 40px;
}

.drawer-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #333;
    line-height: 1;
    padding: 0;
}

/* Drawer menu */
.drawer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.drawer-menu > li {
    border-bottom: 1px solid #f0f0f0;
}

.drawer-menu a {
    display: block;
    padding: 15px 20px;
    color: #333;
    text-decoration: none;
    transition: background 0.2s;
}

.drawer-menu a:hover {
    background: #f8f9fa;
}

/* Submenu styles */
.drawer-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #f8f9fa;
}

.drawer-submenu.active {
    max-height: 1000px;
}

.drawer-submenu li {
    border-bottom: 1px solid #e9ecef;
}

.drawer-submenu a {
    padding: 12px 20px 12px 40px;
    font-size: 14px;
}

/* Mega menu in drawer */
.drawer-mega-submenu {
    padding: 10px 20px;
    background: #f8f9fa;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.drawer-mega-submenu.active {
    max-height: 2000px;
}

.drawer-mega-item {
    padding: 8px 0;
}

.drawer-mega-item a {
    padding: 8px 20px;
    font-size: 14px;
}

.drawer-mega-item i {
    margin-right: 5px;
    color: #007bff;
}

/* Menu toggle button */
.drawer-menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.drawer-menu-item > a {
    flex: 1;
}

.submenu-toggle {
    background: none;
    border: none;
    padding: 15px 20px;
    cursor: pointer;
    font-size: 18px;
    color: #666;
}

.submenu-toggle i {
    transition: transform 0.3s;
}

.submenu-toggle.active i {
    transform: rotate(180deg);
}

/* Desktop menu - hide drawer elements */
@media (min-width: 992px) {
    .mobile-drawer,
    .drawer-overlay,
    .navbar-toggler {
        display: none !important;
    }

    .navbar-collapse {
        display: flex !important;
    }
}

/* Mobile menu - hide desktop menu, show drawer */
@media (max-width: 991px) {
    .navbar-collapse {
        display: none !important;
    }

    .navbar-toggler {
        display: block;
    }
}
</style>
<script>
    // Mobile Drawer Menu JavaScript

document.addEventListener('DOMContentLoaded', function() {
    const drawer = document.getElementById('mobileDrawer');
    const overlay = document.getElementById('drawerOverlay');
    const openBtn = document.querySelector('.navbar-toggler');
    const closeBtn = document.getElementById('drawerClose');

    // Open drawer
    if (openBtn) {
        openBtn.addEventListener('click', function(e) {
            e.preventDefault();
            drawer.classList.add('active');
            overlay.classList.add('active');
            document.body.style.overflow = 'hidden';
        });
    }

    // Close drawer
    function closeDrawer() {
        drawer.classList.remove('active');
        overlay.classList.remove('active');
        document.body.style.overflow = '';
    }

    if (closeBtn) {
        closeBtn.addEventListener('click', closeDrawer);
    }

    if (overlay) {
        overlay.addEventListener('click', closeDrawer);
    }

    // Submenu toggle
    const submenuToggles = document.querySelectorAll('.submenu-toggle');

    submenuToggles.forEach(function(toggle) {
        toggle.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();

            const submenu = this.parentElement.nextElementSibling;
            const isActive = submenu.classList.contains('active');

            // Close all other submenus at the same level
            const parentLi = this.closest('li');
            const siblings = parentLi.parentElement.children;

            Array.from(siblings).forEach(function(sibling) {
                if (sibling !== parentLi) {
                    const siblingSubmenu = sibling.querySelector('.drawer-submenu, .drawer-mega-submenu');
                    const siblingToggle = sibling.querySelector('.submenu-toggle');
                    if (siblingSubmenu) {
                        siblingSubmenu.classList.remove('active');
                    }
                    if (siblingToggle) {
                        siblingToggle.classList.remove('active');
                    }
                }
            });

            // Toggle current submenu
            if (isActive) {
                submenu.classList.remove('active');
                this.classList.remove('active');
            } else {
                submenu.classList.add('active');
                this.classList.add('active');
            }
        });
    });

    // Close drawer on link click (optional)
    const drawerLinks = document.querySelectorAll('.mobile-drawer a:not(.has-submenu)');
    drawerLinks.forEach(function(link) {
        link.addEventListener('click', function() {
            // Optional: close drawer when clicking a link
            // closeDrawer();
        });
    });
});
</script>