<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);


?>

<div class="main-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12 mb-2">
                <div class="card">
                    <div class="card-header">
                        <h3>Pilih :</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">

                        <form class="form-sample" action="<?php base_url('rapor/deltabyr') ?>" method="post">



                            <?php if (session('tpkantor') == 'KPDJP') {
                                $disabledslct = "";
                            } else {
                                $disabledslct = "disabled";
                            }

                            if (session('tpkantor') == 'KPP') {
                                $disableslckpp = "disabled";
                            } else {
                                $disableslckpp = "";
                            }
                            ?>
                            <div class="row row-cols-1 row-cols-md-2">
                                <div class="col-md-6 col-sm-12">
                                    <label class="my-1 mr-2">Kanwil </label>
                                    <select class="custom-select my-1 mr-sm-2" id="kwl" name="kwl" <?php echo $disabledslct ?>>
                                        <?php if(session('tpkantor') == 'KPDJP'){
                                             echo "<option value='semua'>Nasional</option>";
                                        }
                                       ?>
                                        <?php


                                        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">KPP </label>
                                    <select class="custom-select my-1 mr-sm-2" id="kpp" name="kpp" <?php echo $disableslckpp ?>>
                                    </select>
                                    <label class="my-1 mr-2">Seksi </label>
                                    <select class="custom-select my-1 mr-sm-2" id="seksi" name="seksi">
                                    </select>
                                    
                                   
                                </div>
                                <div class="col-md-6 col-sm-12">
                                    <label class="my-1 mr-2">AR </label>
                                    <select class="custom-select my-1 mr-sm-2" id="nip" name="nip">
                                    </select>
                                    <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></label>

                                    <label class="my-1 mr-2">Bulan </label>
                                    <select class="custom-select my-1 mr-sm-2" id="bulan" name="bulan">
                                        <?php
                                        foreach ($refbulan as $rowb) {
                                            if ($rowb->KODE == $bulany) {
                                                $isSelected = ' selected="selected"';
                                            } else {
                                                $isSelected = '';
                                            }
                                            echo "<option value='" . $rowb->KODE . "'" . $isSelected . ">" . ucfirst(strtolower($rowb->NM_PANJANG)) . "</option>";
                                        }
                                        ?>
                                    </select>
                                    <label class="my-1 mr-2">s.d. Bulan </label>
                                     <select class="custom-select my-1 mr-sm-2" id="bulan1" name="bulan1">
                                        <?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 btn-lg active mt-5 float-right">Proses</button>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
        <div class="row clearfix">
             <div class="col-lg-2 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>WP Terdaftar <?= $tahunx?> </h6>
                                <h6><b>76.417.527</b></h6>
                            </div>
                            <div class="icon text-green">
                                <i class="ik ik-award"></i>
                            </div>
                        </div>
                        
                    </div>
                    
                </div>
            </div>
            <div class="col-lg-2 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>WP Bayar <?= $tahunx ?></h6>
                                <h6><b>2.187.232</b></h6>
                            </div>
                            <div class="icon">
                                <i class="ik ik-thumbs-up text-blue"></i>
                            </div>
                        </div>
                        
                    </div>
                   
                </div>
            </div>
            <div class="col-lg-2 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>Ratio % </h6>
                                <h6><b>2.86%</b></h6>
                            </div>
                            <div class="icon">
                                <i class="ik ik-calendar text-orange"></i>
                            </div>
                        </div>
                       
                          </small>
                    </div>
                    
                </div>
            </div>

            <div class="col-lg-2 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>WP Bayar Teratur 2024</h6>
                                <h6><b>499.765</b></h6>
                            </div>
                            <div class="icon">
                                <i class="ik ik-calendar text-orange"></i>
                            </div>
                        </div>
                       
                          </small>
                    </div>
                    
                </div>
            </div>

            <div class="col-lg-2 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>Ratio Bayar Teratur % </h6>
                                <h6><b>22,85%</b></h6>
                            </div>
                            <div class="icon">
                                <i class="ik ik-calendar text-orange"></i>
                            </div>
                        </div>
                       
                          </small>
                    </div>
                    
                </div>
            </div>

           
        </div>

         <div class="row clearfix">
             <div class="col-lg-2 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>WP Terdaftar <?= $tahunx -1?> </h6>
                                <h6><b>73.354.233</b></h6>
                            </div>
                            <div class="icon text-green">
                                <i class="ik ik-award"></i>
                            </div>
                        </div>
                        
                    </div>
                    
                </div>
            </div>
            <div class="col-lg-2 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>WP Bayar <?= $tahunx -1?></h6>
                                <h6><b>2.447.784</b></h6>
                            </div>
                            <div class="icon">
                                <i class="ik ik-thumbs-up text-blue"></i>
                            </div>
                        </div>
                        
                    </div>
                   
                </div>
            </div>
            <div class="col-lg-2 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>Ratio % </h6>
                                <h6><b>3.34%</b></h6>
                            </div>
                            <div class="icon">
                                <i class="ik ik-calendar text-orange"></i>
                            </div>
                        </div>
                       
                          </small>
                    </div>
                    
                </div>
            </div>

            <div class="col-lg-2 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>WP Bayar Teratur 2023</h6>
                                <h6><b>490.428</b></h6>
                            </div>
                            <div class="icon">
                                <i class="ik ik-calendar text-orange"></i>
                            </div>
                        </div>
                       
                          </small>
                    </div>
                    
                </div>
            </div>

            <div class="col-lg-2 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>Ratio Bayar Teratur % </h6>
                                <h6><b>20,03%</b></h6>
                            </div>
                            <div class="icon">
                                <i class="ik ik-calendar text-orange"></i>
                            </div>
                        </div>
                       
                          </small>
                    </div>
                    
                </div>
            </div>

           
        </div>

        


    </div>
