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

@*
    EN: Create staff — form with personal info, role, store assignment, schedule.
    VI: Thêm nhân viên — form thông tin cá nhân, vai trò, phân công cửa hàng, lịch.
    Design: pencil-design/src/pages/tPOS/admin/staff-create.pen
*@

<PageTitle>Thêm nhân viên — GoodGo Admin</PageTitle>

@* ═══ TOP BAR ═══ *@
<div class="admin-topbar">
    <div class="admin-topbar__left" style="flex-direction:row;align-items:center;gap:12px;">
        <button class="admin-icon-btn" @onclick="@(() => NavigateTo("staff"))">
            <i data-lucide="arrow-left"></i>
        </button>
        <div>
            <h1 class="admin-topbar__title">Thêm nhân viên mới</h1>
            <p class="admin-topbar__subtitle">Điền thông tin để tạo tài khoản nhân viên</p>
        </div>
    </div>
    <div class="admin-topbar__right">
        <button class="admin-btn-secondary" @onclick="@(() => NavigateTo("staff"))">Hủy</button>
        <button class="admin-btn-primary">
            <i data-lucide="check"></i>
            <span>Lưu nhân viên</span>
        </button>
    </div>
</div>

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

    @* LEFT COLUMN: Main form *@
    <div style="flex:1;display:flex;flex-direction:column;gap:24px;">

        @* Personal Info *@
        <div class="admin-panel">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">
                    <i data-lucide="user" style="color:var(--admin-orange-primary);"></i>
                    Thông tin cá nhân
                </h3>
            </div>
            <div class="admin-panel__body" style="display:flex;flex-direction:column;gap:20px;">
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
                    <div class="admin-form-group">
                        <label class="admin-form-label">Họ và tên <span style="color:var(--admin-danger);">*</span></label>
                        <input class="admin-form-input" type="text" placeholder="VD: Nguyễn Văn A" />
                    </div>
                    <div class="admin-form-group">
                        <label class="admin-form-label">Số điện thoại <span style="color:var(--admin-danger);">*</span></label>
                        <input class="admin-form-input" type="tel" placeholder="0901 234 567" />
                    </div>
                </div>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
                    <div class="admin-form-group">
                        <label class="admin-form-label">Email</label>
                        <input class="admin-form-input" type="email" placeholder="email@example.com" />
                    </div>
                    <div class="admin-form-group">
                        <label class="admin-form-label">Ngày sinh</label>
                        <input class="admin-form-input" type="date" />
                    </div>
                </div>
                <div class="admin-form-group">
                    <label class="admin-form-label">Địa chỉ</label>
                    <input class="admin-form-input" type="text" placeholder="Số nhà, đường, quận..." />
                </div>
                <div class="admin-form-group">
                    <label class="admin-form-label">CMND/CCCD</label>
                    <input class="admin-form-input" type="text" placeholder="VD: 079012345678" />
                </div>
            </div>
        </div>

        @* Employment Info *@
        <div class="admin-panel">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">
                    <i data-lucide="briefcase" style="color:#3B82F6;"></i>
                    Thông tin công việc
                </h3>
            </div>
            <div class="admin-panel__body" style="display:flex;flex-direction:column;gap:20px;">
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
                    <div class="admin-form-group">
                        <label class="admin-form-label">Vai trò <span style="color:var(--admin-danger);">*</span></label>
                        <select class="admin-form-input">
                            <option value="">Chọn vai trò...</option>
                            <option>Quản lý</option>
                            <option>Thu ngân</option>
                            <option>Barista</option>
                            <option>Phục vụ</option>
                            <option>Bếp trưởng</option>
                            <option>Phụ bếp</option>
                        </select>
                    </div>
                    <div class="admin-form-group">
                        <label class="admin-form-label">Cửa hàng <span style="color:var(--admin-danger);">*</span></label>
                        <select class="admin-form-input">
                            <option value="">Chọn cửa hàng...</option>
                            <option>Coffee House Q1</option>
                            <option>Nhà hàng Q3</option>
                            <option>Café Thủ Đức</option>
                        </select>
                    </div>
                </div>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
                    <div class="admin-form-group">
                        <label class="admin-form-label">Ngày bắt đầu</label>
                        <input class="admin-form-input" type="date" />
                    </div>
                    <div class="admin-form-group">
                        <label class="admin-form-label">Loại hợp đồng</label>
                        <select class="admin-form-input">
                            <option>Toàn thời gian</option>
                            <option>Bán thời gian</option>
                            <option>Thời vụ</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        @* Salary *@
        <div class="admin-panel">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">
                    <i data-lucide="banknote" style="color:#22C55E;"></i>
                    Lương & Phúc lợi
                </h3>
            </div>
            <div class="admin-panel__body" style="display:flex;flex-direction:column;gap:20px;">
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
                    <div class="admin-form-group">
                        <label class="admin-form-label">Lương cơ bản (VND)</label>
                        <input class="admin-form-input" type="text" placeholder="VD: 8,000,000" />
                    </div>
                    <div class="admin-form-group">
                        <label class="admin-form-label">Hoa hồng (%)</label>
                        <input class="admin-form-input" type="number" placeholder="VD: 3" />
                    </div>
                </div>
            </div>
        </div>
    </div>

    @* RIGHT COLUMN: Summary/Preview *@
    <div style="width:320px;display:flex;flex-direction:column;gap:20px;">
        <div class="admin-panel">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">
                    <i data-lucide="eye" style="color:var(--admin-orange-primary);"></i>
                    Xem trước thẻ
                </h3>
            </div>
            <div class="admin-panel__body" style="display:flex;flex-direction:column;align-items:center;gap:16px;">
                <div class="admin-user-avatar" style="width:72px;height:72px;font-size:24px;">NV</div>
                <div style="text-align:center;">
                    <div style="font-size:16px;font-weight:600;">Nhân viên mới</div>
                    <div style="font-size:12px;color:var(--admin-text-tertiary);">Chưa phân công</div>
                </div>
                <div style="width:100%;height:1px;background:var(--admin-border-subtle);"></div>
                <div style="width:100%;display:flex;flex-direction:column;gap:8px;font-size:13px;">
                    <div style="display:flex;justify-content:space-between;">
                        <span style="color:var(--admin-text-tertiary);">Mã PIN</span>
                        <span style="font-weight:600;font-family:monospace;">Tự động</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;">
                        <span style="color:var(--admin-text-tertiary);">Quyền POS</span>
                        <span style="font-weight:600;">Cơ bản</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="admin-panel" style="background:rgba(59,130,246,0.06);border:1px solid rgba(59,130,246,0.15);">
            <div class="admin-panel__body" style="display:flex;gap:10px;align-items:flex-start;">
                <i data-lucide="info" style="width:18px;height:18px;color:#3B82F6;flex-shrink:0;margin-top:2px;"></i>
                <div style="font-size:12px;color:var(--admin-text-secondary);line-height:1.5;">
                    Nhân viên sẽ nhận mã PIN 4 số để đăng nhập POS. Bạn có thể thay đổi quyền hạn trong phần <b>Phân quyền</b>.
                </div>
            </div>
        </div>
    </div>
</div>
