<style>
    #wpBayar {
        min-width: 600px;
        max-width: auto;
        height: 600px;
        margin: 0 auto;
    }
</style>
<?php

ini_set('memory_limit', '4096M');

echo 'Initial memory usage: ' . memory_get_usage() . ' bytes' . PHP_EOL;

$tahun2 = date('Y');
$rentang_tahun = range($tahun2, 2022);

$dataraporkwl = "[";
foreach ($raporbyr as $row) {
    $x = (($row->WPBYR / $row->JMLWP ?: 1)) * 100;
    $y = (($row->WPBYRTERATUR / $row->WPBYR ?: 1)) * 100;
    $dd = $row->KWLADM;
    $dataraporkwl .= "{x: " . $x . ", y: " . $y . ", z: 1, name: '" . addslashes($row->NAMA) . "', drilldown: \"" . $dd . "\", jmlwp: " . $row->JMLWP . ", wpbyr: " . $row->WPBYR . ", wpbyrteratur: " . $row->WPBYRTERATUR . "},";
}
$dataraporkwl = rtrim($dataraporkwl, ',') . "]";

$drilldownSeries = [];

// per KPP
foreach ($drilldownData['kpp'] as $kwladm => $kpps) {
    $parentPoint = null;
    $data = [];

    foreach ($raporbyr as $row) {
        if ($row->KWLADM == $kwladm) {
            $parentPoint = [
                'name' => $row->NAMA,
                'x' => ($row->WPBYR / ($row->JMLWP ?: 1)) * 100,
                'y' => ($row->WPBYRTERATUR / ($row->WPBYR ?: 1)) * 100,
                'color' => '#FF0000',  // Give it a distinct color
                'dataLabels' => [
                    'enabled' => true,
                    'format' => '{point.name}',
                    'style' => ['fontWeight' => 'bold']
                ],
                'jmlwp' => $row->JMLWP,
                'wpbyr' => $row->WPBYR,
                'wpbyrteratur' => $row->WPBYRTERATUR
            ];
            break;
        }
    }

    if ($parentPoint) {
        $data[] = $parentPoint;
    }

    foreach ($kpps as $kpp) {
        $data[] = [
            'name' => $kpp['name'],
            'x' => $kpp['x'],
            'y' => $kpp['y'],
            'z' => $kpp['z'],
            'drilldown' => (string) $kpp['drilldown'],
            'jmlwp' => $kpp['jmlwp'],
            'wpbyr' => $kpp['wpbyr'],
            'wpbyrteratur' => $kpp['wpbyrteratur']
        ];
    }

    $drilldownSeries[] = [
        'id' => (string) $kwladm,
        'name' => "KPP in " . $kwladm,
        'data' => $data
    ];
}

// per Seksi
foreach ($drilldownData['sie'] as $kppadm => $sies) {
    $parentPoint = null;
    $data = [];

    foreach ($raporbyrkpp as $row) {
        if ($row->KPPADM == $kppadm) {
            $parentPoint = [
                'name' => $row->NAMA,
                'x' => ($row->WPBYR / ($row->JMLWP ?: 1)) * 100,
                'y' => ($row->WPBYRTERATUR / ($row->WPBYR ?: 1)) * 100,
                'color' => '#00FF00',  // Give it a distinct color
                'dataLabels' => [
                    'enabled' => true,
                    'format' => '{point.name}',
                    'style' => ['fontWeight' => 'bold']
                ],
                'jmlwp' => $row->JMLWP,
                'wpbyr' => $row->WPBYR,
                'wpbyrteratur' => $row->WPBYRTERATUR
            ];
            break;
        }
    }

    if ($parentPoint) {
        $data[] = $parentPoint;
    }

    foreach ($sies as $sie) {
        $data[] = [
            'name' => $sie['name'],
            'x' => $sie['x'],
            'y' => $sie['y'],
            'z' => $sie['z'],
            'drilldown' => (string) ($kppadm . '_' . $sie['drilldown']),
            'jmlwp' => $sie['jmlwp'],
            'wpbyr' => $sie['wpbyr'],
            'wpbyrteratur' => $sie['wpbyrteratur']
        ];
    }

    $drilldownSeries[] = [
        'id' => (string) $kppadm,
        'name' => "SIE in " . $kppadm,
        'data' => $data
    ];
}

