@extends('layouts.app')
@section('title')
Bobot Penilaian
@endsection
@section('content')
<section class="section">
    <div class="card card-primary rounded">
        <div class="card-header">
            <h4><i class="fas fa-balance-scale text-success mr-3" style="font-size:16px;"></i>Bobot Penilaian</h4>
            <div class="card-header-action">
                <input type="number" name="yp" id="YearPicker" class="form-control" placeholder="Tahun Pelaksanaan" value="2023" style="width: 100px;text-align: center;">
            </div>
        </div>
    </div>
    <div class="section-body">
         <div class="card">
            <div class="card-body p-0">
            	<table id="table1" class="table table-striped table-bordered table-hover"></table>
            </div>
        </div>
    </div>
</section>
@endsection
@section('modal')
<div id="AWModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Bobot Penilaian</h5>
                <button type="button" aria-label="Close" class="close outline-none" data-dismiss="modal">×</button>
            </div>
            <form method="POST" id="AWForm" action="">
                <input type="hidden" name="_token" value="">
                <div class="modal-body">
                    <!-- Weight Field -->
                    <div class="form-group">
                        <label for="cWeight">Weight <span class="required">*</span></label>
                        <input id="cWeight" type="number" name="weight" class="form-control" step="any" required>
                    </div>
                    <!-- Denominator Field -->
                    <div class="form-group">
                        <label for="cDenominator">Denominator <span class="required">*</span></label>
                        <input id="cDenominator" type="number" name="denominator" class="form-control" required>
                    </div>
                </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="fa fa-window-restore 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 token = $('meta[name=csrf-token]').attr('content');
        var dtb = null;

        function refreshDTB(isKeepPage) {
            if (isDTB(dtb)) {
                if (isKeepPage) {
                    dtb.ajax.reload(null, false);
                } else {
                	dtb.ajax.reload(null, true);
                }
            }
        }

        dtb =  $('#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}
            },
            dom: dtbdom,
            paging: false,
            stateSave: false,
            order: [[0, 'asc']],
            lengthMenu: [[5,10,20,30,-1],[5,10,20,30,"All"]],
            pageLength: -1,
            language: dtblg,
            rowGroup: {
                dataSrc: function (r) { return 'Aspek '+ r.aspect_number +' : '+ r.aspect_name +'|'+ r.aspect_weight.toFixed(2); },
                startClassName: 'bg-success text-white'
            },
            buttons: [
                {
                    'extend': 'colvis',
                    'text': 'Kolom',
                    'className': 'btn rounded btn-dark btn-sm mr-2 text-uppercase'
                },
                {
                    'extend': 'collection',
                    'text': 'Ekspor',
                    'className': 'btn rounded btn-info btn-sm mr-2 text-uppercase',
                    'buttons': [
                        {
                            'text': '<span class="far fa-file-excel mr-2"></span>Excel',
                            'className': 'btn btn-success btn-export-excel'
                        },
                        {
                            'text': '<span class="far fa-file-pdf mr-2"></span>PDF',
                            'className': 'btn btn-danger btn-export-pdf'
                        }
                    ]
                },
                {
                    'extend': 'print',
                    'text': '<span class="fas fa-print"></span>',
                    'className': 'btn rounded btn-primary btn-sm mr-2'
                },
                {
                    'extend': 'reload',
                    'text': '<i class="fas fa-sync"></i>',
                    'className': 'btn rounded btn-warning btn-sm'
                }
            ],
            'columns':[
                {name: 'number', data: function (r) {let instrumentType = r.instrument_type == 'A' || r.instrument_type == 'B' ? '' + r.instrument_type : ''; return '<b>'+ r.number + instrumentType +'</b>';}, title: 'No', width: '30px', class: 'text-center', searchable: !1},
                {name: 'code', data: function (r) {return '<b>'+ r.code +'</b>';}, title: 'Kode', width: '50px', class: 'text-center', orderable: !1},
                {name: 'indicator', data: function (r) { return r.indicator; }, title: 'Indikator', searchable: !1, orderable: !1},
                {name: 'weight', data: function (r) {return isNaN(r.weight) ? 0 : r.weight;}, title: 'Bobot', width: '50px', class: 'text-center', searchable: !1, orderable: !1},
                {name: 'denominator', data: function (r) {
                	if (r.instrument_type) {
                		if (r.instrument_type == 'A') {
                			return r.f2a;
                		} else if (r.instrument_type == 'B') {
                			return r.f2b;
                		} else {
                			return r.f2u;
                		}
                	} else {
                		return r.denominator;
                	}
                }, title: 'Denominator', width: '50px', class: 'text-center', searchable: !1, orderable: !1}
            ],
            initComplete: function (s) {
            	genDatatableLook('#table1');
            	$('#table1').css('width', '');
                $('#table1 tbody tr.dtrg-group').find('td').each(function (i, el) {
                    let elm = $(el);

                    let elms = elm.text().split('|');
                    elm.text(elms[0]);

                    elm.attr('colspan', 3);
                    elm.closest('tr').append('<td class="text-center">'+ (elms[1] * 100) +'%</td><td class="text-center"></td>');
                });
            },
            drawCallback: function (s) {
            	genDatatableLook('#table1');
            	$('#table1').css('width', '');
            }
        });

        $(document).on('click', '.btn-edit', function (e) {
            e.preventDefault();

            let mdl = $('#AWModal');
            mdl.find('h5.modal-title').text('Edit Bobot Penilaian');
            mdl.find('form').attr('method', 'post');
            mdl.find('form').attr('action', $(this).attr('href'));
            mdl.find('input[name=_token]').val(token);
            mdl.modal('show');
        });

        $(document).on('submit', '#AWForm', function (e) {
            e.preventDefault();
            
            var f = $(this);

            if (f.attr('action') && (f.attr('method') == 'post' || f.attr('method') == 'put')) {
                var bLoader = f.find('button[type=submit]');
                var p = new FormData(f.get(0));
                var t = f.attr('method');

                if (f.attr('method') == 'put') {
                    p.append('_method', 'put');
                    t = 'post';
                }

                $.ajax({
                    url: f.attr('action'),
                    type: t,
                    data: p,
                    processData: false,
                    contentType: false,
                    beforeSend: function () {
                        bLoader.button('loading');
                    },
                    success: function success(r) {
                        bLoader.button('reset');
                        
                        if (r.success) {
                            f.closest('div.modal').modal('hide');
                            f.get(0).reset();

                            refreshDTB(false);

                            let m = r.message ? r.message : 'Data berhasil disimpan.';
                            iziToast.success({title: 'OK', message: m, position: 'topRight'});
                        } else {
                            let m = r.message ? r.message : 'Data gagal disimpan!';
                            iziToast.warning({title: 'Galat!', message: m, position: 'topRight'});
                        }
                    },
                    error: function error(r) {
                        bLoader.button('reset');
                        iziToast.error({title: 'Server Error!', message: 'Data gagal disimpan!', position: 'topRight'});
                    }
                });
            } else {
                iziToast.warning({title: 'Galat!', message: 'Something Error!', position: 'topRight'});
            }

            return false;
        });
    });
</script>
@endpush