From 54d62c5378638ca9fc0a19fb93c3e8ddfd2caf48 Mon Sep 17 00:00:00 2001
From: sky121113 <sky121113@gmail.com>
Date: Tue, 31 Mar 2026 13:30:41 +0800
Subject: [PATCH] =?UTF-8?q?[FEAT]=20=E5=AF=A6=E4=BD=9C=E6=A9=9F=E5=8F=B0?=
 =?UTF-8?q?=E5=BB=A3=E5=91=8A=E7=AE=A1=E7=90=86=E6=A8=A1=E7=B5=84=E8=88=87?=
 =?UTF-8?q?=E5=A4=9A=E8=AA=9E=E7=B3=BB=E6=94=AF=E6=8F=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 新增廣告管理列表與機台配置介面，包含多語系 (zh_TW, en, ja) 與完整 CRUD
2. 實作基於 Alpine 的廣告素材預覽輪播功能
3. 優化廣告素材下拉選單，強制綁定所屬公司以達成多租戶資料隔離
4. 重構廣告配置中廣告影片的縮圖渲染邏輯，移除 <video> 標籤以大幅提升頁面載入速度與節省頻寬
5. 放寬個人檔案頭像上傳限制，支援 WebP 格式
---
 .../Admin/AdvertisementController.php         | 221 ++++++
 app/Http/Controllers/ProfileController.php    |   2 +-
 app/Models/Machine/MachineAdvertisement.php   |  43 ++
 app/Models/System/Advertisement.php           |  51 ++
 ..._31_090739_create_advertisements_table.php |  33 +
 ...40_create_machine_advertisements_table.php |  33 +
 lang/en.json                                  |  69 +-
 lang/ja.json                                  |  71 +-
 lang/zh_TW.json                               |  68 +-
 resources/views/admin/ads/index.blade.php     | 720 ++++++++++++++++++
 .../admin/ads/partials/ad-modal.blade.php     | 194 +++++
 .../admin/ads/partials/assign-modal.blade.php |  85 +++
 .../views/components/breadcrumbs.blade.php    |   5 +
 .../components/searchable-select.blade.php    |   1 +
 .../layouts/partials/sidebar-menu.blade.php   |   2 +-
 routes/web.php                                |  17 +-
 16 files changed, 1606 insertions(+), 9 deletions(-)
 create mode 100644 app/Http/Controllers/Admin/AdvertisementController.php
 create mode 100644 app/Models/Machine/MachineAdvertisement.php
 create mode 100644 app/Models/System/Advertisement.php
 create mode 100644 database/migrations/2026_03_31_090739_create_advertisements_table.php
 create mode 100644 database/migrations/2026_03_31_090740_create_machine_advertisements_table.php
 create mode 100644 resources/views/admin/ads/index.blade.php
 create mode 100644 resources/views/admin/ads/partials/ad-modal.blade.php
 create mode 100644 resources/views/admin/ads/partials/assign-modal.blade.php

diff --git a/app/Http/Controllers/Admin/AdvertisementController.php b/app/Http/Controllers/Admin/AdvertisementController.php
new file mode 100644
index 0000000..7a17c50
--- /dev/null
+++ b/app/Http/Controllers/Admin/AdvertisementController.php
@@ -0,0 +1,221 @@
+<?php
+
+namespace App\Http\Controllers\Admin;
+
+use App\Models\Machine\Machine;
+use App\Models\Machine\MachineAdvertisement;
+use App\Models\System\Advertisement;
+use App\Models\System\Company;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Storage;
+
+class AdvertisementController extends AdminController
+{
+    public function index(Request $request)
+    {
+        $user = auth()->user();
+        $tab = $request->input('tab', 'list');
+
+        // Tab 1: 廣告列表
+        $advertisements = Advertisement::with('company')->latest()->paginate(10);
+        $allAds = Advertisement::active()->get();
+
+        // Tab 2: 機台廣告設置 (所需資料)
+        // 取得使用者有權限的機台列表 (已透過 Global Scope 過濾)
+        $machines = Machine::select('id', 'name', 'serial_no', 'company_id')->get();
+
+        $companies = $user->isSystemAdmin() ? Company::orderBy('name')->get() : collect();
+
+        return view('admin.ads.index', [
+            'advertisements' => $advertisements,
+            'machines' => $machines,
+            'tab' => $tab,
+            'allAds' => $allAds,
+            'companies' => $companies,
+        ]);
+    }
+
+    /**
+     * 素材 CRUD: 儲存廣告
+     */
+    public function store(Request $request)
+    {
+        $request->validate([
+            'name' => 'required|string|max:255',
+            'type' => 'required|in:image,video',
+            'duration' => 'required|in:15,30,60',
+            'file' => [
+                'required',
+                'file',
+                'mimes:jpeg,png,jpg,gif,webp,mp4,mov,avi',
+                $request->type === 'image' ? 'max:5120' : 'max:51200', // Image 5MB, Video 50MB
+            ],
+            'company_id' => 'nullable|exists:companies,id',
+        ]);
+
+        $user = auth()->user();
+        $path = $request->file('file')->store('ads', 'public');
+
+        if ($user->isSystemAdmin()) {
+            $companyId = $request->filled('company_id') ? $request->company_id : null;
+        } else {
+            $companyId = $user->company_id;
+        }
+
+        Advertisement::create([
+            'company_id' => $companyId,
+            'name' => $request->name,
+            'type' => $request->type,
+            'duration' => (int) $request->duration,
+            'url' => Storage::disk('public')->url($path),
+            'is_active' => true,
+        ]);
+
+        return redirect()->back()->with('success', __('Advertisement created successfully.'));
+    }
+
+    public function update(Request $request, Advertisement $advertisement)
+    {
+        $rules = [
+            'name' => 'required|string|max:255',
+            'type' => 'required|in:image,video',
+            'duration' => 'required|in:15,30,60',
+            'is_active' => 'boolean',
+            'company_id' => 'nullable|exists:companies,id',
+        ];
+
+        if ($request->hasFile('file')) {
+            $rules['file'] = [
+                'file',
+                'mimes:jpeg,png,jpg,gif,webp,mp4,mov,avi',
+                $request->type === 'image' ? 'max:5120' : 'max:51200',
+            ];
+        }
+
+        $request->validate($rules);
+
+        $data = $request->only(['name', 'type', 'duration']);
+        $data['is_active'] = $request->has('is_active');
+        
+        $user = auth()->user();
+        if ($user->isSystemAdmin()) {
+            $data['company_id'] = $request->filled('company_id') ? $request->company_id : null;
+        }
+
+        if ($request->hasFile('file')) {
+            // 刪除舊檔案
+            $oldPath = str_replace(Storage::disk('public')->url(''), '', $advertisement->url);
+            Storage::disk('public')->delete($oldPath);
+
+            // 存入新檔案
+            $path = $request->file('file')->store('ads', 'public');
+            $data['url'] = Storage::disk('public')->url($path);
+        }
+
+        $advertisement->update($data);
+
+        return redirect()->back()->with('success', __('Advertisement updated successfully.'));
+    }
+
+    public function destroy(Advertisement $advertisement)
+    {
+        // 檢查是否有機台正投放中
+        if ($advertisement->machineAdvertisements()->exists()) {
+            return redirect()->back()->with('error', __('Cannot delete advertisement being used by machines.'));
+        }
+
+        // 刪除實體檔案
+        $path = str_replace(Storage::disk('public')->url(''), '', $advertisement->url);
+        Storage::disk('public')->delete($path);
+
+        $advertisement->delete();
+        return redirect()->back()->with('success', __('Advertisement deleted successfully.'));
+    }
+
+    /**
+     * AJAX: 取得特定機台的廣告投放清單
+     */
+    public function getMachineAds(Machine $machine)
+    {
+        $assignments = MachineAdvertisement::where('machine_id', $machine->id)
+            ->with('advertisement')
+            ->get()
+            ->groupBy('position');
+
+        return response()->json([
+            'success' => true,
+            'data' => $assignments
+        ]);
+    }
+
+    /**
+     * 投放廣告至機台
+     */
+    public function assign(Request $request)
+    {
+        $request->validate([
+            'machine_id' => 'required|exists:machines,id',
+            'advertisement_id' => 'required|exists:advertisements,id',
+            'position' => 'required|in:vending,visit_gift,standby',
+            'sort_order' => 'nullable|integer',
+        ]);
+
+        // If sort_order is not provided, append to the end of the current position list
+        $newSortOrder = $request->sort_order;
+        if (is_null($newSortOrder)) {
+            $newSortOrder = MachineAdvertisement::where('machine_id', $request->machine_id)
+                ->where('position', $request->position)
+                ->max('sort_order') + 1;
+        }
+
+        MachineAdvertisement::updateOrCreate(
+            [
+                'machine_id' => $request->machine_id,
+                'position' => $request->position,
+                'advertisement_id' => $request->advertisement_id,
+            ],
+            [
+                'sort_order' => $newSortOrder,
+            ]
+        );
+
+        return response()->json([
+            'success' => true,
+            'message' => __('Advertisement assigned successfully.')
+        ]);
+    }
+
+    /**
+     * 重新排序廣告播放順序
+     */
+    public function reorderAssignments(Request $request)
+    {
+        $request->validate([
+            'assignment_ids' => 'required|array',
+            'assignment_ids.*' => 'exists:machine_advertisements,id'
+        ]);
+
+        foreach ($request->assignment_ids as $index => $id) {
+            MachineAdvertisement::where('id', $id)->update(['sort_order' => $index]);
+        }
+
+        return response()->json([
+            'success' => true,
+            'message' => __('Order updated successfully.')
+        ]);
+    }
+
+    /**
+     * 移除廣告投放
+     */
+    public function removeAssignment($id)
+    {
+        $assignment = MachineAdvertisement::findOrFail($id);
+        $assignment->delete();
+
+        return response()->json([
+            'success' => true,
+            'message' => __('Assignment removed successfully.')
+        ]);
+    }
+}
diff --git a/app/Http/Controllers/ProfileController.php b/app/Http/Controllers/ProfileController.php
index 70795cf..049ddb1 100644
--- a/app/Http/Controllers/ProfileController.php
+++ b/app/Http/Controllers/ProfileController.php
@@ -48,7 +48,7 @@ class ProfileController extends Controller
     public function updateAvatar(Request $request): \Illuminate\Http\JsonResponse
     {
         $request->validate([
-            'avatar' => ['required', 'image', 'mimes:jpeg,png,jpg,gif', 'max:1024'],
+            'avatar' => ['required', 'image', 'mimes:jpeg,png,jpg,gif,webp', 'max:1024'],
         ]);
 
         $user = $request->user();
diff --git a/app/Models/Machine/MachineAdvertisement.php b/app/Models/Machine/MachineAdvertisement.php
new file mode 100644
index 0000000..a8e3689
--- /dev/null
+++ b/app/Models/Machine/MachineAdvertisement.php
@@ -0,0 +1,43 @@
+<?php
+
+namespace App\Models\Machine;
+
+use App\Models\System\Advertisement;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class MachineAdvertisement extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'machine_id',
+        'advertisement_id',
+        'position',
+        'sort_order',
+        'start_at',
+        'end_at',
+    ];
+
+    protected $casts = [
+        'sort_order' => 'integer',
+        'start_at' => 'datetime',
+        'end_at' => 'datetime',
+    ];
+
+    /**
+     * Get the advertisement associated with this assignment.
+     */
+    public function advertisement()
+    {
+        return $this->belongsTo(Advertisement::class);
+    }
+
+    /**
+     * Get the machine associated with this assignment.
+     */
+    public function machine()
+    {
+        return $this->belongsTo(Machine::class);
+    }
+}
diff --git a/app/Models/System/Advertisement.php b/app/Models/System/Advertisement.php
new file mode 100644
index 0000000..b887c96
--- /dev/null
+++ b/app/Models/System/Advertisement.php
@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Models\System;
+
+use App\Models\Machine\MachineAdvertisement;
+use App\Traits\TenantScoped;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Advertisement extends Model
+{
+    use HasFactory, TenantScoped;
+
+    protected $fillable = [
+        'company_id',
+        'name',
+        'type',
+        'duration',
+        'url',
+        'is_active',
+    ];
+
+    protected $casts = [
+        'duration' => 'integer',
+        'is_active' => 'boolean',
+    ];
+
+    /**
+     * Get the machine assignments for this advertisement.
+     */
+    public function machineAdvertisements()
+    {
+        return $this->hasMany(MachineAdvertisement::class);
+    }
+
+    /**
+     * Get the company that owns the advertisement.
+     */
+    public function company()
+    {
+        return $this->belongsTo(Company::class);
+    }
+
+    /**
+     * Scope a query to only include active advertisements.
+     */
+    public function scopeActive($query)
+    {
+        return $query->where('is_active', true);
+    }
+}
diff --git a/database/migrations/2026_03_31_090739_create_advertisements_table.php b/database/migrations/2026_03_31_090739_create_advertisements_table.php
new file mode 100644
index 0000000..f7e5c76
--- /dev/null
+++ b/database/migrations/2026_03_31_090739_create_advertisements_table.php
@@ -0,0 +1,33 @@
+<?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::create('advertisements', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('company_id')->nullable()->constrained()->onDelete('cascade');
+            $table->string('name');
+            $table->string('type')->default('image'); // image, video
+            $table->integer('duration')->default(15); // 15, 30, 60
+            $table->string('url');
+            $table->boolean('is_active')->default(true);
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('advertisements');
+    }
+};
diff --git a/database/migrations/2026_03_31_090740_create_machine_advertisements_table.php b/database/migrations/2026_03_31_090740_create_machine_advertisements_table.php
new file mode 100644
index 0000000..6d1a6fc
--- /dev/null
+++ b/database/migrations/2026_03_31_090740_create_machine_advertisements_table.php
@@ -0,0 +1,33 @@
+<?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::create('machine_advertisements', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('machine_id')->constrained()->onDelete('cascade');
+            $table->foreignId('advertisement_id')->constrained()->onDelete('cascade');
+            $table->string('position')->comment('vending, visit_gift, standby');
+            $table->integer('sort_order')->default(0);
+            $table->dateTime('start_at')->nullable();
+            $table->dateTime('end_at')->nullable();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('machine_advertisements');
+    }
+};
diff --git a/lang/en.json b/lang/en.json
index 6b15b87..48bda6f 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -800,5 +800,72 @@
     "user": "一般用戶",
     "vs Yesterday": "vs Yesterday",
     "warehouses": "Warehouse Management",
