feat: 整合 Preline UI 3.x 與重寫 README 為 Docker 架構

- 新增 Preline UI 3.2.3 作為 UI 組件庫
- 更新 tailwind.config.js 整合 Preline
- 更新 app.js 初始化 Preline
- 完全重寫 README.md 以 Docker 容器化架構為核心
- 新增 Docker 常用指令大全
- 新增故障排除與生產部署指南
- 新增會員系統相關功能（會員、錢包、點數、會籍、禮物）
- 新增社交登入測試功能

resources/js/app.js

@@ -1,7 +1,13 @@
 import './bootstrap';
 
 import Alpine from 'alpinejs';
+import collapse from '@alpinejs/collapse';
+
+Alpine.plugin(collapse);
 
 window.Alpine = Alpine;
 
 Alpine.start();
+
+// 初始化 Preline UI
+import 'preline';

resources/views/admin/deposit-bonus-rules/index.blade.php

@@ -0,0 +1,132 @@
+@extends('layouts.admin')
+
+@section('content')
+@php
+    $theme = request()->cookie('theme', 'dark-blue');
+    $isLight = in_array($theme, ['light-blue', 'light-green']);
+    $cardBg = $isLight ? 'bg-white' : 'bg-gray-800';
+    $textPrimary = $isLight ? 'text-gray-900' : 'text-gray-200';
+    $textSecondary = $isLight ? 'text-gray-600' : 'text-gray-400';
+    $borderColor = $isLight ? 'border-gray-200' : 'border-gray-700';
+    $thBg = $isLight ? 'bg-gray-50' : 'bg-gray-700';
+    $inputBg = $isLight ? 'bg-white' : 'bg-gray-700';
+    $inputBorder = $isLight ? 'border-gray-300' : 'border-gray-600';
+@endphp
+
+{{-- Toast 通知 --}}
+@if(session('success'))
+<div x-data="{ show: false }" 
+     x-show="show" 
+     x-cloak
+     x-init="setTimeout(() => { show = true; setTimeout(() => show = false, 3000) }, 50)"
+     x-transition:enter="transition cubic-bezier(0.34, 1.56, 0.64, 1) duration-300"
+     x-transition:enter-start="opacity-0 -translate-y-40"
+     x-transition:enter-end="opacity-100 translate-y-0"
+     x-transition:leave="transition ease-in duration-400"
+     x-transition:leave-start="opacity-100 translate-y-0"
+     x-transition:leave-end="opacity-0 -translate-y-40"
+     class="fixed top-4 left-0 right-0 mx-auto w-max z-[100] bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg flex items-center">
+    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+    </svg>
+    {{ session('success') }}
+</div>
+@endif
+
+<div class="container mx-auto px-6 py-8">
+    <div class="flex justify-between items-center mb-6">
+        <h3 class="{{ $textPrimary }} text-3xl font-medium">儲值回饋設定</h3>
+        <button onclick="document.getElementById('createModal').classList.remove('hidden')" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700">
+            新增規則
+        </button>
+    </div>
+
+    <div class="overflow-x-auto">
+        <table class="min-w-full {{ $cardBg }} rounded-lg overflow-hidden">
+            <thead class="{{ $thBg }}">
+                <tr>
+                    <th class="px-6 py-3 text-left text-xs font-medium {{ $textSecondary }} uppercase">名稱</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium {{ $textSecondary }} uppercase">最低儲值</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium {{ $textSecondary }} uppercase">回饋類型</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium {{ $textSecondary }} uppercase">回饋值</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium {{ $textSecondary }} uppercase">狀態</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium {{ $textSecondary }} uppercase">操作</th>
+                </tr>
+            </thead>
+            <tbody class="divide-y {{ $borderColor }}">
+                @forelse($rules as $rule)
+                <tr>
+                    <td class="px-6 py-4 {{ $textPrimary }}">{{ $rule->name }}</td>
+                    <td class="px-6 py-4 {{ $textPrimary }}">${{ number_format($rule->min_amount) }}</td>
+                    <td class="px-6 py-4 {{ $textPrimary }}">{{ $rule->bonus_type == 'fixed' ? '固定金額' : '百分比' }}</td>
+                    <td class="px-6 py-4 {{ $textPrimary }}">{{ $rule->bonus_type == 'fixed' ? '$'.number_format($rule->bonus_value) : $rule->bonus_value.'%' }}</td>
+                    <td class="px-6 py-4">
+                        @if($rule->is_active)
+                        <span class="px-2 py-1 rounded-full bg-green-100 text-green-800 text-xs">啟用</span>
+                        @else
+                        <span class="px-2 py-1 rounded-full bg-gray-100 text-gray-800 text-xs">停用</span>
+                        @endif
+                    </td>
+                    <td class="px-6 py-4">
+                        <form action="{{ route('admin.deposit-bonus-rules.destroy', $rule) }}" method="POST" class="inline" onsubmit="return confirm('確定要刪除嗎？')">
+                            @csrf
+                            @method('DELETE')
+                            <button type="submit" class="text-red-600 hover:text-red-800">刪除</button>
+                        </form>
+                    </td>
+                </tr>
+                @empty
+                <tr>
+                    <td colspan="6" class="px-6 py-4 text-center {{ $textSecondary }}">尚無資料</td>
+                </tr>
+                @endforelse
+            </tbody>
+        </table>
+    </div>
+</div>
+
+{{-- Create Modal --}}
+<div id="createModal" class="hidden fixed inset-0 z-50 overflow-y-auto" @keydown.escape.window="document.getElementById('createModal').classList.add('hidden')">
+    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">
+        <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" onclick="document.getElementById('createModal').classList.add('hidden')"></div>
+        
+        <div class="relative {{ $cardBg }} rounded-lg shadow-xl transform transition-all sm:max-w-lg sm:w-full mx-4">
+            <div class="px-6 py-4 border-b {{ $borderColor }}">
+                <h3 class="{{ $textPrimary }} text-lg font-semibold">新增儲值回饋規則</h3>
+            </div>
+            <form action="{{ route('admin.deposit-bonus-rules.store') }}" method="POST">
+                @csrf
+                <div class="px-6 py-4 space-y-4">
+                    <div>
+                        <label class="{{ $textSecondary }} text-sm block mb-1">名稱</label>
+                        <input type="text" name="name" required class="w-full px-3 py-2 {{ $inputBg }} {{ $inputBorder }} border rounded-md {{ $textPrimary }} focus:ring-2 focus:ring-indigo-500">
+                    </div>
+                    <div>
+                        <label class="{{ $textSecondary }} text-sm block mb-1">最低儲值金額</label>
+                        <input type="number" name="min_amount" value="0" step="0.01" class="w-full px-3 py-2 {{ $inputBg }} {{ $inputBorder }} border rounded-md {{ $textPrimary }} focus:ring-2 focus:ring-indigo-500">
+                    </div>
+                    <div>
+                        <label class="{{ $textSecondary }} text-sm block mb-1">回饋類型</label>
+                        <select name="bonus_type" class="w-full px-3 py-2 {{ $inputBg }} {{ $inputBorder }} border rounded-md {{ $textPrimary }} focus:ring-2 focus:ring-indigo-500">
+                            <option value="fixed">固定金額</option>
+                            <option value="percentage">百分比</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="{{ $textSecondary }} text-sm block mb-1">回饋值</label>
+                        <input type="number" name="bonus_value" value="0" step="0.01" class="w-full px-3 py-2 {{ $inputBg }} {{ $inputBorder }} border rounded-md {{ $textPrimary }} focus:ring-2 focus:ring-indigo-500">
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" name="is_active" value="1" checked id="is_active" class="mr-2 rounded text-indigo-600 focus:ring-indigo-500">
+                        <label for="is_active" class="{{ $textSecondary }} text-sm">啟用</label>
+                    </div>
+                </div>
+                <div class="px-6 py-4 border-t {{ $borderColor }} flex justify-end space-x-3">
+                    <button type="button" onclick="document.getElementById('createModal').classList.add('hidden')" class="px-4 py-2 {{ $textSecondary }} border {{ $inputBorder }} rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">取消</button>
+                    <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">建立</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+@endsection

