[FEAT] 優化後端帳號權限邏輯、開發商品管理功能及聯絡資訊 UI 改版

app/Http/Controllers/Admin/CompanyController.php

@@ -55,6 +55,7 @@ class CompanyController extends Controller
             'valid_until' => 'nullable|date',
             'status' => 'required|boolean',
             'note' => 'nullable|string',
+            'settings' => 'nullable|array',
             // 帳號相關欄位 (可選)
             'admin_username' => 'nullable|string|max:255|unique:users,username',
             'admin_password' => 'nullable|string|min:8',
@@ -62,6 +63,12 @@ class CompanyController extends Controller
             'admin_role' => 'nullable|string|exists:roles,name',
         ]);
 
+        // 確保 settings 中的值為布林值
+        if (isset($validated['settings'])) {
+            $validated['settings']['enable_material_code'] = filter_var($validated['settings']['enable_material_code'] ?? false, FILTER_VALIDATE_BOOLEAN);
+            $validated['settings']['enable_points'] = filter_var($validated['settings']['enable_points'] ?? false, FILTER_VALIDATE_BOOLEAN);
+        }
+
         DB::transaction(function () use ($validated) {
             $company = Company::create([
                 'name' => $validated['name'],
@@ -73,6 +80,7 @@ class CompanyController extends Controller
                 'valid_until' => $validated['valid_until'] ?? null,
                 'status' => $validated['status'],
                 'note' => $validated['note'] ?? null,
+                'settings' => $validated['settings'] ?? [],
             ]);
 
             // 如果有填寫帳號資訊，則建立管理員帳號
@@ -130,8 +138,15 @@ class CompanyController extends Controller
             'valid_until' => 'nullable|date',
             'status' => 'required|boolean',
             'note' => 'nullable|string',
+            'settings' => 'nullable|array',
         ]);
 
+        // 確保 settings 中的值為布林值，避免 JSON 存儲為字串導致前端判斷錯誤
+        if (isset($validated['settings'])) {
+            $validated['settings']['enable_material_code'] = filter_var($validated['settings']['enable_material_code'] ?? false, FILTER_VALIDATE_BOOLEAN);
+            $validated['settings']['enable_points'] = filter_var($validated['settings']['enable_points'] ?? false, FILTER_VALIDATE_BOOLEAN);
+        }
+
         $company->update($validated);
         
         // 分支邏輯：若停用客戶，連帶停用其所有帳號
@@ -168,6 +183,11 @@ class CompanyController extends Controller
             return redirect()->back()->with('error', __('Cannot delete company with active accounts.'));
         }
 
+        // 為了解決軟刪除導致的唯一索引佔用問題，刪除前先重新命名唯一欄位
+        $timestamp = now()->getTimestamp();
+        $company->code = $company->code . '.deleted.' . $timestamp;
+        $company->save();
+
         $company->delete();
 
         return redirect()->back()->with('success', __('Customer deleted successfully.'));

app/Http/Controllers/Admin/PermissionController.php

@@ -377,8 +377,8 @@ class PermissionController extends Controller
     {
         $user = \App\Models\System\User::findOrFail($id);
 
-        if ($user->hasRole('super-admin')) {
-            return redirect()->back()->with('error', __('System super admin accounts cannot be modified via this interface.'));
+        if ($user->hasRole('super-admin') && !auth()->user()->hasRole('super-admin')) {
+            return redirect()->back()->with('error', __('System super admin accounts can only be modified by other super admins.'));
         }
 
         $validated = $request->validate([
@@ -485,8 +485,8 @@ class PermissionController extends Controller
     {
         $user = \App\Models\System\User::findOrFail($id);
         
-        if ($user->hasRole('super-admin')) {
-            return redirect()->back()->with('error', __('System super admin accounts cannot be deleted.'));
+        if ($user->hasRole('super-admin') && !auth()->user()->hasRole('super-admin')) {
+            return redirect()->back()->with('error', __('System super admin accounts can only be deleted by other super admins.'));
         }
 
         if ($user->id === auth()->id()) {
@@ -508,9 +508,9 @@ class PermissionController extends Controller
     {
         $user = \App\Models\System\User::findOrFail($id);
         
-        // 禁止切換 Super Admin 狀態
-        if ($user->hasRole('super-admin')) {
-            return back()->with('error', __('Cannot change Super Admin status.'));
+        // 非超級管理員禁止切換 Super Admin 狀態
+        if ($user->hasRole('super-admin') && !auth()->user()->hasRole('super-admin')) {
+            return back()->with('error', __('Only Super Admins can change other Super Admin status.'));
         }
 
         $user->status = $user->status ? 0 : 1;

app/Http/Controllers/Admin/ProductController.php

@@ -6,22 +6,21 @@ use App\Http\Controllers\Controller;
 use App\Models\Product\Product;
 use App\Models\Product\ProductCategory;
 use App\Models\System\Company;
+use App\Models\System\Translation;
+use App\Traits\ImageHandler;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Storage;
 use Illuminate\Support\Str;
 
 class ProductController extends Controller
 {
+    use \App\Traits\ImageHandler;
     public function index(Request $request)
     {
         $user = auth()->user();
         $query = Product::with(['category', 'translations', 'company']);
         
-        // 租戶隔離由 Global Scope (TenantScoped) 處理，但系統管理員可額外篩選
-        if ($user->isSystemAdmin() && $request->filled('company_id')) {
-            $query->where('company_id', $request->company_id);
-        }
-
         // 搜尋
         if ($request->filled('search')) {
             $search = $request->search;
@@ -38,11 +37,23 @@ class ProductController extends Controller
         }
 
         $per_page = $request->input('per_page', 10);
+        
+        $companyId = $user->company_id;
+        if ($user->isSystemAdmin()) {
+            if ($request->filled('company_id')) {
+                $companyId = $request->company_id;
+                $query->where('company_id', $companyId);
+            }
+        }
+
         $products = $query->latest()->paginate($per_page)->withQueryString();
         $categories = ProductCategory::all();
         $companies = $user->isSystemAdmin() ? Company::all() : collect();
         
-        $companySettings = $user->company ? ($user->company->settings ?? []) : [];
+        // 系統管理員在過濾特定公司時，應顯示該公司的功能開關 (如物料代碼、點數規則)
+        $selectedCompany = $companyId ? Company::find($companyId) : $user->company;
+        $companySettings = $selectedCompany ? ($selectedCompany->settings ?? []) : [];
+        
         $routeName = 'admin.data-config.products.index';
 
         return view('admin.products.index', [
@@ -54,6 +65,42 @@ class ProductController extends Controller
         ]);
     }
 
+    public function create(Request $request)
+    {
+        $user = auth()->user();
+        $categories = ProductCategory::all();
+        $companies = $user->isSystemAdmin() ? Company::all() : collect();
+
+        // If system admin, check if company_id is provided in URL to get settings
+        $companyId = $request->query('company_id') ?? $user->company_id;
+        $selectedCompany = $companyId ? Company::find($companyId) : $user->company;
+        $companySettings = $selectedCompany ? ($selectedCompany->settings ?? []) : [];
+
+        return view('admin.products.create', [
+            'categories' => $categories,
+            'companies' => $companies,
+            'companySettings' => $companySettings,
+        ]);
+    }
+
+    public function edit($id)
+    {
+        $user = auth()->user();
+        $product = Product::with(['translations', 'company'])->findOrFail($id);
+        $categories = ProductCategory::all();
+        $companies = $user->isSystemAdmin() ? Company::all() : collect();
+        
+        // Use the product's company settings for editing
+        $companySettings = $product->company ? ($product->company->settings ?? []) : [];
+
+        return view('admin.products.edit', [
+            'product' => $product,
+            'categories' => $categories,
+            'companies' => $companies,
+            'companySettings' => $companySettings,
+        ]);
+    }
+
     public function store(Request $request)
     {
         $validated = $request->validate([
@@ -71,13 +118,18 @@ class ProductController extends Controller
             'member_price' => 'required|numeric|min:0',
             'metadata' => 'nullable|array',
             'is_active' => 'nullable|boolean',
+            'company_id' => 'nullable|exists:companies,id',
+            'image' => 'nullable|image|mimes:jpeg,png,jpg,gif|max:2048',
         ]);
 
         try {
             DB::beginTransaction();
 
-            $dictKey = (string) Str::uuid();
-            $company_id = auth()->user()->company_id;
+            $dictKey = \Illuminate\Support\Str::uuid()->toString();
+            // Determine company_id: prioritized from request (for sys admin) then from user
+            $company_id = (auth()->user()->isSystemAdmin() && $request->filled('company_id')) 
+                ? $request->company_id 
+                : auth()->user()->company_id;
 
             // Store translations
             foreach ($request->names as $locale => $name) {
@@ -86,16 +138,25 @@ class ProductController extends Controller
                     'group' => 'product',
                     'key' => $dictKey,
                     'locale' => $locale,
-                    'text' => $name,
+                    'value' => $name,
                     'company_id' => $company_id,
                 ]);
             }
 
+
+
+            $imageUrl = null;
+            if ($request->hasFile('image')) {
+                $path = $this->storeAsWebp($request->file('image'), 'products');
+                $imageUrl = Storage::url($path);
+            }
+
             $product = Product::create([
                 'company_id' => $company_id,
                 'category_id' => $request->category_id,
-                'name' => $request->names['zh_TW'], // Default name uses zh_TW
+                'name' => $request->names['zh_TW'] ?? (collect($request->names)->first() ?? 'Untitled'), // Fallback if zh_TW is missing
                 'name_dictionary_key' => $dictKey,
+                'image_url' => $imageUrl,
                 'barcode' => $request->barcode,
                 'spec' => $request->spec,
                 'manufacturer' => $request->manufacturer,
@@ -118,14 +179,14 @@ class ProductController extends Controller
                 ]);
             }
 
-            return redirect()->back()->with('success', __('Product created successfully'));
+            return redirect()->route('admin.data-config.products.index')->with('success', __('Product created successfully'));
 
         } catch (\Exception $e) {
             DB::rollBack();
             if ($request->wantsJson()) {
                 return response()->json(['success' => false, 'message' => $e->getMessage()], 500);
             }
-            return redirect()->back()->with('error', $e->getMessage());
+            return redirect()->back()->with('error', $e->getMessage())->withInput();
         }
     }
 
@@ -148,13 +209,15 @@ class ProductController extends Controller
             'member_price' => 'required|numeric|min:0',
             'metadata' => 'nullable|array',
             'is_active' => 'nullable|boolean',
+            'image' => 'nullable|image|mimes:jpeg,png,jpg,gif|max:2048',
+            'remove_image' => 'nullable|boolean',
         ]);
 
         try {
             DB::beginTransaction();
 
-            $dictKey = $product->name_dictionary_key;
-            $company_id = auth()->user()->company_id;
+            $dictKey = $product->name_dictionary_key ?: \Illuminate\Support\Str::uuid()->toString();
+            $company_id = $product->company_id;
 
             // Update or Create translations
             foreach ($request->names as $locale => $name) {
@@ -174,15 +237,15 @@ class ProductController extends Controller
                         'locale' => $locale,
                     ],
                     [
-                        'text' => $name,
+                        'value' => $name,
                         'company_id' => $company_id,
                     ]
                 );
             }
 
-            $product->update([
+            $data = [
                 'category_id' => $request->category_id,
-                'name' => $request->names['zh_TW'],
+                'name' => $request->names['zh_TW'] ?? ($product->name ?? 'Untitled'),
                 'barcode' => $request->barcode,
                 'spec' => $request->spec,
                 'manufacturer' => $request->manufacturer,
@@ -193,7 +256,25 @@ class ProductController extends Controller
                 'member_price' => $request->member_price,
                 'metadata' => $request->metadata ?? [],
                 'is_active' => $request->boolean('is_active', true),
-            ]);
+            ];
+
+            if ($request->hasFile('image')) {
+                // Delete old image
+                if ($product->image_url) {
+                    $oldPath = str_replace('/storage/', '', $product->image_url);
+                    Storage::disk('public')->delete($oldPath);
+                }
+                $path = $this->storeAsWebp($request->file('image'), 'products');
+                $data['image_url'] = Storage::url($path);
+            } elseif ($request->boolean('remove_image')) {
+                if ($product->image_url) {
+                    $oldPath = str_replace('/storage/', '', $product->image_url);
+                    Storage::disk('public')->delete($oldPath);
+                }
+                $data['image_url'] = null;
+            }
+
+            $product->update($data);
 
             DB::commit();
 
@@ -205,14 +286,14 @@ class ProductController extends Controller
                 ]);
             }
 
-            return redirect()->back()->with('success', __('Product updated successfully'));
+            return redirect()->route('admin.data-config.products.index')->with('success', __('Product updated successfully'));
 
         } catch (\Exception $e) {
             DB::rollBack();
             if ($request->wantsJson()) {
                 return response()->json(['success' => false, 'message' => $e->getMessage()], 500);
             }
-            return redirect()->back()->with('error', $e->getMessage());
+            return redirect()->back()->with('error', $e->getMessage())->withInput();
         }
     }
 
@@ -226,6 +307,12 @@ class ProductController extends Controller
                 Translation::where('key', $product->name_dictionary_key)->delete();
             }
 
+            // Delete image
+            if ($product->image_url) {
+                $oldPath = str_replace('/storage/', '', $product->image_url);
+                Storage::disk('public')->delete($oldPath);
+            }
+
             $product->delete();
 
             return redirect()->back()->with('success', __('Product deleted successfully'));

app/Models/System/Translation.php

