@extends('indexlayout')

@section('title', 'saringan')
@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">Jumlah Saringan</li>
                <li class="breadcrumb-item active">Tahun 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-container show">

                            <div class="panel-content">
                                <div class="col-xl-3" style="padding: 10px">
                                    <div id="js_default_list ">
                                        <div class="input-group">
                                            <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.upsba.titikpenanganan') }}"><button
                                                type="button"class="btn btn-primary">Titik Penanganan</button></a>
                                    </div>
                                </div>

                                <!-- datatable start -->
                                <table id="dt-saringan" class="table table-bordered table-hover table-striped w-100">

                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>Kode Barang</th>
                                            <th>Register</th>
                                            <th>Jenis Barang</th>
                                            <th>Ukuran</th>
                                            <th>Satuan</th>
                                            <th>Tanggal Perolehan</th>
                                            <th>Keterangan</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>134020405010</td>
                                            <td>1</td>
                                            <td>Peralatan Saringan Sampah (Pond Screen)</td>
                                            <td>1</td>
                                            <td>UN</td>
                                            <td>31/12/2004</td>
                                            <td>Saringan Sampah Teluk Gong - Penjaringan</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>134020405010</td>
                                            <td>2</td>
                                            <td>Peralatan Saringan Sampah (Pond Screen)</td>
                                            <td>1</td>
                                            <td>UN</td>
                                            <td>31/12/2004</td>
                                            <td>Saringan Sampah Spillway Waduk Pluit - Penjaringan</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>134020405010</td>
                                            <td>3</td>
                                            <td>Peralatan Saringan Sampah (Pond Screen)</td>
                                            <td>1</td>
                                            <td>UN</td>
                                            <td>31/12/2004</td>
                                            <td>Saringan Sampah ME-H Sekretaris - Grogol Petamburan</td>
                                        </tr>
                                        <tr>
                                            <td>4</td>
                                            <td>134020405010</td>
                                            <td>4</td>
                                            <td>Peralatan Saringan Sampah (Pond Screen)</td>
                                            <td>1</td>
                                            <td>UN</td>
                                            <td>31/12/2004</td>
                                            <td>Saringan Sampah Kebayoran Lama Palmerah - Kebayoran Lama</td>
                                        </tr>
                                        <tr>
                                            <td>5</td>
                                            <td>134020405010</td>
                                            <td>5</td>
                                            <td>Peralatan Saringan Sampah (Pond Screen)</td>
                                            <td>1</td>
                                            <td>UN</td>
                                            <td>31/12/2004</td>
                                            <td>Saringan Sampah Perintis Kemerdekaan - Pulo Gadung</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <!-- datatable end -->
                            </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/chartist/chartist.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/grafik.js') }}"></script> --}}
    <script src="{{ asset('layout/dist/js/upsba/saringan.js') }}"></script>
    {{-- <script src="{{ asset('layout/dist/js/chart.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-saringan");
            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