@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);">Realisasi Kinerja & Anggaran </a></li>
            <li class="breadcrumb-item">Kinerja</li>
            <li class="breadcrumb-item">Kegiatan</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>
                            Kegiatan
                        </h2>
                    </div>
                    <div class="panel-container show">
                        <div class="panel-content table">

                            <!-- datatable start -->
                            <main>
                                <div class="container">
                                    <!-- Table -->
                                    <table class="table">
                                        <thead id="table-head"></thead>
                                        <tbody id="table-body"></tbody>
                                    </table>
                                    <!-- Table -->
                                </div>
                            </main>
                            <!-- 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="{{ asset('layout/dist/js/kegiatan.js') }}"></script>
    <script type="text/javascript" src="js/mdb.min.js"></script>
    <!-- Google API -->
    <script src="https://apis.google.com/js/api.js"></script>
    <!-- easyData -->
    <script type="text/javascript" src="js/easyData-google-sheets.js"></script>

    <!-- easyData - Creating table -->
    <script>
        {
            {
                // Your API KEY
                const API_KEY = "";

                function displayResult2(response) {
                    let tableHead = "";
                    let tableBody = "";

                    response.result.values.forEach((row, index) => {
                        if (index === 0) {
                            tableHead += "<tr>";
                            row.forEach((val) => (tableHead += "<th>" + val + "</th>"));
                            tableHead += "</tr>";
                        } else {
                            tableBody += "<tr>";
                            row.forEach((val) => (tableBody += "<td>" + val + "</td>"));
                            tableBody += "</tr>";
                        }
                    });

                    document.getElementById("table-head").innerHTML = tableHead;
                    document.getElementById("table-body").innerHTML = tableBody;
                }

                function loadData() {
                    // Spreadsheet ID
                    const spreadsheetId = "16iMJo0ZqSkdL9NHMIdl1mOz9_x0yVgZXwpGRsHyQycc";
                    const range = "A:Z";
                    getPublicValues({
                        spreadsheetId,
                        range
                    }, displayResult2);
                }

                window.addEventListener("load", (e) => {
                    initOAuthClient({
                        apiKey: API_KEY
                    });
                });

                document.addEventListener("gapi-loaded", (e) => {
                    loadData();
                });
            }
        }
    </script>
@endpush