
<style>
    .user-bubble {
        position: fixed;
        bottom: 24px;
        right: 24px;
        z-index: 9990;
    }
    .user-bubble-btn {
        width: 48px; height: 48px;
        border-radius: 14px;
        border: none;
        background: linear-gradient(135deg, #1a1f2e, #2d3348);
        color: #fff;
        font-weight: 800;
        font-size: 1rem;
        cursor: pointer;
        box-shadow: 0 6px 24px rgba(0,0,0,.2);
        transition: all .3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .user-bubble-btn:hover {
        transform: scale(1.08);
        box-shadow: 0 8px 32px rgba(0,0,0,.3);
    }
    .user-bubble-popup {
        position: absolute;
        bottom: 58px;
        right: 0;
        width: 220px;
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 12px 40px rgba(0,0,0,.15);
        padding: 16px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px) scale(.95);
        transition: all .25s ease;
    }
    .user-bubble.open .user-bubble-popup {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }
    .user-bubble-name {
        font-weight: 700;
        font-size: .9rem;
        color: #1a1f2e;
    }
    .user-bubble-role {
        font-size: .7rem;
        color: #7a8599;
        letter-spacing: .5px;
    }
    .user-bubble-logout {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        margin-top: 12px;
        padding: 10px 14px;
        border: none;
        border-radius: 10px;
        background: linear-gradient(135deg, #fee2e2, #fecaca);
        color: #991b1b;
        font-weight: 700;
        font-size: .8rem;
        cursor: pointer;
        transition: all .2s;
    }
    .user-bubble-logout:hover {
        background: linear-gradient(135deg, #fecaca, #fca5a5);
        transform: translateX(2px);
    }
</style>

<div class="user-bubble" id="userBubble">
    <button class="user-bubble-btn" id="userBubbleBtn" title="<?php echo e(auth()->user()->name); ?>">
        <?php echo e(strtoupper(substr(auth()->user()->name, 0, 1))); ?>

    </button>
    <div class="user-bubble-popup">
        <div class="d-flex align-items-center gap-3 mb-1">
            <div style="width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#007870,#00a396);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;flex-shrink:0;">
                <?php echo e(strtoupper(substr(auth()->user()->name, 0, 1))); ?>

            </div>
            <div>
                <div class="user-bubble-name"><?php echo e(auth()->user()->name); ?></div>
                <div class="user-bubble-role"><?php echo e(ucfirst(auth()->user()->role)); ?></div>
            </div>
        </div>
        <form action="<?php echo e(route('logout')); ?>" method="POST">
            <?php echo csrf_field(); ?>
            <button type="submit" class="user-bubble-logout">
                <i class="bi bi-box-arrow-right"></i>
                Logout
            </button>
        </form>
    </div>
</div>

<script>
document.getElementById('userBubbleBtn').addEventListener('click', function(e) {
    e.stopPropagation();
    document.getElementById('userBubble').classList.toggle('open');
});
document.addEventListener('click', function(e) {
    const bubble = document.getElementById('userBubble');
    if (!bubble.contains(e.target)) bubble.classList.remove('open');
});
</script>
<?php /**PATH C:\xampp\htdocs\machine\resources\views/layouts/navbar.blade.php ENDPATH**/ ?>