<style>
    .highcharts-figure,
    .highcharts-data-table table {
        min-width: 320px;
        max-width: 800px;
        margin: 1em auto;
    }

    .highcharts-data-table table {
        font-family: Verdana, sans-serif;
        border-collapse: collapse;
        border: 1px solid #ebebeb;
        margin: 10px auto;
        text-align: center;
        width: 100%;
        max-width: 500px;
    }

    .highcharts-data-table caption {
        padding: 1em 0;
        font-size: 1.2em;
        color: #555;
    }

    .highcharts-data-table th {
        font-weight: 600;
        padding: 0.5em;
    }

    .highcharts-data-table td,
    .highcharts-data-table th,
    .highcharts-data-table caption {
        padding: 0.5em;
    }

    .highcharts-data-table thead tr,
    .highcharts-data-table tr:nth-child(even) {
        background: #f8f8f8;
    }

    .highcharts-data-table tr:hover {
        background: #f1f7ff;
    }
</style>
<?php

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

$hariini = date('d-m-y');
?>
<?php
$tgt = 0;
$pennow = 0;
$penpast = 0;
foreach ($penerimaan as $row) {
    $tgt += $row->TARGET;
    $pennow += $row->PENB;
    $penpast += $row->PENL;
    $capaian = ($pennow / $tgt) * 100;
    $growth = (($pennow - $penpast) / $penpast) * 100;
    $selisih = $pennow - $penpast;
    $carryover = $pennow - $tgt;
}



$jml_penerimaan = 0;
$jml_penlalu = 0;
$jml_penerimaantot = 0;
$pentotlalu = 0;
foreach ($pie_penerimaan as $_junk => $data) {
    $jml_penerimaan = $jml_penerimaan + $data->PENERIMAAN;
    $jml_penerimaantot = $data->PENERIMAAN_TOT;
    $pentotlalu = $data->PENERIMAAN_TOTL;
    $jml_penlalu = $jml_penlalu + $data->PENL;
}
$jml_penerimaan = $jml_penerimaantot - $jml_penerimaan;
$jml_penlalu = $pentotlalu - $jml_penlalu;
$gwpiepenl = (($jml_penerimaan - $jml_penlalu) / $jml_penlalu) * 100;
$row = 0;

$datanya_penerimaan = "[";
foreach ($pie_penerimaan as $_junk => $data) {
    $gwpiepen = (($data->PENERIMAAN - $data->PENL) / $data->PENL) * 100;
    $datanya_penerimaan = $datanya_penerimaan . "{name :'" . $data->NM_PAJAK . "',y: " . $data->PENERIMAAN . " , gw:" . $gwpiepen . "}";
    break;
}
foreach ($pie_penerimaan as $_junk => $data) {
    if ($row <> 0) {
        $gwpiepen = (($data->PENERIMAAN - $data->PENL) / $data->PENL) * 100;
        $datanya_penerimaan = $datanya_penerimaan . ",{name :'" . $data->NM_PAJAK . "',y: " . $data->PENERIMAAN . ", gw:" . $gwpiepen . "}";
    }
    $row = $row + 1;
}
$datanya_penerimaan = $datanya_penerimaan . ",{name: 'Lainnya',y:" . $jml_penerimaan . ", gw: " . $gwpiepenl . "}]";


$datapaycomp = "[";
foreach ($paycomp as $rowp) {
    $datapaycomp = $datapaycomp . "{name : 'Jmlbln : " . $rowp->JMLBULAN . "',y: " . $rowp->JUMLAHWP . "},";
}
$datapaycomp = $datapaycomp . "]";

?>

