[FEAT] 更新 Admin 密碼與新增機台照片更新功能

app/Http/Controllers/Admin/BasicSettings/MachinePhotoController.php

@@ -0,0 +1,113 @@
+<?php
+
+namespace App\Http\Controllers\Admin\BasicSettings;
+
+use App\Http\Controllers\Controller;
+use App\Models\Machine\Machine;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Log;
+use Illuminate\Support\Facades\Storage;
+
+class MachinePhotoController extends Controller
+{
+    /**
+     * 更新機台照片
+     */
+    public function update(Request $request, Machine $machine): RedirectResponse
+    {
+        Log::info('Machine Photo Update Request', [
+            'machine_id' => $machine->id,
+            'files' => $request->allFiles()
+        ]);
+
+        try {
+            $images = $machine->images ?? [];
+
+            // 處理 3 個索引位置的圖片
+            for ($i = 0; $i < 3; $i++) {
+                // 先處理刪除標記
+                if ($request->input("delete_photo_{$i}") === '1') {
+                    if (isset($images[$i])) {
+                        unset($images[$i]);
+                    }
+                }
+
+                // 再處理檔案上傳（若有上傳會覆蓋掉刪除邏輯或原有的圖）
+                $fieldName = "machine_image_{$i}";
+                if ($request->hasFile($fieldName)) {
+                    $file = $request->file($fieldName);
+                    
+                    // 轉為 WebP 格式與保存
+                    $path = $this->storeAsWebp($file, "machines/{$machine->id}");
+                    $images[$i] = $path;
+                    
+                    Log::info("Machine image uploaded at slot {$i}", ['path' => $path]);
+                }
+            }
+
+            // 過濾掉 null 並重新整理索引，但這裡我們希望保持 3 個槽位的概念
+            // 如果用戶想保持順序，我們就直接儲存
+            ksort($images);
+
+            $machine->update([
+                'images' => $images,
+                'updater_id' => auth()->id(),
+            ]);
+
+            return back()->with('success', __('Machine images updated successfully.'));
+        } catch (\Exception $e) {
+            Log::error('Machine Photo Update Failed', [
+                'machine_id' => $machine->id,
+                'error' => $e->getMessage()
+            ]);
+            return back()->with('error', __('Failed to update machine images: ') . $e->getMessage());
+        }
+    }
+
+    /**
+     * 將圖片轉換為 WebP 並儲存
+     */
+    protected function storeAsWebp($file, $directory): string
+    {
+        $extension = $file->getClientOriginalExtension();
+        $filename = uniqid() . '.webp';
+        $path = "{$directory}/{$filename}";
+
+        // 讀取原始圖片
+        $imageType = exif_imagetype($file->getRealPath());
+        switch ($imageType) {
+            case IMAGETYPE_JPEG:
+                $source = imagecreatefromjpeg($file->getRealPath());
+                break;
+            case IMAGETYPE_PNG:
+                $source = imagecreatefrompng($file->getRealPath());
+                break;
+            case IMAGETYPE_WEBP:
+                $source = imagecreatefromwebp($file->getRealPath());
+                break;
+            default:
+                // 如果格式不支援，直接存
+                return $file->storeAs($directory, $file->hashName(), 'public');
+        }
+
+        if (!$source) {
+            return $file->storeAs($directory, $file->hashName(), 'public');
+        }
+
+        // 確保支援真彩色（解決 palette image 問題）
+        if (!imageistruecolor($source)) {
+            imagepalettetotruecolor($source);
+        }
+
+        // 捕捉輸出
+        ob_start();
+        imagewebp($source, null, 80);
+        $content = ob_get_clean();
+        imagedestroy($source);
+
+        Storage::disk('public')->put($path, $content);
+
+        return $path;
+    }
+}

database/seeders/AdminUserSeeder.php

@@ -26,7 +26,7 @@ class AdminUserSeeder extends Seeder
             $admin->update([
                 'name' => 'Admin',
                 'email' => 'admin@star-cloud.com',
-                'password' => Hash::make('password'),
+                'password' => Hash::make('Star82779061'),
             ]);
             $admin->assignRole('super-admin');
             return;

lang/en.json

@@ -373,5 +373,8 @@
     "PS_MERCHANT_ID": "PS_MERCHANT_ID",
     "Save Config": "Save Config",
     "StoreID": "StoreID",
-    "TermID": "TermID"
+    "TermID": "TermID",
+    "Photo Slot": "Photo Slot",
+    "Optimized for display. Supported formats: JPG, PNG, WebP.": "Optimized for display. Supported formats: JPG, PNG, WebP.",
+    "Change": "Change"
 }

