{{-- Collapsed-sidebar header fix: hide the client name and shrink the
     brand area to logo + toggle. Mirrors the lg:in-data-[sidebar-open=false]
     Tailwind variants on the elements below, so it also works before the
     CSS build has been re-run. --}}
<style>
    @media (min-width: 1024px) {
        html[data-sidebar-open="false"] #brand-section { width: fit-content; }
        html[data-sidebar-open="false"] #client-name-section { display: none; }
        html[data-sidebar-open="false"] #toggle-header-section-button { margin-inline-start: 0.5rem; }
    }
</style>

<div class="flex items-stretch gap-x-6">
  <div id="brand-section" class="flex border-e border-border items-center gap-2 w-(--sidebar-width) lg:in-data-[sidebar-open=false]:w-fit">
    <div class="flex items-center w-full">
      <div class="flex items-center px-0.5 justify-center shrink-0 border-e border-border lg:w-(--sidebar-collapsed-width) h-(--header-height) bg-muted">
        <a
        @can('is-admin')
            href="{{ route('admin.dashboard') }}"
        @elseif(auth()->user()->can('is-branch-manager'))
            href="{{ route('hdr.dashboard') }}"
        @elseif(auth()->user()->can('is-drp'))
            href="{{ route('drp.dashboard') }}"
        @else
            href="{{ route('home') }}"
        @endcan
        class="shrink-0"
        >
          <img alt="Logo" style="object-fit: contain;" class="rounded-md size-14" src="{{ asset('img/logo/sanbs_logo_es.png') }}" />
          <img alt="Logo" class="hidden dark:block size-14" src="{{ asset('assets/media/app/mini-logo-gray-dark.svg') }}" />
        </a>
      </div>

      <div id="client-name-section" class="w-full grow items-center justify-between px-5 gap-2.5 transition-all duration-300 lg:in-data-[sidebar-open=false]:hidden">

            <!-- Mobile Menu -->
            <button class="kt-btn kt-btn-ghost lg:hidden" data-kt-drawer-toggle="#sidebar">
            <i class="ki-filled ki-menu"></i>
            </button>

            <!-- Client Dropdown -->
            <button aria-expanded="false" aria-haspopup="menu" class="cursor-pointer group focus-visible:outline-hidden items-center justify-center has-data-[arrow=true]:justify-between whitespace-nowrap font-medium ring-offset-background transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-60 [&_svg]:shrink-0 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground h-8.5 rounded-md gap-1.5 text-[0.8125rem] leading-(--text-sm--line-height) [&_svg:not([class*=size-])]:size-4 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 [&_svg:not([role=img]):not([class*=text-]):not([class*=opacity-])]:opacity-60 select-none inline-flex text-muted-foreground hover:text-foreground px-1.5 -ms-1.5" data-slot="dropdown-menu-trigger" data-state="closed" id="radix-«r0»" type="button">

                <span class="text-mono text-sm font-medium hidden lg:block">
                        SANBS <span class="text-xs">CRM</span>
                </span>

            </button>
        </div>
        <button id="toggle-header-section-button" class="cursor-pointer me-5 lg:in-data-[sidebar-open=false]:ms-2 group focus-visible:outline-hidden items-center justify-center has-data-[arrow=true]:justify-between whitespace-nowrap font-medium ring-offset-background transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-60 [&_svg]:shrink-0 hover:bg-accent data-[state=open]:bg-accent data-[state=open]:text-accent-foreground rounded-md gap-1.5 text-[0.8125rem] leading-(--text-sm--line-height) focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 shrink-0 w-8.5 h-8.5 p-0 [&_svg:not([class*=size-])]:size-4 hidden lg:inline-flex text-muted-foreground hover:text-foreground" data-slot="button">
            <svg aria-hidden="true" class="lucide lucide-panel-right -rotate-180 in-data-[sidebar-open=false]:rotate-0 opacity-100" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                <rect height="18" rx="2" width="18" x="3" y="3">
                </rect>
                <path d="M15 3v18">
                </path>
            </svg>
        </button>

    </div>
  </div>
  <div id="title-sections" class="flex-row items-center flex-wrap gap-1 lg:gap-5 mb-5 lg:mb-0 hidden lg:flex">
        <ol class="kt-breadcrumb">

            @foreach (session('top_route') as $key => $item)

                <li class="kt-breadcrumb-item">
                    <a class="kt-breadcrumb-link"
                        @if (str_contains($key, '.') )
                            href="{{ route($key) }}"
                        @endif
                        >
                        {{$item}}
                    </a>
                </li>
                @if ($key !== 'last' )
                    <li class="kt-breadcrumb-separator">
                        /
                    </li>
                @endif
            @endforeach
        </ol>
    </div>
</div>

<nav class="flex items-center gap-2.5">

    {{-- <button class="kt-btn es-bg-green-sanbs text-white" type="button">
        <span class="hidden lg:block">Admin Dashboard</span>
    </button> --}}

    <el-dropdown class="inline-block">
        <button class="cursor-pointer shrink-0">
            <div class="relative flex size-11 bg-white rounded-full ring-2 ring-white dark:bg-neutral-900 dark:ring-neutral-900">

                @if (auth()->user()->profile_url)
                    <img class="shrink-0 size-9.5 rounded-full" src="{{ asset(auth()->user()->profile_url) }}" alt="Avatar"/>
                @else
                    <span class="inline-flex items-center justify-center size-9.5 text-sm font-semibold rounded-full border border-es-dark text-es-success">
                        <span class="inline-flex items-center justify-center size-7.5 rounded-full bg-es-dark/70 font-semibold text-white">
                            {{ auth()->user()->name[0] . "" . auth()->user()->surname[0]  }}
                        </span>
                    </span>
                @endif

            </div>
        </button>

        <el-menu anchor="bottom end" popover class="w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg outline-1 outline-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in dark:divide-white/10 dark:bg-gray-800 dark:shadow-none dark:-outline-offset-1 dark:outline-white/10">
            <div class="flex items-center justify-between p-3.5 ">
                <div class="flex items-center gap-2">

                    @if (auth()->user()->profile_url)
                        <img class="shrink-0 size-8  rounded-full" src="{{ asset(auth()->user()->profile_url) }}" alt="Avatar">
                    @else

                        <span class="inline-flex items-center justify-center size-9.5 text-sm font-semibold rounded-full border border-es-dark text-es-success">
                            <span class="inline-flex items-center justify-center size-7.5 rounded-full bg-es-dark/70 font-semibold text-white">
                                {{ auth()->user()->name[0] . "" . auth()->user()->surname[0]  }}
                            </span>
                         </span>
                    @endif
                    <div class="flex flex-col gap-1.5">
                        <span class="text-sm text-foreground font-semibold leading-none">
                        {{auth()->user()->name.' '.auth()->user()->surname}}
                        </span>
                        <span class="text-xs text-secondary-foreground leading-none">
                            {{ auth()->user()->email }}
                        </span>
                    </div>
                </div>
            </div>

            <div class="px-2.5 pt-3 mb-3 flex flex-col gap-3.5">

                <a class="kt-btn kt-btn-outline justify-center w-full" href="{{ route('logout') }}">
                    Log out
                </a>
            </div>

        </el-menu>
    </el-dropdown>

</nav>