@@ -7,9 +7,10 @@ use Illuminate\Database\Eloquent\Model;
 
 class Translation extends Model
 {
-    use HasFactory;
+    use HasFactory, \App\Traits\TenantScoped;
 
     protected $fillable = [
+        'company_id',
         'group',
         'key',
         'locale',

database/factories/System/CompanyFactory.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace Database\Factories\System;
+
+use App\Models\System\Company;
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+class CompanyFactory extends Factory
+{
+    protected $model = Company::class;
+
+    public function definition(): array
+    {
+        return [
+            'name' => $this->faker->company,
+            'code' => $this->faker->unique()->bothify('COMP###'),
+            'status' => 1,
+            'settings' => [
+                'enable_material_code' => false,
+                'enable_points' => false,
+            ],
+        ];
+    }
+}

database/migrations/2026_03_27_090740_increase_company_code_length.php

@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('companies', function (Blueprint $table) {
+            $table->string('code', 100)->change();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('companies', function (Blueprint $table) {
+            $table->string('code', 20)->change();
+        });
+    }
+};

database/migrations/2026_03_27_111530_add_company_id_to_translations_table.php

@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('translations', function (Blueprint $table) {
+            $table->unsignedBigInteger('company_id')->nullable()->after('id')->index()->comment('所屬公司 ID');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('translations', function (Blueprint $table) {
+            $table->dropColumn('company_id');
+        });
+    }
+};

database/migrations/2026_03_27_114500_rename_image_to_image_url_in_products_table.php

@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('products', function (Blueprint $table) {
+            $table->renameColumn('image', 'image_url');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('products', function (Blueprint $table) {
+            $table->renameColumn('image_url', 'image');
+        });
+    }
+};

lang/en.json

@@ -72,6 +72,7 @@
     "Badge Settings": "Badge Settings",
     "Basic Information": "Basic Information",
     "Basic Settings": "Basic Settings",
+    "Basic Specifications": "Basic Specifications",
     "Batch No": "Batch No",
     "Belongs To": "Belongs To",
     "Belongs To Company": "Belongs To Company",
@@ -110,6 +111,7 @@
     "Connecting...": "Connecting...",
     "Connectivity Status": "Connectivity Status",
     "Connectivity vs Sales Correlation": "連線狀態與銷售關聯分析",
+    "Contact Info": "Contact Info",
     "Contact & Details": "Contact & Details",
     "Contact Email": "Contact Email",
     "Contact Name": "Contact Name",
@@ -140,6 +142,7 @@
     "Default Not Donate": "Default Not Donate",
     "Define and manage security roles and permissions.": "Define and manage security roles and permissions.",
     "Define new third-party payment parameters": "Define new third-party payment parameters",
+    "Feature Toggles": "Feature Toggles",
     "Delete": "Delete",
     "Delete Account": "Delete Account",
     "Delete Permanently": "Delete Permanently",
@@ -212,6 +215,7 @@
     "Heating End Time": "Heating End Time",
     "Heating Range": "Heating Range",
     "Heating Start Time": "Heating Start Time",
+    "Channel Limits": "Channel Limits",
     "Helper": "Helper",
     "Home Page": "Home Page",
     "Machine Utilization": "Machine Utilization",
@@ -414,6 +418,7 @@
     "Payment Configuration updated successfully.": "Payment Configuration updated successfully.",
     "Payment Selection": "Payment Selection",
     "Pending": "Pending",
+    "Pricing Information": "Pricing Information",
     "Performance": "效能 (Performance)",
     "Permanent": "Permanent",
     "Permanently Delete Account": "Permanently Delete Account",
@@ -596,6 +601,7 @@
     "Update Password": "Update Password",
     "Update existing role and permissions.": "Update existing role and permissions.",
     "Update your account's profile information and email address.": "Update your account's profile information and email address.",
+    "Validation Error": "Validation Error",
     "Upload New Images": "Upload New Images",
     "Uploading new images will replace all existing images.": "Uploading new images will replace all existing images.",
     "User": "User",
@@ -719,7 +725,7 @@
     "Name in Japanese": "Name in Japanese",
     "Track Limit": "Track Limit",
     "Spring Limit": "Spring Limit",
-    "Inventory Limits Configuration": "Inventory Limits Configuration",
+    "Channel Limits Configuration": "Channel Limits Configuration",
     "Manage your catalog, prices, and multilingual details.": "Manage your catalog, prices, and multilingual details.",
     "Product created successfully": "Product created successfully",
     "Product updated successfully": "Product updated successfully",
@@ -738,5 +744,14 @@
     "Update Product": "Update Product",
     "Edit Product": "Edit Product",
     "Create Product": "Create Product",
-    "Are you sure you want to delete this product?": "Are you sure you want to delete this product?"
+    "Are you sure you want to delete this product?": "Are you sure you want to delete this product?",
+    "Feature Settings": "Feature Settings",
+    "Enable Material Code": "Enable Material Code",
+    "Show material code field in products": "Show material code field in products",
+    "Enable Points": "Enable Points",
+    "Show points rules in products": "Show points rules in products",
+    "Customer Details": "Customer Details",
+    "Current Status": "Current Status",
+    "Product Image": "Product Image",
+    "PNG, JPG up to 2MB": "PNG, JPG up to 2MB"
 }

lang/ja.json

@@ -72,6 +72,7 @@
     "Badge Settings": "バッジ設定",
     "Basic Information": "基本情報",
     "Basic Settings": "基本設定",
+    "Basic Specifications": "基本仕様",
     "Batch No": "批號",
     "Belongs To": "所属",
     "Belongs To Company": "所属会社",
@@ -110,6 +111,7 @@
     "Connecting...": "接続中...",
     "Connectivity Status": "接続ステータス概況",
     "Connectivity vs Sales Correlation": "連線狀態與銷售關聯分析",
+    "Contact Info": "連絡先情報",
     "Contact & Details": "連絡先と詳細",
     "Contact Email": "連絡先メールアドレス",
     "Contact Name": "連絡担当者名",
@@ -140,6 +142,7 @@
     "Default Not Donate": "デフォルト寄付しない",
     "Define and manage security roles and permissions.": "システムのセキュリティロールと権限を定義および管理します。",
     "Define new third-party payment parameters": "新しいサードパーティ決済パラメータを定義",
+    "Feature Toggles": "機能トグル",
     "Delete": "削除",
     "Delete Account": "アカウントの削除",
     "Delete Permanently": "完全に削除",
@@ -212,6 +215,7 @@
     "Heating End Time": "加熱終了時間",
     "Heating Range": "加熱時間帯",
     "Heating Start Time": "加熱開始時間",
+    "Channel Limits": "スロット上限",
     "Helper": "ヘルパー",
     "Home Page": "主画面",
     "Machine Utilization": "機台稼働率",
@@ -415,6 +419,7 @@
     "Payment Configuration updated successfully.": "決済設定が正常に更新されました。",
     "Payment Selection": "決済選択",
     "Pending": "保留中",
+    "Pricing Information": "価格情報",
     "Performance": "效能 (Performance)",
     "Permanent": "永久認可",
     "Permanently Delete Account": "アカウントを永久に削除",
@@ -483,7 +488,10 @@
     "Role name already exists in this company.": "この会社には同じ名前のロールが既に存在します。",
     "Role not found.": "ロールが見つかりませんでした。",
     "Role updated successfully.": "ロールが正常に更新されました。",
-    "Roles": "ロール權限",
+    "Points Rule": "ポイントルール",
+    "Points Settings": "ポイント設定",
+    "Points toggle": "ポイント切り替え",
+    "Roles": "ロール権限",
     "Roles scoped to specific customer companies.": "適用於各個客戶單位的特定角色。",
     "Running Status": "稼働状況",
     "SYSTEM": "システムレベル",
@@ -561,7 +569,8 @@
     "Systems Initializing": "システム初期化中",
     "TapPay Integration": "TapPay 統合決済",
     "TapPay Integration Settings Description": "TapPay 決済連携設定",
-    "Target": "目標",
+    "Statistics": "統計データ",
+    "Target": "ターゲット",
     "Tax ID (Optional)": "納税者番号 (任意)",
     "Temperature": "温度",
     "TermID": "端末ID (TermID)",
@@ -597,6 +606,7 @@
     "Update Password": "パスワードの更新",
     "Update existing role and permissions.": "既存のロールと権限を更新します。",
     "Update your account's profile information and email address.": "アカウントの氏名、電話番号、メールアドレスを更新します。",
+    "Validation Error": "検証エラー",
     "Upload New Images": "新しい写真をアップロード",
     "Uploading new images will replace all existing images.": "新しい写真をアップロードすると、既存のすべての写真が置き換えられます。",
     "User": "一般ユーザー",
@@ -720,7 +730,7 @@
     "Name in Japanese": "日本語名",
     "Track Limit": "ベルトコンベア上限",
     "Spring Limit": "スプリング上限",
-    "Inventory Limits Configuration": "在庫上限設定",
+    "Channel Limits Configuration": "スロット上限設定",
     "Manage your catalog, prices, and multilingual details.": "カタログ、価格、多言語詳細を管理します。",
     "Product created successfully": "商品が正常に作成されました",
     "Product updated successfully": "商品が正常に更新されました",
@@ -739,5 +749,12 @@
     "Update Product": "商品を更新",
     "Edit Product": "商品を編集",
     "Create Product": "商品を作成",
-    "Are you sure you want to delete this product?": "この商品を削除してもよろしいですか？"
+    "Are you sure you want to delete this product?": "この商品を削除してもよろしいですか？",
+    "Feature Settings": "機能設定",
+    "Enable Material Code": "資材コードを有効化",
+    "Show material code field in products": "商品情報に資材コードフィールドを表示する",
+    "Enable Points": "ポイントルールを有効化",
+    "Show points rules in products": "商品情報にポイントルール相關フィールドを表示する",
+    "Product Image": "商品画像",
+    "PNG, JPG up to 2MB": "PNG, JPG (最大 2MB)"
 }

lang/zh_TW.json

@@ -72,6 +72,7 @@
     "Badge Settings": "識別證",
     "Basic Information": "基本資訊",
     "Basic Settings": "基本設定",
+    "Basic Specifications": "基本規格",
     "Batch No": "批號",
     "Belongs To": "所屬單位",
     "Belongs To Company": "所屬單位",
@@ -110,6 +111,7 @@
     "Connecting...": "連線中",
     "Connectivity Status": "連線狀態概況",
     "Connectivity vs Sales Correlation": "連線狀態與銷售關聯分析",
+    "Contact Info": "聯絡資訊",
     "Contact & Details": "聯絡資訊與詳情",
     "Contact Email": "聯絡人信箱",
     "Contact Name": "聯絡人姓名",
@@ -140,6 +142,7 @@
     "Default Not Donate": "預設不捐贈",
     "Define and manage security roles and permissions.": "定義並管理系統安全角色與權限。",
     "Define new third-party payment parameters": "定義新的第三方支付參數",
+    "Feature Toggles": "功能開關",
     "Delete": "刪除",
     "Delete Account": "刪除帳號",
     "Delete Permanently": "確認永久刪除資料",
@@ -215,6 +218,7 @@
     "Heating End Time": "關閉-加熱時間",
     "Heating Range": "加熱時段",
     "Heating Start Time": "開啟-加熱時間",
+    "Channel Limits": "貨道上限",
     "Helper": "小幫手",
     "Home Page": "主頁面",
     "Info": "一般",
@@ -405,6 +409,7 @@
     "Payment Configuration updated successfully.": "金流設定已成功更新。",
     "Payment Selection": "付款選擇",
     "Pending": "待核效期",
+    "Pricing Information": "價格資訊",
     "Performance": "效能 (Performance)",
     "Permanent": "永久授權",
     "Permanently Delete Account": "永久刪除帳號",
@@ -476,6 +481,9 @@
     "Role name already exists in this company.": "該公司已存在相同名稱的角色。",
     "Role not found.": "角色不存在。",
     "Role updated successfully.": "角色已成功更新。",
+    "Points Rule": "點數規則",
+    "Points Settings": "點數設定",
+    "Points toggle": "點數開關",
     "Roles": "角色權限",
     "Roles scoped to specific customer companies.": "適用於各個客戶單位的特定角色。",
     "Running Status": "運行狀態",
@@ -557,7 +565,9 @@
     "System": "系統",
     "TapPay Integration": "TapPay 支付串接",
     "TapPay Integration Settings Description": "喬睿科技支付串接設定",
+    "Statistics": "數據統計",
     "Target": "目標",
+    "Tax ID": "統一編號",
     "Tax ID (Optional)": "統一編號 (選填)",
     "Temperature": "溫度",
     "TermID": "終端代號 (TermID)",
@@ -594,6 +604,7 @@
     "Update Password": "更改密碼",
     "Update existing role and permissions.": "更新現有角色與權限設定。",
     "Update your account's profile information and email address.": "更新您的帳號姓名、手機號碼與電子郵件地址。",
+    "Validation Error": "驗證錯誤",
     "Upload New Images": "上傳新照片",
     "Uploading new images will replace all existing images.": "上傳新照片將會取代所有現有照片。",
     "User": "一般用戶",
@@ -719,7 +730,7 @@
     "Name in Japanese": "日文名稱",
     "Track Limit": "履帶貨道上限",
     "Spring Limit": "彈簧貨道上限",
-    "Inventory Limits Configuration": "庫存上限配置",
+    "Channel Limits Configuration": "貨道上限配置",
     "Manage your catalog, prices, and multilingual details.": "管理您的商品型錄、價格及多語系詳情。",
     "Product created successfully": "商品已成功建立",
     "Product updated successfully": "商品已成功更新",
@@ -740,7 +751,7 @@
     "Edit Product": "編輯商品",
     "Create Product": "建立商品",
     "Are you sure you want to delete this product?": "您確定要刪除此商品嗎？",
-    "Limits (Track/Spring)": "庫存上限 (履帶/彈簧)",
+    "Channel Limits (Track/Spring)": "貨道上限 (履帶/彈簧)",
     "Member": "會員價",
     "Search products...": "搜尋商品...",
     "Product Info": "商品資訊",
@@ -753,5 +764,14 @@
     "Traditional Chinese": "繁體中文",
     "English": "英文",
     "Japanese": "日文",
-    "Select Category": "選擇類別"
+    "Select Category": "選擇類別",
+    "Feature Settings": "功能設定",
+    "Enable Material Code": "啟用物料編號",
+    "Show material code field in products": "在商品資料中顯示物料編號欄位",
+    "Enable Points": "啟用點數規則",
+    "Show points rules in products": "在商品資料中顯示點數規則相關欄位",
+    "Customer Details": "客戶詳情",
+    "Current Status": "當前狀態",
+    "Product Image": "商品圖片",
+    "PNG, JPG up to 2MB": "支援 PNG, JPG (最大 2MB)"
 }

resources/views/admin/basic-settings/machines/index.blade.php

@@ -297,8 +297,8 @@
                 class="p-2 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 dark:hover:bg-cyan-500/10 border border-transparent hover:border-cyan-500/20 transition-all inline-flex group/btn"
                 title="{{ __('View Details') }}">
                 <svg class="w-4 h-4 stroke-[2.5]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round"
-                        d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                 </svg>
             </button>
         </td>
@@ -870,10 +870,10 @@
                 <div
                     class="h-full flex flex-col bg-white dark:bg-slate-900 shadow-2xl border-l border-slate-100 dark:border-slate-800">
                     <div
-                        class="px-6 py-4 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between">
+                        class="px-6 py-3 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between">
                         <div>
                             <h2 class="text-xl font-black text-slate-800 dark:text-white">{{ __('Parameters') }}</h2>
-                            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em] mt-1"
+                            <p class="text-xs font-bold text-slate-400 uppercase tracking-[0.2em] mt-1"
                                 x-text="currentMachine?.name"></p>
                         </div>
                         <button @click="showDetailDrawer = false"
@@ -884,10 +884,10 @@
                             </svg>
                         </button>
                     </div>
-                    <div class="flex-1 overflow-y-auto px-6 py-4 space-y-6 custom-scrollbar">
+                    <div class="flex-1 overflow-y-auto px-6 pt-1 pb-6 space-y-6 custom-scrollbar">
                         <template x-if="currentMachine?.image_urls && currentMachine.image_urls.length > 0">
                             <section class="space-y-4">
