@php
    $authUser = auth()->user();
    $userName = $authUser->name ?? 'User';
    $userEmail = $authUser->email ?? '';
    $userInitial = strtoupper(mb_substr($userName, 0, 1));
    $userRole = session('role') ?? ($authUser && $authUser->assignedRole ? $authUser->assignedRole->name : 'USER');
    $roleLabel = ucwords(strtolower(str_replace('-', ' ', $userRole)));

    // Program / year context for header chip
    $programName = '';
    $programShort = '';
    $programIcon = 'ki-element-11';
    $programAccent = '#3699ff';
    $yearLabel = session('enrollment_year') ?? '';
    if (session()->has('program')) {
        switch (session('program')) {
            case 1:
                $programName  = 'Summer Camp';
                $programShort = 'Summer';
                $programIcon  = 'ki-sun';
                $programAccent = '#f1bc00';
                // Summer is a single year
                break;
            case 2:
                $programName  = 'Afterschool Program';
                $programShort = 'Afterschool';
                $programIcon  = 'ki-book';
                $programAccent = '#3699ff';
                if ($yearLabel) $yearLabel = $yearLabel . '–' . ($yearLabel + 1);
                break;
            case 3:
                $programName  = 'Preschool Program';
                $programShort = 'Preschool';
                $programIcon  = 'ki-teddy-bear';
                $programAccent = '#f1416c';
                if ($yearLabel) $yearLabel = $yearLabel . '–' . ($yearLabel + 1);
                break;
            case 4:
                $programName  = 'Winter Camp';
                $programShort = 'Winter';
                $programIcon  = 'ki-snow';
                $programAccent = '#7239ea';
                if ($yearLabel) $yearLabel = $yearLabel . '–' . ($yearLabel + 1);
                break;
        }
    }
@endphp

