{{--
    Nội dung báo cáo thống kê doanh thu (/statistics) - được nạp lại bằng AJAX mỗi lần lọc (#gridForm).
    Bố cục: 4 thẻ KPI -> nguồn tiền -> biểu đồ theo ngày -> lưới biểu đồ cơ cấu (doughnut) -> thực thu theo tháng.
    Biểu đồ dùng Chart.js (public/js/chart.min.js, nạp 1 lần ở statistics/index.blade.php).
--}}
@php
    // ===== Số liệu tổng hợp (giữ nguyên công thức như giao diện cũ) =====
    $totalOrders   = $data['orders'] + $wallets['orders'];
    $comboOrders   = $data['orders'] - $products['orders'] - $services['orders'];
    $totalSales    = $data['all_total'] + $wallets['revenue'];
    $actualIncome  = $data['payment'] + $wallets['payment'] - $wallets['used'];
    $revenueOnly   = $data['payment'] - $wallets['used'] - $data['is_debt'];
    $remainingDebt = $data['all_total'] - $data['gross_revenue'];
    $arrivalRate   = !empty($schedules['all_schedules']) ? round($schedules['become'] / $schedules['all_schedules'] * 100, 1) : 0;
    $paymentSources = [
        ['label' => 'Tiền mặt',     'value' => (int) $list_payment['money'], 'icon' => 'fas fa-money-bill-wave'],
        ['label' => 'Thẻ',          'value' => (int) $list_payment['card'],  'icon' => 'far fa-credit-card'],
        ['label' => 'Chuyển khoản', 'value' => (int) $list_payment['CK'],    'icon' => 'fas fa-university'],
        ['label' => 'Tiêu từ ví',   'value' => (int) $wallets['used'],       'icon' => 'fas fa-wallet'],
    ];
    $paymentMax = max(1, max(array_column($paymentSources, 'value')));

    // ===== Dữ liệu biểu đồ (label/value) truyền sang JS bằng @json để không vỡ chuỗi có dấu nháy =====
    $pairs = function ($rows, $labelKey, $valueKey) {
        $out = ['labels' => [], 'values' => []];
        foreach ($rows as $row) {
            // data_get đọc được cả array, stdClass lẫn Eloquent Model ((array) $model trả về thuộc tính protected, không phải cột)
            $out['labels'][] = (string) data_get($row, $labelKey, '');
            $out['values'][] = (float) data_get($row, $valueKey, 0);
        }
        return $out;
    };
    $charts = [
        'source'   => array_merge(['title' => 'Doanh thu theo nguồn'], $pairs($statusRevenues, 'name', 'revenue')),
        'status'   => array_merge(['title' => 'Khách hàng mới theo trạng thái', 'unit' => 'KH'], $pairs($data['statusCustomer'], 'name', 'total')),
        'orderType'=> ['title' => 'Doanh thu theo loại đơn', 'labels' => ['Sản phẩm', 'Dịch vụ', 'Sản phẩm & Dịch vụ'],
                       'values' => [(float) $products['gross_revenue'], (float) $services['gross_revenue'], (float) $services['combo_gross']]],
        'gender'   => array_merge(['title' => 'Doanh thu theo giới tính'], $pairs($revenue_gender ?: [], 'name', 'all_total')),
        'customer' => ['title' => 'Thực thu theo loại khách hàng', 'labels' => ['Khách hàng mới', 'Khách hàng cũ'],
                       'values' => [(float) $revenue['revenueNew'], (float) $revenue['revenueOld']]],
    ];
    if (count($data['category_product'])) {
        $charts['product'] = array_merge(['title' => 'Top 5 sản phẩm bán chạy', 'unit' => 'SP'], $pairs($data['category_product'], 'name', 'total'));
    }
    if (count($revenue_locale)) {
        $charts['locale'] = array_merge(['title' => 'Top 5 tỉnh doanh thu cao nhất'], $pairs($revenue_locale, 'name', 'total'));
    }
    $daily = ['labels' => [], 'sales' => [], 'income' => []];
    foreach ($data['revenue_month'] as $item) {
        $daily['labels'][] = substr($item->payment_date, -2);
        $daily['sales'][]  = (float) ($item->order_month + $item->wallet_month);
        $daily['income'][] = (float) ($item->payment_revenue + $item->payment_wallet_month);
    }
    $yearly = ['labels' => [], 'values' => []];
    foreach ($revenue_year as $item) {
        $yearly['labels'][] = 'Tháng ' . $item->month;
        $yearly['values'][] = (float) $item->all_total;
    }
    $chartIcons = ['source' => 'fas fa-bullhorn', 'status' => 'fas fa-user-tag', 'orderType' => 'fas fa-boxes',
                   'product' => 'fas fa-star', 'locale' => 'fas fa-map-marker-alt', 'gender' => 'fas fa-venus-mars',
                   'customer' => 'fas fa-user-friends'];
@endphp

<div class="crm-stats">
    {{-- ===== KPI chính ===== --}}
    <div class="crm-stats__kpis">
        <div class="crm-stats__kpi crm-stats__kpi--violet">
            <div class="crm-stats__kpi-head">
                <span class="crm-stats__kpi-icon"><i class="fas fa-user-plus"></i></span>
                <span class="crm-stats__kpi-label">Khách hàng mới</span>
            </div>
            <div class="crm-stats__kpi-value">{{ number_format($data['customers']) }}</div>
            <ul class="crm-stats__kpi-list">
                <li><span>Lịch hẹn</span><b>{{ number_format($schedules['all_schedules']) }}</b></li>
                <li><span>Khách đến</span><b>{{ number_format($schedules['become']) }}</b></li>
                <li><span>Tỷ lệ đến</span><b>{{ $arrivalRate }}%</b></li>
            </ul>
        </div>

        <div class="crm-stats__kpi crm-stats__kpi--blue">
            <div class="crm-stats__kpi-head">
                <span class="crm-stats__kpi-icon"><i class="fas fa-receipt"></i></span>
                <span class="crm-stats__kpi-label">Tổng số đơn hàng</span>
            </div>
            <div class="crm-stats__kpi-value">{{ number_format($totalOrders) }}</div>
            <ul class="crm-stats__kpi-list crm-stats__kpi-list--grid">
                <li><span>Buổi lẻ</span><b>{{ number_format($data['order_single']) }}</b></li>
                <li><span>Liệu trình</span><b>{{ number_format($data['order_multiple']) }}</b></li>
                <li><span>Sản phẩm</span><b>{{ number_format($products['orders']) }}</b></li>
                <li><span>Dịch vụ</span><b>{{ number_format($services['orders']) }}</b></li>
                <li><span>Combo</span><b>{{ number_format($comboOrders) }}</b></li>
                <li><span>Nạp ví</span><b>{{ number_format($wallets['orders']) }}</b></li>
            </ul>
        </div>

        <div class="crm-stats__kpi crm-stats__kpi--amber">
            <div class="crm-stats__kpi-head">
                <span class="crm-stats__kpi-icon"><i class="fas fa-chart-line"></i></span>
                <span class="crm-stats__kpi-label">Tổng doanh số</span>
            </div>
            <div class="crm-stats__kpi-value">{{ number_format($totalSales) }}<small>VNĐ</small></div>
            <ul class="crm-stats__kpi-list">
                <li><span>Sản phẩm</span><b>{{ number_format($products['all_total']) }}</b></li>
                <li><span>Dịch vụ</span><b>{{ number_format($services['all_total']) }}</b></li>
                <li><span>S.phẩm & D.vụ</span><b>{{ number_format($services['combo_total']) }}</b></li>
                <li><span>Nạp ví</span><b>{{ number_format($wallets['revenue']) }}</b></li>
            </ul>
        </div>

        <div class="crm-stats__kpi crm-stats__kpi--green">
            <div class="crm-stats__kpi-head">
                <span class="crm-stats__kpi-icon"><i class="fas fa-hand-holding-usd"></i></span>
                <span class="crm-stats__kpi-label">Thực thu</span>
            </div>
            <div class="crm-stats__kpi-value">{{ number_format($actualIncome) }}<small>VNĐ</small></div>
            <ul class="crm-stats__kpi-list">
                <li><span>Doanh thu</span><b>{{ number_format($revenueOnly) }}</b></li>
                <li><span>Thu nợ</span><b>{{ number_format($data['is_debt']) }}</b></li>
                <li><span>Nạp ví</span><b>{{ number_format($wallets['payment']) }}</b></li>
                <li class="is-danger"><span>Còn nợ</span><b>{{ number_format($remainingDebt) }}</b></li>
            </ul>
        </div>
    </div>

    {{-- ===== Nguồn tiền từ đơn hàng ===== --}}
    <div class="crm-stats__panel">
        <div class="crm-stats__panel-head">
            <h4><i class="fas fa-coins"></i> Nguồn tiền từ đơn hàng</h4>
            <span class="crm-stats__panel-total">{{ number_format($data['payment']) }} <small>VNĐ</small></span>
        </div>
        <div class="crm-stats__sources">
            @foreach($paymentSources as $src)
                <div class="crm-stats__source">
                    <span class="crm-stats__source-icon"><i class="{{ $src['icon'] }}"></i></span>
                    <div class="crm-stats__source-body">
                        <div class="crm-stats__source-row"><span>{{ $src['label'] }}</span><b>{{ number_format($src['value']) }}</b></div>
                        <span class="crm-stats__source-bar"><span style="width: {{ round($src['value'] / $paymentMax * 100, 1) }}%"></span></span>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    {{-- ===== Doanh số & doanh thu theo ngày ===== --}}
    <div class="crm-stats__panel">
        <div class="crm-stats__panel-head">
            <h4><i class="far fa-calendar-alt"></i> Doanh số & doanh thu theo ngày</h4>
        </div>
        <div class="crm-stats__canvas crm-stats__canvas--tall"><canvas id="stat-chart-daily"></canvas></div>
    </div>

    {{-- ===== Cơ cấu (doughnut) ===== --}}
    <div class="crm-stats__grid">
        @foreach($charts as $key => $chart)
            <div class="crm-stats__panel crm-stats__panel--chart">
                <div class="crm-stats__panel-head">
                    <h4><i class="{{ $chartIcons[$key] ?? 'fas fa-chart-pie' }}"></i> {{ $chart['title'] }}</h4>
                </div>
                @if(array_sum($chart['values']) > 0)
                    <div class="crm-stats__canvas"><canvas id="stat-chart-{{ $key }}"></canvas></div>
                @else
                    <div class="crm-stats__empty"><i class="fas fa-chart-pie"></i> Chưa có dữ liệu</div>
                @endif
            </div>
        @endforeach
    </div>

    {{-- ===== Thực thu theo tháng trong năm ===== --}}
    <div class="crm-stats__panel">
        <div class="crm-stats__panel-head">
            <h4><i class="fas fa-chart-bar"></i> Thực thu trong năm hiện tại</h4>
        </div>
        <div class="crm-stats__canvas crm-stats__canvas--tall"><canvas id="stat-chart-yearly"></canvas></div>
    </div>
</div>

<script>
    (function () {
        if (!window.Chart) {
            return;
        }
        var charts = @json($charts);
        var daily = @json($daily);
        var yearly = @json($yearly);

        // Huỷ biểu đồ của lần lọc trước (nội dung được thay bằng AJAX) để không rò rỉ bộ nhớ / trùng canvas
        (window.__crmStatCharts || []).forEach(function (c) { c.destroy(); });
        window.__crmStatCharts = [];

        var PALETTE = ['#7C3AED', '#0EA5E9', '#10B981', '#F59E0B', '#EF4444', '#EC4899', '#14B8A6', '#6366F1', '#84CC16', '#F97316'];
        var fmt = function (v) { return Number(v || 0).toLocaleString('vi-VN'); };
        var short = function (v) {
            v = Number(v || 0);
            if (Math.abs(v) >= 1e9) return (v / 1e9).toLocaleString('vi-VN', {maximumFractionDigits: 1}) + ' tỷ';
            if (Math.abs(v) >= 1e6) return (v / 1e6).toLocaleString('vi-VN', {maximumFractionDigits: 1}) + ' tr';
            if (Math.abs(v) >= 1e3) return (v / 1e3).toLocaleString('vi-VN', {maximumFractionDigits: 0}) + 'k';
            return fmt(v);
        };

        Chart.defaults.font.family = getComputedStyle(document.body).fontFamily;
        Chart.defaults.color = '#64748b';

        // Plugin nhỏ: in tổng ở giữa biểu đồ doughnut
        var centerTotal = {
            id: 'crmCenterTotal',
            afterDraw: function (chart) {
                if (chart.config.type !== 'doughnut') return;
                var meta = chart.getDatasetMeta(0);
                if (!meta.data.length) return;
                var total = chart.data.datasets[0].data.reduce(function (a, b) { return a + Number(b || 0); }, 0);
                var p = meta.data[0], ctx = chart.ctx;
                ctx.save();
                ctx.textAlign = 'center';
                ctx.fillStyle = '#0f172a';
                ctx.font = '700 16px ' + Chart.defaults.font.family;
                var unit = chart.config.options.crmUnit;
                ctx.fillText(unit ? fmt(total) : short(total), p.x, p.y + 2);
                ctx.fillStyle = '#94a3b8';
                ctx.font = '500 11px ' + Chart.defaults.font.family;
                ctx.fillText(unit || 'Tổng', p.x, p.y + 18);
                ctx.restore();
            }
        };

        var make = function (id, config) {
            var el = document.getElementById(id);
            if (!el) return;
            window.__crmStatCharts.push(new Chart(el, config));
        };

        // --- Doughnut cơ cấu ---
        Object.keys(charts).forEach(function (key) {
            var c = charts[key];
            make('stat-chart-' + key, {
                type: 'doughnut',
                data: {
                    labels: c.labels,
                    datasets: [{data: c.values, backgroundColor: PALETTE, borderColor: '#fff', borderWidth: 2, hoverOffset: 6}]
                },
                options: {
                    maintainAspectRatio: false,
                    cutout: '64%',
                    crmUnit: c.unit || null,
                    plugins: {
                        legend: {position: 'right', labels: {boxWidth: 10, boxHeight: 10, usePointStyle: true, padding: 12}},
                        tooltip: {
                            callbacks: {
                                label: function (item) {
                                    var sum = item.dataset.data.reduce(function (a, b) { return a + Number(b || 0); }, 0);
                                    var pct = sum ? (item.parsed / sum * 100).toFixed(1) : 0;
                                    return ' ' + item.label + ': ' + fmt(item.parsed) + (c.unit ? ' ' + c.unit : ' VNĐ') + ' (' + pct + '%)';
                                }
                            }
                        }
                    }
                },
                plugins: [centerTotal]
            });
        });

        // --- Doanh số (cột) & doanh thu (đường) theo ngày ---
        make('stat-chart-daily', {
            type: 'bar', // biểu đồ kết hợp: type gốc là bar, dataset 'Doanh thu' tự khai báo type line
            data: {
                labels: daily.labels,
                datasets: [
                    {type: 'bar', label: 'Doanh số', data: daily.sales, backgroundColor: 'rgba(124, 58, 237, 0.75)', borderRadius: 6, maxBarThickness: 28, order: 2},
                    {type: 'line', label: 'Doanh thu', data: daily.income, borderColor: '#10B981', backgroundColor: 'rgba(16, 185, 129, 0.12)',
                        fill: true, tension: 0.35, pointRadius: 3, pointBackgroundColor: '#10B981', order: 1}
                ]
            },
            options: {
                maintainAspectRatio: false,
                interaction: {mode: 'index', intersect: false},
                scales: {
                    x: {grid: {display: false}, title: {display: true, text: 'Ngày'}},
                    y: {beginAtZero: true, grid: {color: '#eef2f7'}, ticks: {callback: short}}
                },
                plugins: {
                    legend: {position: 'top', align: 'end', labels: {usePointStyle: true, boxWidth: 8}},
                    tooltip: {callbacks: {label: function (i) { return ' ' + i.dataset.label + ': ' + fmt(i.parsed.y) + ' VNĐ'; }}}
                }
            }
        });

        // --- Thực thu theo tháng ---
        make('stat-chart-yearly', {
            type: 'bar',
            data: {
                labels: yearly.labels,
                datasets: [{label: 'Thực thu', data: yearly.values, backgroundColor: 'rgba(14, 165, 233, 0.8)', borderRadius: 8, maxBarThickness: 40}]
            },
            options: {
                maintainAspectRatio: false,
                scales: {
                    x: {grid: {display: false}},
                    y: {beginAtZero: true, grid: {color: '#eef2f7'}, ticks: {callback: short}}
                },
                plugins: {
                    legend: {display: false},
                    tooltip: {callbacks: {label: function (i) { return ' Thực thu: ' + fmt(i.parsed.y) + ' VNĐ'; }}}
                }
            }
        });
    })();
</script>