-                                <h3 class="text-[11px] font-black text-indigo-500 uppercase tracking-[0.3em]">{{
+                                <h3 class="text-xs font-black text-indigo-500 uppercase tracking-[0.3em]">{{
                                     __('Machine Images') }}</h3>
                                 <div class="grid grid-cols-2 gap-3">
                                     <template x-for="(url, index) in currentMachine.image_urls" :key="index">
@@ -906,28 +906,28 @@
                             </section>
                         </template>
                         <section class="space-y-6">
-                            <h3 class="text-[11px] font-black text-cyan-500 uppercase tracking-[0.3em]">{{ __('Hardware
+                            <h3 class="text-xs font-black text-cyan-500 uppercase tracking-[0.3em]">{{ __('Hardware
                                 & Network') }}</h3>
                             <div class="grid grid-cols-1 gap-4">
                                 <div
                                     class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
                                     <span
-                                        class="text-[10px] font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{
+                                        class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{
                                         __('Serial & Version') }}</span>
                                     <div class="flex items-center justify-between">
-                                        <div class="text-xs font-mono font-bold text-slate-700 dark:text-slate-300"
+                                        <div class="text-sm font-mono font-bold text-slate-700 dark:text-slate-300"
                                             x-text="currentMachine?.serial_no"></div>
                                         <span
-                                            class="px-2 py-0.5 rounded-md bg-white dark:bg-slate-900 text-[9px] font-black text-slate-500 border border-slate-100 dark:border-slate-800"
+                                            class="px-2 py-0.5 rounded-md bg-white dark:bg-slate-900 text-[10px] font-black text-slate-500 border border-slate-100 dark:border-slate-800"
                                             x-text="'v' + (currentMachine?.firmware_version || '1.0')"></span>
                                     </div>
                                 </div>
                                 <div
                                     class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
                                     <span
-                                        class="text-[10px] font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{
+                                        class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{
                                         __('Heartbeat') }}</span>
-                                    <div class="text-xs font-bold text-slate-700 dark:text-slate-300"
+                                    <div class="text-sm font-bold text-slate-700 dark:text-slate-300"
                                         x-text="currentMachine?.last_heartbeat_at ? new Date(currentMachine.last_heartbeat_at).toLocaleString() : '--'">
                                     </div>
                                 </div>
@@ -936,24 +936,24 @@
 
                         <!-- Operational Settings -->
                         <section class="space-y-6">
-                            <h3 class="text-[11px] font-black text-amber-500 uppercase tracking-[0.3em]">{{
+                            <h3 class="text-xs font-black text-amber-500 uppercase tracking-[0.3em]">{{
                                 __('Operations') }}</h3>
                             <div class="space-y-4">
                                 <div
                                     class="flex items-center justify-between p-2 border-b border-slate-50 dark:border-white/5">
-                                    <span class="text-xs font-bold text-slate-500">{{ __('Heating Range') }}</span>
-                                    <span class="text-xs font-black text-slate-700 dark:text-slate-300"
+                                    <span class="text-sm font-bold text-slate-500">{{ __('Heating Range') }}</span>
+                                    <span class="text-sm font-black text-slate-700 dark:text-slate-300"
                                         x-text="(currentMachine?.heating_start_time ? currentMachine.heating_start_time.substring(0, 5) : '00:00') + ' ~ ' + (currentMachine?.heating_end_time ? currentMachine.heating_end_time.substring(0, 5) : '00:00')"></span>
                                 </div>
                                 <div
                                     class="flex items-center justify-between p-2 border-b border-slate-50 dark:border-white/5">
-                                    <span class="text-xs font-bold text-slate-500">{{ __('Card Reader No') }}</span>
-                                    <span class="text-xs font-black text-slate-700 dark:text-slate-300"
+                                    <span class="text-sm font-bold text-slate-500">{{ __('Card Reader No') }}</span>
+                                    <span class="text-sm font-black text-slate-700 dark:text-slate-300"
                                         x-text="currentMachine?.card_reader_no || '--'"></span>
                                 </div>
                                 <div class="flex flex-col gap-3 p-3 mt-1 bg-slate-50 dark:bg-slate-800/40 rounded-xl border border-slate-100 dark:border-slate-700/50 relative">
                                     <div class="flex items-center justify-between">
-                                        <span class="text-[11px] font-black text-slate-500 uppercase tracking-widest">{{ __('API Token') }}</span>
+                                        <span class="text-xs font-black text-slate-500 uppercase tracking-widest">{{ __('API Token') }}</span>
                                         <div class="flex items-center gap-1">
                                             <template x-if="currentMachine?.api_token">
                                                 <div class="flex items-center gap-1">
@@ -971,7 +971,7 @@
                                                 </div>
                                             </template>
                                             <button @click="regenerateToken()" :disabled="loadingRegenerate"
-                                                class="ml-2 px-2.5 py-1.5 rounded-lg bg-rose-50 dark:bg-rose-500/10 text-rose-500 hover:bg-rose-100 dark:hover:bg-rose-500/20 text-[10px] font-black uppercase tracking-widest transition-all disabled:opacity-50 flex items-center gap-1.5 border border-rose-100 dark:border-rose-500/20"
+                                                class="ml-2 px-2.5 py-1.5 rounded-lg bg-rose-50 dark:bg-rose-500/10 text-rose-500 hover:bg-rose-100 dark:hover:bg-rose-500/20 text-xs font-black uppercase tracking-widest transition-all disabled:opacity-50 flex items-center gap-1.5 border border-rose-100 dark:border-rose-500/20"
                                                 title="{{ __('Regenerate') }}">
                                                 <svg x-show="loadingRegenerate" class="animate-spin w-3 h-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                                                 <svg x-show="!loadingRegenerate" class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
@@ -980,8 +980,8 @@
                                         </div>
                                     </div>
                                     <div class="bg-white dark:bg-slate-900/50 rounded-lg border border-slate-200 dark:border-slate-700/50 p-2.5 overflow-x-auto custom-scrollbar">
-                                        <span class="text-xs font-mono font-bold tracking-[0.1em] text-cyan-600 dark:text-cyan-400 select-all block whitespace-nowrap min-w-full"
-                                            x-text="currentMachine?.api_token ? (showApiToken ? currentMachine.api_token : '•'.repeat(40)) : '{{ __('None') }}'"></span>
+                                        <span class="text-sm font-mono font-bold tracking-[0.1em] text-cyan-600 dark:text-cyan-400 select-all block whitespace-nowrap min-w-full"
+                                            x-text="currentMachine?.api_token ? (showApiToken ? currentMachine.api_token : '•'.repeat(16)) : '{{ __('None') }}'"></span>
                                     </div>
                                 </div>
                             </div>
@@ -989,11 +989,11 @@
 
                         <!-- Location -->
                         <section class="space-y-4">
-                            <h3 class="text-[11px] font-black text-emerald-500 uppercase tracking-[0.3em]">{{
+                            <h3 class="text-xs font-black text-emerald-500 uppercase tracking-[0.3em]">{{
                                 __('Location') }}</h3>
                             <div
                                 class="p-4 bg-emerald-50/30 dark:bg-emerald-500/5 rounded-2xl border border-emerald-100/50 dark:border-emerald-500/10">
-                                <p class="text-xs text-emerald-700 dark:text-emerald-400 leading-relaxed font-bold"
+                                <p class="text-sm text-emerald-700 dark:text-emerald-400 leading-relaxed font-bold"
                                     x-text="currentMachine?.location || '{{ __('No location set') }}'"></p>
                             </div>
                         </section>

resources/views/admin/companies/index.blade.php

@@ -14,16 +14,30 @@
         contact_email: '',
         valid_until: '',
         status: 1,
-        note: ''
+        note: '',
+        settings: {
+            enable_material_code: false,
+            enable_points: false
+        }
     },
     openCreateModal() {
         this.editing = false;
-        this.currentCompany = { id: '', name: '', code: '', tax_id: '', contact_name: '', contact_phone: '', contact_email: '', valid_until: '', status: 1, note: '' };
+        this.currentCompany = { 
+            id: '', name: '', code: '', tax_id: '', contact_name: '', contact_phone: '', 
+            contact_email: '', valid_until: '', status: 1, note: '',
+            settings: { enable_material_code: false, enable_points: false }
+        };
         this.showModal = true;
     },
     openEditModal(company) {
         this.editing = true;
-        this.currentCompany = { ...company };
+        this.currentCompany = { 
+            ...company,
+            settings: {
+                enable_material_code: company.settings?.enable_material_code || false,
+                enable_points: company.settings?.enable_points || false
+            }
+        };
         this.originalStatus = company.status;
         this.showModal = true;
     },
@@ -33,6 +47,23 @@
     originalStatus: 1,
     toggleFormAction: '',
     statusToggleSource: 'edit',
+    showDetail: false,
+    detailCompany: {
+        id: '', name: '', code: '', tax_id: '', contact_name: '', contact_phone: '', 
+        contact_email: '', valid_until: '', status: 1, note: '',
+        settings: { enable_material_code: false, enable_points: false },
+        users_count: 0, machines_count: 0
+    },
+    openDetailSidebar(company) {
+        this.detailCompany = { 
+            ...company,
+            settings: {
+                enable_material_code: company.settings?.enable_material_code || false,
+                enable_points: company.settings?.enable_points || false
+            }
+        };
+        this.showDetail = true;
+    },
     submitConfirmedForm() {
         if (this.statusToggleSource === 'list') {
             this.$refs.statusToggleForm.submit();
@@ -201,7 +232,7 @@
                                     class="p-2 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-emerald-500 hover:bg-emerald-500/5 transition-all border border-transparent hover:border-emerald-500/20"
                                     title="{{ __('Enable') }}">
                                     <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347c-.75.412-1.667-.13-1.667-.986V5.653z" />
+                                        <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 Naz 010 1.971l-11.54 6.347c-.75.412-1.667-.13-1.667-.986V5.653z" />
                                     </svg>
                                 </button>
                                 @endif
@@ -222,6 +253,14 @@
                                             d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                                     </svg>
                                 </button>
+                                <button type="button" @click="openDetailSidebar({{ json_encode($company) }})"
+                                    class="p-2 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-indigo-500 hover:bg-indigo-500/5 transition-all border border-transparent hover:border-indigo-500/20"
+                                    title="{{ __('View Details') }}">
+                                    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
+                                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                                    </svg>
+                                </button>
                             </div>
                         </td>
                     </tr>
@@ -432,6 +471,43 @@
                         </div>
                     </div>
                     
+                    <!-- Feature Toggles Section -->
+                    <div class="space-y-6 pt-6 border-t border-slate-100 dark:border-slate-800 relative z-10">
+                        <div class="flex items-center gap-3">
+                            <div class="h-6 w-1 bg-cyan-500 rounded-full"></div>
+                            <h4 class="text-xs font-black text-slate-800 dark:text-white uppercase tracking-widest">{{ __('Feature Settings') }}</h4>
+                        </div>
+
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            <!-- Material Code Toggle -->
+                            <div class="flex items-center justify-between p-4 rounded-2xl bg-slate-50/50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-700/50 transition-all hover:bg-slate-50 dark:hover:bg-slate-800">
+                                <div class="space-y-0.5">
+                                    <label class="text-sm font-black text-slate-700 dark:text-slate-200 uppercase tracking-wide">{{ __('Enable Material Code') }}</label>
+                                    <p class="text-xs text-slate-400 font-medium">{{ __('Show material code field in products') }}</p>
+                                </div>
+                                <label class="relative inline-flex items-center cursor-pointer">
+                                    <input type="hidden" name="settings[enable_material_code]" value="0">
+                                    <input type="checkbox" name="settings[enable_material_code]" value="1" x-model="currentCompany.settings.enable_material_code" class="peer sr-only">
+                                    <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-cyan-500"></div>
+                                </label>
+                            </div>
+
+                            <!-- Points Toggle -->
+                            <div class="flex items-center justify-between p-4 rounded-2xl bg-slate-50/50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-700/50 transition-all hover:bg-slate-50 dark:hover:bg-slate-800">
+                                <div class="space-y-0.5">
+                                    <label class="text-sm font-black text-slate-700 dark:text-slate-200 uppercase tracking-wide">{{ __('Enable Points') }}</label>
+                                    <p class="text-xs text-slate-400 font-medium">{{ __('Show points rules in products') }}</p>
+                                </div>
+                                <label class="relative inline-flex items-center cursor-pointer">
+                                    <input type="hidden" name="settings[enable_points]" value="0">
+                                    <input type="checkbox" name="settings[enable_points]" value="1" x-model="currentCompany.settings.enable_points" class="peer sr-only">
+                                    <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-cyan-500"></div>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+
+
                     <div class="flex justify-end gap-x-4 pt-8">
                         <button type="button" @click="showModal = false" class="btn-luxury-ghost px-8">{{ __('Cancel') }}</button>
                         <button type="submit" class="btn-luxury-primary px-12">
@@ -450,6 +526,184 @@
         @csrf
         @method('PATCH')
     </form>
+
+    <!-- Details Sidebar -->
+    <template x-teleport="body">
+        <div x-show="showDetail" class="fixed inset-0 z-[150]" x-cloak>
+            <!-- Overlay -->
+            <div x-show="showDetail" 
+                 x-transition:enter="ease-out duration-300"
+                 x-transition:enter-start="opacity-0"
+                 x-transition:enter-end="opacity-100"
+                 x-transition:leave="ease-in duration-200"
+                 x-transition:leave-start="opacity-100"
+                 x-transition:leave-end="opacity-0"
+                 @click="showDetail = false"
+                 class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm transition-opacity"></div>
+
+            <!-- Sidebar Content -->
+            <div class="fixed inset-y-0 right-0 max-w-full flex">
+                <div class="w-screen max-w-md" 
+                     x-show="showDetail"
+                     x-transition:enter="transform transition ease-in-out duration-500"
+                     x-transition:enter-start="translate-x-full"
+                     x-transition:enter-end="translate-x-0"
+                     x-transition:leave="transform transition ease-in-out duration-500"
+                     x-transition:leave-start="translate-x-0"
+                     x-transition:leave-end="translate-x-full">
+                    
+                    <div class="h-full flex flex-col bg-white dark:bg-slate-900 shadow-2xl border-l border-slate-100 dark:border-slate-800">
+                        <!-- Header -->
+                        <div class="px-8 py-6 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between bg-white dark:bg-slate-900 sticky top-0 z-10">
+                            <div>
+                                <h2 class="text-xl font-black text-slate-800 dark:text-white tracking-tight">{{ __('Customer Details') }}</h2>
+                                <div class="flex items-center gap-2 mt-1">
+                                    <p class="text-xs font-bold text-slate-400 uppercase tracking-[0.2em]" x-text="detailCompany.name"></p>
+                                    <span class="text-xs font-mono font-black text-cyan-500 px-1.5 py-0.5 bg-cyan-500/10 rounded" x-text="detailCompany.code"></span>
+                                </div>
+                            </div>
+                            <button @click="showDetail = false" class="p-2 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors text-slate-400">
+                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                                </svg>
+                            </button>
+                        </div>
+
+                        <!-- Body -->
+                        <div class="flex-1 overflow-y-auto px-8 py-8 space-y-8 custom-scrollbar">
+                            <!-- Validity & Status Section -->
+                            <section class="space-y-4">
+                                <h3 class="text-xs font-black text-emerald-500 uppercase tracking-[0.3em]">{{ __('Account Status') }}</h3>
+                                <div class="grid grid-cols-2 gap-4">
+                                    <div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
+                                        <span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{ __('Current Status') }}</span>
+                                        <template x-if="detailCompany.status">
+                                            <div class="flex items-center gap-2">
+                                                <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.4)]"></span>
+                                                <span class="text-sm font-black text-emerald-500 uppercase tracking-widest">{{ __('Active') }}</span>
+                                            </div>
+                                        </template>
+                                        <template x-if="!detailCompany.status">
+                                            <div class="flex items-center gap-2">
+                                                <span class="w-1.5 h-1.5 rounded-full bg-rose-500 shadow-[0_0_8px_rgba(244,63,94,0.4)]"></span>
+                                                <span class="text-sm font-black text-rose-500 uppercase tracking-widest">{{ __('Disabled') }}</span>
+                                            </div>
+                                        </template>
+                                    </div>
+                                    <div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
+                                        <span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{ __('Valid Until') }}</span>
+                                        <div class="text-sm font-black text-slate-700 dark:text-slate-300" x-text="detailCompany.valid_until ? detailCompany.valid_until : '{{ __('Permanent') }}'"></div>
+                                    </div>
+                                </div>
+                            </section>
+
+                            <!-- Feature Settings Section -->
+                            <section class="space-y-4">
+                                <h3 class="text-xs font-black text-indigo-500 uppercase tracking-[0.3em]">{{ __('Feature Settings') }}</h3>
+                                <div class="space-y-3">
+                                    <div class="bg-white dark:bg-slate-800/20 p-4 rounded-2xl border border-slate-100 dark:border-slate-800/50 flex items-center justify-between">
+                                        <div class="flex items-center gap-3">
+                                            <div class="p-2 rounded-lg bg-indigo-50 dark:bg-indigo-500/10 text-indigo-500">
+                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 11h.01M7 15h.01M13 7h.01M13 11h.01M13 15h.01M17 7h.01M17 11h.01M17 15h.01" /></svg>
+                                            </div>
+                                            <span class="text-sm font-bold text-slate-700 dark:text-slate-300">{{ __('Material Code') }}</span>
+                                        </div>
+                                        <div class="flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-black uppercase tracking-widest"
+                                             :class="detailCompany.settings?.enable_material_code ? 'bg-emerald-500/10 text-emerald-500' : 'bg-slate-100 dark:bg-slate-800 text-slate-400'">
+                                            <span x-text="detailCompany.settings?.enable_material_code ? '{{ __('Enabled') }}' : '{{ __('Disabled') }}'"></span>
+                                        </div>
+                                    </div>
+                                    <div class="bg-white dark:bg-slate-800/20 p-4 rounded-2xl border border-slate-100 dark:border-slate-800/50 flex items-center justify-between">
+                                        <div class="flex items-center gap-3">
+                                            <div class="p-2 rounded-lg bg-amber-50 dark:bg-amber-500/10 text-amber-500">
+                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                                            </div>
+                                            <span class="text-sm font-bold text-slate-700 dark:text-slate-300">{{ __('Points Rule') }}</span>
+                                        </div>
+                                        <div class="flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-black uppercase tracking-widest"
+                                             :class="detailCompany.settings?.enable_points ? 'bg-emerald-500/10 text-emerald-500' : 'bg-slate-100 dark:bg-slate-800 text-slate-400'">
+                                            <span x-text="detailCompany.settings?.enable_points ? '{{ __('Enabled') }}' : '{{ __('Disabled') }}'"></span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </section>
+
+                            <!-- Basic Info Section -->
+                            <section class="space-y-4">
+                                <h3 class="text-xs font-black text-cyan-500 uppercase tracking-[0.3em]">{{ __('Basic Information') }}</h3>
+                                <div class="grid grid-cols-1 gap-4">
+                                    <div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
+                                        <span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{ __('Tax ID') }}</span>
+                                        <div class="text-sm font-mono font-bold text-slate-700 dark:text-slate-300" x-text="detailCompany.tax_id || '--'"></div>
+                                    </div>
+                                    <div class="grid grid-cols-2 gap-4">
+                                        <div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
+                                            <span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{ __('Contact Name') }}</span>
+                                            <div class="text-sm font-bold text-slate-700 dark:text-slate-300" x-text="detailCompany.contact_name || '--'"></div>
+                                        </div>
+                                        <div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
+                                            <span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{ __('Phone') }}</span>
+                                            <div class="text-sm font-mono font-bold text-slate-700 dark:text-slate-300" x-text="detailCompany.contact_phone || '--'"></div>
+                                        </div>
+                                    </div>
+                                    <div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
+                                        <span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{ __('Email') }}</span>
+                                        <div class="text-sm font-bold text-slate-700 dark:text-slate-300 truncate" x-text="detailCompany.contact_email || '--'"></div>
+                                    </div>
+                                </div>
+                            </section>
+
+                            <!-- Statistics Section -->
+                            <section class="space-y-4">
+                                <h3 class="text-xs font-black text-amber-500 uppercase tracking-[0.3em]">{{ __('Statistics') }}</h3>
+                                <div class="grid grid-cols-2 gap-4">
+                                    <div class="bg-amber-50 dark:bg-amber-500/5 p-6 rounded-2xl border border-amber-100 dark:border-amber-500/10 text-center">
+                                        <p class="text-2xl font-black text-slate-800 dark:text-white" x-text="detailCompany.users_count || 0"></p>
+                                        <p class="text-xs font-black text-slate-400 uppercase tracking-widest mt-1">{{ __('Users') }}</p>
+                                    </div>
+                                    <div class="bg-cyan-50 dark:bg-cyan-500/5 p-6 rounded-2xl border border-cyan-100 dark:border-cyan-500/10 text-center">
+                                        <p class="text-2xl font-black text-slate-800 dark:text-white" x-text="detailCompany.machines_count || 0"></p>
+                                        <p class="text-xs font-black text-slate-400 uppercase tracking-widest mt-1">{{ __('Machines') }}</p>
+                                    </div>
+                                </div>
+                            </section>
+
+                            <!-- Notes Section -->
+                            <section class="space-y-4 pb-8" x-show="detailCompany.note">
+                                <h3 class="text-xs font-black text-slate-400 uppercase tracking-[0.3em]">{{ __('Notes') }}</h3>
+                                <div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
+                                    <p class="text-sm font-bold text-slate-600 dark:text-slate-400 leading-relaxed italic" x-text="detailCompany.note"></p>
+                                </div>
+                            </section>
+                        </div>
+
+                        <!-- Footer -->
+                        <div class="p-8 border-t border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50">
+                            <button @click="showDetail = false" class="w-full btn-luxury-ghost py-4 rounded-xl font-black uppercase tracking-[0.2em] text-xs">
+                                {{ __('Close Panel') }}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </template>
 </div>
 
+<style>
+    .custom-scrollbar::-webkit-scrollbar {
+        width: 4px;
+    }
+    .custom-scrollbar::-webkit-scrollbar-track {
+        background: transparent;
+    }
+    .custom-scrollbar::-webkit-scrollbar-thumb {
+        background: #cbd5e1;
+        border-radius: 10px;
+    }
+    .dark .custom-scrollbar::-webkit-scrollbar-thumb {
+        background: #475569;
+    }
+</style>
+
 @endsection

resources/views/admin/data-config/accounts.blade.php

@@ -110,7 +110,7 @@ $roleSelectConfig = [
                             {{ __('User Info') }}</th>
                         <th
                             class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">
-                            {{ __('Email') }}</th>
+                            {{ __('Contact Info') }}</th>
                         @if(auth()->user()->isSystemAdmin())
                         <th
                             class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">
@@ -154,9 +154,13 @@ $roleSelectConfig = [
                                 </div>
                             </div>
                         </td>
-                        <td class="px-6 py-6">
-                            <span class="text-xs font-bold text-slate-500 dark:text-slate-400 tracking-widest">{{
-                                $user->email ?? '-' }}</span>
+                        <td class="px-6 py-6 font-display">
+                            <div class="flex flex-col">
+                                @if($user->phone)
+                                <span class="text-xs font-bold text-slate-500 dark:text-slate-400 tracking-widest">{{ $user->phone }}</span>
+                                @endif
+                                <span class="text-xs font-bold text-slate-400 dark:text-slate-500 @if($user->phone) mt-1 @endif tracking-widest">{{ $user->email ?? '-' }}</span>
+                            </div>
                         </td>
                         @if(auth()->user()->isSystemAdmin())
                         <td class="px-6 py-6">
@@ -194,7 +198,7 @@ $roleSelectConfig = [
                         </td>
                         <td class="px-6 py-6 text-right">
                             <div class="flex justify-end items-center gap-2">
-                                @if(!$user->hasRole('super-admin'))
+                                @if(!$user->hasRole('super-admin') || auth()->user()->hasRole('super-admin'))
                                     @if($user->status)
                                     <button type="button"
                                         @click="toggleFormAction = '{{ route($baseRoute . '.status.toggle', $user->id) }}'; statusToggleSource = 'list'; isStatusConfirmOpen = true"

resources/views/admin/permission/roles-edit.blade.php

@@ -255,7 +255,6 @@
                                                 <h3 class="text-base font-black text-slate-800 dark:text-white leading-tight tracking-tight">
                                                     {{ __($parent->name) }}
                                                 </h3>
-                                                <span class="text-[9px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest font-mono mt-0.5">{{ $parent->name }}</span>
                                             </div>
                                         </div>
                                         
@@ -278,7 +277,6 @@
                                                     <label class="group relative flex items-center justify-between p-4 rounded-2xl border border-transparent bg-slate-100/50 dark:bg-slate-900/40 cursor-pointer transition-all hover:bg-cyan-50/50 dark:hover:bg-cyan-900/10 hover:shadow-sm hover:border-cyan-500/20">
                                                         <div class="flex flex-col flex-1 min-w-0 mr-3">
                                                             <span class="text-sm font-bold text-slate-500 dark:text-slate-400 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors break-words">{{ __($child->name) }}</span>
-                                                            <span class="text-[9px] font-bold text-slate-400 uppercase tracking-widest mt-0.5 truncate">{{ $child->name }}</span>
                                                         </div>
                                                         <div class="relative flex items-center flex-shrink-0">
                                                             <input type="checkbox"

resources/views/admin/permission/roles.blade.php

@@ -123,7 +123,7 @@
                         <td class="px-6 py-6" width="30%">
                              <div class="flex flex-wrap gap-1 max-w-xs">
                                 @forelse($role->permissions->take(6) as $permission)
-                                    <span class="px-2 py-0.5 text-xs bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 rounded border border-slate-200 dark:border-slate-700 uppercase font-bold tracking-widest">{{ __(str_replace('menu.', '', $permission->name)) }}</span>
+                                    <span class="px-2 py-0.5 text-xs bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 rounded border border-slate-200 dark:border-slate-700 uppercase font-bold tracking-widest">{{ __($permission->name) }}</span>
                                 @empty
                                     <span class="text-xs font-bold text-slate-500 dark:text-slate-400 tracking-widest">{{ __('No permissions') }}</span>
                                 @endforelse

resources/views/admin/products/create-modal.blade.php

@@ -1,201 +0,0 @@
-<div x-data="{ 
-    step: 1, 
-    loading: false,
-    settings: @js(auth()->user()->company->settings ?? []),
-    formData: {
-        names: { zh_TW: '', en: '', ja: '' },
-        barcode: '',
-        spec: '',
-        category_id: '',
-        manufacturer: '',
-        track_limit: 10,
-        spring_limit: 10,
-        price: 0,
-        cost: 0,
-        member_price: 0,
-        metadata: {
-            material_code: '',
-            full_points: 0,
-            half_points: 0,
-            half_points_cash: 0
-        }
-    },
-    async submit() {
-        this.loading = true;
-        try {
-            const response = await fetch('{{ route('admin.products.store') }}', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
-                },
-                body: JSON.stringify(this.formData)
-            });
-            const result = await response.json();
-            if (result.success) {
-                window.location.reload();
-            } else {
-                alert(result.message || 'Saving failed');
-            }
-        } catch (e) {
-            console.error(e);
-        } finally {
-            this.loading = false;
-        }
-    }
-}" class="p-4 sm:p-7">
-    <!-- Header -->
-    <div class="text-center mb-8">
-        <h3 class="text-2xl font-black text-slate-800 dark:text-white tracking-tight uppercase">
-            {{ __('Create New Product') }}
-        </h3>
-        <p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest">
-            {{ __('Add a new item to your product collection') }}
-        </p>
-    </div>
-
-    <!-- Stepper (Optional but adds luxury feel) -->
-    <div class="flex items-center justify-center gap-4 mb-8">
-        <div :class="step >= 1 ? 'bg-cyan-500 text-white' : 'bg-slate-100 dark:bg-slate-800 text-slate-400'" class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-black transition-all">1</div>
-        <div class="w-12 h-px bg-slate-200 dark:border-slate-700"></div>
-        <div :class="step >= 2 ? 'bg-cyan-500 text-white' : 'bg-slate-100 dark:bg-slate-800 text-slate-400'" class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-black transition-all">2</div>
-    </div>
-
-    <form @submit.prevent="submit">
-        <!-- Step 1: Basic Info & Multilingual Names -->
-        <div x-show="step === 1" x-transition class="space-y-6">
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-                <!-- Multilingual Names -->
-                <div class="md:col-span-3 space-y-4">
-                    <label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Product Name') }} ({{ __('Multilingual') }})</label>
-                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                        <div class="relative">
-                            <span class="absolute top-2.5 left-3 text-[10px] font-black text-cyan-500/50 uppercase">ZH</span>
-                            <input type="text" x-model="formData.names.zh_TW" required placeholder="{{ __('Traditional Chinese') }}" class="luxury-input pl-10">
-                        </div>
-                        <div class="relative">
-                            <span class="absolute top-2.5 left-3 text-[10px] font-black text-cyan-500/50 uppercase">EN</span>
-                            <input type="text" x-model="formData.names.en" placeholder="{{ __('English') }}" class="luxury-input pl-10">
-                        </div>
-                        <div class="relative">
-                            <span class="absolute top-2.5 left-3 text-[10px] font-black text-cyan-500/50 uppercase">JA</span>
-                            <input type="text" x-model="formData.names.ja" placeholder="{{ __('Japanese') }}" class="luxury-input pl-10">
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Barcode & Spec -->
-                <div class="space-y-2">
-                    <label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Barcode') }}</label>
-                    <input type="text" x-model="formData.barcode" class="luxury-input">
-                </div>
-                <div class="space-y-2">
-                    <label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Specification') }}</label>
-                    <input type="text" x-model="formData.spec" class="luxury-input">
-                </div>
-                <div class="space-y-2">
-                    <label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Category') }}</label>
-                    <select x-model="formData.category_id" class="luxury-input">
-                        <option value="">{{ __('Select Category') }}</option>
-                        @foreach($categories as $cat)
-                            <option value="{{ $cat->id }}">{{ $cat->name }}</option>
-                        @endforeach
-                    </select>
-                </div>
-            </div>
-
-            <div class="flex justify-end pt-4">
-                <button type="button" @click="step = 2" class="px-8 py-3 bg-slate-900 dark:bg-slate-700 text-white rounded-xl font-black text-xs uppercase tracking-[0.2em] hover:bg-cyan-600 transition-all shadow-lg shadow-cyan-500/10">
-                    {{ __('Next') }}
-                </button>
-            </div>
-        </div>
-
-        <!-- Step 2: Logistics & Pricing -->
-        <div x-show="step === 2" x-transition class="space-y-6">
-            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
-                <!-- Track & Spring Limits -->
-                <div class="space-y-2">
-                    <label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Track Limit') }}</label>
-                    <input type="number" x-model="formData.track_limit" class="luxury-input">
-                </div>
-                <div class="space-y-2">
-                    <label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Spring Limit') }}</label>
-                    <input type="number" x-model="formData.spring_limit" class="luxury-input">
-                </div>
-                <div class="col-span-2 space-y-2">
-                    <label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Manufacturer') }}</label>
-                    <input type="text" x-model="formData.manufacturer" class="luxury-input">
-                </div>
-
-                <!-- Pricing -->
-                <div class="space-y-2">
-                    <label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Price') }}</label>
-                    <input type="number" x-model="formData.price" class="luxury-input">
-                </div>
-                <div class="space-y-2">
-                    <label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Cost') }}</label>
-                    <input type="number" x-model="formData.cost" class="luxury-input">
-                </div>
-                <div class="space-y-2">
-                    <label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Member Price') }}</label>
-                    <input type="number" x-model="formData.member_price" class="luxury-input">
-                </div>
-
-                <!-- Feature Toggled Fields: Material Code -->
-                <template x-if="settings.show_material_code">
-                    <div class="space-y-2">
-                        <label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Material Code') }}</label>
-                        <input type="text" x-model="formData.metadata.material_code" class="luxury-input border-cyan-500/30">
-                    </div>
-                </template>
-            </div>
-
-            <!-- Points Settings Area (Feature Toggled) -->
-            <template x-if="settings.show_points_management">
-                <div class="p-6 bg-slate-50 dark:bg-slate-800/50 rounded-2xl border border-slate-100 dark:border-slate-700/50 space-y-6 mt-4">
-                    <div class="flex items-center gap-2 mb-2">
-                        <div class="w-1.5 h-1.5 rounded-full bg-cyan-500"></div>
-                        <h4 class="text-[11px] font-black text-slate-400 uppercase tracking-widest">{{ __('Points Management') }}</h4>
-                    </div>
-                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-                        <div class="space-y-2">
-                            <label class="block text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Full Points') }}</label>
-                            <input type="number" x-model="formData.metadata.full_points" class="luxury-input bg-white dark:bg-slate-900">
-                        </div>
-                        <div class="space-y-2">
-                            <label class="block text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Half Points') }}</label>
-                            <input type="number" x-model="formData.metadata.half_points" class="luxury-input bg-white dark:bg-slate-900">
-                        </div>
-                        <div class="space-y-2">
-                            <label class="block text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Half Points Cash') }}</label>
-                            <input type="number" x-model="formData.metadata.half_points_cash" class="luxury-input bg-white dark:bg-slate-900">
-                        </div>
-                    </div>
-                </div>
-            </template>
-
-            <div class="flex justify-between items-center pt-8 border-t border-slate-100 dark:border-slate-800">
-                <button type="button" @click="step = 1" class="text-xs font-black text-slate-400 uppercase tracking-widest hover:text-slate-600 transition-colors">
-                    {{ __('Back') }}
-                </button>
-                <div class="flex gap-4">
-                    <button type="button" @click="$dispatch('close-modal', 'create-product')" class="px-6 py-3 text-slate-400 font-black text-xs uppercase tracking-widest hover:text-slate-600">
-                        {{ __('Cancel') }}
-                    </button>
-                    <button type="submit" 
-                        :disabled="loading"
-                        class="px-10 py-3 bg-cyan-600 text-white rounded-xl font-black text-xs uppercase tracking-[0.2em] hover:bg-cyan-500 transition-all shadow-xl shadow-cyan-500/20 flex items-center gap-2">
-                        <template x-if="loading">
-                            <svg class="animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                            </svg>
-                        </template>
-                        <span x-text="loading ? '{{ __('Saving...') }}' : '{{ __('Save Product') }}'"></span>
-                    </button>
-                </div>
-            </div>
-        </div>
-    </form>
-</div>

resources/views/admin/products/create.blade.php

@@ -0,0 +1,437 @@
+@extends('layouts.admin')
+
+@section('content')
+<div class="space-y-6" x-data="productForm({ 
+    categories: @js($categories), 
+    companies: @js($companies), 
+    companySettings: @js($companySettings),
+    isEditing: false 
+})">
+    <!-- Header -->
+    <div class="flex items-center justify-between gap-6">
+        <div class="flex items-center gap-4">
+            <a href="{{ route('admin.data-config.products.index') }}" class="p-2.5 rounded-xl bg-white dark:bg-slate-900 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors border border-slate-200/50 dark:border-slate-700/50">
+                <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" /></svg>
+            </a>
+            <div>
+                <h1 class="text-3xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Create Product') }}</h1>
+            </div>
+        </div>
+        <div class="flex items-center gap-4">
+            <button type="submit" form="product-form" class="btn-luxury-primary px-8 py-3 h-12">
+                <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
+                <span>{{ __('Create Product') }}</span>
+            </button>
+        </div>
+    </div>
+
+    @if ($errors->any())
+    <div class="luxury-card p-4 rounded-xl border-rose-500/20 bg-rose-500/5 sm:max-w-xl animate-luxury-in">
+        <div class="flex gap-3">
+            <svg class="size-5 text-rose-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" /></svg>
+            <div class="space-y-1">
+                <p class="text-sm font-black text-rose-500 uppercase tracking-widest">{{ __('Validation Error') }}</p>
+                <ul class="text-xs font-bold text-rose-500/80 list-disc list-inside space-y-0.5">
+                    @foreach ($errors->all() as $error)
+                        <li>{{ $error }}</li>
+                    @endforeach
+                </ul>
+            </div>
+        </div>
+    </div>
+    @endif
+
+    <form id="product-form" action="{{ route('admin.data-config.products.store') }}" method="POST" enctype="multipart/form-data" class="flex flex-col lg:flex-row gap-8 items-start">
+        @csrf
+
+        <!-- Side Column (Status & Company) -->
+        <aside class="w-full lg:w-80 lg:sticky top-24 z-10 space-y-8 text-slate-800 dark:text-white">
+                    <!-- Product Image -->
+                    <div class="luxury-card p-8 rounded-[2.5rem] animate-luxury-in relative z-[70]" style="animation-delay: 50ms">
+                        <div class="space-y-6">
+                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Product Image') }}</label>
+                            
+                            <div class="relative group">
+                                <template x-if="!imagePreview">
+                                    <div @click="$refs.imageInput.click()" class="aspect-square rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 flex flex-col items-center justify-center gap-4 cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-800/80 hover:border-cyan-500/50 transition-all duration-300 group">
+                                        <div class="p-4 rounded-2xl bg-white dark:bg-slate-800 shadow-sm border border-slate-100 dark:border-slate-700 group-hover:scale-110 group-hover:text-cyan-500 transition-all duration-300">
+                                            <svg class="size-8 text-slate-400 dark:text-slate-500 group-hover:text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" /></svg>
+                                        </div>
+                                        <div class="text-center">
+                                            <p class="text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-tighter">{{ __('Click to upload') }}</p>
+                                            <p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 mt-1">{{ __('PNG, JPG up to 2MB') }}</p>
+                                        </div>
+                                    </div>
+                                </template>
+                                <template x-if="imagePreview">
+                                    <div class="relative aspect-square rounded-3xl overflow-hidden border border-slate-200 dark:border-slate-800 shadow-xl group/image">
+                                        <img :src="imagePreview" class="w-full h-full object-cover">
+                                        <div class="absolute inset-0 bg-slate-950/40 opacity-0 group-hover/image:opacity-100 transition-opacity duration-300 flex items-center justify-center gap-3">
+                                            <button type="button" @click="$refs.imageInput.click()" class="p-3 rounded-2xl bg-white text-slate-800 hover:bg-cyan-500 hover:text-white transition-all duration-300 shadow-lg">
+                                                <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" /></svg>
+                                            </button>
+                                            <button type="button" @click="removeImage" class="p-3 rounded-2xl bg-white text-slate-800 hover:bg-rose-500 hover:text-white transition-all duration-300 shadow-lg">
+                                                <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /></svg>
+                                            </button>
+                                        </div>
+                                    </div>
+                                </template>
+                                <input type="file" name="image" x-ref="imageInput" class="hidden" accept="image/*" @change="handleImageUpload">
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="luxury-card p-8 rounded-[2.5rem] animate-luxury-in relative z-[60]" style="animation-delay: 100ms">
+                <div class="space-y-6">
+                    <div class="space-y-3">
+                        <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Active Status') }}</label>
+                        <div class="flex items-center">
+                            <label class="relative inline-flex items-center cursor-pointer">
+                                <input type="checkbox" name="is_active" value="1" x-model="formData.is_active" class="sr-only peer">
+                                <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-800 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-cyan-500 transition-colors"></div>
+                                <span class="ml-3 text-sm font-bold text-slate-600 dark:text-slate-300" x-text="formData.is_active ? '{{ __('Active') }}' : '{{ __('Disabled') }}'"></span>
+                            </label>
+                        </div>
+                    </div>
+
+                    @if(auth()->user()->isSystemAdmin())
+                    <div class="h-px bg-slate-100 dark:bg-slate-800"></div>
+                    <div class="space-y-3">
+                        <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Company') }}</label>
+                        <x-searchable-select id="company-select" name="company_id" x-model="formData.company_id" @change="updateCompanySettings($event.target.value)" :placeholder="__('Select Company')">
+                            <option value="">{{ __('Select Company') }}</option>
+                            @foreach($companies as $company)
+                                <option value="{{ $company->id }}">{{ $company->name }}</option>
+                            @endforeach
+                        </x-searchable-select>
+                    </div>
+                    @else
+                        <input type="hidden" name="company_id" value="{{ auth()->user()->company_id }}">
+                    @endif
+                </div>
+            </div>
+        </aside>
+
+        <!-- Main Content Area -->
+        <div class="flex-1 w-full space-y-8">
+            <!-- Translation -->
+            <div class="luxury-card p-8 rounded-[2.5rem] animate-luxury-in relative z-[40]">
+                <div class="mb-8">
+                    <h2 class="text-xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Product Name (Multilingual)') }}</h2>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div class="space-y-3">
+                        <div class="flex items-center gap-2 h-6">
+                            <span class="px-2.5 py-0.5 rounded-md bg-slate-100 dark:bg-slate-800 text-[10px] font-black text-slate-500 uppercase tracking-widest">{{ __('Traditional Chinese') }}</span>
+                            <span class="text-rose-500 font-bold">*</span>
+                        </div>
+                        <input type="text" name="names[zh_TW]" x-model="formData.names.zh_TW" required class="luxury-input !py-3 text-base font-bold shadow-sm">
+                    </div>
+                    <div class="space-y-3">
+                        <div class="flex items-center gap-2 h-6">
+                            <span class="px-2.5 py-0.5 rounded-md bg-slate-100 dark:bg-slate-800 text-[10px] font-black text-slate-500 uppercase tracking-widest">{{ __('English') }}</span>
+                        </div>
+                        <input type="text" name="names[en]" x-model="formData.names.en" class="luxury-input !py-3 text-base font-bold shadow-sm">
+                    </div>
+                    <div class="space-y-3">
+                        <div class="flex items-center gap-2 h-6">
+                            <span class="px-2.5 py-0.5 rounded-md bg-slate-100 dark:bg-slate-800 text-[10px] font-black text-slate-500 uppercase tracking-widest">{{ __('Japanese') }}</span>
+                        </div>
+                        <input type="text" name="names[ja]" x-model="formData.names.ja" class="luxury-input !py-3 text-base font-bold shadow-sm">
+                    </div>
+                </div>
+            </div>
+
+            <!-- Basic Specs Section -->
+            <div class="luxury-card p-8 rounded-[2.5rem] animate-luxury-in relative z-[30]" style="animation-delay: 100ms">
+                <div class="mb-8">
+                    <h2 class="text-xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Basic Specifications') }}</h2>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                    <div class="grid grid-cols-1 gap-6">
+                        <div class="space-y-3">
+                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Barcode') }}</label>
+                            <input type="text" name="barcode" x-model="formData.barcode" class="luxury-input shadow-sm">
+                        </div>
+                        <div class="space-y-3">
+                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Manufacturer') }}</label>
+                            <input type="text" name="manufacturer" x-model="formData.manufacturer" class="luxury-input shadow-sm">
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-1 gap-6">
+                        <div class="space-y-3">
+                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Specification') }}</label>
+                            <input type="text" name="spec" x-model="formData.spec" class="luxury-input shadow-sm">
+                        </div>
+                        <div class="space-y-3">
+                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Category') }}</label>
+                            <x-searchable-select id="product-category" name="category_id" x-model="formData.category_id" :placeholder="__('Uncategorized')">
+                                <option value="">{{ __('Uncategorized') }}</option>
+                                @foreach($categories as $category)
+                                    @php
+                                        $catName = $category->name;
+                                        if ($category->name_dictionary_key) {
+                                            $catName = __($category->name_dictionary_key);
+                                        }
+                                    @endphp
+                                    <option value="{{ $category->id }}" data-title="{{ $catName }}">{{ $catName }}</option>
+                                @endforeach
+                            </x-searchable-select>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Pricing Information -->
+            <div class="luxury-card p-8 rounded-[2.5rem] animate-luxury-in relative z-[20]" style="animation-delay: 200ms">
+                <div class="mb-8">
+                    <h2 class="text-xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Pricing Information') }}</h2>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-8">
+                    <div class="space-y-3">
+                        <label class="text-xs font-black text-emerald-500 uppercase tracking-widest pl-1">{{ __('Retail Price') }} <span class="text-rose-500">*</span></label>
+                        <div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-emerald-500/20 transition-all overflow-hidden">
+                            <button type="button" @click="formData.price = Math.max(0, parseInt(formData.price || 0) - 1)" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-emerald-500 hover:bg-emerald-500/5 active:scale-90 transition-all">
+                                <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
+                            </button>
+                            <div class="flex-1 min-w-[72px]">
+                                <input type="number" name="price" x-model="formData.price" required class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
+                            </div>
+                            <button type="button" @click="formData.price = parseInt(formData.price || 0) + 1" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-emerald-500 hover:bg-emerald-500/5 active:scale-90 transition-all">
+                                <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="space-y-3">
+                        <label class="text-xs font-black text-cyan-500 dark:text-cyan-400 uppercase tracking-widest pl-1">{{ __('Member Price') }} <span class="text-rose-500">*</span></label>
+                        <div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-cyan-500/20 transition-all overflow-hidden">
+                            <button type="button" @click="formData.member_price = Math.max(0, parseInt(formData.member_price || 0) - 1)" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
+                                <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
+                            </button>
+                            <div class="flex-1 min-w-[72px]">
+                                <input type="number" name="member_price" x-model="formData.member_price" required class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
+                            </div>
+                            <button type="button" @click="formData.member_price = parseInt(formData.member_price || 0) + 1" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
+                                <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="space-y-3">
+                        <label class="text-xs font-black text-slate-400 uppercase tracking-widest pl-1">{{ __('Cost') }} <span class="text-rose-500">*</span></label>
+                        <div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-slate-500/20 transition-all overflow-hidden">
+                            <button type="button" @click="formData.cost = Math.max(0, parseInt(formData.cost || 0) - 1)" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-500/5 active:scale-90 transition-all">
+                                <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
+                            </button>
+                            <div class="flex-1 min-w-[72px]">
+                                <input type="number" name="cost" x-model="formData.cost" required class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
+                            </div>
+                            <button type="button" @click="formData.cost = parseInt(formData.cost || 0) + 1" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-500/5 active:scale-90 transition-all">
+                                <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Inventory Limits -->
+            <div class="luxury-card p-8 rounded-[2.5rem] animate-luxury-in relative z-[10]" style="animation-delay: 300ms">
+                <div class="mb-8">
+                    <h2 class="text-xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Channel Limits') }}</h2>
+                </div>
+
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-8">
+                    <div class="space-y-4">
+                        <label class="text-xs font-black text-indigo-500 uppercase tracking-widest pl-1">{{ __('Track Channel Limit') }} <span class="text-rose-500">*</span></label>
+                        <div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-indigo-500/20 transition-all overflow-hidden">
+                            <button type="button" @click="formData.track_limit = Math.max(0, parseInt(formData.track_limit || 0) - 1)" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-indigo-500 hover:bg-indigo-500/5 active:scale-90 transition-all">
+                                <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
+                            </button>
+                            <div class="flex-1 min-w-[72px]">
+                                <input type="number" name="track_limit" x-model="formData.track_limit" required class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
+                            </div>
+                            <button type="button" @click="formData.track_limit = parseInt(formData.track_limit || 0) + 1" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-indigo-500 hover:bg-indigo-500/5 active:scale-90 transition-all">
+                                <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="space-y-4">
+                        <label class="text-xs font-black text-amber-500 uppercase tracking-widest pl-1">{{ __('Spring Channel Limit') }} <span class="text-rose-500">*</span></label>
+                        <div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-amber-500/20 transition-all overflow-hidden">
+                            <button type="button" @click="formData.spring_limit = Math.max(0, parseInt(formData.spring_limit || 0) - 1)" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-amber-500 hover:bg-amber-500/5 active:scale-90 transition-all">
+                                <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
+                            </button>
+                            <div class="flex-1 min-w-[72px]">
+                                <input type="number" name="spring_limit" x-model="formData.spring_limit" required class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
+                            </div>
+                            <button type="button" @click="formData.spring_limit = parseInt(formData.spring_limit || 0) + 1" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-amber-500 hover:bg-amber-500/5 active:scale-90 transition-all">
+                                <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Advanced Features -->
+            <div class="luxury-card p-8 rounded-[2.5rem] animate-luxury-in overflow-hidden" 
+                 x-show="companySettings.enable_points || companySettings.enable_material_code"
+                 x-transition:enter="transition ease-out duration-300"
+                 x-transition:enter-start="opacity-0 max-h-0"
+                 x-transition:enter-end="opacity-100 max-h-screen"
+                 style="animation-delay: 400ms">
+                <div class="mb-8">
+                    <h2 class="text-xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Feature Toggles') }}</h2>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                    <template x-if="companySettings.enable_material_code">
+                        <div class="space-y-3 animate-luxury-in">
+                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Material Code') }}</label>
+                            <input type="text" name="metadata[material_code]" x-model="formData.metadata.material_code" class="luxury-input shadow-sm">
+                        </div>
+                    </template>
+
+                    <template x-if="companySettings.enable_points">
+                        <div class="contents">
+                            <div class="space-y-3 animate-luxury-in">
+                                <label class="text-xs font-black text-cyan-500 uppercase tracking-widest pl-1">{{ __('Full Points') }}</label>
+                                <div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-cyan-500/20 transition-all overflow-hidden">
+                                    <button type="button" @click="formData.metadata.points_full = Math.max(0, parseInt(formData.metadata.points_full || 0) - 1)" class="shrink-0 w-10 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
+                                        <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
+                                    </button>
+                                    <div class="flex-1 min-w-[60px]">
+                                        <input type="number" name="metadata[points_full]" x-model="formData.metadata.points_full" class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
+                                    </div>
+                                    <button type="button" @click="formData.metadata.points_full = parseInt(formData.metadata.points_full || 0) + 1" class="shrink-0 w-10 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
+                                        <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="space-y-3 animate-luxury-in">
+                                <label class="text-xs font-black text-cyan-500 uppercase tracking-widest pl-1">{{ __('Half Points') }}</label>
+                                <div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-cyan-500/20 transition-all overflow-hidden">
+                                    <button type="button" @click="formData.metadata.points_half = Math.max(0, parseInt(formData.metadata.points_half || 0) - 1)" class="shrink-0 w-10 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
+                                        <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
+                                    </button>
+                                    <div class="flex-1 min-w-[60px]">
+                                        <input type="number" name="metadata[points_half]" x-model="formData.metadata.points_half" class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
+                                    </div>
+                                    <button type="button" @click="formData.metadata.points_half = parseInt(formData.metadata.points_half || 0) + 1" class="shrink-0 w-10 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
+                                        <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="space-y-3 animate-luxury-in">
+                                <label class="text-xs font-black text-cyan-500 uppercase tracking-widest pl-1">{{ __('Half Points Amount') }}</label>
+                                <div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-cyan-500/20 transition-all overflow-hidden">
+                                    <button type="button" @click="formData.metadata.points_half_amount = Math.max(0, parseInt(formData.metadata.points_half_amount || 0) - 1)" class="shrink-0 w-10 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
+                                        <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
+                                    </button>
+                                    <div class="flex-1 min-w-[60px]">
+                                        <input type="number" name="metadata[points_half_amount]" x-model="formData.metadata.points_half_amount" class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
+                                    </div>
+                                    <button type="button" @click="formData.metadata.points_half_amount = parseInt(formData.metadata.points_half_amount || 0) + 1" class="shrink-0 w-10 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
+                                        <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                </div>
+            </div>
+
+            <!-- Action Bar (Footer) -->
+            <div class="pt-8 flex items-center justify-end gap-4 border-t border-slate-100 dark:border-slate-800 animate-luxury-in" style="animation-delay: 500ms">
+                <a href="{{ route('admin.data-config.products.index') }}" class="btn-luxury-ghost px-8 h-12">{{ __('Cancel') }}</a>
+                <button type="submit" form="product-form" class="btn-luxury-primary px-12 h-14 shadow-xl shadow-cyan-500/20">
+                    <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
+                    <span>{{ __('Create Product') }}</span>
+                </button>
+            </div>
+        </div>
+    </form>
+</div>
+@push('styles')
+<style>
+    /* 移除 Chrome, Safari, Edge, Opera 的原生加減按鈕 */
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        appearance: none;
+        margin: 0;
+    }
+    /* 移除 Firefox 的原生加減按鈕 */
+    input[type=number] {
+        -moz-appearance: textfield;
+        appearance: textfield;
+    }
+</style>
+@endpush
+
+@endsection
+
+@section('scripts')
+<script>
+    document.addEventListener('alpine:init', () => {
+        Alpine.data('productForm', (config) => ({
+            categories: config.categories,
+            companies: config.companies,
+            companySettings: config.companySettings,
+            isEditing: config.isEditing,
+            imagePreview: null,
+            formData: {
+                names: { zh_TW: '', en: '', ja: '' },
+                barcode: '',
+                spec: '',
+                category_id: '',
+                manufacturer: '',
+                track_limit: 15,
+                spring_limit: 15,
+                price: 0,
+                cost: 0,
+                member_price: 0,
+                metadata: {
+                    material_code: '',
+                    points_full: 0,
+                    points_half: 0,
+                    points_half_amount: 0
+                },
+                is_active: true,
+                company_id: '{{ auth()->user()->company_id ?? "" }}'
+            },
+
+            handleImageUpload(event) {
+                const file = event.target.files[0];
+                if (file) {
+                    const reader = new FileReader();
+                    reader.onload = (e) => {
+                        this.imagePreview = e.target.result;
+                    };
+                    reader.readAsDataURL(file);
+                }
+            },
+
+            removeImage() {
+                this.imagePreview = null;
+                this.$refs.imageInput.value = '';
+            },
+
+            updateCompanySettings(companyId) {
+                if (!companyId) {
+                    this.companySettings = { enable_material_code: false, enable_points: false };
+                    return;
+                }
+                const company = this.companies.find(c => c.id == companyId);
+                if (company) {
+                    this.companySettings = {
+                        enable_material_code: company.settings?.enable_material_code || false,
+                        enable_points: company.settings?.enable_points || false
+                    };
+                }
+            }
+        }));
+    });
+</script>
+@endsection

