@extends('layouts.app')

@section('title')
Rincian Penilaian
@endsection

@section('content')
<section class="section">
    <div class="card card-primary">
        <div class="card-header">
            <h4>
                <span>Rincian Penilaian</span>
                <br>
                <small>
                    <strong>Unit Pelayanan : {{ $unit }}</strong>
                </small>
            </h4>
            <div class="card-header-action text-right">
                <input type="number" name="year" class="form-control text-center" placeholder="Tahun Pelaksanaan" disabled="" readonly="">
                <div class="dropdown">
                    <button type="button" class="btn btn-success btn-sm mt-3 mr-3 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Laporan Penilaian</button>
                    <div class="dropdown-menu">
                        <a href="#" id="bWriteLHP" class="dropdown-item has-icon">
                            <i class="far fa-edit text-warning"></i> Tulis Laporan
                        </a>
                        <a href="#" id="bPrintLHP" class="dropdown-item has-icon">
                            <i class="far fa-file-word text-info"></i> Cetak Laporan
                        </a>
                    </div>
                </div>
                <div class="dropdown">
                    <button type="button" class="btn btn-info btn-sm mt-3 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Berita Acara</button>
                    <div class="dropdown-menu">
                        <a href="#" id="bWriteLBA" class="dropdown-item has-icon">
                            <i class="far fa-edit text-warning"></i> Tulis Berita Acara
                        </a>
                        <a href="#" id="bPrintLBA" class="dropdown-item has-icon">
                            <i class="far fa-file-word text-info"></i> Cetak Berita Acara
                        </a>
                    </div>
                </div>
                {{-- <button id="bPrintLHP" type="button" class="btn btn-success btn-sm mt-3 mr-3">Laporan Penilaian<i class="far fa-file-word" style="margin-left:.5rem !important;"></i></button> --}}
                {{-- <button id="bPrintBA" type="button" class="btn btn-info btn-sm mt-3">Cetak Berita Acara<i class="fas fa-file-word" style="margin-left:.5rem !important;"></i></button> --}}
            </div>
        </div>
    </div>
    <div class="section-body">
        <div class="card d-none" id="cbuPoint">
            <div class="card-body px-0 py-0"></div>
        </div>
        <div class="card">
            <div class="card-body px-0 py-0">
                <table id="table1" class="table table-bordered table-striped table-hover"></table>
            </div>
        </div>
        <div class="card">
            <div class="card-body px-0 py-0">
                <table id="table2" class="table table-bordered table-striped table-hover"></table>
            </div>
        </div>
        <div class="card d-none" id="realtimePoint">
            <div class="card-body px-0 py-0">
                <table id="rtpTable" class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th rowspan="1" colspan="6" class="text-center">Nilai Per Aspek F02</th>
                            <th rowspan="2" colspan="1" class="text-center">Nilai<br>F03</th>
                            <th rowspan="2" colspan="1" class="text-center">Nilai<br>IPP ULE</th>
                            <th rowspan="2" colspan="1" class="text-center">Kategori</th>
                        </tr>
                        <tr>
                            <th rowspan="1" colspan="1" class="text-center">Kebijakan<br>Pelayanan</th>
                            <th rowspan="1" colspan="1" class="text-center">Profesionalitas<br>SDM</th>
                            <th rowspan="1" colspan="1" class="text-center">Sarana<br>Prasarana</th>
                            <th rowspan="1" colspan="1" class="text-center">SIPP</th>
                            <th rowspan="1" colspan="1" class="text-center">Konsultasi dan<br>Pengaduan</th>
                            <th rowspan="1" colspan="1" class="text-center">Inovasi</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>    
</section>
@endsection

