<style>
    :root {
        --azul-primario: #2A4E6D;
        --azul-secundario: #3B6EA5;
        --azul-destacado: #4A90E2;
        --azul-suave: #E3F2FD;
    }

    .navbar-medical {
        background: #ffffff !important;
        border-bottom: 2px solid var(--azul-suave);
        box-shadow: 0 2px 15px rgba(42, 78, 109, 0.08);
    }

    .img-banner {
        width: 150px;
        transition: all 0.3s ease;
    }

    .navbar-toggler {
        border: 2px solid var(--azul-suave) !important;
        padding: 0.5rem !important;
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%232A4E6D' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    
     
    #navbarDropdown{
        display:inline-flex;
        color:#000 !important;
    }
    #navbarDropdown::after{
        display:none;
    }
    .dropdown-menu {
        border: 2px solid var(--azul-suave);
        box-shadow: 0 4px 20px rgba(42, 78, 109, 0.1);
    }

    .user-greeting {
        color: var(--azul-primario) !important;
        font-size: 1rem;
    }

    @media (max-width: 991px) {
        .navbar-collapse {
            background: white;
            padding: 1rem;
            margin-top: 1rem;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(42, 78, 109, 0.1);
        }
        
        #navbarDropdown {
            width: 100%;
            justify-content: center;
        }
        
        .img-banner {
            width: 180px !important;
        }
    }

    @media (min-width: 992px) {
        #btn-navbar-responsive {
            display: none !important;
        }
    }
</style>

@php
    // Obtener la identidad del consultorio
    $identity = \App\Helper\ClinicIdentityHelper::getActiveIdentity();
@endphp

<div>
    <nav class="navbar navbar-expand-lg navbar-medical">
        <div class="container-fluid">
            <a class="navbar-brand d-flex align-items-center" href="{{ URL::to('/admin/dashboard') }}">
                @if($identity && $identity->logo_path)
                    <img class="img-banner" src="{{ asset('storage/' . $identity->logo_path) }}" alt="Logo {{ $identity->name }}" 
                         style="height: 40px; width: auto; object-fit: contain;">
                @else
                    <img class="img-banner" src="{{ asset('img/logo.png') }}" alt="Medical System">
                @endif
            </a>
            
            <!-- Botón Toggler Oficial -->
            <button class="navbar-toggler" type="button" 
                    data-bs-toggle="collapse" 
                    data-bs-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent"
                    aria-expanded="false"
                    aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <!-- Botón Alternativo (opcional) -->
            <button id="btn-navbar-responsive" class="btn btn-light d-lg-none">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                    <li class="nav-item dropdown">
                        <div class="d-flex align-items-center gap-2">
                            <div class="user-greeting">
                                <b>{{__('options.nav.hello')}} {{$user->name ?? ''}}</b>
                            </div>
                            
                           
                            
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
                                <img src="{{asset('img/settings.png')}}" alt="Configuración" class="w-10">
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end">
                                @foreach($getPrimaryOptions ?? [] as $option)
                                    {!! $option !!}
                                @endforeach
                                @foreach($getSecondaryOptions ?? [] as $option)
                                    {!! $option !!}
                                @endforeach
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
             <!-- Contador de notificaciones -->
             @if(Auth::check())
                                <x-notification-counter  />
                            @endif
        </div>
    </nav>
</div>