# 🎨 UI BUILDER UPDATE - WYSIWYG Template Builder

## ✅ ĐÃ HOÀN THÀNH NÂ

NG CẤP

Module **UiBuilder** đã được nâng cấp thành **WYSIWYG Template Builder** - giúp người không biết code cũng có thể tạo template dễ dàng!

---

## 🆕 TÍNH NĂNG MỚI

### 1️⃣ Chọn Layout Template Mẫu
- ✅ Hệ thống preset templates từ file JSON
- ✅ Grid hiển thị thumbnails của các layout có sẵn
- ✅ Filter theo component type (footer, header, banner...)
- ✅ Click để chọn preset và tự động load cấu hình

### 2️⃣ Form Cấu Hình Tự Động (WYSIWYG)
- ✅ Tự động sinh form fields từ `config_schema`
- ✅ Hỗ trợ nhiều loại input:
  - 📝 Text, Textarea
  - 📧 Email, URL
  - 🎨 Color picker
  - 🖼️ Image upload với preview
  - 📊 JSON editor
- ✅ Auto-fill tên và slug template
- ✅ Không cần nhập HTML/CSS thủ công

### 3️⃣ Preview Responsive Realtime
- ✅ Preview live với iframe
- ✅ 3 chế độ responsive: Desktop / Tablet / Mobile
- ✅ Cập nhật realtime khi thay đổi config
- ✅ Sử dụng Mustache.js để render placeholders `{{key}}`

### 4️⃣ Upload Ảnh/Logo
- ✅ API endpoint: `POST /api/admin/ui/upload`
- ✅ Drag & drop hoặc click upload
- ✅ Preview ảnh sau khi upload
- ✅ Lưu vào `storage/app/public/uibuilder/`
- ✅ Validation: max 5MB, jpeg/png/gif/svg/webp

### 5️⃣ 3-Step Wizard Interface
- ✅ **Bước 1**: Chọn Layout Mẫu
- ✅ **Bước 2**: Cấu hình & Preview
- ✅ **Bước 3**: Xem lại & Lưu
- ✅ Step indicator với progress

### 6️⃣ Preset System
- ✅ 4 presets có sẵn:
  - `footer-default.json` - Footer đơn giản
  - `footer-modern.json` - Footer với social links
  - `header-simple.json` - Header với navigation
  - `banner-hero.json` - Hero banner với CTA
- ✅ Dễ dàng thêm preset mới (chỉ cần thêm file JSON)
- ✅ Hot reload (không cần restart server)

---

## 📦 CÁC FILE ĐÃ TẠO/CẬP NHẬT

### Database
```
✅ 2025_10_11_000003_add_config_schema_to_ui_templates.php
   - Thêm cột config_schema (JSON) vào bảng ui_templates
```

### Models
```
✅ UiTemplate.php
   - Thêm 'config_schema' vào fillable
   - Cast config_schema as array
```

### Controllers
```
✅ UiBuilderController.php
   - Thêm method loadPresets()
   - Thêm method getPreset($slug)
   - Update createTemplate() để load presets

✅ UploadApiController.php (MỚI)
   - upload() - Upload ảnh/file
   - delete() - Xóa file đã upload
```

### Routes
```
✅ routes/api.php
   - POST /api/admin/ui/upload
   - DELETE /api/admin/ui/upload

✅ routes/web.php
   - GET /admin/ui-builder/presets/{slug}
```

### Views
```
✅ templates/builder.blade.php (MỚI)
   - 3-step wizard interface
   - Preset selection grid
   - Dynamic config form
   - Responsive preview
   - Realtime updates với Mustache.js
```

### Presets
```
✅ Resources/presets/templates/
   ├── footer-default.json
   ├── footer-modern.json
   ├── header-simple.json
   ├── banner-hero.json
   └── README.md (Hướng dẫn thêm preset mới)
```

### Assets
```
✅ public/modules/uibuilder/assets/img/
   └── placeholder.png.txt (Hướng dẫn tạo thumbnails)
```

---

## 🔧 CẤU TRÚC CONFIG SCHEMA

Mỗi preset định nghĩa `config_schema` để tự động sinh form:

```json
{
  "config_schema": {
    "site_name": {
      "type": "text",
      "label": "Tên website",
      "default": "My Website",
      "required": true
    },
    "logo": {
      "type": "image",
      "label": "Logo",
      "default": "",
      "required": false
    },
    "description": {
      "type": "textarea",
      "label": "Mô tả",
      "default": "",
      "required": false
    },
    "primary_color": {
      "type": "color",
      "label": "Màu chủ đạo",
      "default": "#3b82f6",
      "required": false
    },
    "facebook_url": {
      "type": "url",
      "label": "Facebook URL",
      "default": "",
      "required": false
    }
  }
}
```

### Các loại field hỗ trợ:
- `text` - Input text đơn giản
- `textarea` - Text area nhiều dòng
- `email` - Input email với validation
- `url` - Input URL với validation
- `color` - Color picker
- `image` - Upload ảnh với preview
- `json` - JSON editor

---

## 🎨 MUSTACHE TEMPLATE SYNTAX

HTML templates sử dụng Mustache placeholders:

```html
<!-- Variables -->
<h1>{{title}}</h1>
<p>{{description}}</p>

<!-- Conditional sections -->
{{#logo}}
<img src="{{logo}}" alt="Logo">
{{/logo}}

<!-- Arrays -->
{{#menu_items}}
<a href="{{url}}">{{label}}</a>
{{/menu_items}}
```

---

## 🚀 HƯỚNG DẪN SỬ DỤNG

### 1. Chạy Migration

```bash
cd /var/www/html/lms_hocmai
php artisan migrate
```

### 2. Truy cập Template Builder

```
http://your-domain.com/admin/ui-builder/templates/create
```

### 3. Tạo Template Mới

**Bước 1: Chọn Layout**
- Xem grid các preset có sẵn
- Filter theo component nếu cần
- Click chọn một preset

**Bước 2: Cấu hình**
- Form tự động sinh từ config_schema
- Nhập thông tin (text, upload logo, chọn màu...)
- Preview realtime cập nhật ngay

**Bước 3: Lưu**
- Review thông tin
- Click "Lưu Template"
- Template sẽ được lưu vào database với HTML, CSS, và config_schema

### 4. Thêm Preset Mới

**Tạo file JSON mới:**
```json
// footer-company.json
{
  "component": "footer",
  "name": "Company Footer",
  "slug": "footer-company",
  "thumbnail": "/modules/uibuilder/assets/img/footer-company.png",
  "html": "<footer>© {{year}} {{company_name}}</footer>",
  "css": "footer { ... }",
  "config_schema": {
    "company_name": {
      "type": "text",
      "label": "Tên công ty",
      "default": "ACME Corp",
      "required": true
    },
    "year": {
      "type": "text",
      "label": "Năm",
      "default": "2025",
      "required": true
    }
  }
}
```

**Tạo thumbnail:**
- Kích thước: 400x300px
- Lưu vào: `public/modules/uibuilder/assets/img/footer-company.png`

**Reload trang** → Preset mới xuất hiện!

---

## 🔌 API ENDPOINTS

### Upload Image

```bash
POST /api/admin/ui/upload
Content-Type: multipart/form-data
Authorization: Bearer {token}

Body:
- file: image file
- type: logo|image|icon|banner (optional)

Response:
{
  "success": true,
  "data": {
    "filename": "abc123.png",
    "path": "uibuilder/image/abc123.png",
    "url": "/storage/uibuilder/image/abc123.png",
    "full_url": "http://domain.com/storage/uibuilder/image/abc123.png"
  }
}
```

### Delete Image

```bash
DELETE /api/admin/ui/upload
Content-Type: application/json
Authorization: Bearer {token}

Body:
{
  "path": "uibuilder/image/abc123.png"
}
```

### Get Preset

```bash
GET /admin/ui-builder/presets/{slug}

Response:
{
  "success": true,
  "data": {
    "component": "footer",
    "name": "Default Footer",
    "slug": "footer-default",
    "html": "...",
    "css": "...",
    "config_schema": {...}
  }
}
```

---

## 🎯 SO SÁNH TRƯỚC VÀ SAU

### ❌ TRƯỚC (Cũ)

