@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</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-2">
                        <div class="form-group">
                            <select id="filter_tahun" class="js-example-basic-single w-100">
                                @foreach ($tahun as $t)
                                <option value="{{$t->id}}">{{$t->id}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="form-group">
                            <select id="filter_skpd" onchange="func_filter_skpd()" class="js-example-basic-single w-100">
                                <option value="0" selected>Filter Berdasarkan SKPD</option>
                                @foreach ($listUnitKerja as $item)
                                <option value="{{$item->ekin_skpd_id}}">{{$item->nama}}</option>
                                @endforeach
                            </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">
                                    REALISASI TAHUNAN PEJABAT ESELON II
                                </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 id="filter_eselon_ii" onchange="getcones2()" class="js-example-basic-single w-100">
                                                <option value="0">Jabatan - Nama - NIP</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-responsive" id="content_esii" 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 Strategis
                                                </th>
                                                <th  colspan="2" style="vertical-align:middle;"
                                                    class="text-center">
                                                    Indikator Kinerja Sasaran</th>
                                                <th  style="vertical-align:middle;" class="text-center">
                                                    Target 2019</th>

                                                <th colspan="2" style="vertical-align:middle;" class="text-center">Realisasi</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>20,01%</small></td>
                                                <td class="text-center">
                                                    <small>
                                                        <i class="icon-md text-muted" data-feather="alert-circle"
                                                            data-toggle="tooltip" title="Belum Realisasi"
                                                            style="color:red !important;"></i>
                                                    </small>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="accordion2" class="accordion" role="tablist">
                    <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;" class="text-uppercase">
                                    REALISASI TAHUNAN PEJABAT ESELON III
                                </a>
                            </h6>
                        </div>
                        <div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"
                            data-parent="#accordion2">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <select id="filter_eselon_iii" onchange="getcones3()" class="js-example-basic-single w-100">
                                                <option value="0" selected>Pilih Jabatan Nama</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-responsive" id="contentes3" 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">
                                                            Program Strategis
                                                        </th>
                                                        <th  colspan="2" style="vertical-align:middle;"
                                                            class="text-center">
                                                            Indikator Kinerja Program</th>
                                                        <th  style="vertical-align:middle;" class="text-center">
                                                            Target 2019</th>

                                                        <th colspan="2" style="vertical-align:middle;" class="text-center">Realisasi</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>20,01%</small></td>
                                                        <td class="text-center">
                                                            <small>
                                                                <i class="icon-md text-muted" data-feather="alert-circle"
                                                                    data-toggle="tooltip" title="Belum Realisasi"
                                                                    style="color:red !important;"></i>
                                                            </small>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                        </table> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="accordion3" class="accordion" role="tablist">
                    <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;" class="text-uppercase">
                                    REALISASI TAHUNAN PEJABAT SUB KOORDINATOR
                                </a>
                            </h6>
                        </div>
                        <div id="collapseThree" class="collapse show" role="tabpanel" aria-labelledby="headingThree"
                            data-parent="#accordion3">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <select id="filter_eselon_iv" onchange="getcones4()" class="js-example-basic-single w-100">
                                                <option value="0" selected>Jabatan - Nama - NIP</option>
                                            </select>
                                        </div>
                                    </div>

                                </div>
                                <div class="table-responsive" id="contentes4" 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">
                                                        Kegiatan Strategis
                                                    </th>
                                                    <th  colspan="2" style="vertical-align:middle;"
                                                        class="text-center">
                                                        Indikator Kinerja Kegiatan</th>
                                                    <th  style="vertical-align:middle;" class="text-center">
                                                        Target 2019</th>

                                                    <th colspan="2" style="vertical-align:middle;" class="text-center">Realisasi</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>20,01%</small></td>
                                                    <td class="text-center">
                                                        <small>
                                                            <i class="icon-md text-muted" data-feather="alert-circle"
                                                                data-toggle="tooltip" title="Belum Realisasi"
                                                                style="color:red !important;"></i>
                                                        </small>
                                                    </td>
                                                </tr>
                                            </tbody>
                                    </table> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="accordion4" class="accordion" role="tablist">
                    <div class="card" style="border-radius:8px !important;">
                        <div class="card-header bg-warning p-3" role="tab" id="headingFour">
                            <h6 class="mb-0">
                                <a class="collapsed" data-toggle="collapse" href="#collapseFour" aria-expanded="false"
                                    aria-controls="collapseFour" style="color:#fff !important;" class="text-uppercase">
                                    REALISASI TAHUNAN PEJABAT PELAKSANA
                                </a>
                            </h6>
                        </div>
                        <div id="collapseFour" class="collapse show" role="tabpanel" aria-labelledby="headingFour"
                            data-parent="#accordion4">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <select id="filter_eselon_pel" onchange="getcontentpel()" class="js-example-basic-single w-100">
                                                <option value="0" selected>Jabatan - Nama - NIP</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-responsive" id="contentpel" 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">
                                                        Kegiatan / Sasaran
                                                    </th>
                                                    <th  colspan="2" style="vertical-align:middle;"
                                                        class="text-center">
                                                        Indikator Kinerja</th>
                                                    <th  style="vertical-align:middle;" class="text-center">
                                                        Target 2019</th>

                                                    <th colspan="2" style="vertical-align:middle;" class="text-center">Realisasi</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>20,01%</small></td>
                                                    <td class="text-center">
                                                        <small>
                                                            <i class="icon-md text-muted" data-feather="alert-circle"
                                                                data-toggle="tooltip" title="Belum Realisasi"
                                                                style="color:red !important;"></i>
                                                        </small>
                                                    </td>
                                                </tr>
                                            </tbody>
                                    </table> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="accordion5" class="accordion" role="tablist">
                    <div class="card" style="border-radius:8px !important;">
                        <div class="card-header bg-secondary p-3" role="tab" id="headingFive">
                            <h6 class="mb-0">
                                <a class="collapsed" data-toggle="collapse" href="#collapseFive" aria-expanded="false"
                                    aria-controls="collapseFive" style="color:#fff !important;" class="text-uppercase">
                                    REALISASI TAHUNAN PEJABAT JFT
                                </a>
                            </h6>
                        </div>
                        <div id="collapseFive" class="collapse show" role="tabpanel" aria-labelledby="headingFive"
                            data-parent="#accordion5">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <select id="filter_eselon_jft" onchange="getcontentjft()" class="js-example-basic-single w-100">
                                                <option value="0" selected>Jabatan - Nama - NIP</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-responsive" id="contentjft" 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">
                                                        Kegiatan / Sasaran
                                                    </th>
                                                    <th  colspan="2" style="vertical-align:middle;"
                                                        class="text-center">
                                                        Indikator Kinerja</th>
                                                    <th  style="vertical-align:middle;" class="text-center">
                                                        Target 2019</th>

                                                    <th colspan="2" style="vertical-align:middle;" class="text-center">Realisasi</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>20,01%</small></td>
                                                    <td class="text-center">
                                                        <small>
                                                            <i class="icon-md text-muted" data-feather="alert-circle"
                                                                data-toggle="tooltip" title="Belum Realisasi"
                                                                style="color:red !important;"></i>
                                                        </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') !!}
{!! Html::script('/assets/plugins/sweetalert2/sweetalert2.min.js') !!}
{!! Html::script('/assets/plugins/prismjs/prism.js') !!}
<script src="{{asset('js/adminKab/pelaporan/capaian/tahunan/filter.js')}}"></script>
<script src="{{asset('js/adminKab/pelaporan/capaian/tahunan/es2.js')}}"></script>
<script src="{{asset('js/adminKab/pelaporan/capaian/tahunan/es3.js')}}"></script>
<script src="{{asset('js/adminKab/pelaporan/capaian/tahunan/es4.js')}}"></script>
<script src="{{asset('js/adminKab/pelaporan/capaian/tahunan/program.js')}}"></script>
<script src="{{asset('js/adminKab/pelaporan/capaian/tahunan/jft.js')}}"></script>
@endpush

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