@section('modal')
<div id="mdlLHP" class="modal fade" role="dialog">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header border-bottom shadow-sm pb-4">
                <h5 class="modal-title text-dark">Laporan Penilaian Hasil PEKPP</h5>
                <button type="button" aria-label="Close" class="close outline-none text-danger" data-dismiss="modal">×</button>
            </div>
            <form method="POST" action="{{ route('report.save') }}">
                <input type="hidden" name="_token" value="">
                <div class="modal-body border-bottom shadow-sm">
                    <table class="table table-sm table-hover mb-0">
                        <thead>
                            <tr>
                                <th class="border-0 pb-4 text-dark font-weight-bold text-uppercase">Komponen</th>
                                <th class="border-0 pb-4 text-dark font-weight-bold text-uppercase text-center">Pengamatan Lapangan</th>
                                <th class="border-0 pb-4 text-dark font-weight-bold text-uppercase text-center">Keterangan</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="border-bottom">
                                <th style="width: 20%;vertical-align: middle;">KEBIJAKAN PELAYANAN</th>
                                <td>
                                    <textarea name="a1c1" style="height: auto !important;" class="form-control mb-3 mt-2" rows="4" rows="4" required=""></textarea>
                                </td>
                                <td>
                                    <div style="position: relative; display: block;">
                                        <textarea name="a1c2" style="height: auto !important;" class="form-control mb-3 mt-2" rows="4" rows="4" required=""></textarea>
                                        <button id="bA1C2" type="button" style="position: absolute; top: -13px; right: 0;" class="btn btn-lhp-add btn-info btn-icon btn-sm"><i class="fas fa-plus"></i></button>
                                    </div>
                                </td>
                            </tr>
                            <tr class="border-bottom">
                                <th style="width: 20%;vertical-align: middle;">PROFESIONALISME SDM</th>
                                <td><textarea name="a2c1" style="height: auto !important;" class="form-control my-3" rows="4" required=""></textarea></td>
                                <td><textarea name="a2c2" style="height: auto !important;" class="form-control my-3" rows="4" required=""></textarea></td>
                            </tr>
                            <tr class="border-bottom">
                                <th style="width: 20%;vertical-align: middle;">SARANA PRASARANA</th>
                                <td><textarea name="a3c1" style="height: auto !important;" class="form-control my-3" rows="4" required=""></textarea></td>
                                <td><textarea name="a3c2" style="height: auto !important;" class="form-control my-3" rows="4" required=""></textarea></td>
                            </tr>
                            <tr class="border-bottom">
                                <th style="width: 20%;vertical-align: middle;">SISTEM INFORMASI PELAYANAN PUBLIK</th>
                                <td><textarea name="a4c1" style="height: auto !important;" class="form-control my-3" rows="4" required=""></textarea></td>
                                <td><textarea name="a4c2" style="height: auto !important;" class="form-control my-3" rows="4" required=""></textarea></td>
                            </tr>
                            <tr class="border-bottom">
                                <th style="width: 20%;vertical-align: middle;">KONSULTASI DAN PENGADUAN</th>
                                <td><textarea name="a5c1" style="height: auto !important;" class="form-control my-3" rows="4" required=""></textarea></td>
                                <td><textarea name="a5c2" style="height: auto !important;" class="form-control my-3" rows="4" required=""></textarea></td>
                            </tr>
                            <tr>
                                <th style="width: 20%;vertical-align: middle;">INOVASI</th>
                                <td><textarea name="a6c1" style="height: auto !important;" class="form-control mb-2 mt-3" rows="4" required=""></textarea></td>
                                <td><textarea name="a6c2" style="height: auto !important;" class="form-control mb-2 mt-3" rows="4" required=""></textarea></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <div class="text-right">
                        <button type="button" class="btn btn-warning mr-3" data-dismiss="modal"><span class="fas fa-times mr-2"></span>Tutup</button>
                        <button type="submit" class="btn btn-primary" data-loading-text="<span class='spinner-border spinner-border-sm'></span> Menyimpan ..."><span class="far fa-save mr-2"></span>Simpan</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div id="mdlLBA" class="modal fade" role="dialog">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header border-bottom shadow-sm pb-4">
                <h5 class="modal-title">Berita Acara PEKPP</h5>
                <button type="button" aria-label="Close" class="close outline-none text-danger" data-dismiss="modal">×</button>
            </div>
            <form method="POST" action="{{ route('report.save') }}">
                <input type="hidden" name="_token" value="">
                <div class="modal-body border-bottom shadow-sm">
                    <table class="table table-sm table-hover mb-0">
                        <thead>
                            <tr>
                                <th class="border-0 pb-4 text-dark font-weight-bold text-uppercase">Komponen</th>
                                <th class="border-0 pb-4 text-dark font-weight-bold text-uppercase text-center">Rekomendasi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="border-bottom">
                                <th style="width: 20%;vertical-align: middle;" data-ref="1">KEBIJAKAN PELAYANAN</th>
                                <td>
                                    <div style="position: relative; display: block; margin-top: 1em;">
                                        <button type="button" style="position: absolute; top: -13px; left: -10px; font-weight: 800 !important;" class="btn btn-dark btn-sm">1</button>
                                        <textarea name="a1c2" style="height: auto !important;" class="form-control mb-3" rows="4" rows="4" required=""></textarea>
                                        <button id="bbA1C2" type="button" style="position: absolute; top: -13px; right: 0;" class="btn btn-ba-add btn-info btn-icon btn-sm"><i class="fas fa-plus"></i></button>
                                    </div>
                                    <div style="position: relative; display: block; margin-top: 1.75em;">
                                        <button type="button" style="position: absolute; top: -13px; left: -10px; font-weight: 800 !important;" class="btn btn-dark btn-sm">2</button>
                                        <textarea name="a1c2" style="height: auto !important;" class="form-control mb-3" rows="4" rows="4" required=""></textarea>
                                        <button type="button" style="position: absolute; top: -13px; right: 0;" class="btn btn-ba-rm btn-danger btn-icon btn-sm"><i class="fas fa-minus"></i></button>
                                    </div>
                                </td>
                            </tr>
                            <tr class="border-bottom">
                                <th style="width: 20%;vertical-align: middle;" data-ref="2">PROFESIONALISME SDM</th>
                                <td>
                                    <div style="position: relative; display: block;">
                                        <button type="button" style="position: absolute; top: -13px; left: -10px; font-weight: 800 !important;" class="btn btn-dark btn-sm">1</button>
                                        <textarea name="a2c2" style="height: auto !important;" class="form-control my-3" rows="4" required=""></textarea>
                                        <button id="bbA2C2" type="button" style="position: absolute; top: -13px; right: 0;" class="btn btn-ba-add btn-info btn-icon btn-sm"><i class="fas fa-plus"></i></button>
                                    </div>
                                </td>
                            </tr>
                            <tr class="border-bottom">
                                <th style="width: 20%;vertical-align: middle;" data-ref="3">SARANA PRASARANA</th>
                                <td>
                                    <div style="position: relative; display: block;">
                                        <button type="button" style="position: absolute; top: -13px; left: -10px; font-weight: 800 !important;" class="btn btn-dark btn-sm">1</button>
                                        <textarea name="a3c2" style="height: auto !important;" class="form-control my-3" rows="4" required=""></textarea>
                                        <button id="bbA3C2" type="button" style="position: absolute; top: -13px; right: 0;" class="btn btn-ba-add btn-info btn-icon btn-sm"><i class="fas fa-plus"></i></button>
                                    </div>
                                </td>
                            </tr>
                            <tr class="border-bottom">
                                <th style="width: 20%;vertical-align: middle;" data-ref="4">SISTEM INFORMASI PELAYANAN PUBLIK</th>
                                <td>
                                    <div style="position: relative; display: block;">
                                        <button type="button" style="position: absolute; top: -13px; left: -10px; font-weight: 800 !important;" class="btn btn-dark btn-sm">1</button>
                                        <textarea name="a4c2" style="height: auto !important;" class="form-control my-3" rows="4" required=""></textarea>
                                        <button id="bbA4C2" type="button" style="position: absolute; top: -13px; right: 0;" class="btn btn-ba-add btn-info btn-icon btn-sm"><i class="fas fa-plus"></i></button>
                                    </div>
                                </td>
                            </tr>
                            <tr class="border-bottom">
                                <th style="width: 20%;vertical-align: middle;" data-ref="5">KONSULTASI DAN PENGADUAN</th>
                                <td>
                                    <div style="position: relative; display: block;">
                                        <button type="button" style="position: absolute; top: -13px; left: -10px; font-weight: 800 !important;" class="btn btn-dark btn-sm">1</button>
                                        <textarea name="a5c2" style="height: auto !important;" class="form-control my-3" rows="4" required=""></textarea>
                                        <button id="bbA5C2" type="button" style="position: absolute; top: -13px; right: 0;" class="btn btn-ba-add btn-info btn-icon btn-sm"><i class="fas fa-plus"></i></button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th style="width: 20%;vertical-align: middle;" data-ref="6">INOVASI</th>
                                <td>
                                    <div style="position: relative; display: block;">
                                        <button type="button" style="position: absolute; top: -13px; left: -10px; font-weight: 800 !important;" class="btn btn-dark btn-sm">1</button>
                                        <textarea name="a6c2" style="height: auto !important;" class="form-control mb-2 mt-3" rows="4" required=""></textarea>
                                        <button id="bbA6C2" type="button" style="position: absolute; top: -13px; right: 0;" class="btn btn-ba-add btn-info btn-icon btn-sm"><i class="fas fa-plus"></i></button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <div class="text-right">
                        <button type="button" class="btn btn-warning mr-3" data-dismiss="modal"><span class="fas fa-times mr-2"></span>Tutup</button>
                        <button type="submit" class="btn btn-primary" data-loading-text="<span class='spinner-border spinner-border-sm'></span> Menyimpan ..."><span class="far fa-save mr-2"></span>Simpan</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('css')
    <link href="{{ asset('assets/datatables/RowGroup-1.1.3/css/rowGroup.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    @include('layouts.datatables_css')
    <style type="text/css">
        table.dataTable tr.dtrg-group td { background-color: unset !important; }
    </style>
