@{
    ViewData["MainNum"] = "6";
    ViewData["SubNum"] = "3";
    ViewData["Title"] = "帳號管理";
}

<ol class="breadcrumb page-breadcrumb">
    <li class="breadcrumb-item"><a href="javascript:void(0);">系統管理</a></li>
    <li class="breadcrumb-item">FIC</li>
    <li class="breadcrumb-item active">帳號管理</li>
    <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
</ol>

<div class="row">
    <div class="col-xl-12">
        <div id="panel-5" class="panel">
            <div class="panel-container show">
                <div class="panel-content">
                    <div class="subheader">
                        <h1 class="subheader-title">
                            <img src="img/asus.png"> 華碩電腦
                        </h1>
                    </div>
                    <ul class="nav nav-tabs nav-tabs-clean" role="tablist">
                        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab-user-manager" role="tab">帳號管理</a></li>
                        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-role-manager" role="tab">角色管理</a></li>
                        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-role-auth" role="tab">角色權限</a></li>
                    </ul>
                    <div class="tab-content p-3">
                        <div class="tab-pane fade show active" id="tab-user-manager" role="tabpanel" aria-labelledby="tab-user-manager">
                            @Html.Partial("_UserManager")
                        </div>

                        <div class="tab-pane fade" id="tab-role-manager" role="tabpanel" aria-labelledby="tab-role-manager">
                            @Html.Partial("_RoleManager")
                        </div>

                        <div class="tab-pane fade" id="tab-role-auth" role="tabpanel" aria-labelledby="tab-role-auth">
                            @Html.Partial("_RoleAuth")
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@*
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">搜尋條件</h3>
                </div>
                <div class="card-body">
                    <form id="system-admin-filter-form">
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label>帳號：</label>
                                <input type="text" class="form-control" id="system_admin_account" name="system_admin_account">
                            </div>
                            <div class="form-group col-md-6">
                                <label>姓名：</label>
                                <input type="text" class="form-control" id="system_admin_name" name="system_admin_name">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label>電子信箱：</label>
                                <input type="text" class="form-control" id="system_admin_email" name="system_admin_email">
                            </div>
                            <div class="form-group col-md-6">
                                <label>手機號碼：</label>
                                <input type="text" class="form-control" id="system_admin_phone" name="system_admin_phone">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="card-footer text-right">
                    <button type="button" class="btn btn-default" onclick="ResetForm()">清除</button>
                    <button type="button" class="btn btn-primary" onclick="SearchSystemAdmin()">查詢</button>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">人員列表</h3>
                    <div class="card-tools">
                        <button class="btn btn-success" onclick="AddSystemAdmin()"><i class="fa fa-plus"></i>&nbsp;新增</button>
                    </div>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <table id="system_admin_table" class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>帳號</th>
                                <th>姓名</th>
                                <th>電子信箱</th>
                                <th>手機號碼</th>
                                <th>狀態</th>
                                <th>建立時間</th>
                                <th>功能</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <!-- /.card-body -->
            </div>
        </div>
    </div>

    <!-- 個人資料 -->
    <div class="modal" tabindex="-1" id="system-admin-modal" role="dialog" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">系統管理員</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <form class="system-admin-form" id="system-admin-form">
                                <div class="form-row">
                                    <div class="form-group col-md-12">
                                        <label for="system_admin_name_modal">
                                            <font class="text-danger">*</font>姓名：
                                        </label>
                                        <input type="text" class="form-control" id="system_admin_name_modal" name="system_admin_name_modal" autocomplete="off" />
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-12">
                                        <label for="system_admin_account_modal">
                                            帳號：
                                        </label>
                                        <input type="text" class="form-control" id="system_admin_account_modal" name="system_admin_account_modal" disabled>
                                    </div>
                                </div>
                                <div class="form-row system_admin_password_form_row">
                                    <div class="form-group col-md-12">
                                        <label>
                                            密碼：等同帳號
                                        </label>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-12">
                                        <label>狀態：</label>
                                        <div class="custom-control custom-radio d-inline">
                                            <input class="custom-control-input" type="radio" id="system_admin_status_normal_modal" name="system_admin_status_modal" value="0">
                                            <label for="system_admin_status_normal_modal" class="custom-control-label">正常</label>
                                        </div>
                                        <div class="custom-control custom-radio d-inline">
                                            <input class="custom-control-input" type="radio" id="system_admin_status_suspend_modal" name="system_admin_status_modal" value="1">
                                            <label for="system_admin_status_suspend_modal" class="custom-control-label">停權</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-12">
                                        <label for="system_admin_email_modal">
                                            電子信箱：
                                        </label>
                                        <input type="email" class="form-control" id="system_admin_email_modal" name="system_admin_email_modal" autocomplete="off">
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-12">
                                        <label for="system_admin_phone_modal">
                                            電話：
                                        </label>
                                        <input type="text" class="form-control" id="system_admin_phone_modal" name="system_admin_phone_modal" autocomplete="off">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary btn-save" onclick="SaveSystemAdmin()">儲存</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <!-- /.個人資料 -->
