# Coffee Shop - Bean & Brew

ตัวอย่างเว็บไซต์ร้านกาแฟที่สมบูรณ์พร้อมใช้งาน สร้างด้วย Now.js Framework

## 🎯 ฟีเจอร์

### ฟีเจอร์หลัก
- ✅ **แสดงเมนูสินค้า** - แสดงสินค้าพร้อมรูปภาพ ราคา และรายละเอียด
- ✅ **กรองตามหมวดหมู่** - กรองเมนู: ร้อน, เย็น, ปั่น, เบเกอรี่
- ✅ **ระบบตะกร้าสินค้า** - เพิ่ม/ลบ/ปรับจำนวนสินค้า
- ✅ **คำนวณยอดอัตโนมัติ** - คำนวณยอดรวมและค่าจัดส่ง
- ✅ **ฟรีค่าจัดส่ง** - สั่งซื้อขั้นต่ำ 200 บาท

### ระบบจัดส่ง
- 📦 **ฟอร์มข้อมูลจัดส่ง** - กรอกชื่อ เบอร์โทร ที่อยู่
- 📋 **บันทึกข้อมูลลูกค้า** - จำข้อมูลลูกค้าใน Cookie (30 วัน)
- 📋 **Pre-fill Form** - กรอกข้อมูลอัตโนมัติสำหรับลูกค้าเก่า
- 🚚 **จัดส่งรวดเร็ว** - ภายใน 30-45 นาที

### ระบบชำระเงิน
- 💳 **PromptPay QR Code** - ชำระผ่าน QR Code (promptpay.io)
- 🔢 **สร้าง QR อัตโนมัติ** - สร้าง QR Code ตามยอดชำระ
- ✓ **ยืนยันการชำระเงิน** - ระบบยืนยันคำสั่งซื้อ
- 🗂️ **บันทึกคำสั่งซื้อ** - เก็บข้อมูลใน Session

### UX/UI
- 🎨 **การออกแบบสวยงาม** - UI/UX ที่ใช้งานง่าย
- 📱 **Responsive Design** - รองรับทุกขนาดหน้าจอ
- ⚡ **Animation เรียบ** - Transition และ Animation ลื่นไหล
- 🌈 **Color Scheme** - โทนสีกาแฟที่อบอุ่น
- 🔄 **Modal System** - ใช้ Modal สำหรับ Checkout และ Payment

## 🚀 เทคโนโลยีที่ใช้

### Now.js Framework Components
- **FormManager** - จัดการฟอร์มและ validation
- **Modal** - แสดง popup dialog
- **ResponseHandler** - จัดการ response จาก API
- **TemplateManager** - Data binding และ template rendering
- **Utils** - Utility functions (number.format, etc.)

### Features ของ Now.js
- ✅ Data Binding (`data-text`, `data-attr`)
- ✅ Form Validation
- ✅ Modal Management
- ✅ AJAX Form Submission
- ✅ Event Management
- ✅ Responsive Design

## 📁 โครงสร้างไฟล์

```
coffee-shop/
├── index.html              # หน้าเว็บหลัก
├── styles.css              # สไตล์ CSS
├── config.php              # การตั้งค่าร้าน (PHP)
├── config.js.php           # ส่งออก config เป็น JavaScript
├── main.js                 # Logic หลักของแอป
├── products.json           # ข้อมูลสินค้า
├── api/
│   ├── checkout-init.php   # API เริ่มต้น checkout
│   ├── checkout-submit.php # API submit checkout
│   └── payment-confirm.php # API ยืนยันการชำระเงิน
├── templates/
│   ├── checkout.html       # Template ฟอร์ม checkout
│   ├── payment.html        # Template หน้าชำระเงิน
│   └── success.html        # Template หน้าสำเร็จ
└── README.md               # เอกสารนี้
```

## 🎮 การใช้งาน

### 1. เปิดเว็บไซต์
เปิดไฟล์ `index.html` ในเบราว์เซอร์ (ต้องรันผ่าน web server เพื่อให้ PHP ทำงาน)

### 2. เลือกสินค้า
- คลิกปุ่มกรองหมวดหมู่เพื่อดูเมนูที่สนใจ
- คลิกปุ่ม "เพิ่ม" เพื่อใส่ตะกร้า

### 3. ดูตะกร้า
- คลิกไอคอนตะกร้าด้านบน
- ปรับจำนวนหรือลบสินค้า
- ดูยอดรวมและค่าจัดส่ง

