<div class="title">調堂批核</div>
<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>          
        </tr>
    </thead>
</table>

<script>
    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, status) { //请求完成后最终执行
            }
        });
    }
    function getRemoteDataFail() {
        alert("發生錯誤");
    }

    var table;
    $(document).ready(function () {
        table = $('#myTable').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": "api/shift_approval",
            "columns": [
                {"data": "id"},
                {"data": "chi_name", "name": "調堂者"},
                {"data": "fromitemdate", "name": "原本課堂及時段"},
                {"data": "toitemdate", "name": "調至課堂及時段"},
                {"data": "status", "name": "調堂狀態"},
                {"data": "details", "name": "批核", "class": "control-details"},
            ],
            "order": [
                [0, "desc"],
            ],
            "columnDefs": [
                {
                    "targets": [0],
                    "visible": false,
                    "searchable": false,
                },
                {
                    "targets": [1, 4],
                    "visible": true,
                    "searchable": true,
                    "orderable": true,
                },
                 {
                    "targets": [2, 3],
                    "visible": true,
                    "searchable": false,
                    "orderable": true,
                },
                {
                    "targets": [5],
                    "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 === 3) {
                            var status = $(this).text();
                            var color = 'black';
                            if (status === '批准') {
                                color = 'green';
                            } else if (status === '拒批') {
                                color = 'red';
                            }
                            $(this).css('color', color);
                        }
                    });
                });
            },
        });

        $('#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'));
    });

    $(document).on('click', '.approve', function () {
        getRemoteData('/api/shift_approval/save', {"id": $(this).data('id'),"fromitemid":$(this).data("fromitemid"),"toitemid":$(this).data("toitemid"),"studentid":$(this).data('studentid'),  "status": "approved","tenant_no":$(this).data('tenantno'),"admin_id":$(this).data('adminid')}, postApprovalOk, getRemoteDataFail);
    });

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

    function postApprovalOk(data) {
        window.location.reload();
    }
</script>
