{{--
 * Blade Template
 *
 * @version     1.0.$Revision:$
 * @version     SVN: $Id:$
 * @package     bplan-base/globals
 * @subpackage  Blades
 * @author      Wassilios Meletiadis <wassilios.meletiadis@bplan-solutions.de>
 * @author      Emilio Cannarozzo <emilio.cannarozzo@bplan-solutions.de>
 * @copyright   Copyright (C) 2025, 2026 bplan-solutions GmbH & Co. KG <https://www.bplan-solutions.de/>
 * /Δ\
--}}

    <div>
      <nav class="bg-white relative z-40 border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">

        <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
          <x-application-mark class="block w-auto h-9" />
            <div class="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
              <button
                  class="bg-white text-primary-700 border border-primary-700 hover:bg-gray-100 hover:text-white focus:ring-2 focus:outline-none focus:ring-primary-300 font-medium rounded-full text-sm p-1 text-center inline-flex items-center dark:border-primary-500 dark:text-primary-500 dark:hover:text-white dark:focus:ring-white-800 dark:hover:bg-gray-200"
                  id="userDropdown" aria-expanded="false" data-dropdown-toggle="user-dropdown"
                  data-dropdown-placement="bottom" type="button">
                <span class="sr-only">Open user menu</span>

                <svg class="size-6 text-gray-700 dark:text-white-700" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
                </svg>


              </button>

              <!-- User dropdown menu -->
              <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow-sm dark:bg-gray-700 dark:divide-gray-600" id="user-dropdown">
                <div class="px-4 py-3">
                  <span class="block text-sm text-gray-900 dark:text-white">
                      {{ auth()->user()->name }}
                  </span>
                  <span class="block text-sm  text-gray-500 truncate dark:text-gray-400">
                      {{ auth()->user()->email }}
                  </span>
                </div>
                <ul class="py-2" aria-labelledby="userDropdown">
                  <li>
                    <a href="{{ route('profile.show') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">
                      {{ __('globals::global.user-menu.profile') }}
                    </a>
                  </li>

                  {{--
                  <!-- Mandanten Untermenü -->
                  <li>
                    <button
                        type="button"
                        class="flex items-center justify-between w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
                        data-dropdown-toggle="tenant-dropdown"
                        data-dropdown-placement="left-start">
                      Mandanten
                      <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
                      </svg>
                    </button>
                    <div id="tenant-dropdown" class="z-50 hidden text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow-sm dark:bg-gray-700 dark:divide-gray-600">
                      <ul class="py-2 text-sm text-gray-700 dark:text-gray-400">
                        <li>
                          <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
                            Mandant 1
                          </a>
                        </li>
                        <li>
                          <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
                            Mandant 2
                          </a>
                        </li>
                      </ul>
                    </div>
                  </li> --}}

                  <li>
                    <form method="POST" action="{{ route('logout') }}" x-data>
                      @csrf
                      <a href="{{ route('logout') }}" @click.prevent="$root.submit();" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">
                        {{ __('globals::global.user-menu.logout') }}
                      </a>
                    </form>
                  </li>
                </ul>
              </div>


              <button aria-controls="navbar-user" aria-expanded="false"
                  class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
                  data-collapse-toggle="navbar-user" type="button">
                <span class="sr-only">Open main menu</span>
                <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
                </svg>
              </button>
            </div>

            <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-user">

            <ul class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
              <li>
                <a href="/"
                  :class="{ 'text-white bg-blue-700 rounded-sm md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500': {{ request()->routeIs('dashboard') ? 'true' : 'false' }}, 'text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700': {{ request()->routeIs('dashboard') ? 'true' : 'false' }} }"
                  class="block py-2 px-3" aria-current="page">
                    {{ __('globals::global.navbar.menu.dashboard') }}
                </a>
              </li>

@if (!empty($quickLinks))
    @php
        $User = auth()->user();

        $visibleQuickLinks = collect($quickLinks)->filter(
            fn($link) => empty($link['roles']) || $User->hasAnyRole($link['roles']) === true
        )->all();
    @endphp

    @if (!empty($visibleQuickLinks))

              <li>
                <button class="flex items-center justify-between w-full py-2 px-3"
                  :class="{ 'text-white bg-blue-700 rounded-sm md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500': {{ request()->routeIs('apps') ? 'true' : 'false' }}, 'text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700': {{ request()->routeIs('dashboard') ? 'true' : 'false' }} }"
                  data-dropdown-toggle="quickLinkDropdown" id="quickLinkDropdownLink">
                    {{ __('globals::global.navbar.menu.quick-links') }}

                  <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
                  </svg>
                </button>
                <div id="quickLinkDropdown" class="z-10 hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-48 dark:bg-gray-700 dark:divide-gray-600">
                  <ul class="py-2 text-sm text-gray-700 dark:text-gray-400" aria-labelledby="dropdownLargeButton">
    @foreach ($visibleQuickLinks as $link)
                    <li><a href="{{ route($link['route'], $link['params']) }}" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">{{ __($link['locale-key']) }}</a></li>
    @endforeach

                  </ul>
                </div>
              </li>

    @endif

@endif

@if (count($tenants) > 1)

              <li>
                <button class="flex items-center justify-between w-full py-2 px-3"
                  :class="{ 'text-white bg-blue-700 rounded-sm md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500': {{ request()->routeIs('apps') ? 'true' : 'false' }}, 'text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700': {{ request()->routeIs('dashboard') ? 'true' : 'false' }} }"
                  data-dropdown-toggle="tenantDropdown" id="tenantDropdownLink">
                    {{ __('globals::global.navbar.menu.tenants') }}

                  <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
                  </svg>
                </button>
                <div id="tenantDropdown" class="z-10 hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-48 dark:bg-gray-700 dark:divide-gray-600">
                  <ul class="py-2 text-sm text-gray-700 dark:text-gray-400" aria-labelledby="dropdownLargeButton">


    @foreach ($tenants as $tenant)
        @php
            $colorClass = (\Registry::get('core.tenantId') === $tenant['id']) ? ' bg-gray-100 dark:bg-gray-600 dark:text-white' : '';
        @endphp
                    <li><a href="{{ route('dashboard', ['init-tenant' => $tenant['id']]) }}" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white{{ $colorClass }}">{!! $tenant['label'] !!}</a></li>

    @endforeach

                  </ul>
                </div>
              </li>

@endif

              <li>
                <x-globals::global.dark-switch />
              </li>

@if (count(\Registry::get('core.tenantLocales')) >= 2)

              <li class="flex items-center pr-2">
                <x-globals::global.language-switch languageContext="{{ \BplanBase\Globals\Enums\LanguageContext::Backend }}" />
              </li>

@endif


            </ul>

          </div>
        </div>

      </nav>
    </div>