-    "待填寫": "Pending"
+    "待填寫": "Pending",
+    "Advertisement List": "Advertisement List",
+    "Machine Advertisement Settings": "Machine Advertisement Settings",
+    "Add Advertisement": "Add Advertisement",
+    "Edit Advertisement": "Edit Advertisement",
+    "Delete Advertisement": "Delete Advertisement",
+    "Duration": "Duration",
+    "15 Seconds": "15 Seconds",
+    "30 Seconds": "30 Seconds",
+    "60 Seconds": "60 Seconds",
+    "Position": "Position",
+    "Standby Ad": "Standby Ad",
+    "Assign Advertisement": "Assign Advertisement",
+    "Please select a machine first": "Please select a machine first",
+    "Advertisement created successfully": "Ad created successfully",
+    "Advertisement updated successfully": "Ad updated successfully",
+    "Advertisement deleted successfully": "Ad deleted successfully",
+    "Advertisement assigned successfully": "Ad assigned successfully",
+    "Vending": "Vending",
+    "Visit Gift": "Visit Gift",
+    "Standby": "Standby",
+    "Advertisement Video/Image": "Ad Video/Image",
+    "Sort Order": "Sort Order",
+    "Date Range": "Date Range",
+    "Manage ad materials and machine playback settings": "Manage ad materials and machine playback settings",
+    "Preview": "Preview",
+    "No advertisements found.": "No advertisements found.",
+    "vending": "Vending Page",
+    "visit_gift": "Visit Gift",
+    "standby": "Standby AD",
+    "No assignments": "No assignments",
+    "Please select a machine to view and manage its advertisements.": "Please select a machine to view and manage its advertisements.",
+    "Delete Advertisement Confirmation": "Delete Advertisement Confirmation",
+    "Are you sure you want to delete this advertisement? This will also remove all assignments to machines.": "Are you sure you want to delete this advertisement? This will also remove all assignments to machines.",
+    "Manage your ad material details": "Manage your ad material details",
+    "Material Name": "Material Name",
+    "Enter ad material name": "Enter ad material name",
+    "Material Type": "Material Type",
+    "Duration (Seconds)": "Duration (Seconds)",
+    "Seconds": "Seconds",
+    "Upload Image": "Upload Image",
+    "Upload Video": "Upload Video",
+    "Active Status": "Active Status",
+    "Save Material": "Save Material",
+    "Select a material to play on this machine": "Select a material to play on this machine",
+    "Target Position": "Target Position",
+    "Select Material": "Select Material",
+    "Please select a material": "Please select a material",
+    "Playback Order": "Playback Order",
+    "Smallest number plays first.": "Smallest number plays first.",
+    "Confirm Assignment": "Confirm Assignment",
+    "Are you sure you want to remove this assignment?": "Are you sure you want to remove this assignment?",
+    "image": "Image",
+    "video": "Video",
+    "Search Machine...": "Search Machine...",
+    "Advertisement created successfully.": "Advertisement created successfully.",
+    "Advertisement updated successfully.": "Advertisement updated successfully.",
+    "Advertisement deleted successfully.": "Advertisement deleted successfully.",
+    "Cannot delete advertisement being used by machines.": "Cannot delete advertisement being used by machines.",
+    "Advertisement assigned successfully.": "Advertisement assigned successfully.",
+    "Assignment removed successfully.": "Assignment removed successfully.",
+    "Max 5MB": "Max 5MB",
+    "Max 50MB": "Max 50MB",
+    "Select...": "Select...",
+    "Ad Settings": "Ad Settings",
+    "System Default (All Companies)": "System Default (All Companies)",
+    "No materials available": "No materials available",
+    "Search...": "Search..."
 }
\ No newline at end of file
diff --git a/lang/ja.json b/lang/ja.json
index 0a32498..bf0dc40 100644
--- a/lang/ja.json
+++ b/lang/ja.json
@@ -36,7 +36,7 @@
     "Admin Sellable Products": "管理者販売可能商品",
     "Admin display name": "管理者表示名",
     "Administrator": "管理者",
-    "Advertisement Management": "廣告管理",
+    "Advertisement Management": "広告管理",
     "Affiliated Unit": "会社名",
     "Affiliation": "会社名",
     "Alert Summary": "アラート概要",
@@ -803,5 +803,72 @@
     "user": "一般用戶",
     "vs Yesterday": "前日比",
     "warehouses": "倉庫管理",