### 4. สั่งซื้อ (Checkout)
- คลิกปุ่ม "สั่งซื้อ"
- กรอกข้อมูลการจัดส่ง (ถ้าเคยสั่งจะกรอกอัตโนมัติ)
- คลิก "ดำเนินการต่อ"

### 5. ชำระเงิน
- สแกน QR Code ด้วยแอปธนาคาร
- ชำระเงินตามยอดที่แสดง
- กด "✓ ชำระเงินแล้ว" เพื่อยืนยัน

### 6. เสร็จสิ้น
- ดูข้อมูลคำสั่งซื้อและที่อยู่จัดส่ง
- ตะกร้าจะถูกเคลียร์อัตโนมัติ
- รอรับสินค้าภายใน 30-45 นาที

## 🔧 การปรับแต่ง

### เปลี่ยนข้อมูลร้าน
แก้ไขในไฟล์ `config.php`:

```php
<?php
// การตั้งค่าร้าน
define('SHOP_NAME', 'Bean & Brew');
define('SHOP_PHONE', '0812345678');
define('SHOP_PROMPTPAY_ID', '0812345678'); // เบอร์ PromptPay

// ค่าจัดส่ง
define('DELIVERY_FEE', 30);
define('FREE_DELIVERY_MINIMUM', 200);

// เวลาจัดส่ง (นาที)
define('DELIVERY_TIME_MIN', 30);
define('DELIVERY_TIME_MAX', 45);
```

**หมายเหตุ:** ค่าที่แก้ใน `config.php` จะถูกใช้ทั้งใน PHP และ JavaScript อัตโนมัติผ่าน `config.js.php`

### เพิ่มสินค้า
แก้ไขในไฟล์ `products.json`:

```json
{
  "id": 17,
  "name": "ชื่อสินค้าใหม่",
  "name_en": "New Product",
  "description": "รายละเอียด",
  "price": 50,
  "category": "hot",
  "image": "product.jpg",
  "available": true
}
```

### เปลี่ยนสี
แก้ไขในไฟล์ `styles.css`:

```css
:root {
  --coffee-primary: #6F4E37;
  --coffee-secondary: #A67B5B;
  --coffee-accent: #D4A574;
  /* ... */
}
```

## 🔄 Flow การทำงาน

### Checkout Flow
```
1. User คลิก "สั่งซื้อ"
   ↓
2. checkout-init.php
   - อ่านข้อมูลลูกค้าจาก Cookie
   - บันทึกตะกร้าลง Session
   - แสดง Modal checkout.html
   ↓
3. User กรอกข้อมูลและ Submit
   ↓
4. checkout-submit.php
   - บันทึกข้อมูลลูกค้าลง Cookie
   - สร้าง Order Number
   - บันทึก pending_order ลง Session
   - สร้าง PromptPay QR Code
   - แสดง Modal payment.html
   ↓
5. User สแกน QR และกด "ชำระเงินแล้ว"
   ↓
6. payment-confirm.php
   - ดึงข้อมูล order จาก Session
   - อัพเดทสถานะเป็น 'paid'
   - (Optional) บันทึกลง file/database
   - เคลียร์ตะกร้า (callback: clearCart)
   - แสดง Modal success.html
```

### Data Persistence
- **Cookie**: ข้อมูลลูกค้า (30 วัน) - สำหรับ pre-fill form
- **Session**: ตะกร้าสินค้า, pending order - สำหรับ checkout flow
- **File** (Optional): บันทึกคำสั่งซื้อที่สำเร็จ

## 📊 ฐานข้อมูล (สำหรับการใช้งานจริง)

### ตารางสินค้า (products)
```sql
CREATE TABLE products (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(100) NOT NULL,
  name_en VARCHAR(100),
  description TEXT,
  price DECIMAL(10,2) NOT NULL,
  category VARCHAR(50),
  image VARCHAR(255),
  available BOOLEAN DEFAULT TRUE,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
```

### ตารางคำสั่งซื้อ (orders)
```sql
CREATE TABLE orders (
  id INT PRIMARY KEY AUTO_INCREMENT,
  order_number VARCHAR(50) UNIQUE NOT NULL,
  customer_name VARCHAR(100) NOT NULL,
  customer_phone VARCHAR(20) NOT NULL,
  customer_address TEXT NOT NULL,
  district VARCHAR(50),
  note TEXT,
  subtotal DECIMAL(10,2) NOT NULL,
  delivery_fee DECIMAL(10,2) NOT NULL,
  total DECIMAL(10,2) NOT NULL,
  status VARCHAR(50) DEFAULT 'pending',
  paid_at TIMESTAMP NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
```