resources/views/admin/products/edit.blade.php

@@ -0,0 +1,432 @@
+@extends('layouts.admin')
+
+@section('content')
+@php
+    $names = [];
+    foreach(['zh_TW', 'en', 'ja'] as $locale) {
+        $names[$locale] = $product->translations->where('locale', $locale)->first()?->text ?? '';
+    }
+    // If zh_TW translation is empty, fallback to product->name
+    if (empty($names['zh_TW'])) {
+        $names['zh_TW'] = $product->name;
+    }
+@endphp
+
+<div class="space-y-6" x-data="productForm({ 
+    categories: @js($categories), 
+    companies: @js($companies), 
+    companySettings: @js($companySettings),
+    product: @js($product),
+    names: @js($names),
+    isEditing: true 
+})">
+    <!-- Header -->
+    <div class="flex items-center justify-between gap-6">
+        <div class="flex items-center gap-4">
+            <a href="{{ route('admin.data-config.products.index') }}" class="p-2.5 rounded-xl bg-white dark:bg-slate-900 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors border border-slate-200/50 dark:border-slate-700/50">
+                <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" /></svg>
+            </a>
+            <div>
+                <h1 class="text-3xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Edit Product') }}</h1>
+            </div>
+        </div>
+        <div class="flex items-center gap-4">
+            <button type="submit" form="product-form" class="btn-luxury-primary px-8 py-3 h-12">
+                <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
+                <span>{{ __('Save Changes') }}</span>
+            </button>
+        </div>
+    </div>
+
+    @if ($errors->any())
+    <div class="luxury-card p-4 rounded-xl border-rose-500/20 bg-rose-500/5 sm:max-w-xl animate-luxury-in">
+        <div class="flex gap-3">
+            <svg class="size-5 text-rose-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" /></svg>
+            <div class="space-y-1">
+                <p class="text-sm font-black text-rose-500 uppercase tracking-widest">{{ __('Validation Error') }}</p>
+                <ul class="text-xs font-bold text-rose-500/80 list-disc list-inside space-y-0.5">
+                    @foreach ($errors->all() as $error)
+                        <li>{{ $error }}</li>
+                    @endforeach
+                </ul>
+            </div>
+        </div>
+    </div>
+    @endif
+
+    <form id="product-form" action="{{ route('admin.data-config.products.update', $product->id) }}" method="POST" enctype="multipart/form-data" class="flex flex-col lg:flex-row gap-8 items-start">
+        @csrf
+        @method('PUT')
+
+        <!-- Side Column (Status & Company) -->
+        <aside class="w-full lg:w-80 lg:sticky top-24 z-10 space-y-8">
+                <!-- Product Image -->
+                <div class="luxury-card p-8 rounded-[2.5rem] animate-luxury-in relative z-[70]" style="animation-delay: 50ms">
+                    <div class="space-y-6">
+                        <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Product Image') }}</label>
+                        
+                        <div class="relative group">
+                            <input type="hidden" name="remove_image" :value="formData.remove_image ? '1' : '0'">
+                            
+                            <template x-if="!imagePreview">
+                                <div @click="$refs.imageInput.click()" class="aspect-square rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 flex flex-col items-center justify-center gap-4 cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-800/80 hover:border-cyan-500/50 transition-all duration-300 group">
+                                    <div class="p-4 rounded-2xl bg-white dark:bg-slate-800 shadow-sm border border-slate-100 dark:border-slate-700 group-hover:scale-110 group-hover:text-cyan-500 transition-all duration-300">
+                                        <svg class="size-8 text-slate-400 dark:text-slate-500 group-hover:text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" /></svg>
+                                    </div>
+                                    <div class="text-center">
+                                        <p class="text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-tighter">{{ __('Click to upload') }}</p>
+                                        <p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 mt-1">{{ __('PNG, JPG up to 2MB') }}</p>
+                                    </div>
+                                </div>
+                            </template>
+                            <template x-if="imagePreview">
+                                <div class="relative aspect-square rounded-3xl overflow-hidden border border-slate-200 dark:border-slate-800 shadow-xl group/image">
+                                    <img :src="imagePreview" class="w-full h-full object-cover">
+                                    <div class="absolute inset-0 bg-slate-950/40 opacity-0 group-hover/image:opacity-100 transition-opacity duration-300 flex items-center justify-center gap-3">
+                                        <button type="button" @click="$refs.imageInput.click()" class="p-3 rounded-2xl bg-white text-slate-800 hover:bg-cyan-500 hover:text-white transition-all duration-300 shadow-lg">
+                                            <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" /></svg>
+                                        </button>
+                                        <button type="button" @click="removeImage" class="p-3 rounded-2xl bg-white text-slate-800 hover:bg-rose-500 hover:text-white transition-all duration-300 shadow-lg">
+                                            <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /></svg>
+                                        </button>
+                                    </div>
+                                </div>
+                            </template>
+                            <input type="file" name="image" x-ref="imageInput" class="hidden" accept="image/*" @change="handleImageUpload">
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Status & Company -->
+                <div class="luxury-card p-8 rounded-[2.5rem] animate-luxury-in relative z-[60]" style="animation-delay: 100ms">
+                    <div class="space-y-6">
+                        <div class="space-y-3">
+                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Active Status') }}</label>
+                            <div class="flex items-center">
+                                <label class="relative inline-flex items-center cursor-pointer">
+                                    <input type="checkbox" name="is_active" value="1" x-model="formData.is_active" class="sr-only peer">
+                                    <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-800 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-cyan-500 transition-colors"></div>
+                                    <span class="ml-3 text-sm font-bold text-slate-600 dark:text-slate-300" x-text="formData.is_active ? '{{ __('Active') }}' : '{{ __('Disabled') }}'"></span>
+                                </label>
+                            </div>
+                        </div>
+
+                        @if(auth()->user()->isSystemAdmin())
+                        <div class="h-px bg-slate-100 dark:bg-slate-800"></div>
+                        <div class="space-y-3">
+                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Company') }}</label>
+                            <div class="px-4 py-3 rounded-xl bg-slate-50 dark:bg-slate-800 text-sm font-black text-slate-700 dark:text-slate-200 border border-slate-100 dark:border-slate-800">
+                                {{ $product->company->name ?? 'N/A' }}
+                                <input type="hidden" name="company_id" value="{{ $product->company_id }}">
+                            </div>
+                        </div>
+                        @else
+                            <input type="hidden" name="company_id" value="{{ $product->company_id }}">
+                        @endif
+                    </div>
+                </div>
+        </aside>
+
+        <!-- Main Content Area -->
+        <div class="flex-1 w-full space-y-8">
+                <!-- Translation Section -->
+                <div class="luxury-card p-8 rounded-[2.5rem] animate-luxury-in relative z-[40]">
+                    <div class="mb-8">
+                        <h2 class="text-xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Product Name (Multilingual)') }}</h2>
+                    </div>
+
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                        <div class="space-y-3">
+                            <div class="flex items-center gap-2 h-6">
+                                <span class="px-2.5 py-0.5 rounded-md bg-slate-100 dark:bg-slate-800 text-[10px] font-black text-slate-500 uppercase tracking-widest">{{ __('Traditional Chinese') }}</span>
+                                <span class="text-rose-500 font-bold">*</span>
+                            </div>
+                            <input type="text" name="names[zh_TW]" x-model="formData.names.zh_TW" required class="luxury-input !py-3 text-base font-bold shadow-sm">
+                        </div>
+                        <div class="space-y-3">
+                            <div class="flex items-center gap-2 h-6">
+                                <span class="px-2.5 py-0.5 rounded-md bg-slate-100 dark:bg-slate-800 text-[10px] font-black text-slate-500 uppercase tracking-widest">{{ __('English') }}</span>
+                            </div>
+                            <input type="text" name="names[en]" x-model="formData.names.en" class="luxury-input !py-3 text-base font-bold shadow-sm">
+                        </div>
+                        <div class="space-y-3">
+                            <div class="flex items-center gap-2 h-6">
+                                <span class="px-2.5 py-0.5 rounded-md bg-slate-100 dark:bg-slate-800 text-[10px] font-black text-slate-500 uppercase tracking-widest">{{ __('Japanese') }}</span>
+                            </div>
+                            <input type="text" name="names[ja]" x-model="formData.names.ja" class="luxury-input !py-3 text-base font-bold shadow-sm">
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Basic Specs Section -->
+                <div class="luxury-card p-8 rounded-[2.5rem] animate-luxury-in relative z-[30]" style="animation-delay: 100ms">
+                    <div class="mb-8">
+                        <h2 class="text-xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Basic Specifications') }}</h2>
+                    </div>
+
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                        <div class="grid grid-cols-1 gap-6">
+                            <div class="space-y-3">
+                                <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Barcode') }}</label>
+                                <input type="text" name="barcode" x-model="formData.barcode" class="luxury-input shadow-sm">
+                            </div>
+                            <div class="space-y-3">
+                                <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Manufacturer') }}</label>
+                                <input type="text" name="manufacturer" x-model="formData.manufacturer" class="luxury-input shadow-sm">
+                            </div>
+                        </div>
+                        <div class="grid grid-cols-1 gap-6">
+                            <div class="space-y-3">
+                                <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Specification') }}</label>
+                                <input type="text" name="spec" x-model="formData.spec" class="luxury-input shadow-sm">
+                            </div>
+                            <div class="space-y-3">
+                                <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Category') }}</label>
+                                <x-searchable-select id="product-category" name="category_id" x-model="formData.category_id" :placeholder="__('Uncategorized')">
+                                    <option value="">{{ __('Uncategorized') }}</option>
+                                    @foreach($categories as $category)
+                                        @php
+                                            $catName = $category->name;
+                                            if ($category->name_dictionary_key) {
+                                                $catName = __($category->name_dictionary_key);
+                                            }
+                                        @endphp
+                                        <option value="{{ $category->id }}" {{ $product->category_id == $category->id ? 'selected' : '' }} data-title="{{ $catName }}">{{ $catName }}</option>
+                                    @endforeach
+                                </x-searchable-select>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Pricing Information -->
+                <div class="luxury-card p-8 rounded-[2.5rem] animate-luxury-in relative z-[20]" style="animation-delay: 200ms">
+                    <div class="mb-8">
+                        <h2 class="text-xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Pricing Information') }}</h2>
+                    </div>
+
+                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-8">
+                        <div class="space-y-3">
+                            <label class="text-xs font-black text-emerald-500 uppercase tracking-widest pl-1">{{ __('Retail Price') }} <span class="text-rose-500">*</span></label>
+                            <div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-emerald-500/20 transition-all overflow-hidden">
+                                <button type="button" @click="formData.price = Math.max(0, parseInt(formData.price || 0) - 1)" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-emerald-500 hover:bg-emerald-500/5 active:scale-90 transition-all">
+                                    <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
+                                </button>
+                                <div class="flex-1 min-w-[72px]">
+                                    <input type="number" name="price" x-model="formData.price" required class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
+                                </div>
+                                <button type="button" @click="formData.price = parseInt(formData.price || 0) + 1" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-emerald-500 hover:bg-emerald-500/5 active:scale-90 transition-all">
+                                    <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="space-y-3">
+                            <label class="text-xs font-black text-cyan-500 dark:text-cyan-400 uppercase tracking-widest pl-1">{{ __('Member Price') }} <span class="text-rose-500">*</span></label>
+                            <div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-cyan-500/20 transition-all overflow-hidden">
+                                <button type="button" @click="formData.member_price = Math.max(0, parseInt(formData.member_price || 0) - 1)" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
+                                    <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
+                                </button>
+                                <div class="flex-1 min-w-[72px]">
+                                    <input type="number" name="member_price" x-model="formData.member_price" required class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
+                                </div>
+                                <button type="button" @click="formData.member_price = parseInt(formData.member_price || 0) + 1" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
+                                    <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="space-y-3">
+                            <label class="text-xs font-black text-slate-400 uppercase tracking-widest pl-1">{{ __('Cost') }} <span class="text-rose-500">*</span></label>
+                            <div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-slate-500/20 transition-all overflow-hidden">
+                                <button type="button" @click="formData.cost = Math.max(0, parseInt(formData.cost || 0) - 1)" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-500/5 active:scale-90 transition-all">
+                                    <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
+                                </button>
+                                <div class="flex-1 min-w-[72px]">
+                                    <input type="number" name="cost" x-model="formData.cost" required class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
+                                </div>
+                                <button type="button" @click="formData.cost = parseInt(formData.cost || 0) + 1" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-500/5 active:scale-90 transition-all">
+                                    <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Channel Limits -->
+                <div class="luxury-card p-8 rounded-[2.5rem] animate-luxury-in relative z-[10]" style="animation-delay: 300ms">
+                    <div class="mb-8">
+                        <h2 class="text-xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Channel Limits') }}</h2>
+                    </div>
+
+                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-8">
+                        <div class="space-y-4">
+                            <label class="text-xs font-black text-indigo-500 uppercase tracking-widest pl-1">{{ __('Track Channel Limit') }} <span class="text-rose-500">*</span></label>
+                            <div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-indigo-500/20 transition-all overflow-hidden">
+                                <button type="button" @click="formData.track_limit = Math.max(0, parseInt(formData.track_limit || 0) - 1)" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-indigo-500 hover:bg-indigo-500/5 active:scale-90 transition-all">
+                                    <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
+                                </button>
+                                <div class="flex-1 min-w-[72px]">
+                                    <input type="number" name="track_limit" x-model="formData.track_limit" required class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
+                                </div>
+                                <button type="button" @click="formData.track_limit = parseInt(formData.track_limit || 0) + 1" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-indigo-500 hover:bg-indigo-500/5 active:scale-90 transition-all">
+                                    <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="space-y-4">
+                            <label class="text-xs font-black text-amber-500 uppercase tracking-widest pl-1">{{ __('Spring Channel Limit') }} <span class="text-rose-500">*</span></label>
+                            <div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-amber-500/20 transition-all overflow-hidden">
+                                <button type="button" @click="formData.spring_limit = Math.max(0, parseInt(formData.spring_limit || 0) - 1)" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-amber-500 hover:bg-amber-500/5 active:scale-90 transition-all">
+                                    <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
+                                </button>
+                                <div class="flex-1 min-w-[72px]">
+                                    <input type="number" name="spring_limit" x-model="formData.spring_limit" required class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
+                                </div>
+                                <button type="button" @click="formData.spring_limit = parseInt(formData.spring_limit || 0) + 1" class="shrink-0 w-12 h-full flex items-center justify-center text-slate-400 hover:text-amber-500 hover:bg-amber-500/5 active:scale-90 transition-all">
+                                    <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Advanced Features -->
+                <div class="luxury-card p-8 rounded-[2.5rem] animate-luxury-in overflow-hidden" 
+                     x-show="companySettings.enable_points || companySettings.enable_material_code"
+                     x-transition:enter="transition ease-out duration-300"
+                     x-transition:enter-start="opacity-0 max-h-0"
+                     x-transition:enter-end="opacity-100 max-h-screen"
+                     style="animation-delay: 400ms">
+                    <div class="mb-8">
+                        <h2 class="text-xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Feature Toggles') }}</h2>
+                    </div>
+
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                        <template x-if="companySettings.enable_material_code">
+                            <div class="space-y-3 animate-luxury-in">
+                                <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Material Code') }}</label>
+                                <input type="text" name="metadata[material_code]" x-model="formData.metadata.material_code" class="luxury-input shadow-sm">
+                            </div>
+                        </template>
+
+                        <template x-if="companySettings.enable_points">
+                            <div class="contents">
+                                <div class="space-y-3 animate-luxury-in">
+                                    <label class="text-xs font-black text-cyan-500 uppercase tracking-widest pl-1">{{ __('Full Points') }}</label>
+                                    <div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-cyan-500/20 transition-all overflow-hidden">
+                                        <button type="button" @click="formData.metadata.points_full = Math.max(0, parseInt(formData.metadata.points_full || 0) - 1)" class="shrink-0 w-10 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
+                                            <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
+                                        </button>
+                                        <div class="flex-1 min-w-[60px]">
+                                            <input type="number" name="metadata[points_full]" x-model="formData.metadata.points_full" class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
+                                        </div>
+                                        <button type="button" @click="formData.metadata.points_full = parseInt(formData.metadata.points_full || 0) + 1" class="shrink-0 w-10 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
+                                            <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
+                                        </button>
+                                    </div>
+                                </div>
+                                <div class="space-y-3 animate-luxury-in">
+                                    <label class="text-xs font-black text-cyan-500 uppercase tracking-widest pl-1">{{ __('Half Points') }}</label>
+                                    <div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-cyan-500/20 transition-all overflow-hidden">
+                                        <button type="button" @click="formData.metadata.points_half = Math.max(0, parseInt(formData.metadata.points_half || 0) - 1)" class="shrink-0 w-10 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
+                                            <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
+                                        </button>
+                                        <div class="flex-1 min-w-[60px]">
+                                            <input type="number" name="metadata[points_half]" x-model="formData.metadata.points_half" class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
+                                        </div>
+                                        <button type="button" @click="formData.metadata.points_half = parseInt(formData.metadata.points_half || 0) + 1" class="shrink-0 w-10 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
+                                            <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
+                                        </button>
+                                    </div>
+                                </div>
+                                <div class="space-y-3 animate-luxury-in">
+                                    <label class="text-xs font-black text-cyan-500 uppercase tracking-widest pl-1">{{ __('Half Points Amount') }}</label>
+                                    <div class="flex items-center h-14 rounded-2xl border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 group focus-within:ring-2 focus-within:ring-cyan-500/20 transition-all overflow-hidden">
+                                        <button type="button" @click="formData.metadata.points_half_amount = Math.max(0, parseInt(formData.metadata.points_half_amount || 0) - 1)" class="shrink-0 w-10 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
+                                            <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
+                                        </button>
+                                        <div class="flex-1 min-w-[60px]">
+                                            <input type="number" name="metadata[points_half_amount]" x-model="formData.metadata.points_half_amount" class="w-full bg-transparent border-none text-center font-black text-slate-800 dark:text-white focus:ring-0 text-lg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
+                                        </div>
+                                        <button type="button" @click="formData.metadata.points_half_amount = parseInt(formData.metadata.points_half_amount || 0) + 1" class="shrink-0 w-10 h-full flex items-center justify-center text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 active:scale-90 transition-all">
+                                            <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
+                    </div>
+                </div>
+
+                <!-- Action Bar (Footer) -->
+                <div class="pt-8 flex items-center justify-end gap-4 border-t border-slate-100 dark:border-slate-800 animate-luxury-in" style="animation-delay: 500ms">
+                    <a href="{{ route('admin.data-config.products.index') }}" class="btn-luxury-ghost px-8 h-12">{{ __('Cancel') }}</a>
+                    <button type="submit" form="product-form" class="btn-luxury-primary px-12 h-14 shadow-xl shadow-cyan-500/20">
+                        <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>
+                        <span>{{ __('Save Changes') }}</span>
+                    </button>
+                </div>
+            </div>
+    </form>
+</div>
+@push('styles')
+<style>
+    /* 移除 Chrome, Safari, Edge, Opera 的原生加減按鈕 */
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        appearance: none;
+        margin: 0;
+    }
+    /* 移除 Firefox 的原生加減按鈕 */
+    input[type=number] {
+        -moz-appearance: textfield;
+        appearance: textfield;
+    }
+</style>
+@endpush
+
+@endsection
+
+@section('scripts')
+<script>
+    document.addEventListener('alpine:init', () => {
+        Alpine.data('productForm', (config) => ({
+            categories: config.categories,
+            companies: config.companies,
+            companySettings: config.companySettings,
+            isEditing: config.isEditing,
+            imagePreview: config.product.image_url || null,
+            formData: {
+                ...config.product,
+                names: config.names,
+                remove_image: false,
+                metadata: {
+                    material_code: config.product.metadata?.material_code || '',
+                    points_full: config.product.metadata?.points_full || 0,
+                    points_half: config.product.metadata?.points_half || 0,
+                    points_half_amount: config.product.metadata?.points_half_amount || 0
+                },
+                is_active: config.product.is_active ? true : false
+            },
+
+            handleImageUpload(event) {
+                const file = event.target.files[0];
+                if (file) {
+                    this.formData.remove_image = false;
+                    const reader = new FileReader();
+                    reader.onload = (e) => {
+                        this.imagePreview = e.target.result;
+                    };
+                    reader.readAsDataURL(file);
+                }
+            },
+
+            removeImage() {
+                this.imagePreview = null;
+                this.formData.remove_image = true;
+                this.$refs.imageInput.value = '';
+            }
+        }));
+    });
+</script>
+@endsection