resources/views/admin/gift-definitions/index.blade.php

@@ -0,0 +1,168 @@
+@extends('layouts.admin')
+
+@section('content')
+@php
+    $theme = request()->cookie('theme', 'dark-blue');
+    $isLight = in_array($theme, ['light-blue', 'light-green']);
+    $cardBg = $isLight ? 'bg-white' : 'bg-gray-800';
+    $textPrimary = $isLight ? 'text-gray-900' : 'text-gray-200';
+    $textSecondary = $isLight ? 'text-gray-600' : 'text-gray-400';
+    $borderColor = $isLight ? 'border-gray-200' : 'border-gray-700';
+    $thBg = $isLight ? 'bg-gray-50' : 'bg-gray-700';
+    $inputBg = $isLight ? 'bg-white' : 'bg-gray-700';
+    $inputBorder = $isLight ? 'border-gray-300' : 'border-gray-600';
+    
+    $typeLabels = [
+        'points' => '點數',
+        'coupon' => '優惠券',
+        'product' => '商品',
+        'discount' => '折扣',
+        'cash' => '現金',
+    ];
+    
+    $triggerLabels = [
+        'register' => '註冊',
+        'birthday' => '生日',
+        'annual' => '年度',
+        'upgrade' => '升級',
+        'manual' => '手動',
+    ];
+@endphp
+
+{{-- Toast 通知 --}}
+@if(session('success'))
+<div x-data="{ show: false }" 
+     x-show="show" 
+     x-cloak
+     x-init="setTimeout(() => { show = true; setTimeout(() => show = false, 3000) }, 50)"
+     x-transition:enter="transition cubic-bezier(0.34, 1.56, 0.64, 1) duration-300"
+     x-transition:enter-start="opacity-0 -translate-y-40"
+     x-transition:enter-end="opacity-100 translate-y-0"
+     x-transition:leave="transition ease-in duration-400"
+     x-transition:leave-start="opacity-100 translate-y-0"
+     x-transition:leave-end="opacity-0 -translate-y-40"
+     class="fixed top-4 left-0 right-0 mx-auto w-max z-[100] bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg flex items-center">
+    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+    </svg>
+    {{ session('success') }}
+</div>
+@endif
+
+<div class="container mx-auto px-6 py-8">
+    <div class="flex justify-between items-center mb-6">
+        <h3 class="{{ $textPrimary }} text-3xl font-medium">禮品設定</h3>
+        <button onclick="document.getElementById('createModal').classList.remove('hidden')" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700">
+            新增禮品
+        </button>
+    </div>
+
+    <div class="overflow-x-auto">
+        <table class="min-w-full {{ $cardBg }} rounded-lg overflow-hidden">
+            <thead class="{{ $thBg }}">
+                <tr>
+                    <th class="px-6 py-3 text-left text-xs font-medium {{ $textSecondary }} uppercase">名稱</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium {{ $textSecondary }} uppercase">類型</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium {{ $textSecondary }} uppercase">數值</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium {{ $textSecondary }} uppercase">適用等級</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium {{ $textSecondary }} uppercase">觸發條件</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium {{ $textSecondary }} uppercase">狀態</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium {{ $textSecondary }} uppercase">操作</th>
+                </tr>
+            </thead>
+            <tbody class="divide-y {{ $borderColor }}">
+                @forelse($gifts as $gift)
+                <tr>
+                    <td class="px-6 py-4 {{ $textPrimary }}">{{ $gift->name }}</td>
+                    <td class="px-6 py-4 {{ $textPrimary }}">{{ $typeLabels[$gift->type] ?? $gift->type }}</td>
+                    <td class="px-6 py-4 {{ $textPrimary }}">{{ $gift->value }}</td>
+                    <td class="px-6 py-4 {{ $textPrimary }}">{{ $gift->tier?->name ?? '全部' }}</td>
+                    <td class="px-6 py-4 {{ $textPrimary }}">{{ $triggerLabels[$gift->trigger] ?? $gift->trigger }}</td>
+                    <td class="px-6 py-4">
+                        @if($gift->is_active)
+                        <span class="px-2 py-1 rounded-full bg-green-100 text-green-800 text-xs">啟用</span>
+                        @else
+                        <span class="px-2 py-1 rounded-full bg-gray-100 text-gray-800 text-xs">停用</span>
+                        @endif
+                    </td>
+                    <td class="px-6 py-4">
+                        <form action="{{ route('admin.gift-definitions.destroy', $gift) }}" method="POST" class="inline" onsubmit="return confirm('確定要刪除嗎？')">
+                            @csrf
+                            @method('DELETE')
+                            <button type="submit" class="text-red-600 hover:text-red-800">刪除</button>
+                        </form>
+                    </td>
+                </tr>
+                @empty
+                <tr>
+                    <td colspan="7" class="px-6 py-4 text-center {{ $textSecondary }}">尚無資料</td>
+                </tr>
+                @endforelse
+            </tbody>
+        </table>
+    </div>
+</div>
+
+{{-- Create Modal --}}
+<div id="createModal" class="hidden fixed inset-0 z-50 overflow-y-auto" @keydown.escape.window="document.getElementById('createModal').classList.add('hidden')">
+    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">
+        <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" onclick="document.getElementById('createModal').classList.add('hidden')"></div>
+        
+        <div class="relative {{ $cardBg }} rounded-lg shadow-xl transform transition-all sm:max-w-lg sm:w-full mx-4">
+            <div class="px-6 py-4 border-b {{ $borderColor }}">
+                <h3 class="{{ $textPrimary }} text-lg font-semibold">新增禮品</h3>
+            </div>
+            <form action="{{ route('admin.gift-definitions.store') }}" method="POST">
+                @csrf
+                <div class="px-6 py-4 space-y-4">
+                    <div>
+                        <label class="{{ $textSecondary }} text-sm block mb-1">名稱</label>
+                        <input type="text" name="name" required class="w-full px-3 py-2 {{ $inputBg }} {{ $inputBorder }} border rounded-md {{ $textPrimary }} focus:ring-2 focus:ring-indigo-500">
+                    </div>
+                    <div>
+                        <label class="{{ $textSecondary }} text-sm block mb-1">類型</label>
+                        <select name="type" class="w-full px-3 py-2 {{ $inputBg }} {{ $inputBorder }} border rounded-md {{ $textPrimary }} focus:ring-2 focus:ring-indigo-500">
+                            @foreach($typeLabels as $key => $label)
+                            <option value="{{ $key }}">{{ $label }}</option>
+                            @endforeach
+                        </select>
+                    </div>
+                    <div>
+                        <label class="{{ $textSecondary }} text-sm block mb-1">數值</label>
+                        <input type="number" name="value" value="0" step="0.01" class="w-full px-3 py-2 {{ $inputBg }} {{ $inputBorder }} border rounded-md {{ $textPrimary }} focus:ring-2 focus:ring-indigo-500">
+                    </div>
+                    <div>
+                        <label class="{{ $textSecondary }} text-sm block mb-1">適用等級</label>
+                        <select name="tier_id" class="w-full px-3 py-2 {{ $inputBg }} {{ $inputBorder }} border rounded-md {{ $textPrimary }} focus:ring-2 focus:ring-indigo-500">
+                            <option value="">全部</option>
+                            @foreach($tiers as $tier)
+                            <option value="{{ $tier->id }}">{{ $tier->name }}</option>
+                            @endforeach
+                        </select>
+                    </div>
+                    <div>
+                        <label class="{{ $textSecondary }} text-sm block mb-1">觸發條件</label>
+                        <select name="trigger" class="w-full px-3 py-2 {{ $inputBg }} {{ $inputBorder }} border rounded-md {{ $textPrimary }} focus:ring-2 focus:ring-indigo-500">
+                            @foreach($triggerLabels as $key => $label)
+                            <option value="{{ $key }}">{{ $label }}</option>
+                            @endforeach
+                        </select>
+                    </div>
+                    <div>
+                        <label class="{{ $textSecondary }} text-sm block mb-1">有效天數</label>
+                        <input type="number" name="validity_days" value="30" min="1" class="w-full px-3 py-2 {{ $inputBg }} {{ $inputBorder }} border rounded-md {{ $textPrimary }} focus:ring-2 focus:ring-indigo-500">
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" name="is_active" value="1" checked id="is_active" class="mr-2 rounded text-indigo-600 focus:ring-indigo-500">
+                        <label for="is_active" class="{{ $textSecondary }} text-sm">啟用</label>
+                    </div>
+                </div>
+                <div class="px-6 py-4 border-t {{ $borderColor }} flex justify-end space-x-3">
+                    <button type="button" onclick="document.getElementById('createModal').classList.add('hidden')" class="px-4 py-2 {{ $textSecondary }} border {{ $inputBorder }} rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">取消</button>
+                    <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">建立</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+@endsection

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

