{{-- Collapsible Navigation Menu --}}
<header class="navbar-expand-md">
    <div class="collapse navbar-collapse" id="navbar-menu">
        <div class="navbar">
            <div class="container-xl">
                <ul class="navbar-nav">
                    {{-- Naslovna --}}
                    <li class="nav-item {{ request()->is('/') ? 'active' : '' }}">
                        <a class="nav-link" href="{{ route('home') }}">
                            <span class="nav-link-icon d-md-none d-lg-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>

                    {{-- Pametna rješenja dropdown --}}
                    <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="#" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false">
                            <span class="nav-link-icon d-md-none d-lg-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="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 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') }}">Smart Film</a>
                            <a class="dropdown-item {{ request()->is('led-film*') ? 'active' : '' }}" href="{{ route('led-film') }}">LED Film</a>
                            <a class="dropdown-item {{ request()->is('ultratanki-prozirni-zaslon*') ? 'active' : '' }}" href="{{ route('ultratanki-zaslon') }}">Ultratanki prozirni zaslon</a>
                        </div>
                    </li>

                    {{-- Klimatizacija dropdown --}}
                    <li class="nav-item dropdown {{ request()->is('klime*') || request()->is('montaza*') || request()->is('servis*') ? 'active' : '' }}">
                        <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false">
                            <span class="nav-link-icon d-md-none d-lg-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 8a3 3 0 0 1 6 0c0 3.6 -6 3 -6 7h6" />
                                    <path d="M12 19v1" />
                                    <path d="M3 7a12.5 12.5 0 0 1 9 -3a12.5 12.5 0 0 1 9 3" />
                                    <path d="M3 17a12.5 12.5 0 0 0 9 3a12.5 12.5 0 0 0 9 -3" />
                                </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') }}">Klime</a>
                            <a class="dropdown-item {{ request()->is('montaza*') ? 'active' : '' }}" href="{{ route('montaza') }}">Montaža</a>
                            <a class="dropdown-item {{ request()->is('servis*') ? 'active' : '' }}" href="{{ route('servis') }}">Servis</a>
                        </div>
                    </li>

                    {{-- Pozivni centar --}}
                    <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-lg-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>

                    {{-- Kontakt --}}
                    <li class="nav-item {{ request()->is('kontakt*') ? 'active' : '' }}">
                        <a class="nav-link" href="{{ route('kontakt') }}">
                            <span class="nav-link-icon d-md-none d-lg-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>

                    {{-- Login (samo za goste) --}}
                    @guest
                        <li class="nav-item {{ request()->is('login') ? 'active' : '' }}">
                            <a class="nav-link" href="{{ route('login') }}">
                                <span class="nav-link-icon d-md-none d-lg-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="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>
                                </span>
                                <span class="nav-link-title">Prijava</span>
                            </a>
                        </li>
                    @endguest

                    {{-- Dashboard (samo za authenticated korisnika) --}}
                    @auth
                        <li class="nav-item {{ request()->is('dashboard') ? 'active' : '' }}">
                            <a class="nav-link" href="{{ route('dashboard') }}">
                                <span class="nav-link-icon d-md-none d-lg-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="M4 4h6v8h-6z" />
                                        <path d="M4 16h6v4h-6z" />
                                        <path d="M14 12h6v8h-6z" />
                                        <path d="M14 4h6v4h-6z" />
                                    </svg>
                                </span>
                                <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-icon d-md-none d-lg-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="M14 3v4a1 1 0 0 0 1 1h4" />
                                        <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
                                        <path d="M9 9l1 0" />
                                        <path d="M9 13l6 0" />
                                        <path d="M9 17l6 0" />
                                    </svg>
                                </span>
                                <span class="nav-link-title">Stranice (DB)</span>
                            </a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('logout') }}"
                               onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                                <span class="nav-link-icon d-md-none d-lg-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="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="M7 12h14l-3 -3m0 6l3 -3" />
                                    </svg>
                                </span>
                                <span class="nav-link-title">Odjava</span>
                            </a>
                            <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                @csrf
                            </form>
                        </li>
                    @endauth
                </ul>
            </div>
        </div>
    </div>
</header>