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

@*
    EN: Attendance dashboard — today's check-in/out, weekly summary, punctuality.
    VI: Dashboard chấm công — điểm danh hôm nay, tổng kết tuần, đúng giờ.
    Design: pencil-design/src/pages/tPOS/admin/attendance-dashboard.pen
*@

<PageTitle>Chấm công — GoodGo Admin</PageTitle>

@* ═══ TOP BAR ═══ *@
<div class="admin-topbar">
    <div class="admin-topbar__left">
        <h1 class="admin-topbar__title">Chấm công</h1>
        <p class="admin-topbar__subtitle">Hôm nay, @DateTime.Now.ToString("dd/MM/yyyy") • Coffee House Q1</p>
    </div>
    <div class="admin-topbar__right">
        <button class="admin-btn-secondary">
            <i data-lucide="download"></i>
            <span>Xuất báo cáo</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(34,197,94,0.125);">
                    <i data-lucide="user-check" style="color:#22C55E;"></i>
                </div>
            </div>
            <div class="admin-kpi-card__value">4/5</div>
            <div class="admin-kpi-card__label">Đã check-in</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="clock" style="color:#3B82F6;"></i>
                </div>
            </div>
            <div class="admin-kpi-card__value">96%</div>
            <div class="admin-kpi-card__label">Tỷ lệ đúng giờ</div>
        </div>
        <div class="admin-kpi-card">
            <div class="admin-kpi-card__header">
                <div class="admin-kpi-card__icon" style="background-color:rgba(245,158,11,0.125);">
                    <i data-lucide="alert-triangle" style="color:#F59E0B;"></i>
                </div>
            </div>
            <div class="admin-kpi-card__value">1</div>
            <div class="admin-kpi-card__label">Đi trễ hôm nay</div>
        </div>
        <div class="admin-kpi-card">
            <div class="admin-kpi-card__header">
                <div class="admin-kpi-card__icon" style="background-color:rgba(239,68,68,0.125);">
                    <i data-lucide="user-x" style="color:#EF4444;"></i>
                </div>
            </div>
            <div class="admin-kpi-card__value">1</div>
            <div class="admin-kpi-card__label">Vắng mặt</div>
        </div>
    </div>

    @* Today's attendance table *@
    <div class="admin-panel">
        <div class="admin-panel__header">
            <h3 class="admin-panel__title">
                <i data-lucide="list" style="color:var(--admin-orange-primary);"></i>
                Chi tiết hôm nay
            </h3>
        </div>
        <div class="admin-panel__body" style="padding:0;">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Nhân viên</th>
                        <th>Ca làm</th>
                        <th>Check-in</th>
                        <th>Check-out</th>
                        <th>Trạng thái</th>
                        <th>Giờ làm</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="display:flex;align-items:center;gap:10px;">
                            <div class="admin-user-avatar" style="width:28px;height:28px;font-size:10px;">TM</div>
                            Trần Minh
                        </td>
                        <td>07:00 – 15:00</td>
                        <td style="color:#22C55E;font-weight:600;">06:55</td>
                        <td>—</td>
                        <td><div class="admin-status-badge admin-status-badge--online"><span class="admin-status-badge__dot"></span>Đúng giờ</div></td>
                        <td>6h 30m</td>
                    </tr>
                    <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:#3B82F6;">LT</div>
                            Lê Thảo
                        </td>
                        <td>07:00 – 15:00</td>
                        <td style="color:#22C55E;font-weight:600;">06:58</td>
                        <td>—</td>
                        <td><div class="admin-status-badge admin-status-badge--online"><span class="admin-status-badge__dot"></span>Đúng giờ</div></td>
                        <td>6h 27m</td>
                    </tr>
                    <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:#22C55E;">NH</div>
                            Nguyễn Hà
                        </td>
                        <td>08:00 – 16:00</td>
                        <td style="color:#F59E0B;font-weight:600;">08:12</td>
                        <td>—</td>
                        <td><div class="admin-status-badge admin-status-badge--setup"><span class="admin-status-badge__dot"></span>Trễ 12p</div></td>
                        <td>5h 13m</td>
                    </tr>
                    <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:#8B5CF6;">PA</div>
                            Phạm An
                        </td>
                        <td>08:00 – 17:00</td>
                        <td style="color:#22C55E;font-weight:600;">07:50</td>
                        <td>—</td>
                        <td><div class="admin-status-badge admin-status-badge--online"><span class="admin-status-badge__dot"></span>Đúng giờ</div></td>
                        <td>5h 35m</td>
                    </tr>
                    <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:#EC4899;">HL</div>
                            Hoàng Lan
                        </td>
                        <td>07:00 – 15:00</td>
                        <td style="color:var(--admin-text-tertiary);">—</td>
                        <td>—</td>
                        <td><div class="admin-status-badge admin-status-badge--offline"><span class="admin-status-badge__dot"></span>Vắng</div></td>
                        <td>—</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