@endpush

@push('js')
@include('layouts.datatables_js')
<script src="{{ asset('assets/datatables/RowGroup-1.1.3/js/rowGroup.bootstrap4.min.js') }}"></script>
<script src="{{ asset('assets/datatables/RowGroup-1.1.3/js/dataTables.rowGroup.min.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var dtb1 = null, dtb2 = null, dtbRTP = null;
        var ifl = {'ba': false, 'lhp': false};
        const token = "{{ csrf_token() }}";
        const year = "{{ $year }}";
        const unit = "{{ $unit }}";
        const aspects = {!! json_encode($aspects) !!};

        function toPercent(x) {
            if (x) {
                return parseFloat(Math.round(x * 100)).toFixed(0) + "%";
            }
            
            return '';
        }

        function initDTBRTP() {
            if (!isDTB(dtbRTP)) {
                dtbRTP = $('#rtpTable').DataTable({
                    serverSide: false,
                    dom: "<\'px-3 my-4 d-flex justify-content-start align-items-center\'<\'title-rtp\'>><\'table-responsive\'tr>",
                    paging: false,
                    ordering: false,
                    stateSave: false,
                    initComplete: function (s) {
                        $('.title-rtp').html('<p class="text-dark my-0 py-0 font-weight-bold">Perhitungan Nilai IPP</p>');
                        genDatatableLook('#rtpTable');
                    },
                    drawCallback: function (s) {
                        genDatatableLook('#rtpTable');
                        $('#rtpTable tbody tr td').addClass('text-center');
                    }
                });
            }
        }

        function initDTB2() {
            if (!isDTB(dtb2)) {
                dtb2 = $('#table2').DataTable({
                    serverSide: true,
                    processing: true,
                    ajax: {
                        url: "{{ $url }}".replace('f2','f3'),
                        type: "post",
                        data: function (d) {
                            for(var i=0,l=d.columns.length;i<l;i++){if(!d.columns[i].search.value){delete d.columns[i].search;}if(d.columns[i].searchable === true){delete d.columns[i].searchable;}if(d.columns[i].orderable === true){delete d.columns[i].orderable;}if(d.columns[i].data === d.columns[i].name){delete d.columns[i].name;}}delete d.search.regex;
                        },
                        headers: {'X-CSRF-TOKEN': token}
                    },
                    buttons: [
                        {
                            'text': '<i class="far fa-file-word"></i>',
                            'className': 'btn btn-info btn-exportf3-word btn-sm mr-2'
                        },
                        {
                            'text': '<i class="far fa-file-excel"></i>',
                            'className': 'btn btn-success btn-exportf3-excel btn-sm mr-2'
                        },
                        {
                            'text': '<i class="far fa-file-pdf"></i>',
                            'className': 'btn btn-danger btn-exportf3-pdf btn-sm mr-2'
                        },
                        {
                            'extend': 'reload',
                            'text': '<i class="fas fa-sync"></i>',
                            'className': 'btn rounded btn-warning btn-sm'
                        }
                    ],
                    columns: [
                        {name: 'instrument_type', data: function (d) { return '<strong class="text-dark">'+ d.num +'<sup>'+ d.instrument_type +'</sup></strong>'; }, title: 'No', class: 'text-center', searchable: !1, orderable: !1},
                        {name: 'code', data: 'code', title: 'Indikator', class: 'text-center', searchable: !1, orderable: !1},
                        {name: 'issue', data: function (d) { return d.issue.replaceAll('[b]','<strong class="text-dark">').replaceAll('[/b]', '</strong>');}, title: 'Isu', class: 'text-left align-middle', searchable: !1, orderable: !1},
                        {name: 'point', data: 'point', title: 'Poin', class: 'text-center', searchable: !1, orderable: !1},
                        {name: 'respondent_count', data: 'respondent_count', title: '∑ Respoden', class: 'text-center', searchable: !1, orderable: !1},
                        {name: 'subtotal', data: function(d) { return ''; }, title: 'Nilai', class: 'text-center', searchable: !1, orderable: !1},
                    ],
                    dom: "<\'px-3 my-4 d-flex justify-content-between align-items-center\'<\'title2\'>B><\'table-responsive\'tr>",
                    paging: false,
                    ordering: false,
                    stateSave: false,
                    language: dtblg,
                    createdRow: function (r, d, di) {
                        $(r).attr('data-index', di);
                        $(r).find('td').addClass('align-middle');
                    },
                    initComplete: function (s) {
                        $('.title2').html('<p class="text-dark my-0 py-0 font-weight-bold">Perhitungan Form 03</p>');
                        genDatatableLook('#table2');
                        $('#realtimePoint').removeClass('d-none');

                        if (s.json.ipp) {
                            initDTBRTP();

                            let m = s.json.ipp;
                            dtbRTP.clear().draw();
                            dtbRTP.row.add([m.A1, m.A2, m.A3, m.A4, m.A5, m.A6, m.F3, m.score, '<strong class="text-dark">'+ m.category[0] +'<br>'+ m.category[1] +'</strong>']).draw();
                        }
                    },
                    drawCallback: function (s) {
                        genDatatableLook('#table2');

                        if (isDTB(dtbRTP) && s.json.ipp) {
                            let m = s.json.ipp;
                            dtbRTP.clear().draw();
                            dtbRTP.row.add([m.A1, m.A2, m.A3, m.A4, m.A5, m.A6, m.F3, m.score, '<strong class="text-dark">'+ m.category[0] +'<br>'+ m.category[1] +'</strong>']).draw();
                        }

                        if ($('#table2 tfoot').length == 0) {
                            var idx = null;

                            for (var i = 0; i < s.aoData.length; i++) {
                                var r  = s.aoData[i], d = r._aData;
                                var d  = r._aData;
                                var tr = $(r.nTr);

                                if (idx == null) {
                                    idx = d.instrument_type;

                                    tr.find('td:nth-child(5)').attr('rowspan', d.instrument_type == 'A' ? s.json.result.Ar : s.json.result.Br);
                                    tr.find('td:nth-child(6)').attr('rowspan', d.instrument_type == 'A' ? s.json.result.Ar : s.json.result.Br);
                                    tr.find('td:nth-child(6)').text(d.instrument_type == 'A' ? s.json.result.Av.toFixed(2).replace('.', ',') : s.json.result.Bv.toFixed(2).replace('.', ','));
                                } else {
                                    if (idx == d.instrument_type) {
                                        tr.find('td:nth-child(5)').addClass('d-none');
                                        tr.find('td:nth-child(6)').addClass('d-none');
                                    } else {
                                        idx = d.instrument_type;

                                        tr.find('td:nth-child(5)').attr('rowspan', d.instrument_type == 'A' ? s.json.result.Ar : s.json.result.Br);
                                        tr.find('td:nth-child(6)').attr('rowspan', d.instrument_type == 'A' ? s.json.result.Ar : s.json.result.Br);
                                        tr.find('td:nth-child(6)').text(d.instrument_type == 'A' ? s.json.result.Av.toFixed(2).replace('.', ',') : s.json.result.Bv.toFixed(2).replace('.', ','));
                                    }
                                }
                            }

                            $('#table2').append('<tfoot><tr><td colspan="3"></td><th colspan="2" class="bg-primary text-white border">TOTAL</th><td class="text-center align-middle bg-primary text-white border"><strong>'+ s.json.result.total.toFixed(2).replace('.', ',') +'</strong></td></tr><tr><td colspan="3"></td><th colspan="2" class="bg-info text-white border">TOTAL * 25%</th><td class="text-center align-middle bg-info text-white border"><strong>'+ s.json.result.total25.toFixed(2).replace('.', ',') +'</strong></td></tr></tfoot>');
                        }
                    }
                });
            } else {
                dtb2.ajax.reload();
            }
        }

        $('body').addClass('sidebar-mini'); // Default Collapse Sidebar
        $('input[name=year]').val(year);
        $('title').text('Rincian Penilaian | '+ unit);
        $('section.section div.card.card-primary div.card-header h4 small').text('Unit Pelayanan : '+ unit);

        dtb1 = $('#table1').DataTable({
            serverSide: true,
            processing: true,
            ajax: {
                url: "{{ $url }}",
                type: "post",
                data: function (d) {
                    for(var i=0,l=d.columns.length;i<l;i++){if(!d.columns[i].search.value){delete d.columns[i].search;}if(d.columns[i].searchable === true){delete d.columns[i].searchable;}if(d.columns[i].orderable === true){delete d.columns[i].orderable;}if(d.columns[i].data === d.columns[i].name){delete d.columns[i].name;}}delete d.search.regex;
                },
                headers: {'X-CSRF-TOKEN': token}
            },
            columns: [
                {name: 'code', data: 'code', title: 'Kode Indikator', class: 'text-center', searchable: !1, orderable: !1},
                {name: 'indicator', data: 'indicator', title: 'Indikator', class: 'text-left align-middle', searchable: !1, orderable: !1},
                {name: 'f2point', data: function (d) { return d.f2point ? String(d.f2point).replace('.', ',') : '0'; }, title: 'F02', class: 'text-center', searchable: !1, orderable: !1},
                {name: 'denominator', data: function (d) { return d.denominator;}, title: 'Denominator', class: 'text-center', searchable: !1, orderable: !1},
                {name: 'weight', data: function (d) { return toPercent(d.weight); }, title: 'Bobot Per Indikator', class: 'text-center', searchable: !1, orderable: !1},
                {name: 'indicator_point', data: function (d) { return d.indicator_point ? d.indicator_point.toFixed(3) : 0; }, title: 'Nilai Per Indikator', class: 'text-center', searchable: !1, orderable: !1},
                {name: 'aspect_point', data: function (d) { return ''; }, title: 'Nilai Per Aspek', class: 'text-center', searchable: !1, orderable: !1},
                {name: 'aspect_weight', data: function (d) { return toPercent(d.aspect_weight); }, title: 'Bobot Per Aspek', class: 'text-center', searchable: !1, orderable: !1},
                {name: 'aspect_point_weight', data: function (d) { return ''; }, title: 'Nilai Per Aspek setelah pembobotan', class: 'text-center', searchable: !1, orderable: !1},
            ],
            dom: "<\'d-flex px-3 my-4 justify-content-between align-items-center\'<\'title1\'>B><\'table-responsive\'tr>",
            paging: false,
            stateSave: false,
            ordering: false,
            rowGroup: {
                dataSrc: function (r) { return 'Aspek '+ r.aspect_number +' : '+ r.aspect_name; },
                startClassName: 'bg-success text-white'
            },
            buttons: [
                {
                    'text': '<i class="far fa-file-word"></i>',
                    'className': 'btn btn-info btn-exportf2-word btn-sm mr-2'
                },
                {
                    'text': '<i class="far fa-file-excel"></i>',
                    'className': 'btn btn-success btn-exportf2-excel btn-sm mr-2'
                },
                {
                    'text': '<i class="far fa-file-pdf"></i>',
                    'className': 'btn btn-danger btn-exportf2-pdf btn-sm mr-2'
                },
                {
                    'extend': 'reload',
                    'text': '<i class="fas fa-sync"></i>',
                    'className': 'btn rounded btn-warning btn-sm'
                }
            ],
            language: dtblg,
            createdRow: function (r, d, di) {
                $(r).attr('data-index', di);
                $(r).find('td').addClass('align-middle');
                $(r).addClass('aspect'+ d.aspect_id);

                if (!d.f2point || d.f2point == '0') { $(r).find('td:nth-child(3)').addClass('bg-warning text-white border'); }

                $(r).find('td:nth-child(7)').addClass('aspect'+ d.aspect_id + '8');
                $(r).find('td:nth-child(8)').addClass('aspect'+ d.aspect_id + '9');
                $(r).find('td:nth-child(9)').addClass('aspect'+ d.aspect_id + '10');
            },
            initComplete: function (s) {
                $('.title1').html('<p class="text-dark my-0 py-0 font-weight-bold">Perhitungan Form 02</p>');
                $('#table1 thead:first-child tr:first-child th:nth-child(2)').addClass('text-center').removeClass('text-left');

                genDatatableLook('#table1');
                initDTB2();
            },
            drawCallback: function (s) {
                genDatatableLook('#table1');

                if ($('#table1 tfoot').length == 0) {
                    var aspects = s.json.aspects;

                    var idx = null;
                    for (var i = 0; i < s.aoData.length; i++) {
                        var r  = s.aoData[i], d = r._aData;
                        var tr = $(r.nTr);

                        if (idx == null) {
                            idx = d.aspect_id;
                            var td = '.aspect'+ idx;
                            var rowspan = aspects[idx].count;
                            tr.find(td + '8')
                            .attr('rowspan', rowspan)
                            .text(aspects[idx].point.toFixed(3).replace('.', ','));
                            tr.find(td + '9').attr('rowspan', rowspan);
                            tr.find(td + '10')
                            .attr('rowspan', rowspan)
                            .text(aspects[idx].value.toFixed(3).replace('.', ','));
                        } else {
                            if (idx == d.aspect_id) {
                                var td = '.aspect'+ idx;
                                tr.find(td + '8').addClass('d-none');
                                tr.find(td + '9').addClass('d-none');
                                tr.find(td + '10').addClass('d-none');
                            } else {
                                idx = d.aspect_id;
                                var td = '.aspect'+ idx;
                                var rowspan = aspects[idx].count;
                                tr.find(td + '8')
                                .attr('rowspan', rowspan)
                                .text(aspects[idx].point.toFixed(3).replace('.', ','));
                                tr.find(td + '9').attr('rowspan', rowspan);
                                tr.find(td + '10')
                                .attr('rowspan', rowspan)
                                .text(aspects[idx].value.toFixed(3).replace('.', ','));
                            }
                        }
                    }

                    $('#table1').append('<tfoot><tr><td colspan="6"></td><th colspan="2" class="bg-primary text-white border">TOTAL </th><td class="text-center align-middle bg-primary text-white border"><strong>'+ s.json.point.toFixed(2).replace('.', ',') +'</strong></td></tr><tr><td colspan="6"></td><th colspan="2" class="bg-info text-white border">TOTAL * 75%</th><td class="text-center align-middle bg-info text-white border text-uppercase"><strong>'+ s.json.total75.toFixed(2).replace('.', ',') +'</strong></td></tr></tfoot>');
                }
            }
        });

        $(document).on('click', '.btn-exportf2-word', function (e) {
            e.preventDefault();
            let url = window.location.href.replace('assessment/show-v2', 'assessment/export/f2/word');
            window.location = url;
        });
        $(document).on('click', '.btn-exportf2-excel', function (e) {
            e.preventDefault();
            let url = window.location.href.replace('assessment/show-v2', 'assessment/export/f2/excel');
            window.location = url;
        });
        $(document).on('click', '.btn-exportf2-pdf', function (e) {
            e.preventDefault();
            let url = window.location.href.replace('assessment/show-v2', 'assessment/export/f2/pdf');
            window.location = url;
        });
        $(document).on('click', '.btn-exportf3-word', function (e) {
            e.preventDefault();
            let url = window.location.href.replace('assessment/show-v2', 'assessment/export/f3/word');
            window.location = url;
        });
        $(document).on('click', '.btn-exportf3-excel', function (e) {
            e.preventDefault();
            let url = window.location.href.replace('assessment/show-v2', 'assessment/export/f3/excel');
            window.location = url;
        });
        $(document).on('click', '.btn-exportf3-pdf', function (e) {
            e.preventDefault();
            let url = window.location.href.replace('assessment/show-v2', 'assessment/export/f3/pdf');
            window.location = url;
        });
        $(document).on('click', '#bWriteLHP', function (e) {
            e.preventDefault();
            
            /*if (!ifl.lhp) {
                let bLoader = $('#bWriteLHP');
                bLoader.button('loading');

                $.ajax({
                    url: ifl.lhp_get,
                    type: 'get',
                    data: {'_token': token, 'category': 1, 'year': year},
                    success: function(r) {
                        if (r.success) {
                            iziToast.success({title: 'OK', message: 'Berhasil mengambil data Laporan Hasil Penilaian PEKPP', position: 'topRight'});

                            ifl.lhp = true;
                            $('#mdlLHP').modal('show');
                            
                            let tr = $('#mdlLHP table tbody tr');
                            for (let i = 0; i < aspects.length; i++) {
                                let a = aspects[i];
                                let th = $(tr.get(i)).find('th');
                                let td = $(tr.get(i)).find('td');
                                th.attr('data-id', a['id']);
                                th.attr('data-aspect', a['aspect_id']);
                                td.find('textarea:nth-child(1)').val(a['c1']);
                                td.find('textarea:nth-child(2)').val(a['c2']);
                            }
                        } else {
                            iziToast.warning({title: 'OK', message: 'Gagal mengambil data Laporan Hasil Penilaian PEKPP', position: 'topRight'});
                        }
                    },
                    error: function(x, s, e) {
                        iziToast.error({title: 'Server Error!', message: 'Gagal mengambil data Laporan Hasil Penilaian PEKPP', position: 'topRight'});
                    },
                    complete: function complete() {
                        bLoader.button('reset');
                    }
                });
            } else {*/
                $('#mdlLHP').modal('show');
            // }
        });
        $('#mdlLHP').on('submit', 'form', function (e) {
            e.preventDefault();

            let f = $(this);
            let data = {'_token': token, 'aspects': [], 'category': 1, 'year': year};

            f.find('div.modal-body table tbody tr').each(function (k, v) {
                let tr = $(v);
                let th = tr.find('th:first-child');
                let a = th.get(0).hasAttribute('data-aspect') ? th.attr('data-aspect') : '';
                let i = th.get(0).hasAttribute('data-id') ? th.attr('data-id') : '';
                let r = th.get(0).hasAttribute('data-ref') ? th.attr('data-ref') : '';
                let c1 = tr.find('textarea:nth-child(1)').val().trim();
                let c2 = tr.find('textarea:nth-child(2)').val().trim();

                data['aspects'].push({'id': i, 'ref': r, 'aspect_id': a, 'content1': c1, 'content2': c2});
            });

            if (data.aspects != null && data.aspects.length > 0) {
                let bLoader = f.find('button[type=submit]:first-child');
                bLoader.button('loading');

                $.ajax({
                    url: f.attr('action'),
                    type: f.attr('method'),
                    data: data,
                    success: function(r) {
                        if (r.success) {
                            iziToast.success({title: 'OK', message: 'Laporan Hasil Penilaian PEKPP berhasil disimpan', position: 'topRight'});

                            if (r.category == 2) {
                                f.find('table:first-child tbody tr').each(function (k1, v1) {
                                    let tr = $(v1);
                                    tr.find('th:first-child').attr('data-id', r.aspects.id);
                                });
                            }

                            $('#mdlLHP').modal('hide');
                        } else {
                            iziToast.warning({title: 'Galat!', message: 'Laporan Hasil Penilaian PEKPP gagal disimpan!', position: 'topRight'});
                        }
                    },
                    error: function(x, s, e) {
                        iziToast.error({title: 'Server Error!', message: 'Laporan Hasil Penilaian PEKPP gagal disimpan!', position: 'topRight'});
                    },
                    complete: function complete() {
                        bLoader.button('reset');
                    }
                });
            }

            return false;
        });
        $(document).on('click', '#bPrintLHP', function (e) {
            e.preventDefault();
            let url = window.location.href.replace('assessment/show-v2', 'assessment/print/laporan-hasil-penilaian');
            window.location = url;
        });
        $(document).on('click', '#bWriteLBA', function (e) {
            e.preventDefault();

            // Reload Data First from Database
            /*if (!ifl.ba) {
                let bLoader = $('#bWriteLBA');
                bLoader.button('loading');

                $.ajax({
                    url: ifl.ba_get,
                    type: 'get',
                    data: {'_token': token, 'category': 2, 'year': year},
                    success: function(r) {
                        if (r.success) {
                            iziToast.success({title: 'OK', message: 'Berhasil mengambil data Berita Acara PEKPP', position: 'topRight'});

                            ifl.ba = true;
                            $('#mdlLBA').modal('show');
                            
                            let tr = $('#mdlLBA table tbody tr');
                            for (let i = 0; i < aspects.length; i++) {
                                let a = aspects[i];
                                let th = $(tr.get(i)).find('th');
                                let td = $(tr.get(i)).find('td');
                                th.attr('data-id', a['id']);
                                th.attr('data-aspect', a['aspect_id']);
                                td.find('textarea').val(a['c2']);
                            }
                        } else {
                            iziToast.warning({title: 'OK', message: 'Gagal mengambil data Berita Acara PEKPP', position: 'topRight'});
                        }
                    },
                    error: function(x, s, e) {
                        iziToast.error({title: 'Server Error!', message: 'Gagal mengambil data Berita Acara PEKPP', position: 'topRight'});
                    },
                    complete: function complete() {
                        bLoader.button('reset');
                    }
                });
            } else {*/
                $('#mdlLBA').modal('show');
            // }
        });
        $('#mdlLBA').on('click', '.btn-ba-add', function (e) {
            e.preventDefault();

            let r = $(this).closest('tr'); // TR or Row
            let name = r.find('td div:first-child textarea').attr('name');
            let numbers = r.find('td div');
            let nextNumber = numbers.length + 1;

            // Building Textarea
            // let div = $()

            // Append Textarea<div style="position: relative; display: block; margin-top: 1.75em;"><button ty
            r.find('td').append('pe="button" style="position: absolute; top: -13px; left: -10px; font-weight: 800 !important;" class="btn btn-dark btn-sm">'+ nextNumber +'</button><textarea name="'+ name +'" style="height: auto !important;" class="form-control mb-3" rows="4" rows="4" required=""></textarea><button type="button" style="position: absolute; top: -13px; right: 0;" class="btn btn-ba-rm btn-danger btn-icon btn-sm"><i class="fas fa-minus"></i></button></div>');
        });
        $('#mdlLBA').on('click', '.btn-ba-rm', function (e) {
            e.preventDefault();

            $(this).closest('div').remove();

            iziToast.success({title: 'Berhasil!', message: 'Form berhasil dihapus.', position: 'topRight'});
        });
        $('#mdlLBA').on('submit', 'form', function (e) {
            e.preventDefault();

            let f = $(this);
            let data = {'_token': token, 'aspects': [], 'category': 2, 'year': year};

            f.find('div.modal-body table tbody tr').each(function (k, v) {
                let tr = $(v);
                let th = tr.find('th:first-child');
                let i = th.get(0).hasAttribute('data-id') ? th.attr('data-id') : '';
                let r = th.get(0).hasAttribute('data-ref') ? th.attr('data-ref') : '';
                let c = tr.find('textarea:first-child').val().trim();
                let a = th.get(0).hasAttribute('data-aspect') ? th.attr('data-aspect') : '';

                data['aspects'].push({'id': i, 'ref': r, 'aspect_id': a, 'content1': '', 'content2': c});
            });

            if (data.aspects != null && data.aspects.length > 0) {
                let bLoader = f.find('button[type=submit]:first-child');
                bLoader.button('loading');

                $.ajax({
                    url: f.attr('action'),
                    type: f.attr('method'),
                    data: data,
                    success: function(r) {
                        if (r.success) {
                            iziToast.success({title: 'OK', message: 'Berita Acara PEKPP berhasil disimpan', position: 'topRight'});

                            if (r.category == 2) {
                                f.find('table:first-child tbody tr').each(function (k1, v1) {
                                    let tr = $(v1);
                                    tr.find('th:first-child').attr('data-id', r.aspects.id);
                                });
                            }

                            $('#mdlLBA').modal('hide');
                        } else {
                            iziToast.warning({title: 'Galat!', message: 'Berita Acara PEKPP gagal disimpan!', position: 'topRight'});
                        }
                    },
                    error: function(x, s, e) {
                        iziToast.error({title: 'Server Error!', message: 'Berita Acara PEKPP gagal disimpan!', position: 'topRight'});
                    },
                    complete: function complete() {
                        bLoader.button('reset');
                    }
                });
            }

            return false;
        });
        $(document).on('click', '#bPrintBA', function (e) {
            e.preventDefault();
            let url = window.location.href.replace('assessment/show-v2', 'assessment/print/berita-acara');
            window.location = url;
        });
    });
</script>
@endpush