lang/ja.json

@@ -347,7 +347,7 @@
     "Are you sure?": "よろしいですか？",
     "Serial No": "機台シリアル番号",
     "Select Owner": "所属会社を選択",
-    "Select Model": "Select Model",
+    "Select Model": "型番を選択",
     "Machines": "機台リスト",
     "Models": "型番リスト",
     "Edit": "編集",
@@ -380,5 +380,8 @@
     "PS_MERCHANT_ID": "全盈+Pay 加盟店ID",
     "EASY_MERCHANT_ID": "悠遊付 加盟店ID",
     "Save Config": "設定を保存",
-    "e.g., Company Standard Pay": "例：標準決済組合せ"
+    "e.g., Company Standard Pay": "例：標準決済組合せ",
+    "Photo Slot": "写真スロット",
+    "Optimized for display. Supported formats: JPG, PNG, WebP.": "表示用に最適化されています。対応形式：JPG, PNG, WebP。",
+    "Change": "変更"
 }

lang/zh_TW.json

@@ -411,5 +411,8 @@
     "Delete": "刪除",
     "None": "無",
     "Select Company": "選擇所屬公司",
-    "e.g., Company Standard Pay": "例如：公司標準支付"
+    "e.g., Company Standard Pay": "例如：公司標準支付",
+    "Photo Slot": "照片欄位",
+    "Optimized for display. Supported formats: JPG, PNG, WebP.": "已針對顯示進行優化。支援格式：JPG, PNG, WebP。",
+    "Change": "更換"
 }

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

@@ -1,14 +1,7 @@
 @extends('layouts.admin')
 
 @section('content')
-<div class="space-y-8 pb-20" x-data="{ 
+<div class="space-y-8 pb-20">
-    selectedFiles: [null, null, null],
-    handleFileChange(e, index) { 
-        if (e.target.files.length > 0) {
-            this.selectedFiles[index] = URL.createObjectURL(e.target.files[0]);
-        }
-    } 
-}">
     <!-- Header -->
     <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
         <div class="flex items-center gap-4">
@@ -224,55 +217,6 @@
                     </div>
                  </div>
 
-                 <!-- Machine Images Management -->
-                 <div class="luxury-card rounded-3xl p-7 animate-luxury-in" style="animation-delay: 400ms">
-                     <div class="flex items-center gap-3 mb-6">
-                        <div class="w-10 h-10 rounded-xl bg-indigo-500/10 flex items-center justify-center text-indigo-500">
-                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" 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>
-                        <h3 class="text-lg font-black text-slate-800 dark:text-white tracking-tight">{{ __('Machine Images') }}</h3>
-                    </div>
-
-                    <div class="space-y-6">
-                        <div class="grid grid-cols-3 gap-4">
-                            @for($i = 0; $i < 3; $i++)
-                            <div class="relative group">
-                                <label class="relative flex flex-col items-center justify-center aspect-square border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-3xl cursor-pointer bg-slate-50/50 dark:bg-slate-900/50 hover:bg-slate-100 dark:hover:bg-slate-800/80 transition-all overflow-hidden">
-                                    <!-- Current Image or Preview -->
-                                    <div class="absolute inset-0 w-full h-full">
-                                        @if(isset($machine->image_urls[$i]))
-                                            <img src="{{ $machine->image_urls[$i] }}" class="w-full h-full object-cover" x-show="!selectedFiles[{{ $i }}]">
-                                        @endif
-                                        <template x-if="selectedFiles[{{ $i }}]">
-                                            <img :src="selectedFiles[{{ $i }}]" class="w-full h-full object-cover">
-                                        </template>
-                                    </div>
-
-                                    <!-- Overlay for Empty/Hover -->
-                                    <div class="relative z-10 flex flex-col items-center justify-center p-4 bg-white/60 dark:bg-black/40 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity w-full h-full"
-                                         :class="{'opacity-100': !selectedFiles[{{ $i }}] && !@json(isset($machine->image_urls[$i]))}">
-                                        <svg class="w-6 h-6 mb-1 text-slate-500 dark:text-slate-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4" />
-                                        </svg>
-                                        <span class="text-[10px] font-black uppercase tracking-widest text-slate-600 dark:text-slate-200">
-                                            {{ isset($machine->image_urls[$i]) || false ? __('Change') : __('Upload') }}
-                                        </span>
-                                    </div>
-
-                                    <input type="file" name="images[{{ $i }}]" accept="image/*" class="hidden" @change="handleFileChange($event, {{ $i }})">
-                                </label>
-                                <div class="mt-2 text-center">
-                                    <span class="text-[9px] font-black text-slate-400 uppercase tracking-[0.2em]">{{ __('Slot') }} {{ $i + 1 }}</span>
-                                </div>
-                            </div>
-                            @endfor
-                        </div>
-                        <p class="text-[10px] text-slate-400 mt-4 font-bold uppercase tracking-widest leading-relaxed">
-                            * {{ __('You can upload images one by one. Supporting up to 3 slots.') }}<br>
-                            * {{ __('Click any slot to select or replace a photo.') }}
-                        </p>
-                    </div>
-                 </div>
             </div>
         </div>
     </form>

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