<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('Kanwil/index') ?>" method="post">
                    <label class="my-1 mr-2">Kanwil :</label>
                    <select class="custom-select my-1 mr-sm-2" id="kwl" name="kwl">
                        <?
                        foreach ($selkwl as $row) {
                            if ($row->KODE == $kwlx) {
                                $sel = "selected";
                            } else {
                                $sel = "";
                            }
                            echo "<option value=\"" . $row->KODE . "\" " . $sel . ">" . $row->KODE . " - " . $row->NAMA . "</option>";
                        }
                        ?>
                    </select>
                    <label class="my-1 mr-2">Tahun :</label>
                    <select class="custom-select my-1 mr-sm-2" id="tahun" name="tahun">
                        <?
                        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-lg-3 col-md-6 col-sm-12">
                <div class="widget">
                    <div class="widget-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="state">
                                <h6>Target Kanwil</h6>
                                <h6><b><?= number_format($tgt, 0, ',', '.') ?></b></h6>
                            </div>
                            <div class="icon">
                                <i class="ik ik-award"></i>
                            </div>
                        </div>
                        <small class="text-small mt-10 d-block">Capaian <?= number_format($capaian, 2) ?>%</small>
                    </div>
                    <div class="progress progress-sm">
                        <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="<?= number_format($capaian, 2) ?>" aria-valuemin="0" aria-valuemax="100" style="width: <?= number_format($capaian, 2) ?>%;"></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="widget">
                    <div class="widget-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="state">
                                <h6>Penerimaan sd <?= $tahunx ?></h6>
                                <h6><b><?= number_format($pennow, 0, ',', '.') ?></b></h6>
                            </div>
                            <div class="icon">
                                <i class="ik ik-thumbs-up"></i>
                            </div>
                        </div>
                        <small class="text-small mt-10 d-block">Growth <?= number_format($growth, 2) ?>%</small>
                    </div>
                    <div class="progress progress-sm">
                        <div class="progress-bar bg-success" role="progressbar" aria-valuenow="<?= number_format($growth, 2) ?>" aria-valuemin="0" aria-valuemax="100" style="width: <?= number_format($growth, 2) ?>%;"></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="widget">
                    <div class="widget-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="state">
                                <h6>Penerimaan <?= $tahunx - 1 ?></h6>
                                <h6><b><?= number_format($penpast, 0, ',', '.') ?></b></h6>
                            </div>
                            <div class="icon">
                                <i class="ik ik-calendar"></i>
                            </div>
                        </div>
                        <small class="text-small mt-10 d-block">Selisih <?= number_format($selisih, 0, ',', '.') ?></small>
                    </div>
                    <div class="progress progress-sm">
                        <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="<?= ($selisih / $penpast) * 100 ?>" aria-valuemin="0" aria-valuemax="100" style="width: <?= ($selisih / $penpast) * 100 ?>%;"></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="widget">
                    <div class="widget-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="state">
                                <h6>Delta</h6>
                                <h6><b><?= number_format($carryover, 0, ',', '.') ?></b></h6>
                            </div>
                            <div class="icon">
                                <i class="ik ik-alert-triangle"></i>
                            </div>
                        </div>
                        <small class="text-small mt-10 d-block">update <?= $updatex['UPD'] ?></small>
                    </div>
                    <div class="progress progress-sm">
                        <div class="progress-bar bg-info" role="progressbar" aria-valuenow="<?= idate('d') ?>" aria-valuemin="1" aria-valuemax="<?= date('t', strtotime($hariini)) ?>" style="width: <?= idate('d') / date('t', strtotime($hariini)) * 100 ?>%;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-lg-8 col-md-12">
                                <h3 class="card-title">Breakdown Penerimaan</h3>
                                <?php
                                $totwpskbyr = $wp_sk['WPSWP'] + $wp_sk['WPKWP'];
                                $totwpskbyrl = $wp_sk['WPSWPL'] + $wp_sk['WPKWPL'];
                                $wpsktbyrn = $wp_sk['WPSBYRN'] + $wp_sk['WPKBYRN'];
                                $wpsktbyrl = $wp_sk['WPSBYRP'] + $wp_sk['WPKBYRP'];

                                $totwpall = $wp_terdaftar['WPS'] + $wp_terdaftar['WPK'];

                                ?>

                            </div>
                            <div class="col-lg-6 col-md-12">
                                <div class="col text-center">
                                    <h5><ion-icon name="people"></ion-icon>Strategis</h5>
                                </div>
                                <div class="row mb-15">
                                    <div class="col-8">Penerimaan</div>
                                    <div class="col-4 text-right"><?= number_format($wp_sk['WPSBYRN'], 0, ',', '.') ?></div>
                                    <div class="col-12">
                                        <div class="progress progress-sm mt-5">
                                            <div class="progress-bar-striped progress-bar-animated bg-green" role="progressbar" style="width: 48%" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-15">
                                    <div class="col-9">Growth</div>
                                    <div class="col-3 text-right"><?= number_format(($wp_sk['WPSBYRN'] - $wp_sk['WPSBYRP']) / $wp_sk['WPSBYRP'] * 100, 2) ?>%</div>
                                    <div class="col-12">
                                        <div class="progress progress-sm mt-5">
                                            <div class="progress-bar-striped progress-bar-animated bg-green" role="progressbar" style="width: <?= number_format(($wp_sk['WPSBYRN'] - $wp_sk['WPSBYRP']) / $wp_sk['WPSBYRP'] * 100, 2) ?>%" aria-valuenow="<?= number_format(($wp_sk['WPSBYRN'] - $wp_sk['WPSBYRP']) / $wp_sk['WPSBYRP'] * 100, 2) ?>" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mb-15">
                                    <div class="col-9">Peranan</div>
                                    <div class="col-3 text-right"><?= number_format($wp_sk['WPSBYRN'] / $wpsktbyrn * 100, 2) ?>%</div>
                                    <div class="col-12">
                                        <div class="progress progress-sm mt-5">
                                            <div class="progress-bar-striped progress-bar-animated bg-green" role="progressbar" style="width: <?= number_format($wp_sk['WPSBYRN'] / $wpsktbyrn * 100, 2) ?>%" aria-valuenow="<?= number_format($wp_sk['WPSBYRN'] / $wpsktbyrn * 100, 2) ?>" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mb-15">
                                    <div class="col-9">WP Terdaftar</div>
                                    <div class="col-3 text-right"><?= number_format($wp_terdaftar['WPS'], 0, ',', '.') ?></div>
                                    <div class="col-12">
                                        <div class="progress progress-sm mt-5">
                                            <div class="progress-bar-striped progress-bar-animated bg-green" role="progressbar" style="width: 48%" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mb-15">
                                    <div class="col-9">WP Bayar</div>
                                    <div class="col-3 text-right"><?= number_format($wp_sk['WPSWP'], 0, ',', '.') ?></div>
                                    <div class="col-12">
                                        <div class="progress progress-sm mt-5">
                                            <div class="progress-bar-striped progress-bar-animated bg-green" role="progressbar" style="width: 48%" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mb-15">
                                    <div class="col-9">Ratio(%)</div>
                                    <div class="col-3 text-right"><?= number_format($wp_sk['WPSWP'] / $wp_terdaftar['WPS'] * 100, 2) ?></div>
                                    <div class="col-12">
                                        <div class="progress progress-sm mt-5">
                                            <div class="progress-bar-striped progress-bar-animated bg-green" role="progressbar" style="width: <?= number_format($wp_sk['WPSWP'] / $wp_terdaftar['WPS'] * 100, 2) ?>%" aria-valuenow="<?= number_format(($wp_sk['WPSWP'] / $wp_terdaftar['WPS']) * 100, 2) ?>" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class=" col-lg-6 col-md-12">
                                <div class="col text-center">
                                    <h5><ion-icon name="aperture"></ion-icon>Kewilayahan</h5>
                                </div>
                                <div class="row mb-15">
                                    <div class="col-8">Penerimaan</div>
                                    <div class="col-4 text-right"><?= number_format($wp_sk['WPKBYRN'], 0, ',', '.') ?></div>
                                    <div class="col-12">
                                        <div class="progress progress-sm mt-5">
                                            <div class="progress-bar-striped progress-bar-animated bg-primary " role="progressbar" style="width: 48%" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-15">
                                    <div class="col-9">Growth</div>
                                    <div class="col-3 text-right"><?= number_format(($wp_sk['WPKBYRN'] - $wp_sk['WPKBYRP']) / $wp_sk['WPKBYRP'] * 100, 2) ?>%</div>
                                    <div class="col-12">
                                        <div class="progress progress-sm mt-5">
                                            <div class="progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: <?= number_format(($wp_sk['WPKBYRN'] - $wp_sk['WPKBYRP']) / $wp_sk['WPKBYRP'] * 100, 2) ?>%" aria-valuenow="<?= number_format(($wp_sk['WPKBYRN'] - $wp_sk['WPKBYRP']) / $wp_sk['WPKBYRP'] * 100, 2) ?>" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-15">
                                    <div class="col-9">Peranan</div>
                                    <div class="col-3 text-right"><?= number_format($wp_sk['WPKBYRN'] / $wpsktbyrn * 100, 2) ?>%</div>
                                    <div class="col-12">
                                        <div class="progress progress-sm mt-5">
                                            <div class="progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: <?= number_format($wp_sk['WPKBYRN'] / $wpsktbyrn * 100, 2) ?>%" aria-valuenow="<?= number_format($wp_sk['WPKBYRN'] / $wpsktbyrn * 100, 2) ?>" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-15">
                                    <div class="col-9">WP Terdaftar</div>
                                    <div class="col-3 text-right"><?= number_format($wp_terdaftar['WPK'], 0, ',', '.') ?></div>
                                    <div class="col-12">
                                        <div class="progress progress-sm mt-5">
                                            <div class="progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 48%" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-15">
                                    <div class="col-9">WP Bayar</div>
                                    <div class="col-3 text-right"><?= number_format($wp_sk['WPKWP'], 0, ',', '.') ?></div>
                                    <div class="col-12">
                                        <div class="progress progress-sm mt-5">
                                            <div class="progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 48%" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-15">
                                    <div class="col-9">Ratio(%)</div>
                                    <div class="col-3 text-right"><?= number_format($wp_sk['WPKWP'] / $wp_terdaftar['WPK'] * 100, 2) ?>%</div>
                                    <div class="col-12">
                                        <div class="progress progress-sm mt-5">
                                            <div class="progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: <?= number_format($wp_sk['WPKWP'] / $wp_terdaftar['WPK'] * 100, 2) ?>%" aria-valuenow="<?= number_format($wp_sk['WPKWP'] / $wp_terdaftar['WPK'] * 100, 2) ?>" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card" style="min-height: 422px;">
                    <div class="card-header">
                        <h3>Info Wajib Pajak</h3>
                    </div>
                    <div class="card-body">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th class="text-center">Tahun</th>
                                    <th class="text-center">WP Terdaftar</th>
                                    <th class="text-center">WP Bayar</th>
                                    <th class="text-center">Ratio (%)</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="text-center"><?php echo $tahunx ?></td>
                                    <td class="text-center"><?= number_format($wpadm['WPADMNOW'], 0, ',', '.') ?></td>
                                    <td class="text-center"><?= number_format($totwpskbyr, 0, ',', '.') ?></td>
                                    <td class="text-center"> <?= number_format(($totwpskbyr / $totwpall) * 100, 2) ?></td>
                                </tr>
                                <tr>
                                    <td class="text-center"><?php echo $tahunx - 1 ?></td>
                                    <td class="text-center"><?= number_format($wpadm['WPADMPAST'], 0, ',', '.') ?></td>
                                    <td class="text-center"><?= number_format($totwpskbyrl, 0, ',', '.') ?></td>
                                    <td class="text-center"> <?= number_format(($totwpskbyrl / $wpadm['WPADMPAST']) * 100, 2) ?></td>
                                </tr>

                                <tr>
                                    <td class="text-center">Delta</td>
                                    <td class="text-center"><?= number_format(($wpadm['WPADMNOW'] - $wpadm['WPADMPAST']) / $wpadm['WPADMPAST'] * 100, 2) ?>%</td>
                                    <td class="text-center"><?= number_format(($totwpskbyr - $totwpskbyrl) / $totwpskbyrl * 100, 2) ?>%</td>
                                    <td class="text-center">-</td>
                                </tr>
                            </tbody>
                        </table>
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th class="text-center">Tahun</th>
                                    <th class="text-center">WP Lapor</th>
                                    <th class="text-center"></th>
                                    <th class="text-center">Ratio (%)</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="text-center"><?php echo $tahunx ?></td>
                                    <td class="text-center"><?= number_format($laporThn['LAPORNOW'], 0, ',', '.') ?></td>
                                    <td class="text-center"></td>
                                    <td class="text-center"><?= number_format(($laporThn['LAPORNOW'] / $wpadm['WPADMNOW']) * 100, 2) ?></td>

                                </tr>
                                <tr>
                                    <td class="text-center"><?php echo $tahunx - 1 ?></td>
                                    <td class="text-center"><?= number_format($laporThn['LAPORPAST'], 0, ',', '.') ?></td>
                                    <td class="text-center"></td>
                                    <td class="text-center"><?= number_format(($laporThn['LAPORPAST'] / $wpadm['WPADMPAST']) * 100, 2) ?></td>

                                </tr>

                                <tr>
                                    <td class="text-center">Delta</td>
                                    <td class="text-center"><?= number_format(($laporThn['LAPORNOW'] - $laporThn['LAPORPAST']) / $laporThn['LAPORPAST'] * 100, 2) ?>%</td>
                                    <td class="text-center"></td>
                                    <td class="text-center">-</td>
                                </tr>
                            </tbody>
                        </table>


                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h3>Payment Compliance <?= $tahunx ?></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="paycomp"></div>
                    </div>

                </div>
            </div>

            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h3>PerJenis Pajak <?= $tahunx ?></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="preview_jenis_penerimaan"></div>
                    </div>

                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3>Strength of Figure</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-sm">
                            <thead>
                                <th class="text-center"><ion-icon name="pulse"></ion-icon> SOF</th>
                                <th class="text-center"><ion-icon name="person"></ion-icon> WP</th>
                                <th class="text-center"><ion-icon name="warning"></ion-icon> WP (%)</th>
                                <th class="text-center"><ion-icon name="cash"></ion-icon> Jumlah</th>
                                <th class="text-center"><ion-icon name="warning"></ion-icon> Jumlah (%)</th>
                            </thead>
                            <?php

                            foreach ($parsesof as $row) {
                                $wpbyrsof = $row->WPBYR;
                                $totwpsof = $row->TOTWPBYR;
                                $totjmlsof = $row->TOTALL;

                                $pctwp = $row->WPBYR / $totwpsof * 100;
                                $pctpen = $row->TOTAL / $totjmlsof * 100;

                                if ($pctwp < 0) {
                                    $mpctwp = "text-danger";
                                    $markmpctwp = "<ion-icon name='arrow-down-outline'></ion-icon>";
                                } else {
                                    $mpctwp = "text-success";
                                    $markmpctwp = "<ion-icon name='arrow-up-outline'></ion-icon>";
                                }

                                if ($pctpen < 0) {
                                    $mpctpen = "text-danger";
                                    $markmpctpen = "<ion-icon name='arrow-down-outline'></ion-icon>";
                                } else {
                                    $mpctpen = "text-success";
                                    $markmpctpen = "<ion-icon name='arrow-up-outline'></ion-icon>";
                                }

                            ?>
                                <tbody>
                                    <td><?= $row->LAPISAN; ?></td>
                                    <td class="text-right"><?= number_format($row->WPBYR, 0, ',', '.') ?></td>
                                    <td class="text-right <?= $mpctwp ?>"><?= number_format($pctwp, 2) ?> <?= $markmpctwp ?></td>
                                    <td class="text-right"><?= number_format($row->TOTAL, 0, ',', '.') ?></td>
                                    <td class="text-right <?= $mpctpen ?>"><?= number_format($pctpen, 2) ?> <?= $markmpctpen ?></td>
                                </tbody>

                            <?php } ?>
                            <tfoot>
                                <th>Total</th>
                                <th class="text-right"><?= number_format($totwpsof, 0, ',', '.') ?></th>
                                <th></th>
                                <th class="text-right"><?= number_format($totjmlsof, 0, ',', '.') ?></th>
                            </tfoot>
                        </table>
                        <small class="text-primary">*) Nilai Persentase dibawah 0% berwarna merah</small>
                    </div>

                </div>
            </div>
        </div>



        <div class="card">

            <div class="card-body">
                <h5 class="card-title">PENERIMAAN PER KATEGORI <?= $tahunx ?></h5>
                <table class="table table-hover">
                    <thead class='thead-dark'>
                        <tr class="table-active">
                            <th class="text-center">Kode</th>
                            <th class="text-center">Kategori</th>
                            <th class="text-center">Wp Bayar <?= $tahunx ?></th>
                            <th class="text-center">Wp Bayar <?= $tahunx - 1 ?></th>
                            <th class="text-center">gw WP Bayar (%)</th>
                            <th class="text-center">Realisasi <?= $tahunx ?></th>
                            <th class="text-center">Realisasi <?= $tahunx - 1 ?></th>
                            <th class="text-center">gw Penerimaan (%)</th>
                        </tr>
                    </thead>
                    <?php foreach ($perkategori as $row) {
                        $gwwp = (($row->WPBYRN - $row->WPBYRP) / $row->WPBYRP) * 100;
                        $gwkat = (($row->KPENN - $row->KPENP) / $row->KPENP) * 100;

                        if ($gwwp < 0) {
                            $markgww = "text-danger";
                            $markgwwic = "<ion-icon name='arrow-down-outline'></ion-icon>";
                        } else {
                            $markgww = "text-success";
                            $markgwwic = "<ion-icon name='arrow-up-outline'></ion-icon>";
                        }

                        if ($gwkat < 0) {
                            $markgwk = "text-danger";
                            $markgwkic = "<ion-icon name='arrow-down-outline'></ion-icon>";
                        } else {
                            $markgwk = "text-success";
                            $markgwkic = "<ion-icon name='arrow-up-outline'></ion-icon>";
                        }
                    ?>
                        <tbody>
                            <td><?= $row->KODE ?></td>
                            <td><?= $row->NMKAT ?></td>
                            <td class="text-right"><?= number_format($row->WPBYRN, 0, ',', '.') ?></td>
                            <td class="text-right"><?= number_format($row->WPBYRP, 0, ',', '.') ?></td>
                            <td class="text-center <?= $markgww ?>"><?= number_format($gwwp, 2) ?> <?php echo $markgwwic ?></td>
                            <td class="text-right"><?= number_format($row->KPENN, 0, ',', '.') ?></td>
                            <td class="text-right"><?= number_format($row->KPENP, 0, ',', '.') ?></td>
                            <td class="text-center <?= $markgwk ?>"><?= number_format($gwkat, 2) ?> <?php echo $markgwkic ?></td>
                        </tbody>
                    <?php } ?>
                </table>
            </div>
        </div>
    </div>