resources/views/admin/products/index.blade.php

@@ -32,12 +32,12 @@ $roleSelectConfig = [
             </p>
         </div>
         <div class="flex items-center gap-3">
-            <button @click="openCreateModal()" class="btn-luxury-primary">
+            <a href="{{ route($baseRoute . '.create') }}" class="btn-luxury-primary">
                 <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                 </svg>
                 <span>{{ __('Add Product') }}</span>
-            </button>
+            </a>
         </div>
     </div>
 
@@ -72,7 +72,7 @@ $roleSelectConfig = [
                         <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">{{ __('Company') }}</th>
                         @endif
                         <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">{{ __('Price / Member') }}</th>
-                        <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">{{ __('Limits (Track/Spring)') }}</th>
+                        <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">{{ __('Channel Limits (Track/Spring)') }}</th>
                         <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">{{ __('Status') }}</th>
                         <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-right">{{ __('Actions') }}</th>
                     </tr>
@@ -102,7 +102,15 @@ $roleSelectConfig = [
                                             }
                                         @endphp
                                         <span class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest bg-slate-100 dark:bg-slate-800 px-1.5 py-0.5 rounded transition-colors group-hover:text-slate-600 dark:group-hover:text-slate-300">{{ $catName }}</span>
-                                        <span class="text-[10px] font-mono font-bold text-cyan-500 tracking-tighter transition-colors group-hover:text-cyan-600 dark:group-hover:text-cyan-400">{{ $product->barcode }}</span>
+                                        @if($companySettings['enable_material_code'] ?? false)
+                                            <div class="flex items-center gap-1.5 bg-slate-100/50 dark:bg-slate-800/50 px-2 py-0.5 rounded-md border border-slate-100 dark:border-slate-800">
+                                                <span class="text-[10px] font-mono font-bold text-cyan-500 tracking-tighter">{{ $product->barcode }}</span>
+                                                <span class="h-1 w-1 rounded-full bg-slate-300 dark:bg-slate-700"></span>
+                                                <span class="text-[10px] font-mono font-bold text-emerald-500 tracking-tighter">{{ $product->metadata['material_code'] ?? '-' }}</span>
+                                            </div>
+                                        @else
+                                            <span class="text-[10px] font-mono font-bold text-cyan-500 tracking-tighter transition-colors group-hover:text-cyan-600 dark:group-hover:text-cyan-400">{{ $product->barcode }}</span>
+                                        @endif
                                     </div>
                                 </div>
                             </div>
@@ -131,12 +139,15 @@ $roleSelectConfig = [
                         </td>
                         <td class="px-6 py-6 text-right">
                             <div class="flex justify-end items-center gap-2">
-                                <button @click='openEditModal(@js($product))' class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 transition-all border border-transparent hover:border-cyan-500/20" title="{{ __('Edit') }}">
-                                    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" /></svg>
-                                </button>
-                                <button type="button" @click="confirmDelete('{{ route($baseRoute . '.destroy', $product->id) }}')" class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-rose-500 hover:bg-rose-500/5 transition-all border border-transparent hover:border-rose-500/20" title="{{ __('Delete Product') }}">
+                                <button type="button" @click="confirmDelete('{{ route($baseRoute . '.destroy', $product->id) }}')" class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-rose-500 hover:bg-rose-500/5 transition-all border border-transparent hover:border-rose-500/20" title="{{ __('Delete') }}">
                                     <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /></svg>
                                 </button>
+                                <a href="{{ route($baseRoute . '.edit', $product->id) }}" class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 transition-all border border-transparent hover:border-cyan-500/20" title="{{ __('Edit') }}">
+                                    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" /></svg>
+                                </a>
+                                <button type="button" @click="viewProductDetail(@js($product))" class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-indigo-500 hover:bg-indigo-500/5 transition-all border border-transparent hover:border-indigo-500/20" title="{{ __('View Details') }}">
+                                    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.644C3.67 8.5 7.652 5 12 5c4.418 0 8.401 3.5 10.014 6.722a1.012 1.012 0 010 .644C20.33 15.5 16.348 19 12 19c-4.412 0-8.401-3.5-10.014-6.722z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+                                </button>
                             </div>
                         </td>
                     </tr>
@@ -155,241 +166,179 @@ $roleSelectConfig = [
         </div>
     </div>
 
-    <!-- User Modal (Unified for Create/Edit) -->
-    <div x-show="showModal" class="fixed inset-0 z-[100] overflow-y-auto" x-cloak>
-        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
-            <div x-show="showModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 transition-opacity bg-slate-900/60 backdrop-blur-sm" @click="showModal = false"></div>
-            <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
-            <div x-show="showModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" class="inline-block px-8 py-10 text-left align-bottom transition-all transform luxury-card rounded-[2.5rem] dark:bg-slate-900 border-slate-200/50 dark:border-slate-700/50 shadow-2xl sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full overflow-visible">
 
-                <div class="flex justify-between items-center mb-10">
-                    <div>
-                        <h2 class="text-xl font-black text-slate-800 dark:text-white font-display tracking-tight flex items-center gap-2">
-                            <span x-text="editing ? '{{ __('Edit Product') }}' : '{{ __('Create Product') }}'"></span>
-                        </h2>
-                    </div>
-                    <button @click="showModal = false" class="p-2 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors">
-                        <svg class="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
-                    </button>
-                </div>
 
-                <form :action="formAction" method="POST" class="space-y-8">
-                    @csrf
-                    <template x-if="editing"><input type="hidden" name="_method" value="PUT"></template>
-
-                    <!-- Language Tabs Custom Implementation -->
-                    <div class="space-y-6">
-                        <div class="space-y-4">
-                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Product Name (Multilingual)') }} <span class="text-rose-500">*</span></label>
-                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                                <div class="space-y-2">
-                                    <div class="flex items-center gap-2 mb-1">
-                                         <span class="px-3 py-1 rounded-md bg-slate-100 dark:bg-slate-800 text-sm font-black text-slate-500">{{ __('Traditional Chinese') }}</span>
-                                     </div>
-                                     <input type="text" name="names[zh_TW]" x-model="currentProduct.names.zh_TW" required class="luxury-input !py-3">
-                                 </div>
-                                 <div class="space-y-2">
-                                     <div class="flex items-center gap-2 mb-1">
-                                         <span class="px-3 py-1 rounded-md bg-slate-100 dark:bg-slate-800 text-sm font-black text-slate-500">{{ __('English') }}</span>
-                                     </div>
-                                     <input type="text" name="names[en]" x-model="currentProduct.names.en" class="luxury-input !py-3">
-                                 </div>
-                                 <div class="space-y-2">
-                                     <div class="flex items-center gap-2 mb-1">
-                                         <span class="px-3 py-1 rounded-md bg-slate-100 dark:bg-slate-800 text-sm font-black text-slate-500">{{ __('Japanese') }}</span>
-                                     </div>
-                                     <input type="text" name="names[ja]" x-model="currentProduct.names.ja" class="luxury-input !py-3">
-                                 </div>
-                            </div>
-                        </div>
-
-                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-                            <div class="space-y-2">
-                                <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Barcode') }}</label>
-                                <input type="text" name="barcode" x-model="currentProduct.barcode" class="luxury-input">
-                            </div>
-                            <div class="space-y-2">
-                                <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Specification') }}</label>
-                                <input type="text" name="spec" x-model="currentProduct.spec" class="luxury-input">
-                            </div>
-                            <div class="space-y-2">
-                                <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Category') }}</label>
-                                <x-searchable-select id="modal-product-category" name="category_id" x-model="currentProduct.category_id" :placeholder="__('Select Category')">
-                                    <option value="">{{ __('Uncategorized') }}</option>
-                                    @foreach($categories as $category)
-                                        @php
-                                            $catName = $category->name;
-                                            if ($category->name_dictionary_key) {
-                                                $catName = __($category->name_dictionary_key);
-                                                if ($catName === $category->name_dictionary_key) {
-                                                    $catName = $category->name;
-                                                }
-                                            }
-                                        @endphp
-                                        <option value="{{ $category->id }}" data-title="{{ $catName }}">{{ $catName }}</option>
-                                    @endforeach
-                                </x-searchable-select>
-                            </div>
-                        </div>
-
-                            <div class="space-y-2">
-                                <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Retail Price') }} <span class="text-rose-500">*</span></label>
-                                <div class="flex items-center gap-2">
-                                    <button type="button" @click="currentProduct.price = Math.max(0, parseInt(currentProduct.price || 0) - 1)" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
-                                        <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
-                                    </button>
-                                    <div class="relative flex-1">
-                                        <input type="number" name="price" x-model="currentProduct.price" required class="luxury-input text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
-                                    </div>
-                                    <button type="button" @click="currentProduct.price = parseInt(currentProduct.price || 0) + 1" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
-                                        <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
-                                    </button>
-                                </div>
-                            </div>
-                            <div class="space-y-2">
-                                <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Member Price') }} <span class="text-rose-500">*</span></label>
-                                <div class="flex items-center gap-2">
-                                    <button type="button" @click="currentProduct.member_price = Math.max(0, parseInt(currentProduct.member_price || 0) - 1)" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
-                                        <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
-                                    </button>
-                                    <div class="relative flex-1">
-                                        <input type="number" name="member_price" x-model="currentProduct.member_price" required class="luxury-input text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
-                                    </div>
-                                    <button type="button" @click="currentProduct.member_price = parseInt(currentProduct.member_price || 0) + 1" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
-                                        <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
-                                    </button>
-                                </div>
-                            </div>
-                            <div class="space-y-2">
-                                <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Cost') }} <span class="text-rose-500">*</span></label>
-                                <div class="flex items-center gap-2">
-                                    <button type="button" @click="currentProduct.cost = Math.max(0, parseInt(currentProduct.cost || 0) - 1)" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
-                                        <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
-                                    </button>
-                                    <div class="relative flex-1">
-                                        <input type="number" name="cost" x-model="currentProduct.cost" required class="luxury-input text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
-                                    </div>
-                                    <button type="button" @click="currentProduct.cost = parseInt(currentProduct.cost || 0) + 1" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
-                                        <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
-                                    </button>
-                                </div>
-                            </div>
-
-                        <!-- Inventory Limits -->
-                        <div class="p-6 rounded-3xl bg-slate-50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-800">
-                             <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                                <div class="space-y-2">
-                                    <label class="text-xs font-black text-indigo-500 uppercase tracking-widest pl-1">{{ __('Track Channel Limit') }} <span class="text-rose-500">*</span></label>
-                                    <div class="flex items-center gap-2">
-                                        <button type="button" @click="currentProduct.track_limit = Math.max(0, parseInt(currentProduct.track_limit || 0) - 1)" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
-                                            <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
-                                        </button>
-                                        <input type="number" name="track_limit" x-model="currentProduct.track_limit" required class="luxury-input border-indigo-500/20 focus:border-indigo-500 focus:ring-indigo-500 text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
-                                        <button type="button" @click="currentProduct.track_limit = parseInt(currentProduct.track_limit || 0) + 1" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
-                                            <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
-                                        </button>
-                                    </div>
-                                </div>
-                                <div class="space-y-2">
-                                    <label class="text-xs font-black text-amber-500 uppercase tracking-widest pl-1">{{ __('Spring Channel Limit') }} <span class="text-rose-500">*</span></label>
-                                    <div class="flex items-center gap-2">
-                                        <button type="button" @click="currentProduct.spring_limit = Math.max(0, parseInt(currentProduct.spring_limit || 0) - 1)" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
-                                            <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
-                                        </button>
-                                        <input type="number" name="spring_limit" x-model="currentProduct.spring_limit" required class="luxury-input border-amber-500/20 focus:border-amber-500 focus:ring-amber-500 text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
-                                        <button type="button" @click="currentProduct.spring_limit = parseInt(currentProduct.spring_limit || 0) + 1" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
-                                            <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
-                                        </button>
-                                    </div>
-                                </div>
-                             </div>
-                        </div>
-
-                        <!-- Feature Toggles Section -->
-                        <template x-if="companySettings.enable_points || companySettings.enable_material_code">
-                            <div class="space-y-6">
-                                <div class="h-px bg-slate-100 dark:bg-slate-800"></div>
-                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                                    <template x-if="companySettings.enable_material_code">
-                                        <div class="space-y-2">
-                                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Material Code') }}</label>
-                                            <input type="text" name="metadata[material_code]" x-model="currentProduct.metadata.material_code" class="luxury-input">
-                                        </div>
-                                    </template>
-                                    <div class="space-y-2">
-                                        <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Active Status') }}</label>
-                                        <div class="flex items-center mt-2">
-                                            <label class="relative inline-flex items-center cursor-pointer">
-                                                <input type="checkbox" name="is_active" value="1" x-model="currentProduct.is_active" class="sr-only peer">
-                                                <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-800 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-cyan-500"></div>
-                                                <span class="ml-3 text-sm font-bold text-slate-500 dark:text-slate-400" x-text="currentProduct.is_active ? '{{ __('Active') }}' : '{{ __('Disabled') }}'"></span>
-                                            </label>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <template x-if="companySettings.enable_points">
-                                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 animate-luxury-in">
-                                        <div class="space-y-2">
-                                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Full Points') }}</label>
-                                            <div class="flex items-center gap-2">
-                                                <button type="button" @click="currentProduct.metadata.points_full = Math.max(0, parseInt(currentProduct.metadata.points_full || 0) - 1)" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
-                                                    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
-                                                </button>
-                                                <input type="number" name="metadata[points_full]" x-model="currentProduct.metadata.points_full" class="luxury-input text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
-                                                <button type="button" @click="currentProduct.metadata.points_full = parseInt(currentProduct.metadata.points_full || 0) + 1" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
-                                                    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
-                                                </button>
-                                            </div>
-                                        </div>
-                                        <div class="space-y-2">
-                                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Half Points') }}</label>
-                                            <div class="flex items-center gap-2">
-                                                <button type="button" @click="currentProduct.metadata.points_half = Math.max(0, parseInt(currentProduct.metadata.points_half || 0) - 1)" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
-                                                    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
-                                                </button>
-                                                <input type="number" name="metadata[points_half]" x-model="currentProduct.metadata.points_half" class="luxury-input text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
-                                                <button type="button" @click="currentProduct.metadata.points_half = parseInt(currentProduct.metadata.points_half || 0) + 1" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
-                                                    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
-                                                </button>
-                                            </div>
-                                        </div>
-                                        <div class="space-y-2">
-                                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Half Points Amount') }}</label>
-                                            <div class="flex items-center gap-2">
-                                                <button type="button" @click="currentProduct.metadata.points_half_amount = Math.max(0, parseInt(currentProduct.metadata.points_half_amount || 0) - 1)" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
-                                                    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
-                                                </button>
-                                                <input type="number" name="metadata[points_half_amount]" x-model="currentProduct.metadata.points_half_amount" class="luxury-input text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
-                                                <button type="button" @click="currentProduct.metadata.points_half_amount = parseInt(currentProduct.metadata.points_half_amount || 0) + 1" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
-                                                    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
-                                                </button>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </template>
-                            </div>
-                        </template>
-
-                        <div class="flex justify-end gap-x-4 pt-10">
-                            <button type="button" @click="showModal = false" class="btn-luxury-ghost px-8">{{ __('Cancel') }}</button>
-                            <button type="submit" class="btn-luxury-primary px-16">
-                                <span x-text="editing ? '{{ __('Update Product') }}' : '{{ __('Save Product') }}'"></span>
-                            </button>
-                        </div>
-                    </div>
-                </form>
-            </div>
-        </div>
-    </div>
-
-    <!-- Delete Confirm Modal (Reuse Global Component if available, or inline) -->
+    <!-- Delete Confirm Modal -->
     <x-delete-confirm-modal :message="__('Are you sure you want to delete this product? All related historical translation data will also be removed.')" />
 
     <form x-ref="deleteForm" :action="deleteFormAction" method="POST" class="hidden">
         @csrf
         @method('DELETE')
     </form>
+
+    <!-- Product Detail Slide-over -->
+    <div x-show="isDetailOpen" 
+         class="fixed inset-0 z-[100] overflow-hidden" 
+         x-cloak
+         role="dialog" aria-modal="true">
+        
+        <!-- Backdrop -->
+        <div x-show="isDetailOpen" 
+             x-transition:enter="ease-in-out duration-500"
+             x-transition:enter-start="opacity-0"
+             x-transition:enter-end="opacity-100"
+             x-transition:leave="ease-in-out duration-500"
+             x-transition:leave-start="opacity-100"
+             x-transition:leave-end="opacity-0"
+             class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity" 
+             @click="isDetailOpen = false"></div>
+
+        <div class="fixed inset-y-0 right-0 max-w-full flex">
+            <!-- Panel -->
+            <div x-show="isDetailOpen"
+                 x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700"
+                 x-transition:enter-start="translate-x-full"
+                 x-transition:enter-end="translate-x-0"
+                 x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700"
+                 x-transition:leave-start="translate-x-0"
+                 x-transition:leave-end="translate-x-full"
+                 class="relative w-screen max-w-2xl"
+                 @click.stop>
+                
+                <div class="h-full flex flex-col bg-white dark:bg-slate-900 shadow-2xl border-l border-slate-200 dark:border-white/10 overflow-y-auto luxury-scrollbar">
+                    <!-- Close Button Overlay -->
+                    <div class="absolute top-6 right-6 z-10">
+                        <button @click="isDetailOpen = false" class="p-2 rounded-full bg-slate-100/80 dark:bg-slate-800/80 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 backdrop-blur-md transition-all hover:rotate-90">
+                            <svg class="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12" /></svg>
+                        </button>
+                    </div>
+
+                    <div class="p-8 md:p-12">
+                        <!-- Header with Status -->
+                        <div class="flex flex-col md:flex-row gap-10 mb-12 animate-luxury-in">
+                            <!-- Image Section -->
+                            <div class="w-full md:w-48 shrink-0">
+                                <div class="aspect-square rounded-[2rem] bg-slate-50 dark:bg-slate-800 flex items-center justify-center overflow-hidden border border-slate-100 dark:border-white/5 shadow-inner group">
+                                    <template x-if="selectedProduct?.image_url">
+                                        <img :src="selectedProduct.image_url" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
+                                    </template>
+                                    <template x-if="!selectedProduct?.image_url">
+                                        <svg class="size-16 text-slate-200 dark:text-slate-700" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" /></svg>
+                                    </template>
+                                </div>
+                            </div>
+
+                            <!-- Identity Section -->
+                            <div class="flex-1 flex flex-col justify-center">
+                                <div class="inline-flex items-center gap-2 mb-4">
+                                    <span class="px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest border transition-all duration-300"
+                                          :class="selectedProduct?.is_active ? 'bg-emerald-500/10 text-emerald-600 border-emerald-500/20 shadow-sm shadow-emerald-500/10' : 'bg-slate-500/10 text-slate-500 border-slate-500/20'">
+                                        <span x-text="selectedProduct?.is_active ? '{{ __('Active') }}' : '{{ __('Disabled') }}'"></span>
+                                    </span>
+                                    <span class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded-lg border border-transparent dark:border-white/5" x-text="getCategoryName(selectedProduct?.category_id)"></span>
+                                </div>
+                                <h2 class="text-4xl font-black text-slate-800 dark:text-white leading-tight font-display tracking-tight" x-text="selectedProduct?.name"></h2>
+                                <p class="text-sm font-mono font-bold text-cyan-500 mt-2 tracking-widest uppercase" x-text="selectedProduct?.barcode"></p>
+                            </div>
+                        </div>
+
+                        <!-- Info Grid -->
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-10 mb-12">
+                            <!-- Pricing Card -->
+                            <div class="luxury-card p-6 rounded-[1.5rem] border border-slate-100 dark:border-white/5 space-y-6">
+                                <h3 class="text-xs font-black text-slate-400 uppercase tracking-[.2em] flex items-center gap-2">
+                                    <svg class="size-4 text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                                    {{ __('Pricing Details') }}
+                                </h3>
+                                <div class="grid grid-cols-2 gap-6">
+                                    <div class="space-y-1">
+                                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('List Price') }}</p>
+                                        <p class="text-2xl font-black text-slate-800 dark:text-white leading-none">$<span x-text="formatNumber(selectedProduct?.price)"></span></p>
+                                    </div>
+                                    <div class="space-y-1">
+                                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Member Price') }}</p>
+                                        <p class="text-2xl font-black text-emerald-500 leading-none">$<span x-text="formatNumber(selectedProduct?.member_price)"></span></p>
+                                    </div>
+                                    <div class="space-y-1 col-span-2 pt-4 border-t border-slate-50 dark:border-white/5">
+                                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Cost Basis') }}</p>
+                                        <p class="text-lg font-bold text-slate-500 leading-none">$<span x-text="formatNumber(selectedProduct?.cost)"></span></p>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Specs Card -->
+                            <div class="luxury-card p-6 rounded-[1.5rem] border border-slate-100 dark:border-white/5 space-y-6">
+                                <h3 class="text-xs font-black text-slate-400 uppercase tracking-[.2em] flex items-center gap-2">
+                                    <svg class="size-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>
+                                    {{ __('Channel Limits') }}
+                                </h3>
+                                <div class="space-y-8">
+                                    <div class="flex items-center justify-between">
+                                        <div class="space-y-1">
+                                            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Track Limit') }}</p>
+                                            <p class="text-3xl font-black text-indigo-500 tracking-tighter" x-text="selectedProduct?.track_limit"></p>
+                                        </div>
+                                        <div class="h-10 w-px bg-slate-100 dark:bg-white/10"></div>
+                                        <div class="space-y-1 text-right">
+                                            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Spring Limit') }}</p>
+                                            <p class="text-3xl font-black text-amber-500 tracking-tighter" x-text="selectedProduct?.spring_limit"></p>
+                                        </div>
+                                    </div>
+                                    <div class="relative h-2 bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
+                                        <div class="absolute inset-y-0 left-0 bg-indigo-500 rounded-full transition-all duration-1000" :style="`width: ${Math.min(100, (selectedProduct?.track_limit / 50) * 100)}%`" x-show="isDetailOpen"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Extended Features Section -->
+                        <div class="luxury-card p-8 rounded-[2rem] bg-slate-50/50 dark:bg-slate-800/30 border border-slate-100 dark:border-white/5 mb-12">
+                            <h3 class="text-xs font-black text-slate-800 dark:text-white uppercase tracking-[0.25em] mb-8 flex items-center gap-3">
+                                <span class="size-2 rounded-full bg-cyan-500 animate-pulse"></span>
+                                {{ __('Feature Configurations') }}
+                            </h3>
+                            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
+                                <div class="space-y-1.5 p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-50 dark:border-white/5">
+                                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Material Code') }}</p>
+                                    <p class="text-sm font-black text-slate-700 dark:text-slate-200 font-mono" x-text="selectedProduct?.metadata?.material_code || '-'"></p>
+                                </div>
+                                <div class="space-y-1.5 p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-50 dark:border-white/5">
+                                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Full Points') }}</p>
+                                    <p class="text-sm font-black text-cyan-600 dark:text-cyan-400 font-mono" x-text="selectedProduct?.metadata?.points_full || '0'"></p>
+                                </div>
+                                <div class="space-y-1.5 p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-50 dark:border-white/5">
+                                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Half Points') }}</p>
+                                    <p class="text-sm font-black text-indigo-600 dark:text-indigo-400 font-mono" x-text="selectedProduct?.metadata?.points_half || '0'"></p>
+                                </div>
+                                <div class="space-y-1.5 p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-50 dark:border-white/5">
+                                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Half Amount') }}</p>
+                                    <p class="text-sm font-black text-emerald-600 dark:text-emerald-400 font-mono" x-text="selectedProduct?.metadata?.points_half_amount || '0'"></p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Footer Timestamps -->
+                        <div class="flex flex-col md:flex-row items-center justify-between gap-4 pt-10 border-t border-slate-100 dark:border-white/5 text-[10px] font-bold text-slate-400 uppercase tracking-[.25em]">
+                            <div class="flex items-center gap-6">
+                                <div class="flex flex-col gap-1">
+                                    <span>{{ __('Created At') }}</span>
+                                    <span class="text-slate-500 dark:text-slate-300 font-mono" x-text="formatDate(selectedProduct?.created_at)"></span>
+                                </div>
+                                <div class="w-px h-8 bg-slate-100 dark:bg-white/10 hidden md:block"></div>
+                                <div class="flex flex-col gap-1">
+                                    <span>{{ __('Updated At') }}</span>
+                                    <span class="text-slate-500 dark:text-slate-300 font-mono" x-text="formatDate(selectedProduct?.updated_at)"></span>
+                                </div>
+                            </div>
+                            <button @click="isDetailOpen = false" class="btn-luxury-secondary px-8 py-3">
+                                {{ __('Close Panel') }}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 @endsection
 
@@ -397,122 +346,40 @@ $roleSelectConfig = [
 <script>
     document.addEventListener('alpine:init', () => {
         Alpine.data('productManager', () => ({
-            showModal: false,
-            editing: false,
+            isDeleteConfirmOpen: false,
+            isDetailOpen: false,
+            deleteFormAction: '',
+            selectedProduct: null,
             categories: [],
-            companySettings: {},
-            urls: {
-                store: '',
-                index: ''
-            },
 
             init() {
                 this.categories = JSON.parse(this.$el.dataset.categories || '[]');
-                this.companySettings = JSON.parse(this.$el.dataset.settings || '{}');
-                this.showModal = JSON.parse(this.$el.dataset.errors || 'false');
-                this.urls.store = this.$el.dataset.storeUrl;
-                this.urls.index = this.$el.dataset.indexUrl;
             },
-            currentProduct: {
-                id: '',
-                names: { zh_TW: '', en: '', ja: '' },
-                barcode: '',
-                spec: '',
-                category_id: '',
-                manufacturer: '',
-                track_limit: 10,
-                spring_limit: 10,
-                price: 0,
-                cost: 0,
-                member_price: 0,
-                metadata: {
-                    material_code: '',
-                    points_full: 0,
-                    points_half: 0,
-                    points_half_amount: 0
-                },
-                is_active: true
-            },
-            isDeleteConfirmOpen: false,
-            deleteFormAction: '',
             
             confirmDelete(action) {
                 this.deleteFormAction = action;
                 this.isDeleteConfirmOpen = true;
             },
 
-            formAction() {
-                if (!this.editing) return this.urls.store;
-                return this.urls.index + '/' + this.currentProduct.id;
-            },
-            openCreateModal() {
-                this.editing = false;
-                this.currentProduct = {
-                    id: '',
-                    names: { zh_TW: '', en: '', ja: '' },
-                    barcode: '',
-                    spec: '',
-                    category_id: '',
-                    manufacturer: '',
-                    track_limit: 10,
-                    spring_limit: 10,
-                    price: 0,
-                    cost: 0,
-                    member_price: 0,
-                    metadata: {
-                        material_code: '',
-                        points_full: 0,
-                        points_half: 0,
-                        points_half_amount: 0
-                    },
-                    is_active: true
-                };
-                this.showModal = true;
-                this.$nextTick(() => {
-                    this.syncSelect('modal-product-category', '');
-                });
+            viewProductDetail(product) {
+                this.selectedProduct = product;
+                this.isDetailOpen = true;
             },
 
-            openEditModal(product) {
-                this.editing = true;
-                
-                // Extract translations
-                let names = { zh_TW: product.name, en: '', ja: '' };
-                if (product.translations) {
-                   product.translations.forEach(t => {
-                       names[t.locale] = t.text;
-                   });
-                }
-
-                this.currentProduct = {
-                    ...product,
-                    names: names,
-                    category_id: product.category_id || '',
-                    metadata: {
-                        material_code: product.metadata?.material_code || '',
-                        points_full: product.metadata?.points_full || 0,
-                        points_half: product.metadata?.points_half || 0,
-                        points_half_amount: product.metadata?.points_half_amount || 0
-                    },
-                    is_active: !!product.is_active
-                };
-                this.showModal = true;
-                this.$nextTick(() => {
-                    this.syncSelect('modal-product-category', this.currentProduct.category_id);
-                });
+            getCategoryName(id) {
+                const category = this.categories.find(c => c.id == id);
+                return category ? (category.name || '{{ __('Uncategorized') }}') : '{{ __('Uncategorized') }}';
             },
 
-            syncSelect(id, value) {
-                const selectElement = document.getElementById(id);
-                if (selectElement) {
-                    selectElement.value = value;
-                    selectElement.dispatchEvent(new Event('change'));
+            formatNumber(val) {
+                if (val === null || val === undefined) return '0';
+                return new Intl.NumberFormat().format(val);
+            },
 
-                    // Preline HSSelect specifically handles the UI sync
-                    if (window.HSSelect && window.HSSelect.getInstance(selectElement)) {
-                        window.HSSelect.getInstance(selectElement).setValue(value);
-                    }
-                }
+            formatDate(dateStr) {
+                if (!dateStr) return '-';
+                const date = new Date(dateStr);
+                return date.toLocaleString();
             }
         }));
     });

resources/views/components/toast.blade.php

@@ -24,8 +24,8 @@ x-init="
             window.dispatchEvent(new CustomEvent('toast', { detail: { message, type } }));
         }
     });
-    @if(session('success')) add('{{ session('success') }}', 'success'); @endif
-    @if(session('error')) add('{{ session('error') }}', 'error'); @endif
+    @if(session('success')) add('{{ addslashes(session('success')) }}', 'success'); @endif
+    @if(session('error')) add('{{ addslashes(session('error')) }}', 'error'); @endif
     @foreach($allErrors as $error) add('{{ addslashes($error) }}', 'error'); @endforeach
 "
 class="fixed top-8 left-1/2 -translate-x-1/2 z-[99999] w-full max-w-sm px-4 space-y-3 pointer-events-none">

tests/Feature/Admin/CompanySettingsTest.php

@@ -0,0 +1,109 @@
+<?php
+
+namespace Tests\Feature\Admin;
+
+use Tests\TestCase;
+use App\Models\System\Company;
+use App\Models\System\User;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Spatie\Permission\Models\Role;
+use Spatie\Permission\Models\Permission;
+
+class CompanySettingsTest extends TestCase
+{
+    use RefreshDatabase;
+
+    protected $admin;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+        
+        // Setup a system admin with permissions
+        $this->admin = User::factory()->create(['company_id' => null]);
+        $this->admin->givePermissionTo(Permission::create(['name' => 'menu.permissions.companies']));
+    }
+
+    public function test_can_update_company_settings()
+    {
+        $company = Company::factory()->create();
+        
+        $settings = [
+            'enable_material_code' => true,
+            'enable_points' => true,
+        ];
+
+        $response = $this->actingAs($this->admin)
+            ->put(route('admin.permission.companies.update', $company->id), [
+                'name' => 'Updated Name',
+                'code' => $company->code,
+                'status' => 1,
+                'settings' => $settings,
+            ]);
+
+        $response->assertRedirect();
+        $this->assertDatabaseHas('companies', [
+            'id' => $company->id,
+            'name' => 'Updated Name',
+        ]);
+        
+        $updatedCompany = Company::find($company->id);
+        $this->assertEquals($settings, $updatedCompany->settings);
+    }
+
+    public function test_can_create_company_with_settings()
+    {
+        $settings = [
+            'enable_material_code' => false,
+            'enable_points' => true,
+        ];
+
+        $response = $this->actingAs($this->admin)
+            ->post(route('admin.permission.companies.store'), [
+                'name' => 'New Company',
+                'code' => 'NEW001',
+                'status' => 1,
+                'settings' => $settings,
+            ]);
+
+        $response->assertRedirect();
+        $company = Company::where('code', 'NEW001')->first();
+        $this->assertNotNull($company);
+        $this->assertEquals($settings, $company->settings);
+    }
+
+    public function test_can_reuse_code_after_deletion()
+    {
+        $code = 'REUSE001';
+        $company = Company::factory()->create(['code' => $code]);
+        
+        // Delete the company
+        $response = $this->actingAs($this->admin)
+            ->delete(route('admin.permission.companies.destroy', $company->id));
+            
+        $response->assertRedirect();
+        $this->assertSoftDeleted('companies', ['id' => $company->id]);
+        
+        // The original code should be freed (renamed in the DB)
+        $this->assertDatabaseMissing('companies', [
+            'id' => $company->id,
+            'code' => $code,
+            'deleted_at' => null
+        ]);
+        
+        // Should be able to create a new company with the same code
+        $response = $this->actingAs($this->admin)
+            ->post(route('admin.permission.companies.store'), [
+                'name' => 'Brand New Company',
+                'code' => $code,
+                'status' => 1,
+            ]);
+            
+        $response->assertRedirect();
+        $this->assertDatabaseHas('companies', [
+            'name' => 'Brand New Company',
+            'code' => $code,
+            'deleted_at' => null
+        ]);
+    }
+}