<style>
    #kt_app_header.app-header {
        background: #ffffff;
        border-bottom: 1px solid #e4e6ef;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
    }
    #kt_app_header .app-header-title {
        font-size: 1.15rem;
        font-weight: 600;
        color: #1e2129;
        letter-spacing: 0.2px;
    }

    /* ── Profile trigger pill ─────────────────────────────── */
    #kt_app_header .header-user-trigger {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        padding: 0.35rem 0.85rem 0.35rem 0.4rem;
        border-radius: 999px;
        background: #f4f6fa;
        border: 1px solid #e4e6ef;
        transition: all 0.18s ease;
        cursor: pointer;
    }
    #kt_app_header .header-user-trigger:hover {
        background: #eef0f6;
        border-color: #d7dae5;
        box-shadow: 0 6px 16px rgba(15,23,42,0.08);
    }
    #kt_app_header .header-user-trigger .user-avatar {
        position: relative;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(135deg, #4b6cb7, #182848);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 0.95rem;
        box-shadow: 0 2px 6px rgba(75,108,183,0.35);
    }
    #kt_app_header .header-user-trigger .user-avatar::after {
        content: '';
        position: absolute;
        right: -1px;
        bottom: -1px;
        width: 10px;
        height: 10px;
        background: #50cd89;
        border: 2px solid #ffffff;
        border-radius: 50%;
    }
    #kt_app_header .header-user-trigger .user-name {
        font-weight: 600;
        color: #1e2129;
        line-height: 1.15;
        font-size: 0.9rem;
    }
    #kt_app_header .header-user-trigger .user-role {
        font-size: 0.72rem;
        color: #6c7293;
        line-height: 1.1;
    }
    @media (max-width: 575.98px) {
        #kt_app_header .header-user-trigger .user-meta { display: none; }
    }

    /* ── Profile dropdown ─────────────────────────────────── */
    .profile-dropdown {
        width: 320px;
        padding: 0 !important;
        border-radius: 16px !important;
        overflow: hidden;
        box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18), 0 6px 14px rgba(15, 23, 42, 0.08) !important;
        border: 1px solid #e4e6ef !important;
        background: #ffffff !important;
    }
    .profile-dropdown .pd-header {
        position: relative;
        padding: 1.5rem 1.25rem 1.25rem;
        background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
        color: #ffffff;
    }
    .profile-dropdown .pd-header::before {
        content: '';
        position: absolute;
        top: -40px; right: -40px;
        width: 140px; height: 140px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        pointer-events: none;
    }
    .profile-dropdown .pd-header::after {
        content: '';
        position: absolute;
        bottom: -50px; left: -30px;
        width: 110px; height: 110px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.06);
        pointer-events: none;
    }
    .profile-dropdown .pd-header-inner {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 0.9rem;
    }
    .profile-dropdown .pd-avatar {
        width: 56px;
        height: 56px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.18);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border: 1px solid rgba(255, 255, 255, 0.25);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        font-weight: 700;
        color: #ffffff;
        flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    }
    .profile-dropdown .pd-identity { min-width: 0; flex: 1; }
    .profile-dropdown .pd-name {
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.2;
        margin-bottom: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .profile-dropdown .pd-email {
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.78);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 6px;
    }
    .profile-dropdown .pd-role {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 0.68rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 3px 9px;
        border-radius: 999px;
        background: rgba(80, 205, 137, 0.22);
        color: #b6f0c8;
        border: 1px solid rgba(80, 205, 137, 0.35);
    }
    .profile-dropdown .pd-role::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #50cd89;
        box-shadow: 0 0 0 3px rgba(80, 205, 137, 0.25);
    }

    /* ── Menu items ───────────────────────────────────────── */
    .profile-dropdown .pd-section {
        padding: 0.5rem 0.6rem;
    }
    .profile-dropdown .pd-section + .pd-section {
        border-top: 1px solid #f1f1f4;
    }
    .profile-dropdown .pd-section-title {
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: #a1a5b7;
        padding: 0.5rem 0.7rem 0.35rem;
    }
    .profile-dropdown .pd-link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.6rem 0.7rem;
        border-radius: 10px;
        color: #3f4254;
        font-weight: 500;
        font-size: 0.92rem;
        text-decoration: none;
        transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
    }
    .profile-dropdown .pd-link:hover {
        background: #f4f6fa;
        color: #181c32;
    }
    .profile-dropdown .pd-link:active { transform: scale(0.985); }
    .profile-dropdown .pd-link .pd-link-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 1.05rem;
    }
    .profile-dropdown .pd-link .pd-link-icon.pd-icon-blue { background: #eef6ff; color: #3699ff; }
    .profile-dropdown .pd-link .pd-link-icon.pd-icon-yellow { background: #fff8dd; color: #f1bc00; }
    .profile-dropdown .pd-link .pd-link-icon.pd-icon-purple { background: #f1e7ff; color: #7239ea; }
    .profile-dropdown .pd-link .pd-link-icon.pd-icon-green { background: #e8fff3; color: #50cd89; }
    .profile-dropdown .pd-link .pd-link-icon.pd-icon-red { background: #fff5f8; color: #f1416c; }

    .profile-dropdown .pd-link .pd-link-body {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
        min-width: 0;
    }
    .profile-dropdown .pd-link .pd-link-title { font-weight: 600; color: inherit; }
    .profile-dropdown .pd-link .pd-link-sub { font-size: 0.72rem; color: #a1a5b7; margin-top: 2px; }

    .profile-dropdown .pd-link-signout { color: #f1416c; }
    .profile-dropdown .pd-link-signout:hover { background: #fff5f8; color: #d9214e; }

    [data-kt-app-header-fixed="true"] .app-wrapper { background: #f5f8fa; }

    /* ── Current program / year chip ──────────────────────── */
    #kt_app_header .program-chip-wrapper {
        margin-left: 1.25rem;
        align-items: center;
    }
    #kt_app_header .program-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.45rem 0.95rem;
        border: 1px solid #e4e6ef;
        background: #f4f6fa;
        border-radius: 999px;
        cursor: pointer;
        transition: all 0.18s ease;
        font-weight: 600;
        font-size: 0.85rem;
        color: #1e2129;
    }
    #kt_app_header .program-chip:hover {
        background: #eef0f6;
        border-color: #d7dae5;
        box-shadow: 0 6px 14px rgba(15,23,42,0.08);
    }
    #kt_app_header .program-chip-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        flex-shrink: 0;
        box-shadow: 0 0 0 3px rgba(54,153,255,0.18);
    }
    #kt_app_header .program-chip-text { display: inline-flex; align-items: center; gap: 0.4rem; }
    #kt_app_header .program-chip-program { color: #1e2129; }
    #kt_app_header .program-chip-divider { color: #a1a5b7; font-weight: 500; }
    #kt_app_header .program-chip-year {
        color: #6c7293;
        font-weight: 600;
    }
</style>

<div id="kt_app_header" class="app-header"
     data-kt-sticky="true"
     data-kt-sticky-activate="{default: true, lg: true}"
     data-kt-sticky-name="app-header-minimize"
     data-kt-sticky-offset="{default: '200px', lg: '0'}"
     data-kt-sticky-animation="false">
    <div class="app-container container-fluid d-flex align-items-center justify-content-between" id="kt_app_header_container">

        <div class="d-flex align-items-center d-lg-none ms-n3 me-1 me-md-2" title="Show sidebar menu">
            <div class="btn btn-icon btn-active-color-primary w-35px h-35px" id="kt_app_sidebar_mobile_toggle">
                <i class="ki-duotone ki-abstract-14 fs-2 fs-md-1">
                    <span class="path1"></span>
                    <span class="path2"></span>
                </i>
            </div>
        </div>

        <div class="d-flex align-items-center">
            <a href="{{ url('/dashboard') }}" class="d-lg-none me-3">
                <img alt="Logo" src="{{ asset('assets/smart-cubz-logo.png') }}" class="h-30px" />
            </a>
            <span class="app-header-title d-none d-sm-inline">@yield('header_title', 'Dashboard')</span>
        </div>

        @if($programName)
            <div class="program-chip-wrapper d-none d-md-flex">
                <button type="button" class="program-chip switch-camp-modal" title="Click to switch program / year">
                    <span class="program-chip-dot" style="background: {{ $programAccent }};"></span>
                    <span class="program-chip-text">
                        <span class="program-chip-program">{{ $programShort }}</span>
                        @if($yearLabel)
                            <span class="program-chip-divider">·</span>
                            <span class="program-chip-year">{{ $yearLabel }}</span>
                        @endif
                    </span>
                    <i class="ki-duotone ki-arrows-loop fs-6 ms-1 text-muted">
                        <span class="path1"></span><span class="path2"></span>
                    </i>
                </button>
            </div>
        @endif

        <div class="app-navbar flex-shrink-0 ms-auto">
            <div class="app-navbar-item" id="kt_header_user_menu_toggle">
                <div class="header-user-trigger"
                     data-kt-menu-trigger="{default: 'click', lg: 'hover'}"
                     data-kt-menu-attach="parent"
                     data-kt-menu-placement="bottom-end">
                    <span class="user-avatar">{{ $userInitial }}</span>
                    <span class="user-meta d-flex flex-column">
                        <span class="user-name">{{ $userName }}</span>
                        <span class="user-role">{{ $userEmail }}</span>
                    </span>
                    <i class="ki-duotone ki-down fs-5 text-muted d-none d-sm-inline"></i>
                </div>

                <div class="menu menu-sub menu-sub-dropdown profile-dropdown" data-kt-menu="true">

                    {{-- Header --}}
                    <div class="pd-header">
                        <div class="pd-header-inner">
                            <div class="pd-avatar">{{ $userInitial }}</div>
                            <div class="pd-identity">
                                <div class="pd-name">{{ $userName }}</div>
                                <div class="pd-email" title="{{ $userEmail }}">{{ $userEmail }}</div>
                                <span class="pd-role">{{ $roleLabel }}</span>
                            </div>
                        </div>
                    </div>

                    {{-- Switch back to admin (only if impersonating) --}}
                    @if(!empty(session('ADMIN_STAFF')))
                        <div class="pd-section">
                            <a href="javascript:void(0)" class="pd-link switch-admin" data-id="{{ session('ADMIN_STAFF') }}">
                                <span class="pd-link-icon pd-icon-yellow">
                                    <i class="ki-duotone ki-arrows-loop fs-4"><span class="path1"></span><span class="path2"></span></i>
                                </span>
                                <span class="pd-link-body">
                                    <span class="pd-link-title">Back to Admin/Staff</span>
                                    <span class="pd-link-sub">Return to your original account</span>
                                </span>
                            </a>
                        </div>
                    @endif

                    {{-- Account section --}}
                    <div class="pd-section">
                        <div class="pd-section-title">Account</div>

                        @if(user() && user()->assignedRole && user()->assignedRole->name == 'PARENT')
                            <a href="{{ url('profile/' . encryptedId(user()->parent_id) . '/edit/') }}" class="pd-link">
                                <span class="pd-link-icon pd-icon-blue">
                                    <i class="ki-duotone ki-profile-circle fs-4"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
                                </span>
                                <span class="pd-link-body">
                                    <span class="pd-link-title">Update Profile</span>
                                    <span class="pd-link-sub">Edit your personal information</span>
                                </span>
                            </a>

                            <a href="{{ url('parent/payment-source/') }}" class="pd-link">
                                <span class="pd-link-icon pd-icon-green">
                                    <i class="ki-duotone ki-credit-cart fs-4"><span class="path1"></span><span class="path2"></span></i>
                                </span>
                                <span class="pd-link-body">
                                    <span class="pd-link-title">Cards Info</span>
                                    <span class="pd-link-sub">Manage your payment methods</span>
                                </span>
                            </a>
                        @endif

                        <a href="{{ url('change/password') }}" class="pd-link">
                            <span class="pd-link-icon pd-icon-purple">
                                <i class="ki-duotone ki-lock fs-4"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
                            </span>
                            <span class="pd-link-body">
                                <span class="pd-link-title">Change Password</span>
                                <span class="pd-link-sub">Update your account password</span>
                            </span>
                        </a>
                    </div>

                    {{-- Sign out --}}
                    <div class="pd-section">
                        <a href="{{ url('logout') }}" class="pd-link pd-link-signout">
                            <span class="pd-link-icon pd-icon-red">
                                <i class="ki-duotone ki-exit-right fs-4"><span class="path1"></span><span class="path2"></span></i>
                            </span>
                            <span class="pd-link-body">
                                <span class="pd-link-title">Sign Out</span>
                                <span class="pd-link-sub">End your current session</span>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>