<?php $attributes ??= new \Illuminate\View\ComponentAttributeBag;

$__newAttributes = [];
$__propNames = \Illuminate\View\ComponentAttributeBag::extractPropNames(([
    'title',
    'subtitle' => null,
    'icon'     => 'fa-tachometer-alt',
]));

foreach ($attributes->all() as $__key => $__value) {
    if (in_array($__key, $__propNames)) {
        $$__key = $$__key ?? $__value;
    } else {
        $__newAttributes[$__key] = $__value;
    }
}

$attributes = new \Illuminate\View\ComponentAttributeBag($__newAttributes);

unset($__propNames);
unset($__newAttributes);

foreach (array_filter(([
    'title',
    'subtitle' => null,
    'icon'     => 'fa-tachometer-alt',
]), 'is_string', ARRAY_FILTER_USE_KEY) as $__key => $__value) {
    $$__key = $$__key ?? $__value;
}

$__defined_vars = get_defined_vars();

foreach ($attributes->all() as $__key => $__value) {
    if (array_key_exists($__key, $__defined_vars)) unset($$__key);
}

unset($__defined_vars, $__key, $__value); ?>

<?php
    $hour = now()->hour;
    if ($hour < 12) {
        $greeting     = 'Good morning';
        $greetingIcon = 'fa-sun';
    } elseif ($hour < 17) {
        $greeting     = 'Good afternoon';
        $greetingIcon = 'fa-cloud-sun';
    } else {
        $greeting     = 'Good evening';
        $greetingIcon = 'fa-moon';
    }

    $authUser  = auth()->user();
    $userName  = $authUser?->name  ?? 'User';
    $userEmail = $authUser?->email ?? '';
    $roleName  = $authUser?->roles->first()?->name ?? 'User';
    $avatarUrl = $authUser?->avatar_url ?? null;

    $initials = collect(explode(' ', $userName))
                    ->map(fn($w) => strtoupper(substr($w, 0, 1)))
                    ->take(2)
                    ->implode('');

    $roleColors = [
        'Super Manager'   => 'bg-purple-500',
        'Manager'         => 'bg-blue-600',
        'Members'         => 'bg-green-500',
        'Trainers'        => 'bg-orange-500',
        'Trainees'        => 'bg-yellow-500',
        'Mentor'          => 'bg-teal-500',
        'Mentee'          => 'bg-cyan-500',
        'Partners'        => 'bg-indigo-500',
        'Contributor'     => 'bg-pink-500',
        'Health Marketor' => 'bg-red-500',
    ];
    $roleBadgeClass = $roleColors[$roleName] ?? 'bg-gray-500';
?>