@@ -3,6 +3,7 @@
 @section('content')
 <div class="space-y-2 pb-20" x-data="{ 
     showCreateMachineModal: false,
+    showPhotoModal: false,
     showDetailDrawer: false,
     currentMachine: null,
     showCreateModelModal: false,
@@ -10,13 +11,41 @@
     currentModel: { name: '' },
     modelActionUrl: '',
     selectedFileCount: 0,
+    selectedFiles: [null, null, null],
+    deletedPhotos: [false, false, false],
+    showImageLightbox: false,
+    lightboxImageUrl: '',
     openDetail(machine) {
         this.currentMachine = machine;
         this.showDetailDrawer = true;
     },
+    openPhotoModal(machine) {
+        this.currentMachine = machine;
+        this.selectedFiles = [null, null, null];
+        this.deletedPhotos = [false, false, false];
+        this.showPhotoModal = true;
+    },
     handleFileChange(e) {
         this.selectedFileCount = e.target.files.length;
+    },
+    handlePhotoFileChange(e, index) {
+        const file = e.target.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                this.selectedFiles[index] = e.target.result;
+                this.deletedPhotos[index] = false;
+            };
+            reader.readAsDataURL(file);
         }
+    },
+    deletePhoto(index) {
+        this.selectedFiles[index] = null;
+        this.deletedPhotos[index] = true;
+        // 同時要把 input file 清掉，避免雖然 marked deleted 但還帶著舊檔案
+        const input = document.getElementsByName('machine_image_' + index)[0];
+        if (input) input.value = '';
+    },
 }">
     <!-- 1. Header Area -->
     <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
@@ -84,6 +113,9 @@
                         <th
                             class="px-6 py-4 text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] border-b border-slate-100 dark:border-slate-800">
                             {{ __('Machine Info') }}</th>
+                        <th
+                            class="px-6 py-4 text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] border-b border-slate-100 dark:border-slate-800">
+                            {{ __('Machine Model') }}</th>
                         <th
                             class="px-6 py-4 text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] border-b border-slate-100 dark:border-slate-800">
                             {{ __('Status') }}</th>
@@ -104,12 +136,16 @@
                         <td class="px-6 py-6 cursor-pointer" @click="openDetail({{ $machine->toJson() }})">
                             <div class="flex items-center gap-4">
                                 <div
-                                    class="w-10 h-10 rounded-xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300">
+                                    class="w-10 h-10 rounded-xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 border border-slate-200 dark:border-slate-700 group-hover:bg-cyan-500 group-hover:text-white transition-all duration-300 overflow-hidden">
+                                    @if(isset($machine->image_urls[0]))
+                                        <img src="{{ $machine->image_urls[0] }}" class="w-full h-full object-cover">
+                                    @else
                                         <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="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                         </svg>
+                                    @endif
                                 </div>
                                 <div>
                                     <div
@@ -119,13 +155,15 @@
                                         <span
                                             class="text-xs font-mono font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest">{{
                                             $machine->serial_no }}</span>
-                                        <span class="text-xs text-slate-300 dark:text-slate-700">•</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                        <td class="px-6 py-6" @click="openDetail({{ $machine->toJson() }})">
                             <span
-                                            class="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest">{{
+                                class="text-xs font-bold text-slate-600 dark:text-slate-300 uppercase tracking-widest">
-                                            $machine->machineModel->name ?? '--' }}</span>
+                                {{ $machine->machineModel->name ?? '--' }}
-                                    </div>
+                            </span>
-                                </div>
-                            </div>
                         </td>
                         <td class="px-6 py-6">
                             @php
@@ -162,6 +200,15 @@
             </span>
         </td>
         <td class="px-6 py-6 text-right space-x-2">
