@extends('layouts.master')

@push('plugin-styles')
<link rel="stylesheet" href="{{ asset('https://use.fontawesome.com/releases/v5.8.1/css/all.css') }}">
{!! Html::style('/assets/plugins/select2/select2.min.css') !!}

@endpush

@section('content')
<div class="row mb-3">
    <div class="col-lg-6">
        <h5 class="mb-3 mb-md-0">{{ENV('APP_TITLE')}}</h5>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header text-uppercase">Rencana Kinerja Tahunan</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-3">
                        <div class="form-group">
                            <select class="js-example-basic-single w-100">
                                <option>Filter Berdasarkan Tahun</option>
                                <option>2020</option>
                                <option>2019</option>
                                <option>2018</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group">
                            <select class="js-example-basic-single w-100">
                                <option>Filter Berdasarkan APBD</option>
                                <option>APBD Murni</option>
                                <option>APBD Perubahan</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <select class="js-example-basic-single w-100">
                                <option>Filter Berdasarkan SKPD</option>
                                <option selected>Dinas Komunikasi dan Informatika</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div id="accordion" class="accordion" role="tablist">
                    <div class="card" style="border-radius:8px !important;">
                        <div class="card-header bg-danger p-3" role="tab" id="headingOne">
                            <h6 class="mb-0">
                                <a data-toggle="collapse" href="#collapseOne" aria-expanded="false"
                                    aria-controls="collapseOne" style="color:#fff !important;">
                                    SASARAN
                                </a>
                            </h6>
                        </div>
                        <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne"
                            data-parent="#accordion">
                            <div class="card-body">
                                <div class="table-responsive" style="border-radius:2px !important;">
                                    <table class="table table-bordered table-hover table-sm">
                                        <thead>
                                            <tr>
                                                <th class="text-center pt-3 pb-3">No</th>
                                                <th class="pt-3 pb-3">Sasaran Strategis / Indikator Kinerja Sasaran</th>
                                                <th class="text-center pt-3 pb-3">Satuan</th>
                                                <th class="text-center pt-3 pb-3">Target 2019</th>
                                                <th class="text-center pt-3 pb-3">IKU</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td rowspan="2" class="text-center" style="vertical-align:top">
                                                    <small><b>1</b></small></td>
                                                <td colspan="4"><small><b>Meningkatnya pemanfaatan teknologi informasi
                                                            dan
                                                            komunikasi dalam rangka pelayanan kepada
                                                            masyarakat</b></small></td>
                                            </tr>
                                            <tr>
                                                <td class="pl-4"><small>1. Presentase pemanfaatan teknologi informasi
                                                        dan
                                                        komunikasi</small></td>
                                                <td class="text-center"><small>%</small></td>
                                                <td class="text-center"><small>18</small></td>
                                                <td class="text-center">
                                                    <small>
                                                        <i class="fas fa-check-circle"
                                                            style="color:green !important; font-size:0.75rem !important;"></i>
                                                    </small>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td rowspan="4" class="text-center" style="vertical-align:top">
                                                    <small><b>2</b></small></td>
                                                <td colspan="4"><small><b>Meningkatkan Pelayanan kesekretariatan untuk
                                                            mendukung kinerja perangkat daerah dalam rangka mewujudkan
                                                            good
                                                            governance</b></small></td>
                                            </tr>
                                            <tr>
                                                <td class="pl-4"><small>1. Indeks Survey kepuasan Masyarakat</small>
                                                </td>
                                                <td class="text-center"><small>Nilai</small></td>
                                                <td class="text-center"><small>78,5</small></td>
                                                <td class="text-center">
                                                    <small>
                                                        <i class="fas fa-check-circle"
                                                            style="color:green !important; font-size:0.75rem !important;"></i>
                                                    </small>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="pl-4"><small>2. Prosentase Meningkatnya Pelayanan
                                                        Administrasi
                                                        Perkantoran</small></td>
                                                <td class="text-center"><small>%</small></td>
                                                <td class="text-center"><small>40</small></td>
                                                <td class="text-center">
                                                    <small>
                                                        <i class="fas fa-check-circle"
                                                            style="color:green !important; font-size:0.75rem !important;"></i>
                                                    </small>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="pl-4"><small>3. Prosentase terpenuhinya sarana dan prasarana
                                                        perkantoran</small></td>
                                                <td class="text-center"><small>%</small></td>
                                                <td class="text-center"><small>83</small></td>
                                                <td class="text-center">
                                                    <small>
                                                        <i class="fas fa-question-circle"
                                                            style="color:red !important; font-size:0.75rem !important;"
                                                            data-toggle="tooltip" title="IKU belum ada"></i>
                                                    </small>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="card" style="border-radius:8px !important;">
                        <div class="card-header bg-primary p-3" role="tab" id="headingTwo">
                            <h6 class="mb-0">
                                <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false"
                                    aria-controls="collapseTwo" style="color:#fff !important;">
                                    PROGRAM
                                </a>
                            </h6>
                        </div>
                        <div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"
                            data-parent="#accordion">
                            <div class="card-body">
                                <div class="table-responsive" style="border-radius:2px !important;">
                                    <table class="table table-bordered table-hover table-sm">
                                        <thead>
                                            <tr>
                                                <th class="text-center pt-3 pb-3">No</th>
                                                <th class="pt-3 pb-3">Program / Indikator Kinerja Program</th>
                                                <th class="text-center pt-3 pb-3">Satuan</th>
                                                <th class="text-center pt-3 pb-3">Target 2019</th>
                                                <th class="text-center pt-3 pb-3">Anggaran</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td colspan="5" class="bg-danger text-white"><small><b>Sasaran 1 : Ini
                                                            Sasaran !</b></small></td>
                                            </tr>
                                            <tr>
                                                <td rowspan="2" class="text-center" style="vertical-align:top">
                                                    <small><b>1</b></small></td>
                                                <td colspan="3"><small><b>Meningkatnya pemanfaatan teknologi informasi
                                                            dan
                                                            komunikasi dalam rangka pelayanan kepada
                                                            masyarakat</b></small></td>
                                                <td rowspan="2" class="text-right" style="vertical-align:top">
                                                    <small>
                                                        <b>Rp. 13.000.000</b>
                                                    </small>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="pl-4"><small>1. Presentase pemanfaatan teknologi informasi
                                                        dan
                                                        komunikasi</small></td>
                                                <td class="text-center"><small>%</small></td>
                                                <td class="text-center"><small>18</small></td>
                                            </tr>
                                            <tr>
                                                <td rowspan="4" class="text-center" style="vertical-align:top">
                                                    <small><b>2</b></small></td>
                                                <td colspan="3"><small><b>Meningkatkan Pelayanan kesekretariatan untuk
                                                            mendukung kinerja perangkat daerah dalam rangka mewujudkan
                                                            good
                                                            governance</b></small></td>
                                                <td rowspan="4" class="text-right" style="vertical-align:top">
                                                    <small>
                                                        <b>Rp. 15.000.000</b>
                                                    </small>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="pl-4"><small>1. Indeks Survey kepuasan Masyarakat</small>
                                                </td>
                                                <td class="text-center"><small>Nilai</small></td>
                                                <td class="text-center"><small>78,5</small></td>
                                            </tr>
                                            <tr>
                                                <td class="pl-4"><small>2. Prosentase Meningkatnya Pelayanan
                                                        Administrasi
                                                        Perkantoran</small></td>
                                                <td class="text-center"><small>%</small></td>
                                                <td class="text-center"><small>40</small></td>
                                            </tr>
                                            <tr>
                                                <td class="pl-4"><small>3. Prosentase terpenuhinya sarana dan prasarana
                                                        perkantoran</small></td>
                                                <td class="text-center"><small>%</small></td>
                                                <td class="text-center"><small>83</small></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card" style="border-radius:8px !important;">
                        <div class="card-header bg-success p-3" role="tab" id="headingThree">
                            <h6 class="mb-0">
                                <a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false"
                                    aria-controls="collapseThree" style="color:#fff !important;">
                                    KEGIATAN
                                </a>
                            </h6>
                        </div>
                        <div id="collapseThree" class="collapse show" role="tabpanel" aria-labelledby="headingThree"
                            data-parent="#accordion">
                            <div class="card-body">
                                <div class="table-responsive" style="border-radius:2px !important;">
                                    <table class="table table-bordered table-hover table-sm">
                                        <thead>
                                            <tr>
                                                <th class="text-center pt-3 pb-3">No</th>
                                                <th class="pt-3 pb-3">Kegiatan / Indikator Kinerja Kegiatan</th>
                                                <th class="text-center pt-3 pb-3">Satuan</th>
                                                <th class="text-center pt-3 pb-3">Target 2019</th>
                                                <th class="text-center pt-3 pb-3">Anggaran</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td colspan="5" class="bg-primary text-white"><small><b>Program 1 : Ini
                                                            Program 1</b></small></td>
                                            </tr>
                                            <tr>
                                                <td rowspan="2" class="text-center" style="vertical-align:top">
                                                    <small><b>1</b></small></td>
                                                <td colspan="3"><small><b>Meningkatnya pemanfaatan teknologi informasi
                                                            dan
                                                            komunikasi dalam rangka pelayanan kepada
                                                            masyarakat</b></small></td>
                                                <td rowspan="2" class="text-right" style="vertical-align:top">
                                                    <small>
                                                        <b>Rp. 13.000.000</b>
                                                    </small>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="pl-4"><small>1. Presentase pemanfaatan teknologi informasi
                                                        dan
                                                        komunikasi</small></td>
                                                <td class="text-center"><small>%</small></td>
                                                <td class="text-center"><small>18</small></td>
                                            </tr>
                                            <tr>
                                                <td rowspan="4" class="text-center" style="vertical-align:top">
                                                    <small><b>2</b></small></td>
                                                <td colspan="3"><small><b>Meningkatkan Pelayanan kesekretariatan untuk
                                                            mendukung kinerja perangkat daerah dalam rangka mewujudkan
                                                            good
                                                            governance</b></small></td>
                                                <td rowspan="4" class="text-right" style="vertical-align:top">
                                                    <small>
                                                        <b>Rp. 15.000.000</b>
                                                    </small>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="pl-4"><small>1. Indeks Survey kepuasan Masyarakat</small>
                                                </td>
                                                <td class="text-center"><small>Nilai</small></td>
                                                <td class="text-center"><small>78,5</small></td>
                                            </tr>
                                            <tr>
                                                <td class="pl-4"><small>2. Prosentase Meningkatnya Pelayanan
                                                        Administrasi
                                                        Perkantoran</small></td>
                                                <td class="text-center"><small>%</small></td>
                                                <td class="text-center"><small>40</small></td>
                                            </tr>
                                            <tr>
                                                <td class="pl-4"><small>3. Prosentase terpenuhinya sarana dan prasarana
                                                        perkantoran</small></td>
                                                <td class="text-center"><small>%</small></td>
                                                <td class="text-center"><small>83</small></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('plugin-scripts')
{!! Html::script('/assets/plugins/select2/select2.min.js') !!}
@endpush

@push('custom-scripts')
{!! Html::script('/assets/js/select2.js') !!}
@endpush