// per Pegawai
foreach ($drilldownData['peg'] as $key => $pegs) {
    $parentPoint = null;
    $data = [];

    list($kppadm, $kodesie) = explode('_', $key);
    foreach ($raporbyrsie as $row) {
        if ($row->KPPADM == $kppadm && $row->KODESIE == $kodesie) {
            $parentPoint = [
                'name' => $row->NAMA,
                'x' => ($row->WPBYR / ($row->JMLWP ?: 1)) * 100,
                'y' => ($row->WPBYRTERATUR / ($row->WPBYR ?: 1)) * 100,
                'color' => '#0000FF',
                'dataLabels' => [
                    'enabled' => true,
                    'format' => '{point.name}',
                    'style' => ['fontWeight' => 'bold']
                ],
                'jmlwp' => $row->JMLWP,
                'wpbyr' => $row->WPBYR,
                'wpbyrteratur' => $row->WPBYRTERATUR
            ];
            break;
        }
    }

    if ($parentPoint) {
        $data[] = $parentPoint;
    }

    foreach ($pegs as $peg) {
        $data[] = [
            'name' => $peg['name'],
            'x' => $peg['x'],
            'y' => $peg['y'],
            'z' => $peg['z'],
            'drilldown' => null,
            'jmlwp' => $peg['jmlwp'],
            'wpbyr' => $peg['wpbyr'],
            'wpbyrteratur' => $peg['wpbyrteratur']
        ];
    }

    $drilldownSeries[] = [
        'id' => (string) $key,
        'name' => "PEG in " . $key,
        'data' => $data
    ];
}

$d['drilldownSeries'] = $drilldownSeries;
?>
<div class="main-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12 mb-2">
                <form class="form-inline" action="<?php base_url('rapor/wplapor') ?>" method="post">
                    <label class="my-1 mr-2">Tahun :</label>
                    <select class="custom-select my-1 mr-sm-2" id="tahun" name="tahun">
                        <?php
                        foreach ($rentang_tahun as $tahun) {
                            if ($tahun == $tahunx) {
                                $sel = "selected";
                            } else {
                                $sel = "";
                            }
                            echo "<option value=\"" . $tahun . "\" " . $sel . ">" . $tahun . "</option>";
                        }
                        ?>
                    </select>
                    <label class="my-1 mr-2">s.d. Bulan :</label>
                    <select class="custom-select my-1 mr-sm-2" id="bulan" name="bulan">
                        <?php
                        foreach ($refbulan as $rowb) {
                            if ($rowb->KODE == $bulanx) {
                                $isSelected = ' selected="selected"';
                            } else {
                                $isSelected = '';
                            }
                            echo "<option value='" . $rowb->KODE . "'" . $isSelected . ">" . ucfirst(strtolower($rowb->NM_PANJANG)) . "</option>";
                        }
                        ?>
                    </select>

                    <button type="submit" class="btn btn-primary my-1">Proses</button>
                </form>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="text-center">WP Lapor</h3>
                        <div class="card-header-right">
                            <ul class="list-unstyled card-option">
                                <li><i class="ik ik-chevron-left action-toggle"></i></li>
                                <li><i class="ik ik-minus minimize-card"></i></li>
                                <li><i class="ik ik-x close-card"></i></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="wpBayar" style="height:600px"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="row clearfix">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="text-center">Data</h3>
                        <div class="card-header-right">
                            <ul class="list-unstyled card-option">
                                <li><i class="ik ik-chevron-left action-toggle"></i></li>
                                <li><i class="ik ik-minus minimize-card"></i></li>
                                <li><i class="ik ik-x close-card"></i></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th class="text-center">No</th>
                                    <th class="text-center">Unit</th>
                                    <th class="text-center">Jumlah WP</th>
                                    <th class="text-center">WP Bayar <?= $tahunx ?></th>
                                    <th class="text-center">WP Bayar Teratur<?= $tahunx ?></th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php
                                $no = 1;
                                foreach ($raporbyr as $row) { ?>
                                    <tr>
                                        <td><?= $no++ ?></td>
                                        <td><?= $row->KWLADM ?>-<?= $row->NAMA ?></td>
                                        <td class="text-right"><?= number_format($row->JMLWP, 0, ',', '.') ?></td>
                                        <td class="text-right"><?= number_format($row->WPBYR, 0, ',', '.') ?></td>
                                        <td class="text-right"><?= number_format($row->WPBYRTERATUR, 0, ',', '.') ?></td>
                                    </tr>
                                <?php } ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div> -->
    </div>
