@extends('layouts.admin')

@section('title', '營業額分析')

@section('content')
@php $activeTab = in_array(request('tab'), ['view','import','profit','costs']) ? request('tab') : 'view'; @endphp
<div class="max-w-5xl mx-auto px-4 py-8 space-y-6" x-data="revenueAnalyzer()">

    {{-- 頁首 --}}
    <div class="flex items-start justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">營業額分析</h1>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400"
               x-text="viewResult ? viewResult.month + ' 詳細分析' : '查詢各月份營業數據，或匯入新的訂單報表。'"></p>
        </div>
        <button x-show="viewResult" x-cloak
                @click="viewResult = null; window.scrollTo({top: 0, behavior: 'smooth'})"
                class="flex-shrink-0 flex items-center gap-1.5 px-4 py-2 rounded-xl text-sm font-medium bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-slate-600 transition-colors mt-1">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
            </svg>
            返回總覽
        </button>
    </div>

    {{-- 水平頁籤導覽 --}}
    <div class="border-b border-gray-200 dark:border-slate-700">
        <nav class="-mb-px flex gap-1" aria-label="Tabs">
            @php
                $tabs = [
                    'view'   => ['label' => '查詢分析',  'icon' => 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z'],
                    'import' => ['label' => '匯入報表',  'icon' => 'M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12'],
                    'profit' => ['label' => '計算淨賺',  'icon' => 'M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z'],
                    'costs'  => ['label' => '成本設定',  'icon' => 'M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 11h.01M12 11h.01M15 11h.01M12 7v4m6 0a9 9 0 11-18 0 9 9 0 0118 0z'],
                ];
            @endphp
            @foreach($tabs as $key => $tab)
                @php $isActive = $activeTab === $key; @endphp
                <a href="{{ route('admin.revenue.index') }}?tab={{ $key }}"
                   class="flex items-center gap-1.5 px-4 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap
                          {{ $isActive
                             ? 'border-blue-600 text-blue-700 dark:text-blue-400 dark:border-blue-400'
                             : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-slate-500' }}">
                    <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $tab['icon'] }}"/>
                    </svg>
                    {{ $tab['label'] }}
                </a>
            @endforeach
        </nav>
    </div>

    {{-- ══════════════════════════════════════
         頁籤一：查詢分析
    ══════════════════════════════════════ --}}
    <div class="space-y-5" style="{{ $activeTab !== 'view' ? 'display:none' : '' }}">

        {{-- 歷史月份記錄 --}}
        <div class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-200 dark:border-slate-700 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 dark:border-slate-700 space-y-3">
                <div class="flex items-center justify-between">
                    <h2 class="text-sm font-semibold text-gray-700 dark:text-gray-300">月份記錄</h2>
                    <div class="flex items-center gap-3">
                        <span class="text-xs text-gray-400" x-text="filteredHistory.length ? '共 ' + filteredHistory.length + ' 個月' : ''"></span>
                        <button @click="showCatSettings=!showCatSettings"
                                class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-medium transition-colors"
                                :class="showCatSettings
                                    ? 'bg-blue-100 dark:bg-blue-900/40 text-blue-600 dark:text-blue-400'
                                    : 'bg-gray-100 dark:bg-slate-700 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-slate-600'">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                            </svg>
                            分類設定
                        </button>
                    </div>
                </div>
                <div class="flex flex-wrap items-center gap-2">
                    {{-- 當月 --}}
                    <button @click="setPeriod('month')"
                            class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
                            :class="period==='month' ? 'bg-blue-600 text-white shadow-sm' : 'bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-slate-600'">
                        當月
                    </button>
                    {{-- 當年 --}}
                    <button @click="setPeriod('cur_year')"
                            class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
                            :class="period==='cur_year' ? 'bg-blue-600 text-white shadow-sm' : 'bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-slate-600'">
                        當年
                    </button>
                    {{-- 選年 + 緊接的下拉 --}}
                    <button @click="setPeriod('pick_year')"
                            class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
                            :class="period==='pick_year' ? 'bg-blue-600 text-white shadow-sm' : 'bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-slate-600'">
                        選年
                    </button>
                    <template x-if="period === 'pick_year'">
                        <select x-model="pickYear"
                                class="px-2 py-1.5 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-900 text-gray-900 dark:text-gray-100 text-xs focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            <template x-for="y in yearOptions" :key="y">
                                <option :value="y" x-text="y"></option>
                            </template>
                        </select>
                    </template>
                    {{-- 選月 + 緊接的下拉 --}}
                    <button @click="setPeriod('pick')"
                            class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
                            :class="period==='pick' ? 'bg-blue-600 text-white shadow-sm' : 'bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-slate-600'">
                        選月
                    </button>
                    <template x-if="period === 'pick'">
                        <select x-model="pickMonth"
                                class="px-2 py-1.5 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-900 text-gray-900 dark:text-gray-100 text-xs focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            <template x-for="row in history" :key="row.month">
                                <option :value="row.month" x-text="row.month"></option>
                            </template>
                        </select>
                    </template>
                    {{-- 近半年 --}}
                    <button @click="setPeriod('half')"
                            class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
                            :class="period==='half' ? 'bg-blue-600 text-white shadow-sm' : 'bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-slate-600'">
                        近半年
                    </button>
                    {{-- 近一年 --}}
                    <button @click="setPeriod('year')"
                            class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
                            :class="period==='year' ? 'bg-blue-600 text-white shadow-sm' : 'bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-slate-600'">
                        近一年
                    </button>
                    {{-- 自訂區間 + 緊接的選單與查詢鈕 --}}
                    <button @click="setPeriod('custom')"
                            class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
                            :class="period==='custom' ? 'bg-blue-600 text-white shadow-sm' : 'bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-slate-600'">
                        自訂區間
                    </button>
                    <template x-if="period === 'custom'">
                        <div class="flex items-center gap-2">
                            <select x-model="pendingFrom"
                                    class="px-2 py-1.5 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-900 text-gray-900 dark:text-gray-100 text-xs focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                <template x-for="m in monthOptions" :key="m">
                                    <option :value="m" x-text="m"></option>
                                </template>
                            </select>
                            <span class="text-xs text-gray-400">至</span>
                            <select x-model="pendingTo"
                                    class="px-2 py-1.5 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-900 text-gray-900 dark:text-gray-100 text-xs focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                <template x-for="m in monthOptions" :key="m">
                                    <option :value="m" x-text="m"></option>
                                </template>
                            </select>
                            <button @click="customFrom=pendingFrom; customTo=pendingTo"
                                    class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium rounded-lg transition-colors">
                                查詢
                            </button>
                        </div>
                    </template>
                    {{-- 全部 --}}
                    <button @click="setPeriod('all')"
                            class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
                            :class="period==='all' ? 'bg-blue-600 text-white shadow-sm' : 'bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-slate-600'">
                        全部
                    </button>
                </div>
            </div>

            {{-- 期間彙總（多月份時顯示）--}}
            <div x-show="filteredHistory.length > 1"
                 class="px-6 py-4 bg-blue-50 dark:bg-blue-900/10 border-b border-blue-100 dark:border-blue-900/30">
                <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 text-center">
                    <div>
                        <p class="text-xs text-blue-500 dark:text-blue-400 mb-0.5">期間訂單數</p>
                        <p class="text-lg font-bold text-blue-700 dark:text-blue-300" x-text="periodSummary.orders.toLocaleString('zh-TW')"></p>
                    </div>
                    <div>
                        <p class="text-xs text-blue-500 dark:text-blue-400 mb-0.5">期間商品總價</p>
                        <p class="text-lg font-bold text-blue-700 dark:text-blue-300" x-text="'$' + fmt(periodSummary.total_price)"></p>
                    </div>
                    <div>
                        <p class="text-xs text-blue-500 dark:text-blue-400 mb-0.5">期間平台費用</p>
                        <p class="text-lg font-bold text-orange-500" x-text="'$' + fmt(periodSummary.total_fee)"></p>
                    </div>
                    <div>
                        <p class="text-xs text-blue-500 dark:text-blue-400 mb-0.5">期間淨收入</p>
                        <p class="text-lg font-bold text-green-600 dark:text-green-400" x-text="'$' + fmt(periodSummary.net_revenue)"></p>
                    </div>
                </div>
            </div>

            {{-- 表格 --}}
            <div x-show="filteredHistory.length > 0" class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50 dark:bg-slate-700/40">
                        <tr>
                            <th class="px-5 py-2.5 text-left text-xs font-semibold text-gray-500 dark:text-gray-400">月份</th>
                            <th class="px-5 py-2.5 text-right text-xs font-semibold text-gray-500 dark:text-gray-400">訂單數</th>
                            <th class="px-5 py-2.5 text-right text-xs font-semibold text-gray-500 dark:text-gray-400">商品總價</th>
                            <th class="px-5 py-2.5 text-right text-xs font-semibold text-gray-500 dark:text-gray-400">平台費用</th>
                            <th class="px-5 py-2.5 text-right text-xs font-semibold text-gray-500 dark:text-gray-400">實際淨收入</th>
                            <th class="px-5 py-2.5 text-right text-xs font-semibold text-gray-500 dark:text-gray-400">更新時間</th>
                            <th class="px-5 py-2.5"></th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 dark:divide-slate-700/50">
                        <template x-for="row in pagedHistory" :key="row.month">
                            <tr class="hover:bg-gray-50 dark:hover:bg-slate-700/20 transition-colors cursor-pointer"
                                :class="viewResult?.month === row.month ? 'bg-blue-50 dark:bg-blue-900/10' : ''"
                                @click="viewMonth(row)">
                                <td class="px-5 py-3 font-semibold text-gray-800 dark:text-gray-200" x-text="row.month"></td>
                                <td class="px-5 py-3 text-right text-gray-500 dark:text-gray-400" x-text="row.order_count"></td>
                                <td class="px-5 py-3 text-right text-gray-800 dark:text-gray-200" x-text="'$' + fmt(row.total_price)"></td>
                                <td class="px-5 py-3 text-right text-orange-500" x-text="'$' + fmt(row.total_fee)"></td>
                                <td class="px-5 py-3 text-right font-semibold text-green-600 dark:text-green-400" x-text="'$' + fmt(row.net_revenue)"></td>
                                <td class="px-5 py-3 text-right text-xs text-gray-400" x-text="row.updated_at"></td>
                                <td class="px-5 py-3 text-right">
                                    <button @click.stop="deleteMonth(row.month)"
                                            class="text-gray-300 hover:text-red-500 transition-colors p-1" title="刪除">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                        </svg>
                                    </button>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
            {{-- 分頁列（僅 period=all 時出現）--}}
            <div x-show="period === 'all' && filteredHistory.length > listPage * 5"
                 class="px-5 py-3 border-t border-gray-100 dark:border-slate-700 flex items-center justify-between">
                <span class="text-xs text-gray-400"
                      x-text="'顯示 ' + Math.min(listPage * 5, filteredHistory.length) + ' / ' + filteredHistory.length + ' 筆'"></span>
                <button @click="listPage++"
                        class="px-3 py-1.5 text-xs font-medium rounded-lg bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-slate-600 transition-colors">
                    下一頁 ↓
                </button>
            </div>
            <div x-show="history.length === 0" class="px-6 py-10 text-center text-sm text-gray-400 dark:text-gray-500">
                尚無記錄，請至「匯入報表」頁籤上傳第一份報表
            </div>
            <div x-show="history.length > 0 && filteredHistory.length === 0" class="px-6 py-10 text-center text-sm text-gray-400 dark:text-gray-500">
                此區間無資料
            </div>
        </div>

        {{-- ── 期間總覽（折線 + 分類圓餅）── --}}
        <div x-show="filteredHistory.length > 0 && !viewResult" x-cloak
             class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-200 dark:border-slate-700 shadow-sm overflow-hidden">
            <div class="px-5 py-4 border-b border-gray-100 dark:border-slate-700">
                <h2 class="text-sm font-semibold text-gray-700 dark:text-gray-300">期間總覽</h2>
            </div>

            {{-- 月份趨勢長條圖 --}}
            <div class="px-5 pt-5">
                <p class="text-xs text-gray-400 dark:text-gray-500 mb-3">各月淨收入</p>
                <div class="relative" style="height:160px">
                    <canvas x-ref="barChart"></canvas>
                </div>
            </div>

            {{-- 縣市分布 --}}
            <div class="px-5 pb-5">
                <p class="text-xs text-gray-400 dark:text-gray-500 mb-3">寄件縣市分布</p>
                <div x-show="Object.keys(overviewRegionData).length > 0"
                     :style="'height:' + Math.max(160, Object.keys(overviewRegionData).length * 28) + 'px'">
                    <canvas x-ref="overviewRegionChart"></canvas>
                </div>
                <div x-show="Object.keys(overviewRegionData).length === 0"
                     class="text-center py-4 text-sm text-gray-400 dark:text-gray-500">
                    無縣市資料（重新匯入報表以取得縣市統計）
                </div>
            </div>

            {{-- 分類分布 --}}
            <div class="px-5 py-5 border-t border-gray-100 dark:border-slate-700">
                <p class="text-xs text-gray-400 dark:text-gray-500 mb-3">商品分類收入分布
                    <span class="ml-1 text-gray-300 dark:text-gray-600">（依各月前10大商品關鍵字比對）</span>
                </p>
                {{-- 未設定分類 --}}
                <div x-show="categories.length === 0"
                     class="text-center py-6 text-sm text-gray-400 dark:text-gray-500">
                    尚未設定商品分類，點選上方「分類設定」按鈕新增分類
                </div>
                {{-- 有分類 --}}
                <div x-show="categories.length > 0" class="flex flex-col sm:flex-row gap-6 items-start">
                    {{-- 圓餅圖 --}}
                    <div class="relative flex-shrink-0" style="width:180px;height:180px">
                        <canvas x-ref="overviewChart"></canvas>
                        <div x-show="overviewCategories.length > 0"
                             class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
                            <span class="text-xs text-gray-400 dark:text-gray-500">商品總收入</span>
                            <span class="text-sm font-bold text-gray-800 dark:text-gray-100"
                                  x-text="'$' + fmt(filteredHistory.reduce((s,r)=>s+r.total_price,0))"></span>
                        </div>
                        <div x-show="overviewCategories.length === 0"
                             class="absolute inset-0 flex items-center justify-center text-xs text-gray-400 text-center px-2">
                            無法比對分類關鍵字
                        </div>
                    </div>
                    {{-- 圖例 --}}
                    <div class="flex-1 space-y-2 w-full min-w-0">
                        <template x-for="cat in overviewCategories" :key="cat.name">
                            <div class="flex items-center gap-3">
                                <span class="w-3 h-3 rounded-full flex-shrink-0" :style="'background:' + cat.color"></span>
                                <span class="text-sm text-gray-700 dark:text-gray-300 flex-1 truncate" x-text="cat.name" :title="cat.name"></span>
                                <span class="text-xs text-gray-400 w-12 text-right flex-shrink-0"
                                      x-text="(() => { const t = overviewCategories.reduce((s,c)=>s+c.revenue,0); return t>0 ? (cat.revenue/t*100).toFixed(1)+'%' : ''; })()"></span>
                                <span class="font-semibold text-sm text-gray-800 dark:text-gray-200 w-24 text-right flex-shrink-0"
                                      x-text="'$' + fmt(cat.revenue)"></span>
                                <span class="text-xs text-gray-400 w-12 text-right flex-shrink-0" x-text="cat.count + ' 筆'"></span>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </div>

        {{-- ── 分類設定面板（常駐，不受 viewResult 限制）── --}}
        <div x-show="showCatSettings" x-cloak
             class="bg-white dark:bg-slate-800 rounded-2xl border border-blue-200 dark:border-blue-800 shadow-sm overflow-hidden">
            <div class="px-5 py-4 border-b border-gray-100 dark:border-slate-700 bg-blue-50 dark:bg-blue-900/10 flex items-center justify-between">
                <div>
                    <p class="text-sm font-semibold text-gray-700 dark:text-gray-300">商品分類設定</p>
                    <p class="text-xs text-gray-400 mt-0.5">設定關鍵字自動分類商品，多個關鍵字以「、」或「,」分隔</p>
                </div>
                <button @click="showCatSettings=false" class="text-gray-300 hover:text-gray-500 dark:hover:text-gray-200 transition-colors">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
            {{-- 新增 / 編輯表單 --}}
            <div class="px-5 py-4 border-b border-gray-100 dark:border-slate-700">
                <div class="flex flex-wrap items-center gap-2">
                    <input x-model="catForm.name" type="text" placeholder="分類名稱（如：文具）"
                           class="flex-1 min-w-28 px-3 py-1.5 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-900 text-sm text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    <input x-model="catForm.keywords" type="text" placeholder="關鍵字（書本、考題、文昌，逗號分隔）"
                           class="flex-1 min-w-48 px-3 py-1.5 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-900 text-sm text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    <div class="flex items-center gap-1.5 flex-shrink-0">
                        <span class="text-xs text-gray-400 dark:text-gray-500">顏色</span>
                        <label class="relative cursor-pointer">
                            <span class="block w-8 h-8 rounded-full border-2 border-white dark:border-slate-700 shadow"
                                  :style="'background:' + catForm.color"></span>
                            <input x-model="catForm.color" type="color"
                                   class="absolute inset-0 opacity-0 w-full h-full cursor-pointer">
                        </label>
                    </div>
                    <button @click="saveCategory()"
                            class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium rounded-lg transition-colors"
                            x-text="catEditing ? '儲存修改' : '新增分類'"></button>
                    <button x-show="catEditing" @click="cancelEdit()"
                            class="px-3 py-1.5 bg-gray-100 dark:bg-slate-700 hover:bg-gray-200 dark:hover:bg-slate-600 text-gray-600 dark:text-gray-300 text-xs font-medium rounded-lg transition-colors">
                        取消
                    </button>
                </div>
                {{-- 快選色板 --}}
                <div class="mt-2.5 flex flex-wrap gap-1.5">
                    <template x-for="c in _palette" :key="c">
                        <button @click="catForm.color = c" type="button"
                                class="w-6 h-6 rounded-full border-2 transition-all"
                                :style="'background:' + c"
                                :class="catForm.color === c ? 'border-gray-700 dark:border-white scale-110' : 'border-transparent hover:scale-110'"></button>
                    </template>
                </div>
            </div>
            {{-- 現有分類列表 --}}
            <div class="divide-y divide-gray-100 dark:divide-slate-700/50">
                <template x-for="cat in categories" :key="cat.id">
                    <div class="px-5 py-3 flex items-center gap-3"
                         :class="catEditing === cat.id ? 'bg-blue-50 dark:bg-blue-900/10' : ''">
                        <span class="w-3 h-3 rounded-full flex-shrink-0" :style="'background:' + cat.color"></span>
                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300 w-24 flex-shrink-0" x-text="cat.name"></span>
                        <span class="flex-1 text-xs text-gray-400 dark:text-gray-500 truncate"
                              x-text="(cat.keywords||[]).join('、')" :title="(cat.keywords||[]).join('、')"></span>
                        <button @click="editCategory(cat)"
                                class="text-xs text-blue-400 hover:text-blue-600 transition-colors px-2 py-1 rounded">編輯</button>
                        <button @click="deleteCategory(cat.id)"
                                class="text-xs text-gray-300 hover:text-red-500 transition-colors px-2 py-1 rounded">刪除</button>
                    </div>
                </template>
                <div x-show="categories.length === 0" class="px-5 py-6 text-center text-sm text-gray-400 dark:text-gray-500">
                    尚無分類，輸入名稱與關鍵字後點「新增分類」
                </div>
            </div>
        </div>

        {{-- ── 月份明細 ── --}}
        <div x-show="viewResult" x-cloak class="space-y-4">

            <div class="flex items-center justify-between">
                <h3 class="text-sm font-bold text-gray-700 dark:text-gray-200"
                    x-text="(viewResult?.month || '') + ' 詳細分析'"></h3>
            </div>

            {{-- 與上月比較標籤 --}}
            <template x-if="viewResult?.prev">
                <div class="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1">
                    <span>與上月</span>
                    <span class="font-medium" x-text="viewResult.prev.month"></span>
                    <span>相比</span>
                </div>
            </template>

            {{-- 主要摘要卡片 --}}
            <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
                {{-- 訂單數 --}}
                <div class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-200 dark:border-slate-700 p-5">
                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">已完成訂單數</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white" x-text="viewResult?.summary.order_count"></p>
                    <p class="text-xs mt-1" x-show="viewResult?.prev"
                       :class="diffClass(viewResult?.summary.order_count, viewResult?.prev?.order_count)"
                       x-text="diffText(viewResult?.summary.order_count, viewResult?.prev?.order_count)"></p>
                </div>
                {{-- 商品總價 --}}
                <div class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-200 dark:border-slate-700 p-5">
                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">商品總價合計</p>
                    <p class="text-2xl font-bold text-blue-600 dark:text-blue-400" x-text="'$' + fmt(viewResult?.summary.total_price)"></p>
                    <p class="text-xs mt-1" x-show="viewResult?.prev"
                       :class="diffClass(viewResult?.summary.total_price, viewResult?.prev?.total_price)"
                       x-text="diffText(viewResult?.summary.total_price, viewResult?.prev?.total_price)"></p>
                </div>
                {{-- 平台費用 --}}
                <div class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-200 dark:border-slate-700 p-5">
                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">平台費用</p>
                    <p class="text-2xl font-bold text-orange-500" x-text="'$' + fmt(viewResult?.summary.total_fee)"></p>
                    <p class="text-xs text-gray-400 mt-1" x-text="pct(viewResult?.summary.total_fee, viewResult?.summary.total_price)"></p>
                </div>
                {{-- 淨收入 --}}
                <div class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-200 dark:border-slate-700 p-5">
                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">實際淨收入</p>
                    <p class="text-2xl font-bold text-green-600 dark:text-green-400" x-text="'$' + fmt(viewResult?.summary.net_revenue)"></p>
                    <p class="text-xs mt-1" x-show="viewResult?.prev"
                       :class="diffClass(viewResult?.summary.net_revenue, viewResult?.prev?.net_revenue)"
                       x-text="diffText(viewResult?.summary.net_revenue, viewResult?.prev?.net_revenue)"></p>
                </div>
            </div>

            {{-- 運輸中 & 未完成 --}}
            <div class="grid grid-cols-2 gap-4">
                <div class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-200 dark:border-slate-700 p-5 flex items-center gap-4">
                    <div class="w-10 h-10 rounded-xl bg-sky-100 dark:bg-sky-900/30 flex items-center justify-center flex-shrink-0">
                        <svg class="w-5 h-5 text-sky-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8l1 12h12l1-12M10 12h4"/>
                        </svg>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500 dark:text-gray-400">運輸中</p>
                        <p class="text-lg font-bold text-sky-600 dark:text-sky-400"
                           x-text="(viewResult?.summary.transit_count || 0) + ' 筆'"></p>
                        <p class="text-xs text-gray-400" x-text="'$' + fmt(viewResult?.summary.transit_amount || 0)"></p>
                    </div>
                </div>
                <div class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-200 dark:border-slate-700 p-5 flex items-center gap-4">
                    <div class="w-10 h-10 rounded-xl bg-red-100 dark:bg-red-900/30 flex items-center justify-center flex-shrink-0">
                        <svg class="w-5 h-5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500 dark:text-gray-400">未完成交易</p>
                        <p class="text-lg font-bold text-red-500"
                           x-text="(viewResult?.summary.incomplete_count || 0) + ' 筆'"></p>
                        <p class="text-xs text-gray-400" x-text="'$' + fmt(viewResult?.summary.incomplete_amount || 0)"></p>
                    </div>
                </div>
            </div>

            {{-- 費用細項 --}}
            <div class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-200 dark:border-slate-700 p-5">
                <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-4">費用細項</h4>
                <div class="grid grid-cols-3 gap-4 text-center text-sm">
                    <div>
                        <p class="text-xs text-gray-500 mb-1">成交手續費</p>
                        <p class="font-semibold text-gray-800 dark:text-gray-200" x-text="'$' + fmt(viewResult?.summary.trans_fee)"></p>
                        <p class="text-xs text-gray-400" x-text="pct(viewResult?.summary.trans_fee, viewResult?.summary.total_price)"></p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500 mb-1">其他服務費</p>
                        <p class="font-semibold text-gray-800 dark:text-gray-200" x-text="'$' + fmt(viewResult?.summary.other_fee)"></p>
                        <p class="text-xs text-gray-400" x-text="pct(viewResult?.summary.other_fee, viewResult?.summary.total_price)"></p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500 mb-1">金流與系統處理費</p>
                        <p class="font-semibold text-gray-800 dark:text-gray-200" x-text="'$' + fmt(viewResult?.summary.payment_fee)"></p>
                        <p class="text-xs text-gray-400" x-text="pct(viewResult?.summary.payment_fee, viewResult?.summary.total_price)"></p>
                    </div>
                </div>
            </div>

            {{-- 商品分類分析 --}}
            <div x-show="categories.length > 0"
                 class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-200 dark:border-slate-700 overflow-hidden">
                <div class="px-5 py-4 border-b border-gray-100 dark:border-slate-700">
                    <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300">商品分類分析</h4>
                </div>
                <div class="p-5 flex flex-col items-center gap-5">
                    {{-- 圓餅圖：canvas 常駐 DOM，不包在任何 x-show 內，確保 Chart.js 可正確繪製 --}}
                    <div class="relative" style="width:240px;height:240px">
                        <canvas x-ref="pieChart" width="240" height="240"></canvas>
                        {{-- 中心標籤 --}}
                        <div x-show="!ordersLoading && productCategories.length > 0"
                             class="absolute inset-0 flex items-center justify-center pointer-events-none">
                            <div class="text-center">
                                <p class="text-xs text-gray-400 dark:text-gray-500">淨收入</p>
                                <p class="text-base font-bold text-gray-700 dark:text-gray-200"
                                   x-text="'$' + fmt(viewResult?.summary.net_revenue)"></p>
                            </div>
                        </div>
                        {{-- 載入中 --}}
                        <div x-show="ordersLoading"
                             class="absolute inset-0 flex items-center justify-center">
                            <svg class="animate-spin w-8 h-8 text-blue-300" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                            </svg>
                        </div>
                        {{-- 無資料提示 --}}
                        <div x-show="!ordersLoading && productCategories.length === 0"
                             class="absolute inset-0 flex items-center justify-center text-center">
                            <p class="text-xs text-gray-400 dark:text-gray-500 px-4">點選左側月份後<br>顯示分類圓餅圖</p>
                        </div>
                    </div>
                    {{-- 圖例 --}}
                    <div class="w-full space-y-2" x-show="productCategories.length > 0">
                        <template x-for="cat in productCategories" :key="cat.name">
                            <div class="flex items-center gap-3">
                                <span class="w-3 h-3 rounded-full flex-shrink-0" :style="'background:' + cat.color"></span>
                                <span class="text-sm text-gray-700 dark:text-gray-300 flex-1 truncate" x-text="cat.name" :title="cat.name"></span>
                                <span class="text-xs text-gray-400 w-12 text-right flex-shrink-0"
                                      x-text="viewResult && viewResult.summary.total_price > 0 ? (cat.revenue/viewResult.summary.total_price*100).toFixed(1)+'%' : ''"></span>
                                <span class="font-semibold text-sm text-gray-800 dark:text-gray-200 w-24 text-right flex-shrink-0" x-text="'$' + fmt(cat.revenue)"></span>
                                <span class="text-xs text-gray-400 w-12 text-right flex-shrink-0" x-text="cat.count + ' 筆'"></span>
                            </div>
                        </template>
                    </div>
                </div>
            </div>

            {{-- 每日曲線圖 --}}
            <div x-show="viewResult"
                 class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-200 dark:border-slate-700 p-5">
                <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-4">每日營業額</h4>
                <div class="relative" style="height:220px">
                    <canvas x-ref="dailyChart"></canvas>
                    <div x-show="!(viewResult?.daily_data||[]).length"
                         class="absolute inset-0 flex items-center justify-center text-sm text-gray-400 dark:text-gray-500">
                        無每日資料
                    </div>
                </div>
            </div>

            {{-- 熱銷商品 & 買家排行 --}}
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
                <div class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-200 dark:border-slate-700 overflow-hidden">
                    <div class="px-5 py-4 border-b border-gray-100 dark:border-slate-700">
                        <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300">熱銷商品 Top 10</h4>
                    </div>
                    <div class="divide-y divide-gray-100 dark:divide-slate-700/50">
                        <template x-for="(item, idx) in (viewResult?.top_products_list||[])" :key="item.name">
                            <div class="px-5 py-3 flex items-center gap-3">
                                <span class="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0"
                                      :class="idx===0?'bg-yellow-100 text-yellow-700':idx===1?'bg-gray-100 text-gray-600':idx===2?'bg-orange-100 text-orange-600':'bg-gray-50 text-gray-400'"
                                      x-text="idx+1"></span>
                                <div class="flex-1 min-w-0">
                                    <p class="text-sm text-gray-800 dark:text-gray-200 truncate" x-text="item.name" :title="item.name"></p>
                                    <p class="text-xs text-gray-400" x-text="item.count + ' 筆'"></p>
                                </div>
                                <span class="font-semibold text-sm text-gray-900 dark:text-white" x-text="'$' + fmt(item.revenue)"></span>
                            </div>
                        </template>
                        <div x-show="!(viewResult?.top_products_list||[]).length"
                             class="px-5 py-6 text-center text-sm text-gray-400 dark:text-gray-500">
                            重新匯入可查看商品明細
                        </div>
                    </div>
                </div>
                <div class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-200 dark:border-slate-700 overflow-hidden">
                    <div class="px-5 py-4 border-b border-gray-100 dark:border-slate-700">
                        <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300">買家消費排行 Top 10</h4>
                    </div>
                    <div class="divide-y divide-gray-100 dark:divide-slate-700/50">
                        <template x-for="(item, idx) in (viewResult?.top_buyers_list||[])" :key="item.name">
                            <div class="px-5 py-3 flex items-start gap-3">
                                <span class="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5"
                                      :class="idx===0?'bg-yellow-100 text-yellow-700':idx===1?'bg-gray-100 text-gray-600':idx===2?'bg-orange-100 text-orange-600':'bg-gray-50 text-gray-400'"
                                      x-text="idx+1"></span>
                                <div class="flex-1 min-w-0">
                                    <p class="text-sm font-mono text-gray-800 dark:text-gray-200 truncate" x-text="item.name"></p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5" x-text="item.count + ' 筆'"></p>
                                    <p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5 leading-relaxed"
                                       x-text="(item.productList||[]).join('、')"
                                       :title="(item.productList||[]).join('、')"></p>
                                </div>
                                <span class="font-semibold text-sm text-gray-900 dark:text-white whitespace-nowrap" x-text="'$' + fmt(item.revenue)"></span>
                            </div>
                        </template>
                        <div x-show="!(viewResult?.top_buyers_list||[]).length"
                             class="px-5 py-6 text-center text-sm text-gray-400 dark:text-gray-500">
                            重新匯入可查看買家明細
                        </div>
                    </div>
                </div>
            </div>
            {{-- 寄件地區分布 --}}
            <div x-show="viewResult"
                 class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-200 dark:border-slate-700 overflow-hidden">
                <div class="px-5 py-4 border-b border-gray-100 dark:border-slate-700 flex items-center justify-between">
                    <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300">寄件地區分布</h4>
                    <span class="text-xs text-gray-400 dark:text-gray-500"
                          x-text="Object.keys(viewResult?.region_data||{}).length + ' 個縣市'"></span>
                </div>
                <div class="px-5 py-4">
                    {{-- 有資料：長條圖 --}}
                    <div x-show="Object.keys(viewResult?.region_data||{}).length > 0"
                         class="relative"
                         :style="'height:' + Math.max(180, Object.keys(viewResult?.region_data||{}).length * 30) + 'px'">
                        <canvas x-ref="regionChart"></canvas>
                    </div>
                    {{-- 無資料：提示重匯入 --}}
                    <div x-show="Object.keys(viewResult?.region_data||{}).length === 0"
                         class="py-8 text-center text-sm text-gray-400 dark:text-gray-500">
                        <p>此月份無地區資料</p>
                        <p class="text-xs mt-1">請重新匯入該月報表以取得縣市統計</p>
                    </div>
                </div>
            </div>

            {{-- 詳細訂單明細 --}}
            <div class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-200 dark:border-slate-700 overflow-hidden">
                <div class="px-5 py-4 border-b border-gray-100 dark:border-slate-700 flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300">詳細訂單明細</h4>
                        <button @click="matchAndApplyCosts()"
                                :disabled="costMatching || ordersLoading"
                                class="text-xs text-emerald-600 hover:text-emerald-800 disabled:opacity-50 border border-emerald-300 rounded-lg px-2 py-1 transition-colors flex items-center gap-1">
                            <svg x-show="costMatching || ordersLoading" class="animate-spin w-3 h-3" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                            </svg>
                            <span x-text="costMatching ? '比對中…' : '比對成本'"></span>
                        </button>
                        <span x-show="costMatchMsg" x-text="costMatchMsg"
                              class="text-xs text-gray-500 dark:text-gray-400"></span>
                        <button x-show="costDiag" @click="showCostDiag = !showCostDiag"
                                class="text-xs text-blue-500 hover:text-blue-700 underline">
                            查看比對詳情
                        </button>
                    </div>
                    <button @click="toggleOrders()"
                            class="text-xs text-blue-500 hover:text-blue-700 dark:hover:text-blue-300 transition-colors flex items-center gap-1">
                        <template x-if="!showOrders">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                            </svg>
                        </template>
                        <template x-if="showOrders">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/>
                            </svg>
                        </template>
                        <span x-text="showOrders ? '收起' : '展開明細 (' + (viewResult?.summary?.order_count||0) + ' 筆)'"></span>
                    </button>
                </div>
                <div x-show="showOrders">
                    {{-- 載入中 --}}
                    <div x-show="ordersLoading" class="px-5 py-8 text-center text-sm text-gray-400">
                        <svg class="animate-spin w-5 h-5 mx-auto mb-2 text-blue-400" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                        </svg>
                        載入中…
                    </div>
                    {{-- 無資料 --}}
                    <div x-show="!ordersLoading && viewOrders.length === 0"
                         class="px-5 py-8 text-center text-sm text-gray-400 dark:text-gray-500">
                        請重新匯入此月份報表以查看訂單明細
                    </div>
                    {{-- 表格 --}}
                    <div x-show="!ordersLoading && viewOrders.length > 0" class="overflow-x-auto">
                        <table class="w-full min-w-[860px] text-sm">
                            <thead class="bg-gray-50 dark:bg-slate-700/40 sticky top-0">
                                <tr>
                                    <th class="px-3 py-2.5 text-left text-xs font-semibold text-gray-400 whitespace-nowrap w-24">日期</th>
                                    <th class="px-3 py-2.5 text-left text-xs font-semibold text-gray-400 whitespace-nowrap">訂單編號</th>
                                    <th class="px-3 py-2.5 text-left text-xs font-semibold text-gray-400 whitespace-nowrap w-20">買家</th>
                                    <th class="px-3 py-2.5 text-left text-xs font-semibold text-gray-400">商品名稱</th>
                                    <th class="px-3 py-2.5 text-right text-xs font-semibold text-gray-400 whitespace-nowrap w-14">數量</th>
                                    <th class="px-3 py-2.5 text-right text-xs font-semibold text-gray-400 whitespace-nowrap w-20">訂單金額</th>
                                    <th class="px-3 py-2.5 text-left text-xs font-semibold text-gray-400 w-36">分類</th>
                                    <th class="px-3 py-2.5 text-right text-xs font-semibold text-gray-400 whitespace-nowrap w-36" title="成本（自動比對或手動輸入）">成本</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100 dark:divide-slate-700/50">
                                <template x-for="o in viewOrders" :key="o.id">
                                    <tr class="hover:bg-gray-50 dark:hover:bg-slate-700/20 transition-colors">
                                        <td class="px-3 py-2 text-xs text-gray-400 whitespace-nowrap" x-text="o.order_date || '-'"></td>
                                        <td class="px-3 py-2 text-xs font-mono text-gray-500 dark:text-gray-400 whitespace-nowrap" x-text="o.order_no"></td>
                                        <td class="px-3 py-2 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap max-w-[80px] truncate" x-text="o.buyer || '-'"></td>
                                        <td class="px-3 py-2 text-xs text-gray-800 dark:text-gray-200">
                                            <p class="truncate max-w-[180px]" x-text="o.product_name || '-'" :title="o.product_name">
                                            </p>
                                        </td>
                                        <td class="px-3 py-2 text-xs text-right text-gray-500 dark:text-gray-400 whitespace-nowrap"
                                            x-text="o.quantity > 1 ? o.quantity + ' 件' : '1 件'"></td>
                                        <td class="px-3 py-2 text-xs text-right font-medium text-gray-700 dark:text-gray-300 whitespace-nowrap"
                                            x-text="'$' + fmt(o.order_total)"></td>
                                        <td class="px-3 py-2 min-w-[130px]">
                                            <select @change="setOrderCategory(o, $event.target.value)"
                                                    x-init="$nextTick(() => { $el.value = String(o.category_id || '') })"
                                                    class="w-full px-2 py-1 text-xs border border-gray-200 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-900 text-gray-700 dark:text-gray-300 focus:ring-1 focus:ring-blue-500 focus:border-transparent">
                                                <option value="">未分類</option>
                                                <template x-for="cat in categories" :key="cat.id">
                                                    <option :value="cat.id"
                                                            :selected="o.category_id == cat.id"
                                                            x-text="cat.name"></option>
                                                </template>
                                            </select>
                                        </td>
                                        <td class="px-3 py-2 text-right">
                                            <div class="flex items-center justify-end gap-1 flex-wrap">
                                                <button @click.stop="openCostModal(o)"
                                                        :class="o.cost_breakdown && o.cost_breakdown.length ? 'text-blue-400' : 'text-gray-300 hover:text-blue-400'"
                                                        class="transition-colors flex-shrink-0" title="成本計算機">
                                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 13h.01M13 13h.01M17 13h.01M13 17h.01M17 17h.01M5 3h14a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2z"/>
                                                    </svg>
                                                </button>
                                                <button x-show="getAutoMatchedCost(o) > 0 && (o.cost === null || o.cost === undefined)"
                                                        @click="saveOrderCost(o, getAutoMatchedCost(o))"
                                                        class="text-xs text-emerald-600 hover:text-emerald-800 border border-emerald-300 rounded px-1 py-0.5 flex-shrink-0 transition-colors" title="套用自動比對成本">套用</button>
                                                <input type="number" min="0" step="1"
                                                       :value="o.cost ?? ''"
                                                       :placeholder="getAutoMatchedCost(o) > 0 ? getAutoMatchedCost(o) : orderFormulaCost(o)"
                                                       @change="saveOrderCost(o, $event.target.value)"
                                                       class="w-20 px-2 py-1 text-xs text-right border rounded-lg bg-white dark:bg-slate-900 text-gray-700 dark:text-gray-300 focus:ring-1 focus:ring-blue-500 focus:border-transparent"
                                                       :class="o.cost !== null && o.cost !== undefined ? 'border-blue-300 dark:border-blue-600' : (getAutoMatchedCost(o) > 0 ? 'border-emerald-200 dark:border-emerald-800' : 'border-gray-200 dark:border-slate-600')">
                                                <button x-show="o.cost !== null && o.cost !== undefined"
                                                        @click="saveOrderCost(o, ''); o.cost = null; o.cost_breakdown = []"
                                                        class="text-gray-300 hover:text-gray-500 transition-colors flex-shrink-0" title="清除">
                                                    <svg class="w-3 h-3" 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>
                                            </div>
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    {{-- 成本比對診斷面板 --}}
                    <div x-show="showCostDiag && costDiag" class="border-t border-gray-100 dark:border-slate-700">
                        <div class="px-5 py-3 bg-amber-50 dark:bg-amber-900/10">
                            <div class="flex items-center justify-between mb-2">
                                <p class="text-xs font-semibold text-amber-700 dark:text-amber-400">比對診斷：訂單商品名稱 vs 成本清單名稱</p>
                                <button @click="showCostDiag = false" class="text-gray-400 hover:text-gray-600 text-xs">關閉</button>
                            </div>
                            {{-- 成本清單名稱 --}}
                            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">成本清單中的名稱：</p>
                            <div class="flex flex-wrap gap-1 mb-3">
                                <template x-for="n in costDiag.costItemNames" :key="n">
                                    <span class="bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-xs px-2 py-0.5 rounded font-mono" x-text="n"></span>
                                </template>
                            </div>
                            {{-- 每個商品的比對結果 --}}
                            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">訂單商品比對結果（未設定成本的）：</p>
                            <div class="overflow-x-auto max-h-56 overflow-y-auto">
                                <table class="w-full text-xs">
                                    <thead>
                                        <tr class="text-gray-400 border-b border-gray-200 dark:border-slate-600">
                                            <th class="text-left py-1 pr-4 font-medium">訂單商品名稱（資料庫完整字串）</th>
                                            <th class="text-left py-1 font-medium">比對到的成本項目</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <template x-for="row in costDiag.rows" :key="row.product">
                                            <tr class="border-b border-gray-100 dark:border-slate-700/50"
                                                :class="row.matched === '—' ? 'bg-red-50 dark:bg-red-900/10' : 'bg-green-50 dark:bg-green-900/10'">
                                                <td class="py-1 pr-4 font-mono text-gray-700 dark:text-gray-300" x-text="row.product"></td>
                                                <td class="py-1 font-semibold"
                                                    :class="row.matched === '—' ? 'text-red-500' : 'text-emerald-600'"
                                                    x-text="row.matched"></td>
                                            </tr>
                                        </template>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>{{-- /view tab --}}

    {{-- ══════════════════════════════════════
         頁籤三：計算淨賺
    ══════════════════════════════════════ --}}
    <div class="space-y-5" style="{{ $activeTab !== 'profit' ? 'display:none' : '' }}">

        {{-- 成本設定 --}}
        <div class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-200 dark:border-slate-700 shadow-sm overflow-hidden">
            <div class="px-5 py-4 border-b border-gray-100 dark:border-slate-700">
                <h2 class="text-sm font-semibold text-gray-700 dark:text-gray-300">各分類成本設定</h2>
                <p class="text-xs text-gray-400 mt-0.5">設定每個分類的成本占比（%），系統將依此推算淨賺金額</p>
            </div>
            <div x-show="categories.length === 0" class="px-5 py-8 text-center text-sm text-gray-400 dark:text-gray-500">
                尚未設定商品分類，請先至「查詢分析」頁籤的分類設定中新增分類
            </div>
            <div x-show="categories.length > 0" class="divide-y divide-gray-100 dark:divide-slate-700/50">
                <template x-for="cat in categories" :key="cat.id">
                    <div class="px-5 py-3 flex items-center gap-4">
                        <span class="w-3 h-3 rounded-full flex-shrink-0" :style="'background:' + cat.color"></span>
                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300 flex-1" x-text="cat.name"></span>
                        <div class="flex items-center gap-2 flex-shrink-0">
                            <input type="number" min="0" max="100" step="1"
                                   :value="cat.cost_rate ?? ''"
                                   placeholder="成本 %"
                                   @change="saveCostRate(cat.id, $event.target.value)"
                                   class="w-24 px-3 py-1.5 text-sm text-right border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-900 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            <span class="text-sm text-gray-400">%</span>
                        </div>
                    </div>
                </template>
            </div>
        </div>

        {{-- 淨賺試算 --}}
        <div x-show="categories.length > 0 && profitRows.length > 0"
             class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-200 dark:border-slate-700 shadow-sm overflow-hidden">
            <div class="px-5 py-4 border-b border-gray-100 dark:border-slate-700 flex items-center justify-between">
                <div>
                    <h2 class="text-sm font-semibold text-gray-700 dark:text-gray-300">淨賺試算</h2>
                    <p class="text-xs text-gray-400 mt-0.5"
                       x-text="viewResult ? viewResult.month + ' 單月資料' : (period === 'all' ? '全部期間' : filteredHistory.length + ' 個月合計')"></p>
                </div>
                <span class="text-xs text-gray-400"
                      x-text="viewResult ? viewResult.month : (period === 'all' ? '全部' : filteredHistory.length + ' 個月')"></span>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50 dark:bg-slate-700/40">
                        <tr>
                            <th class="px-5 py-2.5 text-left text-xs font-semibold text-gray-500 dark:text-gray-400">分類</th>
                            <th class="px-5 py-2.5 text-right text-xs font-semibold text-gray-500 dark:text-gray-400">訂單收入</th>
                            <th class="px-5 py-2.5 text-right text-xs font-semibold text-gray-500 dark:text-gray-400">成本率</th>
                            <th class="px-5 py-2.5 text-right text-xs font-semibold text-gray-500 dark:text-gray-400">成本金額</th>
                            <th class="px-5 py-2.5 text-right text-xs font-semibold text-gray-500 dark:text-gray-400">淨賺</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 dark:divide-slate-700/50">
                        <template x-for="row in profitRows" :key="row.name">
                            <tr>
                                <td class="px-5 py-3">
                                    <div class="flex items-center gap-2">
                                        <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" :style="'background:' + row.color"></span>
                                        <span class="font-medium text-gray-800 dark:text-gray-200" x-text="row.name"></span>
                                    </div>
                                </td>
                                <td class="px-5 py-3 text-right text-gray-700 dark:text-gray-300" x-text="'$' + fmt(row.revenue)"></td>
                                <td class="px-5 py-3 text-right">
                                    <span x-show="row.cost_rate !== null"
                                          class="text-gray-500 dark:text-gray-400" x-text="row.cost_rate + '%'"></span>
                                    <span x-show="row.cost_rate === null && row.has_rate"
                                          class="text-xs text-gray-400 dark:text-gray-500">逐筆</span>
                                    <span x-show="!row.has_rate"
                                          class="text-gray-300 dark:text-gray-600 text-xs">未設定</span>
                                </td>
                                <td class="px-5 py-3 text-right text-orange-500"
                                    x-text="row.has_rate ? '-$' + fmt(row.cost_amount) : '—'"></td>
                                <td class="px-5 py-3 text-right font-semibold"
                                    :class="row.has_rate ? (row.net > 0 ? 'text-green-600 dark:text-green-400' : 'text-red-500') : 'text-gray-400'"
                                    x-text="row.has_rate ? '$' + fmt(row.net) : '—'"></td>
                            </tr>
                        </template>
                    </tbody>
                    {{-- 合計列 --}}
                    <tfoot class="bg-gray-50 dark:bg-slate-700/40 border-t-2 border-gray-200 dark:border-slate-600">
                        <tr>
                            <td class="px-5 py-3 font-semibold text-gray-700 dark:text-gray-300">合計（已設成本）</td>
                            <td class="px-5 py-3 text-right font-semibold text-gray-700 dark:text-gray-300"
                                x-text="'$' + fmt(profitRows.filter(r=>r.has_rate).reduce((s,r)=>s+r.revenue,0))"></td>
                            <td class="px-5 py-3 text-right text-xs text-gray-400"
                                x-text="(() => { const rows = profitRows.filter(r=>r.has_rate); const rev = rows.reduce((s,r)=>s+r.revenue,0); const cost = rows.reduce((s,r)=>s+r.cost_amount,0); return rev > 0 ? (cost/rev*100).toFixed(1)+'%' : ''; })()"></td>
                            <td class="px-5 py-3 text-right font-semibold text-orange-500"
                                x-text="'-$' + fmt(profitRows.filter(r=>r.has_rate).reduce((s,r)=>s+r.cost_amount,0))"></td>
                            <td class="px-5 py-3 text-right font-bold text-green-600 dark:text-green-400 text-base"
                                x-text="'$' + fmt(profitRows.filter(r=>r.has_rate).reduce((s,r)=>s+r.net,0))"></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>

        {{-- 資料不足提示 --}}
        <div x-show="categories.length > 0 && profitRows.length === 0"
             class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-200 dark:border-slate-700 shadow-sm px-6 py-10 text-center text-sm text-gray-400 dark:text-gray-500">
            請先切換至「查詢分析」頁籤選取期間或點選月份，系統會自動載入分類收入資料
        </div>

    </div>

    {{-- ══════════════════════════════════════
         頁籤四：成本設定
    ══════════════════════════════════════ --}}
    <div class="space-y-5" style="{{ $activeTab !== 'costs' ? 'display:none' : '' }}">

        <div class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-200 dark:border-slate-700 shadow-sm overflow-hidden">
            <div class="px-5 py-4 border-b border-gray-100 dark:border-slate-700">
                <h2 class="text-sm font-semibold text-gray-700 dark:text-gray-300">成本項目庫</h2>
                <p class="text-xs text-gray-400 mt-0.5">定義每個商品的成本價格，儲存後可在訂單明細中套用計算真實成本</p>
            </div>

            {{-- 新增 / 編輯表單 --}}
            <div class="px-5 py-4 border-b border-gray-100 dark:border-slate-700 bg-gray-50 dark:bg-slate-700/20">
                <p class="text-xs font-semibold text-gray-500 dark:text-gray-400 mb-3"
                   x-text="costItemEditing ? '編輯項目' : '新增成本項目'"></p>
                <div class="flex flex-wrap items-center gap-2">
                    <select x-model="costItemForm.category_id"
                            class="px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-900 text-sm text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        <option value="">通用（不限分類）</option>
                        <template x-for="cat in categories" :key="cat.id">
                            <option :value="cat.id" x-text="cat.name"></option>
                        </template>
                    </select>
                    <input x-model="costItemForm.name" type="text" placeholder="商品名稱（如：筆袋、修正帶）"
                           class="flex-1 min-w-40 px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-900 text-sm text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    <div class="flex items-center gap-1.5">
                        <span class="text-sm text-gray-500">$</span>
                        <input x-model="costItemForm.unit_cost" type="number" min="0" step="1" placeholder="成本價格"
                               class="w-32 px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-900 text-sm text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        <span class="text-xs text-gray-400">元 / 個</span>
                    </div>
                    <button @click="saveCostItem()"
                            class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors"
                            x-text="costItemEditing ? '儲存修改' : '新增'"></button>
                    <button x-show="costItemEditing"
                            @click="costItemEditing=null; costItemForm={category_id:'',name:'',unit_cost:''}"
                            class="px-4 py-2 bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-gray-300 text-sm font-medium rounded-lg transition-colors">
                        取消
                    </button>
                </div>
            </div>

            {{-- 項目列表 --}}
            <div x-show="costItems.length === 0" class="px-5 py-12 text-center text-sm text-gray-400 dark:text-gray-500">
                尚無成本項目，填寫上方表單新增第一筆
            </div>
            <div x-show="costItems.length > 0">
                <template x-for="group in costItemsByCategory" :key="group.label">
                    <div class="border-b border-gray-100 dark:border-slate-700/50 last:border-0">
                        <div class="px-5 py-2.5 bg-gray-50 dark:bg-slate-700/30 flex items-center gap-2">
                            <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" :style="'background:' + group.color"></span>
                            <span class="text-xs font-bold text-gray-500 dark:text-gray-400" x-text="group.label"></span>
                            <span class="text-xs text-gray-300 dark:text-gray-600" x-text="group.items.length + ' 項'"></span>
                        </div>
                        <table class="w-full text-sm">
                            <template x-for="item in group.items" :key="item.id">
                                <tr class="border-b border-gray-50 dark:border-slate-700/30 last:border-0 hover:bg-gray-50 dark:hover:bg-slate-700/20 transition-colors"
                                    :class="costItemEditing === item.id ? 'bg-blue-50 dark:bg-blue-900/10' : ''">
                                    <td class="px-5 py-3 text-gray-800 dark:text-gray-200" x-text="item.name"></td>
                                    <td class="px-5 py-3 text-right font-semibold text-gray-700 dark:text-gray-300 w-32"
                                        x-text="'$' + item.unit_cost + ' / 個'"></td>
                                    <td class="px-5 py-3 text-right w-28">
                                        <button @click="editCostItem(item)"
                                                class="text-xs text-blue-400 hover:text-blue-600 transition-colors px-2 py-1 rounded mr-1">編輯</button>
                                        <button @click="deleteCostItem(item.id)"
                                                class="text-xs text-gray-300 hover:text-red-500 transition-colors px-2 py-1 rounded">刪除</button>
                                    </td>
                                </tr>
                            </template>
                        </table>
                    </div>
                </template>
            </div>
        </div>

    </div>

    {{-- ══════════════════════════════════════
         頁籤二：匯入報表
    ══════════════════════════════════════ --}}
    <div class="space-y-5" style="{{ $activeTab !== 'import' ? 'display:none' : '' }}">

        {{-- 錯誤訊息 --}}
        <div x-show="error" style="display:none"
             class="flex items-start gap-3 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl">
            <svg class="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <p class="text-sm text-red-700 dark:text-red-400" x-text="error"></p>
        </div>

        {{-- 成功訊息 --}}
        <div x-show="successMsg" style="display:none"
             class="flex items-center gap-3 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-xl">
            <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <p class="text-sm text-green-700 dark:text-green-300" x-text="successMsg"></p>
        </div>

        {{-- 主卡片 --}}
        <div class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-200 dark:border-slate-700 shadow-sm">

            {{-- 卡片標題列 --}}
            <div class="px-6 py-4 border-b border-gray-100 dark:border-slate-700 flex items-center justify-between">
                <div>
                    <h2 class="text-base font-semibold text-gray-800 dark:text-white">匯入訂單報表</h2>
                    <p class="text-xs text-gray-400 mt-0.5">選擇月份後上傳該月的訂單 XLSX 報表</p>
                </div>
                <a href="{{ route('admin.revenue.sample') }}"
                   class="flex items-center gap-1.5 px-3 py-2 bg-gray-100 dark:bg-slate-700 hover:bg-gray-200 dark:hover:bg-slate-600 text-gray-600 dark:text-gray-300 text-xs font-medium rounded-lg transition-colors">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                    </svg>
                    下載範例格式
                </a>
            </div>

            <div class="px-6 py-6 space-y-5">

                {{-- 1. 月份 --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">報表月份</label>
                    <select x-model="selectedMonth"
                            class="w-48 px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-900 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        @php
                            $now = now();
                            for ($i = 0; $i < 36; $i++) {
                                $ym = $now->copy()->subMonths($i)->format('Y-m');
                                echo '<option value="' . $ym . '"' . ($i === 0 ? ' selected' : '') . '>' . $ym . '</option>';
                            }
                        @endphp
                    </select>
                </div>

                {{-- 2. 檔案拖曳區 --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">選擇 XLSX 檔案</label>
                    <div @dragover.prevent="dragging=true"
                         @dragleave.prevent="dragging=false"
                         @drop.prevent="handleDrop($event)"
                         @click="$refs.importFileInput.click()"
                         class="border-2 border-dashed rounded-xl py-12 text-center cursor-pointer transition-colors select-none"
                         :class="dragging
                             ? 'border-blue-400 bg-blue-50 dark:bg-blue-900/20'
                             : 'border-gray-300 dark:border-slate-600 hover:border-blue-400 hover:bg-gray-50 dark:hover:bg-slate-700/30'">
                        <svg class="w-12 h-12 mx-auto mb-3 text-gray-300 dark:text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
                        </svg>
                        <p class="text-sm font-medium text-gray-600 dark:text-gray-300">
                            <span class="text-blue-600 dark:text-blue-400">點擊選擇檔案</span> 或拖曳至此
                        </p>
                        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">支援 .xlsx / .xls 格式</p>
                    </div>
                    <input type="file" x-ref="importFileInput" accept=".xlsx,.xls" class="hidden" @change="handleFileInput($event)">
                </div>

                {{-- 3. 已選檔案提示 --}}
                <div x-show="file" style="display:none"
                     class="flex items-center gap-3 px-4 py-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl">
                    <svg class="w-5 h-5 text-blue-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                    <span class="text-sm text-blue-700 dark:text-blue-300 flex-1 truncate" x-text="fileName"></span>
                    <button type="button" @click.stop="file=null;fileName=''"
                            class="text-blue-400 hover:text-blue-600 dark:hover:text-blue-200 text-lg leading-none">&times;</button>
                </div>

                {{-- 4. 匯入按鈕 --}}
                <button type="button" @click="analyze()"
                        :disabled="!file || !selectedMonth || loading"
                        class="w-full py-3 px-4 rounded-xl font-semibold text-sm transition-all flex items-center justify-center gap-2"
                        :class="(!file || !selectedMonth || loading)
                            ? 'bg-gray-100 dark:bg-slate-700 text-gray-400 dark:text-gray-500 cursor-not-allowed'
                            : 'bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white shadow-sm'">
                    <svg x-show="loading" class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                    </svg>
                    <span x-show="loading">分析中…</span>
                    <span x-show="!loading" x-text="!file ? '請先選擇 XLSX 檔案' : !selectedMonth ? '請先選擇月份' : '匯入並分析 ' + selectedMonth">
                        請先選擇 XLSX 檔案
                    </span>
                </button>

            </div>
        </div>

        {{-- 匯入結果摘要 --}}
        <div x-show="importResult" style="display:none" class="space-y-4">
            <p class="text-sm font-semibold text-gray-600 dark:text-gray-400"
               x-text="(importResult?.month || '') + ' 匯入結果'"></p>

            <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
                <div class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-200 dark:border-slate-700 p-5">
                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">已完成訂單數</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white" x-text="importResult?.summary.order_count"></p>
                    <p class="text-xs text-gray-400 mt-1" x-text="'共 ' + importResult?.summary.line_count + ' 筆明細'"></p>
                </div>
                <div class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-200 dark:border-slate-700 p-5">
                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">商品總價合計</p>
                    <p class="text-2xl font-bold text-blue-600 dark:text-blue-400" x-text="'$' + fmt(importResult?.summary.total_price)"></p>
                </div>
                <div class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-200 dark:border-slate-700 p-5">
                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">平台費用</p>
                    <p class="text-2xl font-bold text-orange-500" x-text="'$' + fmt(importResult?.summary.total_fee)"></p>
                </div>
                <div class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-200 dark:border-slate-700 p-5">
                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">實際淨收入</p>
                    <p class="text-2xl font-bold text-green-600 dark:text-green-400" x-text="'$' + fmt(importResult?.summary.net_revenue)"></p>
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-200 dark:border-slate-700 p-4 flex items-center gap-3">
                    <div class="w-8 h-8 rounded-lg bg-sky-100 dark:bg-sky-900/30 flex items-center justify-center flex-shrink-0">
                        <svg class="w-4 h-4 text-sky-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8l1 12h12l1-12M10 12h4"/>
                        </svg>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500">運輸中</p>
                        <p class="font-bold text-sky-600" x-text="(importResult?.summary.transit_count||0) + ' 筆 · $' + fmt(importResult?.summary.transit_amount||0)"></p>
                    </div>
                </div>
                <div class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-200 dark:border-slate-700 p-4 flex items-center gap-3">
                    <div class="w-8 h-8 rounded-lg bg-red-100 dark:bg-red-900/30 flex items-center justify-center flex-shrink-0">
                        <svg class="w-4 h-4 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500">未完成交易</p>
                        <p class="font-bold text-red-500" x-text="(importResult?.summary.incomplete_count||0) + ' 筆 · $' + fmt(importResult?.summary.incomplete_amount||0)"></p>
                    </div>
                </div>
            </div>

            <div x-show="importResult?.summary.skipped > 0"
                 class="bg-gray-50 dark:bg-slate-800/60 border border-gray-200 dark:border-slate-700 rounded-xl px-5 py-4 text-sm space-y-2">
                <p class="font-medium text-gray-600 dark:text-gray-400">訂單狀態分布</p>
                <div class="flex flex-wrap gap-2">
                    <template x-for="item in statusList" :key="item.status">
                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium"
                              :class="(item.status==='已完成'||item.status==='已送達')
                                  ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400'
                                  : 'bg-gray-200 dark:bg-slate-700 text-gray-600 dark:text-gray-400'">
                            <span x-text="item.status + ' ' + item.cnt + ' 筆'"></span>
                        </span>
                    </template>
                </div>
            </div>

            <p class="text-xs text-center text-gray-400">完整 Top 10 明細請至「查詢分析」頁籤點選該月份查看</p>
        </div>

    </div>

    {{-- ── 成本計算機 Modal ── --}}
    <div x-show="costModalOrder" x-cloak
         class="fixed inset-0 z-50 flex items-center justify-center p-4"
         @keydown.escape.window="costModalOrder = null">
        <div class="absolute inset-0 bg-black/40" @click="costModalOrder = null"></div>
        <div class="relative bg-white dark:bg-slate-800 rounded-2xl shadow-2xl w-full max-w-lg max-h-[80vh] flex flex-col">
            {{-- header --}}
            <div class="px-5 py-4 border-b border-gray-100 dark:border-slate-700 flex items-start justify-between gap-3 flex-shrink-0">
                <div>
                    <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-100">成本計算機</h3>
                    <p class="text-xs text-gray-400 mt-0.5 truncate max-w-xs"
                       x-text="costModalOrder?.product_name"></p>
                    <p class="text-xs text-blue-500 dark:text-blue-400 mt-0.5"
                       x-show="costModalOrder?.quantity > 1"
                       x-text="'訂單數量：' + costModalOrder?.quantity + ' 件，數量欄請填件數'"></p>
                </div>
                <button @click="costModalOrder = null" class="text-gray-400 hover:text-gray-600 flex-shrink-0 mt-0.5">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
            {{-- 成本項目列表 --}}
            <div class="flex-1 overflow-y-auto px-5 py-4 space-y-2">
                <div x-show="costItems.length === 0" class="text-sm text-gray-400 text-center py-6">
                    尚未建立成本項目，請至「成本設定」頁籤新增
                </div>
                <template x-for="group in costItemsByCategory" :key="group.label">
                    <div>
                        <div class="flex items-center gap-2 mb-1.5">
                            <span class="w-2 h-2 rounded-full" :style="'background:' + group.color"></span>
                            <span class="text-xs font-semibold text-gray-400 dark:text-gray-500" x-text="group.label"></span>
                        </div>
                        <template x-for="item in group.items" :key="item.id">
                            <div class="flex items-center gap-3 py-1.5 px-3 rounded-lg hover:bg-gray-50 dark:hover:bg-slate-700/30">
                                <span class="flex-1 text-sm text-gray-700 dark:text-gray-300" x-text="item.name"></span>
                                <span class="text-xs text-gray-400 w-16 text-right" x-text="'$' + item.unit_cost + ' / 個'"></span>
                                <span class="text-gray-300 text-xs">×</span>
                                <input type="number" min="0" step="1" placeholder="0"
                                       :value="costCalcLines[item.id] || ''"
                                       @input="costCalcLines[item.id] = $event.target.valueAsNumber || 0; $dispatch('calc-updated')"
                                       class="w-16 px-2 py-1 text-sm text-right border border-gray-200 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-900 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                <span class="text-xs text-gray-400 w-16 text-right"
                                      x-text="costCalcLines[item.id] ? '$' + (item.unit_cost * (costCalcLines[item.id]||0)) : ''"></span>
                            </div>
                        </template>
                    </div>
                </template>
            </div>
            {{-- footer --}}
            <div class="px-5 py-4 border-t border-gray-100 dark:border-slate-700 flex items-center justify-between flex-shrink-0">
                <div class="text-sm">
                    <span class="text-gray-500 dark:text-gray-400">合計成本：</span>
                    <span class="font-bold text-blue-600 dark:text-blue-400 text-base"
                          x-text="'$' + fmt(costCalcTotal(costModalOrder))"></span>
                </div>
                <div class="flex gap-2">
                    <button @click="costModalOrder = null"
                            class="px-4 py-2 text-sm rounded-xl bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 transition-colors">
                        取消
                    </button>
                    <button @click="saveCostBreakdown(costModalOrder); costModalOrder = null"
                            class="px-4 py-2 text-sm rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-medium transition-colors">
                        套用此成本
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
function revenueAnalyzer() {
    return {
        activeTab: '{{ $activeTab }}',
        file: null, fileName: '', dragging: false, loading: false,
        error: null, successMsg: '', importResult: null, statusList: [],
        selectedMonth: '{{ now()->format("Y-m") }}',
        history: [], viewResult: null, _chart: null,
        period: 'all', pickMonth: '', pickYear: '', listPage: 1,
        customFrom: '', customTo: '', pendingFrom: '', pendingTo: '',
        categories: [], showCatSettings: false,
        catForm: { name: '', keywords: '', color: '#3b82f6' }, catEditing: null,
        costItems: [], costItemForm: { category_id: '', name: '', unit_cost: '' }, costItemEditing: null,
        costModalOrder: null, costCalcLines: {},
        costMatching: false, costMatchMsg: '', showCostDiag: false, costDiag: null,
        viewOrders: [], showOrders: false, ordersLoading: false, _pieChart: null,
        _overviewChart: null, _barChart: null, _regionChart: null, _overviewRegionChart: null, overviewCats: [],
        _palette: ['#3b82f6','#ef4444','#10b981','#f59e0b','#8b5cf6','#ec4899','#06b6d4','#f97316','#84cc16','#14b8a6'],

        get monthOptions() {
            const opts = [];
            const now = new Date();
            for (let i = 0; i < 36; i++) {
                const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
                opts.push(d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0'));
            }
            return opts;
        },

        init() {
            // 預設選當月
            const now = new Date();
            const curYM = now.getFullYear() + '-' + String(now.getMonth() + 1).padStart(2, '0');
            this.selectedMonth = curYM;
            this.pickMonth     = curYM;
            this.pendingFrom   = curYM;
            this.pendingTo     = curYM;

            this.loadHistory();
            this.loadCategories();
            this.loadCostItems();
            // requestAnimationFrame 確保瀏覽器完成 layout 後再讓 Chart.js 查詢尺寸
            this.$watch('viewResult', () => {
                requestAnimationFrame(() => {
                    this.renderDailyChart();
                    this.renderPieChart();
                    this.renderRegionChart();
                });
            });
            this.$watch('categories', () => {
                requestAnimationFrame(() => this.renderPieChart()); // 明細圓餅圖
                this.loadOverviewCats();                            // 總覽圓餅圖（重抓 API）
            });
            this.$watch('viewOrders', () => {
                requestAnimationFrame(() => this.renderPieChart());
            });
            this.$watch('filteredHistory', () => {
                requestAnimationFrame(() => {
                    this.renderBarChart();
                    this.renderOverviewRegionChart();
                });
                this.loadOverviewCats(); // 重抓分類彙總
            });
        },

        setPeriod(key) {
            this.period = key;
            this.listPage = 1;
            if (key === 'custom' && !this.customFrom) {
                const opts = this.monthOptions;
                this.pendingTo   = opts[0];
                this.pendingFrom = opts[Math.min(5, opts.length - 1)];
                this.customFrom  = this.pendingFrom;
                this.customTo    = this.pendingTo;
            }
            if (key === 'pick_year' && !this.pickYear) {
                this.pickYear = String(new Date().getFullYear());
            }
        },

        get yearOptions() {
            const years = [...new Set(this.history.map(r => r.month.slice(0, 4)))];
            return years.sort((a, b) => b.localeCompare(a));
        },

        get filteredHistory() {
            const now = new Date();
            const curYM = now.toISOString().slice(0, 7);
            const curY  = curYM.slice(0, 4);
            if (this.period === 'month')     return this.history.filter(r => r.month === curYM);
            if (this.period === 'cur_year')  return this.history.filter(r => r.month.startsWith(curY));
            if (this.period === 'pick')      return this.history.filter(r => r.month === this.pickMonth);
            if (this.period === 'pick_year') return this.history.filter(r => r.month.startsWith(this.pickYear));
            if (this.period === 'half') {
                const from = new Date(now); from.setMonth(from.getMonth() - 5);
                return this.history.filter(r => r.month >= from.toISOString().slice(0, 7) && r.month <= curYM);
            }
            if (this.period === 'year') {
                const from = new Date(now); from.setMonth(from.getMonth() - 11);
                return this.history.filter(r => r.month >= from.toISOString().slice(0, 7) && r.month <= curYM);
            }
            if (this.period === 'custom') {
                const f = this.customFrom, t = this.customTo;
                return this.history.filter(r => (!f || r.month >= f) && (!t || r.month <= t));
            }
            return this.history;
        },

        get pagedHistory() {
            if (this.period !== 'all') return this.filteredHistory;
            return this.filteredHistory.slice(0, this.listPage * 5);
        },

        get productCategories() {
            if (!this.viewResult) return [];

            if (this.viewOrders.length > 0) {
                // ── 優先模式：實際訂單明細（手動設定 > 關鍵字自動判斷）──
                // 計算每張訂單有幾行，用於按比例分配金額
                const lineCounts = {};
                for (const o of this.viewOrders) {
                    lineCounts[o.order_no] = (lineCounts[o.order_no] || 0) + 1;
                }
                // 建立分類累加桶
                const catMap = {};
                for (const cat of this.categories) {
                    catMap[cat.name] = { name: cat.name, color: cat.color, revenue: 0, count: 0 };
                }
                catMap['其他'] = { name: '其他', color: '#9ca3af', revenue: 0, count: 0 };

                for (const o of this.viewOrders) {
                    let catName = o.category_name || null;
                    // 若無手動設定，以關鍵字比對
                    if (!catName) {
                        for (const cat of this.categories) {
                            const kws = Array.isArray(cat.keywords) ? cat.keywords : [];
                            if (kws.some(kw => kw && (o.product_name || '').includes(kw))) {
                                catName = cat.name;
                                break;
                            }
                        }
                    }
                    catName = catName || '其他';
                    if (!catMap[catName]) catMap[catName] = { name: catName, color: '#9ca3af', revenue: 0, count: 0 };
                    // 同一訂單多商品時按比例分配金額（避免重複計算）
                    catMap[catName].revenue += o.order_total / (lineCounts[o.order_no] || 1);
                    catMap[catName].count   += 1;
                }

                const result = this.categories
                    .map(cat => ({ ...catMap[cat.name], revenue: Math.round(catMap[cat.name]?.revenue || 0) }))
                    .filter(c => c.revenue > 0);
                if (catMap['其他'].revenue > 0) {
                    result.push({ ...catMap['其他'], revenue: Math.round(catMap['其他'].revenue) });
                }
                return result;
            }

            // ── 備用模式：關鍵字比對 top_products_list（未展開訂單明細時）──
            const products = this.viewResult?.top_products_list || [];
            const matched = new Set();
            const cats = this.categories.map(cat => {
                const kws = Array.isArray(cat.keywords) ? cat.keywords : [];
                const items = products.filter(p => !matched.has(p.name) && kws.some(kw => kw && p.name.includes(kw)));
                items.forEach(p => matched.add(p.name));
                return {
                    name: cat.name, color: cat.color,
                    revenue: items.reduce((s, p) => s + p.revenue, 0),
                    count:   items.reduce((s, p) => s + p.count,   0),
                };
            });
            const other = products.filter(p => !matched.has(p.name));
            if (other.length) {
                cats.push({ name: '其他', color: '#9ca3af',
                    revenue: other.reduce((s, p) => s + p.revenue, 0),
                    count:   other.reduce((s, p) => s + p.count,   0) });
            }
            return cats.filter(c => c.revenue > 0);
        },

        get periodSummary() {
            const rows = this.filteredHistory;
            return {
                orders:      rows.reduce((s, r) => s + r.order_count, 0),
                total_price: rows.reduce((s, r) => s + r.total_price, 0),
                total_fee:   rows.reduce((s, r) => s + r.total_fee,   0),
                net_revenue: rows.reduce((s, r) => s + r.net_revenue, 0),
            };
        },

        get overviewCategories() {
            return this.overviewCats;
        },

        get overviewRegionData() {
            const merged = {};
            for (const row of this.filteredHistory) {
                const rd = row.region_data || {};
                for (const [city, d] of Object.entries(rd)) {
                    if (!merged[city]) merged[city] = { count: 0, revenue: 0 };
                    merged[city].count   += d.count   || 0;
                    merged[city].revenue += d.revenue || 0;
                }
            }
            // sort by count desc
            return Object.fromEntries(
                Object.entries(merged).sort((a, b) => b[1].count - a[1].count)
            );
        },

        async loadHistory() {
            try {
                const res = await fetch('{{ route("admin.revenue.history") }}');
                if (res.ok) this.history = await res.json();
            } catch(e) {}
        },

        async loadCategories() {
            try {
                const res = await fetch('{{ route("admin.revenue.categories") }}');
                if (res.ok) {
                    this.categories = await res.json();
                    if (!this.catEditing) {
                        this.catForm.color = this._palette[this.categories.length % this._palette.length];
                    }
                }
            } catch(e) {}
        },

        editCategory(cat) {
            this.catEditing = cat.id;
            this.catForm = { name: cat.name, keywords: (cat.keywords || []).join('、'), color: cat.color };
        },

        cancelEdit() {
            this.catEditing = null;
            this.catForm = { name: '', keywords: '', color: this._palette[this.categories.length % this._palette.length] };
        },

        async saveCategory() {
            const kws = this.catForm.keywords.split(/[,，、\s]+/).map(k => k.trim()).filter(Boolean);
            if (!this.catForm.name.trim() || !kws.length) return;
            const csrf = document.querySelector('meta[name="csrf-token"]');
            const headers = {
                'X-CSRF-TOKEN': csrf?.content || '',
                'Content-Type': 'application/json',
                'Accept': 'application/json',
            };
            const body = JSON.stringify({ name: this.catForm.name.trim(), keywords: kws, color: this.catForm.color });
            try {
                const url = this.catEditing
                    ? `/admin/revenue-categories/${this.catEditing}`
                    : '{{ route("admin.revenue.categories.store") }}';
                const res = await fetch(url, { method: this.catEditing ? 'PUT' : 'POST', headers, body });
                if (res.ok) {
                    this.catEditing = null;
                    this.catForm = { name: '', keywords: '' };
                    await this.loadCategories(); // also refreshes catForm.color via nextColor
                }
            } catch(e) {}
        },

        async deleteCategory(id) {
            if (!confirm('確定刪除此分類？')) return;
            if (!confirm('再次確認：刪除後相關訂單的分類設定將一併清除，此操作無法復原。')) return;
            const csrf = document.querySelector('meta[name="csrf-token"]');
            try {
                await fetch(`/admin/revenue-categories/${id}`, {
                    method: 'DELETE',
                    headers: { 'X-CSRF-TOKEN': csrf?.content || '' },
                });
                await this.loadCategories();
            } catch(e) {}
        },

        viewMonth(row) {
            window.scrollTo({ top: 0, behavior: 'smooth' });
            // 找上個月資料
            const [y, m] = row.month.split('-').map(Number);
            const prevDate = new Date(y, m - 2);
            const prevYM = prevDate.getFullYear() + '-' + String(prevDate.getMonth() + 1).padStart(2, '0');
            const prev = this.history.find(r => r.month === prevYM) || null;

            this.viewOrders = [];
            this.showOrders = false;
            // 自動載入訂單明細（供圓餅圖使用，不需使用者展開）
            this.loadOrders(row.month);

            const toList = (obj) => Object.entries(obj || {}).map(([name, d]) => ({
                name, ...d,
                productList: Object.entries(d.products || {})
                    .sort((a, b) => b[1] - a[1])
                    .map(([p]) => p),
            }));
            this.viewResult = {
                month: row.month,
                prev,
                summary: {
                    order_count:       row.order_count,
                    line_count:        row.order_count,
                    total_price:       row.total_price,
                    trans_fee:         row.trans_fee,
                    other_fee:         row.other_fee,
                    payment_fee:       row.payment_fee,
                    total_fee:         row.total_fee,
                    net_revenue:       row.net_revenue,
                    transit_count:     row.transit_count,
                    transit_amount:    row.transit_amount,
                    incomplete_count:  row.incomplete_count,
                    incomplete_amount: row.incomplete_amount,
                },
                daily_data:        row.daily_data || [],
                region_data:       row.region_data || {},
                top_products_list: toList(row.top_products),
                top_buyers_list:   toList(row.top_buyers),
            };
        },

        renderDailyChart() {
            const canvas = this.$refs.dailyChart;
            if (!canvas || !(this.viewResult?.daily_data?.length)) return;
            // Destroy any stale Chart.js instance on this canvas (handles re-init edge cases)
            const stale = Chart.getChart(canvas);
            if (stale) stale.destroy();
            if (this._chart) { this._chart.destroy(); this._chart = null; }

            const data   = this.viewResult.daily_data.filter(d => d.date !== 'unknown');
            const labels = data.map(d => d.date.slice(5)); // MM-DD
            const values = data.map(d => d.revenue);

            const isDark = document.documentElement.classList.contains('dark');
            const gridColor  = isDark ? 'rgba(255,255,255,0.07)' : 'rgba(0,0,0,0.06)';
            const labelColor = isDark ? '#94a3b8' : '#6b7280';

            this._chart = new Chart(canvas, {
                type: 'line',
                data: {
                    labels,
                    datasets: [{
                        label: '每日營業額',
                        data: values,
                        borderColor: '#3b82f6',
                        backgroundColor: 'rgba(59,130,246,0.08)',
                        borderWidth: 2,
                        pointRadius: data.length <= 15 ? 4 : 2,
                        pointHoverRadius: 6,
                        fill: true,
                        tension: 0.35,
                    }],
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                label: ctx => ' $' + ctx.parsed.y.toLocaleString('zh-TW'),
                            },
                        },
                    },
                    scales: {
                        x: { grid: { color: gridColor }, ticks: { color: labelColor, maxTicksLimit: 10 } },
                        y: {
                            grid: { color: gridColor },
                            ticks: {
                                color: labelColor,
                                callback: v => '$' + (v >= 1000 ? (v/1000).toFixed(0) + 'k' : v),
                            },
                        },
                    },
                },
            });
            // Force resize in the next frame in case the container just became visible
            requestAnimationFrame(() => { if (this._chart) this._chart.resize(); });
        },

        renderPieChart() {
            const canvas = this.$refs.pieChart;
            if (!canvas) return;
            const stale = Chart.getChart(canvas);
            if (stale) stale.destroy();
            if (this._pieChart) { this._pieChart.destroy(); this._pieChart = null; }
            const data = (this.productCategories || []).filter(c => c.revenue > 0);
            if (!data.length) return;
            const isDark = document.documentElement.classList.contains('dark');
            this._pieChart = new Chart(canvas, {
                type: 'doughnut',
                data: {
                    labels: data.map(c => c.name),
                    datasets: [{
                        data: data.map(c => c.revenue),
                        backgroundColor: data.map(c => c.color),
                        borderWidth: 2,
                        borderColor: isDark ? '#1e293b' : '#ffffff',
                        hoverBorderWidth: 0,
                    }],
                },
                options: {
                    responsive: false,
                    cutout: '65%',
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                label: ctx => {
                                    const total = data.reduce((s, c) => s + c.revenue, 0);
                                    const pct = total ? (ctx.parsed / total * 100).toFixed(1) : 0;
                                    return ` ${ctx.label}: $${ctx.parsed.toLocaleString('zh-TW')} (${pct}%)`;
                                },
                            },
                        },
                    },
                },
            });
        },

        async loadOverviewCats() {
            const months = this.filteredHistory.map(r => r.month);
            if (!months.length || !this.categories.length) {
                this.overviewCats = [];
                requestAnimationFrame(() => this.renderOverviewChart());
                return;
            }
            try {
                const csrf = document.querySelector('meta[name="csrf-token"]');
                const res  = await fetch('{{ route("admin.revenue.category_summary") }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrf?.content || '',
                        'Content-Type': 'application/json',
                        'Accept':       'application/json',
                    },
                    body: JSON.stringify({ months }),
                });
                if (res.ok) this.overviewCats = await res.json();
            } catch(e) {}
            requestAnimationFrame(() => this.renderOverviewChart());
        },

        renderOverviewChart() {
            const canvas = this.$refs.overviewChart;
            if (!canvas) return;
            const stale = Chart.getChart(canvas);
            if (stale) stale.destroy();
            if (this._overviewChart) { this._overviewChart.destroy(); this._overviewChart = null; }
            const cats = this.overviewCategories;
            if (!cats.length) return;
            const isDark = document.documentElement.classList.contains('dark');
            this._overviewChart = new Chart(canvas, {
                type: 'doughnut',
                data: {
                    labels: cats.map(c => c.name),
                    datasets: [{
                        data: cats.map(c => c.revenue),
                        backgroundColor: cats.map(c => c.color),
                        borderWidth: 2,
                        borderColor: isDark ? '#1e293b' : '#ffffff',
                        hoverOffset: 8,
                    }],
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '65%',
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                label: ctx => {
                                    const total = cats.reduce((s, c) => s + c.revenue, 0);
                                    const pct = total ? (ctx.parsed / total * 100).toFixed(1) : 0;
                                    return ` ${ctx.label}: $${ctx.parsed.toLocaleString('zh-TW')} (${pct}%)`;
                                },
                            },
                        },
                    },
                },
            });
            requestAnimationFrame(() => { if (this._overviewChart) this._overviewChart.resize(); });
        },

        renderBarChart() {
            const canvas = this.$refs.barChart;
            if (!canvas) return;
            const stale = Chart.getChart(canvas);
            if (stale) stale.destroy();
            if (this._barChart) { this._barChart.destroy(); this._barChart = null; }
            const rows = [...this.filteredHistory].sort((a, b) => a.month.localeCompare(b.month));
            if (!rows.length) return;
            const isDark = document.documentElement.classList.contains('dark');
            const gridColor  = isDark ? 'rgba(255,255,255,0.07)' : 'rgba(0,0,0,0.06)';
            const labelColor = isDark ? '#94a3b8' : '#6b7280';
            this._barChart = new Chart(canvas, {
                type: 'bar',
                data: {
                    labels: rows.map(r => r.month.slice(2)),
                    datasets: [{
                        label: '淨收入',
                        data: rows.map(r => r.net_revenue),
                        backgroundColor: 'rgba(59,130,246,0.55)',
                        borderColor: '#3b82f6',
                        borderWidth: 1,
                        borderRadius: 4,
                    }],
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                label: ctx => ' $' + ctx.parsed.y.toLocaleString('zh-TW'),
                            },
                        },
                    },
                    scales: {
                        x: { grid: { display: false }, ticks: { color: labelColor } },
                        y: {
                            grid: { color: gridColor },
                            ticks: {
                                color: labelColor,
                                callback: v => '$' + (v >= 1000 ? (v/1000).toFixed(0) + 'k' : v),
                            },
                        },
                    },
                },
            });
            requestAnimationFrame(() => { if (this._barChart) this._barChart.resize(); });
        },

        renderRegionChart() {
            const canvas = this.$refs.regionChart;
            if (!canvas) return;
            const stale = Chart.getChart(canvas);
            if (stale) stale.destroy();
            if (this._regionChart) { this._regionChart.destroy(); this._regionChart = null; }

            const regionData = this.viewResult?.region_data || {};
            const entries = Object.entries(regionData).sort((a, b) => b[1].count - a[1].count);
            if (!entries.length) return;

            const labels   = entries.map(([r])    => r);
            const counts   = entries.map(([, d])  => d.count);
            const revenues = entries.map(([, d])  => d.revenue);
            const total    = counts.reduce((s, c) => s + c, 0);

            const isDark     = document.documentElement.classList.contains('dark');
            const labelColor = isDark ? '#94a3b8' : '#6b7280';
            const gridColor  = isDark ? 'rgba(255,255,255,0.07)' : 'rgba(0,0,0,0.06)';

            this._regionChart = new Chart(canvas, {
                type: 'bar',
                data: {
                    labels,
                    datasets: [{
                        data: counts,
                        backgroundColor: 'rgba(59,130,246,0.55)',
                        borderColor: '#3b82f6',
                        borderWidth: 1,
                        borderRadius: 4,
                    }],
                },
                options: {
                    indexAxis: 'y',
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                title: ctx => ctx[0].label,
                                label: ctx => {
                                    const count   = ctx.parsed.x;
                                    const revenue = revenues[ctx.dataIndex];
                                    const pct     = total > 0 ? (count / total * 100).toFixed(1) : 0;
                                    return [
                                        ` ${count} 筆（${pct}%）`,
                                        ` $${revenue.toLocaleString('zh-TW')}`,
                                    ];
                                },
                            },
                        },
                    },
                    scales: {
                        x: {
                            grid: { color: gridColor },
                            ticks: { color: labelColor, precision: 0 },
                        },
                        y: {
                            grid: { display: false },
                            ticks: { color: labelColor },
                        },
                    },
                },
            });
            requestAnimationFrame(() => { if (this._regionChart) this._regionChart.resize(); });
        },

        renderOverviewRegionChart() {
            const canvas = this.$refs.overviewRegionChart;
            if (!canvas) return;
            const stale = Chart.getChart(canvas);
            if (stale) stale.destroy();
            if (this._overviewRegionChart) { this._overviewRegionChart.destroy(); this._overviewRegionChart = null; }

            const regionData = this.overviewRegionData;
            const entries = Object.entries(regionData);
            if (!entries.length) return;

            const labels   = entries.map(([r])   => r);
            const counts   = entries.map(([, d]) => d.count);
            const revenues = entries.map(([, d]) => d.revenue);
            const total    = counts.reduce((s, c) => s + c, 0);

            const isDark     = document.documentElement.classList.contains('dark');
            const labelColor = isDark ? '#94a3b8' : '#6b7280';
            const gridColor  = isDark ? 'rgba(255,255,255,0.07)' : 'rgba(0,0,0,0.06)';

            this._overviewRegionChart = new Chart(canvas, {
                type: 'bar',
                data: {
                    labels,
                    datasets: [{
                        data: counts,
                        backgroundColor: 'rgba(16,185,129,0.55)',
                        borderColor: '#10b981',
                        borderWidth: 1,
                        borderRadius: 4,
                    }],
                },
                options: {
                    indexAxis: 'y',
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                title: ctx => ctx[0].label,
                                label: ctx => {
                                    const count   = ctx.parsed.x;
                                    const revenue = revenues[ctx.dataIndex];
                                    const pct     = total > 0 ? (count / total * 100).toFixed(1) : 0;
                                    return [
                                        ` ${count} 筆（${pct}%）`,
                                        ` $${revenue.toLocaleString('zh-TW')}`,
                                    ];
                                },
                            },
                        },
                    },
                    scales: {
                        x: {
                            grid: { color: gridColor },
                            ticks: { color: labelColor, precision: 0 },
                        },
                        y: {
                            grid: { display: false },
                            ticks: { color: labelColor },
                        },
                    },
                },
            });
            requestAnimationFrame(() => { if (this._overviewRegionChart) this._overviewRegionChart.resize(); });
        },

        async toggleOrders() {
            this.showOrders = !this.showOrders;
            if (this.showOrders && !this.viewOrders.length && this.viewResult) {
                await this.loadOrders(this.viewResult.month);
            }
        },

        async loadOrders(month) {
            this.ordersLoading = true;
            try {
                const res = await fetch(`/admin/revenue/${month}/orders`);
                if (res.ok) this.viewOrders = await res.json();
            } catch(e) {}
            finally { this.ordersLoading = false; }
        },

        // 比對商品名稱與成本項目，傳回合計（無匹配回 0）
        // 先去掉頭尾括號標記（如 [免運]、【特惠】），再做雙向 includes
        getAutoMatchedCost(order) {
            if (!order.product_name || !this.costItems.length) return 0;
            // 去除頭尾常見標記，如 [免運]、【xxx】
            const stripTags = s => s.replace(/^[\[【〔（(][^\]】〕）)]*[\]】〕）)]\s*/g, '').trim();
            const pRaw   = order.product_name.toLowerCase().trim();
            const pClean = stripTags(pRaw);
            const qty    = Number(order.quantity) || 1;
            let unitTotal = 0;
            for (const item of this.costItems) {
                const iLower = (item.name || '').toLowerCase().trim();
                if (!iLower) continue;
                // 用原始名稱和去標記名稱都試
                if (pRaw.includes(iLower) || pClean.includes(iLower) || iLower.includes(pClean)) {
                    unitTotal += Number(item.unit_cost) || 0;
                }
            }
            return Math.round(unitTotal * qty);
        },

        // 「比對成本」按鈕觸發：載入訂單（若未展開）→ 重新拉成本清單 → 比對 → 批次存檔 → 顯示結果
        async matchAndApplyCosts() {
            if (this.costMatching) return;
            this.costMatching = true;
            this.costMatchMsg = '';
            this.showCostDiag = false;
            try {
                // 若訂單尚未載入，先展開並載入
                if (!this.viewOrders.length && this.viewResult) {
                    this.showOrders = true;
                    await this.loadOrders(this.viewResult.month);
                }
                // 每次都重新載入成本清單，確保資料最新
                await this.loadCostItems();
                if (!this.costItems.length) {
                    this.costMatchMsg = '尚未設定成本項目（請至「成本設定」頁籤新增）';
                    return;
                }
                const csrf = document.querySelector('meta[name="csrf-token"]');
                // 只對 cost 尚未設定的訂單做比對，同時收集診斷資料
                const toApply = [];
                const diagRows = [];
                const uniqueProducts = [...new Set(this.viewOrders
                    .filter(o => o.cost === null || o.cost === undefined)
                    .map(o => o.product_name))];
                for (const name of uniqueProducts) {
                    const pLower = (name || '').toLowerCase().trim();
                    const hits = this.costItems.filter(i => {
                        const iLower = (i.name || '').toLowerCase().trim();
                        return iLower && (pLower.includes(iLower) || iLower.includes(pLower));
                    });
                    diagRows.push({ product: name, matched: hits.map(i => i.name + '($' + i.unit_cost + ')').join('、') || '—' });
                }
                this.costDiag = {
                    costItemNames: this.costItems.map(i => i.name),
                    rows: diagRows,
                };
                for (const o of this.viewOrders) {
                    if (o.cost !== null && o.cost !== undefined) continue;
                    const matched = this.getAutoMatchedCost(o);
                    if (matched > 0) toApply.push({ id: o.id, cost: matched });
                }
                if (!toApply.length) {
                    this.costMatchMsg = '找不到符合的商品 → 點「查看比對」確認名稱';
                    this.showCostDiag = true;
                    return;
                }
                // 並行送出所有儲存請求
                await Promise.all(toApply.map(({ id, cost }) =>
                    fetch(`/admin/revenue-orders/${id}`, {
                        method: 'PUT',
                        headers: { 'X-CSRF-TOKEN': csrf?.content||'', 'Content-Type':'application/json', 'Accept':'application/json' },
                        body: JSON.stringify({ cost }),
                    })
                ));
                // 一次性更新 viewOrders（單次 re-render，不逐筆觸發）
                const costMap = Object.fromEntries(toApply.map(({ id, cost }) => [id, cost]));
                this.viewOrders = this.viewOrders.map(o =>
                    costMap[o.id] !== undefined ? { ...o, cost: costMap[o.id] } : o
                );
                this.costMatchMsg = `已套用 ${toApply.length} 筆 → `;
                this.showCostDiag = true;
            } finally {
                this.costMatching = false;
            }
        },

        orderFormulaCost(order) {
            const lineCounts = {};
            for (const o of this.viewOrders) {
                lineCounts[o.order_no] = (lineCounts[o.order_no] || 0) + 1;
            }
            const share  = order.order_total / (lineCounts[order.order_no] || 1);
            const catDef = this.categories.find(c => c.name === order.category_name);
            const rate   = catDef?.cost_rate ?? null;
            if (rate === null) return '公式';
            return Math.round(share * rate / 100).toString();
        },

        async saveOrderCost(order, value) {
            const cost = (value === '' || value === null) ? null : parseFloat(value);
            order.cost = cost;
            const csrf = document.querySelector('meta[name="csrf-token"]');
            await fetch(`/admin/revenue-orders/${order.id}`, {
                method: 'PUT',
                headers: {
                    'X-CSRF-TOKEN': csrf?.content || '',
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                },
                body: JSON.stringify({ cost }),
            });
        },

        async setOrderCategory(order, categoryId) {
            order.category_id = categoryId ? Number(categoryId) : null;
            const cat = this.categories.find(c => c.id == categoryId);
            order.category_name  = cat?.name  || null;
            order.category_color = cat?.color || null;
            const csrf = document.querySelector('meta[name="csrf-token"]');
            await fetch(`/admin/revenue-orders/${order.id}`, {
                method: 'PUT',
                headers: {
                    'X-CSRF-TOKEN': csrf?.content || '',
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                },
                body: JSON.stringify({ category_id: order.category_id }),
            });
        },

        handleFileInput(e) {
            const f = e.target.files[0];
            if (f) { this.file = f; this.fileName = f.name; this.error = null; }
            e.target.value = '';
        },
        handleDrop(e) {
            this.dragging = false;
            const f = e.dataTransfer.files[0];
            if (f && (f.name.endsWith('.xlsx') || f.name.endsWith('.xls'))) {
                this.file = f; this.fileName = f.name; this.error = null;
            } else {
                this.error = '請選擇 .xlsx 或 .xls 格式的檔案';
            }
        },

        async analyze() {
            if (!this.file || !this.selectedMonth) return;
            this.loading = true; this.error = null; this.successMsg = ''; this.importResult = null;
            const formData = new FormData();
            const csrf = document.querySelector('meta[name="csrf-token"]');
            if (csrf) formData.append('_token', csrf.content);
            formData.append('file', this.file);
            formData.append('month', this.selectedMonth);
            try {
                const res = await fetch('{{ route("admin.revenue.analyze") }}', {
                    method: 'POST',
                    headers: { 'Accept': 'application/json' },
                    body: formData,
                });
                const data = await res.json().catch(() => ({}));
                if (!res.ok) {
                    const fieldErrors = data.errors ? Object.values(data.errors).flat().join('、') : '';
                    this.error = data.error || fieldErrors || data.message || '分析失敗 (HTTP ' + res.status + ')';
                    return;
                }
                data.top_products_list = Object.entries(data.top_products || {}).map(([name, d]) => ({ name, ...d }));
                data.top_buyers_list   = Object.entries(data.top_buyers   || {}).map(([name, d]) => ({ name, ...d }));
                this.statusList = Object.entries(data.summary?.status_counts || {}).map(([status, cnt]) => ({ status, cnt }));
                this.importResult = data;
                this.successMsg = data.month + ' 報表已儲存';
                await this.loadHistory();
            } catch(e) {
                this.error = '網路錯誤：' + e.message;
            } finally {
                this.loading = false;
            }
        },

        async deleteMonth(month) {
            if (!confirm('確定刪除 ' + month + ' 的記錄？')) return;
            if (!confirm('再次確認：刪除後所有訂單明細與地區資料將一併移除，此操作無法復原。')) return;
            const csrf = document.querySelector('meta[name="csrf-token"]');
            await fetch(`/admin/revenue/${month}`, {
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': csrf?.content || '' },
            });
            if (this.viewResult?.month === month) this.viewResult = null;
            await this.loadHistory();
        },

        diffText(cur, prev) {
            if (!prev || prev === 0) return '';
            const pct = ((cur - prev) / prev * 100).toFixed(1);
            const sign = cur >= prev ? '▲' : '▼';
            return sign + ' ' + Math.abs(pct) + '% vs 上月';
        },
        get profitRows() {
            // ── 單月模式：逐筆訂單計算，有手動成本用手動，否則套分類成本率 ──
            if (this.viewResult && this.viewOrders.length > 0) {
                const lineCounts = {};
                for (const o of this.viewOrders) {
                    lineCounts[o.order_no] = (lineCounts[o.order_no] || 0) + 1;
                }
                const catMap = {};
                for (const o of this.viewOrders) {
                    const catName = o.category_name || '其他';
                    const color   = o.category_color || '#9ca3af';
                    const share   = o.order_total / (lineCounts[o.order_no] || 1);
                    if (!catMap[catName]) catMap[catName] = { name: catName, color, revenue: 0, cost_amount: 0, has_rate: false };

                    catMap[catName].revenue += share;

                    if (o.cost !== null && o.cost !== undefined) {
                        // 手動成本按比例分攤（同訂單多商品）
                        catMap[catName].cost_amount += o.cost / (lineCounts[o.order_no] || 1);
                        catMap[catName].has_rate = true;
                    } else {
                        const catDef = this.categories.find(c => c.name === catName);
                        const rate   = catDef?.cost_rate ?? null;
                        if (rate !== null) {
                            catMap[catName].cost_amount += share * rate / 100;
                            catMap[catName].has_rate = true;
                        }
                    }
                }
                return Object.values(catMap)
                    .filter(c => c.revenue > 0)
                    .map(c => ({
                        name:        c.name,
                        color:       c.color,
                        revenue:     Math.round(c.revenue),
                        cost_rate:   null,
                        cost_amount: Math.round(c.cost_amount),
                        net:         Math.round(c.revenue - c.cost_amount),
                        has_rate:    c.has_rate,
                    }));
            }
            // ── 期間總覽模式：分類成本率套整體收入 ──
            return this.overviewCats
                .filter(cat => cat.revenue > 0)
                .map(cat => {
                    const catDef  = this.categories.find(c => c.name === cat.name);
                    const rate    = catDef?.cost_rate ?? null;
                    const cost    = rate !== null ? Math.round(cat.revenue * rate / 100) : 0;
                    return {
                        name:        cat.name,
                        color:       cat.color,
                        revenue:     cat.revenue,
                        cost_rate:   rate,
                        cost_amount: cost,
                        net:         cat.revenue - cost,
                        has_rate:    rate !== null,
                    };
                });
        },

        async loadCostItems() {
            try {
                const res = await fetch('{{ route("admin.revenue.cost_items.index") }}');
                if (res.ok) this.costItems = await res.json();
            } catch(e) {}
        },

        costItemsForCategory(categoryId) {
            const id = categoryId ? Number(categoryId) : null;
            return this.costItems.filter(i => (i.category_id ?? null) === id);
        },

        get costItemsByCategory() {
            const groups = [];
            // 通用（無分類）
            const general = this.costItems.filter(i => !i.category_id);
            if (general.length) groups.push({ label: '通用', color: '#9ca3af', items: general });
            // 各分類
            for (const cat of this.categories) {
                const items = this.costItems.filter(i => i.category_id == cat.id);
                if (items.length) groups.push({ label: cat.name, color: cat.color, items });
            }
            return groups;
        },

        async saveCostItem() {
            const form = this.costItemForm;
            if (!form.name.trim() || form.unit_cost === '') return;
            const csrf = document.querySelector('meta[name="csrf-token"]');
            const body = {
                category_id: form.category_id || null,
                name:        form.name.trim(),
                unit_cost:   parseFloat(form.unit_cost),
            };
            if (this.costItemEditing) {
                await fetch(`/admin/revenue-cost-items/${this.costItemEditing}`, {
                    method: 'PUT',
                    headers: { 'X-CSRF-TOKEN': csrf?.content||'', 'Content-Type':'application/json', 'Accept':'application/json' },
                    body: JSON.stringify({ name: body.name, unit_cost: body.unit_cost }),
                });
                this.costItemEditing = null;
            } else {
                await fetch('/admin/revenue-cost-items', {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrf?.content||'', 'Content-Type':'application/json', 'Accept':'application/json' },
                    body: JSON.stringify(body),
                });
            }
            this.costItemForm = { category_id: form.category_id, name: '', unit_cost: '' };
            await this.loadCostItems();
        },

        editCostItem(item) {
            this.costItemEditing = item.id;
            this.costItemForm    = { category_id: item.category_id ?? '', name: item.name, unit_cost: item.unit_cost };
        },

        async deleteCostItem(id) {
            if (!confirm('確定刪除此成本項目？')) return;
            const csrf = document.querySelector('meta[name="csrf-token"]');
            await fetch(`/admin/revenue-cost-items/${id}`, {
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': csrf?.content||'' },
            });
            await this.loadCostItems();
        },

        openCostModal(order) {
            const qty   = order.quantity || 1;
            const lower = (order.product_name || '').toLowerCase();
            const lines = {};
            // 先用已儲存的 breakdown
            if (order?.cost_breakdown?.length) {
                for (const b of order.cost_breakdown) {
                    lines[b.cost_item_id] = b.qty;
                }
            } else {
                // 否則依名稱比對預填訂單數量
                for (const item of this.costItems) {
                    if (lower.includes(item.name.toLowerCase())) {
                        lines[item.id] = qty;
                    }
                }
            }
            this.costCalcLines  = lines;
            this.costModalOrder = order;
        },

        costCalcTotal(order) {
            let total = 0;
            for (const [itemId, qty] of Object.entries(this.costCalcLines)) {
                const item = this.costItems.find(i => i.id == itemId);
                if (item && qty > 0) total += item.unit_cost * qty;
            }
            return Math.round(total);
        },

        async saveCostBreakdown(order) {
            const breakdown = [];
            for (const [itemId, qty] of Object.entries(this.costCalcLines)) {
                if (qty > 0) breakdown.push({ id: Number(itemId), qty: Number(qty) });
            }
            const csrf = document.querySelector('meta[name="csrf-token"]');
            const res  = await fetch(`/admin/revenue-orders/${order.id}/cost-breakdown`, {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': csrf?.content||'', 'Content-Type':'application/json', 'Accept':'application/json' },
                body: JSON.stringify({ breakdown }),
            });
            if (res.ok) {
                const data = await res.json();
                order.cost           = data.cost;
                order.cost_breakdown = data.breakdown;
            }
        },

        async saveCostRate(id, value) {
            const rate = value === '' ? null : parseFloat(value);
            const csrf = document.querySelector('meta[name="csrf-token"]');
            const res  = await fetch(`/admin/revenue-categories/${id}`, {
                method: 'PUT',
                headers: {
                    'X-CSRF-TOKEN': csrf?.content || '',
                    'Content-Type': 'application/json',
                    'Accept':       'application/json',
                },
                body: JSON.stringify({ cost_rate: rate }),
            });
            if (res.ok) {
                const updated = await res.json();
                const idx = this.categories.findIndex(c => c.id === id);
                if (idx >= 0) this.categories[idx] = { ...this.categories[idx], cost_rate: updated.cost_rate };
            }
        },

        diffClass(cur, prev) {
            if (!prev) return 'text-gray-400';
            return cur >= prev ? 'text-green-500' : 'text-red-400';
        },
        fmt(n) { return (n || 0).toLocaleString('zh-TW'); },
        pct(part, total) {
            if (!total) return '';
            return (part / total * 100).toFixed(1) + '%';
        },
    };
}
</script>
@endsection