```
Tạo Template → Nhập HTML thủ công
              → Nhập CSS thủ công
              → Không có preview
              → Khó khăn cho người không biết code
```

### ✅ SAU (Mới)

```
Tạo Template → Chọn preset có sẵn
              → Nhập thông tin vào form (text, upload ảnh...)
              → Preview realtime responsive
              → Dễ dàng, không cần code!
```

---

## 💡 TÍNH NĂNG NỔI BẬT

### 1. **Zero Code Required**
User chỉ cần:
- Chọn layout
- Điền form
- Upload ảnh
→ Không cần viết 1 dòng HTML/CSS nào!

### 2. **Realtime Preview**
Mọi thay đổi được preview ngay lập tức với 3 chế độ responsive.

### 3. **Easy to Extend**
Thêm preset mới = Thêm 1 file JSON. That's it!

### 4. **Professional UI**
- 3-step wizard
- Modern design
- Smooth transitions
- Intuitive UX

### 5. **Production Ready**
- Validation đầy đủ
- Error handling
- Security (file upload validation)
- Performance optimized

---

## 📸 TẠO THUMBNAILS

Để tạo thumbnails cho presets:

### Option 1: Screenshot từ Preview
1. Mở template builder
2. Chọn preset
3. Preview ở mode Desktop
4. Screenshot (400x300px)
5. Lưu vào `public/modules/uibuilder/assets/img/`

### Option 2: Design Tools
- Figma: Thiết kế mockup 400x300px
- Canva: Sử dụng template "Presentation" 
- Photoshop: Crop/resize

### Option 3: Online Generators
- https://placeholder.com
- https://dummyimage.com
- https://via.placeholder.com/400x300

---

## 🔍 TESTING

### Test Checklist

- ✅ Chọn preset và load được data
- ✅ Form fields generate đúng theo schema
- ✅ Upload ảnh hoạt động
- ✅ Preview realtime updates
- ✅ Responsive modes (Desktop/Tablet/Mobile)
- ✅ Lưu template thành công
- ✅ Template hiển thị trong danh sách
- ✅ Mustache placeholders render đúng
- ✅ Validation hoạt động
- ✅ Error handling

### Test Upload

```bash
# Test upload API
curl -X POST http://your-domain.com/api/admin/ui/upload \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -F "file=@test-image.png" \
  -F "type=logo"
```

---

## 🐛 TROUBLESHOOTING

### Lỗi: Presets không load

**Nguyên nhân**: Đường dẫn file JSON không đúng

**Giải pháp**:
```bash
# Kiểm tra file tồn tại
ls -la app/Modules/UiBuilder/Resources/presets/templates/

# Kiểm tra permissions
chmod 755 app/Modules/UiBuilder/Resources/presets/templates/
chmod 644 app/Modules/UiBuilder/Resources/presets/templates/*.json
```

### Lỗi: Upload ảnh thất bại

**Nguyên nhân**: Storage link chưa tạo hoặc permissions

**Giải pháp**:
```bash
php artisan storage:link
chmod -R 775 storage/app/public/uibuilder/
```

### Lỗi: Preview không hiển thị

**Nguyên nhân**: Mustache.js chưa load hoặc syntax sai

**Giải pháp**:
- Check console log trong browser
- Verify Mustache CDN link
- Kiểm tra syntax placeholders trong HTML

---

## 📚 TÀI LIỆU THAM KHẢO

- **Mustache.js**: https://github.com/janl/mustache.js
- **Preset README**: `app/Modules/UiBuilder/Resources/presets/templates/README.md`
- **Module README**: `app/Modules/UiBuilder/README.md`

---

## 🎉 KẾT QUẢ

Module UiBuilder giờ đây là một **No-Code Template Builder** hoàn chỉnh:

✅ **Dễ sử dụng** - Không cần biết code  
✅ **Trực quan** - Preview realtime responsive  
✅ **Linh hoạt** - Dễ dàng mở rộng với presets mới  
✅ **Chuyên nghiệp** - UI/UX hiện đại  
✅ **Production-ready** - Security, validation, error handling  

---

**🚀 Module đã sẵn sàng! Hãy tạo template đầu tiên của bạn!**

```
http://your-domain.com/admin/ui-builder/templates/create
```