@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') }}">
@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 Aksi Perjanjian Kinerja SKPD</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-primary 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">
                                    RENCANA AKSI PERJANJIAN KINERJA PEJABAT ESELON III 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 rowspan="2" class="text-center pt-3 pb-3"
                                                    style="vertical-align:middle;">No</th>
                                                <th rowspan="2" style="vertical-align:middle;" class="text-center">
                                                    Program
                                                </th>
                                                <th rowspan="2" colspan="2" style="vertical-align:middle;"
                                                    class="text-center">
                                                    Indikator Kinerja Program</th>
                                                <th rowspan="2" style="vertical-align:middle;" class="text-center">
                                                    Target 2019</th>
                                                <th colspan="4" style="vertical-align:middle;" class="text-center">
                                                    Target Kinerja Triwulan</th>
                                            </tr>
                                            <tr>
                                                <th class="text-center" style="vertical-align:middle;">TW I
                                                </th>
                                                <th class="text-center" style="vertical-align:middle;">TW II
                                                </th>
                                                <th class="text-center" style="vertical-align:middle;">TW III
                                                </th>
                                                <th class="text-center" style="vertical-align:middle;">TW IV
                                                </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 colspan="4" class="text-center" style="vertical-align:middle;">
                                                    <cite>5</cite>
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td style="vertical-align:top;" class="text-center">
                                                    <small>1</small></td>
                                                <td style="vertical-align:top;"><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:top;"><small>Persentase pemuda
                                                        yang memiliki keterampilan dan kecakapan hidup</small></td>
                                                <td class="text-center"><small>66,66%</small></td>
                                                <td class="text-center">
                                                    <small>
                                                        <div class="dropdown">
                                                            <a class="btn p-0" type="button" id="dropdownMenuButton"
                                                                data-toggle="dropdown" aria-haspopup="true"
                                                                aria-expanded="false">
                                                                <small>20,01% (BB)</small>
                                                            </a>
                                                            <div class="dropdown-menu"
                                                                aria-labelledby="dropdownMenuButton">
                                                                <a class="dropdown-item d-flex align-items-center"
                                                                    href="#" onclick="create(this)"><i
                                                                        data-feather="edit-2" class="icon-sm mr-2"></i>
                                                                    <span class="">Edit</span></a>
                                                                <a class="dropdown-item d-flex align-items-center"
                                                                    href="#" onclick="destroy(this)"><i
                                                                        data-feather="trash" class="icon-sm mr-2"></i>
                                                                    <span class="">Hapus</span></a>
                                                            </div>
                                                        </div>
                                                    </small>
                                                </td>
                                                <td class="text-center">
                                                    <small>
                                                        <a type="button" data-toggle="tw2" data-placement="left"
                                                            title="Target 2019 Triwulan II">
                                                            <i class="icon-md text-muted" data-feather="alert-circle"
                                                                data-toggle="tooltip" title="Klik untuk membuat target"
                                                                style="color:red !important;"></i>
                                                        </a>
                                                    </small>
                                                </td>
                                                <td class="text-center">
                                                    <small>
                                                        <a type="button" data-toggle="tw2" data-placement="left"
                                                            title="Target 2019 Triwulan III">
                                                            <i class="icon-md text-muted" data-feather="alert-circle"
                                                                data-toggle="tooltip" title="Klik untuk membuat target"
                                                                style="color:red !important;"></i>
                                                        </a>
                                                    </small>
                                                </td>
                                                <td class="text-center">
                                                    <small>
                                                        <a type="button" data-toggle="tw2" data-placement="left"
                                                            title="Target 2019 Triwulan IV">
                                                            <i class="icon-md text-muted" data-feather="alert-circle"
                                                                data-toggle="tooltip" title="Klik untuk membuat target"
                                                                style="color:red !important;"></i>
                                                        </a>
                                                    </small>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td rowspan="2" style="vertical-align:top;" class="text-center">
                                                    <small>2</small></td>
                                                <td rowspan="2" style="vertical-align:top;"><small>Meningkatnya prestasi
                                                        olahraga pelajar</small></td>
                                                <td style="vertical-align:top;" class="text-center">
                                                    <small>
                                                        2
                                                    </small>
                                                </td>
                                                <td style="vertical-align:top;"><small>Peringkat kabupaten
                                                        dalam kompetesi olahraga pelajar ditingkat provinsi</small></td>
                                                <td class="text-center"><small>25,00%</small></td>
                                                <td class="text-center">
                                                    <small>
                                                        <div class="dropdown">
                                                            <a class="btn p-0" type="button" id="dropdownMenuButton"
                                                                data-toggle="dropdown" aria-haspopup="true"
                                                                aria-expanded="false">
                                                                <small>20,01%</small>
                                                            </a>
                                                            <div class="dropdown-menu"
                                                                aria-labelledby="dropdownMenuButton">
                                                                <a class="dropdown-item d-flex align-items-center"
                                                                    href="#" onclick="create(this)"><i
                                                                        data-feather="edit-2" class="icon-sm mr-2"></i>
                                                                    <span class="">Edit</span></a>
                                                                <a class="dropdown-item d-flex align-items-center"
                                                                    href="#" onclick="destroy(this)"><i
                                                                        data-feather="trash" class="icon-sm mr-2"></i>
                                                                    <span class="">Hapus</span></a>
                                                            </div>
                                                        </div>
                                                    </small>
                                                </td>
                                                <td class="text-center">
                                                    <small>
                                                        <a type="button" data-toggle="tw2" data-placement="left"
                                                            title="Target 2019 Triwulan II">
                                                            <i class="icon-md text-muted" data-feather="alert-circle"
                                                                data-toggle="tooltip" title="Klik untuk membuat target"
                                                                style="color:red !important;"></i>
                                                        </a>
                                                    </small>
                                                </td>
                                                <td class="text-center">
                                                    <small>
                                                        <a type="button" data-toggle="tw2" data-placement="left"
                                                            title="Target 2019 Triwulan II">
                                                            <i class="icon-md text-muted" data-feather="alert-circle"
                                                                data-toggle="tooltip" title="Klik untuk membuat target"
                                                                style="color:red !important;"></i>
                                                        </a>
                                                    </small>
                                                </td>
                                                <td class="text-center">
                                                    <small>
                                                        <a type="button" data-toggle="tw2" data-placement="left"
                                                            title="Target 2019 Triwulan IV">
                                                            <i class="icon-md text-muted" data-feather="alert-circle"
                                                                data-toggle="tooltip" title="Klik untuk membuat target"
                                                                style="color:red !important;"></i>
                                                        </a>
                                                    </small>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td style="vertical-align:top;" class="text-center">
                                                    <small>
                                                        3
                                                    </small>
                                                </td>
                                                <td style="vertical-align:top;"><small>Pengeluaran wisatawan
                                                        (spending of money)</small></td>
                                                <td class="text-center"><small>96%</small>
                                                </td>
                                                <td class="text-center">
                                                    <small>
                                                        <a type="button" data-toggle="tw2" data-placement="left"
                                                            title="Target 2019 Triwulan I">
                                                            <i class="icon-md text-muted" data-feather="alert-circle"
                                                                data-toggle="tooltip" title="Klik untuk membuat target"
                                                                style="color:red !important;"></i>
                                                        </a>
                                                    </small>
                                                </td>
                                                <td class="text-center">
                                                    <small>
                                                        <div class="dropdown">
                                                            <a class="btn p-0" type="button" id="dropdownMenuButton"
                                                                data-toggle="dropdown" aria-haspopup="true"
                                                                aria-expanded="false">
                                                                <small>20,01%</small>
                                                            </a>
                                                            <div class="dropdown-menu"
                                                                aria-labelledby="dropdownMenuButton">
                                                                <a class="dropdown-item d-flex align-items-center"
                                                                    href="#" onclick="create(this)"><i
                                                                        data-feather="edit-2" class="icon-sm mr-2"></i>
                                                                    <span class="">Edit</span></a>
                                                                <a class="dropdown-item d-flex align-items-center"
                                                                    href="#" onclick="destroy(this)"><i
                                                                        data-feather="trash" class="icon-sm mr-2"></i>
                                                                    <span class="">Hapus</span></a>
                                                            </div>
                                                        </div>
                                                    </small>
                                                </td>
                                                <td class="text-center">
                                                    <small>
                                                        <div class="dropdown">
                                                            <a class="btn p-0" type="button" id="dropdownMenuButton"
                                                                data-toggle="dropdown" aria-haspopup="true"
                                                                aria-expanded="false">
                                                                <small>20,01%</small>
                                                            </a>
                                                            <div class="dropdown-menu"
                                                                aria-labelledby="dropdownMenuButton">
                                                                <a class="dropdown-item d-flex align-items-center"
                                                                    href="#" onclick="create(this)"><i
                                                                        data-feather="edit-2" class="icon-sm mr-2"></i>
                                                                    <span class="">Edit</span></a>
                                                                <a class="dropdown-item d-flex align-items-center"
                                                                    href="#" onclick="destroy(this)"><i
                                                                        data-feather="trash" class="icon-sm mr-2"></i>
                                                                    <span class="">Hapus</span></a>
                                                            </div>
                                                        </div>
                                                    </small>
                                                </td>
                                                <td class="text-center">
                                                    <small>
                                                        <div class="dropdown">
                                                            <a class="btn p-0" type="button" id="dropdownMenuButton"
                                                                data-toggle="dropdown" aria-haspopup="true"
                                                                aria-expanded="false">
                                                                <small>20,01%</small>
                                                            </a>
                                                            <div class="dropdown-menu"
                                                                aria-labelledby="dropdownMenuButton">
                                                                <a class="dropdown-item d-flex align-items-center"
                                                                    href="#" onclick="create(this)"><i
                                                                        data-feather="edit-2" class="icon-sm mr-2"></i>
                                                                    <span class="">Edit</span></a>
                                                                <a class="dropdown-item d-flex align-items-center"
                                                                    href="#" onclick="destroy(this)"><i
                                                                        data-feather="trash" class="icon-sm mr-2"></i>
                                                                    <span class="">Hapus</span></a>
                                                            </div>
                                                        </div>
                                                    </small>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@include('pages.pegawai.perencanaan.renaksi.eselon3.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/renaksi/index.js') !!}
@endpush

@push('custom-scripts')
<script>
    $(function () {
        $('[data-toggle="tw2"]').popover({
            container: 'body',
            html: true,
            placement: 'bottom',
            sanitize: false,
            content: `<div class="input-group">
                        <input type="text" name="target" class="form-control" placeholder="Target"
                            aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
                        <input type="text" name="keterangan" class="form-control" placeholder="Ket."
                            aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
                        <div class="input-group-append" id="button-addon1">
                        <button class="btn btn-success" type="button" data-toggle="popover" data-placement="bottom"
                            data-html="true" data-title="Realisasikan" onclick="target_tw2(this)">
                            <i class="fas fa-check-circle"></i>
                        </button>
                        </div>
                    </div>`
        })

    });

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