# Contact Form Setup Guide

## Tính năng đã được triển khai

✅ **ContactForm Component**: Tách riêng từ Home.vue thành component có thể tái sử dụng
✅ **ContactConfirm Page**: Trang xác nhận thông tin trước khi gửi email
✅ **Two-Step Flow**: User nhập form → Xác nhận → Gửi email  
✅ **Backend Processing**: ContactConfirmController xử lý flow confirmation
✅ **Validation**: Form validation với thông báo lỗi bằng tiếng Nhật
✅ **Email Templates**: 2 template email riêng biệt cho admin và user
✅ **Queue Processing**: Sử dụng Laravel Queue để gửi email không đồng bộ
✅ **Separate Result Pages**: ContactResult.vue riêng biệt cho success/error  
✅ **Form Data Persistence**: Restore form data khi user quay lại từ confirm
✅ **Auto-scroll**: Tự động scroll đến form khi user quay lại
✅ **Session Management**: Lưu trữ data tạm thời qua session & sessionStorage
✅ **TypeScript Support**: Fully typed với Vue 3 Composition API

## Cấu hình Email

### 1. Cấu hình Gmail SMTP (Khuyến nghị)

Thêm vào file `.env`:

```env
MAIL_MAILER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=your-email@gmail.com
MAIL_PASSWORD=your-app-password
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS="noreply@yourcompany.com"
MAIL_FROM_NAME="${APP_NAME}"

# Email admin nhận thông báo
MAIL_ADMIN_EMAIL="admin@yourcompany.com"
```

### 2. Thiết lập Gmail App Password

1. Truy cập [Google Account Settings](https://myaccount.google.com/)
2. Bật 2-Factor Authentication
3. Tạo App Password: Security → 2-Step Verification → App passwords
4. Sử dụng App Password trong `MAIL_PASSWORD`

### 3. Các dịch vụ email khác

#### Mailgun (Miễn phí 10,000 email/tháng)
```env
MAIL_MAILER=mailgun
MAILGUN_DOMAIN=your-domain.mailgun.org
MAILGUN_SECRET=your-secret-key
```

#### SendGrid (Miễn phí 100 email/ngày)
```env
MAIL_MAILER=smtp
MAIL_HOST=smtp.sendgrid.net
MAIL_PORT=587
MAIL_USERNAME=apikey
MAIL_PASSWORD=your-sendgrid-api-key
MAIL_ENCRYPTION=tls
```

## Khởi động Queue

Để gửi email qua queue, chạy lệnh:

```bash
# Chế độ development
php artisan queue:work

# Chế độ production (với supervisor)
php artisan queue:work --daemon
```

## User Flow Mới

### 📝 **Step 1: Form Input** 
User điền thông tin trong ContactForm component
- Button text: "確認画面へ進む" (Tiến đến màn hình xác nhận)
- POST `/contact/confirm` → Lưu data vào session

### ✅ **Step 2: Confirmation Page**
Hiển thị thông tin đã nhập để user xác nhận
- URL: `/contact/confirm`
- Hiển thị tất cả thông tin đã nhập
- 2 buttons: "戻って修正する" & "この内容で送信する"

### 📧 **Step 3: Email Processing & Result**
Sau khi user confirm, gửi email và chuyển đến trang kết quả riêng biệt
- POST `/contact/send` → Gửi email qua queue
- Success: Redirect đến `ContactResult.vue` với status success
- Error: Redirect đến `ContactResult.vue` với status error
- **URL không thay đổi**: Tránh lỗi refresh page với Inertia.js

## Sử dụng ContactForm Component

```vue
<template>
  <div>
    <!-- Component sẽ tự động redirect đến confirm page -->
    <ContactForm />
  </div>
</template>

<script setup>
import ContactForm from '@/components/ContactForm.vue';
</script>
```

## Routes được thêm

```php
// Form submission → Confirmation page  
POST /contact/confirm → ContactConfirmController@show

// Confirmation page access (if needed)
GET /contact/confirm → ContactConfirmController@show  

// Final email sending
POST /contact/send → ContactConfirmController@store
```

## Tùy chỉnh email templates

### Admin Email Template
File: `resources/views/emails/contact-admin.blade.php`
- Hiển thị thông tin chi tiết của người gửi
- Design chuyên nghiệp với gradient màu
- Tự động hiển thị thời gian nhận

### User Email Template  
File: `resources/views/emails/contact-user.blade.php`
- Email xác nhận gửi đến người dùng
- Giải thích quy trình xử lý
- Thông tin liên hệ khẩn cấp

## Validation Rules

- **company_name**: Bắt buộc, tối đa 255 ký tự
- **full_name**: Bắt buộc, tối đa 255 ký tự  
- **email**: Bắt buộc, định dạng email hợp lệ
- **development_type**: Tùy chọn, chỉ chấp nhận giá trị định sẵn
- **message**: Tùy chọn, tối đa 2000 ký tự

## Troubleshooting

### Email không được gửi
1. Kiểm tra cấu hình `.env`
2. Đảm bảo queue worker đang chạy
3. Kiểm tra logs: `storage/logs/laravel.log`

### Queue không hoạt động
```bash
# Kiểm tra queue status
php artisan queue:failed

# Thử lại failed jobs
php artisan queue:retry all

# Clear failed jobs
php artisan queue:flush

# Clear cache
php artisan config:clear
php artisan cache:clear
```

### RFC 2822 Email Compliance Error
Nếu gặp lỗi "does not comply with addr-spec of RFC 2822":
- Đảm bảo email address không chứa ký tự đặc biệt
- Name field không được chứa ký tự @ 
- Sử dụng `Address` object để format đúng

### Permission issues
```bash
# Fix storage permissions
chmod -R 775 storage
chmod -R 775 bootstrap/cache
```

## Testing

Để test chức năng email:

```bash
# Gửi test mail
php artisan tinker
Mail::raw('Test email', function($msg) { 
    $msg->to('test@example.com')->subject('Test'); 
});
```

## Production Deployment

1. Cấu hình queue với Supervisor hoặc systemd  
2. Sử dụng dịch vụ email chuyên nghiệp (SendGrid, Mailgun)
3. Monitor failed jobs và error logs
4. Backup cấu hình email quan trọng