@extends('indexlayout')

@section('title', 'TPS')
@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);">Sarana & Prasarana</a></li>
                <li class="breadcrumb-item active">2024</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>
                                TPS 3R 2024
                            </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>
                                <div class="col-xl-12" style="padding-block-end: 10px">
                                    <div class="demo">
                                        <a href="{{ route('sadmin.tps.tps2') }}"><button
                                                type="button"class="btn btn-primary">2022</button></a>
                                        <a href="{{ route('sadmin.tps.tps3') }}"><button
                                                type="button"class="btn btn-secondary">2023</button></a>
                                        <a href="{{ route('sadmin.tps.tps4') }}"><button
                                                type="button"class="btn btn-success">2024</button></a>
                                        <a href="{{ route('sadmin.tps.tps') }}"><button
                                                type="button"class="btn btn-info">2025</button></a>
                                    </div>
                                </div>

                                {{-- <input type="text" id="searchInput" onkeyup="searchTable()"
                                    placeholder="Cari berdasarkan Tujuan, Sasaran, atau Indikator Kinerja Utama..."> --}}
                                <!-- datatable start -->
                                <table id="ikuTable" class="table table-bordered table-hover table-striped w-100 ">
                                    <thead style="text-align:center">
                                        <tr>
                                            <th rowspan="2">No</th>
                                            <th rowspan="2">Wilayah</th>
                                            <th colspan="3">Rencana 2025</th>
                                            <th rowspan="2" style="text-align: center">Action</th>
                                        </tr>
                                        <tr>
                                            <td>Lokasi</td>
                                            <td>Kapasitas (TPD)</td>
                                            <td>Anggaran (Rp)</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>Dinas (Perencanaan TPS3R)</td>
                                            <td>
                                                <p>1. Sunter Tanjung Priok</p>
                                                <p>2.Rawa Badak Utara</p>
                                                <p>3. THI Jelambar</p>
                                                <p>4. Kelapa Gading Barat</p>
                                                <p>5. Juanda Cilandak</p>
                                                <p>6. TPS KP Kandang Jagakarsa</p>
                                                <p>7. Tebet</p>
                                                <p>8. RW.06 Pondok Bambu</p>
                                                <p>9. RW. 10 Malaka Sari</p>
                                                <p>10. Pekayon Pasar Rebo</p>
                                                <p>11. RW. 03 Pegadungan</p>
                                                <p>12. RW. 013 Pegadungan</p>
                                                <p>13. Asrama Tegal Alur</p>
                                                <p>14. Hanura Tanah Sereal</p>
                                                <p>15. RW.01 Kembangan Utara</p>
                                            </td>
                                            <td>
                                                <p>1. Sunter Tanjung Priok Kapasitas 50 Ton </p>
                                                <p>2.Rawa Badak Utara Kapasitas 50 Ton </p>
                                                <p>3. THI Jelambar Kapasitas 50 Ton </p>
                                                <p>4. Kelapa Gading Barat Kapasitas 50 Ton </p>
                                                <p>5. Juanda Cilandak Kapasitas 50 Ton </p>
                                                <p>6. TPS KP Kandang Jagakarsa Kapasitas 50 Ton </p>
                                                <p>7. Tebet Kapasitas 50 Ton </p>
                                                <p>8. RW.06 Pondok Bambu Kapasitas 50 Ton </p>
                                                <p>9. RW. 10 Malaka Sari Kapasitas 50 Ton </p>
                                                <p>10. Pekayon Pasar Rebo Kapasitas 50 Ton </p>
                                                <p>11. RW. 03 Pegadungan Kapasitas 50 Ton </p>
                                                <p>12. RW. 013 Pegadungan Kapasitas 50 Ton </p>
                                                <p>13. Asrama Tegal Alur Kapasitas 25 Ton </p>
                                                <p>14. Hanura Tanah Sereal Kapasitas 50 Ton </p>
                                                <p>15. RW.01 Kembangan Utara Kapasitas 50 Ton </p>
                                            </td>
                                            <td>4,326,735,600</td>
                                            <td><a href="{{ route('sadmin.tps.lokasitps.lokasi2') }}"
                                                    class="btn btn-primary">Detail</a></td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>Sudin LH Jakarta Pusat</td>
                                            <td>-</td>
                                            <td>-</td>
                                            <td>-</td>
                                            <td><a href="{{ route('sadmin.tps.lokasitps.lokasi2') }}"
                                                    class="btn btn-primary">Detail</a></td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>Sudin LH Jakarta Utara</td>
                                            <td>
                                                <P>1. TPS Asrama Semper </P>
                                                <P>2. TPS Dipo Sonaji</P>
                                            </td>
                                            <td>
                                                <P>1. TPS Asrama Semper 50 ton/hr </P>
                                                <P>2. TPS Dipo Sonaji 25 ton/hr</P>
                                            </td>
                                            <td>35,144,671,652</td>
                                            <td><a href="{{ route('sadmin.tps.lokasitps.lokasi2') }}"
                                                    class="btn btn-primary">Detail</a></td>
                                        </tr>
                                        <tr>
                                            <td>4</td>
                                            <td>Sudin LH Jakarta Barat</td>
                                            <td>TPS Asrama Bambu Larangan </td>
                                            <td>kapasitas 25 ton</td>
                                            <td>13,078,117,265</td>
                                            <td><a href="{{ route('sadmin.tps.lokasitps.lokasi2') }}"
                                                    class="btn btn-primary">Detail</a></td>
                                        </tr>
                                        <tr>
                                            <td>5</td>
                                            <td>Sudin LH Jakarta Selatan</td>
                                            <td>TPS Menteng Atas</td>
                                            <td>kapasitas 25 ton</td>
                                            <td>14,112,022,121</td>
                                            <td><a href="{{ route('sadmin.tps.lokasitps.lokasi2') }}"
                                                    class="btn btn-primary">Detail</a></td>
                                        </tr>
                                        <tr>
                                            <td>6</td>
                                            <td>Sudin LH Jakarta Timur</td>
                                            <td>TPS Rawa Teratai </td>
                                            <td>50 ton/hari</td>
                                            <td>26,258,386,209</td>
                                            <td><a href="{{ route('sadmin.tps.lokasitps.lokasi2') }}"
                                                    class="btn btn-primary">Detail</a></td>
                                        </tr>
                                        <tr>
                                            <td>7</td>
                                            <td>Sudin LH Kepulauan Seribu</td>
                                            <td>Pulau Panggang</td>
                                            <td>2,4 ton/hari</td>
                                            <td>9,364,992,696</td>
                                            <td><a href="{{ route('sadmin.tps.lokasitps.lokasi2') }}"
                                                    class="btn btn-primary">Detail</a></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/iku.js') }}"></script>
        <script>
            function searchTable() {
                var input, filter, table, tr, td, i, txtValue;
                input = document.getElementById("searchInput");
                filter = input.value.toLowerCase();
                table = document.getElementById("ikuTable");
                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