+            <button
+                @click="openPhotoModal(@js($machine->only(['id', 'name', 'image_urls'])))"
+                class="p-2 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-emerald-500 hover:bg-emerald-500/5 border border-transparent hover:border-emerald-500/20 transition-all inline-flex"
+                title="{{ __('Machine Images') }}">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                    <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>
+            </button>
             <a href="{{ route('admin.basic-settings.machines.edit', $machine) }}"
                 class="p-2 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 border border-transparent hover:border-cyan-500/20 transition-all inline-flex"
                 title="{{ __('Edit Settings') }}">
@@ -504,7 +551,153 @@
     </div>
 </template>
 
-<!-- 4. Detail Drawer (Same for both) -->
+<!-- 4. Machine Photo Management Modal -->
+<template x-teleport="body">
+    <div x-show="showPhotoModal" class="fixed inset-0 z-[150]" x-cloak>
+        <div class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm transition-opacity" x-show="showPhotoModal"
+            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="showPhotoModal = false">
+        </div>
+
+        <div class="fixed inset-0 z-[160] overflow-y-auto pointer-events-none p-4 md:p-8 flex items-center justify-center">
+            <div
+                class="w-full max-w-2xl bg-white dark:bg-slate-900 rounded-[2.5rem] shadow-2xl border border-slate-100 dark:border-slate-800 pointer-events-auto overflow-hidden animate-luxury-in">
+                <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">{{ __('Machine Images') }}</h2>
+                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em] mt-1"
+                            x-text="currentMachine?.name"></p>
+                    </div>
+                    <button @click="showPhotoModal = false"
+                        class="p-2 rounded-xl bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-all">
+                        <svg class="w-5 h-5" 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>
+
+                <form :action="'{{ route('admin.basic-settings.machines.photos.update', ':id') }}'.replace(':id', currentMachine?.id)"
+                    method="POST" enctype="multipart/form-data">
+                    @csrf
+                    @method('PATCH')
+
+                    <div class="p-8 space-y-8">
+                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                            <template x-for="i in [0, 1, 2]" :key="i">
+                                <div class="space-y-3">
+                                    <label class="block text-[11px] font-black text-slate-400 uppercase tracking-[0.2em]"
+                                        x-text="'{{ __('Photo Slot') }} ' + (i + 1)"></label>
+
+                                    <div class="relative group aspect-square rounded-[2rem] overflow-hidden border-2 border-dashed border-slate-200 dark:border-slate-800 hover:border-emerald-500/50 transition-all bg-slate-50/50 dark:bg-slate-900/50 flex flex-col items-center justify-center cursor-pointer"
+                                        @click="$el.querySelector('input').click()">                                        <template
+                                            x-if="(selectedFiles[i] || (currentMachine?.image_urls && currentMachine.image_urls[i])) && !deletedPhotos[i]">
+                                            <div class="absolute inset-0 w-full h-full">
+                                                <img :src="selectedFiles[i] || currentMachine.image_urls[i]" 
+                                                    class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
+                                                <div class="absolute inset-0 bg-slate-900/60 backdrop-blur-[2px] opacity-0 group-hover:opacity-100 transition-all flex flex-col items-center justify-center gap-3">
+                                                    <button type="button" 
+                                                        class="bg-white text-emerald-600 px-5 py-2.5 rounded-xl text-xs font-black uppercase tracking-widest shadow-xl transform hover:scale-105 transition-all"
+                                                        @click.stop="$el.closest('.group').querySelector('input').click()">
+                                                        {{ __('Change') }}
+                                                    </button>
+                                                    <button type="button" 
+                                                        class="bg-rose-500/90 text-white px-5 py-2.5 rounded-xl text-xs font-black uppercase tracking-widest shadow-xl transform hover:scale-105 transition-all"
+                                                        @click.stop="deletePhoto(i)">
+                                                        {{ __('Delete') }}
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </template>
+                                        
+                                        <template x-if="!selectedFiles[i] && !(currentMachine?.image_urls && currentMachine.image_urls[i]) || deletedPhotos[i]">
+                                            <div class="flex flex-col items-center gap-3">
+                                                <div class="w-12 h-12 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 group-hover:bg-emerald-500 group-hover:text-white transition-all">
+                                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+                                                    </svg>
+                                                </div>
+                                                <span class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest" x-text="'Slot ' + (i + 1)"></span>
+                                            </div>
+                                        </template>
+
+                                        <input type="file" :name="'machine_image_' + i" class="hidden"
+                                            accept="image/*" @change="handlePhotoFileChange($event, i)">
+                                        <input type="hidden" :name="'delete_photo_' + i" :value="deletedPhotos[i] ? '1' : '0'">
+                                    </div>
+                                </div>
+                            </template>
+                        </div>
+
+                        <div
+                            class="bg-amber-50 dark:bg-amber-900/10 border border-amber-100 dark:border-amber-900/30 rounded-2xl p-4 flex items-center gap-4">
+                            <div class="flex-shrink-0 p-2 rounded-xl bg-amber-100 dark:bg-amber-900/30 text-amber-600">
+                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                </svg>
+                            </div>
+                            <p class="text-xs font-bold text-amber-700 dark:text-amber-300 leading-relaxed text-left flex-1">
+                                {{ __('Optimized for display. Supported formats: JPG, PNG, WebP.')
+                                }}
+                            </p>
+                        </div>
+                    </div>
+
+                    <div
+                        class="px-8 py-6 bg-slate-50 dark:bg-slate-900/50 flex justify-end gap-3 rounded-b-3xl border-t border-slate-100 dark:border-slate-800">
+                        <button type="button" @click="showPhotoModal = false" class="btn-luxury-ghost">{{ __('Cancel')
+                            }}</button>
+                        <button type="submit" class="btn-luxury-primary px-8">{{ __('Save Changes') }}</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</template>
+
+<!-- 4.1 Image Lightbox Modal -->
+<template x-teleport="body">
+    <div x-show="showImageLightbox" 
+        class="fixed inset-0 z-[200] flex items-center justify-center p-4 sm:p-10" 
+        x-cloak>
+        <div x-show="showImageLightbox"
+            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="showImageLightbox = false"
+            class="absolute inset-0 bg-slate-900/90 backdrop-blur-md transition-opacity">
+        </div>
+
+        <div x-show="showImageLightbox"
+            x-transition:enter="ease-out duration-300"
+            x-transition:enter-start="opacity-0 scale-95"
+            x-transition:enter-end="opacity-100 scale-100"
+            x-transition:leave="ease-in duration-200"
+            x-transition:leave-start="opacity-100 scale-100"
+            x-transition:leave-end="opacity-0 scale-95"
+            class="relative max-w-5xl w-full max-h-full flex items-center justify-center z-[210]">
+            
+            <button @click="showImageLightbox = false" 
+                class="absolute -top-12 right-0 p-2 text-white/50 hover:text-white transition-colors">
+                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+            </button>
+
+            <img :src="lightboxImageUrl" 
+                class="max-w-full max-h-[85vh] rounded-2xl shadow-2xl border border-white/10 object-contain">
+        </div>
+    </div>
+</template>
+
+
+<!-- 5. Detail Drawer (Same for both) -->
 <template x-teleport="body">
     <div x-show="showDetailDrawer" class="fixed inset-0 z-[150]" x-cloak>
         <div class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm transition-opacity" x-show="showDetailDrawer"
