@page "/staff/payroll"
@layout StaffLayout
@inject IJSRuntime JS

@*
    EN: Staff payroll page — view salary information.
    VI: Trang lương — xem thông tin lương.
*@

<PageTitle>Thông tin lương</PageTitle>

<div class="staff-page">
    <div class="staff-page-header">
        <h1 class="staff-page-title">Thông tin lương</h1>
        <p class="staff-page-subtitle">Lương và phụ cấp hàng tháng</p>
    </div>

    @* ═══ CURRENT MONTH ═══ *@
    <div class="staff-stats-grid" style="margin-bottom:24px;">
        <div class="staff-stat-card">
            <div class="staff-stat-card__icon" style="background:rgba(34,197,94,0.12);">
                <i data-lucide="wallet" style="color:#22C55E;"></i>
            </div>
            <span class="staff-stat-card__value" style="font-size:22px;">--</span>
            <span class="staff-stat-card__label">Lương cơ bản</span>
        </div>
        <div class="staff-stat-card">
            <div class="staff-stat-card__icon" style="background:rgba(59,130,246,0.12);">
                <i data-lucide="plus-circle" style="color:#3B82F6;"></i>
            </div>
            <span class="staff-stat-card__value" style="font-size:22px;">--</span>
            <span class="staff-stat-card__label">Phụ cấp</span>
        </div>
        <div class="staff-stat-card">
            <div class="staff-stat-card__icon" style="background:rgba(245,158,11,0.12);">
                <i data-lucide="minus-circle" style="color:#F59E0B;"></i>
            </div>
            <span class="staff-stat-card__value" style="font-size:22px;">--</span>
            <span class="staff-stat-card__label">Khấu trừ</span>
        </div>
        <div class="staff-stat-card">
            <div class="staff-stat-card__icon" style="background:rgba(139,92,246,0.12);">
                <i data-lucide="banknote" style="color:#8B5CF6;"></i>
            </div>
            <span class="staff-stat-card__value" style="font-size:22px;">--</span>
            <span class="staff-stat-card__label">Thực nhận</span>
        </div>
    </div>

    @* ═══ NOTE ═══ *@
    <div style="background:var(--admin-bg-elevated);border:1px solid var(--admin-border-default);border-radius:var(--admin-radius-lg);padding:24px;text-align:center;">
        <div style="width:56px;height:56px;border-radius:16px;background:rgba(139,92,246,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;">
            <i data-lucide="construction" style="width:24px;height:24px;color:#8B5CF6;"></i>
        </div>
        <h3 style="font-size:16px;font-weight:600;color:var(--admin-text-primary);margin:0 0 8px;">Tính năng đang phát triển</h3>
        <p style="font-size:13px;color:var(--admin-text-tertiary);margin:0;">Thông tin lương sẽ được cập nhật bởi quản lý cửa hàng. Vui lòng liên hệ quản lý để biết chi tiết.</p>
    </div>
</div>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        try { await JS.InvokeVoidAsync("lucide.createIcons"); } catch { }
    }
}
