@extends('indexlayout')

@section('title', 'detail')
@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 DAN UKPD</a></li>
                <li class="breadcrumb-item active">Program Anggaran</li>
                <li class="breadcrumb-item active">Status</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>
                        </div>
                        <div class="panel-container show">

                            <div class="panel-content">
                                <div class="col-xl-12" style="padding-block-end: 5px">
                                    <div class="demo">
                                        <dl class="row" style="padding: 5px 0 0 0 ">
                                            <dt class="col-sm-1">Sasaran </dt>
                                            <dd class="col-sm-11">: Pengurangan Pencemaran Lingkungan melalui Upaya
                                                Preventif dan Pengendalian yang Intensif</dd>
                                            <dt class="col-sm-1">Indikator Kinerja </dt>
                                            <dd class="col-sm-11">: PERSENTASE PENINGKATAN STATUS INDEKS STANDAR PENCEMARAN
                                                UDARA (ISPU) </dd>
                                        </dl>
                                    </div>
                                </div>
                                <!-- datatable start -->
                                <table id="dt-tusar-detail" class="table table-bordered table-hover table-striped w-100 "
                                    style="padding: -15px 0 0 0">
                                    <thead>
                                        <tr>
                                            <th>Triwulan</th>
                                            <th>Target</th>
                                            <th>Realisasi</th>
                                            <th>Capaian</th>
                                            <th>Keterangan/Evaluasi</th>
                                            <th>Validasi</th>
                                            <th>Keterangan Validasi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>TW 1</td>
                                            <td>-</td>
                                            <td>-</td>
                                            <td>N/A</td>
                                            <td>
                                                <p>tidak ada target di tw.1</p>
                                            </td>
                                            <td>Valid</td>
                                            <td>tidak ada target di tw.1</td>
                                        <tr>
                                            <td>TW 2</td>
                                            <td>-</td>
                                            <td>-</td>
                                            <td>N/A</td>
                                            <td>
                                                <p>Tidak ada target di Triwulan 2</p>
                                            </td>
                                            <td>Valid</td>
                                            <td>Tidak ada target di Triwulan 2</td>
                                        </tr>
                                        <tr>
                                            <td>TW 3</td>
                                            <td>-</td>
                                            <td>-</td>
                                            <td>N/A</td>
                                            <td>
                                                <p>Tidak ada target di TW III tahun 2024</p>
                                            </td>
                                            <td>Valid</td>
                                            <td>Tidak ada target di TW.III</td>
                                        </tr>
                                        <tr>
                                            <td>TW 4</td>
                                            <td>64.5</td>
                                            <td>-</td>
                                            <td>-</td>
                                            <td>
                                                <p>-</p>
                                            </td>
                                            <td>Belum Valid</td>
                                            <td>-</td>
                                        </tr>
                                        </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/tusardetail.js') }}"></script>
    {{-- <script src="{{ asset('layout/dist/js/chart.js') }}"></script> --}}
@endpush