@php
    $nav = [];
    foreach ($carousels as $carousel) {
        $nav[] = [
            'title' => trans($carousel->name), 
            'view' => $carousel->slug === 'welcome-carousel' ? 'welcomecarousel' : 'pages/settings/carousels/' . $carousel->slug,
            'icon' => $carousel->slug === 'welcome-carousel' ? 'fas fa-home' : 'fas fa-images'
        ];
    }
@endphp

<!--begin::Enhanced Navbar-->
<div class="card mb-5 mb-xl-10 shadow-sm" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);">
    <div class="card-body p-0">
        <div class="d-flex overflow-auto">
            <ul class="nav nav-tabs nav-line-tabs nav-line-tabs-2x fs-6 fw-semibold flex-nowrap w-100" style="border-bottom: none;">
                @foreach ($nav as $each)
                    <!--begin::Nav item-->
                    <li class="nav-item flex-fill">
                        <a class="nav-link d-flex align-items-center justify-content-center py-5 px-8 {{ theme()->getPagePath() === $each['view'] ? 'active' : '' }}"
                           href="{{ $each['view'] ? theme()->getPageUrl($each['view']) : '#' }}"
                           style="border: none; transition: all 0.3s ease; min-height: 80px; background: transparent;">
                            
                            @if(theme()->getPagePath() === $each['view'])
                                <!-- Active state -->
                                <div class="d-flex flex-column align-items-center text-center p-3 rounded" style="background: rgba(13, 110, 253, 0.1); border: 2px solid #0d6efd;">
                                    <i class="{{ $each['icon'] }} text-primary mb-3" style="font-size: 1.4rem;"></i>
                                    <span class="text-primary fw-bold fs-6" style="line-height: 1.2; letter-spacing: 0.5px;">{{ $each['title'] }}</span>
                                    <div class="bg-primary mt-3" style="height: 4px; width: 80%; border-radius: 2px;"></div>
                                </div>
                            @else
                                <!-- Inactive state -->
                                <div class="d-flex flex-column align-items-center text-center p-3 rounded" style="background: rgba(108, 117, 125, 0.1);">
                                    <i class="{{ $each['icon'] }} text-muted mb-3" style="font-size: 1.4rem;"></i>
                                    <span class="text-muted fs-6" style="line-height: 1.2; letter-spacing: 0.5px;">{{ $each['title'] }}</span>
                                </div>
                            @endif
                            
                        </a>
                    </li>
                    <!--end::Nav item-->
                @endforeach
            </ul>
        </div>
    </div>
</div>
<!--end::Enhanced Navbar-->