@livewireStyles
<div>
    <!-- Page -->
    <div class="page">
        <div class="page-header">
            <h1 class="page-title">Data Statistik Total Tagihan Invoice Lunas</h1>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="">Home</a></li>
                <li class="breadcrumb-item"><a href="javascript:void(0)">General</a></li>
                <li class="breadcrumb-item active">Data Statistik Total Tagihan Invoice Lunas</li>
            </ol>
        </div>
        <div class="page-content container-fluid">
            <div class="row">
                <div class="col-xl-12">
                    <!-- Panel Kitchen Sink -->
                    <div class="panel">
                        <header class="panel-heading">
                            <h3 class="panel-title">
                                Data Statistik Total Tagihan Invoice Lunas
                                @if (session()->has('pesan'))
                                    <span class="panel-desc" style="color: green;">{{ session('pesan') }}</span>
                                @endif
                                <span class="panel-desc">
                                    {{ env('CORP_BRAND') }}
                                </span>
                            </h3>
                        </header>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-12">
                                    {{-- <h4>#Data Statistik Total Tagihan Invoice Lunas</h4> --}}
                                    <div style="width: 100%;">
                                        <canvas id="ChartMMS"
                                            style="width: 100% !important; height: 600px !important;"></canvas>
                                    </div>
                                </div>
                            </div>

                            <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
                            <script>
                                document.addEventListener('DOMContentLoaded', function() {

                                    var Statistik = JSON.parse('');
                                    console.log('Statistik Data:', Statistik);
                                    var ctxMMS = document.getElementById('ChartMMS').getContext('2d');

                                    new Chart(ctxMMS, {
                                        type: 'line',
                                        data: {
                                            labels: Statistik.months,
                                            datasets: [{
                                                data: Statistik.gross_amounts.map(amount => parseFloat(amount.replace(
                                                    /[^0-9.-]+/g, ""
                                                ))), // Ambil angka dari format rupiah,                                               
                                                borderColor: [
                                                    'rgba(255, 159, 64, 1)',
                                                ],
                                                label: '# Total Tagihan'
                                            }]
                                        },
                                        options: {
                                            responsive: true,
                                            maintainAspectRatio: false,
                                            plugins: {
                                                legend: {
                                                    position: 'top'
                                                },
                                                tooltip: {
                                                    callbacks: {
                                                        label: function(tooltipItem) {
                                                            return `${tooltipItem.label}: ${tooltipItem.raw}`;
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    });
                                });
                            </script>
                        </div>

                    </div>
                    <!-- End Panel Kitchen Sink -->
                </div>
            </div>
        </div>
    </div>
    <!-- End Page -->
    @livewireScripts
</div>