*@

@section Scripts {
    <script>
        var userTable;
        var selected_id = 0;
        var selected_company_id = 0;

        $(function () {
            //#region 預先載入公司下拉式選單select_option
            var url_company_select_option = "/Company/GetCompanySelectOptionList";
            $.get(url_company_select_option, function (rel) {
                if (rel.code != "0000") {
                    toast_error(rel.msg);
                    return;
                }

                $(".select_user_company").empty();

                $.each(rel.data, function (index, val) {
                    $(".select_user_company").append($("<option />").val(val.value).text(val.text));
                });

                //預設查詢第一個
                $(".select_user_company").val($(".select_user_company option:first").val()).trigger('change');
            });
            //#endregion

            //#region 選擇公司角色下拉式選單select_option
            $(".select_user_company").change(function () {

                //查詢該公司的角色
                var url_company_role_select_option = "/Role/GetRoleSelectOptionList";

                send_data = {
                    CompanyId: $("#select_user_company_userManager_tab").val()
                }

                $.get(url_company_role_select_option, send_data, function (rel) {
                    if (rel.code != "0000") {
                        toast_error(rel.msg);
                        return;
                    }

                    $(".select_company_role").empty();
                    $("#company_select").append($("<option />").val(0).text("全部"));

                    $.each(rel.data, function (index, val) {
                        $(".select_company_role").append($("<option />").val(val.value).text(val.text));
                    });

                    //預設查詢第一個
                    $(".select_company_role").val($(".select_company_role option:first").val()).trigger('change');

                    //#region user manager tab 人員基本資料新增/修改 modal
                    $('#user_role_modal').empty();

                    $.each(rel.data, function (index, val) {
                        $("#user_role_modal").append($("<option />").val(val.value).text(val.text));
                    });

                    //預設查詢第一個
                    $("#user_role_modal").val($("#user_role_modal option:first").val()).trigger('change');
                    //#endregion
                });
            });
            //#endregion


            //#region 使用者列表 DataTable
            userTable = $("#user_table").DataTable({
                "paging": true,
                "lengthChange": false,
                "searching": false,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "responsive": false,
                "order": [[7, "desc"]],
                "columns": [{
                    "data": "id"
                }, {
                    "data": "companyName"
                }, {
                    "data": "name"
                }, {
                    "data": "roleName"
                }, {
                    "data": "email"
                }, {
                    "data": "phone"
                }, {
                    "data": "spStationAmount"
                }, {
                    "data": "createdAt"
                }, {
                    "data": null,
                    "defaultContent": '<button class="btn btn-primary edit-btn">修改</button> <button class="btn btn-danger del-btn">刪除</button>'
                }
                ],
                "language": {
                    "emptyTable": "無資料...",
                    "processing": "處理中...",
                    "loadingRecords": "載入中...",
                    "lengthMenu": "顯示 _MENU_ 項結果",
                    "zeroRecords": "沒有符合的結果",
                    "info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
                    "infoEmpty": "顯示第 0 至 0 項結果，共 0 項",
                    "infoFiltered": "(從 _MAX_ 項結果中過濾)",
                    "infoPostFix": "",
                    "search": "搜尋:",
                    "paginate": {
                        "first": "第一頁",
                        "previous": "上一頁",
                        "next": "下一頁",
                        "last": "最後一頁"
                    },
                    "aria": {
                        "sortAscending": ": 升冪排列",
                        "sortDescending": ": 降冪排列"
                    }
                },
                'createdRow': function (row, data, dataIndex) {
                    $(row).attr('data-guid', data.guid);
                },
                "ajax": {
                    "url": "/User/UserList",
                    "type": "POST",
                    "data": function (d) {
                        d.SelectedCompanyId = $('#select_user_company').val();
                        d.Name = $('#user_name').val();
                        d.SelectedRoleId = $('#select_user_role').val();
                    },
                    "dataSrc": function (rel) {
                        if (rel.data.code == "9999") {
                            toast_error(rel.data.msg);
                            return;
                        }

                        data = rel.data.data;

                        if (data == null || data.length == 0) {
                            this.data = [];
                        }

                        return data;
                    }
                }
            });
            //#endregion
        });

        //#region 搜尋使用者列表
        function SearchUser() {
            userTable.ajax.reload();
        }
        //#endregion

        //#region 清除搜尋條件
        @*function ResetForm() {
            $("#system-admin-filter-form").trigger("reset");
        }*@
        //#endregion

        //#region 新增系統管理員
        function AddUser() {
            selected_id = 0;
            $("#user-modal .modal-title").html("人員基本資料 - 新增");
            $("#user_companyId_modal").val($("#select_user_company_userManager_tab").val());
            $("#user_account_modal").prop("disabled", false);
            $(".user_account_same_email_div").show();
            $("#user_account_same_email").prop("disabled", false);
            $(".user_password_form_row").show();
            $("#user-form").trigger("reset");

            $("#user-modal").modal();
        }
        //#endregion

        //#region 帳號是否等同Email
        $('#user_account_same_email').change(function () {
            var email = $("#user_email_modal").val();

            if (email == undefined || email == null || email == "") {
                toast_warning("請先填寫email");
                $(this).prop("checked", false);
                return;
            }

            if (this.checked && selected_id == 0) {
                //只提供新增時，可透過email填入帳號欄位
                $("#user_account_modal").val(email);
                $("#user_account_modal").prop("disabled", true);
            }
            else {
                $("#user_account_modal").prop("disabled", false);
            }
        });
        //#endregion

        //#region 編輯系統管理員
        $('#user_table').on("click", "button.edit-btn", function () {

            $("#user-modal .modal-title").html("人員基本資料 - 編輯");

            selected_id = $(this).parents('tr').attr('data-id');

            //取得單一系統管理員
            var url = "/User/GetOneUser/";

            var send_data = {
                id: selected_id
            }

            $.post(url, send_data, function (rel) {
                if (rel.code == "9999") {
                    toast_error(rel.msg);
                    return;
                }
                else if (rel.code == "9998") {
                    toast_error(rel.msg);
                    return;
                }

                $("#user_name_modal").val(rel.data.name);
                $("#user_email_modal").val(rel.data.email);
                $("#user_account_modal").val(rel.data.account);
                $("#user_account_modal").prop("disabled", true);
                $(".user_account_same_email_div").hide();
                $("#user_account_same_email").prop("disabled", true);
                $(".system_admin_password_form_row").hide();
                $("#user_phone_modal").val(rel.data.phone);

                $("#user-modal").modal();
            }, 'json');

        });
        //#endregion

        //#region 使用者表單驗證
        $("#user-form").validate({
            rules: {
                user_email_modal: {
                    email: true,
                },
            },
        });
        //#endregion

        //#region 儲存使用者
        function SaveUser() {

            if ($("#user-form").valid()) {
                var url = "/User/SaveUser";

                var send_data = {
                    Id: selected_id,
                    CompanyId: $("#user_comapnyId_modal").val(),
                    Name: $("#user_name_modal").val(),
                    Email: $("#user_email_modal").val(),
                    Account: $("#user_account_modal").val(),
                    Phone: $("#user_phone_modal").val(),
                    RoleId: $("#user_role_modal").val()
                }

                $.post(url, send_data, function (rel) {
                    if (rel.code == "9999") {
                        toast_error(rel.msg);
                        return;
                    }
                    else if (rel.code == "9998") {
                        toast_error(rel.msg);

                        return;
                    }

                    toast_ok(rel.msg);
                    $('#user-modal').modal('hide');

                    userTable.ajax.reload();
                }, 'json');
            }
        }
        //#endregion

        //#region 刪除使用者
        $('#user_table').on("click", "button.del-btn", function () {

            selected_id = $(this).parents('tr').attr('data-id');

            //取得單一系統管理員
            var url = "/User/DeleteOneUser/";

            var send_data = {
                Id: selected_id
            }

            $.post(url, send_data, function (rel) {
                if (rel.code == "9999") {
                    toast_error(rel.msg);
                    return;
                }
                else if (rel.code == "9998") {
                    toast_error(rel.msg);
                    return;
                }

                userTable.ajax.reload();
            }, 'json');

        });
        //#endregion
    </script>
}