@extends('layouts.app')
@section('title')
Data Kuesioner Form 3
@endsection
@section('content')
<section class="section">
    <div class="card card-primary" style="border-radius: .75rem !important;">
        <div class="card-header shadow-sm border-bottom">
            <h4>Data Kuesioner Form 3</h4>
            <div class="d-flex ml-auto">
                <select name="unit" id="unit" class="form-control mr-3" style="font-size:13px;height:31px;line-height:1;padding:0px 15px;text-align:left;width:300px;"></select>
                <select name="instrument_type" id="instrumentType" class="form-control mr-3" style="font-size:13px;height:31px;line-height:1;padding:0px 15px;text-align:center;width:100px;">
                    <option value="Z">Semua</option>
                    <option value="A">A</option>
                    <option value="B">B</option>
                </select>
                <input type="number" name="year" id="YearPicker" class="form-control form-control-sm" placeholder="Tahun Pelaksanaan" value="{{ date('Y') }}" style="width: 100px; text-align: center;">
            </div>
        </div>
        <div class="card-body pt-2 pb-0">
            <ul class="nav nav-dashboard-section" id="navDashboardSection">
               <li class="nav-item active">
                    <a href="javascript:void(0);" data-tab-point="1" class="nav-link">
                        <i class="fab fa-wpforms text-info" style="width: 20px;"></i>
                        <span style="text-transform: uppercase;font-size: 13px;line-height: 12px;font-weight: 800;">Data Kuesioner</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="javascript:void(0);" data-tab-point="2" class="nav-link">
                        <i class="fas fa-restroom text-info" style="width: 20px;"></i>
                        <span style="text-transform: uppercase;font-size: 13px;line-height: 12px;font-weight: 800;">Data Responden</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="section-body">
        <ul class="nav nav-pills nav-fill d-none" id="mTab1" role="tablist">
            <li class="nav-item">
                <a class="nav-link active text-uppercase" id="tab1" data-toggle="tab" href="#containerTab1" role="tab" aria-controls="tab1" aria-selected="true">
                    <div class="text-center"><span class="fas fa-swatchbook mr-3"></span></div>Perencanaan
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-uppercase" id="tab2" data-toggle="tab" href="#containerTab2" role="tab" aria-controls="tab2" aria-selected="false">
                    <div class="text-center"><span class="fas fa-weight mr-3"></span></div>Pengukuran
                </a>
            </li>
        </ul>
        <div class="card">
            <div class="card-body px-0 py-0">
                <div class="tab-content" id="myTabContent1">
                    <div class="tab-pane fade show active pb-0 py-0" id="containerTab1" role="tabpanel" aria-labelledby="tab1">
                        <table class="table table-bordered table-striped table-hover" id="table1"></table>
                    </div>
                    <div class="tab-pane fade pb-0 py-0" id="containerTab2" role="tabpanel" aria-labelledby="tab2">
                        <table class="table table-bordered table-striped table-hover" id="table2"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>    
</section>
@endsection
@push('css')
    @include('layouts.datatables_css')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/air-datepicker/css/datepicker.min.css') }}">
    <style type="text/css">
        .nav-pills > .nav-item > .nav-link.active {
        color: #fff;
        background-color: #6777ef;
        box-shadow: 0 1px 4px 0 rgb(0 0 0 / 37%);
    }
    .nav.nav-pills.nav-fill >.nav-item > .nav-link.active:after {
        position: absolute;
        bottom: -10px;
        right: 3%;
        content: '\f0d8';
        font-weight: 600;
        font-family: 'Font Awesome 5 Free';
        color: #fff;
        font-size: 45px;
    }
    .nav-dashboard-section > li > a {
        color: #868e96;
        text-decoration: none;
        position: relative;
        padding-bottom: 1.25rem;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 15px;
        margin-right: 15px;
    }
    .nav-dashboard-section > li:first-child > a {
        margin-left: 0px !important;
        padding-left: 0px !important;
    }
    .nav-dashboard-section li a:focus, .nav-dashboard-section li a:hover {
        color: #000;
        text-decoration: none;
    }
    .nav-dashboard-section > li.nav-item.active > a {
        color: #6777ef;
    }
    .nav-dashboard-section > li.nav-item.active > a:before{
        left: 30px;
        right: 0;
    }
    .nav-dashboard-section > li > a:before{
        content: ' ';
        position: absolute;
        left: initial;
        right: initial;
        bottom: 0;
        height: 4px;
        background-color: #6777ef;
        transition: all .5s;
    }
    </style>
