@extends('layouts.app')

@section('content')
    <div id="live-analysis-page" x-data="liveAnalysisPage()">
        <x-layout.page-header
            title="Phân tích phiên live"
            iconFa="broadcast-tower"
            description="Upload file Excel danh sách phiên live để phân tích."
        >
            <x-slot name="meta">
                {{-- Chỉ creator đang được phân tích — hiển thị cạnh tiêu đề --}}
                <span class="live-analysis-creator-bar" x-show="selectedCreator && result" x-cloak>
                    <span class="live-analysis-creator-bar-text" x-text="selectedCreator"></span>
                    <button type="button" class="live-analysis-creator-clear" @@click="toggleCreator(selectedCreator)" title="Bỏ lọc" aria-label="Bỏ lọc">
                        @svg('fas-times')
                    </button>
                </span>
            </x-slot>
            <form id="live-analysis-upload-form" @@submit.prevent="handleUpload" class="analysis-header-form">
                @csrf
                {{-- Trạng thái chờ --}}
                <div class="analysis-dropzone-trigger"
                     x-show="!uploading && !fileSelected"
                     :class="{ 'drag-over': dragOver }"
                     @@dragover.prevent="dragOver = true"
                     @@dragleave.prevent="dragOver = false"
                     @@drop.prevent="handleDrop($event); dragOver = false">
                    <span class="analysis-trigger-icon">@svg('fas-cloud-upload-alt')</span>
                    <span class="analysis-trigger-text">Kéo thả hoặc chọn file</span>
                    <span class="analysis-trigger-hint">.xlsx .xls .csv — 20MB</span>
                    <label class="btn analysis-btn-upload">
                        @svg('fas-folder-open')
                        <span>Chọn file</span>
                        <input type="file" name="file" accept=".xlsx,.xls,.csv" @@change="handleFileSelect" hidden>
                    </label>
                </div>

                {{-- Trạng thái đã chọn file --}}
                <div class="analysis-file-info" x-show="fileSelected && !uploading" x-cloak>
                    <span class="analysis-file-badge">
                        @svg('fas-file-excel')
                        <span x-text="fileName"></span>
                        <span class="analysis-file-size" x-text="fileSize"></span>
                    </span>
                    <button type="submit" class="btn" :disabled="uploading">
                        @svg('fas-chart-bar')
                        <span>Phân tích</span>
                    </button>
                    <button type="button" class="btn" @@click="resetUpload" :disabled="uploading" title="Bỏ chọn">
                        @svg('fas-times')
                    </button>
                </div>

                {{-- Trạng thái đang xử lý --}}
                <div class="analysis-loading" x-show="uploading" x-cloak>
                    <span class="analysis-spin"></span>
                    <span>Đang xử lý...</span>
                </div>

                {{-- Nút xoá dữ liệu — bên phải cùng --}}
                <button type="button" class="btn btn-sm btn-ghost analysis-header-clear" @@click="clearData" x-show="result" x-cloak>
                    @svg('fas-trash-alt')
                    <span>Xoá dữ liệu</span>
                </button>
            </form>
        </x-layout.page-header>

        <div class="list-page-content">
            <p class="error-text" x-show="errorMessage" x-text="errorMessage" x-cloak></p>

            {{-- Các card tính toán phía trên — luôn hiển thị cấu trúc, có dữ liệu thì điền vào --}}
            <div class="list-page-stats-grid">
                <x-ui.cards type="card-grid-2x2" class="stat-kpi-card">
                    <x-slot name="item1"><div class="stat-label" data-tooltip="GMV đến từ khách đã nhấp vào link sản phẩm trong buổi LIVE và mua ngay hoặc mua sau đó. Bao gồm phí vận chuyển, đã trừ khuyến mãi và đồng chi trả của nền tảng; không trừ đơn hủy hoặc hoàn tiền.">GMV (VND)</div></x-slot>
                    <x-slot name="item2"><div class="stat-icon">💵</div></x-slot>
                    <x-slot name="item3"><div class="stat-value" x-text="formatLiveMoney(metrics.gmv)">0</div></x-slot>
                    <x-slot name="item4"><div class="stat-sub" x-text="subSessions()"></div></x-slot>
                </x-ui.cards>
                <x-ui.cards type="card-grid-2x2" class="stat-kpi-card">
                    <x-slot name="item1"><div class="stat-label" data-tooltip="GMV ròng = GMV − Hoàn tiền">GMV ròng (VND)</div></x-slot>
                    <x-slot name="item2"><div class="stat-icon">🪙</div></x-slot>
                    <x-slot name="item3"><div class="stat-value" x-text="formatLiveMoney(metrics.net_gmv)">0</div></x-slot>
                    <x-slot name="item4"><div class="stat-sub" x-text="subNetGmv()"></div></x-slot>
                </x-ui.cards>
                <x-ui.cards type="card-grid-2x2" class="stat-kpi-card">
                    <x-slot name="item1"><div class="stat-label" data-tooltip="Doanh thu thuần = GMV ròng − Hoa hồng">Doanh thu thuần (VND)</div></x-slot>
                    <x-slot name="item2"><div class="stat-icon">🏦</div></x-slot>
                    <x-slot name="item3"><div class="stat-value" x-text="formatLiveMoney(metrics.net_revenue)">0</div></x-slot>
                    <x-slot name="item4"><div class="stat-sub" x-text="subNetRevenue()"></div></x-slot>
                </x-ui.cards>
                <x-ui.cards type="card-grid-2x2" class="stat-kpi-card">
                    <x-slot name="item1"><div class="stat-label" data-tooltip="Tổng GMV chia cho tổng thời lượng LIVE (tính theo giờ)">GMV/giờ (VND)</div></x-slot>
                    <x-slot name="item2"><div class="stat-icon">⚡</div></x-slot>
                    <x-slot name="item3"><div class="stat-value" x-text="formatLiveMoney(metrics.gmv_hour)">0</div></x-slot>
                    <x-slot name="item4"><div class="stat-sub" x-text="subHours()"></div></x-slot>
                </x-ui.cards>
                <x-ui.cards type="card-grid-2x2" class="stat-kpi-card">
                    <x-slot name="item1"><div class="stat-label" data-tooltip="Đơn hàng từ khách đã nhấp vào link sản phẩm trong buổi LIVE và mua ngay hoặc mua sau đó.">Đơn hàng</div></x-slot>
                    <x-slot name="item2"><div class="stat-icon">🛒</div></x-slot>
                    <x-slot name="item3"><div class="stat-value" x-text="formatLiveNumber(metrics.orders)">0</div></x-slot>
                    <x-slot name="item4"><div class="stat-sub" x-text="subAov()"></div></x-slot>
                </x-ui.cards>
            </div>

            {{-- Tóm tắt kết quả đọc file — luôn hiển thị, chỉ có nội dung khi đã phân tích --}}
            

            {{-- 3 biểu đồ: phễu chuyển đổi, khung giờ, theo ngày — cùng hàng --}}
            <div class="analysis-charts-row">
                <x-ui.cards type="section-card" cardClass="list-page-card">
                    <x-slot name="header">
                        <div class="section-header-actions db-header-full">
                            <div class="db-panel-header-row">
                                <span class="db-panel-dot db-panel-dot--Cyan"></span>
                                <span class="db-panel-title">Phễu chuyển đổi</span>
                            </div>
                        </div>
                    </x-slot>
                    <div class="db-panel-inner">
                        <x-ui.funnel
                            steps="funnelSteps"
                            barWidth="funnelBarWidth"
                            formatValue="formatLiveNumber"
                        >
                            <x-slot name="metrics">
                                <div class="analysis-funnel-metric">
                                    <span class="analysis-funnel-metric-label">CTR sản phẩm</span>
                                    <span class="analysis-funnel-metric-value" x-text="formatRate(funnelMetrics.ctr)"></span>
                                </div>
                                <div class="analysis-funnel-metric">
                                    <span class="analysis-funnel-metric-label">Chuyển đổi từ click</span>
                                    <span class="analysis-funnel-metric-value" x-text="formatRate(funnelMetrics.click_conv)"></span>
                                </div>
                            </x-slot>
                        </x-ui.funnel>
                    </div>
                </x-ui.cards>
                <x-ui.cards type="section-card" cardClass="list-page-card">
                    <x-slot name="header">
                        <div class="section-header-actions db-header-full">
                            <div class="db-panel-header-row">
                                <span class="db-panel-dot db-panel-dot--amber"></span>
                                <span class="db-panel-title">Hiệu suất theo khung giờ</span>
                            </div>
                        </div>
                    </x-slot>
                    <div class="db-panel-inner">
                        <div class="db-cost-inner-row">
                            <div class="db-cost-chart-area">
                                <svg id="live-hour-chart-svg" class="db-chart-svg"></svg>
                                <div id="live-hour-chart-tooltip" class="db-chart-tooltip" style="display:none"></div>
                            </div>
                            <div id="live-hour-chart-legend" class="db-cost-types-panel"></div>
                        </div>
                    </div>
                </x-ui.cards>
                <x-ui.cards type="section-card" cardClass="list-page-card">
                    <x-slot name="header">
                        <div class="section-header-actions db-header-full">
                            <div class="db-panel-header-row">
                                <span class="db-panel-dot db-panel-dot--blue"></span>
                                <span class="db-panel-title">GMV / Đơn hàng theo ngày</span>
                            </div>
                        </div>
                    </x-slot>
                    <div class="db-panel-inner">
                        <div class="db-cost-inner-row">
                            <div class="db-cost-chart-area">
                                <svg id="live-daily-chart-svg" class="db-chart-svg"></svg>
                                <div id="live-daily-chart-tooltip" class="db-chart-tooltip" style="display:none"></div>
                            </div>
                            <div id="live-daily-chart-legend" class="db-cost-types-panel"></div>
                        </div>
                    </div>
                </x-ui.cards>
            </div>

