var oTable;
var aPos;

$(document).ready(function () {
    var dataTables = {
        init: function init() {
            this.bindUIActions();
        },
        bindUIActions: function bindUIActions() {
            this.table = this.handleDataTables();
        },
        handleDataTables: function handleDataTables() {
            return $('#myTable').DataTable({
                language: {
                    paginate: {
                        previous: '<i class="fa fa-lg fa-angle-left"></i>',
                        next: '<i class="fa fa-lg fa-angle-right"></i>'
                    }
                },
                autoWidth: false,
                ajax: {
                    url: 'api/usersList.ashx',
                    dataSrc: 'userlist'
                },
                rowId: 'user_uid',
                deferRender: true,
                initComplete: function () {

                    $('#myTable').on('click', 'a', function () {
                        buttonClick(this);
                    });

                    $('#myTable').on('change', 'input[name="selectedRow[]"]', function () {
                        checkboxClick(this);
                    });
                },
                columns: [{ data: 'user_name', className: 'align-middle' }, { data: 'user_id', className: 'align-middle' }, { data: 'user_email', className: 'align-middle' }, { data: 'user_lastlogin', className: 'align-middle' }, { data: 'user_uid', className: 'align-middle text-right', orderable: false, searchable: false }],
                columnDefs: [{
                    targets: 0,
                    render: function render(data, type, row, meta) {
                        return '<a href="#' + row.user_uid + '" class="tile tile-img mr-1">\n            <img class="img-fluid" src="' + row.user_picurl + '" alt="Card image cap">\n          </a>\n          <a href="#' + row.user_uid + '">' + row.user_name + '</a>';
                    }
                }, {
                    targets: 4,
                    render: function render(data, type, row, meta) {
                        return '<a id="table-btn" class="btn btn-sm btn-secondary" href="javascript: return false;" data-method="edit" data-uid="' + row.user_uid + '"><i class="fa fa-pencil-alt"></i></a>\n          <a  id="table-btn" class="btn btn-sm btn-secondary" href="javascript: return false;" data-method="del" data-uid="' + row.user_uid + '"><i class="far fa-trash-alt"></i></a>';
                    }
                    }]
            });
        }
    };

    dataTables.init();

    function buttonClick(obj) {
        $("#elab_select option").remove();

        $.ajax({
            url: "api/elab-userslist.ashx",
            type: "POST",
            data: null,
            success: function (data, textStatus, jqXHR) {
                if (data.ret === "yes") {
                    $("#elab_select").append($("<option></option>").attr("value", "").text("請選擇要加入的E白板帳號... "));

                    $.each(data.userslist, function (i, item) {
                        $("#elab_select").append($("<option></option>").attr("value", item.userid).text(item.username + ' (' + item.mail + ')'));
                    });
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert('网絡或伺服器发生错误，请稍后重试!');
            }
        });

        oTable = $('#myTable').dataTable();

        var type = obj.getAttribute('data-method');
        var uid = obj.getAttribute('data-uid');

        aPos = oTable.fnGetPosition($('#' + uid)[0]);

        $("#user_uid").val(uid);

        $("#method").val(type);

        if (type === 'del') {
            if (confirm('確定刪除此筆資料?')) {
                var formData = {
                    uid: uid,
                    method: 'delete'
                };

                $.ajax({
                    url: "api/userData.ashx",
                    type: "POST",
                    data: formData,
                    success: function (data, textStatus, jqXHR) {
                        if (data.ret == "yes") {

                            var row = oTable.api().row($("#" + uid)).remove().draw(false);
                            alert('刪除成功');
                        } else {
                            alert(data.message);
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert('网絡或伺服器发生错误，请稍后重试!');
                    }
                });
            }
        }

        if (type === 'edit') {
            var formData = {
                method: 'get',
                uid: uid
            };

            $.ajax({
                url: "api/userData.ashx",
                type: "POST",
                data: formData,
                success: function (data, textStatus, jqXHR) {
                    if (data.ret === "yes") {
                        if (data.data.user_type === "N") {
                            $("input[name=user_type][value='N']").prop("checked", true);
                            $("#sys").hide();
                            $("#elab").show();
                            $("#elab_select").append($("<option></option>").attr("value", data.data.user_id).text(data.data.user_name + ' (' + data.data.user_email + ')'));
                            $("#elab_select").val(data.data.user_id);
                            $("#elab_select").prop('disabled', true);
                        } else {
                            $("input[name=user_type][value='Y']").prop("checked", true);
                            $("#sys").show();
                            $("#elab").hide();
                            $("#sys_name").val(data.data.user_name);
                            $("#sys_id").val(data.data.user_id);
                            $("#sys_email").val(data.data.user_email);
                            $("#sys_pwd").val(data.data.user_pwd);

                            $('#sys_name').prop('readonly', true);
                            $('#sys_id').prop('readonly', true);
                        }

                        $("input[name=user_type]").prop("disabled", true);

                        $('#user_perm').val(data.data.user_perm);
                     
                        $('#myModal').modal('toggle');
                    } else {
                        alert(data.message);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('网絡或伺服器发生错误，请稍后重试!');
                }
            });
        }
    }

    $('#btn-add').click(function () {
        $("#elab_select option").remove();

        $.ajax({
            url: "api/elab-userslist.ashx",
            type: "POST",
            data: null,
            success: function (data, textStatus, jqXHR) {
                if (data.ret == "yes") {
                    $("#elab_select").append($("<option></option>").attr("value", "").text("請選擇要加入的E白板帳號... "));

                    $.each(data.userslist, function (i, item) {
                        $("#elab_select").append($("<option></option>").attr("value", item.userid).text(item.username + ' (' + item.mail + ')'));
                    });
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert('网絡或伺服器发生错误，请稍后重试!');
            }
        });

        oTable = $('#myTable').dataTable();
        $("#method").val("add");
        $("#sys").hide();
        $("input[name=user_type][value='N']").prop("checked", true);

        $('#myModal').modal('toggle');

        $('#sys_name').prop('readonly', false);
        $('#sys_id').prop('readonly', false);
        $("#elab_select").prop('disabled', false);
        $("input[name=user_type]").prop("disabled", false);

        $("input[name=user_type][value='Y']").prop("checked", true).trigger("change");
        $("input[name=user_type][value='N']").prop("disabled", true);
        $("#sys_id").val('').trigger('change');
        $("#sys_pwd").val('').trigger('change');
        $("#sys_email").val('').trigger('change');

    });

    $("#myModal").on("hidden.bs.modal", function () {
        clearChildren(document.getElementById('myModal'));
        $('#sys_name').prop('readonly', false);
        $('#sys_id').prop('readonly', false);
        $("#elab_select").prop('disabled', false);
        $("input[name=user_type]").prop("disabled", false);
    });

    function clearChildren(element) {
        for (var i = 0; i < element.childNodes.length; i++) {
            var e = element.childNodes[i];
            if (e.tagName) switch (e.tagName.toLowerCase()) {
                case 'input':
                    switch (e.type) {
                        case "radio":
                        case "checkbox": e.checked = false; break;
                        case "button":
                        case "submit":
                        case "image": break;
                        default: if (e.type !== "checkbox") { e.value = ''; } break;
                    }
                    break;
                case 'select': e.selectedIndex = 0; break;
                case 'textarea': e.innerHTML = ''; break;
                default: clearChildren(e);
            }
        }

        $(element).children().find('textarea').each(function () {
            $(this).val('');
        });

        $(element).children().find('select').each(function () {
            $(this).prop('selectedIndex', 0);
        });
    }

    $('input[type=radio][name=user_type]').change(function () {
        if (this.value === 'N') {
            $("#sys").hide();
            $("#elab").show();
        }
        else if (this.value === 'Y') {
            $("#sys").show();
            $("#elab").hide();
        }
    });

    $('#saveBtn').click(function () {
        var errmsg = "";

        if ($('input:radio:checked[name="user_type"]').val() === 'N' && $('select[name="elab_select"]').val() === '') {
            errmsg += "請選擇要加入的E白板帳號! \n";
        }

        if ($('input:radio:checked[name="user_type"]').val() === 'Y' && $('#sys_name').val() === '') {
            errmsg += "請輸入姓名! \n";
        }

        if ($('input:radio:checked[name="user_type"]').val() === 'Y' && $('#sys_id').val() === '') {
            errmsg += "請輸入帳號! \n";
        }

        var emailRule = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z]+$/;

        if ($('input:radio:checked[name="user_type"]').val() === 'Y' && $('#sys_email').val().search(emailRule) === -1) {
            errmsg += "請輸入正確的Email! \n";
        }

        if ($('input:radio:checked[name="user_type"]').val() === 'Y' && $('#sys_pwd').val() === '' && $('#method').val() === 'add') {
            errmsg += "請輸入密碼! \n";
        }

        if ($('#user_perm').val() === "") {
            errmsg += "請選擇帳號的權限! \n";
        }

       
        if (errmsg.length > 0) {
            alert(errmsg);
            return;
        }

        var method = $('#method').val();
        var user_type = $('input:radio:checked[name="user_type"]').val();
        var elab_select = $('select[name="elab_select"]').val();
        var sys_name = $('#sys_name').val();
        var sys_id = $('#sys_id').val();
        var sys_email = $('#sys_email').val();
        var sys_pwd = $('#sys_pwd').val();
        var user_perm = $('#user_perm').val();
        var user_uid = $('#user_uid').val();

        var formData = {
            method: method,
            type: user_type,
            elab_select: elab_select,
            sys_name: sys_name,
            sys_id: sys_id,
            sys_email: sys_email,
            sys_pwd: sys_pwd,
            user_perm: user_perm,
            uid: user_uid
        };

        $.ajax({
            url: "api/userData.ashx",
            type: "POST",
            data: formData,
            success: function (data, textStatus, jqXHR) {
                if (data.ret == "yes") {


                    alert("儲存成功");

                    if (method == "add") {
                        var obj = {
                            'user_name': data.data.user_name,
                            'user_id': data.data.user_id,
                            'user_email': data.data.user_email,
                            'user_lastlogin': '尚未登入',
                            'user_uid': data.data.user_uid,
                            'user_picurl': data.data.user_picurl
                        }

                        oTable.fnAddData(obj);
                        $('#myModal').modal('toggle');
                    }

                    if (method === "edit") {
                        oTable.fnUpdate(data.data.user_email, aPos, 2);
                        $('#myModal').modal('toggle');
                    }

                    //if (data_method == "edit") {
                    //    oTable.fnUpdate(data.data.class_name, aPos, 2);
                    //    oTable.fnUpdate(data.data.classArea_name, aPos, 3);
                    //    oTable.fnUpdate(data.data.class_credit, aPos, 4);
                    //    oTable.fnUpdate(data.data.class_instructor, aPos, 5);
                    //    oTable.fnUpdate(data.data.class_fee, aPos, 6);
                    //    //oTable.fnUpdate(data.data.class_signuprange, aPos, 7);
                    //}

                    //if (data_method == "add") {
                    //    var obj = { 'DT_RowId': data.data.DT_RowId, 'class_edit': data.data.class_edit, 'class_no': data.data.class_no, 'class_name': data.data.class_name, 'classArea_name': data.data.classArea_name, 'class_credit': data.data.class_credit, 'class_instructor': data.data.class_instructor, 'class_fee': data.data.class_fee, 'class_signuprange': data.data.class_signuprange }
                    //    var rowIndex = oTable.fnAddData(obj);
                    //    var val = '<div class="checkbox"><label><input type="checkbox" name="classCompulsory[]" value="' + data.data.class_no + '"/>' + data.data.class_no + " " + data.data.class_name + '</label></div>';
                    //    var chkbtn = $(val);
                    //    chkbtn.appendTo('#chooseCompulsory');
                    //}

                    //$('#myModal').modal('toggle');
                    //clearChildren(document.getElementById('myModal'));
                } else {
                    alert(data.message);
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert('网絡或伺服器发生错误，请稍后重试!');
            }
        });
    });
});