<div class="w-full" style="background-color:#1a4731;">

    
    <div class="px-6 py-3 flex items-center justify-between gap-4">

        
        <div class="flex items-center gap-4 min-w-0">

            
            <div class="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0"
                 style="background-color:rgba(255,255,255,0.12);">
                <i class="fas <?php echo e($icon); ?> text-white text-base"></i>
            </div>

            <div class="min-w-0">
                <p class="text-white/70 text-xs flex items-center gap-1.5 mb-0.5">
                    <i class="fas <?php echo e($greetingIcon); ?> text-yellow-300 text-xs"></i>
                    <?php echo e($greeting); ?>,&nbsp;<span class="text-white font-semibold"><?php echo e($userName); ?></span>
                </p>

                <h1 class="text-lg font-bold text-white leading-tight truncate"><?php echo e($title); ?></h1>

                <?php if($subtitle): ?>
                    <p class="text-white/50 text-xs mt-0.5"><?php echo e($subtitle); ?></p>
                <?php endif; ?>

                
                <div class="flex items-center gap-3 mt-1.5">
                    <span class="inline-flex items-center gap-1 text-white/60 text-xs">
                        <i class="fas fa-calendar-day text-green-300 text-xs"></i>
                        <?php echo e(now()->format('D, d M Y')); ?>

                    </span>
                    <span class="inline-flex items-center gap-1 text-white/60 text-xs"
                          x-data="{ t: '' }"
                          x-init="
                              const p = n => String(n).padStart(2,'0');
                              const tick = () => {
                                  const d = new Date(), h = d.getHours(), m = d.getMinutes(), s = d.getSeconds();
                                  t = p(h%12||12)+':'+p(m)+':'+p(s)+' '+(h>=12?'PM':'AM');
                              };
                              tick(); setInterval(tick,1000);
                          ">
                        <i class="fas fa-clock text-green-300 text-xs"></i>
                        <span x-text="t"></span>
                    </span>
                </div>
            </div>
        </div>

        
        <div class="flex-shrink-0" x-data="{ open: false }">
            <div class="relative">

                <button @click="open = !open"
                        @keydown.escape.window="open = false"
                        class="flex items-center gap-2 px-2 py-1.5 rounded-xl
                               bg-white/10 hover:bg-white/20 transition-colors
                               focus:outline-none focus:ring-2 focus:ring-white/30"
                        aria-haspopup="true"
                        :aria-expanded="open">

                    
                    <div class="relative w-[35px] h-[35px] rounded-full overflow-hidden flex-shrink-0
                                ring-2 ring-white/40"
                         style="background:linear-gradient(135deg,#276749 0%,#1a4731 100%);">
                        <?php if($avatarUrl): ?>
                            <img src="<?php echo e($avatarUrl); ?>" alt="<?php echo e($userName); ?>"
                                 class="w-full h-full object-cover"
                                 onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
                            <span class="absolute inset-0 hidden items-center justify-center
                                         text-white font-bold text-xs"><?php echo e($initials); ?></span>
                        <?php else: ?>
                            <span class="absolute inset-0 flex items-center justify-center
                                         text-white font-bold text-xs"><?php echo e($initials); ?></span>
                        <?php endif; ?>
                        <span class="absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-400
                                     border border-white rounded-full"></span>
                    </div>

                    <div class="hidden sm:block text-left">
                        <p class="text-white text-xs font-semibold leading-tight max-w-[100px] truncate"><?php echo e($userName); ?></p>
                        <span class="inline-block px-1.5 py-0.5 text-[9px] font-semibold
                                     text-white rounded-full <?php echo e($roleBadgeClass); ?>"><?php echo e($roleName); ?></span>
                    </div>

                    <i class="fas fa-chevron-down text-white/60 text-xs transition-transform duration-200"
                       :class="open ? 'rotate-180' : ''"></i>
                </button>

                
                <div x-show="open"
                     x-transition:enter="transition ease-out duration-150"
                     x-transition:enter-start="opacity-0 scale-95 -translate-y-1"
                     x-transition:enter-end="opacity-100 scale-100 translate-y-0"
                     x-transition:leave="transition ease-in duration-100"
                     x-transition:leave-start="opacity-100 scale-100 translate-y-0"
                     x-transition:leave-end="opacity-0 scale-95 -translate-y-1"
                     @click.outside="open = false"
                     class="absolute right-0 mt-2 w-60 bg-white rounded-xl shadow-2xl
                            border border-gray-100 z-50 overflow-hidden"
                     x-cloak>

                    
                    <div class="px-4 py-3 border-b border-gray-100" style="background-color:#1a4731;">
                        <div class="flex items-center gap-3">
                            <div class="w-9 h-9 rounded-full overflow-hidden flex-shrink-0 ring-2 ring-white/40"
                                 style="background:linear-gradient(135deg,#276749 0%,#1a4731 100%);">
                                <?php if($avatarUrl): ?>
                                    <img src="<?php echo e($avatarUrl); ?>" alt="<?php echo e($userName); ?>"
                                         class="w-full h-full object-cover">
                                <?php else: ?>
                                    <span class="w-full h-full flex items-center justify-center
                                                 text-white font-bold text-xs"><?php echo e($initials); ?></span>
                                <?php endif; ?>
                            </div>
                            <div class="min-w-0">
                                <p class="text-sm font-semibold text-white truncate"><?php echo e($userName); ?></p>
                                <p class="text-xs text-white/60 truncate"><?php echo e($userEmail); ?></p>
                                <span class="inline-block mt-0.5 px-1.5 py-0.5 text-[9px] font-semibold
                                             text-white rounded-full <?php echo e($roleBadgeClass); ?>"><?php echo e($roleName); ?></span>
                            </div>
                        </div>
                    </div>

                    
                    <div class="py-1">
                        <a href="<?php echo e(route('profile.edit')); ?>"
                           class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700
                                  hover:bg-gray-50 transition-colors">
                            <i class="fas fa-user-circle w-4 text-gray-400"></i>Edit Profile
                        </a>
                        <?php if(Route::has('password.edit')): ?>
                        <a href="<?php echo e(route('password.edit')); ?>"
                           class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700
                                  hover:bg-gray-50 transition-colors">
                            <i class="fas fa-key w-4 text-gray-400"></i>Change Password
                        </a>
                        <?php endif; ?>
                        <?php if(Route::has('settings.sessions')): ?>
                        <a href="<?php echo e(route('settings.sessions')); ?>"
                           class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700
                                  hover:bg-gray-50 transition-colors">
                            <i class="fas fa-desktop w-4 text-gray-400"></i>Active Sessions
                        </a>
                        <?php endif; ?>
                    </div>

                    <div class="border-t border-gray-100 py-1">
                        <form method="POST" action="<?php echo e(route('logout')); ?>">
                            <?php echo csrf_field(); ?>
                            <button type="submit"
                                    class="w-full flex items-center gap-3 px-4 py-2.5 text-sm
                                           text-red-600 hover:bg-red-50 transition-colors text-left">
                                <i class="fas fa-sign-out-alt w-4"></i>Sign Out
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    
    <div class="h-1 w-full"
         style="background:linear-gradient(90deg,#1a4731 0%,#276749 40%,#c53030 100%);"></div>

</div>
<?php /**PATH /home/www/sshia.org/sshia/resources/views/components/dashboard-hero.blade.php ENDPATH**/ ?>