# Task: Tích hợp Vòng Quay May Mắn (Lucky Wheel) vào Landing Page

## 1. Tổng quan
Tính năng cho phép chủ shop cấu hình một vòng quay may mắn gắn liền với Landing Page. Khách hàng truy cập Landing Page sẽ có cơ hội quay thưởng để nhận mã giảm giá hoặc vật phẩm. Phần thưởng sẽ được áp dụng trực tiếp khi đặt hàng hoặc ghi chú vào đơn hàng.

## 2. Yêu cầu chi tiết
- **Vị trí cấu hình**: Nằm trong trang chi tiết/chỉnh sửa của một Landing Page (Sub-menu).
- **Cơ chế giải thưởng**:
  - Mã giảm giá (Giftcode): Chọn từ danh sách Giftcode có sẵn hoặc tạo random.
  - Vật phẩm (Text): Nhập thủ công (ví dụ: "Cái nịt", "Mũ bảo hiểm").
  - Chúc may mắn lần sau (Không trúng).
- **Kiểm soát số lượng**:
  - Có thể giới hạn số lượng phần thưởng cho từng ô (Ví dụ: Chỉ 5 người trúng iPhone, còn lại trúng voucher).
- **Giao diện**:
  - Hiện đại, bắt mắt, hiệu ứng mượt mà.
  - Cho phép tùy chỉnh màu sắc các ô.
- **Tích hợp**:
  - Khi trúng mã giảm giá -> Tự động điền vào form đặt hàng trên Landing Page.
  - Khi trúng vật phẩm -> Ghi chú vào đơn hàng + Hiển thị ở màn hình Tracking đơn hàng.

## 3. Thiết kế kỹ thuật (Technical Design)

### 3.1. Cơ sở dữ liệu (Database) (DONE)
- Bảng `lucky_wheels` (DONE)
- Bảng `lucky_wheel_segments` (DONE)

### 3.2. Backend API (DONE)
- `LuckyWheelController` (Admin) (DONE)
- `PublicLuckyWheelController` (Public) (DONE)
- Routes registered (DONE)

### 3.3. Frontend - Admin (Setup) (DONE)
- Service: `LuckyWheelService` (DONE)
- Component: `LuckyWheelSetupComponent` (DONE)
- UI: Form Config + Preview (DONE)
- Route: `/shop/landing-pages/:id/lucky-wheel` (DONE)

### 3.4. Frontend - Public (Landing Page Display) (DONE)
- Service: `PublicLuckyWheelService` (DONE)
- Component: `LuckyWheelWidgetComponent` (DONE)
- UI: Floating Icon + Canvas Wheel + Result Dialog (DONE)
- Integration: Reward handling in `PublicLandingPageComponent` (DONE)

## 4. Kế hoạch thực hiện (Implementation Steps)

1.  **Backend** (DONE)
    - [x] Tạo migration `lucky_wheels`, `lucky_wheel_segments`.
    - [x] Tạo Model & Relationship.
    - [x] Viết Controller & API (Admin & Public).
    - [x] Đăng ký Routes.

2.  **Frontend Admin** (DONE)
    - [x] Tạo API Service `LuckyWheelService`.
    - [x] Tạo Component `LuckyWheelSetupComponent`.
    - [x] Implement UI (Form + Preview).
    - [x] Tích hợp API.

3.  **Frontend Public** (DONE)
    - [x] Tạo Component `LuckyWheelWidgetComponent`.
    - [x] Nhúng vào `PublicLandingPageComponent`.
    - [x] Fetch config vòng quay khi load Landing Page.
    - [x] Xử lý logic trúng thưởng (update form data).