<style>
  .notification_count {
        font-size: 12px; 
        border-radius: 60%; 
    }
    .list:hover {
        cursor: pointer;
        opacity: 0.7;
    }
    <style>
    @media (min-width: 992px) { /* This targets screen widths 992px and above, typical for desktops */
    .mdi-menu {
        display: none;
    }
}

    @keyframes flipInY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotateY(-10deg);
    }
    70% {
        transform: perspective(400px) rotateY(10deg);
    }
    100% {
        transform: perspective(400px) rotateY(0);
        opacity: 1;
    }
}

.dropdown-menu {
    display: none;
    animation-duration: 0.9s;
    animation-fill-mode: forwards;
    backface-visibility: visible;
    transform-origin: top center;
}

.dropdown-menu.show {
    display: block;
    animation-name: flipInY !important;
}

    
</style>
</style>

<header id="page-topbar">
    <div class="navbar-header">
        <div class="d-flex">
            <!-- LOGO -->
            <div class="navbar-brand-box">
                <a href="{{ route('user.dashboard') }}" class="logo logo-dark">
                    <span class="logo-sm">
                        <img src="{{ URL::to(website_favicon()) }}" alt="" style="height: 42px !important;">
                    </span>
                    <span class="logo-lg">
                        <img src="{{ URL::to(website_favicon()) }}" alt="" style="height: 42px !important;">
                        <span class="site-title" style="font-size: 19px">maicrojob</span>
                    </span>
                    <span class="site-title" style="font-size: 19px">maicrojob</span>
                </a>

                <a href="{{ route('user.dashboard') }}" class="logo logo-light">
                    <span class="logo-sm">
                        <img src="{{ URL::to(website_logo()) }}" alt="" style="height: 42px !important;">
                    </span>
                    <span class="logo-lg">
                        <img src="{{ URL::to(website_logo()) }}" alt="" style="height: 42px !important;">
                        <span class="site-title" style="font-size: 19px">maicrojob</span>
                    </span>
                </a>
            </div>

            <button type="button" class="btn btn-sm px-3 font-size-24 header-item" id="vertical-menu-btn">
                <i class="mdi mdi-menu"></i>
            </button>
        </div>

        <div class="d-flex align-items-center">
            <div class="dropdown d-inline-block align-items-center list">
                <p class="m-0 c-pointer" onclick="showNotificationModal()">
                    <i class="mdi mdi-bell"></i>
                    @php
                        $notificationCount = latest_notification(Auth::user()->id)->count();
                    @endphp
                    @if($notificationCount > 0)
                        <label class="notification_count">{{ $notificationCount }}</label>
                    @endif
                </p>
            </div>
        </div>
        
            <p class="m-0 list" style="font-size: 15px; font-weight: 700;">ID: {{ Auth::user()->code }}</p>
        <p class="m-0 list">
            <div class="dropdown d-inline-block">
                <a class="nav-link" id="page-header-user-dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <div class="d-flex align-items-center gap-2">
                        @if(Auth::user()->image)
                            <img class="avatar avatar-sm rounded-circle header-profile-user" src="{{ asset(Auth::user()->image) }}" alt="{{ Auth::user()->name }}" width="45px" height="45px" style="width: 45px;height: 45px;max-width: 45px;">
                        @else
                            <img class="avatar avatar-sm rounded-circle header-profile-user" src="{{ asset('frontend/img/user.png') }}" alt="User Image" width="45px" height="45px" style="width: 45px;height: 45px;max-width: 45px;">
                        @endif
                        <div class="media-body ml-2 d-none d-lg-block list">
                            <span href="" class="mb-0 text-sm font-weight-bold">{{ Auth::user()->name }}</span>
                        </div>
                    </div>
                </a>
               
                <div class="dropdown-menu dropdown-menu-end">
                    <!-- item -->
                    <div class="flex-grow-1 ms-3">
                            <h5 style="color: black; font-weight: 90px; font-size: 10px; mb-1">HELLO, {{ strtoupper(Auth::user()->name) }} @if(Auth::user()->premium_status == 1 && Auth::user()->premium_package_id != NULL)✅@endif</</h5>
                    </div>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="@if(Auth::user()->status == 0) javascript:; @else{{ route('user.profile') }} @endif" @if(Auth::user()->status == 0) onclick="return alert('Your Account is blocked! {{ Auth::user()->reason }}. Please Contact with authority!')" @endif><i class="fas fa-user font-size-17 align-middle me-1" style="color: #666666"></i><span class="ms-3">My Profile</span></a>
                    
                    <a class="dropdown-item" href="https://powerworkerearn.com/user/balance-transfer"><i class="fa fa-handshake font-size-17 align-middle me-1" style="color: #666666"></i><span class="ms-3">Balance Transfer</span></a>
                    
                    <a class="dropdown-item" href="@if(Auth::user()->status == 0) javascript:; @else {{ route('user.top-deposit-user') }} @endif" @if(Auth::user()->status == 0) onclick="return alert('Your Account is blocked! {{ Auth::user()->reason }}. Please Contact with authority!')" @endif><i class="fas fa-chart-line font-size-17 align-middle me-1" style="color: #666666"></i><span class="ms-3">Top Depositor</span></a>
                    
                    <a class="dropdown-item" href="@if(Auth::user()->status == 0) javascript:; @else {{ route('user.top-job-worked-user') }} @endif" @if(Auth::user()->status == 0) onclick="return alert('Your Account is blocked! {{ Auth::user()->reason }}. Please Contact with authority!')" @endif><i class="fas fa-chart-line font-size-17 align-middle me-1" style="color: #666666"></i><span class="ms-3">Top Worker</span></a>
                    
                    <a class="dropdown-item" href="@if(Auth::user()->status == 0) javascript:; @else {{ route('user.top-job-posted-user') }} @endif" @if(Auth::user()->status == 0) onclick="return alert('Your Account is blocked! {{ Auth::user()->reason }}. Please Contact with authority!')" @endif><i class="fas fa-chart-line font-size-17 align-middle me-1" style="color: #666666"></i><span class="ms-3">Top Job Poster</span></a>
                    
                    <a class="dropdown-item" href="@if(Auth::user()->status == 0) javascript:; @else {{ route('user.top-earning-user') }} @endif" @if(Auth::user()->status == 0) onclick="return alert('Your Account is blocked! {{ Auth::user()->reason }}. Please Contact with authority!')" @endif><i class="fas fa-chart-line font-size-17 align-middle me-1" style="color: #666666"></i><span class="ms-3">Top User</span></a>
                   
                    
                    <a class="dropdown-item" href="@if(Auth::user()->status == 0) javascript:; @else {{ route('user.top-referral-user') }} @endif" @if(Auth::user()->status == 0) onclick="return alert('Your Account is blocked! {{ Auth::user()->reason }}. Please Contact with authority!')" @endif><i class="fas fa-chart-line font-size-17 align-middle me-1" style="color: #666666"></i><span class="ms-3">Top Refer</span></a>
                    
                    
                    <a class="dropdown-item" href="@if(Auth::user()->status == 0) javascript:; @else {{ route('user.new-withdraw-request') }} @endif" @if(Auth::user()->status == 0) onclick="return alert('Your Account is blocked! {{ Auth::user()->reason }}. Please Contact with authority!')" @endif><i class="fas fa-wallet font-size-17 align-middle me-1" style="color: #666666"></i><span class="ms-3">Wallet</span></a>
                    
                    <a class="dropdown-item" href="https://t.me/webfreelancerbd"><i class="fa fa-recycle font-size-17 align-middle me-1" style="color: #666666"></i><span class="ms-3">Join Telegram</span></a>
                    
                    <a class="dropdown-item" href="{{ route('contact-us') }}">
                        <i class="fas fa-headset font-size-17 align-middle me-1" style="color: #666666"></i><span class="ms-3">Support</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    
                    <a class="dropdown-item text-danger" href="{{ route('user-logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                        <i class="fas fa-running font-size-17 align-middle me-1 text-danger"></i><span class="ms-3">
                        Logout</span>
                    </a>
                    <form id="logout-form" action="{{ route('user-logout') }}" method="POST" class="d-none">
                        @csrf
                    </form>
                </div>
            </div>
        </div>
    </div>
</header>