@@ -0,0 +1,93 @@
+@extends('layouts.admin')
+
+@section('content')
+@php
+    $theme = request()->cookie('theme', 'dark-blue');
+    $isLight = in_array($theme, ['light-blue', 'light-green']);
+    $cardBg = $isLight ? 'bg-white' : 'bg-gray-800';
+    $textPrimary = $isLight ? 'text-gray-900' : 'text-gray-200';
+    $textSecondary = $isLight ? 'text-gray-600' : 'text-gray-400';
+    $borderColor = $isLight ? 'border-gray-200' : 'border-gray-700';
+    $thBg = $isLight ? 'bg-gray-50' : 'bg-gray-700';
+@endphp
+<div class="container mx-auto px-6 py-8">
+    <h3 class="{{ $textPrimary }} text-3xl font-medium">會員列表</h3>
+
+    <div class="mt-8">
+        {{-- 搜尋與篩選 (預留空間) --}}
+        
+        <div class="flex flex-col mt-4">
+            <div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
+                <div class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b {{ $borderColor }}">
+                    <table class="min-w-full">
+                        <thead>
+                            <tr>
+                                <th class="px-6 py-3 border-b {{ $borderColor }} {{ $thBg }} text-left text-xs leading-4 font-medium {{ $textSecondary }} uppercase tracking-wider">
+                                    UUID
+                                </th>
+                                <th class="px-6 py-3 border-b {{ $borderColor }} {{ $thBg }} text-left text-xs leading-4 font-medium {{ $textSecondary }} uppercase tracking-wider">
+                                    姓名
+                                </th>
+                                <th class="px-6 py-3 border-b {{ $borderColor }} {{ $thBg }} text-left text-xs leading-4 font-medium {{ $textSecondary }} uppercase tracking-wider">
+                                    Email
+                                </th>
+                                <th class="px-6 py-3 border-b {{ $borderColor }} {{ $thBg }} text-left text-xs leading-4 font-medium {{ $textSecondary }} uppercase tracking-wider">
+                                    手機
+                                </th>
+                                <th class="px-6 py-3 border-b {{ $borderColor }} {{ $thBg }} text-left text-xs leading-4 font-medium {{ $textSecondary }} uppercase tracking-wider">
+                                    狀態
+                                </th>
+                                <th class="px-6 py-3 border-b {{ $borderColor }} {{ $thBg }} text-left text-xs leading-4 font-medium {{ $textSecondary }} uppercase tracking-wider">
+                                    註冊時間
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody class="{{ $cardBg }}">
+                            @forelse ($members as $member)
+                            <tr>
+                                <td class="px-6 py-4 whitespace-no-wrap border-b {{ $borderColor }}">
+                                    <div class="text-sm leading-5 font-medium {{ $textSecondary }}">{{ $member->uuid }}</div>
+                                </td>
+                                <td class="px-6 py-4 whitespace-no-wrap border-b {{ $borderColor }}">
+                                    <div class="text-sm leading-5 font-bold {{ $textPrimary }}">{{ $member->name }}</div>
+                                </td>
+                                <td class="px-6 py-4 whitespace-no-wrap border-b {{ $borderColor }}">
+                                    <div class="text-sm leading-5 {{ $textPrimary }}">{{ $member->email ?? '-' }}</div>
+                                </td>
+                                <td class="px-6 py-4 whitespace-no-wrap border-b {{ $borderColor }}">
+                                    <div class="text-sm leading-5 {{ $textPrimary }}">{{ $member->phone ?? '-' }}</div>
+                                </td>
+                                <td class="px-6 py-4 whitespace-no-wrap border-b {{ $borderColor }}">
+                                    @if($member->is_active)
+                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                                            啟用
+                                        </span>
+                                    @else
+                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
+                                            停用
+                                        </span>
+                                    @endif
+                                </td>
+                                <td class="px-6 py-4 whitespace-no-wrap border-b {{ $borderColor }} text-sm leading-5 {{ $textSecondary }}">
+                                    {{ $member->created_at->format('Y-m-d H:i') }}
+                                </td>
+                            </tr>
+                            @empty
+                            <tr>
+                                <td colspan="6" class="px-6 py-4 whitespace-no-wrap border-b {{ $borderColor }} text-center {{ $textSecondary }}">
+                                    尚無會員資料
+                                </td>
+                            </tr>
+                            @endforelse
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+
+        <div class="mt-4">
+            {{ $members->links() }}
+        </div>
+    </div>
+</div>
+@endsection

