{{-- Top Navbar sa Brand, Navigation i User Menu --}}
<header class="navbar navbar-expand-md d-print-none sticky-top" id="main-navbar">
    <div class="container-xl">
        {{-- Logo --}}
        <a href="{{ route('home') }}" class="navbar-brand navbar-brand-autodark pe-0 pe-md-3">
            <img src="{{ asset('media/cropped-Logo-1-150x150.jpg') }}" alt="{{ config('app.name') }}" height="36" width="36" style="border-radius: 50%; object-fit: cover;" class="me-2">
            <span class="fw-bold">{{ config('app.name') }}</span>
        </a>

        {{-- Mobile toggler --}}
        <button class="navbar-toggler ms-auto me-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        {{-- Nav links (inlined from navigation partial) --}}
        <div class="collapse navbar-collapse" id="navbar-menu">
            <div class="d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item d-md-none {{ request()->is('/') ? 'active' : '' }}">
                        <a class="nav-link" href="{{ route('home') }}">
                            <span class="nav-link-icon d-md-none d-xl-inline-block">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
                            </span>
                            <span class="nav-link-title">Naslovna</span>
                        </a>
                    </li>

                    <li class="nav-item dropdown {{ request()->is('led-film*') || request()->is('smart-film*') || request()->is('ultratanki-prozirni-zaslon*') ? 'active' : '' }}">
                        <a class="nav-link dropdown-toggle" href="#" role="button" tabindex="0" aria-haspopup="true" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="outside">
                            <span class="nav-link-icon d-md-none d-xl-inline-block">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 7m0 1a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1z" /><path d="M8 7v-2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1v2" /><path d="M12 12l0 .01" /><path d="M3 13a20 20 0 0 0 18 0" /></svg>
                            </span>
                            <span class="nav-link-title">Pametna rješenja</span>
                        </a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item {{ request()->is('smart-film*') ? 'active' : '' }}" href="{{ route('smart-film') }}">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 3m0 1a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v16a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1z" /><path d="M3 9h18" /><path d="M9 21v-12" /></svg>
                                Smart Film
                            </a>
                            <a class="dropdown-item {{ request()->is('led-film*') ? 'active' : '' }}" href="{{ route('led-film') }}">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3a6 6 0 0 1 6 6a6 6 0 0 1 -3 5.197v1.803h-6v-1.803a6 6 0 0 1 -3 -5.197a6 6 0 0 1 6 -6" /><path d="M9 17v2a1 1 0 0 0 1 1h4a1 1 0 0 0 1 -1v-2" /></svg>
                                LED Film
                            </a>
                            <a class="dropdown-item {{ request()->is('ultratanki-prozirni-zaslon*') ? 'active' : '' }}" href="{{ route('ultratanki-zaslon') }}">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 5m0 1a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1z" /><path d="M7 20h10" /><path d="M9 16v4" /><path d="M15 16v4" /></svg>
                                Ultratanki prozirni zaslon
                            </a>
                        </div>
                    </li>

                    <li class="nav-item dropdown {{ request()->is('klime*') || request()->is('montaza*') || request()->is('servis*') ? 'active' : '' }}">
                        <a class="nav-link dropdown-toggle" href="#" role="button" tabindex="0" aria-haspopup="true" aria-expanded="false" data-bs-toggle="dropdown" data-bs-auto-close="outside">
                            <span class="nav-link-icon d-md-none d-xl-inline-block">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9.5 21a8.5 8.5 0 1 1 5 0" /><path d="M12 3l0 9" /><path d="M12 9l-2.5 2.5" /><path d="M12 9l2.5 2.5" /></svg>
                            </span>
                            <span class="nav-link-title">Klimatizacija</span>
                        </a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item {{ request()->is('klime*') ? 'active' : '' }}" href="{{ route('klime') }}">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9.5 21a8.5 8.5 0 1 1 5 0" /><path d="M12 3l0 9" /><path d="M12 9l-2.5 2.5" /><path d="M12 9l2.5 2.5" /></svg>
                                Klime
                            </a>
                            <a class="dropdown-item {{ request()->is('montaza*') ? 'active' : '' }}" href="{{ route('montaza') }}">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 10h3v-3l-3.5 -3.5a6 6 0 0 1 8 8l6 6a2 2 0 0 1 -3 3l-6 -6a6 6 0 0 1 -8 -8l3.5 3.5" /></svg>
                                Montaža
                            </a>
                            <a class="dropdown-item {{ request()->is('servis*') ? 'active' : '' }}" href="{{ route('servis') }}">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M19.071 4.929l-1.414 1.414" /><path d="M4.929 4.929l1.414 1.414" /><path d="M12 2v2" /><path d="M12 20v2" /><path d="M20 12h2" /><path d="M2 12h2" /><path d="M17.657 17.657l-1.414 -1.414" /><path d="M6.343 17.657l1.414 -1.414" /></svg>
                                Servis
                            </a>
                        </div>
                    </li>

                    <li class="nav-item {{ request()->is('pozivni-centar*') ? 'active' : '' }}">
                        <a class="nav-link" href="{{ route('pozivni-centar') }}">
                            <span class="nav-link-icon d-md-none d-xl-inline-block">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" /></svg>
                            </span>
                            <span class="nav-link-title">Pozivni centar</span>
                        </a>
                    </li>

                    <li class="nav-item {{ request()->is('kontakt*') ? 'active' : '' }}">
                        <a class="nav-link" href="{{ route('kontakt') }}">
                            <span class="nav-link-icon d-md-none d-xl-inline-block">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z" /><path d="M3 7l9 6l9 -6" /></svg>
                            </span>
                            <span class="nav-link-title">Kontakt</span>
                        </a>
                    </li>

                    @auth
                        <li class="nav-item {{ request()->is('dashboard') ? 'active' : '' }}">
                            <a class="nav-link" href="{{ route('dashboard') }}">
                                <span class="nav-link-title">Dashboard</span>
                            </a>
                        </li>
                        <li class="nav-item {{ request()->is('stranice*') ? 'active' : '' }}">
                            <a class="nav-link" href="{{ route('pages.index') }}">
                                <span class="nav-link-title">Stranice</span>
                            </a>
                        </li>
                    @endauth
                </ul>

                {{-- CTA + User menu --}}
                <div class="navbar-nav flex-row gap-2 align-items-center">

                    {{-- Theme Toggle --}}
                    <div class="nav-item dropdown">
                        <a href="#" class="nav-link px-0" role="button" tabindex="0" aria-haspopup="true" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Theme settings">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
                                <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
                            </svg>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end" style="--tblr-dropdown-min-width: 10rem;">
                            <a href="javascript:void(0)" class="dropdown-item" data-bs-theme-value="light">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-sun me-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path>
                                    <path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path>
                                </svg>
                                Svijetla tema
                            </a>
                            <a href="javascript:void(0)" class="dropdown-item" data-bs-theme-value="dark">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-moon me-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path>
                                </svg>
                                Tamna tema
                            </a>
                            <a href="javascript:void(0)" class="dropdown-item" data-bs-theme-value="auto">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-desktop me-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <path d="M3 5a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-10z"></path>
                                    <path d="M7 20h10"></path>
                                    <path d="M9 16v4"></path>
                                    <path d="M15 16v4"></path>
                                </svg>
                                Sustav
                            </a>
                        </div>
                    </div>

                    @guest
                        <a href="{{ route('login') }}" class="btn btn-primary">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                <path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" />
                                <path d="M20 12h-13l3 -3m0 6l-3 -3" />
                            </svg>
                            Prijava
                        </a>
                    @endguest

                    @auth
                        <div class="nav-item dropdown">
                            <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
                                <span class="avatar avatar-sm">{{ substr(Auth::user()->name, 0, 2) }}</span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                                <div class="dropdown-item text-secondary small">{{ Auth::user()->email }}</div>
                                <div class="dropdown-divider"></div>
                                <a href="{{ route('dashboard') }}" class="dropdown-item">Dashboard</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="{{ route('logout') }}"
                                   onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                                    Odjava
                                </a>
                                <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                    @csrf
                                </form>
                            </div>
                        </div>
                    @endauth
                </div>
            </div>
        </div>
    </div>
</header>