<div class="title">請假批核</div>
<ul class="table-toolbar" style="text-align: left;">    
    <li>
        &nbsp;
    </li>
    <li>
        <span>請假類別：</span>
        <select id="type" class="datatables-custom types">            
        </select>
    </li>
    <li>
        <span>請假狀態：</span>
        <select id="status" class="datatables-custom status">            
        </select>
    </li>    
</ul>
<table id="myTable" class="display table datatables" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>編號</th>
            <th>請假者</th>
            <th>請假類別</th>
            <th>檔案</th>
            <th>請假日期</th>
            <th>請假狀態</th>                
            <th>批核</th>
            <th>請假類別值</th>
            <th>請假狀態值</th>
        </tr>
    </thead>
</table>
<script>
    var _selectedtype = '', _selectedstatus = '';
    function getRemoteData(remote_url, data, callback, callbackFail) {
        $.ajax({
//async: false,
//timeout: 30000, //最長等候回應時間
            type: "GET", //提交類型
            url: remote_url, //提交地址
            data: data, //提交內容
            dataType: 'json', //返回數據類型
            success: function (data) { //請求完成並成功
                if (data.success) {
                    callback(data.data);
                } else {
                    callbackFail();
                }
            },
            error: function (data) { //請求返回錯誤信息
                callbackFail();
            },
            beforeSend: function (XHR) { //请求開始前执行
            },
            complete: function (XHR, leave_status) { //请求完成后最终执行
            }
        });
    }
    function getRemoteDataFail() {
        alert("發生錯誤");
    }

    var table;
    $(document).ready(function () {
        table = $('#myTable').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": "api/leave_approval",
            "columns": [
                {"data": "id"},
                {"data": "chi_name", "name": "請假者"},
                {"data": "type", "name": "請假類別"},
                {"data": "filepath", "name": "檔案"},
                {"data": "startdate", "name": "請假日期"},
                {"data": "leave_status", "name": "請假狀態"},
                {"data": "details", "name": "批核", "class": "control-details"},
                {"data": "typeval"},
                {"data": "leavestatus"}
            ],
            "order": [
                [0, "desc"],
            ],
            "columnDefs": [
                {
                    "targets": [0, 7, 8],
                    "visible": false,
                    "searchable": false,
                },
                {
                    "targets": [1, 2, 5],
                    "visible": true,
                    "searchable": true,
                    "orderable": true,
                },
                {
                    "targets": [4],
                    "visible": true,
                    "searchable": false,
                    "orderable": true,
                },
                {
                    "targets": [3, 6],
                    "visible": true,
                    "searchable": false,
                    "orderable": false,
                },
            ],
            language: {
                "processing": "處理中...",
                "loadingRecords": "載入中...",
                "lengthMenu": "顯示數量 _MENU_ ",
                "zeroRecords": "沒有符合的結果",
                "info": "顯示 _START_-_END_（總數：_TOTAL_）",
                "infoEmpty": "0 項結果",
                "infoFiltered": "(從 _MAX_ 項結果中過濾)",
                "infoPostFix": "",
                "search": "搜尋:",
                "paginate": {
                    "first": "<<",
                    "previous": "<",
                    "next": ">",
                    "last": ">>"
                },
                "aria": {
                    "sortAscending": ": 升冪排列",
                    "sortDescending": ": 降冪排列"
                }
            },
            "pagingType": "four_button",
            "drawCallback": function (settings) {
                $('#myTable tbody tr').each(function (i, e) {
                    $(this).find('td').each(function (k, v) {
                        if (k === 4) {
                            var status = $(this).text();
                            var color = 'black';
                            if (status === '批准') {
                                color = 'green';
                            } else if (status === '拒批') {
                                color = 'red';
                            }
                            $(this).css('color', color);
                        }
                    });
                });
            },
        });

        getRemoteData('/api/leave_approval/getfilteringdata', {}, getFilteringdataOk, getRemoteDataFail);

        $('#myTable_filter').hide();
        $('#myTable_info').parent('.col-sm-5').css({"float": "right", "text-align": "right"});
        $('.dataTables_length').wrap('<div class="row dataTables_footer"></div>').wrap('<div class="col-sm-7"></div>').after($('#myTable_paginate'));
        $('#myTable').after($('.dataTables_footer'));
    });

    function getFilteringdataOk(data) {
        $('#type').empty().append('<option value="">---</option>');

        $.each(data['type'], function (i, e) {
            var selected = _selectedtype === e ? ' selected' : '';
            $('#type').append('<option value="' + e + '"' + selected + '>' + e + '</option');
        });
        $('#status').empty().append('<option value="">---</option>');

        $.each(data['leave_status'], function (i, e) {
            var selected = _selectedstatus === e ? ' selected' : '';
            $('#status').append('<option value="' + e + '"' + selected + '>' + e + '</option');
        });
    }

    $(document).on('click', '.approve', function () {
        getRemoteData('/api/leave_approval/save', {"id": $(this).data('id'), "item_id": $(this).data('itemid'), "leave_status": "approved","tenant_no":$(this).data('tenantno'),"admin_id":$(this).data('adminid')}, postApprovalOk, getRemoteDataFail);
    });

    $(document).on('click', '.reject', function () {
        getRemoteData('/api/leave_approval/save', {"id": $(this).data('id'), "leave_status": "rejected"}, postApprovalOk, getRemoteDataFail);
    });

    function postApprovalOk(data) {
        window.location.reload();
    }

    $(document).on('change', '.datatables-custom', function () {
        doFilter();
    });

    function doFilter() {
        _selectedtype = $('#type').val();
        _selectedstatus = $('#status').val();
//        console.log('selectedtype:' + _selectedtype + ';selectedstatus:' + _selectedstatus);
        if (_selectedtype !== '' && _selectedstatus === '') {
            table.columns().search('').columns(2).search(_selectedtype).draw();
        }
        if (_selectedtype !== '' && _selectedstatus !== '') {
            table.columns().search('').columns(2).search(_selectedtype).columns(5).search(_selectedstatus).draw();
        }
        if (_selectedtype === '' && _selectedstatus !== '') {
            table.columns().search('').columns(5).search(_selectedstatus).draw();
        }
        if (_selectedtype === '' && _selectedstatus === '') {
            window.location.reload();
        }
    }
</script>