resources/views/admin/membership-tiers/index.blade.php

@@ -0,0 +1,129 @@
+@extends('layouts.admin')
+
+@section('content')
+@php
+    $theme = request()->cookie('theme', 'dark-blue');
+    $isLight = in_array($theme, ['light-blue', 'light-green']);
+    $cardBg = $isLight ? 'bg-white' : 'bg-gray-800';
+    $textPrimary = $isLight ? 'text-gray-900' : 'text-gray-200';
+    $textSecondary = $isLight ? 'text-gray-600' : 'text-gray-400';
+    $borderColor = $isLight ? 'border-gray-200' : 'border-gray-700';
+    $thBg = $isLight ? 'bg-gray-50' : 'bg-gray-700';
+    $inputBg = $isLight ? 'bg-white' : 'bg-gray-700';
+    $inputBorder = $isLight ? 'border-gray-300' : 'border-gray-600';
+@endphp
+
+{{-- Toast 通知 --}}
+@if(session('success'))
+<div x-data="{ show: false }" 
+     x-show="show" 
+     x-cloak
+     x-init="setTimeout(() => { show = true; setTimeout(() => show = false, 3000) }, 50)"
+     x-transition:enter="transition cubic-bezier(0.34, 1.56, 0.64, 1) duration-300"
+     x-transition:enter-start="opacity-0 -translate-y-40"
+     x-transition:enter-end="opacity-100 translate-y-0"
+     x-transition:leave="transition ease-in duration-400"
+     x-transition:leave-start="opacity-100 translate-y-0"
+     x-transition:leave-end="opacity-0 -translate-y-40"
+     class="fixed top-4 left-0 right-0 mx-auto w-max z-[100] bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg flex items-center">
+    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+    </svg>
+    {{ session('success') }}
+</div>
+@endif
+
+<div class="container mx-auto px-6 py-8">
+    <div class="flex justify-between items-center mb-6">
+        <h3 class="{{ $textPrimary }} text-3xl font-medium">會員等級設定</h3>
+        <button onclick="document.getElementById('createModal').classList.remove('hidden')" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700">
+            新增等級
+        </button>
+    </div>
+
+    <div class="overflow-x-auto">
+        <table class="min-w-full {{ $cardBg }} rounded-lg overflow-hidden">
+            <thead class="{{ $thBg }}">
+                <tr>
+                    <th class="px-6 py-3 text-left text-xs font-medium {{ $textSecondary }} uppercase">名稱</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium {{ $textSecondary }} uppercase">年費</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium {{ $textSecondary }} uppercase">折扣</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium {{ $textSecondary }} uppercase">點數倍率</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium {{ $textSecondary }} uppercase">預設</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium {{ $textSecondary }} uppercase">操作</th>
+                </tr>
+            </thead>
+            <tbody class="divide-y {{ $borderColor }}">
+                @forelse($tiers as $tier)
+                <tr>
+                    <td class="px-6 py-4 {{ $textPrimary }}">{{ $tier->name }}</td>
+                    <td class="px-6 py-4 {{ $textPrimary }}">{{ $tier->annual_fee == 0 ? '免費' : '$'.number_format($tier->annual_fee) }}</td>
+                    <td class="px-6 py-4 {{ $textPrimary }}">{{ $tier->discount_rate * 100 }}%</td>
+                    <td class="px-6 py-4 {{ $textPrimary }}">{{ $tier->point_multiplier }}x</td>
+                    <td class="px-6 py-4">
+                        @if($tier->is_default)
+                        <span class="px-2 py-1 rounded-full bg-green-100 text-green-800 text-xs">預設</span>
+                        @endif
+                    </td>
+                    <td class="px-6 py-4">
+                        <form action="{{ route('admin.membership-tiers.destroy', $tier) }}" method="POST" class="inline" onsubmit="return confirm('確定要刪除嗎？')">
+                            @csrf
+                            @method('DELETE')
+                            <button type="submit" class="text-red-600 hover:text-red-800">刪除</button>
+                        </form>
+                    </td>
+                </tr>
+                @empty
+                <tr>
+                    <td colspan="6" class="px-6 py-4 text-center {{ $textSecondary }}">尚無資料</td>
+                </tr>
+                @endforelse
+            </tbody>
+        </table>
+    </div>
+</div>
+
+{{-- Create Modal --}}
+<div id="createModal" class="hidden fixed inset-0 z-50 overflow-y-auto" x-data @keydown.escape.window="document.getElementById('createModal').classList.add('hidden')">
+    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">
+        {{-- 背景遮罩 --}}
+        <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" onclick="document.getElementById('createModal').classList.add('hidden')"></div>
+        
+        {{-- Modal 內容 --}}
+        <div class="relative {{ $cardBg }} rounded-lg shadow-xl transform transition-all sm:max-w-lg sm:w-full mx-4">
+            <div class="px-6 py-4 border-b {{ $borderColor }}">
+                <h3 class="{{ $textPrimary }} text-lg font-semibold">新增會員等級</h3>
+            </div>
+            <form action="{{ route('admin.membership-tiers.store') }}" method="POST">
+                @csrf
+                <div class="px-6 py-4 space-y-4">
+                    <div>
+                        <label class="{{ $textSecondary }} text-sm block mb-1">名稱</label>
+                        <input type="text" name="name" required class="w-full px-3 py-2 {{ $inputBg }} {{ $inputBorder }} border rounded-md {{ $textPrimary }} focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+                    </div>
+                    <div>
+                        <label class="{{ $textSecondary }} text-sm block mb-1">年費</label>
+                        <input type="number" name="annual_fee" value="0" step="0.01" class="w-full px-3 py-2 {{ $inputBg }} {{ $inputBorder }} border rounded-md {{ $textPrimary }} focus:ring-2 focus:ring-indigo-500">
+                    </div>
+                    <div>
+                        <label class="{{ $textSecondary }} text-sm block mb-1">折扣比例 (0.95 = 95折)</label>
+                        <input type="number" name="discount_rate" value="1.00" step="0.01" min="0" max="1" class="w-full px-3 py-2 {{ $inputBg }} {{ $inputBorder }} border rounded-md {{ $textPrimary }} focus:ring-2 focus:ring-indigo-500">
+                    </div>
+                    <div>
+                        <label class="{{ $textSecondary }} text-sm block mb-1">點數倍率</label>
+                        <input type="number" name="point_multiplier" value="1.00" step="0.01" min="0" class="w-full px-3 py-2 {{ $inputBg }} {{ $inputBorder }} border rounded-md {{ $textPrimary }} focus:ring-2 focus:ring-indigo-500">
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" name="is_default" value="1" id="is_default" class="mr-2 rounded text-indigo-600 focus:ring-indigo-500">
+                        <label for="is_default" class="{{ $textSecondary }} text-sm">設為預設等級</label>
+                    </div>
+                </div>
+                <div class="px-6 py-4 border-t {{ $borderColor }} flex justify-end space-x-3">
+                    <button type="button" onclick="document.getElementById('createModal').classList.add('hidden')" class="px-4 py-2 {{ $textSecondary }} border {{ $inputBorder }} rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">取消</button>
+                    <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">建立</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+@endsection

