@livewireStyles
<div>
    <!-- Page -->
    <div class="page">
        <div class="page-header">
            <h1 class="page-title">Data Statistik Bandwidth</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 Bandwidth</li>
            </ol>

            <div class="page-header-actions">

                <button type="button" data-target="#forms" data-toggle="modal"
                    class="btn btn-sm btn-icon btn-primary btn-round" data-toggle="tooltip"
                    data-original-title="Tambah">
                    <i class="icon md-hospital" aria-hidden="true"></i>
                </button>

                <button type="button" class="btn btn-sm btn-icon btn-primary btn-round" data-toggle="tooltip"
                    data-original-title="Refresh">
                    <i class="icon md-refresh-alt" aria-hidden="true"></i>
                </button>
            </div>

        </div>

        <div class="page-content container-fluid">
            <div class="row">
                <div class="col-xl-6 col-md-6">
                    <!-- Widget Linearea Two -->
                    <div class="card card-block p-30 bg-amber-900">
                        <div class="card-watermark darker font-size-80 m-15"><i class="icon md-ticket-star"
                                aria-hidden="true"></i></div>
                        <div class="counter counter-md counter-inverse text-left">
                            <div class="counter-number-group">
                                <span class="counter-number"><b>{{ number($grandTotalKapasitasReseller) }}</b> Mbps</span>
                                <span class="counter-number-related text-capitalize"> | Reseller</span>
                            </div>
                            <div class="counter-label text-capitalize">Total Bandwidth Terpakai Reseller</div>
                        </div>
                    </div>
                    <!-- End Widget Linearea Two -->
                </div>
                <div class="col-xl-6 col-md-6">
                    <!-- Widget Linearea Two -->
                    <div class="card card-block p-30 bg-blue-700">
                        <div class="card-watermark darker font-size-80 m-15"><i class="icon md-ticket-star"
                                aria-hidden="true"></i></div>
                        <div class="counter counter-md counter-inverse text-left">
                            <div class="counter-number-group">
                                <span class="counter-number"><b>{{ number($grandTotalKapasitasPusat) }}</b> Mbps</span>
                                <span class="counter-number-related text-capitalize"> | MMS</span>
                            </div>
                            <div class="counter-label text-capitalize">Total Bandwidth Terpakai MMS</div>
                        </div>
                    </div>
                    <!-- End Widget Linearea Two -->
                </div>
            </div>
            <div class="row">
                <div class="col-xl-12">
                    <!-- Panel Kitchen Sink -->
                    <div class="panel">

                        <header class="panel-heading">
                            <h3 class="panel-title">
                                Data Statistik Bandwidth
                                @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-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>{{ number($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>
                        </div>

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

    @livewireScripts


</div>
@livewireScripts