@livewireStyles
<div class="col-md-12" style="background: white;">

    <div class="row">
        <div class="col-md-12">
            <h4>#Data Statistik Bandwidth Reseller</h4>
        </div>
    </div>

    <div class="row">
        <div class="col-9">
            <div class="row">
                <div class="col-12">
                    <div style="width: 100%;">
                        <canvas id="myChart" style="width: 100% !important; height: 600px !important;"></canvas>
                    </div>
                    <br>
                    <hr>
                    <br><br>
                    <div class="col-12">
                        <div class="row">
                            <div class="col-12">
                                <h4>#Data Statistik Bandwidth MMS</h4>
                            </div>
                            <div class="col-12">
                                <div style="width: 100%;">
                                    <canvas id="ChartMMS"
                                        style="width: 100% !important; height: 600px !important;"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-3">
            <h4>#Data Penggunaan Bandwidth Reseller</h4>
            <table class="table table-bordered table-sm table-striped">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Nama Ui</th>
                        <th>Bandwidth</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($BandwidthReseller as $key => $row)
                        <tr>
                            <td>{{ $key + 1 }}</td>
                            <td>{{ $row->nama_ui }}</td>
                            <td><b>{{ $row->total_kapasitas }} </b>Mbps</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var chartData = JSON.parse('');
            console.log('Chart Data:', chartData);

            var ctx = document.getElementById('myChart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: chartData.nama_ui,
                    datasets: [{
                        data: chartData.total_kapasitas,
                        backgroundColor: [
                            'rgba(255, 159, 64, 0.6)',
                            'rgba(255, 99, 132, 0.6)',
                            'rgba(255, 206, 86, 0.6)',
                            'rgba(54, 162, 235, 0.6)',
                            'rgba(75, 192, 192, 0.6)',
                            'rgba(153, 102, 255, 0.6)',
                            'rgba(255, 99, 71, 0.6)',
                            'rgba(60, 179, 113, 0.6)',
                            'rgba(238, 130, 238, 0.6)',
                            'rgba(75, 0, 130, 0.6)'
                        ],
                        borderColor: [
                            'rgba(255, 159, 64, 1)',
                            'rgba(255, 99, 132, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 99, 71, 1)',
                            'rgba(60, 179, 113, 1)',
                            'rgba(238, 130, 238, 1)',
                            'rgba(75, 0, 130, 1)'
                        ],
                        label: '# Mbps'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top'
                        },
                        tooltip: {
                            callbacks: {
                                label: function(tooltipItem) {
                                    return `${tooltipItem.label}: ${tooltipItem.raw}`;
                                }
                            }
                        }
                    }
                }
            });

            var Statistik = JSON.parse('');
            console.log('Statistik Data:', Statistik);

            var ctxMMS = document.getElementById('ChartMMS').getContext('2d');
            new Chart(ctxMMS, {
                type: 'bar',
                data: {
                    labels: Statistik.kategori_produk,
                    datasets: [{
                        data: Statistik.total_kapasitas,
                        backgroundColor: [
                            'rgba(255, 159, 64, 0.6)',
                            'rgba(255, 99, 132, 0.6)',
                            'rgba(255, 206, 86, 0.6)',
                            'rgba(54, 162, 235, 0.6)',
                            'rgba(75, 192, 192, 0.6)',
                            'rgba(153, 102, 255, 0.6)',
                            'rgba(255, 99, 71, 0.6)',
                            'rgba(60, 179, 113, 0.6)',
                            'rgba(238, 130, 238, 0.6)',
                            'rgba(75, 0, 130, 0.6)'
                        ],
                        borderColor: [
                            'rgba(255, 159, 64, 1)',
                            'rgba(255, 99, 132, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 99, 71, 1)',
                            'rgba(60, 179, 113, 1)',
                            'rgba(238, 130, 238, 1)',
                            'rgba(75, 0, 130, 1)'
                        ],
                        label: '# Mbps'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top'
                        },
                        tooltip: {
                            callbacks: {
                                label: function(tooltipItem) {
                                    return `${tooltipItem.label}: ${tooltipItem.raw}`;
                                }
                            }
                        }
                    }
                }
            });
        });
    </script>

    @livewireScripts
</div>
@livewireScripts