@endpush
@push('js')
@include('layouts.datatables_js')
<script type="text/javascript" src="{{ asset('assets/moment/moment-with-locales.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/air-datepicker/js/datepicker.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/air-datepicker/js/datepicker.en.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function () {
        const token = "{{ csrf_token() }}";
        const units = {!! json_encode($units) !!};
        console.log(units)

        var dtb1 = null, dtb2 = null;

        var YearPicker = $('#YearPicker').datepicker({
            dateFormat: 'yyyy',
            view: 'years',
            minView: 'years',
            language: 'en',
            position: 'bottom right',
            autoClose: true,
            useCurrent: true,
            sideBySide: true,
            onSelect: function onSelect(fd, d, inst) {
                if (fd < 2023) {
                    $('select[name=instrument_type]').hide();
                } else {
                    $('select[name=instrument_type]').show();
                }

                reloadCurrentTab(true);
            }
        });

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

        function getUnitInput() {
            return $('select[name=unit]').val();
        }

        function getInstrumentType() {
            return getYearInput() < 2023 ? '' : $('select[name=instrument_type]').val();
        }

        function initUnitSelection() {
            units.forEach(function (v, k) {
                $('select[name=unit]').get(0)[k] = new Option(v.name, v.id, false, false);
                if (k = units.length - 1) {
                    $('select[name=unit]').get(0)[units.length] = new Option('Pilih OPD', 1, false, true);
                }
            });
        }

        function initDTB1() {
            if (!isDTB(dtb1)) {
                dtb1 = $('#table1').DataTable({
                    serverSide: true,
                    processing: true,
                    ajax: {
                        url: "{{ route('f3.dtb') }}",
                        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();
                            d.unit = getUnitInput();
                            d.instrument_type = getInstrumentType();
                        },
                        headers: {'X-CSRF-TOKEN': token}
                    },
                     "columns":[
                        {name: "number", data: function (r) { let instrumentType = r.instrument_type ? '.' + r.instrument_type : ''; return r.number + instrumentType; }, title: "No", width: "30px", class: "text-center", searchable: !1},
                        {name: "code", data: "code", title: "Kode", width: "50px", class: "text-center"},
                        {name: "issue", data: function (r) { return r.issue.replaceAll("[b]", "<b>").replaceAll("[/b]", "</b>"); }, title: "Isu", searchable: !1, orderable: !1},
                        {name: "respondent_count", data: function (r) { return r.respondent_count ? r.respondent_count : 0; }, title: 'Total<hr style="margin-top:1px;margin-bottom:1px;border-top:1px solid rgb(255,255,255);">Responden', width: "120px", class: "text-center", searchable: !1, orderable: !1},
                        {name: "avg_point", data: function (r) { return r.avg_point ? r.avg_point : 0; }, title: 'Poin<hr style="margin-top:1px;margin-bottom:1px;border-top:1px solid rgb(255,255,255);">Rata-rata', width: "120px", class: "text-center", searchable: !1}
                    ],
                    lengthMenu: [[10, 25, -1], [10, 25, "All"]],
                    displayLength: -1,
                    dom: "<\'row px-3 my-4 align-items-end\'<\'col-sm-12 col-md-6 d-inline-flex\'l><\'col-sm-12 col-md-6\'<\'text-right\'B>>><\'table-responsive\'tr><\'row px-3 my-4 align-items-center\'<\'col-lg-5 col-md-5\'i><\'col-lg-7 col-md-7 text-right\'p>>",
                    stateSave: false,
                    searchDelay: 2000,
                    order: [[0, 'asc']],
                    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': [
                                {
                                    'extend': 'excel',
                                    'text': '<span class="far fa-file-excel"></span> Excel',
                                    'className': 'btn btn-success'
                                },
                                {
                                    'extend': 'pdf',
                                    'text': '<span class="far fa-file-pdf"></span> PDF',
                                    'className': 'btn btn-danger'
                                }
                            ]
                        },
                        {
                            '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'
                        }
                    ],
                    language: dtblg,
                    initComplete: function (s) { genDatatableLook('#table1'); },
                    drawCallback: function (s) { genDatatableLook('#table1'); }
                });
            } else {
                drawDTB(dtb1);
            }
        }

        function initDTB2() {
            if (!isDTB(dtb2)) {
                dtb2 = $('#table2').DataTable({
                    serverSide: true,
                    processing: true,
                    ajax: {
                        url: "{{ route('f3.respondent_dtb') }}",
                        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();
                            d.unit = getUnitInput();
                        },
                        headers: {'X-CSRF-TOKEN': token}
                    },
                    "columns":[
                        {name: "action", data: function(r){return r.action;}, title: "Opsi", width: "40px", class: "text-center", searchable: !1},
                        {name: "nm", data: "name", title: "Nama", class: "text-center"},
                        {name: "ntlp", data: "phone", title: "No. Telp", class: "text-center", orderable: !1},
                        {name: "email", data: "email", title: "E-Mail", class: "text-center", searchable: !1, orderable: !1, visible: !1},
                        {name: "total_point", data: "total_point", title: "Poin",  width: "50px", class: "text-center", searchable: !1}
                    ],
                    dom: dtbdom,
                    stateSave: false,
                    searchDelay: 2000,
                    order: [[0, 'desc']],
                    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': [
                                {
                                    'extend': 'excel',
                                    'text': '<span class="far fa-file-excel"></span> Excel',
                                    'className': 'btn btn-success'
                                },
                                {
                                    'extend': 'pdf',
                                    'text': '<span class="far fa-file-pdf"></span> PDF',
                                    'className': 'btn btn-danger'
                                }
                            ]
                        },
                        {
                            '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'
                        }
                    ],
                    language: dtblg,
                    initComplete: function (s) { genDatatableLook('#table2'); },
                    drawCallback: function (s) { genDatatableLook('#table2'); }
                });
            } else {
                drawDTB(dtb2);
            }
        }

        function reloadCurrentTab(keepPage = false) {
            var theActiveTab = $('ul.nav#mTab1').find('li a.active');
            switch (theActiveTab.get(0).getAttribute('id')) {
                case 'tab1':
                    isDTB(dtb1) ? (keepPage ? dtb1.ajax.reload(null, false) : dtb1.draw()) : initDTB1();
                break;
                case 'tab2':
                    isDTB(dtb2) ? (keepPage ? dtb2.ajax.reload(null, false) : dtb2.draw()) : initDTB2();
                break;
                default:
                    console.log('Nothing to reload!');
            }
        }

        initUnitSelection();
        initDTB1();

        $(document).on('change', 'select[name=unit]', function (e) {
            e.preventDefault();

            reloadCurrentTab(false);
        })

        $(document).on('change', 'select[name=instrument_type]', function (e) {
            e.preventDefault();

            reloadCurrentTab(true);
        });

        $(document).on('show.bs.tab', 'a[data-toggle=tab]', function (e) {
            switch (this.getAttribute('id')) {
                case 'tab1':
                    initDTB1();
                    $('select[name=instrument_type]').show();
                break;
                case 'tab2':
                    initDTB2();
                    $('select[name=instrument_type]').hide();
                break;
                default:
                    console.log('Do Nothing');
            }
        });

        $(document).on('click', 'ul#navDashboardSection li a', function (e) {
            var that = $(this);
            var tabPoint = that.attr('data-tab-point');

            if (!that.closest('li').hasClass('active') && (tabPoint != null && !isNaN(tabPoint))) {
                $('ul#navDashboardSection li').removeClass('active');
                that.closest('li').addClass('active');
                $('#mTab1 li a#tab' + tabPoint).tab('show');
            }
        });
    });
</script>
@endpush