</div>




<?php echo view('inc/js.php') ?>


<script>
    (function(H) {
        H.seriesTypes.pie.prototype.animate = function(init) {
            const series = this,
                chart = series.chart,
                points = series.points,
                {
                    animation
                } = series.options,
                {
                    startAngleRad
                } = series;

            function fanAnimate(point, startAngleRad) {
                const graphic = point.graphic,
                    args = point.shapeArgs;

                if (graphic && args) {

                    graphic
                        // Set inital animation values
                        .attr({
                            start: startAngleRad,
                            end: startAngleRad,
                            opacity: 1
                        })
                        // Animate to the final position
                        .animate({
                            start: args.start,
                            end: args.end
                        }, {
                            duration: animation.duration / points.length
                        }, function() {
                            // On complete, start animating the next point
                            if (points[point.index + 1]) {
                                fanAnimate(points[point.index + 1], args.end);
                            }
                            // On the last point, fade in the data labels, then
                            // apply the inner size
                            if (point.index === series.points.length - 1) {
                                series.dataLabelsGroup.animate({
                                        opacity: 1
                                    },
                                    void 0,
                                    function() {
                                        points.forEach(point => {
                                            point.opacity = 1;
                                        });
                                        series.update({
                                            enableMouseTracking: true
                                        }, false);
                                        chart.update({
                                            plotOptions: {
                                                pie: {
                                                    innerSize: '10%',
                                                    borderRadius: 8
                                                }
                                            }
                                        });
                                    });
                            }
                        });
                }
            }

            if (init) {
                // Hide points on init
                points.forEach(point => {
                    point.opacity = 0;
                });
            } else {
                fanAnimate(points[0], startAngleRad);
            }
        };
    }(Highcharts));

    Highcharts.chart('preview_jenis_penerimaan', {
        chart: {
            type: 'pie'
        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        tooltip: {
            pointFormat: 'Peranan: <b>{point.percentage:.1f}%</b> <br> Gw : {point.gw:.1f}%'
        },
        accessibility: {
            point: {
                valueSuffix: '%'
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                borderWidth: 2,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b><br>{point.percentage:.1f}%',
                    distance: 20
                }
            }
        },
        credits: {
            enabled: false
        },
        series: [{
            // Disable mouse tracking on load, enable after custom animation
            enableMouseTracking: false,
            animation: {
                duration: 2000
            },
            colorByPoint: true,
            data: <?php echo $datanya_penerimaan  ?>
        }]
    });
