# Hướng dẫn hoàn thiện trang Create

## ✅ Đã hoàn thành

File `resources/views/admin/retail_orders/create.blade.php` đã được tạo từ code mẫu của bạn.

## 🔧 Cần chỉnh sửa thêm

### 1. Thay đổi extends và route
Mở file `resources/views/admin/retail_orders/create.blade.php` và thay đổi:

**Dòng 1:** 
```blade
@extends('client.master')
```
Thành:
```blade
@extends('admin.layouts.master')
```

**Dòng 3:**
```blade
action="{{ route('orders.retail.storeXMYC') }}"
```
Thành:
```blade
action="{{ route('admin.retail_orders.store') }}"
```

### 2. Thêm CSS đen trắng đơn giản

Thêm sau dòng `@extends('admin.layouts.master')`:

```blade
@section('style')
<style>
    .order-create-container {
        background: #f5f5f5;
        padding: 20px 0;
    }
    
    .card {
        border: 1px solid #dee2e6;
        border-radius: 4px;
        background: white;
        margin-bottom: 20px;
    }
    
    .card-header {
        background: #212529 !important;
        color: white !important;
        padding: 12px 20px;
        border-bottom: 1px solid #dee2e6;
        font-weight: 600;
        font-size: 15px;
    }
    
    .btn-light {
        background: white;
        border: 1px solid #dee2e6;
        color: #212529;
    }
    
    .btn-light:hover {
        background: #f8f9fa;
    }
    
    .table-success {
        background: #f8f9fa !important;
        border-bottom: 2px solid #212529;
    }
    
    .btn-success {
        background: #212529 !important;
        border: none !important;
        color: white !important;
    }
    
    .btn-success:hover {
        background: #000 !important;
    }
    
    .form-control:focus, .form-select:focus {
        border-color: #212529;
        box-shadow: 0 0 0 0.2rem rgba(33, 37, 41, 0.1);
    }
    
    .modal-header {
        background: #212529 !important;
        color: white !important;
    }
    
    .btn-close {
        filter: invert(1);
    }
    
    .bg-success {
        background: #212529 !important;
    }
    
    .text-white {
        color: white !important;
    }
</style>
@endsection
```

### 3. Wrap content trong container

Thay đổi dòng `@section('content')` thành:

```blade
@section('content')
<div class="order-create-container">
```

Và thêm `</div>` trước `@endsection` cuối file.

### 4. Thay đổi các route khác

Tìm và thay đổi:
- `route('client.createProduct')` → `route('admin.products.store')` (hoặc route phù hợp)
- `route('admin.user.add')` → giữ nguyên (đã đúng)

### 5. Thêm method vào Controller

Trong `app/Http/Controllers/Admin/RetailOrderController.php`, thêm:

```php
public function create()
{
    $randomCode = $this->generateOrderCode();
    $customers = User::all();
    $products = Product::query()->where('status', 1)->get();
    $list_sales = User::query()->where('type_staff', '!=', 0)->get();
    $dataCategories = ProductCategory::pluck('name', 'id');
    
    return view('admin.retail_orders.create', compact(
        'randomCode', 
        'customers', 
        'products', 
        'list_sales', 
        'dataCategories'
    ));
}
```

### 6. Thêm route

Trong `routes/web.php`:

```php
Route::get('/admin/retail-orders/create', [RetailOrderController::class, 'create'])
    ->name('admin.retail_orders.create');
Route::post('/admin/retail-orders', [RetailOrderController::class, 'store'])
    ->name('admin.retail_orders.store');
```

## 📝 Lưu ý

- **Script được giữ nguyên 100%** - Không thay đổi logic
- **Chỉ thay đổi giao diện** - Màu đen trắng đơn giản
- **Routes cần được định nghĩa** - Đảm bảo các route tồn tại

## 🎨 Kết quả

Sau khi hoàn thành các bước trên, bạn sẽ có:
- ✅ Giao diện đen trắng đơn giản, chuyên nghiệp
- ✅ Giữ nguyên 100% logic và script
- ✅ Tương thích với admin layout
- ✅ Responsive và dễ sử dụng

## 🚀 Test

Truy cập: `/admin/retail-orders/create` để kiểm tra!