resources/views/admin/point-rules/index.blade.php

@@ -0,0 +1,147 @@
+@extends('layouts.admin')
+
+@section('content')
+@php
+    $theme = request()->cookie('theme', 'dark-blue');
+    $isLight = in_array($theme, ['light-blue', 'light-green']);
+    $cardBg = $isLight ? 'bg-white' : 'bg-gray-800';
+    $textPrimary = $isLight ? 'text-gray-900' : 'text-gray-200';
+    $textSecondary = $isLight ? 'text-gray-600' : 'text-gray-400';
+    $borderColor = $isLight ? 'border-gray-200' : 'border-gray-700';
+    $thBg = $isLight ? 'bg-gray-50' : 'bg-gray-700';
+    $inputBg = $isLight ? 'bg-white' : 'bg-gray-700';
+    $inputBorder = $isLight ? 'border-gray-300' : 'border-gray-600';
+    
+    $triggerLabels = [
+        'purchase' => '消費',
+        'deposit' => '儲值',
+        'register' => '註冊',
+        'birthday' => '生日',
+        'referral' => '推薦',
+    ];
+@endphp
+
+{{-- Toast 通知 --}}
+@if(session('success'))
+<div x-data="{ show: false }" 
+     x-show="show" 
+     x-cloak
+     x-init="setTimeout(() => { show = true; setTimeout(() => show = false, 3000) }, 50)"
+     x-transition:enter="transition cubic-bezier(0.34, 1.56, 0.64, 1) duration-300"
+     x-transition:enter-start="opacity-0 -translate-y-40"
+     x-transition:enter-end="opacity-100 translate-y-0"
+     x-transition:leave="transition ease-in duration-400"
+     x-transition:leave-start="opacity-100 translate-y-0"
+     x-transition:leave-end="opacity-0 -translate-y-40"
+     class="fixed top-4 left-0 right-0 mx-auto w-max z-[100] bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg flex items-center">
+    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+    </svg>
+    {{ session('success') }}
+</div>
+@endif
+
+<div class="container mx-auto px-6 py-8">
+    <div class="flex justify-between items-center mb-6">
+        <h3 class="{{ $textPrimary }} text-3xl font-medium">點數規則設定</h3>
+        <button onclick="document.getElementById('createModal').classList.remove('hidden')" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700">
+            新增規則
+        </button>
+    </div>
+
+    <div class="overflow-x-auto">
+        <table class="min-w-full {{ $cardBg }} rounded-lg overflow-hidden">
+            <thead class="{{ $thBg }}">
+                <tr>
+                    <th class="px-6 py-3 text-left text-xs font-medium {{ $textSecondary }} uppercase">名稱</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium {{ $textSecondary }} uppercase">觸發條件</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium {{ $textSecondary }} uppercase">每單位點數</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium {{ $textSecondary }} uppercase">單位金額</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium {{ $textSecondary }} uppercase">有效天數</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium {{ $textSecondary }} uppercase">狀態</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium {{ $textSecondary }} uppercase">操作</th>
+                </tr>
+            </thead>
+            <tbody class="divide-y {{ $borderColor }}">
+                @forelse($rules as $rule)
+                <tr>
+                    <td class="px-6 py-4 {{ $textPrimary }}">{{ $rule->name }}</td>
+                    <td class="px-6 py-4 {{ $textPrimary }}">{{ $triggerLabels[$rule->trigger] ?? $rule->trigger }}</td>
+                    <td class="px-6 py-4 {{ $textPrimary }}">{{ $rule->points_per_unit }} 點</td>
+                    <td class="px-6 py-4 {{ $textPrimary }}">${{ number_format($rule->unit_amount) }}</td>
+                    <td class="px-6 py-4 {{ $textPrimary }}">{{ $rule->validity_days }} 天</td>
+                    <td class="px-6 py-4">
+                        @if($rule->is_active)
+                        <span class="px-2 py-1 rounded-full bg-green-100 text-green-800 text-xs">啟用</span>
+                        @else
+                        <span class="px-2 py-1 rounded-full bg-gray-100 text-gray-800 text-xs">停用</span>
+                        @endif
+                    </td>
+                    <td class="px-6 py-4">
+                        <form action="{{ route('admin.point-rules.destroy', $rule) }}" method="POST" class="inline" onsubmit="return confirm('確定要刪除嗎？')">
+                            @csrf
+                            @method('DELETE')
+                            <button type="submit" class="text-red-600 hover:text-red-800">刪除</button>
+                        </form>
+                    </td>
+                </tr>
+                @empty
+                <tr>
+                    <td colspan="7" class="px-6 py-4 text-center {{ $textSecondary }}">尚無資料</td>
+                </tr>
+                @endforelse
+            </tbody>
+        </table>
+    </div>
+</div>
+
+{{-- Create Modal --}}
+<div id="createModal" class="hidden fixed inset-0 z-50 overflow-y-auto" @keydown.escape.window="document.getElementById('createModal').classList.add('hidden')">
+    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">
+        <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" onclick="document.getElementById('createModal').classList.add('hidden')"></div>
+        
+        <div class="relative {{ $cardBg }} rounded-lg shadow-xl transform transition-all sm:max-w-lg sm:w-full mx-4">
+            <div class="px-6 py-4 border-b {{ $borderColor }}">
+                <h3 class="{{ $textPrimary }} text-lg font-semibold">新增點數規則</h3>
+            </div>
+            <form action="{{ route('admin.point-rules.store') }}" method="POST">
+                @csrf
+                <div class="px-6 py-4 space-y-4">
+                    <div>
+                        <label class="{{ $textSecondary }} text-sm block mb-1">名稱</label>
+                        <input type="text" name="name" required class="w-full px-3 py-2 {{ $inputBg }} {{ $inputBorder }} border rounded-md {{ $textPrimary }} focus:ring-2 focus:ring-indigo-500">
+                    </div>
+                    <div>
+                        <label class="{{ $textSecondary }} text-sm block mb-1">觸發條件</label>
+                        <select name="trigger" class="w-full px-3 py-2 {{ $inputBg }} {{ $inputBorder }} border rounded-md {{ $textPrimary }} focus:ring-2 focus:ring-indigo-500">
+                            @foreach($triggerLabels as $key => $label)
+                            <option value="{{ $key }}">{{ $label }}</option>
+                            @endforeach
+                        </select>
+                    </div>
+                    <div>
+                        <label class="{{ $textSecondary }} text-sm block mb-1">每單位獲得點數</label>
+                        <input type="number" name="points_per_unit" value="1" min="1" class="w-full px-3 py-2 {{ $inputBg }} {{ $inputBorder }} border rounded-md {{ $textPrimary }} focus:ring-2 focus:ring-indigo-500">
+                    </div>
+                    <div>
+                        <label class="{{ $textSecondary }} text-sm block mb-1">單位金額</label>
+                        <input type="number" name="unit_amount" value="100" step="0.01" class="w-full px-3 py-2 {{ $inputBg }} {{ $inputBorder }} border rounded-md {{ $textPrimary }} focus:ring-2 focus:ring-indigo-500">
+                    </div>
+                    <div>
+                        <label class="{{ $textSecondary }} text-sm block mb-1">有效天數</label>
+                        <input type="number" name="validity_days" value="365" min="1" class="w-full px-3 py-2 {{ $inputBg }} {{ $inputBorder }} border rounded-md {{ $textPrimary }} focus:ring-2 focus:ring-indigo-500">
+                    </div>
+                    <div class="flex items-center">
+                        <input type="checkbox" name="is_active" value="1" checked id="is_active" class="mr-2 rounded text-indigo-600 focus:ring-indigo-500">
+                        <label for="is_active" class="{{ $textSecondary }} text-sm">啟用</label>
+                    </div>
+                </div>
+                <div class="px-6 py-4 border-t {{ $borderColor }} flex justify-end space-x-3">
+                    <button type="button" onclick="document.getElementById('createModal').classList.add('hidden')" class="px-4 py-2 {{ $textSecondary }} border {{ $inputBorder }} rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">取消</button>
+                    <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">建立</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+@endsection

