@extends('indexlayout')

@section('title', 'Perkin')
@push('style')
@endpush
@section('content')
    <div class="row">
        <main id="js-page-content" role="main" class="page-content">
            <ol class="breadcrumb page-breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:void(0);">Perjanjian Kinerja</a></li>
                <li class="breadcrumb-item active">2023-2026</li>
                <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
            </ol>

            <div class="row">
                <div class="col-xl-12">
                    <div id="panel-1" class="panel">
                        <div class="panel-hdr">
                            <h2>
                                Tabel Perjanjian Kinerja
                            </h2>
                        </div>
                        <div class="panel-container show">

                            <div class="panel-content">
                                {{-- <div class="col-xl-3">
                                    <div id="js_default_list ">
                                        <div class="input-group mb-g">
                                            <input type="text" class="form-control form-control-lg shadow-inset-2"
                                                onkeyup="searchTable()" id="searchInput" placeholder="Filter list">
                                            <div class="input-group-append">
                                                <div class="input-group-text">
                                                    <i class="fal fa-search fs-xl"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div> 
                                table table-bordered table-hover table-striped w-100 " --}}
                                {{-- <input type="text" id="searchInput" onkeyup="searchTable()"
                                    placeholder="Cari berdasarkan Tujuan, Sasaran, atau Indikator Kinerja Utama..."> --}}
                                <!-- datatable start -->
                                <div id="demo_info" class="box"></div>
                                <table id="dt-perkin" class="display" style="width:100%">
                                    <thead class="bg-highlight" style="text-align:center">
                                        <tr>
                                            <th rowspan="2">No</th>
                                            <th rowspan="2">Sasaran</th>
                                            <th rowspan="2">INDIKATOR KINERJA UTAMA (IKU)</th>
                                            <th rowspan="2">Sumber Data</th>
                                            <th rowspan="2">Pengukuran Kinerja</th>
                                            <th colspan="4">Triwulan</th>
                                            <th colspan="2">Tahunan</th>
                                            <th rowspan="2">Keterangan</th>
                                        </tr>
                                        <tr>
                                            <td>I</td>
                                            <td>II</td>
                                            <td>III</td>
                                            <td>IV</td>
                                            <td>2023</td>
                                            <td>2024</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td class="left-align">Pengelolaan Sampah Kota yang Kolaboratif
                                                dan Berkelanjutan</td>
                                            <td class="left-align">Persentase Pengelolaan Sampah</td>
                                            <td class="left-align">e-SAKIP</td>
                                            <td>
                                                <p>Dasar Hukum:</p>
                                                <p> 1. Permen LHK No.6 tahun 2022 tentang Sistem Informasi Pengelolaan
                                                    Sampah Nasional (SIPSN)</p>
                                                <p> 2. Peraturan Gubernur DKI Jakarta No.108 Tahun 2019 tentang Kebijakan
                                                    dan Strategi Daerah Provinsi Daerah Khusus Ibukota Jakarta Dalam
                                                    Pengelolaan Sampah Rumah Tangga dan Sampah Sejenis Sampah Rumah Tangga
                                                </p>
                                                <p>Definisi:</p>
                                                <p>Pengelolaan Sampah adalah kegiatan yang sistematis, menyeluruh dan
                                                    berkesinambungan yang meliputi pengurangan dan penanganan sampah</p>
                                                <p>Metode Pengukuran :</p>
                                                <p>Penjumlahan persentase penanganan sampah dan pengurangan sampah</p>
                                                <p>Sumber Data:</p>
                                                <p>Perhitungan mandiri Dinas Lingkungan Hidup</p>
                                            </td>
                                            <td>N/A</td>
                                            <td>N/A</td>
                                            <td>N/A</td>
                                            <td>100</td>
                                            <td>99</td>
                                            <td>100</td>
                                            <td>Persen</td>
                                        </tr>
                                        <tr>
                                            <td rowspan="1">2</td>
                                            <td rowspan="1" class="left-align">Optimalisasi Pengurangan dan Penanganan
                                                Sampah yang Kolaboratif serta Berwawasan Lingkungan</td>
                                            <td class="left-align">1. Persentase pengurangan sampah</td>
                                            <td class="left-align">e-SAKIP</td>
                                            <td>
                                                <p>Dasar Hukum:</p>
                                                <p> 1. Permen LHK No.6 tahun 2022 tentang Sistem Informasi Pengelolaan
                                                    Sampah Nasional (SIPSN)</p>
                                                <p> 2. Peraturan Gubernur DKI Jakarta No.108 Tahun 2019 tentang Kebijakan
                                                    dan Strategi Daerah Provinsi Daerah Khusus Ibukota Jakarta Dalam
                                                    Pengelolaan Sampah Rumah Tangga dan Sampah Sejenis Sampah Rumah Tangga
                                                </p>
                                                <p>Definisi:</p>
                                                <p>Total pengurangan sampah dibagi total timbulan sampah dikali 100%</p>
                                                <p>Metode Pengukuran :</p>
                                                <p>Pengurangan sampah adalah kegiatan pembatasan timbulan sampah, pendauran
                                                    ulang sampah dan/atau pemanfaatan kembali sampah </p>
                                                <p>Sumber Data:</p>
                                                <p>Perhitungan mandiri Dinas Lingkungan Hidup</p>
                                            </td>
                                            <td>N/A</td>
                                            <td>28</td>
                                            <td>N/A</td>
                                            <td>28</td>
                                            <td>27</td>
                                            <td>28</td>
                                            <td>Persen</td>
                                        </tr>
                                        <tr>
                                            <td rowspan="1"></td>
                                            <td rowspan="1" class="left-align"></td>
                                            <td class="left-align">2. Persentase penanganan sampah</td>
                                            <td class="left-align">e-SAKIP</td>
                                            <td>
                                                <p>Dasar Hukum:</p>
                                                <p> 1. Permen LHK No.6 tahun 2022 tentang Sistem Informasi Pengelolaan
                                                    Sampah Nasional (SIPSN)</p>
                                                <p> 2. Peraturan Gubernur DKI Jakarta No.108 Tahun 2019 tentang Kebijakan
                                                    dan Strategi Daerah Provinsi Daerah Khusus Ibukota Jakarta Dalam
                                                    Pengelolaan Sampah Rumah Tangga dan Sampah Sejenis Sampah Rumah Tangga
                                                </p>
                                                <p>Definisi:</p>
                                                <p>Penanganan sampah adalah kegiatan pemilahan sampah, pengumpulan sampah,
                                                    pengangkutan sampah, pengolahan sampah, dan pemrosesan akhir sampah</p>
                                                <p>Metode Pengukuran :</p>
                                                <p>Total penanganan sampah dibagi total timbulan sampah dikali 100%</p>
                                                <p>Sumber Data:</p>
                                                <p>Data penimbangan sampah Dinas Lingkungan Hidup Provinsi DKI Jakarta</p>
                                            </td>
                                            <td>N/A</td>
                                            <td>71</td>
                                            <td>N/A</td>
                                            <td>72</td>
                                            <td>72</td>
                                            <td>72</td>
                                            <td>Persen</td>
                                        </tr>

                                    </tbody>
                                </table>
                                <!-- datatable end -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </main>

    @endsection

    @push('script')
        <script src="{{ asset('layout/dist/js/datagrid/datatables/datatables.bundle.js') }}"></script>
        {{-- <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> --}}
        <script src="{{ asset('layout/dist/js/tabel.js') }}"></script>
        <script src="{{ asset('layout/dist/js/linechart.js') }}"></script>
        <script src="{{ asset('layout/dist/js/perkin.js') }}"></script>
        <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
        <script src="https://cdn.datatables.net/2.1.8/js/dataTables.js"></script>
        {{-- <script>
            new DataTable('#dt-perkin');
        </script> --}}
        <script>
            function eventFired(type) {
                let n = document.querySelector('#demo_info');
                n.innerHTML +=
                    '<div>' + type + ' event - ' + new Date().getTime() + '</div>';
                n.scrollTop = n.scrollHeight;
            }

            new DataTable('#dt-perkin')
                .on('order.dt', () => eventFired('Order'))
                .on('search.dt', () => eventFired('Search'))
                .on('page.dt', () => eventFired('Page'));
        </script>
    @endpush