@php
    $categories = App\Models\Category::with('subcategory')->whereStatus(1)->orderby('serial', 'asc')->take(8)->get();
@endphp

<nav class="mega-nav">
    <style>
        .container {
            max-width: 1320px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .mega-nav {
            position: relative;
            width: 100%;
            font-family: 'Arial', sans-serif;
        }

        .nav-menu {
            display: flex !important;
            position: relative;
            list-style: none;
            padding: 0;
            margin: 0;
            background: #fff;
        }

        .menu-item {

            border-right: 1px solid #f5f5f5;
        }

        .menu-link {
            display: block;
            padding: 10px 25px;
            text-decoration: none;
            color: #333;
            transition: all 0.2s ease;
            white-space: nowrap;
        }

        .menu-link:hover {
            background: #f8f9fa;
            color: #007bff;
        }

        .mega-menu {
            position: absolute;
            left: 0;
            top: 100%;
            background: #fff;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            opacity: 0;
            visibility: hidden;
            transition: all 0.2s ease;
            z-index: 1000;
            width: 100% !important;
            max-height: 450px;
            overflow-y: auto;
        }

        .menu-item:hover .mega-menu {
            opacity: 1;
            visibility: visible;
        }

        .mega-menu-wrapper {
            max-width: 100%;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
            gap: 30px;
            padding: 16px;
        }

        .mega-menu-column {
            min-width: 150px;
        }

        .column-heading {
            margin: 0 0 15px;
            font-size: 16px;
            font-weight: 600;
            border-bottom: 2px solid #007bff;
            padding-bottom: 8px;
        }

        .column-heading a {
            color: #333;
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .column-heading a:hover {
            color: #007bff;
        }

        .submenu-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .submenu-list li a {
            display: block;
            padding: 8px 0;
            color: #666;
            text-decoration: none;
            transition: color 0.2s ease;
            font-size: 14px;
        }

        .submenu-list li a:hover {
            color: #007bff;
            padding-left: 5px;
        }

        .all-categories {
            background: #f8f9fa;
            font-weight: 600;
        }

        /* Arrow indicator for dropdown */
        .menu-link i {
            font-size: 12px;
            margin-left: 5px;
        }

        .shop-button {
            padding: 1px 20px;
            line-height: 0px;
            height: 40px;
            margin-left: auto;
            margin-top: 3px;
            color: white !important;
            background-color: #FF00A3;
            border: 1px solid #FF00A3 !important;
            transition: all 0.3s ease;
            border-radius: 4px;
            text-decoration: none;
        }

        .shop-button:hover {

            color: #fff !important;
            background-color: #0e0c62 !important;
            border-color: #0e0c62 !important;
        }
    </style>
    <div class="container">
        <div class="mega-nav-container d-flex justify-content-between items-center g-3">

            <ul class="nav-menu w-100">
                @foreach ($categories as $key => $pcategory)
                    <li class="menu-item">
                        <a class="menu-link" href="{{ route('front.catalog') . '?category=' . $pcategory->slug }}">
                            {{ $pcategory->name }}
                            @if ($pcategory->subcategory->count() > 0)
                                <i class="fas fa-chevron-down"></i>
                            @endif
                        </a>
                        @if ($pcategory->subcategory->count() > 0)
                            <div class="mega-menu">
                                <div class="mega-menu-wrapper">
                                    <div>
                                        <img src="{{ asset('assets/images/' . $pcategory->photo) }}"
                                            alt="Product Image" loading="lazy">
                                    </div>
                                    @foreach ($pcategory->subcategory as $scategory)
                                        <div class="mega-menu-column">
                                            <h3 class="column-heading">
                                                <a
                                                    href="{{ route('front.catalog') . '?subcategory=' . $scategory->slug }}">
                                                    {{ $scategory->name }}
                                                </a>
                                            </h3>
                                            @if ($scategory->childcategory->count() > 0)
                                                <ul class="submenu-list">
                                                    @foreach ($scategory->childcategory as $childcategory)
                                                        <li>
                                                            <a
                                                                href="{{ route('front.catalog') . '?childcategory=' . $childcategory->slug }}">
                                                                {{ $childcategory->name }}
                                                            </a>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    </li>
                @endforeach
                <button class="shop-button" onclick="window.location.href='{{ route('front.catalog') }}'">
                    Shop Now
                </button>
            </ul>
        </div>
    </div>
</nav>