-    "待填寫": "待填寫"
+    "待填寫": "待填寫",
+    "Advertisement List": "広告リスト",
+    "Machine Advertisement Settings": "機台広告設定",
+    "Add Advertisement": "広告を追加",
+    "Edit Advertisement": "広告を編集",
+    "Delete Advertisement": "広告を削除",
+    "Duration": "再生時間",
+    "15 Seconds": "15秒",
+    "30 Seconds": "30秒",
+    "60 Seconds": "60秒",
+    "Position": "配信位置",
+    "Standby Ad": "待機広告",
+    "Assign Advertisement": "広告を配信",
+    "Please select a machine first": "まず機台を選択してください",
+    "Advertisement created successfully": "広告が正常に作成されました",
+    "Advertisement updated successfully": "広告が正常に更新されました",
+    "Advertisement deleted successfully": "広告が正常に削除されました",
+    "Advertisement assigned successfully": "広告配信が完了しました",
+    "Vending": "販売画面",
+    "Visit Gift": "来店特典",
+    "Standby": "待機広告",
+    "Advertisement Video/Image": "広告動画/画像",
+    "Sort Order": "並べ替え順序",
+    "Date Range": "日時範囲",
+    "Manage ad materials and machine playback settings": "広告素材と機台再生設定を管理します",
+    "Preview": "プレビュー",
+    "No advertisements found.": "広告が見つかりませんでした。",
+    "vending": "販売画面",
+    "visit_gift": "来店特典",
+    "standby": "待機広告",
+    "No assignments": "配信設定なし",
+    "Please select a machine to view and manage its advertisements.": "広告を表示および管理する機台を選択してください。",
+    "Delete Advertisement Confirmation": "広告削除の確認",
+    "Are you sure you want to delete this advertisement? This will also remove all assignments to machines.": "この広告を削除してもよろしいですか？すべての機台への配信設定も削除されます。",
+    "Manage your ad material details": "広告素材の詳細を管理します",
+    "Material Name": "素材名",
+    "Enter ad material name": "素材名を入力してください",
+    "Material Type": "素材タイプ",
+    "Duration (Seconds)": "再生時間（秒）",
+    "Seconds": "秒",
+    "Upload Image": "画像をアップロード",
+    "Upload Video": "動画をアップロード",
+    "Active Status": "有効ステータス",
+    "Save Material": "素材を保存",
+    "Select a material to play on this machine": "この機台で再生する素材を選択してください",
+    "Target Position": "配信位置",
+    "Select Material": "素材を選択",
+    "Please select a material": "素材を選択してください",
+    "Playback Order": "再生順序",
+    "Smallest number plays first.": "数字が小さいほど先に再生されます。",
+    "Confirm Assignment": "配信を確定",
+    "Are you sure you want to remove this assignment?": "この配信設定を削除してもよろしいですか？",
+    "image": "画像",
+    "video": "動画",
+    "Search Machine...": "機台を検索...",
+    "Advertisement created successfully.": "広告が正常に作成されました。",
+    "Advertisement updated successfully.": "広告が正常に更新されました。",
+    "Advertisement deleted successfully.": "広告が正常に削除されました。",
+    "Cannot delete advertisement being used by machines.": "機台で使用中の広告は削除できません。",
+    "Advertisement assigned successfully.": "広告の配信設定が完了しました。",
+    "Assignment removed successfully.": "配信設定が解除されました。",
+    "Max 5MB": "最大 5MB",
+    "Max 50MB": "最大 50MB",
+    "Select...": "選択してください...",
+    "Ad Settings": "広告設定",
+    "System Default (All Companies)": "システムデフォルト（すべての会社）",
+    "No materials available": "利用可能な素材がありません",
+    "Search...": "検索..."
 }
\ No newline at end of file
diff --git a/lang/zh_TW.json b/lang/zh_TW.json
index bed85a6..90f76a8 100644
--- a/lang/zh_TW.json
+++ b/lang/zh_TW.json
@@ -828,5 +828,71 @@
     "user": "一般用戶",
     "vs Yesterday": "較昨日",
     "warehouses": "倉庫管理",
-    "待填寫": "待填寫"
+    "待填寫": "待填寫",
+    "Advertisement List": "廣告列表",
+    "Machine Advertisement Settings": "機台廣告設置",
+    "Add Advertisement": "新增廣告",
+    "Edit Advertisement": "編輯廣告",
+    "Delete Advertisement": "刪除廣告",
+    "Duration": "時長",
+    "15 Seconds": "15 秒",
+    "30 Seconds": "30 秒",
+    "60 Seconds": "60 秒",
+    "Position": "投放位置",
+    "Standby Ad": "待機廣告",
+    "Assign Advertisement": "投放廣告",
+    "Please select a machine first": "請先選擇機台",
+    "Advertisement created successfully": "廣告建立成功",
+    "Advertisement updated successfully": "廣告更新成功",
+    "Advertisement deleted successfully": "廣告刪除成功",
+    "Advertisement assigned successfully": "廣告投放完成",
+    "Vending": "販賣頁",
+    "Visit Gift": "來店禮",
+    "Standby": "待機廣告",
+    "Advertisement Video/Image": "廣告影片/圖片",
+    "Sort Order": "排序",
+    "Date Range": "日期區間",
+    "Manage ad materials and machine playback settings": "管理廣告素材與機台播放設定",
+    "Preview": "預覽",
+    "No advertisements found.": "未找到廣告素材。",
+    "vending": "販賣頁",
+    "visit_gift": "來店禮",
+    "standby": "待機廣告",
+    "No assignments": "尚未投放",
+    "Please select a machine to view and manage its advertisements.": "請選擇一個機台以查看並管理其廣告。",
+    "Delete Advertisement Confirmation": "刪除廣告確認",
+    "Are you sure you want to delete this advertisement? This will also remove all assignments to machines.": "您確定要刪除此廣告嗎？這也將移除所有對機台的投放。",
+    "Manage your ad material details": "管理您的廣告素材詳情",
+    "Material Name": "素材名稱",
+    "Enter ad material name": "輸入廣告素材名稱",
+    "Material Type": "素材類型",
+    "Duration (Seconds)": "播放秒數",
+    "Seconds": "秒",
+    "Upload Image": "上傳圖片",
+    "Upload Video": "上傳影片",
+    "Save Material": "儲存素材",
+    "Select a material to play on this machine": "選擇要在此機台播放的素材",
+    "Target Position": "投放位置",
+    "Select Material": "選擇素材",
+    "Please select a material": "請選擇素材",
+    "Playback Order": "播放順序",
+    "Smallest number plays first.": "數字愈小愈先播放。",
+    "Confirm Assignment": "確認投放",
+    "Are you sure you want to remove this assignment?": "您確定要移除此投放嗎？",
+    "image": "圖片",
+    "video": "影片",
+    "Search Machine...": "搜尋機台...",
+    "Advertisement created successfully.": "廣告建立成功。",
+    "Advertisement updated successfully.": "廣告更新成功。",
+    "Advertisement deleted successfully.": "廣告刪除成功。",
+    "Cannot delete advertisement being used by machines.": "無法刪除正在使用的廣告素材。",
+    "Advertisement assigned successfully.": "廣告投放完成。",
+    "Assignment removed successfully.": "廣告投放已移除。",
+    "Max 5MB": "最大 5MB",
+    "Max 50MB": "最大 50MB",
+    "Select...": "請選擇...",
+    "Ad Settings": "廣告設置",
+    "System Default (All Companies)": "系統預設 (所有公司)",
+    "No materials available": "沒有可用的素材",
+    "Search...": "搜尋..."
 }
