<style>
    .requests {
        display: flex;
        margin: 5px 30px 5px 0px;
        padding: 0px 5px;
        cursor: pointer;
        height: -webkit-fill-available;
        align-items: center;
        font-weight: bold;
    }

    .requests:hover {
        background-color: rgb(64, 64, 64, 0.6);
        border-radius: 5px;
    }
</style>
<header class="main-header">
    <!-- Logo -->
    <link rel="shortcut icon" href="{{ url('/favicon.ico') }}">
    <a href="" class="logo content-logo-mini" style="background-color:#ffffff !important; display:flex; justify-content:center; align-items:center; height: 140px;">
        <span class="logo-mini">
            <b class=" colorIniciales">{{ $identity->short_name }}</b>
        </span>
        <img class="logo-lg imgHome" src="{{ asset($identity->logo) }}" alt="">
    </a>

    <nav class="navbar navbar-static-top barraPrincipal">
        <a href="#" class="sidebar-toggle colorSidebarToggle" data-toggle="offcanvas" role="button">
            <span class="sr-only">{{ Lang::get('messages.screen_header_tag4')}}</span>
        </a>
        <div class="header-sede">
            <p class="p-nombre-sede texNombreSedetBarraPrincipal">{{ str_replace('?', '', $identity->platform_name) }}</p>
        </div>

        <div class="navbar-custom-menu">
            <ul class="nav navbar-nav nameUser">
                @if($term)
                <div class="requests">
                    <p onclick="window.open('{{$term->url}}')">
                        <i class="fas fa-file-contract"></i>
                        Términos y Condiciones
                    </p>
                </div>
                @endif

                <div class="requests">
                    <p onclick="window.open('https://docs.google.com/forms/d/e/1FAIpQLSfbQJESTHuHdnrL-S50B79vsy8uVDHuGRv7nIhmwuHkIv1udw/viewform')">
                        <img src="{{asset('/img/requests.svg')}}" alt="">
                        Solicitudes
                    </p>
                </div>

                <li class="nav-item requests" style="position: relative;">
                    <div id="btn-menu-usuario" class="btn-menu-usuario">
                        <i class="fa fa-user" style="font-size: 1.5em;"></i> {{Auth::user()->first_name }} {{Auth::user()->last_name }} ({{Auth::user()->rol->name}})
                        <i class="fa fa-cogs" style="font-size:18px; margin-right:8px;"></i>
                    </div>

                    <div id="menuUsuario" class="menu-flotante">
                        <a href="{{ route('logout') }}" onclick="event.preventDefault(); localStorage.clear(); document.getElementById('logout-form').submit();">
                            <i class="fa fa-sign-out" style="margin-right:8px;"></i>
                            {{ Lang::get('messages.screen_header_tag1') }}
                        </a>
                        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display:none;">
                            {{ csrf_field() }}
                        </form>
                    </div>
                </li>

                <style>
                    .nav-item {
                        padding: 0px !important;
                        margin: 5px 0px !important;
                    }

                    .menu-flotante {
                        display: none;
                        position: absolute;
                        top: 40px;
                        right: 0;
                        background: #fff;
                        border: 1px solid #ddd;
                        border-radius: 8px;
                        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
                        min-width: 180px;
                        z-index: 1000;
                        animation: fadeIn 0.2s ease-in-out;
                    }

                    .menu-flotante a {
                        display: block;
                        padding: 10px 15px;
                        font-size: 14px;
                        border-radius: 8px;
                        color: #333 !important;
                        text-decoration: none;
                        transition: background 0.2s ease;
                    }

                    .menu-flotante a:hover {
                        background-color: lightgray !important;
                    }

                    .btn-menu-usuario {
                        cursor: pointer;
                        padding: 8px;
                    }

                    @media (max-width: 768px) {
                        .btn-menu-usuario {
                            font-size: min(2vw, 10px);
                        }
                    }

                    @keyframes fadeIn {
                        from {
                            opacity: 0;
                            transform: translateY(-5px);
                        }

                        to {
                            opacity: 1;
                            transform: translateY(0);
                        }
                    }
                </style>

                <script>
                    document.getElementById('btn-menu-usuario').addEventListener('click', function(e) {
                        e.stopPropagation();
                        let menu = document.getElementById('menuUsuario');
                        menu.style.display = (menu.style.display === 'block') ? 'none' : 'block';
                    });

                    document.addEventListener('click', function(e) {
                        let menu = document.getElementById('menuUsuario');
                        let btn = document.getElementById('btn-menu-usuario');
                        if (!btn.contains(e.target) && !menu.contains(e.target)) {
                            menu.style.display = 'none';
                        }
                    });
                </script>

            </ul>
        </div>
    </nav>
</header>