@extends('indexlayout')

@section('title', 'Dinas')
@push('style')
@endpush
@section('content')
    <main id="js-page-content" role="main" class="page-content">
        <ol class="breadcrumb page-breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0);">Aspirasi Masyarakat</a></li>
            <li class="breadcrumb-item active">Monev KSD</li>
            <li class="breadcrumb-item active">Sudin Utara</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>
                            Rekapitulasi Aspirasi Masyarakat Sistem Monev 2024 - Sudin Utara
                        </h2>
                        <div class="panel-toolbar">
                            <button class="btn btn-panel" data-action="panel-collapse" data-toggle="tooltip"
                                data-offset="0,10" data-original-title="Collapse"></button>
                            <button class="btn btn-panel" data-action="panel-fullscreen" data-toggle="tooltip"
                                data-offset="0,10" data-original-title="Fullscreen"></button>
                            <button class="btn btn-panel" data-action="panel-close" data-toggle="tooltip" data-offset="0,10"
                                data-original-title="Close"></button>
                        </div>
                    </div>
                    <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: 15px">
                                <div class="position-absolute pos-top pos-right d-none d-sm-block">
                                    <a href="https://docs.google.com/spreadsheets/d/1gIwwTx7_M9M3m6gFYBJkLhTcd0nAlZru/edit?gid=441173942#gid=441173942"
                                        target="blank"><button type="button"class="btn btn-primary">Update</button></a>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-xl-12">
                                    <div class="panel-container show">
                                        <div class="panel-content table">
                                            <div
                                                style="overflow-x:auto; white-space: nowrap;  display: block; width: 100%;">
                                                <!-- datatable start -->
                                                <table id="data-table"
                                                    class="table table-bordered table-hover table-striped w-100">

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

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

@endsection

@push('script')
    <script src="{{ asset('layout/dist/js/datagrid/datatables/datatables.bundle.js') }}"></script>
    <script src="{{ asset('layout/dist/js/program.js') }}"></script>

    <script>
        $(document).ready(function() {
            $("#data-tabel").dataTable({
                responsive: true,
            });
        });
    </script>
    <script>
        const sheetID = '1gIwwTx7_M9M3m6gFYBJkLhTcd0nAlZru'; // Ganti dengan ID sheet Anda
        const gid = '441173942'; // Ganti dengan GID sheet Anda
        const url =
            `https://docs.google.com/spreadsheets/d/${sheetID}/gviz/tq?tqx=out:json&gid=${gid}`; // Menggunakan Banyak Sheet
        // const url = `https://docs.google.com/spreadsheets/d/${sheetID}/gviz/tq?tqx=out:json`; // Menggunakan satu Sheet

        fetch(url)
            .then(response => response.text())
            .then(data => {
                const jsonData = JSON.parse(data.substr(47).slice(0, -2)); // Menghapus prefix dan suffix
                const table = document.getElementById('data-table');
                const rows = jsonData.table.rows;


                // Membuat header tabel
                const headerRow = document.createElement('tr');
                jsonData.table.cols.forEach(col => {
                    const th = document.createElement('th');
                    th.textContent = col.label;
                    headerRow.appendChild(th);
                });
                table.appendChild(headerRow);

                // Membuat baris tabel
                rows.forEach(row => {
                    const tr = document.createElement('tr');
                    row.c.forEach(cell => {
                        const td = document.createElement('td');
                        td.textContent = cell ? cell.v : ''; // Menangani nilai null
                        tr.appendChild(td);
                    });
                    table.appendChild(tr);
                });
            })
            .catch(error => console.error('Error fetching data:', error));
    </script>
    <script>
        function searchTable() {
            var input, filter, table, tr, td, i, txtValue;
            input = document.getElementById("searchInput");
            filter = input.value.toLowerCase();
            table = document.getElementById("data-table");
            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