\ No newline at end of file
diff --git a/resources/views/admin/ads/index.blade.php b/resources/views/admin/ads/index.blade.php
new file mode 100644
index 0000000..647e681
--- /dev/null
+++ b/resources/views/admin/ads/index.blade.php
@@ -0,0 +1,720 @@
+@extends('layouts.admin')
+
+@php
+$routeName = request()->route()->getName();
+$baseRoute = 'admin.data-config.advertisements';
+@endphp
+
+@section('content')
+<div class="space-y-2 pb-20" 
+     x-data="adManager"
+     data-ads="{{ json_encode($advertisements->items()) }}"
+     data-machines="{{ json_encode($machines) }}"
+     data-all-ads="{{ json_encode($allAds) }}"
+     data-active-tab="{{ $tab }}"
+     data-urls='{
+        "store": "{{ route($baseRoute . ".store") }}",
+        "update": "{{ route($baseRoute . ".update", ":id") }}",
+        "delete": "{{ route($baseRoute . ".destroy", ":id") }}",
+        "getMachineAds": "{{ route($baseRoute . ".machine.get", ":id") }}",
+        "assign": "{{ route($baseRoute . ".assign") }}",
+        "reorder": "{{ route($baseRoute . ".assignments.reorder") }}",
+        "removeAssignment": "{{ route($baseRoute . ".assignment.remove", ":id") }}"
+     }'>
+    
+    <!-- Header -->
+    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
+        <div>
+            <h1 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight">{{ __('Advertisement Management') }}</h1>
+            <p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest">
+                {{ __('Manage ad materials and machine playback settings') }}
+            </p>
+        </div>
+        <div class="flex items-center gap-3" x-show="activeTab === 'list'">
+            <button @click="openAddModal()" 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 Advertisement') }}</span>
+            </button>
+        </div>
+    </div>
+
+    <!-- Tabs Navigation (Pills Style match Machine List) -->
+    <div class="flex items-center gap-1 p-1.5 bg-slate-100 dark:bg-slate-900/50 rounded-2xl w-fit border border-slate-200/50 dark:border-slate-800/50" aria-label="Tabs">
+        <button type="button" 
+                @click="activeTab = 'list'"
+                :class="activeTab === 'list' ? 'bg-white dark:bg-slate-800 text-cyan-600 dark:text-cyan-400 shadow-sm shadow-cyan-500/10' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-200'"
+                class="px-8 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all duration-300">
+            {{ __('Advertisement List') }}
+        </button>
+        <button type="button" 
+                @click="activeTab = 'machine'"
+                :class="activeTab === 'machine' ? 'bg-white dark:bg-slate-800 text-cyan-600 dark:text-cyan-400 shadow-sm shadow-cyan-500/10' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-200'"
+                class="px-8 py-3 rounded-xl text-sm font-black uppercase tracking-widest transition-all duration-300">
+            {{ __('Machine Advertisement Settings') }}
+        </button>
+    </div>
+
+    <!-- Tab Contents -->
+    <div class="mt-6">
+        <!-- List Tab -->
+        <div x-show="activeTab === 'list'" class="luxury-card rounded-3xl p-8 animate-luxury-in" x-cloak>
+            <div class="overflow-x-auto">
+                <table class="w-full text-left border-separate border-spacing-y-0">
+                    <thead>
+                        <tr class="bg-slate-50/50 dark:bg-slate-900/10">
+                            <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">{{ __('Preview') }}</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">{{ __('Name') }}</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 text-left">{{ __('Company Name') }}</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">{{ __('Type') }}</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">{{ __('Duration') }}</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>
+                    </thead>
+                    <tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
+                        @forelse($advertisements as $ad)
+                        <tr class="group hover:bg-slate-50/80 dark:hover:bg-slate-800/40 transition-all duration-300">
+                            <td class="px-6 py-4">
+                                <div @click="openPreview(@js($ad))" 
+                                     class="w-16 h-9 rounded-lg bg-slate-100 dark:bg-slate-800 overflow-hidden shadow-sm border border-slate-200 dark:border-white/5 cursor-pointer hover:scale-105 hover:shadow-cyan-500/20 transition-all duration-300">
+                                    @if($ad->type === 'image')
+                                        <img src="{{ $ad->url }}" class="w-full h-full object-cover">
+                                    @else
+                                        <div class="w-full h-full flex items-center justify-center bg-slate-900 group-hover:bg-cyan-900 transition-colors">
+                                            <svg class="size-4 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5.14v14l11-7-11-7z"/></svg>
+                                        </div>
+                                    @endif
+                                </div>
+                            </td>
+                            <td @click="openPreview(@js($ad))" 
+                                class="px-6 py-4 whitespace-nowrap text-sm font-extrabold text-slate-800 dark:text-slate-100 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors cursor-pointer">
+                                {{ $ad->name }}
+                            </td>
+                            @if(auth()->user()->isSystemAdmin())
+                                <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-slate-600 dark:text-slate-300">
+                                    {{ $ad->company->name ?? __('System Default') }}
+                                </td>
+                            @endif
+                            <td class="px-6 py-4 text-center">
+                                <span class="text-[10px] font-black uppercase tracking-widest px-2 py-0.5 rounded-full {{ $ad->type === 'video' ? 'bg-indigo-500/10 text-indigo-500 border border-indigo-500/20' : 'bg-cyan-500/10 text-cyan-500 border border-cyan-500/20' }}">
+                                    {{ __($ad->type) }}
+                                </span>
+                            </td>
+                            <td class="px-6 py-4 text-center whitespace-nowrap text-sm font-black text-slate-700 dark:text-slate-200">
+                                {{ $ad->duration }}s
+                            </td>
+                            <td class="px-6 py-4 text-center">
+                                @if($ad->is_active)
+                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-[11px] font-black bg-emerald-500/10 text-emerald-500 border border-emerald-500/20 tracking-widest uppercase">{{ __('Active') }}</span>
+                                @else
+                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-[11px] font-black bg-rose-500/10 text-rose-500 border border-rose-500/20 tracking-widest uppercase">{{ __('Disabled') }}</span>
+                                @endif
+                            </td>
+                            <td class="px-6 py-4 text-right">
+                                <div class="flex justify-end items-center gap-2">
+                                    <button @click="openEditModal(@js($ad))" 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">
+                                        <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 @click="confirmDelete(@js($ad->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">
+                                        <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>
+                                </div>
+                            </td>
+                        </tr>
+                        @empty
+                        <tr>
+                            <td colspan="{{ auth()->user()->isSystemAdmin() ? 7 : 6 }}" class="px-6 py-20 text-center text-slate-400 italic">{{ __('No advertisements found.') }}</td>
+                        </tr>
+                        @endforelse
+                    </tbody>
+                </table>
+            </div>
+            <div class="mt-8">
+                {{ $advertisements->links('vendor.pagination.luxury') }}
+            </div>
+        </div>
+
+        <!-- Machine View Tab -->
+        <div x-show="activeTab === 'machine'" class="space-y-6" x-cloak>
+            <div class="luxury-card rounded-3xl p-8 animate-luxury-in">
+                <!-- Machine Filter -->
+                <div class="max-w-md mx-auto mb-10">
+                    <label class="block text-sm font-black text-slate-700 dark:text-slate-200 mb-3 text-center uppercase tracking-widest">{{ __('Please select a machine first') }}</label>
+                    <x-searchable-select 
+                        name="machine_selector" 
+                        :options="$machines->map(fn($m) => (object)['id' => $m->id, 'name' => $m->name . ' (' . $m->serial_no . ')'])" 
+                        placeholder="{{ __('Search Machine...') }}"
+                        @change="selectMachine($event.target.value)"
+                    />
+                </div>
+
+                <div x-show="selectedMachineId" class="animate-luxury-in">
+                    <!-- Positions Grid -->
+                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                        @foreach(['vending', 'visit_gift', 'standby'] as $pos)
+                        <div class="space-y-4">
+                            <div class="flex items-center justify-between px-2">
+                                <h3 class="text-sm font-black text-slate-800 dark:text-white uppercase tracking-widest flex items-center gap-2">
+                                    <span class="w-1.5 h-1.5 rounded-full bg-cyan-500"></span>
+                                    {{ __($pos) }}
+                                </h3>
+                                <div class="flex items-center gap-2">
+                                    <button x-cloak x-show="machineAds['{{ $pos }}'] && machineAds['{{ $pos }}'].length > 0"
+                                            @click="startSequencePreview('{{ $pos }}')"
+                                            class="p-1.5 px-3 text-[10px] font-black bg-slate-800 dark:bg-slate-700 text-white rounded-lg hover:bg-slate-700 transition-colors uppercase flex items-center gap-1">
+                                        <svg class="size-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                                        {{ __('Preview') }}
+                                    </button>
+                                    <button @click="openAssignModal('{{ $pos }}')" class="p-1.5 px-3 text-[10px] font-black bg-cyan-500 text-white rounded-lg hover:bg-cyan-600 transition-colors uppercase shadow-sm shadow-cyan-500/20 flex items-center gap-1">
+                                        <svg class="size-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4.5v15m7.5-7.5h-15" /></svg>
+                                        {{ __('Ad Settings') }}
+                                    </button>
+                                </div>
+                            </div>
+                            
+                            <div class="luxury-card p-4 bg-slate-50/50 dark:bg-slate-900/40 border border-slate-100 dark:border-white/5 space-y-3 min-h-[150px]">
+                                <template x-if="!machineAds['{{ $pos }}'] || machineAds['{{ $pos }}'].length === 0">
+                                    <div class="flex flex-col items-center justify-center h-full py-10">
+                                        <svg class="size-6 text-slate-300 dark:text-slate-600 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v6m-3-3h6m-9-3a9 9 0 1118 0 9 9 0 01-18 0z"/></svg>
+                                        <span class="text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-slate-500">{{ __('No assignments') }}</span>
+                                    </div>
+                                </template>
+                                
+                                <template x-for="(assign, index) in machineAds['{{ $pos }}']" :key="assign.id">
+                                    <div class="flex items-center gap-4 bg-white dark:bg-slate-800 p-3 rounded-xl border border-slate-100 dark:border-white/5 shadow-sm group hover:border-cyan-500/30 transition-all">
+                                        <!-- Sort Controls -->
+                                        <div class="flex flex-col gap-1 shrink-0 bg-slate-50 dark:bg-slate-900 rounded-lg p-1 border border-slate-100 dark:border-white/5">
+                                            <button @click.prevent="moveUp('{{ $pos }}', index)" :disabled="index === 0" class="p-1 text-slate-400 hover:text-cyan-500 disabled:opacity-30 disabled:hover:text-slate-400 transition-colors">
+                                                <svg class="size-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" /></svg>
+                                            </button>
+                                            <button @click.prevent="moveDown('{{ $pos }}', index)" :disabled="index === machineAds['{{ $pos }}'].length - 1" class="p-1 text-slate-400 hover:text-cyan-500 disabled:opacity-30 disabled:hover:text-slate-400 transition-colors">
+                                                <svg class="size-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg>
+                                            </button>
+                                        </div>
+
+                                        <button @click="openPreview(assign.advertisement)" class="w-12 h-12 rounded-lg bg-slate-100 dark:bg-slate-900 border border-white/5 overflow-hidden shrink-0 hover:border-cyan-500/50 hover:shadow-[0_0_15px_rgba(6,182,212,0.3)] transition-all relative group/thumb">
+                                            <div class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover/thumb:opacity-100 transition-opacity z-10">
+                                                <svg class="size-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>
+                                            </div>
+                                            <template x-if="assign.advertisement.type === 'image'">
+                                                <img :src="assign.advertisement.url" class="w-full h-full object-cover">
+                                            </template>
+                                            <template x-if="assign.advertisement.type === 'video'">
+                                                <div class="w-full h-full flex items-center justify-center bg-slate-900 group-hover/thumb:bg-cyan-900 transition-colors">
+                                                    <svg class="size-4 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5.14v14l11-7-11-7z"/></svg>
+                                                </div>
+                                            </template>
+                                        </button>
+                                        <div class="flex-1 min-w-0 flex flex-col justify-center cursor-pointer group-hover:text-cyan-500 transition-colors" @click="openPreview(assign.advertisement)">
+                                            <p class="text-xs font-black text-slate-700 dark:text-white truncate transition-colors" x-text="assign.advertisement.name"></p>
+                                            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-tighter mt-0.5" x-text="assign.advertisement.duration + 's'"></p>
+                                        </div>
+                                        <button @click="removeAssignment(assign.id)" class="p-1.5 text-slate-300 hover:text-rose-500 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="M6 18L18 6M6 6l12 12" /></svg>
+                                        </button>
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
+                        @endforeach
+                    </div>
+                </div>
+
+                <div x-show="!selectedMachineId" class="py-20 text-center text-slate-400 italic">
+                    {{ __('Please select a machine to view and manage its advertisements.') }}
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Modals -->
+    @include('admin.ads.partials.ad-modal')
+    @include('admin.ads.partials.assign-modal')
+
+    <!-- Preview Modal -->
+    <div x-show="isPreviewOpen" 
+         class="fixed inset-0 z-[120] flex items-center justify-center p-4 sm:p-6" 
+         x-cloak
+         x-transition:enter="transition ease-out duration-300"
+         x-transition:enter-start="opacity-0"
+         x-transition:enter-end="opacity-100"
+         x-transition:leave="transition ease-in duration-200"
+         x-transition:leave-start="opacity-100"
+         x-transition:leave-end="opacity-0"
+         @keydown.escape.window="isPreviewOpen = false">
+        
+        <div class="fixed inset-0 bg-slate-950/90 backdrop-blur-xl" @click="isPreviewOpen = false"></div>
+
+        <div class="relative max-w-5xl w-full max-h-[90vh] flex flex-col items-center justify-center animate-luxury-in">
+            <!-- Close Button -->
+            <button @click="isPreviewOpen = false" 
+                    class="absolute -top-12 right-0 p-2 text-white/50 hover:text-white transition-colors">
+                <svg class="size-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
+            </button>
+
+            <!-- Content Area -->
+            <div class="w-full bg-slate-900/40 rounded-[2rem] border border-white/5 overflow-hidden shadow-2xl flex items-center justify-center">
+                <template x-if="isPreviewOpen && previewAd.type === 'image'">
+                    <img :src="previewAd.url" class="max-w-full max-h-[80vh] object-contain shadow-2xl">
+                </template>
+                <template x-if="isPreviewOpen && previewAd.type === 'video'">
+                    <video :src="previewAd.url" controls autoplay class="max-w-full max-h-[80vh] shadow-2xl"></video>
+                </template>
+            </div>
+
+            <!-- Footer Info -->
+            <div class="mt-4 text-center">
+                <h4 class="text-white font-black text-lg uppercase tracking-widest" x-text="previewAd.name"></h4>
+                <p class="text-white/40 text-[10px] font-bold uppercase tracking-[0.2em] mt-1" x-text="previewAd.type + ' | ' + previewAd.duration + 's'"></p>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Sequence Preview Modal -->
+    <div x-show="isSequencePreviewOpen" 
+         class="fixed inset-0 z-[120] flex items-center justify-center p-4 sm:p-6" 
+         x-cloak
+         x-transition:enter="transition ease-out duration-300"
+         x-transition:enter-start="opacity-0"
+         x-transition:enter-end="opacity-100"
+         x-transition:leave="transition ease-in duration-200"
+         x-transition:leave-start="opacity-100"
+         x-transition:leave-end="opacity-0"
+         @keydown.escape.window="stopSequencePreview()">
+        
+        <div class="fixed inset-0 bg-slate-950/95 backdrop-blur-md" @click="stopSequencePreview()"></div>
+
+        <div class="relative w-full max-w-5xl h-[85vh] flex flex-col items-center justify-center animate-luxury-in" x-show="currentSequenceAd">
+            
+            <!-- Close Button -->
+            <button @click="stopSequencePreview()" 
+                    class="absolute -top-12 right-0 p-2 text-white/50 hover:text-white transition-colors">
+                <svg class="size-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
+            </button>
+
+            <!-- Media Container -->
+            <div class="relative w-full h-full bg-slate-900 rounded-[2rem] border border-white/5 overflow-hidden shadow-2xl flex items-center justify-center">
+                
+                <template x-if="currentSequenceAd && currentSequenceAd.advertisement.type === 'image'">
+                    <img :src="currentSequenceAd.advertisement.url" 
+                         class="max-w-full max-h-full object-contain animate-luxury-in"
+                         :key="'img-'+currentSequenceAd.id">
+                </template>
+
+                <template x-if="currentSequenceAd && currentSequenceAd.advertisement.type === 'video'">
+                    <video :src="currentSequenceAd.advertisement.url" 
+                           autoplay muted playsinline 
+                           class="max-w-full max-h-full object-contain animate-luxury-in"
+                           :key="'vid-'+currentSequenceAd.id"></video>
+                </template>
+
+                <!-- Progress Bar -->
+                <div class="absolute bottom-0 left-0 h-1.5 bg-cyan-500 transition-all duration-100 ease-linear" 
+                     :style="'width: ' + sequenceProgress + '%'"></div>
+            </div>
+
+            <!-- Header Info -->
+            <div class="absolute top-6 left-6 right-6 flex items-center justify-between z-10 w-[calc(100%-3rem)]">
+                <div class="bg-black/60 backdrop-blur-md rounded-xl px-4 py-2 border border-white/10 flex items-center gap-3">
+                    <span class="text-white font-black tracking-widest text-sm" x-text="currentSequenceAd?.advertisement.name"></span>
+                    <span class="w-1.5 h-1.5 rounded-full bg-white/20"></span>
+                    <span class="text-cyan-400 font-black tracking-widest text-xs uppercase" x-text="(currentSequenceIndex + 1) + ' / ' + sequenceAds.length"></span>
+                    <span class="w-1.5 h-1.5 rounded-full bg-white/20"></span>
+                    <span class="text-white/80 font-bold tracking-widest text-xs tabular-nums" x-text="Math.ceil(sequenceRemainingTime) + 's'"></span>
+                </div>
+                
+                <div class="flex items-center gap-2">
+                    <button @click.stop="prevSequenceAd()" class="p-2.5 bg-black/60 backdrop-blur-md rounded-xl border border-white/10 text-white hover:bg-white/20 transition-all group">
+                        <svg class="size-5 group-hover:-translate-x-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7"/></svg>
+                    </button>
+                    <!-- Play/Pause -->
+                    <button @click.stop="toggleSequencePlay()" class="p-3 bg-cyan-500 backdrop-blur-md rounded-xl border border-cyan-400/30 text-white hover:bg-cyan-400 transition-all shadow-[0_0_15px_rgba(6,182,212,0.4)]">
+                        <svg x-show="!isSequencePaused" class="size-5" fill="currentColor" viewBox="0 0 24 24"><path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/></svg>
+                        <svg x-show="isSequencePaused" class="size-5 ml-0.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+                    </button>
+                    <button @click.stop="nextSequenceAd()" class="p-2.5 bg-black/60 backdrop-blur-md rounded-xl border border-white/10 text-white hover:bg-white/20 transition-all group">
+                        <svg class="size-5 group-hover:translate-x-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"/></svg>
+                    </button>
+                </div>
+            </div>
+
+        </div>
+    </div>
+    
+    <x-delete-confirm-modal 
+        :title="__('Delete Advertisement Confirmation')"
+        :message="__('Are you sure you want to delete this advertisement? This will also remove all assignments to machines.')" 
+    />
+</div>
+@endsection
+
+@section('scripts')
+<script>
+    document.addEventListener('alpine:init', () => {
+        Alpine.data('adManager', () => ({
+            activeTab: 'list',
+            selectedMachineId: null,
+            machines: [],
+            allAds: [],
+            machineAds: {
+                vending: [],
+                visit_gift: [],
+                standby: []
+            },
+            urls: {},
+            
+            // Ad CRUD Modal
+            isAdModalOpen: false,
+            isDeleteConfirmOpen: false,
+            deleteFormAction: '',
+            
+            // Preview
+            isPreviewOpen: false,
+            previewAd: { url: '', type: '', name: '', duration: 15 },
+
+            adFormMode: 'add',
+            fileName: '',
+            adForm: {
+                id: null,
+                name: '',
+                type: 'image',
+                duration: 15,
+                is_active: true
+            },
+            
+            // Assign Modal
+            isAssignModalOpen: false,
+            assignForm: {
+                machine_id: null,
+                advertisement_id: '',
+                position: ''
+            },
+            
+            // Sequence Preview
+            isSequencePreviewOpen: false,
+            sequenceAds: [],
+            currentSequenceIndex: 0,
+            sequenceInterval: null,
+            sequenceRemainingTime: 0,
+            sequenceProgress: 0,
+            isSequencePaused: false,
+            
+            get currentSequenceAd() {
+                return this.sequenceAds[this.currentSequenceIndex] || null;
+            },
+
+            startSequencePreview(pos) {
+                if (!this.machineAds[pos] || this.machineAds[pos].length === 0) return;
+                this.sequenceAds = this.machineAds[pos];
+                this.currentSequenceIndex = 0;
+                this.isSequencePreviewOpen = true;
+                this.isSequencePaused = false;
+                
+                this.playSequenceAd();
+            },
+
+            stopSequencePreview() {
+                this.isSequencePreviewOpen = false;
+                this.clearSequenceTimers();
+            },
+
+            clearSequenceTimers() {
+                if (this.sequenceInterval) clearInterval(this.sequenceInterval);
+            },
+
+            playSequenceAd() {
+                this.clearSequenceTimers();
+                
+                if (this.isSequencePaused) return;
+
+                const currentAd = this.currentSequenceAd?.advertisement;
+                if (!currentAd) return;
+                
+                this.sequenceRemainingTime = currentAd.duration;
+                this.sequenceProgress = 0;
+                
+                this.sequenceInterval = setInterval(() => {
+                    if (this.isSequencePaused) return;
+                    
+                    this.sequenceRemainingTime -= 0.1;
+                    this.sequenceProgress = ((currentAd.duration - this.sequenceRemainingTime) / currentAd.duration) * 100;
+                    
+                    if (this.sequenceRemainingTime <= 0) {
+                        this.nextSequenceAd();
+                    }
+                }, 100);
+            },
+
+            toggleSequencePlay() {
+                this.isSequencePaused = !this.isSequencePaused;
+            },
+
+            nextSequenceAd() {
+                this.currentSequenceIndex++;
+                if (this.currentSequenceIndex >= this.sequenceAds.length) {
+                    this.currentSequenceIndex = 0; // Loop back
+                }
+                this.playSequenceAd();
+            },
+
+            prevSequenceAd() {
+                this.currentSequenceIndex--;
+                if (this.currentSequenceIndex < 0) {
+                    this.currentSequenceIndex = this.sequenceAds.length - 1;
+                }
+                this.playSequenceAd();
+            },
+            
+            openPreview(ad) {
+                this.previewAd = { ...ad };
+                this.isPreviewOpen = true;
+            },
+
+            // Sort Reordering logic
+            moveUp(position, index) {
+                if (index > 0) {
+                    const list = this.machineAds[position];
+                    const temp = list[index];
+                    list[index] = list[index - 1];
+                    list[index - 1] = temp;
+                    this.syncSortOrder(position);
+                }
+            },
+            
+            moveDown(position, index) {
+                const list = this.machineAds[position];
+                if (index < list.length - 1) {
+                    const temp = list[index];
+                    list[index] = list[index + 1];
+                    list[index + 1] = temp;
+                    this.syncSortOrder(position);
+                }
+            },
+
+            async syncSortOrder(position) {
+                const list = this.machineAds[position];
+                const assignmentIds = list.map(item => item.id);
+                try {
+                    const response = await fetch(this.urls.reorder, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                        },
+                        body: JSON.stringify({ assignment_ids: assignmentIds })
+                    });
+                    const result = await response.json();
+                    if (result.success) {
+                        window.showToast?.(result.message, 'success');
+                    } else {
+                        window.showToast?.(result.message || 'Error', 'error');
+                        this.fetchMachineAds(); // 如果更新失敗，重取恢復畫面原本樣子
+                    }
+                } catch (e) {
+                    console.error('Failed to update sort order', e);
+                    window.showToast?.('System Error', 'error');
+                }
+            },
+
+            handleFileChange(e) {
+                const file = e.target.files[0];
+                if (file) {
+                    this.fileName = file.name;
+                }
+            },
+
+            async submitAssignment() {
+                try {
+                    const response = await fetch(this.urls.assign, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                        },
+                        body: JSON.stringify(this.assignForm)
+                    });
+                    const result = await response.json();
+                    if (result.success) {
+                        this.isAssignModalOpen = false;
+                        this.fetchMachineAds();
+                        window.showToast?.(result.message, 'success');
+                    } else {
+                        window.showToast?.(result.message || 'Error', 'error');
+                    }
+                } catch (e) {
+                    console.error('Failed to assign ad', e);
+                }
+            },
+            
+            init() {
+                this.urls = JSON.parse(this.$el.dataset.urls);
+                this.machines = JSON.parse(this.$el.dataset.machines || '[]');
+                this.allAds = JSON.parse(this.$el.dataset.allAds || '[]');
+                this.activeTab = this.$el.dataset.activeTab || 'list';
+
+                // Sync custom selects when modals open
+                this.$watch('isAdModalOpen', value => {
+                    if (value) {
+                        this.$nextTick(() => {
+                            window.HSSelect.getInstance('#ad_type_select')?.setValue(this.adForm.type);
+                            window.HSSelect.getInstance('#ad_duration_select')?.setValue(this.adForm.duration.toString());
+                            if (document.querySelector('#ad_company_select')) {
+                                window.HSSelect.getInstance('#ad_company_select')?.setValue(this.adForm.company_id || '');
+                            }
+                        });
+                    }
+                });
+
+
+            },
+            
+            selectMachine(id) {
+                if (!id || id === ' ') {
+                    this.selectedMachineId = null;
+                    return;
+                }
+                this.selectedMachineId = id;
+                this.fetchMachineAds();
+            },
+            
+            async fetchMachineAds() {
+                const url = this.urls.getMachineAds.replace(':id', this.selectedMachineId);
+                try {
+                    const response = await fetch(url);
+                    const result = await response.json();
+                    if (result.success) {
+                        this.machineAds = {
+                            vending: result.data.vending || [],
+                            visit_gift: result.data.visit_gift || [],
+                            standby: result.data.standby || []
+                        };
+                    }
+                } catch (e) {
+                    console.error('Failed to fetch machine ads', e);
+                }
+            },
+            
+            openAddModal() {
+                this.adFormMode = 'add';
+                this.adForm = { id: null, company_id: '', name: '', type: 'image', duration: 15, is_active: true };
+                this.isAdModalOpen = true;
+            },
+            
+            openEditModal(ad) {
+                this.adFormMode = 'edit';
+                this.adForm = { ...ad };
+                this.isAdModalOpen = true;
+            },
+            
+            openAssignModal(pos) {
+                this.assignForm = {
+                    machine_id: this.selectedMachineId,
+                    advertisement_id: '',
+                    position: pos,
+                    sort_order: this.machineAds[pos]?.length || 0
+                };
+                
+                this.updateAssignSelect();
+                this.isAssignModalOpen = true;
+            },
+            
+            updateAssignSelect() {
+                const machine = this.machines.find(m => m.id == this.selectedMachineId);
+                const companyId = machine ? machine.company_id : null;
+                
+                // 篩選出同公司的素材（或是系統層級的共通素材如果 company_id 為 null）
+                // 若沒有特別設定，通常 null 為系統共用
+                const filteredAds = this.allAds.filter(ad => ad.company_id == companyId || ad.company_id == null);
+                
+                const wrapper = document.getElementById('assign_ad_select_wrapper');
+                if (!wrapper) return;
+                wrapper.innerHTML = '';
+                
+                const selectEl = document.createElement('select');
+                selectEl.name = 'advertisement_id';
+                selectEl.id = 'assign_ad_select_' + Date.now();
+                selectEl.className = 'hidden';
+                
+                const configStr = JSON.stringify({
+                  "placeholder": "{{ __('Please select a material') }}",
+                  "hasSearch": true,
+                  "searchPlaceholder": "{{ __('Search...') }}",
+                  "isHidePlaceholder": false,
+                  "searchClasses": "block w-[calc(100%-16px)] mx-2 py-2 px-3 text-sm border-slate-200 dark:border-white/10 rounded-lg focus:border-cyan-500 focus:ring-cyan-500 bg-slate-50 dark:bg-slate-900/50 dark:text-slate-200 placeholder:text-slate-400 dark:placeholder:text-slate-500",
+                  "searchWrapperClasses": "sticky top-0 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md p-2 z-10",
+                  "toggleClasses": "hs-select-toggle luxury-select-toggle",
+                  "dropdownClasses": "hs-select-menu w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-white/10 rounded-xl shadow-[0_20px_50px_rgba(0,0,0,0.3)] mt-2 z-[100] animate-luxury-in",
+                  "optionClasses": "hs-select-option py-2.5 px-3 mb-0.5 text-sm text-slate-800 dark:text-slate-300 cursor-pointer hover:bg-slate-100 dark:hover:bg-cyan-500/10 dark:hover:text-cyan-400 rounded-lg flex items-center justify-between transition-all duration-300",
+                  "optionTemplate": '<div class="flex items-center justify-between w-full"><span data-title></span><span class="hs-select-active-indicator hidden text-cyan-500"><svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span></div>'
+                });
+                
+                selectEl.setAttribute('data-hs-select', configStr);
+                
+                if (filteredAds.length === 0) {
+                    const opt = document.createElement('option');
+                    opt.value = '';
+                    opt.textContent = "{{ __('No materials available') }}";
+                    opt.disabled = true;
+                    selectEl.appendChild(opt);
+                } else {
+                    const emptyOpt = document.createElement('option');
+                    emptyOpt.value = '';
+                    emptyOpt.textContent = "{{ __('Please select a material') }}";
+                    selectEl.appendChild(emptyOpt);
+                    
+                    filteredAds.forEach(ad => {
+                        const opt = document.createElement('option');
+                        opt.value = ad.id;
+                        opt.textContent = `${ad.name} (${ad.type === 'video' ? "{{ __('video') }}" : "{{ __('image') }}"}, ${ad.duration}s)`;
+                        opt.setAttribute('data-title', opt.textContent);
+                        if (ad.id === this.assignForm.advertisement_id) opt.selected = true;
+                        selectEl.appendChild(opt);
+                    });
+                }
+                
+                wrapper.appendChild(selectEl);
+                
+                selectEl.addEventListener('change', (e) => {
+                    this.assignForm.advertisement_id = e.target.value;
+                });
+                
+                this.$nextTick(() => {
+                    if (window.HSStaticMethods && window.HSStaticMethods.autoInit) {
+                        window.HSStaticMethods.autoInit(['select']);
+                    }
+                });
+            },
+            
+            async removeAssignment(id) {
+                if (!confirm("{{ __('Are you sure you want to remove this assignment?') }}")) return;
+                
+                const url = this.urls.removeAssignment.replace(':id', id);
+                try {
+                    const response = await fetch(url, {
+                        method: 'DELETE',
+                        headers: {
+                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                        }
+                    });
+                    const result = await response.json();
+                    if (result.success) {
+                        this.fetchMachineAds();
+                        window.showToast?.(result.message, 'success');
+                    }
+                } catch (e) {
+                    console.error('Failed to remove assignment', e);
+                }
+            },
+            
+            confirmDelete(id) {
+                this.deleteFormAction = this.urls.delete.replace(':id', id);
+                this.isDeleteConfirmOpen = true;
+            }
+        }));
+    });
+</script>
+@endsection
diff --git a/resources/views/admin/ads/partials/ad-modal.blade.php b/resources/views/admin/ads/partials/ad-modal.blade.php
new file mode 100644
index 0000000..6bcf68c
--- /dev/null
+++ b/resources/views/admin/ads/partials/ad-modal.blade.php
@@ -0,0 +1,194 @@
+<div x-show="isAdModalOpen" 
+     class="fixed inset-0 z-[100] overflow-y-auto" 
+     x-cloak
+     x-transition:enter="transition ease-out duration-300"
+     x-transition:enter-start="opacity-0"
+     x-transition:enter-end="opacity-100"
+     x-transition:leave="transition ease-in duration-200"
+     x-transition:leave-start="opacity-100"
+     x-transition:leave-end="opacity-0">
+    
+    <div class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm"></div>
+
+    <div class="flex items-center justify-center min-h-screen p-4">
+        <div class="relative w-full max-w-xl bg-white dark:bg-slate-900 rounded-[2rem] shadow-2xl border border-slate-200 dark:border-white/10 overflow-hidden animate-luxury-in"
+             @click.away="isAdModalOpen = false">
+            
+            <!-- Modal Header -->
+            <div class="bg-slate-50/50 dark:bg-slate-800/50 px-8 py-5 border-b border-slate-100 dark:border-white/5 flex items-center justify-between">
+                <div>
+                    <h3 class="text-xl font-black text-slate-800 dark:text-white uppercase tracking-tight" x-text="adFormMode === 'add' ? '{{ __("Add Advertisement") }}' : '{{ __("Edit Advertisement") }}'"></h3>
+                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">{{ __('Manage your ad material details') }}</p>
+                </div>
+                <button @click="isAdModalOpen = false" class="p-2 text-slate-400 hover:text-cyan-500 transition-colors">
+                    <svg class="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
+                </button>
+            </div>
+
+            <form :action="adFormMode === 'add' ? urls.store : urls.update.replace(':id', adForm.id)" 
+                  method="POST" 
+                  enctype="multipart/form-data"
+                  @submit.prevent="submitAdForm"
+                  class="px-8 pt-4 pb-8 space-y-4">
+                @csrf
+                <template x-if="adFormMode === 'edit'">
+                    @method('PUT')
+                </template>
+
+                @if(auth()->user()->isSystemAdmin())
+                <div class="space-y-2">
+                    <label class="text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest ml-1">
+                        {{ __('Company Name') }}
+                    </label>
+                    <x-searchable-select 
+                        name="company_id" 
+                        id="ad_company_select"
+                        :has-search="true"
+                        :selected="null" 
+                        :options="['' => __('System Default (All Companies)')] + $companies->pluck('name', 'id')->toArray()"
+                        @change="adForm.company_id = $event.target.value"
+                    />
+                </div>
+                @endif
+
+                <div class="space-y-2">
+                    <label class="text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest ml-1">
+                        {{ __('Material Name') }}
+                        <span class="text-rose-500 ml-0.5">*</span>
+                    </label>
+                    <input type="text" name="name" x-model="adForm.name" required
+                           class="w-full h-12 bg-slate-50 dark:bg-slate-800/50 border-none rounded-xl px-4 text-sm font-bold text-slate-800 dark:text-white focus:ring-2 focus:ring-cyan-500/20 transition-all placeholder:text-slate-400"
+                           placeholder="{{ __('Enter ad material name') }}">
+                </div>
+
+                <div class="grid grid-cols-2 gap-4">
+                    <div class="space-y-2">
+                        <label class="text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest ml-1">
+                            {{ __('Material Type') }}
+                            <span class="text-rose-500 ml-0.5">*</span>
+                        </label>
+                        <x-searchable-select 
+                            name="type" 
+                            id="ad_type_select"
+                            :has-search="false"
+                            :selected="null" 
+                            :options="['image' => __('image'), 'video' => __('video')]"
+                            @change="adForm.type = $event.target.value; fileName = ''; document.querySelector('input[name=file]').value = ''"
+                        />
+                    </div>
+
+                    <!-- Duration -->
+                    <div class="space-y-2">
+                        <label class="text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest ml-1">
+                            {{ __('Duration (Seconds)') }}
+                            <span class="text-rose-500 ml-0.5">*</span>
+                        </label>
+                        <x-searchable-select 
+                            name="duration" 
+                            id="ad_duration_select"
+                            :has-search="false"
+                            :selected="null" 
+                            :options="['15' => '15 ' . __('Seconds'), '30' => '30 ' . __('Seconds'), '60' => '60 ' . __('Seconds')]"
+                            @change="adForm.duration = $event.target.value"
+                        />
+                    </div>
+                </div>
+
+                <!-- File Upload -->
+                <div class="space-y-2">
+                    <label class="text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest ml-1">
+                        <span x-text="adForm.type === 'image' ? '{{ __("Upload Image") }}' : '{{ __("Upload Video") }}'"></span>
+                        <template x-if="adFormMode === 'add'">
+                            <span class="text-rose-500 ml-0.5">*</span>
+                        </template>
+                    </label>
+                    <div class="relative group">
+                        <div class="absolute inset-0 bg-gradient-to-tr from-cyan-500/5 to-indigo-500/5 rounded-2xl border-2 border-dashed border-slate-200 dark:border-white/10 group-hover:border-cyan-500/30 transition-all"></div>
+                        <label class="relative flex flex-col items-center justify-center p-10 cursor-pointer">
+                            <svg class="size-8 text-slate-300 group-hover:text-cyan-500 transition-colors mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" /></svg>
+                            <span class="text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest group-hover:text-cyan-500 transition-colors">{{ __('Click to upload') }}</span>
+                            <span class="text-[10px] font-bold text-slate-400 mt-1 uppercase" x-text="adForm.type === 'image' ? 'JPG, PNG, WEBP (' + '{{ __('Max 5MB') }}' + ')' : 'MP4, MOV (' + '{{ __('Max 50MB') }}' + ')'"></span>
+                            <input type="file" name="file" 
+                                   :accept="adForm.type === 'image' ? 'image/jpeg,image/png,image/gif,image/webp' : 'video/mp4,video/quicktime,video/x-msvideo'"
+                                   class="hidden" @change="handleFileChange">
+                        </label>
+                    </div>
+                    <!-- Preview Filename -->
+                    <p class="text-[10px] font-bold text-cyan-600 dark:text-cyan-400 italic px-2" x-show="fileName" x-text="fileName"></p>
+                </div>
+
+                <!-- Status -->
+                <div class="flex items-center gap-3 px-2">
+                    <label class="relative inline-flex items-center cursor-pointer">
+                        <input type="checkbox" name="is_active" x-model="adForm.is_active" value="1" class="sr-only peer">
+                        <div class="w-11 h-6 bg-slate-200 dark:bg-slate-700 peer-focus:outline-none rounded-full peer 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:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-cyan-500"></div>
+                    </label>
+                    <span class="text-sm font-black text-slate-700 dark:text-slate-200 tracking-tight">{{ __('Active Status') }}</span>
+                </div>
+
+                <!-- Action Footer -->
+                <div class="flex items-center justify-end gap-3 pt-2">
+                    <button type="button" @click="isAdModalOpen = false" class="px-6 py-3 text-sm font-black text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 transition-colors uppercase tracking-widest">
+                        {{ __('Cancel') }}
+                    </button>
+                    <button type="submit" class="btn-luxury-primary px-10 py-3">
+                        {{ __('Save Material') }}
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<script>
+    function handleFileChange(e) {
+        const file = e.target.files[0];
+        if (!file) return;
+
+        const type = this.adForm.type;
+        const maxSize = type === 'image' ? 5 * 1024 * 1024 : 50 * 1024 * 1024;
+        
+        // Check size
+        if (file.size > maxSize) {
+            window.showToast?.('error', '{{ __("File is too large") }} (Max: ' + (maxSize / 1024 / 1024) + 'MB)');
+            e.target.value = '';
+            this.fileName = '';
+            return;
+        }
+
+        // Check extension/mime
+        const isImage = file.type.startsWith('image/');
+        const isVideo = file.type.startsWith('video/');
+
+        if (type === 'image' && !isImage) {
+            window.showToast?.('error', '{{ __("Please upload an image file") }}');
+            e.target.value = '';
+            this.fileName = '';
+            return;
+        }
+
+        if (type === 'video' && !isVideo) {
+            window.showToast?.('error', '{{ __("Please upload a video file") }}');
+            e.target.value = '';
+            this.fileName = '';
+            return;
+        }
+
+        this.fileName = file.name;
+    }
+
+    function submitAdForm(e) {
+        // Final check before submission
+        if (!this.adForm.name || !this.adForm.type || !this.adForm.duration) {
+            window.showToast?.('error', '{{ __("Please fill in all required fields") }}');
+            return;
+        }
+
+        if (this.adFormMode === 'add' && !this.fileName) {
+            window.showToast?.('error', '{{ __("Please upload a material file") }}');
+            return;
+        }
+
+        e.target.submit();
+    }
+</script>
diff --git a/resources/views/admin/ads/partials/assign-modal.blade.php b/resources/views/admin/ads/partials/assign-modal.blade.php
new file mode 100644
index 0000000..1e2a8e2
--- /dev/null
+++ b/resources/views/admin/ads/partials/assign-modal.blade.php
@@ -0,0 +1,85 @@
+<div x-show="isAssignModalOpen" 
+     class="fixed inset-0 z-[100] overflow-y-auto" 
+     x-cloak
+     x-transition:enter="transition ease-out duration-300"
+     x-transition:enter-start="opacity-0"
+     x-transition:enter-end="opacity-100"
+     x-transition:leave="transition ease-in duration-200"
+     x-transition:leave-start="opacity-100"
+     x-transition:leave-end="opacity-0">
+    
+    <div class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm"></div>
+
+    <div class="flex items-center justify-center min-h-screen p-4">
+        <div class="relative w-full max-w-lg bg-white dark:bg-slate-900 rounded-[2rem] shadow-2xl border border-slate-200 dark:border-white/10 overflow-visible animate-luxury-in"
+             @click.away="isAssignModalOpen = false">
+            
+            <!-- Modal Header -->
+            <div class="bg-slate-50/50 dark:bg-slate-800/50 rounded-t-[2rem] px-8 py-6 border-b border-slate-100 dark:border-white/5 flex items-center justify-between">
+                <div>
+                    <h3 class="text-xl font-black text-slate-800 dark:text-white uppercase tracking-tight">{{ __('Assign Advertisement') }}</h3>
+                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">{{ __('Select a material to play on this machine') }}</p>
+                </div>
+                <button @click="isAssignModalOpen = false" class="p-2 text-slate-400 hover:text-cyan-500 transition-colors">
+                    <svg class="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
+                </button>
+            </div>
+
+            <form @submit.prevent="submitAssignment" class="p-8 space-y-6">
+                <!-- Machine & Position Info (Read-only) -->
+                <div class="grid grid-cols-2 gap-4">
+                    <div class="p-4 bg-slate-50 dark:bg-slate-800/50 rounded-2xl border border-slate-100 dark:border-white/5">
+                        <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">{{ __('Target Position') }}</p>
+                        <p class="text-sm font-black text-cyan-600 dark:text-cyan-400 uppercase tracking-tight" x-text="{ vending: '{{ __('vending') }}', visit_gift: '{{ __('visit_gift') }}', standby: '{{ __('standby') }}' }[assignForm.position] || assignForm.position"></p>
+                    </div>
+                </div>
+
+                <!-- Ad Material Selection -->
+                <div class="space-y-2">
+                    <label class="text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest ml-1">{{ __('Select Material') }}</label>
+                    <div id="assign_ad_select_wrapper">
+                        <!-- Select dropdown will be dynamically built by updateAssignSelect() based on machine company context -->
+                    </div>
+                </div>
+
+
+                <!-- Action Footer -->
+                <div class="flex items-center justify-end gap-3 pt-6">
+                    <button type="button" @click="isAssignModalOpen = false" class="px-6 py-3 text-sm font-black text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 transition-colors uppercase tracking-widest">
+                        {{ __('Cancel') }}
+                    </button>
+                    <button type="submit" class="btn-luxury-primary px-10 py-3">
+                        {{ __('Confirm Assignment') }}
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<script>
+    // Note: This logic is added to the main adManager data object in index.blade.php
+    // Here we just define the submit handler
+    async function submitAssignment() {
+        try {
+            const response = await fetch(this.urls.assign, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                },
+                body: JSON.stringify(this.assignForm)
+            });
+            const result = await response.json();
+            if (result.success) {
+                this.isAssignModalOpen = false;
+                this.fetchMachineAds();
+                window.showToast?.(result.message, 'success');
+            } else {
+                window.showToast?.(result.message || 'Error', 'error');
+            }
+        } catch (e) {
+            console.error('Failed to assign ad', e);
+        }
+    }
+</script>
diff --git a/resources/views/components/breadcrumbs.blade.php b/resources/views/components/breadcrumbs.blade.php
index 084b0f0..aef816c 100644
--- a/resources/views/components/breadcrumbs.blade.php
+++ b/resources/views/components/breadcrumbs.blade.php
@@ -114,6 +114,11 @@
                     'analysis' => __('Analysis Management'),
                     'audit' => __('Audit Management'),
                     'maintenance' => __('Maintenance Records'),