resources/views/layouts/admin.blade.php

@@ -80,14 +80,9 @@
         </div>
 
         <!-- Sidebar -->
-        <aside class="fixed inset-y-0 left-0 z-50 w-64 {{ $currentTheme['sidebar'] }} border-r lg:translate-x-0 lg:static lg:inset-0 overflow-y-auto"
+        <aside class="fixed inset-y-0 left-0 z-50 w-64 {{ $currentTheme['sidebar'] }} border-r overflow-y-auto transition-transform duration-300 ease-in-out lg:translate-x-0 lg:static lg:inset-0"
                :class="{'translate-x-0': sidebarOpen, '-translate-x-full': !sidebarOpen}"
-               x-transition:enter="transition-transform ease-in-out duration-300"
-               x-transition:enter-start="-translate-x-full"
-               x-transition:enter-end="translate-x-0"
-               x-transition:leave="transition-transform ease-in-out duration-300"
-               x-transition:leave-start="translate-x-0"
-               x-transition:leave-end="-translate-x-full">
+               x-cloak>
             <div class="flex items-center justify-center h-16 {{ $currentTheme['header'] }} border-b">
                 <span class="text-2xl font-bold text-{{ $currentTheme['accent'] }}-500">Star Cloud</span>
             </div>

resources/views/layouts/partials/sidebar-menu.blade.php

@@ -24,11 +24,36 @@
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
         </svg>
     </button>
-    <div x-show="open" x-collapse class="mt-1 space-y-1">
+    <div x-show="open" x-collapse.duration.500ms class="mt-1 space-y-1">
         <a href="{{ route('profile.edit') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('profile.edit') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-700 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">個人檔案</a>
     </div>
 </div>
 
+{{-- 會員管理 (新增) --}}
+<div x-data="{ 
+    open: localStorage.getItem('menu_members') === 'true' || {{ request()->routeIs('admin.members.*') ? 'true' : 'false' }},
+    init() {
+        this.$watch('open', value => localStorage.setItem('menu_members', value))
+    }
+}">
+    <button @click="open = !open" class="group flex items-center w-full px-2 py-2 text-sm font-medium rounded-md {{ $isLight ? 'text-gray-700 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white' }}">
+        <svg class="mr-3 h-5 w-5 {{ $isLight ? 'text-gray-400 group-hover:text-gray-500' : 'text-gray-400 group-hover:text-gray-300' }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+        </svg>
+        <span class="flex-1 text-left">會員管理</span>
+        <svg class="ml-auto h-5 w-5 transform transition-transform duration-200" :class="{'rotate-90': open}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+        </svg>
+    </button>
+    <div x-show="open" x-collapse.duration.500ms class="mt-1 space-y-1">
+        <a href="{{ route('admin.members.index') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.members.index') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-700 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">會員列表</a>
+        <a href="{{ route('admin.membership-tiers.index') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.membership-tiers.*') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-700 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">會員等級設定</a>
+        <a href="{{ route('admin.deposit-bonus-rules.index') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.deposit-bonus-rules.*') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-700 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">儲值回饋設定</a>
+        <a href="{{ route('admin.point-rules.index') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.point-rules.*') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-700 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">點數規則設定</a>
+        <a href="{{ route('admin.gift-definitions.index') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.gift-definitions.*') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-700 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">禮品設定</a>
+    </div>
+</div>
+
 {{-- 3. 機台管理 --}}
 <div x-data="{ 
     open: localStorage.getItem('menu_machines') === 'true' || {{ request()->routeIs('admin.machines.*') ? 'true' : 'false' }},