@@ -543,9 +736,15 @@
                                 <div class="grid grid-cols-2 gap-3">
                                     <template x-for="(url, index) in currentMachine.image_urls" :key="index">
                                         <div
-                                            class="relative group aspect-square rounded-2xl overflow-hidden border border-slate-100 dark:border-slate-800 shadow-sm bg-slate-50 dark:bg-slate-800/50">
+                                            @click="lightboxImageUrl = url; showImageLightbox = true"
+                                            class="relative group aspect-square rounded-2xl overflow-hidden border border-slate-100 dark:border-slate-800 shadow-sm bg-slate-50 dark:bg-slate-800/50 cursor-pointer">
                                             <img :src="url"
                                                 class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
+                                            <div class="absolute inset-0 bg-slate-900/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                                                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" />
+                                                </svg>
+                                            </div>
                                         </div>
                                     </template>
                                 </div>

routes/web.php

@@ -168,6 +168,9 @@ Route::middleware(['auth', 'verified', 'tenant.access'])->prefix('admin')->name(
         Route::prefix('basic-settings')->name('basic-settings.')->group(function () {
             // 機台設定
             Route::prefix('machines')->name('machines.')->group(function () {
+                // 機台照片獨立更新
+                Route::patch('{machine}/photos', [App\Http\Controllers\Admin\BasicSettings\MachinePhotoController::class, 'update'])->name('photos.update');
+
                 Route::get('/', [App\Http\Controllers\Admin\BasicSettings\MachineSettingController::class, 'index'])->name('index');
                 Route::get('/{machine}/edit', [App\Http\Controllers\Admin\BasicSettings\MachineSettingController::class, 'edit'])->name('edit');
                 Route::put('/{machine}', [App\Http\Controllers\Admin\BasicSettings\MachineSettingController::class, 'update'])->name('update');