+                    'data-config' => match($segments[2] ?? '') {
+                        'products' => __('Product Management'),
+                        'advertisements' => __('Advertisement Management'),
+                        default => null,
+                    },
                     default => null,
                 },
                 'edit' => str_starts_with($routeName, 'profile') ? null : __('Edit'),
diff --git a/resources/views/components/searchable-select.blade.php b/resources/views/components/searchable-select.blade.php
index 6de0177..36211d5 100644
--- a/resources/views/components/searchable-select.blade.php
+++ b/resources/views/components/searchable-select.blade.php
@@ -15,6 +15,7 @@
     $isEmptySelected = (is_null($selected) || (string)$selected === '' || (string)$selected === ' ');
     
     $config = [
+        "placeholder" => $placeholder ?: __('Select...'),
         "hasSearch" => (bool)$hasSearch,
         "searchPlaceholder" => $placeholder ?: __('Search...'),
         "isHidePlaceholder" => false,
diff --git a/resources/views/layouts/partials/sidebar-menu.blade.php b/resources/views/layouts/partials/sidebar-menu.blade.php
index 0c2efe8..a766bce 100644
--- a/resources/views/layouts/partials/sidebar-menu.blade.php
+++ b/resources/views/layouts/partials/sidebar-menu.blade.php
@@ -215,7 +215,7 @@
             @endcan
 
             @can('menu.data-config.advertisements')
-            <li><a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm transition-colors rounded-lg {{ request()->routeIs('admin.data-config.advertisements') ? 'text-slate-900 dark:text-white bg-slate-100 dark:bg-white/5' : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white' }}" href="{{ route('admin.data-config.advertisements') }}">
+            <li><a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm transition-colors rounded-lg {{ request()->routeIs('admin.data-config.advertisements.*') ? 'text-slate-900 dark:text-white bg-slate-100 dark:bg-white/5' : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white' }}" href="{{ route('admin.data-config.advertisements.index') }}">
                 <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 shrink-0 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" /></svg>
                 {{ __('Advertisement Management') }}
             </a></li>
diff --git a/routes/web.php b/routes/web.php
index 128cf31..45f0910 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -114,9 +114,20 @@ Route::middleware(['auth', 'verified', 'tenant.access'])->prefix('admin')->name(
 
         // 9. 資料設定
         Route::prefix('data-config')->name('data-config.')->group(function () {
-            Route::resource('products', App\Http\Controllers\Admin\ProductController::class)->except(['show']);
-            Route::patch('/products/{id}/toggle-status', [App\Http\Controllers\Admin\ProductController::class, 'toggleStatus'])->name('products.status.toggle');
-            Route::get('/advertisements', [App\Http\Controllers\Admin\DataConfigController::class , 'advertisements'])->name('advertisements');
+            Route::middleware('can:menu.data-config.products')->group(function () {
+                Route::resource('products', App\Http\Controllers\Admin\ProductController::class)->except(['show']);
+                Route::patch('/products/{id}/toggle-status', [App\Http\Controllers\Admin\ProductController::class, 'toggleStatus'])->name('products.status.toggle');
+            });
+            
+            // 廣告管理 (Advertisement Management)
+            Route::middleware('can:menu.data-config.advertisements')->group(function () {
+                Route::resource('advertisements', App\Http\Controllers\Admin\AdvertisementController::class)->except(['show', 'create', 'edit']);
+                Route::get('/advertisements/machine/{machine}', [App\Http\Controllers\Admin\AdvertisementController::class, 'getMachineAds'])->name('advertisements.machine.get');
+                Route::post('/advertisements/assign', [App\Http\Controllers\Admin\AdvertisementController::class, 'assign'])->name('advertisements.assign');
+                Route::post('/advertisements/assignments/reorder', [App\Http\Controllers\Admin\AdvertisementController::class, 'reorderAssignments'])->name('advertisements.assignments.reorder');
+                Route::delete('/advertisements/assignment/{id}', [App\Http\Controllers\Admin\AdvertisementController::class, 'removeAssignment'])->name('advertisements.assignment.remove');
+            });
+
             Route::get('/sub-accounts', [App\Http\Controllers\Admin\PermissionController::class , 'accounts'])->name('sub-accounts')->middleware('can:menu.data-config.sub-accounts');
             Route::patch('/sub-accounts/{id}/toggle-status', [App\Http\Controllers\Admin\PermissionController::class, 'toggleAccountStatus'])->name('sub-accounts.status.toggle')->middleware('can:menu.data-config.sub-accounts');
             Route::post('/sub-accounts', [App\Http\Controllers\Admin\PermissionController::class , 'storeAccount'])->name('sub-accounts.store')->middleware('can:menu.data-config.sub-accounts');