{{--
    Báo cáo thu & duyệt chi (/chart-pay) - nạp lại bằng AJAX khi lọc (#gridForm).
    Bố cục đồng bộ màn /statistics (.crm-stats trong public/css/crm-2026/statistics.css):
    3 thẻ KPI (Thực thu / Tổng chi / Còn lại) -> biểu đồ cơ cấu -> duyệt chi theo chi nhánh.
--}}
@php
    // Giữ nguyên công thức của giao diện cũ. Bản cũ dùng @number_format(...) nên khoá nào controller không trả
    // (vd 'used', 'wallet_payment') được coi là 0 -> chuẩn hoá tương tự để không lỗi "Undefined index".
    $data = array_merge(['payment' => 0, 'wallet_payment' => 0, 'used' => 0], (array) $data);
    $list_payment = array_merge(['money' => 0, 'CK' => 0, 'card' => 0], (array) $list_payment);
    $list_pay = array_merge(['money' => 0, 'CK' => 0, 'card' => 0], (array) $list_pay);
    $actualIncome = $data['payment'] + $data['wallet_payment'] - $data['used'];
    $totalPay     = $list_pay['money'] + $list_pay['CK'] + $list_pay['card'];
    $remaining    = $actualIncome - $totalPay;
    $payRate      = $actualIncome > 0 ? round($totalPay / $actualIncome * 100, 1) : 0;
@endphp
<div class="crm-stats">
    <div class="crm-stats__kpis crm-stats__kpis--3">
        <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>Tiền mặt</span><b>{{ number_format($list_payment['money']) }}</b></li>
                <li><span>Chuyển khoản</span><b>{{ number_format($list_payment['CK']) }}</b></li>
                <li><span>Thẻ</span><b>{{ number_format($list_payment['card']) }}</b></li>
            </ul>
        </div>

        <div class="crm-stats__kpi crm-stats__kpi--red">
            <div class="crm-stats__kpi-head">
                <span class="crm-stats__kpi-icon"><i class="fas fa-file-invoice-dollar"></i></span>
                <span class="crm-stats__kpi-label">Tổng chi</span>
            </div>
            <div class="crm-stats__kpi-value">{{ number_format($totalPay) }}<small>VNĐ</small></div>
            <ul class="crm-stats__kpi-list">
                <li><span>Tiền mặt</span><b>{{ number_format($list_pay['money']) }}</b></li>
                <li><span>Chuyển khoản</span><b>{{ number_format($list_pay['CK']) }}</b></li>
                <li><span>Tỷ lệ chi / thực thu</span><b>{{ $payRate }}%</b></li>
            </ul>
        </div>

        <div class="crm-stats__kpi">
            <div class="crm-stats__kpi-head">
                <span class="crm-stats__kpi-icon"><i class="fas fa-piggy-bank"></i></span>
                <span class="crm-stats__kpi-label">Còn lại</span>
            </div>
            <div class="crm-stats__kpi-value {{ $remaining < 0 ? 'is-negative' : '' }}">{{ number_format($remaining) }}<small>VNĐ</small></div>
            <ul class="crm-stats__kpi-list">
                <li class="{{ $list_payment['money'] - $list_pay['money'] < 0 ? 'is-danger' : '' }}"><span>Tiền mặt</span><b>{{ number_format($list_payment['money'] - $list_pay['money']) }}</b></li>
                <li class="{{ $list_payment['CK'] - $list_pay['CK'] < 0 ? 'is-danger' : '' }}"><span>Chuyển khoản</span><b>{{ number_format($list_payment['CK'] - $list_pay['CK']) }}</b></li>
                <li class="{{ $list_payment['card'] - $list_pay['card'] < 0 ? 'is-danger' : '' }}"><span>Thẻ</span><b>{{ number_format($list_payment['card'] - $list_pay['card']) }}</b></li>
            </ul>
        </div>
    </div>

    {{-- Biểu đồ (vẽ bằng public/js/crm-charts.js vào đúng các id bên dưới) --}}
    <div class="crm-stats__grid">
        <div id="piechart-1"></div>
        <div id="piechart-2"></div>
    </div>
    <div id="barchart"></div>
</div>

<script src="{{ asset('js/chart.min.js') }}"></script>
<script src="{{ asset('js/crm-charts.js') }}?v=20260925-2"></script>
{{-- Biểu đồ Chart.js (thay Google Charts): duyệt chi theo danh mục / trạng thái / chi nhánh --}}
<script>
    (function () {
        var byCategory = {!! json_encode(collect($payAll)->map(function ($i) { return ['name' => (string) (@$i->danhMucThuChi->name ?: 'Chưa phân loại'), 'value' => (float) $i->sum_price]; })->values(), JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP) !!};
        var byStatus = {!! json_encode(collect($payStatus)->map(function ($i) { return ['name' => @$i->status == 1 ? 'Đã duyệt' : 'Chưa duyệt', 'value' => (float) $i->sum_price]; })->values(), JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP) !!};
        var byBranch = {!! json_encode(collect($payBranch)->map(function ($i) { return ['name' => (string) @$i->branch->name, 'value' => (float) $i->sum_price]; })->values(), JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP) !!};
        var col = function (arr, k) { return arr.map(function (r) { return r[k]; }); };
        CrmCharts.pie('piechart-1', {title: 'Duyệt chi theo danh mục', labels: col(byCategory, 'name'), values: col(byCategory, 'value')});
        CrmCharts.pie('piechart-2', {title: 'Phân bổ duyệt chi', labels: col(byStatus, 'name'), values: col(byStatus, 'value')});
        CrmCharts.hbar('barchart', {
            title: 'Thống kê duyệt chi toàn hệ thống (VNĐ)', labels: col(byBranch, 'name'),
            datasets: [{label: 'Tổng chi', data: col(byBranch, 'value'), color: '#EF4444'}]
        });
    })();
</script>