{{--
    Task #33876 — LTV (SCR-01) — read-only analytics, System Admin / 売上データ.
    EP-01: GET /admin/revenue/ltv/data (overall | by_channel).

    RESOLVED: LTV = ARPU × 継続月数 (BR-01); 金額 円 + phân cách nghìn, âm → − (BR-G6);
      継続月数 1 chữ số thập phân, 解約率=0 → "0.0"; no-data →「-」 (BR-G4).
      by_channel REDESIGN QD-09b (TD v2, kế thừa #33882): cột kênh ĐỘNG theo path intro (path_intro_name).
    ⏳ Pending (KHÔNG codify — L4): 前月比 format (QA-spec-006) → null →「-」; nguồn path intro (QD-07b)
      → channels rỗng (empty-state ⏳ P-4); ARPU thành phần 売上合計 (QA-spec-021, job TA-default).
    UI compose lme-ui (date-picker/button/icon). Bảng analytics grouped-header tự dựng <table>
    (lme-table không hỗ trợ header nhóm đa cấp LTV/ARPU/継続月数 × 金額/前月比).
--}}
@extends('layout.admin_v2.main')

@section('title')
    LTV
@endsection

@push('css')
    <link rel="stylesheet" href="/lme-ui/src/css/reset.css">
    <link rel="stylesheet" href="/lme-ui/src/css/base.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/button/button.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/date-picker/date-picker.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/tooltip/tooltip.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/css/admin/ltv.css?v={{config('sns-line.version')}}">
    <style>
        .ltv-table th {
            background-color: #f7f7f7 !important;
        }
    </style>
@endpush

@section('content')
    <div id="vue-element" class="ltv-page" v-cloak>
        {{-- Tiêu đề màn --}}
        <div class="ltv-header">
            <h1 class="ltv-title">LTV</h1>
        </div>

        {{-- Card nội dung: toolbar + bảng (tiêu đề màn nằm NGOÀI card) --}}
        <div class="ltv-card">
            {{-- Thanh công cụ: ◀ [date-picker năm] ▶ (trái) | nút toggle view (phải) --}}
            <div class="ltv-toolbar">
                <div class="ltv-toolbar-left">
                    <div class="ltv-period">
                        <button class="btn-calendar lme-flex lme-items-center lme-justify-center cursor-pointer" @click="shiftYear(-1)" :disabled="isLoading">
                            <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.292847 5.7063C-0.0976156 5.31584 -0.0976156 4.68173 0.292847 4.29127L4.29118 0.292933C4.57854 0.00555325 5.00649 -0.0787859 5.38133 0.0773973C5.75619 0.233582 5.99984 0.595932 5.99984 1.00201L5.99671 8.99868C5.99671 9.40163 5.75306 9.76711 5.37822 9.92329C5.00338 10.0795 4.57542 9.99201 4.28805 9.70776L0.289714 5.70942L0.292847 5.7063Z" fill="#888888"></path></svg>
                        </button>

                        {{-- Năm tài chính 4月始まり (BR-G5) — ô viền + icon lịch (lme-date-picker year) --}}
                        <lme-date-picker size="lg" type="year" format="YYYY年" width="150px"
                                         :clearable="false" :value="fiscalYearValue"
                                         @change="onYearPicked"></lme-date-picker>


                        <button class="btn-calendar lme-flex lme-items-center lme-justify-center cursor-pointer" @click="shiftYear(1)" :disabled="isLoading">
                            <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.70691 4.2937C6.09737 4.68416 6.09737 5.31827 5.70691 5.70873L1.70857 9.70707C1.42122 9.99445 0.993262 10.0788 0.618424 9.9226C0.243567 9.76642 -8.58307e-05 9.40407 -8.58307e-05 8.99799L0.00304747 1.00132C0.00304747 0.598365 0.2467 0.232893 0.621537 0.0767077C0.996375 -0.0794772 1.42433 0.00798634 1.71171 0.292243L5.71004 4.29058L5.70691 4.2937Z" fill="#888888"></path></svg>
                        </button>
                    </div>
                </div>

                {{-- Toggle view — nhãn theo view hiện tại (FN-3) --}}
                <lme-button-flat type="primary" size="lg" @click="toggleView" :disabled="isLoading">
                    <lme-icon file_name="swap-outlined" class="ltv-toggle-ic"></lme-icon>
                    <span style="font-weight: 400;font-size: 14px">@{{ toggleLabel }}</span>
                </lme-button-flat>
            </div>

            {{-- Vùng nội dung bảng --}}
            <div class="ltv-content">
                {{-- Loading --}}
                <div v-if="isLoading" class="ltv-loading">
                    <div class="ltv-spinner"></div>
                </div>

                {{-- Error (5xx/network) + 再試行 --}}
                <div v-else-if="error" class="ltv-error">
                    <p class="ltv-error-msg">@{{ error }}</p>
                    <lme-button-default type="secondary" size="md" @click="fetchData">再試行</lme-button-default>
                </div>

                {{-- View 全体数値 (overall) — 12 tháng năm tài chính --}}
                <div v-else-if="currentView === 'overall'" class="ltv-table-wrap">
                    <table class="ltv-table ltv-table--overall">
                        <thead>
                            <tr>
                                <th rowspan="2" class="ltv-th-month" style="width: 100px">月</th>
                                <th colspan="3" class="ltv-th-highlight">
                                    <span>LTV</span>
                                    <lme-tooltip content="ARPU × 継続月数" position="top" class_name="ltv-tooltip--light">
                                    <span>
                                        <svg width="14" height="14" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.00022 16.8755C4.65781 16.8755 1.125 13.3426 1.125 9.00022C1.125 4.65781 4.65781 1.125 9.00022 1.125C13.3426 1.125 16.8755 4.65781 16.8755 9.00022C16.8755 13.3426 13.3426 16.8755 9.00022 16.8755ZM9.00022 2.46049C5.39421 2.46049 2.46049 5.39421 2.46049 9.00022C2.46049 12.6057 5.39421 15.5389 9.00022 15.5389C12.6057 15.5389 15.5389 12.6057 15.5389 9.00022C15.5389 5.39421 12.6057 2.46049 9.00022 2.46049Z" fill="#1F1F1F"></path> <path d="M9.00023 13.5702C8.61221 13.5702 8.29654 13.255 8.29654 12.8675C8.29654 12.4795 8.61221 12.1638 9.00023 12.1638C9.38769 12.1638 9.7029 12.4795 9.7029 12.8675C9.7029 13.255 9.38769 13.5702 9.00023 13.5702ZM9.42041 11.039H8.57599C8.49838 11.039 8.43525 10.9758 8.43525 10.8982V10.5206C8.43525 10.1131 8.55966 9.70788 8.78558 9.37946C9.01305 9.05143 9.32956 8.80286 9.70088 8.66059C10.2999 8.43086 10.687 7.92932 10.687 7.38281C10.687 6.60734 9.93034 5.97645 9.00023 5.97645C8.06955 5.97645 7.31239 6.60734 7.31239 7.38281V7.51646C7.31239 7.59406 7.24925 7.6572 7.17165 7.6572H6.32824C6.25064 7.6572 6.1875 7.59406 6.1875 7.51646V7.38281C6.1875 6.69266 6.48955 6.04793 7.038 5.5674C7.56658 5.10578 8.26344 4.85156 9.00023 4.85156C9.73868 4.85156 10.4352 5.10579 10.9614 5.5674C11.5113 6.04824 11.813 6.69297 11.8109 7.38281C11.8109 8.39847 11.1409 9.31256 10.1038 9.71156C9.77924 9.83697 9.56115 10.1535 9.56115 10.4993V10.8982C9.56115 10.9758 9.49802 11.039 9.42041 11.039Z" fill="#1F1F1F"></path></svg>
                                    </span>
                                    </lme-tooltip>
                                </th>
                                <th colspan="3">
                                    <span>ARPU</span>
                                    <lme-tooltip content="月あたりの有料ユーザー平均売上" position="top" class_name="ltv-tooltip--light">
                                    <span>
                                        <svg width="14" height="14" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.00022 16.8755C4.65781 16.8755 1.125 13.3426 1.125 9.00022C1.125 4.65781 4.65781 1.125 9.00022 1.125C13.3426 1.125 16.8755 4.65781 16.8755 9.00022C16.8755 13.3426 13.3426 16.8755 9.00022 16.8755ZM9.00022 2.46049C5.39421 2.46049 2.46049 5.39421 2.46049 9.00022C2.46049 12.6057 5.39421 15.5389 9.00022 15.5389C12.6057 15.5389 15.5389 12.6057 15.5389 9.00022C15.5389 5.39421 12.6057 2.46049 9.00022 2.46049Z" fill="#1F1F1F"></path> <path d="M9.00023 13.5702C8.61221 13.5702 8.29654 13.255 8.29654 12.8675C8.29654 12.4795 8.61221 12.1638 9.00023 12.1638C9.38769 12.1638 9.7029 12.4795 9.7029 12.8675C9.7029 13.255 9.38769 13.5702 9.00023 13.5702ZM9.42041 11.039H8.57599C8.49838 11.039 8.43525 10.9758 8.43525 10.8982V10.5206C8.43525 10.1131 8.55966 9.70788 8.78558 9.37946C9.01305 9.05143 9.32956 8.80286 9.70088 8.66059C10.2999 8.43086 10.687 7.92932 10.687 7.38281C10.687 6.60734 9.93034 5.97645 9.00023 5.97645C8.06955 5.97645 7.31239 6.60734 7.31239 7.38281V7.51646C7.31239 7.59406 7.24925 7.6572 7.17165 7.6572H6.32824C6.25064 7.6572 6.1875 7.59406 6.1875 7.51646V7.38281C6.1875 6.69266 6.48955 6.04793 7.038 5.5674C7.56658 5.10578 8.26344 4.85156 9.00023 4.85156C9.73868 4.85156 10.4352 5.10579 10.9614 5.5674C11.5113 6.04824 11.813 6.69297 11.8109 7.38281C11.8109 8.39847 11.1409 9.31256 10.1038 9.71156C9.77924 9.83697 9.56115 10.1535 9.56115 10.4993V10.8982C9.56115 10.9758 9.49802 11.039 9.42041 11.039Z" fill="#1F1F1F"></path></svg>
                                    </span>
                                    </lme-tooltip>
                                </th>
                                <th colspan="3">
                                    <span>継続月数</span>
                                    <lme-tooltip content="1 ÷ 解約率" position="top" class_name="ltv-tooltip--light">
                                    <span>
                                        <svg width="14" height="14" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.00022 16.8755C4.65781 16.8755 1.125 13.3426 1.125 9.00022C1.125 4.65781 4.65781 1.125 9.00022 1.125C13.3426 1.125 16.8755 4.65781 16.8755 9.00022C16.8755 13.3426 13.3426 16.8755 9.00022 16.8755ZM9.00022 2.46049C5.39421 2.46049 2.46049 5.39421 2.46049 9.00022C2.46049 12.6057 5.39421 15.5389 9.00022 15.5389C12.6057 15.5389 15.5389 12.6057 15.5389 9.00022C15.5389 5.39421 12.6057 2.46049 9.00022 2.46049Z" fill="#1F1F1F"></path> <path d="M9.00023 13.5702C8.61221 13.5702 8.29654 13.255 8.29654 12.8675C8.29654 12.4795 8.61221 12.1638 9.00023 12.1638C9.38769 12.1638 9.7029 12.4795 9.7029 12.8675C9.7029 13.255 9.38769 13.5702 9.00023 13.5702ZM9.42041 11.039H8.57599C8.49838 11.039 8.43525 10.9758 8.43525 10.8982V10.5206C8.43525 10.1131 8.55966 9.70788 8.78558 9.37946C9.01305 9.05143 9.32956 8.80286 9.70088 8.66059C10.2999 8.43086 10.687 7.92932 10.687 7.38281C10.687 6.60734 9.93034 5.97645 9.00023 5.97645C8.06955 5.97645 7.31239 6.60734 7.31239 7.38281V7.51646C7.31239 7.59406 7.24925 7.6572 7.17165 7.6572H6.32824C6.25064 7.6572 6.1875 7.59406 6.1875 7.51646V7.38281C6.1875 6.69266 6.48955 6.04793 7.038 5.5674C7.56658 5.10578 8.26344 4.85156 9.00023 4.85156C9.73868 4.85156 10.4352 5.10579 10.9614 5.5674C11.5113 6.04824 11.813 6.69297 11.8109 7.38281C11.8109 8.39847 11.1409 9.31256 10.1038 9.71156C9.77924 9.83697 9.56115 10.1535 9.56115 10.4993V10.8982C9.56115 10.9758 9.49802 11.039 9.42041 11.039Z" fill="#1F1F1F"></path></svg>
                                    </span>
                                    </lme-tooltip>
                                </th>
                            </tr>
                            <tr>
                                {{-- 前月比 tách 2 CỘT (diff | ratio) theo design → header 前月比 colspan=2 --}}
                                <th class="ltv-th-highlight">金額</th><th colspan="2" class="ltv-th-highlight">前月比</th>
                                <th>金額</th><th colspan="2">前月比</th>
                                <th>月数</th><th colspan="2">前月比</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="row in rows" :key="row.month">
                                <td class="ltv-td-month">@{{ row.month }}</td>
                                <td>@{{ formatCurrency(row.ltv) }}</td>
                                {{-- 前月比 LTV (RESOLVED QA-spec-006/BR-05, TD v4): diff (금액) | ratio (%), 2 cột --}}
                                <td class="ltv-prev-diff">@{{ formatSignedAmount(row.ltv_diff) }}</td>
                                <td class="ltv-prev-ratio">@{{ formatPercent(row.ltv_ratio) }}</td>
                                <td>@{{ formatCurrency(row.arpu) }}</td>
                                <td class="ltv-prev-diff">@{{ formatSignedAmount(row.arpu_diff) }}</td>
                                <td class="ltv-prev-ratio">@{{ formatPercent(row.arpu_ratio) }}</td>
                                <td>@{{ formatMonths(row.continuation_months) }}</td>
                                {{-- 継続月数 前月比: diff format theo tháng (1 thập phân) --}}
                                <td class="ltv-prev-diff">@{{ formatSignedMonths(row.continuation_diff) }}</td>
                                <td class="ltv-prev-ratio">@{{ formatPercent(row.continuation_ratio) }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                {{-- View 経路別 (by_channel) — TD v5 (RESOLVED QA-spec-047/048/049/050): cột CỐ ĐỊNH 全体LTV (BR-08)
                     + kênh ĐỘNG theo path intro (channelColumns). Mỗi cột = 金額 + 前月比.
                     ⏳ QD-07b/QA-spec-021: 金額 per-path (amount) chưa có nguồn → render「-」; 全体LTV có dữ liệu thật. --}}
                <div v-else class="ltv-table-wrap">
                    <table class="ltv-table ltv-table--channel" :style="channelTableStyle">
                        <thead>
                            <tr>
                                <th rowspan="2" class="ltv-th-month" style="width: 100px">月</th>
                                {{-- Cột 全体LTV cố định đứng đầu (BR-08 — reuse LTV view 全体数値) --}}
                                <th colspan="3" class="ltv-th-highlight">全体LTV</th>
                                {{-- Cột kênh động (登録経路) — tên dài cắt「…」, hover xem đầy đủ qua tooltip --}}
                                <th v-for="col in channelColumns" :key="col.path_intro_id" colspan="3" class="ltv-th-channel">
                                    <lme-tooltip :content="col.path_intro_name" position="top" class_name="ltv-tooltip--light ltv-tooltip--wrap">
                                        <span class="ltv-th-channel-name">@{{ col.path_intro_name }}</span>
                                    </lme-tooltip>
                                </th>
                            </tr>
                            <tr>
                                {{-- 前月比 tách 2 CỘT (diff | ratio) theo design → header 前月比 colspan=2 --}}
                                <th class="ltv-th-highlight">金額</th><th colspan="2" class="ltv-th-highlight">前月比</th>
                                <template v-for="col in channelColumns">
                                    <th :key="col.path_intro_id + '-amt'">金額</th>
                                    <th :key="col.path_intro_id + '-rate'" colspan="2">前月比</th>
                                </template>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="row in rows" :key="row.month">
                                <td class="ltv-td-month">@{{ row.month }}</td>
                                {{-- 全体LTV (BR-08): 金額 = LTV view 全体数値 cùng tháng + 前月比 (dữ liệu thật) --}}
                                <td>@{{ formatCurrency(overallLtv(row, 'amount')) }}</td>
                                <td class="ltv-prev-diff">@{{ formatSignedAmount(overallLtv(row, 'prev_month_diff')) }}</td>
                                <td class="ltv-prev-ratio">@{{ formatPercent(overallLtv(row, 'prev_month_ratio')) }}</td>
                                {{-- Kênh động (BR-07 — 金額 per-path): amount + 前月比 ⏳ QD-07b → 「-」 --}}
                                <template v-for="col in channelColumns">
                                    <td :key="col.path_intro_id + '-amt'">
                                        @{{ formatCurrency(getChannelValue(row, col.path_intro_id, 'amount')) }}
                                    </td>
                                    <td :key="col.path_intro_id + '-diff'" class="ltv-prev-diff">
                                        @{{ formatSignedAmount(getChannelValue(row, col.path_intro_id, 'prev_month_diff')) }}
                                    </td>
                                    <td :key="col.path_intro_id + '-ratio'" class="ltv-prev-ratio">
                                        @{{ formatPercent(getChannelValue(row, col.path_intro_id, 'prev_month_ratio')) }}
                                    </td>
                                </template>
                            </tr>
                        </tbody>
                    </table>
                    {{-- Chưa có 登録経路 nào đăng ký → chỉ hiển thị cột 全体LTV (cột kênh trống). ⏳ P-4 (chưa có mockup). --}}
                    <p v-if="!channelColumns.length" class="ltv-empty">
                        登録経路がありません（全体LTVのみ表示）。
                    </p>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        window.LTV_DATA_URL = "{{ route('ltvData') }}";
    </script>
    <script src="/js/vue2.6.12/vue.js"></script>
    <script src="/lme-ui/src/js/icon/lme-icon.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/button/lme-button.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/button/lme-button-default.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/button/lme-button-flat.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/date-picker/lme-date-picker.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/tooltip/lme-tooltip.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/admin/revenue/ltv.js?v={{config('sns-line.version')}}"></script>
@endpush