</div>
<?php echo view('inc/js.php') ?>
<script>
    Highcharts.chart('wpBayar', {
        chart: {
            type: 'scatter',
            plotBorderWidth: 1,
            zoomType: 'xy',
            panning: true,
            panKey: 'shift'
        },
        legend: {
            enabled: false
        },
        title: {
            text: ''
        },
        credits: {
            enabled: false
        },
        accessibility: {
            point: {
                valueDescriptionFormat: '{index}. {point.name}, WPbayar: {point.x}%, WPBayarT: {point.y}%, index: {point.z}%.'
            }
        },
        xAxis: {
            gridLineWidth: 1,
            type: 'logarithmic',
            title: {
                text: 'WP Lapor'
            },
            labels: {
                format: '{value:.2f}%'
            },
            accessibility: {
                rangeDescription: 'Range: 0 to 100 %.'
            }
        },
        yAxis: {
            startOnTick: false,
            endOnTick: false,
            type: 'logarithmic',
            title: {
                text: 'WP Lapor Teratur'
            },
            labels: {
                format: '{value:.2f}%'
            },
            maxPadding: 0.2,
            accessibility: {
                rangeDescription: 'Range: 0 to 100 persen.'
            }
        },
        tooltip: {
            useHTML: true,
            headerFormat: '<table>',
            pointFormatter: function () {
                return '<tr><th colspan="2"><h5>' + this.name + '</h5></th></tr>' +
                    '<tr><th>%WP Bayar:</th><td>' + Highcharts.numberFormat(this.x, 2) + '%</td></tr>' +
                    '<tr><th>%WP Bayar Teratur:</th><td>' + Highcharts.numberFormat(this.y, 2) + '%</td></tr>' +
                    '<tr><th>Jumlah WP:</th><td>' + Highcharts.numberFormat(this.jmlwp, 0, '.', ',') + '</td></tr>' +
                    '<tr><th>WP Bayar:</th><td>' + Highcharts.numberFormat(this.wpbyr, 0, '.', ',') + '</td></tr>' +
                    '<tr><th>WP Bayar Teratur:</th><td>' + Highcharts.numberFormat(this.wpbyrteratur, 0, '.', ',') + '</td></tr>';
            },
            footerFormat: '</table>',
            followPointer: true
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    format: '{point.name}',
                    color: '#000000',
                    textOutline: '1px contrast',
                    allowOverlap: true
                }
            }
        },
        series: [{
            data: <?php echo $dataraporkwl; ?>,
            colorByPoint: true
        }],
        drilldown: {
            activeDataLabelStyle: {
                color: '#FFFFFF',
                textDecoration: 'none',
                textOutline: '1px #000000'
            },
            breadcrumbs: {
                position: {
                    align: 'right'
                },
            },
            series: <?php echo json_encode($drilldownSeries); ?>
        },
    });

    console.log('Main series data:', <?php echo $dataraporkwl; ?>);
    console.log('Drilldown series:', <?php echo json_encode($drilldownSeries, JSON_NUMERIC_CHECK | JSON_PRETTY_PRINT); ?>);
</script>