@extends('layouts.master')

@push('plugin-styles')
{!! Html::style('/assets/plugins/select2/select2.min.css') !!}
{!! Html::style('/assets/plugins/sweetalert2/sweetalert2.min.css') !!}
{!! Html::style('/assets/plugins/prismjs/prism.css') !!}
<link rel="stylesheet" href="{{ asset('https://use.fontawesome.com/releases/v5.8.1/css/all.css') }}">
{!! Html::style('/assets/plugins/bootstrap-datepicker/bootstrap-datepicker.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">Perjanjian Kinerja</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-2">
                        <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-2">
                        <div class="form-group">
                            <select class="js-example-basic-single w-100">
                                <option>Filter Berdasarkan PK</option>
                                <option>PK Murni</option>
                                <option>PK Perubahan</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <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 class="collapsed" data-toggle="collapse" href="#collapseOne" aria-expanded="false"
                                    aria-controls="collapseOne" style="color:#fff !important;" class="text-uppercase">
                                    PERJANJIAN KINERJA PEJABAT ESELON II DINAS KOMUNIKASI DAN INFORMATIKA
                                    TAHUN 2019
                                </a>
                            </h6>
                        </div>
                        <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne"
                            data-parent="#accordion">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <select class="js-example-basic-single w-100">
                                                <option>Filter Berdasarkan Pejabat</option>
                                                <option selected>Jabatan - Nama - NIP</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <select class="js-example-basic-single w-100">
                                                <option>Filter Berdasarkan Urutan PK</option>
                                                <option>PK #1</option>
                                                <option>PK #2</option>
                                                <option>PK #3</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-responsive" style="border-radius:2px !important;">
                                    <table class="table table-bordered table-hover table-sm">
                                        <thead class="table">
                                            <tr>
                                                <th class="text-center pt-3 pb-3" style="vertical-align:middle;">No</th>
                                                <th style="vertical-align:middle;" class="text-center">Sasaran
                                                </th>
                                                <th colspan="2" style="vertical-align:middle;" class="text-center">
                                                    Indikator Kinerja Sasaran</th>
                                                <th style="vertical-align:middle;" class="text-center">Satuan</th>
                                                <th style="vertical-align:middle;" class="text-center">Target</th>
                                                <th style="vertical-align:middle;" class="text-center">IKU</th>
                                            </tr>
                                            <tr>
                                                <th class="text-center" style="vertical-align:middle;"><cite>1</cite>
                                                </th>
                                                <th class="text-center" style="vertical-align:middle;"><cite>2</cite>
                                                </th>
                                                <th colspan="2" class="text-center" style="vertical-align:middle;">
                                                    <cite>3</cite></th>
                                                <th class="text-center" style="vertical-align:middle;"><cite>4</cite>
                                                </th>
                                                <th class="text-center" style="vertical-align:middle;"><cite>5</cite>
                                                </th>
                                                <th class="text-center" style="vertical-align:middle;"><cite>6</cite>
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td style="vertical-align:top;" class="text-center">
                                                    <small>1</small></td>
                                                <td style="vertical-align:middle;"><small>Meningkatnya
                                                        kemandirian pemuda dalam pembangunan daerah</small></td>
                                                <td style="vertical-align:top;" class="text-center">
                                                    <small>
                                                        1
                                                    </small>
                                                </td>
                                                <td style="vertical-align:middle;"><small>Persentase pemuda
                                                        yang memiliki keterampilan dan kecakapan hidup</small></td>
                                                <td style="vertical-align:middle;" class="text-center">
                                                    <small>Persen</small></td>
                                                <td style="vertical-align:midle;" class="text-center">
                                                    <small>66,66%</small></td>
                                                <td class="text-center">
                                                    <small>
                                                        <!-- if IKU sudah ada -->
                                                        <i class="text-success" data-feather="check-circle" width="18"
                                                            data-toggle="tooltip" title="IKU sudah dilengkapi"></i>
                                                        <!-- else -->
                                                        <!-- <i class="text-danger" data-feather="help-circle" width="18" data-toggle="tooltip" title="IKU belum dilengkapi !"></i> -->
                                                    </small>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                                <div class="table-responsive pt-4">
                                    <table class="table table-hover table-sm">
                                        <thead>
                                            <tr>
                                                <th width="42%">
                                                    PROGRAM
                                                </th>
                                                <th>
                                                    ANGGARAN
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td style="vertical-align:top;"><small>1. Program peningkatan
                                                        peran serta kepemudaan</small></td>
                                                <td><small>39.995.000</small></td>
                                            </tr>

                                            <tr>
                                                <td style="vertical-align:top;"><small>2. Program Peningkatan
                                                        Prestasi dan Permasyarakatan Olahraga</small></td>
                                                <td><small>878.665.000</small></td>

                                            <tr>
                                                <td style="vertical-align:top;"><small>3. Program Pengembangan
                                                        Pemasaran Pariwisata</small></td>
                                                <td><small>397.350.000</small></td>
                                            </tr>

                                            <tr>
                                                <td style="vertical-align:top;"><small>4. Program Pengembangan
                                                        Kemitraan</small></td>
                                                <td><small>-</small></td>
                                            </tr>

                                            <tr>
                                                <td style="vertical-align:top;"><small>5. Program Pengembangan
                                                        Destinasi Pariwisata</small></td>
                                                <td><small>2.118.935.000</small></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                                <div class="row pt-5">
                                    <div class="col-lg-6 text-center">
                                    </div>
                                    <div class="col-lg-6 text-center">
                                        <!-- if PK is_posting -->
                                        <!-- <small>
                                            Kandangan, 30 Januari 2019
                                            //if PK/Renaksi Belum Realisasi
                                            <a type="button" data-toggle="hapus-pk" data-placement="left"
                                                title="Hapus Perjanjian Kinerja">
                                                <span class="spinner-grow spinner-grow-sm text-danger" role="status"
                                                    aria-hidden="true">
                                                    <i class="icon-sm text-muted" data-feather="alert-circle"
                                                        style="color:white !important;"></i>
                                                </span>
                                            </a>
                                        </small> -->

                                        <!-- else -->
                                        <small>
                                            Kandangan,.......
                                            <a type="button" data-toggle="tanggal-pk" data-placement="left"
                                                title="Tanggal Perjanjian Kinerja">

                                                <span class="spinner-grow spinner-grow-sm text-warning" role="status"
                                                    aria-hidden="true">
                                                    <i class="icon-sm text-muted" data-feather="alert-circle"
                                                        style="color:white !important;"></i>
                                                </span>
                                            </a>
                                            <!-- if PK/Renaksi Belum Reasliasi -->
                                            <a type="button" onclick="destroy(this)" data-placement="left"
                                                title="Hapus Perjanjian Kinerja">

                                                <span class="spinner-grow spinner-grow-sm text-danger" role="status"
                                                    aria-hidden="true">
                                                    <i class="icon-sm text-muted" data-feather="alert-circle"
                                                        style="color:white !important;"></i>
                                                </span>
                                            </a>
                                        </small>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-lg-6 text-center">
                                        <small class="mb-5 mb-md-0">PIHAK KEDUA</small><br>
                                        <small class="mb-5 mb-md-0 text-uppercase">BUPATI HULU SUNGAI
                                            SELATAN</small><br>
                                        <div class="pt-5 pb-3"><small><b>Drs.H.ACHMAD FIKRY,M.AP</b></small><br>
                                            <small class="mb-5 mb-md-0 "></small>
                                        </div>

                                    </div>
                                    <div class="col-lg-6 text-center">
                                        <small class="mb-5 mb-md-0 ">PIHAK PERTAMA</small><br>
                                        <small class="mb-5 mb-md-0 text-uppercase">KEPALA DINAS KOMINFO KABUPATEN
                                            HSS</small><br>
                                        <div class="pt-5">
                                            <small><b>Drs. HENDRO MARTONO, MT</b></small><br>
                                            <small class="mb-5 mb-md-0 ">NIP. 19601210 199203</small>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<nav class="settings-sidebar">
    <div class="sidebar-body">
        <a href="#" class="settings-sidebar-toggler settings-open text-white" onclick="add(this)"
            style="border-radius: 25px;border-color:primary border:1px">
            <i data-feather="plus-circle" style="color:white"></i>
        </a>
    </div>
</nav>
@include('pages.pegawai.perencanaan.pk.eselon2.form')
@endsection
@push('plugin-scripts')
{!! Html::script('/assets/plugins/select2/select2.min.js') !!}
{!! Html::script('/assets/plugins/sweetalert2/sweetalert2.min.js') !!}
{!! Html::script('/assets/plugins/prismjs/prism.js') !!}
{!! Html::script('/js/pegawai/pk/sasaran/index.js') !!}
{!! Html::script('/assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js') !!}
@endpush

@push('custom-scripts')
<script>
    $(function () {
        $('[data-toggle="tanggal-pk"]').popover({
            container: 'body',
            html: true,
            placement: 'bottom',
            sanitize: false,
            content: `<div class="form-group pl-2 pr-2 pt-2">
                        <div class="input-group date datepicker" id="tanggalPK">
                            <input type="text" class="form-control form-control-sm">
                                <span class="input-group-addon">
                                    <i class="far fa-calendar-check"></i>
                                </span>
                        </div>
                    </div>
                    <div class="form-group pl-2 pr-2">
                        <button type="button" class="btn btn-danger btn-block" onclick="posting_pk(this)">Posting Perjanjian Kinerja</button>
                    </div>`

        }).on('shown.bs.popover', function () {
            if ($('#tanggalPK').length) {
                var date = new Date();
                var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
                $('#tanggalPK').datepicker({
                    format: "dd/mm/yyyy",
                    todayHighlight: true,
                    autoclose: true
                });
                $('#tanggalPK').datepicker('setDate', today);
            }
        });

    });

</script>

{!! Html::script('/assets/js/select2.js') !!}
{!! Html::script('/assets/js/sweet-alert.js') !!}
{!! Html::script('/assets/js/demo.js') !!}
{!! Html::script('/assets/js/datepicker.js') !!}
@endpush