@page "/admin/staff/payroll"
@layout AdminLayout
@inherits AdminBase

@*
    EN: Payroll & Commission — salary overview, commission breakdown by staff.
    VI: Lương & Hoa hồng — tổng quan lương, chi tiết hoa hồng theo nhân viên.
    Design: pencil-design/src/pages/tPOS/admin/payroll-commission.pen
*@

<PageTitle>Lương & Hoa hồng — GoodGo Admin</PageTitle>

@* ═══ TOP BAR ═══ *@
<div class="admin-topbar">
    <div class="admin-topbar__left">
        <h1 class="admin-topbar__title">Lương & Hoa hồng</h1>
        <p class="admin-topbar__subtitle">Tháng 02/2025 • Tất cả cửa hàng</p>
    </div>
    <div class="admin-topbar__right">
        <button class="admin-btn-secondary">
            <i data-lucide="calendar"></i>
            <span>02/2025</span>
        </button>
        <button class="admin-btn-primary">
            <i data-lucide="download"></i>
            <span>Xuất bảng lương</span>
        </button>
    </div>
</div>

@* ═══ CONTENT ═══ *@
<div class="admin-content" style="display:flex;flex-direction:column;gap:24px;">

    @* KPI Row *@
    <div class="admin-kpi-row">
        <div class="admin-kpi-card">
            <div class="admin-kpi-card__header">
                <div class="admin-kpi-card__icon" style="background-color:rgba(255,92,0,0.125);">
                    <i data-lucide="wallet" style="color:var(--admin-orange-primary);"></i>
                </div>
            </div>
            <div class="admin-kpi-card__value">86.4M</div>
            <div class="admin-kpi-card__label">Tổng lương tháng</div>
        </div>
        <div class="admin-kpi-card">
            <div class="admin-kpi-card__header">
                <div class="admin-kpi-card__icon" style="background-color:rgba(34,197,94,0.125);">
                    <i data-lucide="percent" style="color:#22C55E;"></i>
                </div>
            </div>
            <div class="admin-kpi-card__value">12.8M</div>
            <div class="admin-kpi-card__label">Tổng hoa hồng</div>
        </div>
        <div class="admin-kpi-card">
            <div class="admin-kpi-card__header">
                <div class="admin-kpi-card__icon" style="background-color:rgba(59,130,246,0.125);">
                    <i data-lucide="users" style="color:#3B82F6;"></i>
                </div>
            </div>
            <div class="admin-kpi-card__value">8</div>
            <div class="admin-kpi-card__label">Nhân viên</div>
        </div>
        <div class="admin-kpi-card">
            <div class="admin-kpi-card__header">
                <div class="admin-kpi-card__icon" style="background-color:rgba(139,92,246,0.125);">
                    <i data-lucide="banknote" style="color:#8B5CF6;"></i>
                </div>
            </div>
            <div class="admin-kpi-card__value">12.4M</div>
            <div class="admin-kpi-card__label">Lương TB / người</div>
        </div>
    </div>

    @* Payroll Table *@
    <div class="admin-panel">
        <div class="admin-panel__header">
            <h3 class="admin-panel__title">
                <i data-lucide="table" style="color:var(--admin-orange-primary);"></i>
                Bảng lương chi tiết
            </h3>
            <div class="admin-status-badge" style="background:rgba(245,158,11,0.125);color:var(--admin-warning);">
                Chưa thanh toán
            </div>
        </div>
        <div class="admin-panel__body" style="padding:0;">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Nhân viên</th>
                        <th>Vai trò</th>
                        <th>Lương cơ bản</th>
                        <th>Giờ làm</th>
                        <th>Hoa hồng</th>
                        <th>Thưởng/Phạt</th>
                        <th style="text-align:right;">Tổng</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in _payrollData)
                    {
                        <tr>
                            <td style="display:flex;align-items:center;gap:10px;">
                                <div class="admin-user-avatar" style="width:28px;height:28px;font-size:10px;background-color:@item.Color;">@item.Initials</div>
                                @item.Name
                            </td>
                            <td style="color:var(--admin-text-tertiary);">@item.Role</td>
                            <td>@item.BaseSalary</td>
                            <td>@item.Hours h</td>
                            <td style="color:#22C55E;">+@item.Commission</td>
                            <td style="color:@(item.BonusPenalty.StartsWith("-") ? "#EF4444" : "#22C55E");">@item.BonusPenalty</td>
                            <td style="text-align:right;font-weight:700;color:var(--admin-orange-primary);">@item.Total</td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>
</div>

@code {
    private record PayrollItem(string Name, string Initials, string Color, string Role, string BaseSalary, string Hours, string Commission, string BonusPenalty, string Total);
    private readonly PayrollItem[] _payrollData = new[]
    {
        new PayrollItem("Trần Minh", "TM", "#FF5C00", "Barista", "8.0M", "172", "1.8M", "+500K", "10.3M"),
        new PayrollItem("Lê Thảo", "LT", "#3B82F6", "Thu ngân", "7.5M", "168", "2.1M", "+300K", "9.9M"),
        new PayrollItem("Nguyễn Hà", "NH", "#22C55E", "Phục vụ", "6.5M", "160", "1.2M", "+200K", "7.9M"),
        new PayrollItem("Phạm An", "PA", "#8B5CF6", "Quản lý", "15.0M", "180", "3.5M", "+1.0M", "19.5M"),
        new PayrollItem("Hoàng Lan", "HL", "#EC4899", "Barista", "8.0M", "148", "1.4M", "-200K", "9.2M"),
        new PayrollItem("Võ Khoa", "VK", "#F59E0B", "Bếp trưởng", "12.0M", "176", "2.0M", "+500K", "14.5M"),
        new PayrollItem("Đặng Linh", "ĐL", "#06B6D4", "Phục vụ", "6.5M", "152", "0.8M", "0", "7.3M"),
        new PayrollItem("Bùi Tùng", "BT", "#3B82F6", "Thu ngân", "7.5M", "164", "1.5M", "+200K", "9.2M"),
    };
}
