@if(session()->has('impersonator_id'))
<div id="impersonate-banner" style="position: fixed; top: 0; left: 0; right: 0; height: 50px; background: linear-gradient(90deg, #1e293b 0%, #0f172a 100%); color: #f8fafc; border-bottom: 2px solid #eab308; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; z-index: 999999; font-family: 'Outfit', 'Inter', sans-serif; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);">
    <div style="display: flex; align-items: center; gap: 12px;">
        <span style="display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: rgba(234, 179, 8, 0.2); border-radius: 50%; color: #eab308;">
            <i class="bi bi-person-fill-exclamation" style="font-size: 1.1rem;"></i>
        </span>
        <span style="font-size: 0.95rem; font-weight: 500; letter-spacing: 0.025em;">
            Mode Impersonasi: Anda sedang masuk sebagai <strong style="color: #f1f5f9;">{{ Auth::user()->getRoleName() }}</strong> 
            <span style="background: rgba(255,255,255,0.1); padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; margin-left: 8px; font-weight: 400; text-transform: uppercase;">
                {{ Auth::user()->role }}
            </span>
        </span>
    </div>
    <a href="{{ route('impersonate.leave') }}" style="background: #eab308; color: #0f172a; padding: 6px 16px; border-radius: 6px; font-size: 0.85rem; font-weight: 600; text-decoration: none; display: flex; align-items: center; gap: 6px; transition: all 0.2s ease-in-out; box-shadow: 0 2px 8px rgba(234, 179, 8, 0.3);" onmouseover="this.style.background='#f59e0b'; this.style.transform='translateY(-1px)'" onmouseout="this.style.background='#eab308'; this.style.transform='translateY(0)'">
        <i class="bi bi-box-arrow-left"></i>
        Kembali ke Admin
    </a>
</div>

<style>
    /* Adjust page layout elements downward when banner is active */
    body {
        margin-top: 50px !important;
    }
    #header.header {
        top: 50px !important;
    }
    #sidebar.sidebar {
        top: 110px !important;
    }
    @media (max-width: 1199px) {
        #sidebar.sidebar {
            top: 50px !important;
            height: calc(100vh - 50px) !important;
        }
    }
</style>
@endif