</div>








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

<script>
    $(function () {
        $("#tablekat").tablesorter({
            usNumberFormat: false
        });
    });
</script>

<script>
    $(document).ready(function () {

        $('#kwl').change(function () {

            var kwl = $('#kwl').val();
            var kpp = $('#kpp').val();
            if (kwl != '') {
                $.ajax({
                    url: "<?php echo base_url('/ref/getKPP'); ?>",
                    method: "POST",
                    data: {
                        kwl: kwl
                    },
                    dataType: "JSON",
                    success: function (data) {
                        $('select[name="kpp"]').empty();
                        $('select[name="kpp"]').append('<option value="SEMUA">Semua</option>');
                        $.each(data, function (key, value) {
                            $('select[name="kpp"]').append('<option value="' + value.KD_KPP + '">' + value.NM_KANTOR + '</option>');
                        });
                        <?php
                        if ($kppx != '') { ?>

                            $('#kpp').val('<?php echo $kppx ?>').change();
                            $('#seksi').change();

                        <?php } ?>


                    }
                });
            } else {
                $('#kpp').val('');
            }
        });
        <?php
        if ($kwlx != '') { ?>

            $('#kwl').val('<?php echo $kwlx ?>').change();

        <?php } ?>


        $('#kpp').change(function () {
            var kpp = $('#kpp').val();
            if (kpp == '' || kpp == 'SEMUA') {
                $('#seksi').attr('disabled', true);
            } else {
                $('#seksi').attr('disabled', false);
            }
            if (seksi != '') {
                $.ajax({
                    url: "<?php echo base_url('/ref/getSeksi'); ?>",
                    method: "POST",
                    data: {
                        kpp: kpp,
                    },
                    dataType: "JSON",
                    success: function (datas) {
                        $('select[name="seksi"]').empty();
                        $('select[name="seksi"]').append('<option value="SEMUA">Semua</option>');
                        $.each(datas, function (key, value) {
                            $('select[name="seksi"]').append('<option value="' + value.KODESIE + '">' + value.SEKSI + ' - ' + value.NAMA + '</option>');
                        });

                        <?php
                        if ($seksix != '') { ?>

                            $('#seksi').val('<?php echo $seksix ?>').change();
                            $('#nip').change();

                        <?php } ?>
                    }
                });
            } else {
                $('#seksi').val('');
            }
        });
        <?php
        if ($kppx != '') { ?>
            $('#kpp').change();

        <?php } ?>


        $('#seksi').change(function () {
            var kpp = $('#kpp').val();
            var seksi = $('#seksi').val();
            var nip = $('#nip').val()

            if (seksi == '' || seksi == 'SEMUA') {
                $('#nip').attr('disabled', true);
            } else {
                $('#nip').attr('disabled', false);
            }
            if (seksi != '') {
                $.ajax({
                    url: "<?php echo base_url('/ref/getAR'); ?>",
                    method: "POST",
                    data: {
                        kpp: kpp,
                        seksi: seksi
                    },
                    dataType: "JSON",
                    success: function (datas) {
                        $('select[name="nip"]').empty();
                        $('select[name="nip"]').append('<option value="SEMUA">Semua</option>');
                        $.each(datas, function (key, value) {
                            $('select[name="nip"]').append('<option value="' + value.NIP + '">' + value.NIP + ' - ' + value.NAMA + '</option>');
                        });
                        <?php
                        if ($nipx != '') { ?>

                            $('#nip').val('<?php echo $nipx ?>').change();

                        <?php } ?>
                    }
                });
            } else {
                $('#nip').val('');
            }
        });
        <?php
        if ($seksix != '') { ?>
            $('#seksi').change();

        <?php } ?>
    });
</script>