</script>


<script>
    (function(H) {
        H.seriesTypes.pie.prototype.animate = function(init) {
            const series = this,
                chart = series.chart,
                points = series.points,
                {
                    animation
                } = series.options,
                {
                    startAngleRad
                } = series;

            function fanAnimate(point, startAngleRad) {
                const graphic = point.graphic,
                    args = point.shapeArgs;

                if (graphic && args) {

                    graphic
                        // Set inital animation values
                        .attr({
                            start: startAngleRad,
                            end: startAngleRad,
                            opacity: 1
                        })
                        // Animate to the final position
                        .animate({
                            start: args.start,
                            end: args.end
                        }, {
                            duration: animation.duration / points.length
                        }, function() {
                            // On complete, start animating the next point
                            if (points[point.index + 1]) {
                                fanAnimate(points[point.index + 1], args.end);
                            }
                            // On the last point, fade in the data labels, then
                            // apply the inner size
                            if (point.index === series.points.length - 1) {
                                series.dataLabelsGroup.animate({
                                        opacity: 1
                                    },
                                    void 0,
                                    function() {
                                        points.forEach(point => {
                                            point.opacity = 1;
                                        });
                                        series.update({
                                            enableMouseTracking: true
                                        }, false);
                                        chart.update({
                                            plotOptions: {
                                                pie: {
                                                    innerSize: '20%',
                                                    borderRadius: 8
                                                }
                                            }
                                        });
                                    });
                            }
                        });
                }
            }

            if (init) {
                // Hide points on init
                points.forEach(point => {
                    point.opacity = 0;
                });
            } else {
                fanAnimate(points[0], startAngleRad);
            }
        };
    }(Highcharts));

    $(function() {
        Highcharts.setOptions({
            lang: {
                thousandsSep: '.'
            }
        });

        Highcharts.chart('paycomp', {
            chart: {
                type: 'pie'
            },
            title: {
                text: ''
            },
            subtitle: {
                text: ''
            },
            tooltip: {
                pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b> <br> jmlWP : {point.y} '
            },
            accessibility: {
                point: {
                    valueSuffix: '%'
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    borderWidth: 2,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b><br>{point.percentage:.1f}% <br> WP : {point.y:,.0f} ',
                        distance: 20
                    }
                }
            },
            credits: {
                enabled: false
            },
            series: [{
                // Disable mouse tracking on load, enable after custom animation
                enableMouseTracking: false,
                animation: {
                    duration: 2000
                },
                colorByPoint: true,
                data: <?php echo $datapaycomp ?>
            }]
        });
    });
</script>