### ตารางรายการสินค้า (order_items)
```sql
CREATE TABLE order_items (
  id INT PRIMARY KEY AUTO_INCREMENT,
  order_id INT NOT NULL,
  product_id INT NOT NULL,
  product_name VARCHAR(100) NOT NULL,
  price DECIMAL(10,2) NOT NULL,
  quantity INT NOT NULL,
  FOREIGN KEY (order_id) REFERENCES orders(id)
);
```

## 🎨 Design System

### Color Palette
- **Primary**: `#6F4E37` (Coffee Brown)
- **Secondary**: `#A67B5B` (Light Brown)
- **Accent**: `#D4A574` (Cream)
- **Dark**: `#3E2723` (Dark Brown)
- **Light**: `#EFEBE9` (Light Beige)

### Typography
- **Font Family**: Kanit (Thai), -apple-system, sans-serif
- **Heading**: 700 weight
- **Body**: 400 weight
- **Button**: 600 weight

### Spacing
- **Container**: max-width 1200px
- **Padding**: 24px (mobile), 32px (desktop)
- **Grid Gap**: 32px

## 📱 Responsive Breakpoints

- **Desktop**: > 768px
- **Tablet**: 768px - 1024px
- **Mobile**: < 768px

## ⚡ Performance

- ✅ Lazy Loading Images
- ✅ Optimized CSS
- ✅ Minimal JavaScript
- ✅ Fast Framework (Now.js)
- ✅ Session-based cart (no localStorage overhead)

## 🔒 Security

- ✅ Form Validation (client & server)
- ✅ XSS Protection
- ✅ CSRF Protection (disabled for demo, enable for production)
- ✅ Session Management
- ✅ Cookie Security (HttpOnly recommended for production)

## 🛠️ Technical Details

### JavaScript Utilities Used
- `Utils.number.format(num, decimals)` - จัดรูปแบบตัวเลข
- `clearCart()` - เคลียร์ตะกร้าหลังชำระเงิน
- `updateCartUI()` - อัพเดท UI ตะกร้า

### ResponseHandler Actions
- `modal` - แสดง modal พร้อม template
- `callback` - เรียก JavaScript function

### Form Features
- `data-ajax-submit="true"` - Submit ผ่าน AJAX
- `data-csrf="false"` - ปิด CSRF check (demo only)
- `data-attr="value:fieldname"` - Data binding

## 📝 TODO (สำหรับการพัฒนาต่อ)

- [ ] เชื่อมต่อกับฐานข้อมูลจริง
- [ ] ระบบ Login/Register
- [ ] ประวัติคำสั่งซื้อ
- [ ] ติดตามสถานะการจัดส่ง
- [ ] ระบบคะแนนสะสม
- [ ] ระบบรีวิวสินค้า
- [ ] ระบบโปรโมชัน/คูปอง
- [ ] แจ้งเตือนผ่าน Line Notify
- [ ] Payment Gateway integration
- [ ] Admin Dashboard
- [ ] Enable CSRF protection

## 🤝 Contributing

หากต้องการปรับปรุงหรือเพิ่มฟีเจอร์:
1. Fork repository
2. สร้าง feature branch
3. Commit changes
4. Push to branch
5. สร้าง Pull Request

## 📄 License

MIT License - ใช้งานและปรับแต่งได้อย่างอิสระ

## 👨‍💻 Author

สร้างโดย Now.js Framework Team
ตัวอย่างการใช้งาน Now.js ในโปรเจกต์จริง

## 🙏 Credits

- **Now.js Framework** - JavaScript Framework
- **PromptPay.io** - QR Code Generation Service
- **Google Fonts** - Kanit Font

## 📞 Support

หากมีปัญหาหรือข้อสงสัย:
- เปิด Issue ใน GitHub
- ติดต่อทีมพัฒนา
- อ่านเอกสาร Now.js

---

**หมายเหตุ**: นี่เป็นตัวอย่างการใช้งาน Now.js Framework
สำหรับการใช้งานจริงควรปรับปรุงด้านความปลอดภัย (enable CSRF, secure cookies) และเชื่อมต่อกับระบบ Backend ที่เหมาะสม