@extends('layouts.app')
@section('title')
Penilaian IPP
@endsection
@section('content')
<section class="section">
    <div class="card card-primary">
        <div class="card-header">
            <h4>Penilaian IPP {{ date('Y') }}</h4>
            <div class="card-header-action">
                <input type="number" name="year" id="YearPicker" class="form-control text-center" placeholder="Tahun Pelaksanaan" value="{{ date('Y') }}">
            </div>
        </div>
    </div>
    <div class="section-body">
       <div class="card">
            <div class="card-body px-0 py-1">
                <table id="table1" class="table table-borderless table-stripped table-hover"></table>
            </div>
       </div>
   </div>    
</section>
@endsection
@push('css')
    @include('layouts.datatables_css')
@endpush
@push('js')
@include('layouts.datatables_js')
<script type="text/javascript">
    $(document).ready(function () {
        const token = "{{ csrf_token() }}";

        function getYearInput() {
            return $('input#YearPicker').val();
        }

        $('body').addClass('sidebar-mini'); // Default Collapse Sidebar

        var dtb1 = $('#table1').DataTable({
            serverSide: true,
            processing: true,
            ajax: {
                url: "{{ route('assessment.dashboard') }}",
                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;
                    d.year = getYearInput();
                },
                headers: {'X-CSRF-TOKEN': token}
            },
             "columns":[
                {name: 'action', data: 'action', title: '#', class: 'text-center align-middle', searchable: !1},
                {name: 'u.nm', data: 'opd', title: 'OPD', class: 'text-left align-middle', orderable: !1},
                {name: 'pf2', data: 'pf2', title: 'Poin F02', class: 'text-center align-middle', searchable: !1, orderable: !1, visible: !1},
                {name: 'pf3', data: 'pf3', title: 'Poin F03', class: 'text-center align-middle', searchable: !1, orderable: !1, visible: !1},
                {name: 'f2', data: 'f2', title: 'Nilai F02', class: 'text-center align-middle', searchable: !1, orderable: !1},
                {name: 'f3', data: 'f3', title: 'Nilai F03', class: 'text-center align-middle', searchable: !1, orderable: !1},
                {name: 'ipp', data: 'ipp', title: 'Nilai IPP', class: 'text-center align-middle', searchable: !1, orderable: !1},
                {name: 'category', data: function (r) { return '<strong class="text-dark">'+ r.category[0] +'</strong><br>('+ r.category[1] +')';}, title: 'Kategori', class: 'text-center align-middle', searchable: !1, orderable: !1}
            ],
            dom: dtbdom,
            stateSave: false,
            order: [[0, 'asc']],
            buttons: [
                {
                    'extend': 'colvis',
                    'text': 'Kolom',
                    'className': 'btn btn-dark btn-sm mr-2 text-uppercase'
                },
                {
                    'text': '<i class="fas fa-file-word"></i>',
                    'className': 'btn rounded btn-info btn-export-word btn-sm mr-2'
                },
                {
                    'text': '<i class="fas fa-file-pdf"></i>',
                    'className': 'btn rounded btn-danger btn-export-pdf btn-sm mr-2'
                },
                {
                    'text': '<i class="fas fa-file-excel"></i>',
                    'className': 'btn rounded btn-success btn-export-excel btn-sm mr-2'
                },
                {
                    'extend': 'reload',
                    'text': '<i class="fas fa-sync"></i>',
                    'className': 'btn rounded btn-warning btn-sm'
                }
            ],
            language: dtblg,
            initComplete: function (s) { genDatatableLook('#table1'); },
            drawCallback: function (s) { genDatatableLook('#table1'); }
        });

        $(document).on('click', '.btn-export-word', function (e) {
            e.preventDefault();
            console.log('Exporting to Word ...');

            let url = window.location.href.replace('assessment/dashboard', 'assessment/export/idx/word') + '?year=' + getYearInput();
            window.location = url;
        });

        $(document).on('click', '.btn-export-pdf', function (e) {
            e.preventDefault();
            console.log('Exporting to PDF ...');
        });
        
        $(document).on('click', '.btn-export-excel', function (e) {
            e.preventDefault();
            console.log('Exporting to Excel ...');

            let url = window.location.href.replace('assessment/dashboard', 'assessment/export/idx/excel') + '?year=' + getYearInput();
            window.location = url;
        });
    });
</script>
@endpush