{{-- 2 bảng song song: top creator & top tỷ lệ hoàn — mỗi bên 1 nửa --}}
            @php
                $liveTopGmvColumns = [
                    ['key' => 'stt', 'label' => 'STT', 'type' => 'text', 'cellClass' => 'col-center', 'widthClass' => 'col-xxs', 'truncate' => false],
                    ['key' => 'creator', 'label' => 'Creator', 'type' => 'creator_filter', 'cellClass' => 'col-left', 'widthClass' => 'col-sm', 'truncate' => false, 'title' => 'Bấm để phân tích toàn bộ trang theo creator này'],
                    ['key' => 'sessions', 'label' => 'Buổi', 'render' => 'formatLiveNumber(row.sessions)', 'cellClass' => 'col-center', 'widthClass' => 'col-xxs', 'truncate' => false, 'title' => 'Số buổi LIVE của nhà sáng tạo trong kỳ'],
                    ['key' => 'orders', 'label' => 'Đơn', 'render' => 'formatLiveNumber(row.orders)', 'cellClass' => 'col-right', 'widthClass' => 'col-xms', 'truncate' => false, 'title' => 'Đơn hàng từ khách đã nhấp vào link sản phẩm trong buổi LIVE của nhà sáng tạo và mua ngay hoặc mua sau đó. Một đơn hàng tương đương một quy trình thanh toán và có thể bao gồm nhiều món.'],
                    ['key' => 'aov', 'label' => 'AOV', 'render' => 'formatLiveMoney(row.aov)', 'cellClass' => 'col-right', 'widthClass' => 'col-xms', 'truncate' => false, 'title' => 'Giá trị trung bình mỗi đơn = GMV ÷ Đơn (chỉ tính khi có đơn)'],
                    ['key' => 'gmv', 'label' => 'GMV', 'render' => 'formatLiveMoney(row.gmv)', 'cellClass' => 'col-right', 'widthClass' => 'col-xms', 'truncate' => false, 'title' => 'GMV đến từ khách đã nhấp vào link sản phẩm trong buổi LIVE và mua ngay hoặc mua sau đó. Bao gồm phí vận chuyển, đã trừ khuyến mãi và đồng chi trả của nền tảng; không trừ đơn hủy hoặc hoàn tiền.'],
                    ['key' => 'gmv_hour', 'label' => 'GMV/giờ', 'render' => 'formatLiveMoney(row.gmv_hour)', 'cellClass' => 'col-right', 'widthClass' => 'col-xms', 'truncate' => false, 'title' => 'Tổng GMV chia cho tổng thời lượng LIVE (tính theo giờ)'],
                    ['key' => 'commission', 'label' => 'Hoa hồng', 'render' => 'formatLiveMoney(row.commission)', 'cellClass' => 'col-right', 'widthClass' => 'col-xs', 'truncate' => false, 'title' => 'Hoa hồng ước tính tính dựa trên các đơn hàng đã thanh toán, chưa thanh toán và hoàn tiền. Bao gồm hoa hồng tiêu chuẩn và hoa hồng Quảng cáo cửa hàng.'],
                    ['key' => 'commission_rate', 'label' => '% HH', 'render' => 'formatRate(row.commission_rate)', 'cellClass' => 'col-right', 'widthClass' => 'col-xms', 'truncate' => false, 'title' => 'Tỷ lệ hoa hồng = Hoa hồng ÷ GMV (chỉ tính khi có GMV)'],
                    ['key' => 'net_gmv', 'label' => 'GMV ròng', 'render' => 'formatLiveMoney(row.net_gmv)', 'cellClass' => 'col-right', 'widthClass' => 'col-xms', 'truncate' => false, 'title' => 'GMV ròng = GMV − Hoàn tiền'],
                ];

                $liveRefundRankingColumns = [
                    ['key' => 'stt', 'label' => 'STT', 'type' => 'index', 'cellClass' => 'col-center', 'widthClass' => 'col-xxs'],
                    ['key' => 'creator', 'label' => 'Creator', 'cellClass' => 'col-left', 'widthClass' => 'col-sm'],
                    ['key' => 'sessions', 'label' => 'Buổi', 'render' => 'formatLiveNumber(row.sessions)', 'cellClass' => 'col-center', 'widthClass' => 'col-xxs', 'truncate' => false, 'title' => 'Số buổi LIVE của nhà sáng tạo trong kỳ'],
                    ['key' => 'gmv', 'label' => 'GMV', 'render' => 'formatLiveMoney(row.gmv)', 'cellClass' => 'col-right', 'widthClass' => 'col-xms', 'truncate' => false, 'title' => 'GMV đến từ khách đã nhấp vào link sản phẩm trong buổi LIVE và mua ngay hoặc mua sau đó. Bao gồm phí vận chuyển, đã trừ khuyến mãi và đồng chi trả của nền tảng; không trừ đơn hủy hoặc hoàn tiền.'],
                    ['key' => 'refund', 'label' => 'Hoàn tiền', 'render' => 'formatLiveMoney(row.refund)', 'cellClass' => 'col-right', 'widthClass' => 'col-xms', 'truncate' => false, 'title' => 'Tổng số tiền hoàn từ đơn trả hàng hoặc đơn đã hủy. Vì tiền hoàn thường phát sinh sau khi hệ thống đã tính GMV, tiền hoàn và GMV thường không khớp trong mỗi giai đoạn đã chọn.'],
                    ['key' => 'refund_rate', 'label' => '% Hoàn', 'render' => 'formatRate(row.refund_rate)', 'cellClass' => 'col-right', 'widthClass' => 'col-xms', 'truncate' => false, 'title' => 'Tỷ lệ hoàn = Hoàn tiền ÷ GMV (chỉ tính khi có GMV)'],
                    ['key' => 'refund_rate', 'label' => 'Đánh giá', 'type' => 'html', 'render' => 'refundRateIcon(row.refund_rate, row.gmv)', 'cellClass' => 'col-center', 'widthClass' => 'col-xxs', 'truncate' => false, 'title' => '0–3%: Tốt · 4–8,99%: Cân nhắc · ≥9%: Cảnh báo'],
                ];
            @endphp
            <div class="analysis-tables-row">
                {{-- Bảng top creator theo GMV --}}
                <x-ui.cards type="section-card" cardClass="analysis-section-card-top analysis-card-half">
                    <x-slot name="header">
                        <div class="db-panel-header-row-full">
                            <span class="db-panel-dot db-panel-dot--emerald"></span>
                            <span class="db-panel-title">Top creator theo GMV</span>
                            <span class="analysis-legend">GMV/giờ: Tổng GMV chia cho tổng thời lượng LIVE · % HH: Hoa hồng chia GMV</span>
                        </div>
                    </x-slot>
                    <div class="analysis-top-table-body">
                        <x-ui.tabular
                            id="live-top-gmv-table"
                            tableClass="tabular-table analysis-top-table"
                            :columns="$liveTopGmvColumns"
                            rows="topCreators"
                            loading="false"
                            loadingText=""
                            emptyText="Chưa có dữ liệu — hãy tải lên file phân tích"
                            :sortable="false"
                            rowKey="creator"
                            rowClass="{ 'table-row-active': selectedCreator === row.creator }"
                        />
                    </div>
                </x-ui.cards>

                {{-- Bảng top tỷ lệ hoàn theo GMV --}}
                <x-ui.cards type="section-card" cardClass="analysis-section-card-top analysis-card-half">
                    <x-slot name="header">
                        <div class="db-panel-header-row-full">
                            <span class="db-panel-dot db-panel-dot--rose"></span>
                            <span class="db-panel-title">Top tỷ lệ hoàn theo GMV</span>
                            <span class="analysis-legend">Tỷ lệ hoàn: Hoàn tiền chia GMV, xếp giảm dần · Đánh giá: <span style="color:#16a34a">&check;</span> 0–3% · <span style="color:#f59e0b">&#9888;&#65039;</span> 4–8,99% · <span style="color:#dc2626">&cross;</span> ≥9%</span>
                        </div>
                    </x-slot>
                    <div class="analysis-top-table-body">
                        <x-ui.tabular
                            id="live-refund-ranking-table"
                            tableClass="tabular-table analysis-top-table"
                            :columns="$liveRefundRankingColumns"
                            rows="refundRanking"
                            loading="false"
                            loadingText=""
                            emptyText="Chưa có dữ liệu — hãy tải lên file phân tích"
                            :sortable="false"
                            rowKey="creator"
                        />
                    </div>
                </x-ui.cards>
            </div>

            {{-- 2 bảng song song: top tương tác & top hiệu suất hiển thị sản phẩm — mỗi bên 1 nửa --}}
            @php
                $liveEngagementColumns = [
                    ['key' => 'stt', 'label' => 'STT', 'type' => 'index', 'cellClass' => 'col-center', 'widthClass' => 'col-xxs'],
                    ['key' => 'creator', 'label' => 'Creator', 'cellClass' => 'col-left', 'widthClass' => 'col-sm'],
                    ['key' => 'sessions', 'label' => 'Buổi', 'render' => 'formatLiveNumber(row.sessions)', 'cellClass' => 'col-center', 'widthClass' => 'col-xxs', 'truncate' => false, 'title' => 'Số buổi LIVE của nhà sáng tạo trong kỳ'],
                    ['key' => 'likes', 'label' => 'Thích', 'render' => 'formatLiveNumber(row.likes)', 'cellClass' => 'col-right', 'widthClass' => 'col-xms', 'truncate' => false, 'title' => 'Số lượt thích buổi LIVE nhận được trong khoảng thời gian đã chọn.'],
                    ['key' => 'comments', 'label' => 'BL', 'render' => 'formatLiveNumber(row.comments)', 'cellClass' => 'col-right', 'widthClass' => 'col-xms', 'truncate' => false, 'title' => 'Số lần người dùng bình luận trong buổi LIVE trong khoảng thời gian đã chọn.'],
                    ['key' => 'shares', 'label' => 'Chia', 'render' => 'formatLiveNumber(row.shares)', 'cellClass' => 'col-right', 'widthClass' => 'col-xms', 'truncate' => false, 'title' => 'Tổng số lần buổi LIVE được chia sẻ trong khoảng thời gian đã chọn.'],
                    ['key' => 'interactions', 'label' => 'Tương tác', 'render' => 'formatLiveNumber(row.interactions)', 'cellClass' => 'col-right', 'widthClass' => 'col-xms', 'truncate' => false, 'title' => 'Tương tác = Lượt thích + Bình luận + Chia sẻ'],
                    ['key' => 'engagement_rate', 'label' => 'Tỷ lệ tương tác', 'render' => 'formatRate(row.engagement_rate)', 'cellClass' => 'col-right', 'widthClass' => 'col-xs', 'truncate' => false, 'title' => 'Tỷ lệ tương tác trung bình có trọng số = Tổng tương tác ÷ Tổng lượt xem ước tính (mỗi phiên = Tương tác ÷ Tỷ lệ tương tác trong file)'],
                ];

                $liveProductColumns = [
                    ['key' => 'stt', 'label' => 'STT', 'type' => 'index', 'cellClass' => 'col-center', 'widthClass' => 'col-xxs'],
                    ['key' => 'creator', 'label' => 'Creator', 'cellClass' => 'col-left', 'widthClass' => 'col-sm'],
                    ['key' => 'sessions', 'label' => 'Buổi', 'render' => 'formatLiveNumber(row.sessions)', 'cellClass' => 'col-center', 'widthClass' => 'col-xxs', 'truncate' => false, 'title' => 'Số buổi LIVE của nhà sáng tạo trong kỳ'],
                    ['key' => 'product_imp', 'label' => 'Hiển thị SP', 'render' => 'formatLiveNumber(row.product_imp)', 'cellClass' => 'col-right', 'widthClass' => 'col-xms', 'truncate' => false, 'title' => 'Số lần sản phẩm hiển thị với khách hàng trong buổi LIVE của người bán hoặc nhà sáng tạo.'],
                    ['key' => 'product_clicks', 'label' => 'Click SP', 'render' => 'formatLiveNumber(row.product_clicks)', 'cellClass' => 'col-right', 'widthClass' => 'col-xms', 'truncate' => false, 'title' => 'Số lượt xem độc nhất mỗi ngày trên trang chi tiết sản phẩm khi người xem nhấp vào link sản phẩm trong buổi LIVE này.'],
                    ['key' => 'product_viewers', 'label' => 'Xem SP', 'render' => 'formatLiveNumber(row.product_viewers)', 'cellClass' => 'col-right', 'widthClass' => 'col-xms', 'truncate' => false, 'title' => 'Số người xem độc nhất đã xem sản phẩm sau khi nhấp vào link sản phẩm trong buổi LIVE. Mỗi người xem tính một lượt ghi nhận, ngay cả khi xem nhiều lần.'],
                    ['key' => 'ctr', 'label' => 'CTR SP', 'render' => 'formatRate(row.ctr)', 'cellClass' => 'col-right', 'widthClass' => 'col-xs', 'truncate' => false, 'title' => 'Tỷ lệ nhấp = Số lượt nhấp vào sản phẩm ÷ Lượt hiển thị sản phẩm trong LIVE'],
                ];
            @endphp
            <div class="analysis-tables-row">
                {{-- Bảng top tương tác LIVE --}}
                <x-ui.cards type="section-card" cardClass="analysis-section-card-top analysis-card-half">
                    <x-slot name="header">
                        <div class="db-panel-header-row-full">
                            <span class="db-panel-dot db-panel-dot--purple"></span>
                            <span class="db-panel-title">Top tương tác LIVE</span>
                            <span class="analysis-legend">Tương tác: thích + bình luận + chia sẻ · Tỷ lệ: TB có trọng số = Tương tác ÷ lượt xem ước tính</span>
                        </div>
                    </x-slot>
                    <div class="analysis-top-table-body">
                        <x-ui.tabular
                            id="live-engagement-table"
                            tableClass="tabular-table analysis-top-table"
                            :columns="$liveEngagementColumns"
                            rows="engagementRanking"
                            loading="false"
                            loadingText=""
                            emptyText="Chưa có dữ liệu — hãy tải lên file phân tích"
                            :sortable="false"
                            rowKey="creator"
                        />
                    </div>
                </x-ui.cards>

                {{-- Bảng top hiệu suất hiển thị sản phẩm theo KOC --}}
                <x-ui.cards type="section-card" cardClass="analysis-section-card-top analysis-card-half">
                    <x-slot name="header">
                        <div class="db-panel-header-row-full">
                            <span class="db-panel-dot db-panel-dot--amber"></span>
                            <span class="db-panel-title">Top hiệu suất hiển thị sản phẩm</span>
                        </div>
                    </x-slot>
                    <div class="analysis-top-table-body">
                        <x-ui.tabular
                            id="live-product-table"
                            tableClass="tabular-table analysis-top-table"
                            :columns="$liveProductColumns"
                            rows="productRanking"
                            loading="false"
                            loadingText=""
                            emptyText="Chưa có dữ liệu — hãy tải lên file phân tích"
                            :sortable="false"
                            rowKey="creator"
                        />
                    </div>
                </x-ui.cards>
            </div>

            {{-- Bảng chi tiết từng buổi LIVE — toàn màn hình, dùng x-ui.tabular --}}
            @php
                $liveSessionColumns = [
                    ['key' => 'live_id', 'label' => 'ID buổi LIVE', 'cellClass' => 'col-left', 'widthClass' => 'col-mid', 'truncate' => true],
                    ['key' => 'creator', 'label' => 'Creator', 'cellClass' => 'col-left', 'widthClass' => 'col-mid', 'truncate' => true],
                    ['key' => 'start_raw', 'label' => 'Bắt đầu', 'cellClass' => 'col-left', 'widthClass' => 'col-mid', 'truncate' => true],
                    ['key' => 'end_raw', 'label' => 'Kết thúc', 'cellClass' => 'col-left', 'widthClass' => 'col-mid', 'truncate' => true],
                    ['key' => 'duration_min', 'label' => 'Thời lượng', 'cellClass' => 'col-right', 'widthClass' => 'col-xs', 'truncate' => false, 'render' => 'formatDuration(row.duration_min)', 'title' => 'Khoảng thời gian từ lúc bắt đầu đến lúc kết thúc buổi LIVE'],
                    ['key' => 'avg_view', 'label' => 'Xem TB', 'cellClass' => 'col-right', 'widthClass' => 'col-xs', 'truncate' => false, 'title' => 'Thời gian xem trung bình mỗi người dùng cho buổi LIVE này'],
                    ['key' => 'gmv_hour', 'label' => 'GMV/giờ', 'cellClass' => 'col-right', 'widthClass' => 'col-xs', 'truncate' => false, 'render' => 'formatLiveMoney(row.gmv_hour)', 'title' => 'Tổng GMV chia cho tổng thời lượng LIVE (tính theo giờ)'],
                    ['key' => 'gmv', 'label' => 'GMV', 'cellClass' => 'col-right', 'widthClass' => 'col-xs', 'truncate' => false, 'render' => 'formatLiveMoney(row.gmv)', 'title' => 'GMV đến từ khách đã nhấp vào link sản phẩm trong buổi LIVE và mua ngay hoặc mua sau đó. Bao gồm phí vận chuyển, đã trừ khuyến mãi và đồng chi trả của nền tảng; không trừ đơn hủy hoặc hoàn tiền.'],
                    ['key' => 'orders', 'label' => 'Đơn', 'cellClass' => 'col-right', 'widthClass' => 'col-xxs', 'truncate' => false, 'render' => 'formatLiveNumber(row.orders)', 'title' => 'Đơn hàng từ khách đã nhấp vào link sản phẩm trong buổi LIVE và mua ngay hoặc mua sau đó. Một đơn hàng tương đương một quy trình thanh toán và có thể bao gồm nhiều món.'],
                    ['key' => 'gpm', 'label' => 'GPM', 'cellClass' => 'col-right', 'widthClass' => 'col-xs', 'truncate' => false, 'render' => 'formatLiveMoney(row.gpm)', 'title' => 'GPM hiển thị là trung bình GMV đến từ mỗi 1.000 lượt hiển thị của buổi LIVE'],
                    ['key' => 'ctr', 'label' => 'CTR', 'cellClass' => 'col-right', 'widthClass' => 'col-xs', 'truncate' => false, 'render' => 'formatRate(row.ctr)', 'title' => 'Tỷ lệ nhấp = Số lượt nhấp vào sản phẩm ÷ Lượt hiển thị sản phẩm trong LIVE'],
                    ['key' => 'refund_rate', 'label' => '% Hoàn', 'cellClass' => 'col-right', 'widthClass' => 'col-xs', 'truncate' => false, 'render' => 'formatRate(row.refund_rate)', 'title' => 'Tỷ lệ hoàn = Hoàn tiền ÷ GMV (chỉ tính khi có GMV)'],
                    ['key' => 'cvr_click', 'label' => 'CVR click', 'cellClass' => 'col-right', 'widthClass' => 'col-xs', 'truncate' => false, 'render' => 'formatRate(row.cvr_click)', 'title' => 'Chuyển đổi từ lượt nhấp = Đơn hàng ÷ Lượt nhấp vào sản phẩm'],
                    ['key' => 'commission', 'label' => 'Hoa hồng', 'cellClass' => 'col-right', 'widthClass' => 'col-xs', 'truncate' => false, 'render' => 'formatLiveMoney(row.commission)', 'title' => 'Hoa hồng ước tính tính dựa trên các đơn hàng đã thanh toán, chưa thanh toán và hoàn tiền. Bao gồm hoa hồng tiêu chuẩn và hoa hồng Quảng cáo cửa hàng.'],
                ];
            @endphp
            <div class="analysis-order-detail-section">
                <x-ui.cards type="section-card" title="Chi tiết từng buổi LIVE" cardClass="list-page-card">
                    <x-slot name="header">
                        <div class="section-header-actions">
                            <span class="analysis-order-count" x-show="sessionDetails.length > 0" x-cloak>
                                <span x-text="filteredSessionDetails.length"></span>/<span x-text="sessionDetails.length"></span> buổi
                            </span>
                            <div class="filter-search-inline">
                                <div class="search-input-icon search-input-icon--action" @@click="applySearchCreator()">
                                    @svg('fas-search', 'search-icon')
                                </div>
                                <input type="text" placeholder="Tìm Creator" class="search-input" x-model="orderSearchCreatorInput" @@keydown="applySearchCreatorOnEnter($event)">
                            </div>
                            <div class="filter-date-range">
                                <input type="date" class="filter-date-input" x-model="orderDateFrom" placeholder="Từ ngày">
                                <span class="filter-date-sep">→</span>
                                <input type="date" class="filter-date-input" x-model="orderDateTo" placeholder="Đến ngày">
                            </div>
                            <x-ui.buttons type="button" variant="ghost" iconFa="undo" title="Đặt lại" @click="resetOrderFilters()" />
                        </div>
                    </x-slot>
                    <x-ui.tabular
                        id="live-session-detail-table"
                        :columns="$liveSessionColumns"
                        rows="filteredSessionDetails"
                        :sortable="false"
                        loadingText=""
                        emptyText="Chưa có dữ liệu — hãy tải lên file phân tích"
                        rowKey="live_id"
                    />
                </x-ui.cards>
            </div>
        </div>
    </div>
@endsection