<div class="navbar-nav">
    <div class="dropdown position-static pb-lg-2">
        <button type="button" class="nav-link animate-underline fw-semibold text-uppercase ps-0" data-bs-toggle="dropdown"
            data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">
            <i class="ci-menu fs-lg me-2"></i>
            <span class="animate-target">{{ __('header.categories') }}</span>
        </button>
        <div class="dropdown-menu w-100 p-4 px-xl-5" style="--cz-dropdown-spacer: .75rem">

            <!-- Nav tabs -->
            <ul class="nav nav-underline justify-content-lg-center mt-n2 mt-lg-0 mb-4" role="tablist">
                @foreach ($genders as $key => $gender)
                    <li class="nav-item" role="presentation">
                        <button type="button" class="nav-link text-uppercase {{ $key == 0 ? 'active' : '' }}" id="gender-{{ $gender->id }}-tab"
                            data-bs-toggle="tab" data-bs-target="#gender-{{ $gender->id }}-tab-pane" role="tab"
                            aria-controls="gender-{{ $gender->id }}-tab-pane" aria-selected="true">
                            {{ $gender->name }}
                        </button>
                    </li>
                @endforeach
                {{-- <li class="nav-item" role="presentation">
                    <button type="button" class="nav-link text-uppercase active" id="womens-tab" data-bs-toggle="tab"
                        data-bs-target="#womens-tab-pane" role="tab" aria-controls="womens-tab-pane"
                        aria-selected="true">
                        Women's
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button type="button" class="nav-link text-uppercase" id="mens-tab" data-bs-toggle="tab"
                        data-bs-target="#mens-tab-pane" role="tab" aria-controls="mens-tab-pane"
                        aria-selected="false">
                        Men's
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button type="button" class="nav-link text-uppercase" id="kids-tab" data-bs-toggle="tab"
                        data-bs-target="#kids-tab-pane" role="tab" aria-controls="kids-tab-pane"
                        aria-selected="false">
                        Kids'
                    </button>
                </li> --}}
            </ul>

            <!-- Tab panes -->
            <div class="tab-content pb-xl-4">

                @foreach ($genders as $key => $gender)
                    <div class="tab-pane fade show {{ $key == 0 ? 'active' : '' }}" id="gender-{{ $gender->id }}-tab-pane" role="tabpanel"
                        aria-labelledby="gender-{{ $gender->id }}-tab">
                        <div class="row g-4">

                            @foreach ($categories as $chunks)
                             
                                    <div class="col-lg-2">
                                       
                                        <ul class="nav flex-column gap-2 mt-0">
                                            @foreach ($chunks as $chunk)
                                            <li class="d-flex w-100 pt-1">
                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                    href="{{ route('product.index', ['filter[category]' => $chunk->id, 'filter[gender]' => $gender->id]) }}">{{ $chunk->name }}</a>
                                            </li>
                                            @endforeach
                                           
                                        </ul>
                                    </div>
                            @endforeach


                            <div class="col-lg-4 d-none d-lg-block" data-bs-theme="light">
                                <div class="position-relative d-flex flex-column h-100 rounded-4 overflow-hidden p-4">
                                    <div
                                        class="position-relative d-flex flex-column justify-content-between h-100 z-2 pt-xl-2 ps-xl-2">
                                        <div class="h4 lh-base">Women's<br>Heels<br>Collection</div>
                                        <div>
                                            <a class="btn btn-sm btn-dark stretched-link"
                                                href="{{ route('second', ['shop', 'catalog-fashion']) }}"
                                                data-bs-theme="light">Shop now</a>
                                        </div>
                                    </div>
                                    <img src="/img/mega-menu/fashion/01.jpg"
                                        class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip"
                                        alt="Image">
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach


            </div>
        </div>
    </div>
</div>
