@extends('indexlayout')

@section('title', 'anggaran')
@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);">Capaian Kinerja dan Anggaran</a></li>
                <li class="breadcrumb-item active">Anggaran</li>
                {{-- <li class="breadcrumb-item active">UPSBA</li>
                <li class="breadcrumb-item active">Alat Berat</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-lg-12">
                    <div id="panel-6" class="panel">
                        <div class="panel-hdr">
                            <h2>
                                Statistik Postur Anggaran
                            </h2>
                        </div>
                        <div class="panel-container show">
                            <div id="chartposturanggaran">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div id="panel-6" class="panel col-lg-12 ">
                    {{-- <div class="panel-hdr">
                        <h2></h2>
                    </div> --}}
                    <div class="panel-container show">
                        <div class="panel-content p-0 mb-1 m-3">

                        </div>
                        <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>
                            <!-- datatable start -->
                            <table id="dt-posturanggaran" class="table table-bordered table-hover table-striped w-100 warp">
                                <thead class="bg-warning">
                                    <tr>
                                        <th>URUSAN DLH</th>
                                        <th colspan="2">PENETAPAN APBD TA 2024</th>
                                        <th colspan="2">RAPERDA PERUBAHAN 2024</th>
                                        <th colspan="2">RKPD 2025</th>
                                        <th colspan="2">RANCANGAN KUA-PPAS 2025</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Belanja Pegawai</td>
                                        <td> 223,170,462,000 </td>
                                        <td>-</td>
                                        <td>200,275,870,910</td>
                                        <td>4.51%</td>
                                        <td>229,592,411,195</td>
                                        <td>6.61%</td>
                                        <td>229,592,411,195</td>
                                        <td>5.77%</td>
                                    </tr>
                                    <tr>
                                        <td>Belanja Operasi</td>
                                        <td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>PILP (total)</td>
                                        <td>1,229,281,912,402</td>
                                        <td>31.53%</td>
                                        <td>1,212,004,050,375</td>
                                        <td>27.32%</td>
                                        <td>1,248,849,981,182</td>
                                        <td>35.93%</td>
                                        <td>1,249,617,985,942</td>
                                        <td>31.41%</td>
                                    </tr>
                                    <tr>
                                        <td>Operasional Angkutan Sampah (BBM, Tol, Pemeliharaan KDO, Perizinan, Penunjang
                                            Penanganan)</td>
                                        <td>735,592,648,911</td>
                                        <td>18.87%</td>
                                        <td>1,011,286,644,374</td>
                                        <td>22.79%</td>
                                        <td>1,084,051,139,946</td>
                                        <td>31.19%</td>
                                        <td>1,179,875,348,748</td>
                                        <td>29.66%</td>
                                    </tr>
                                    <tr>
                                        <td>Operasional Pengolahan Sampah (RDF, TPS, Pemusnah Sampah) termasuk operasional
                                            TPST BG</td>
                                        <td>1,720,243,404,194</td>
                                        <td>44.13%</td>
                                        <td>1,759,458,148,441</td>
                                        <td>39.66%</td>
                                        <td>649,237,210,937</td>
                                        <td>18.68%</td>
                                        <td>983,504,642,294</td>
                                        <td>24.72%</td>
                                    </tr>
                                    <tr>
                                        <td>Pengelolaan Sampah</td>
                                        <td>12,194,154,378</td>
                                        <td>0.31%</td>
                                        <td>14,470,466,182</td>
                                        <td>39.66%</td>
                                        <td>17,085,880,242</td>
                                        <td>18,042,557,606</td>
                                        <td>0.45%</td>
                                    </tr>
                                    <tr>
                                        <td>Pengelolaan Lingkungan</td>
                                        <td>80,646,707,802</td>
                                        <td>2.07%</td>
                                        <td>119,899,760,563</td>
                                        <td>2.70%</td>
                                        <td>95,107,684,007</td>
                                        <td>2.74%</td>
                                        <td>138,494,120,421</td>
                                        <td>3.49%</td>
                                    </tr>
                                    <tr>
                                        <td>Penunjang Operasional Kantor</td>
                                        <td>120,532,698,198</td>
                                        <td>3.09%</td>
                                        <td>119,173,855,119</td>
                                        <td>2.69%</td>
                                        <td>152,019,395,863</td>
                                        <td>4.37%</td>
                                        <td>178,483,603,529</td>
                                        <td>4.49%</td>
                                    </tr>

                                </tbody>
                                <tfooter>
                                    <tr class="bg-warning">
                                        <td>Total</td>
                                        <td>4,121,638,987,885</td>
                                        <td>100.00%</td>
                                        <td>4,436,569,195,964</td>
                                        <td>3,475,943,703,372</td>
                                        <td>3,977,902,669,735</td>
                                        <td>100%</td>
                                        <td>3,977,992,669,735</td>
                                        <td>100%</td>
                                    </tr>
                                </tfooter>
                            </table>
                            <!-- datatable end -->
                        </div>
                    </div>
                </div>

            </div>




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

    </main>
    </div>

@endsection

@push('script')
    <!-- The order of scripts is irrelevant. Please check out the plugin pages for more details about these plugins below: -->
    <script src="{{ asset('layout/dist/js/statistics/peity/peity.bundle.js') }}"></script>
    <script src="{{ asset('layout/dist/js/statistics/flot/flot.bundle.js') }}"></script>
    <script src="{{ asset('layout/dist/js/statistics/easypiechart/easypiechart.bundle.js') }}"></script>
    <script src="{{ asset('layout/dist/js/datagrid/datatables/datatables.bundle.js') }}"></script>
    {{-- <script src="{{  asset('layout/dist/js/statistics/chartjs/chartjs.bundle.js') }}"></script> --}}
    {{-- <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> --}}
    <script src="{{ asset('layout/dist/js/alatberat.js') }}"></script>
    <script src="{{ asset('layout/dist/js/posturanggaran.js') }}"></script>
    <script>
        function searchTable() {
            var input, filter, table, tr, td, i, txtValue;
            input = document.getElementById("searchInput");
            filter = input.value.toLowerCase();
            table = document.getElementById("dt-posturanggaran");
            tr = table.getElementsByTagName("tr");

            for (i = 1; i < tr.length; i++) {
                tr[i].style.display = "none"; // Hide all rows initially
                td = tr[i].getElementsByTagName("td");

                for (var j = 0; j < td.length; j++) {
                    if (td[j]) {
                        txtValue = td[j].textContent || td[j].innerText;
                        if (txtValue.toLowerCase().indexOf(filter) > -1) {
                            tr[i].style.display = ""; // Show row if match is found
                            break;
                        }
                    }
                }
            }
        }
    </script>
@endpush