@@ -45,7 +70,7 @@
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
         </svg>
     </button>
-    <div x-show="open" x-collapse class="mt-1 space-y-1">
+    <div x-show="open" x-collapse.duration.500ms class="mt-1 space-y-1">
         <a href="{{ route('admin.machines.logs') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.machines.logs') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-700 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">機台日誌</a>
         <a href="{{ route('admin.machines.index') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.machines.index') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-700 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">機台列表</a>
         <a href="{{ route('admin.machines.permissions') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.machines.permissions') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-700 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">機台權限</a>
@@ -71,7 +96,7 @@
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
         </svg>
     </button>
-    <div x-show="open" x-collapse class="mt-1 space-y-1">
+    <div x-show="open" x-collapse.duration.500ms class="mt-1 space-y-1">
         <a href="{{ route('admin.app.ui-elements') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.app.ui-elements') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">UI元素設定</a>
         <a href="{{ route('admin.app.helper') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.app.helper') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">小幫手設定</a>
         <a href="{{ route('admin.app.questionnaire') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.app.questionnaire') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">問卷設定</a>
@@ -96,7 +121,7 @@
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
         </svg>
     </button>
-    <div x-show="open" x-collapse class="mt-1 space-y-1">
+    <div x-show="open" x-collapse.duration.500ms class="mt-1 space-y-1">
         <a href="{{ route('admin.warehouses.index') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.warehouses.index') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">倉庫列表(全部)</a>
         <a href="{{ route('admin.warehouses.personal') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.warehouses.personal') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">倉庫列表(個人)</a>
         <a href="{{ route('admin.warehouses.stock-management') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.warehouses.stock-management') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">庫存管理單</a>
@@ -127,7 +152,7 @@
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
         </svg>
     </button>
-    <div x-show="open" x-collapse class="mt-1 space-y-1">
+    <div x-show="open" x-collapse.duration.500ms class="mt-1 space-y-1">
         <a href="{{ route('admin.sales.index') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.sales.index') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">銷售&金流紀錄</a>
         <a href="{{ route('admin.sales.pickup-codes') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.sales.pickup-codes') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">取貨碼設定</a>
         <a href="{{ route('admin.sales.orders') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.sales.orders') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">購買單</a>
@@ -153,7 +178,7 @@
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
         </svg>
     </button>
-    <div x-show="open" x-collapse class="mt-1 space-y-1">
+    <div x-show="open" x-collapse.duration.500ms class="mt-1 space-y-1">
         <a href="{{ route('admin.analysis.change-stock') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.analysis.change-stock') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">零錢庫存分析</a>
         <a href="{{ route('admin.analysis.machine-reports') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.analysis.machine-reports') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">機台報表分析</a>
         <a href="{{ route('admin.analysis.product-reports') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.analysis.product-reports') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">商品報表分析</a>
@@ -177,7 +202,7 @@
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
         </svg>
     </button>
-    <div x-show="open" x-collapse class="mt-1 space-y-1">
+    <div x-show="open" x-collapse.duration.500ms class="mt-1 space-y-1">
         <a href="{{ route('admin.audit.purchases') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.audit.purchases') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">採購單稽核</a>
         <a href="{{ route('admin.audit.transfers') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.audit.transfers') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">調撥單稽核</a>
         <a href="{{ route('admin.audit.replenishments') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.audit.replenishments') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">補貨單稽核</a>
@@ -201,7 +226,7 @@
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
         </svg>
     </button>
-    <div x-show="open" x-collapse class="mt-1 space-y-1">
+    <div x-show="open" x-collapse.duration.500ms class="mt-1 space-y-1">
         <a href="{{ route('admin.data-config.products') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.data-config.products') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">商品管理</a>
         <a href="{{ route('admin.data-config.advertisements') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.data-config.advertisements') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">廣告管理</a>
         <a href="{{ route('admin.data-config.admin-products') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.data-config.admin-products') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">管理者可賣商品</a>
@@ -229,7 +254,7 @@
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
         </svg>
     </button>
-    <div x-show="open" x-collapse class="mt-1 space-y-1">
+    <div x-show="open" x-collapse.duration.500ms class="mt-1 space-y-1">
         <a href="{{ route('admin.remote.stock') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.remote.stock') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">機台庫存</a>
         <a href="{{ route('admin.remote.restart') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.remote.restart') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">機台重啟</a>
         <a href="{{ route('admin.remote.restart-card-reader') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.remote.restart-card-reader') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">卡機重啟</a>
@@ -256,7 +281,7 @@
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
         </svg>
     </button>
-    <div x-show="open" x-collapse class="mt-1 space-y-1">
+    <div x-show="open" x-collapse.duration.500ms class="mt-1 space-y-1">
         <a href="{{ route('admin.line.members') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.line.members') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">Line會員管理</a>
         <a href="{{ route('admin.line.machines') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.line.machines') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">Line機台管理</a>
         <a href="{{ route('admin.line.products') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.line.products') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">Line商城商品</a>
@@ -282,7 +307,7 @@
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
         </svg>
     </button>
-    <div x-show="open" x-collapse class="mt-1 space-y-1">
+    <div x-show="open" x-collapse.duration.500ms class="mt-1 space-y-1">
         <a href="{{ route('admin.reservation.members') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.reservation.members') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">Line會員管理</a>
         <a href="{{ route('admin.reservation.stores') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.reservation.stores') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">Line店家管理</a>
         <a href="{{ route('admin.reservation.time-slots') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.reservation.time-slots') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">Line時段組合</a>
@@ -309,7 +334,7 @@
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
         </svg>
     </button>
-    <div x-show="open" x-collapse class="mt-1 space-y-1">
+    <div x-show="open" x-collapse.duration.500ms class="mt-1 space-y-1">
         <a href="{{ route('admin.special-permission.clear-stock') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.special-permission.clear-stock') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">庫存清空</a>
         <a href="{{ route('admin.special-permission.apk-versions') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.special-permission.apk-versions') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">APK版本管理</a>
         <a href="{{ route('admin.special-permission.discord-notifications') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.special-permission.discord-notifications') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">Discord通知設定</a>
@@ -332,7 +357,7 @@
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
         </svg>
     </button>
-    <div x-show="open" x-collapse class="mt-1 space-y-1">
+    <div x-show="open" x-collapse.duration.500ms class="mt-1 space-y-1">
         <a href="{{ route('admin.permission.app-features') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.permission.app-features') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">APP功能管理</a>
         <a href="{{ route('admin.permission.data-config') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.permission.data-config') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">資料設定</a>
         <a href="{{ route('admin.permission.sales') }}" @click="if (window.innerWidth < 1024) sidebarOpen = false" class="group flex items-center pl-14 pr-2 py-2 text-sm rounded-md {{ request()->routeIs('admin.permission.sales') ? 'bg-'.$currentTheme['accent'].'-600 text-white' : ($isLight ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 hover:bg-gray-700 hover:text-white') }}" style="padding-left: 3.5rem;">銷售管理</a>

resources/views/test/social-login.blade.php

@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>社群登入測試</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://accounts.google.com/gsi/client" async defer></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.2/axios.min.js"></script>
+</head>
+<body class="bg-gray-100 min-h-screen flex items-center justify-center p-6">
+    <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-2xl">
+        <h1 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-4">Star Cloud 社群登入實測</h1>
+
+        @if(isset($line_data))
+        <div class="mb-6 p-4 bg-green-50 border border-green-200 rounded text-sm break-all">
+            <h3 class="font-bold text-green-700 mb-2">Line Callback Data</h3>
+            <pre>{{ json_encode($line_data, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
+            <p class="mt-2 text-gray-600">請將上方 code 透過後端 API 交換 access_token，再呼叫 /social-login API。</p>
+        </div>
+        @endif
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <!-- Google Section -->
+            <div class="bg-gray-50 p-4 rounded border">
+                <h2 class="font-semibold text-lg mb-4 text-blue-600">Google Login</h2>
+                
+                <div class="mb-4">
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Client ID</label>
+                    <input type="text" id="google-client-id" class="w-full p-2 border rounded text-sm" placeholder="YOUR_GOOGLE_CLIENT_ID">
+                </div>
+
+                <div id="g_id_onload"
+                     data-context="signin"
+                     data-ux_mode="popup"
+                     data-callback="handleGoogleCredentialResponse"
+                     data-auto_prompt="false">
+                </div>
+                <div class="g_id_signin"
+                     data-type="standard"
+                     data-shape="rectangular"
+                     data-theme="outline"
+                     data-text="signin_with"
+                     data-size="large"
+                     data-logo_alignment="left">
+                </div>
+                
+                <button onclick="initGoogle()" class="mt-4 w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 text-sm">
+                    初始化 Google 按鈕
+                </button>
+            </div>
+
+            <!-- Line Section -->
+            <div class="bg-gray-50 p-4 rounded border">
+                <h2 class="font-semibold text-lg mb-4 text-green-600">Line Login</h2>
+                
+                <div class="space-y-3">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Channel ID</label>
+                        <input type="text" id="line-channel-id" class="w-full p-2 border rounded text-sm" placeholder="1234567890">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Redirect URI</label>
+                        <input type="text" id="line-redirect-uri" class="w-full p-2 border rounded text-sm" value="{{ url('/test/line/callback') }}">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">State (Random)</label>
+                        <input type="text" id="line-state" class="w-full p-2 border rounded text-sm" value="{{ Str::random(10) }}" readonly>
+                    </div>
+                </div>
+
+                <button onclick="startLineLogin()" class="mt-6 w-full bg-green-500 text-white py-2 rounded hover:bg-green-600 font-bold">
+                    Log in with Line
+                </button>
+            </div>
+        </div>
+
+        <!-- API Result -->
+        <div class="mt-8 border-t pt-6">
+            <h2 class="font-semibold text-lg mb-4 text-gray-800">API 執行結果 (/api/members/social-login)</h2>
+            <div id="api-result" class="bg-gray-900 text-green-400 p-4 rounded font-mono text-sm h-64 overflow-y-auto">
+                Waiting for action...
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Google Initialization
+        function initGoogle() {
+            const clientId = document.getElementById('google-client-id').value;
+            if (!clientId) {
+                alert('請輸入 Google Client ID');
+                return;
+            }
+
+            const wrapper = document.getElementById('g_id_onload');
+            wrapper.setAttribute('data-client_id', clientId);
+            
+            // Re-render button if SDK already loaded
+            if (window.google) {
+                google.accounts.id.initialize({
+                    client_id: clientId,
+                    callback: handleGoogleCredentialResponse
+                });
+                google.accounts.id.renderButton(
+                    document.querySelector(".g_id_signin"),
+                    { theme: "outline", size: "large" }
+                );
+            }
+        }
+
+        function handleGoogleCredentialResponse(response) {
+            console.log("Google JWT ID Token: " + response.credential);
+            logResult("收到 Google ID Token...");
+            
+            // 解析 JWT (簡單解碼，正式環境應由後端驗證)
+            const payload = parseJwt(response.credential);
+            logResult("解析 JWT:\n" + JSON.stringify(payload, null, 2));
+
+            // 呼叫後端 API
+            callSocialLoginApi({
+                provider: 'google',
+                provider_id: payload.sub,
+                email: payload.email,
+                name: payload.name,
+                avatar: payload.picture,
+                access_token: response.credential // 這裡暫傳 id_token
+            });
+        }
+
+        // Line Login Logic
+        function startLineLogin() {
+            const channelId = document.getElementById('line-channel-id').value;
+            const redirectUri = document.getElementById('line-redirect-uri').value;
+            const state = document.getElementById('line-state').value;
+
+            if (!channelId) {
+                alert('請輸入 Line Channel ID');
+                return;
+            }
+
+            const url = `https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id=${channelId}&redirect_uri=${encodeURIComponent(redirectUri)}&state=${state}&scope=profile%20openid%20email`;
+            
+            window.location.href = url;
+        }
+
+        // API Call
+        async function callSocialLoginApi(data) {
+            logResult("呼叫 API: /api/members/social-login...");
+            try {
+                const response = await axios.post('/api/members/social-login', data);
+                logResult("API 回傳成功:\n" + JSON.stringify(response.data, null, 2));
+            } catch (error) {
+                logResult("API 錯誤:\n" + JSON.stringify(error.response ? error.response.data : error.message, null, 2));
+            }
+        }
+
+        // Utilities
+        function parseJwt (token) {
+            var base64Url = token.split('.')[1];
+            var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+            var jsonPayload = decodeURIComponent(window.atob(base64).split('').map(function(c) {
+                return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+            }).join(''));
+            return JSON.parse(jsonPayload);
+        }
+
+        function logResult(msg) {
+            const el = document.getElementById('api-result');
+            el.innerText = msg + "\n\n" + el.innerText;
+        }
+    </script>
+</body>
+</html>