@{
    ViewData["MainNum"] = "3";
    ViewData["SubNum"] = "2";
    ViewData["Title"] = "人員編組設定";
}

<ol class="breadcrumb page-breadcrumb">
    <li class="breadcrumb-item"><a href="javascript:void(0);">首頁</a></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-12">
        <div id="panel-5" class="panel">
            <div class="panel-container show">
                <div class="panel-content">
                    <div class="subheader">
                        <h1 class="subheader-title">
                            <span>人員編組設定</span>
                        </h1>
                    </div>
                    <div class="row mb-3 d-flex align-items-center px-3 justify-content-between">
                        <div class="pr-3 ">
                            <div class="btn-group btn-group-md" id="Disasterlist">
                            </div>
                        </div>
                    </div>
                    <div class="row mb-3 d-flex align-items-center px-3">
                        <div class="pr-3 ">
                            <button type="button" class="btn btn-outline-secondary waves-effect waves-themed mb-2" style="border: 1px dashed;" onclick="Addgrouping()"><span class="fal fa-plus mr-1"></span>新增</button>
                        </div>
                        <div class="pr-3 row col">
                            <div class="frame-wrap" id="groupinglist">
                                
                                
                            </div>
                        </div>
                        <div class="card border mb-g w-100 mb-5" id="Tablecard">
                            <div class="card-header bg-fusion-25 py-2 pr-3 d-flex align-items-center flex-wrap justify-content-between">
                                <div class="card-title font-weight-bold">人員清單</div>
                                <div class="text-right ">
                                    <a href="javascript:;" class="btn btn-sm btn-success ml-auto waves-effect waves-themed" id="addUser-btn" onclick="AddMember()"><span class="fal fa-plus mr-1"></span>新增</a>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="w-100">
                                    <div class="col-12">
                                        <table id="emergencyMember_Table" class="table table-bordered table-hover m-0 text-center">
                                            <thead class="thead-themed">
                                                <tr>
                                                    <th>序</th>
                                                    <th>組別</th>
                                                    <th>姓名</th>
                                                    <th>部門</th>
                                                    <th>電話</th>
                                                    <th>Line ID</th>
                                                    <th>email</th>
                                                    <th>功能</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="emergency-grouping-modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered " role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    編組設定
                </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"><i class="fal fa-times"></i></span>
                </button>
            </div>
            <div class="modal-body">
                <form id="emergency-grouping-form">
                    <div class="row">
                        <div class="form-group col-6">
                            <label class="form-label" for="emergency_grouping_priority"><span class="text-danger">*</span>排序號</label>
                            <input class="form-control" type="number" id="emergency_grouping_priority" min="1" />
                        </div>
                        <div class="form-group col-6">
                            <label class="form-label" for="emergency_grouping_name"><span class="text-danger">*</span>組別名稱</label>
                            <input class="form-control" type="text" id="emergency_grouping_name" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="row">
                <div class="col-6">
                    <div class="align-items-center " style="display:flex;flex-wrap: wrap;padding:1rem; " id="deletebtn">
                        <button type="button" class="btn btn-danger" onclick="DeletedGrouping()">刪除</button>
                    </div>
                </div>
                <div class="col-6">
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="SaveGrouping()">儲存</button>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</div>

<div class="modal fade" id="emergency-member-modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered " role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    人員編組新增
                </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"><i class="fal fa-times"></i></span>
                </button>
            </div>
            <div class="modal-body">
                <form id="emergency-member-form">
                    <div class="row">
                        <div class="form-group col-6">
                            <label class="form-label" for="emergency_member_name"><span class="text-danger">*</span>姓名</label>
                            <input class="form-control" type="text" id="emergency_member_name" name="emergency_member_name">
                        </div>
                        <div class="form-group col-6">
                            <label class="form-label" for="emergency_member_dept"><span class="text-danger">*</span>部門</label>
                            <select class="form-control" id="emergency_member_dept">

                            </select>
                        </div>
                        <div class="form-group col-6">
                            <label class="form-label" for="emergency_member_phone"><span class="text-danger">*</span>電話</label>
                            <input class="form-control" type="text" id="emergency_member_phone"  name="emergency_member_phone"/>
                        </div>
                        <div class="form-group col-6">
                            <label class="form-label" for="emergency_member_lineid"><span class="text-danger">*</span>LINE ID</label>
                            <input class="form-control" type="text" id="emergency_member_lineid" name="emergency_member_lineid"/>
                        </div>
                        <div class="form-group col-6">
                            <label class="form-label" for="emergency_member_email"><span class="text-danger">*</span>Email</label>
                            <input class="form-control" type="text" id="emergency_member_email"  name="emergency_member_email"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="SaveMember()">儲存</button>
            </div>
        </div>
    </div>
</div>


@section Scripts{
<script>
    var Selectadisaster;
    var selectgroupid = 0;
    var selectemergency_member_guid;
    var emergencyMemberTable;
    $(function () {
        emergencyMemberTable = $("#emergencyMember_Table").DataTable({
            "columns": [
                {
                    "data": "emergency_member_guid",
                    "render": function (data, type, row, meta) {
                        return meta.row + 1;
                    }
                },
                {
                    "data": "grouping_name"
                },
                {
                    "data": "full_name"
                },
                {
                    "data": "department_name"
                },
                {
                    "data": "phone"
                },
                {
                    "data": "lineid"
                },
                {
                    "data": "email"
                },
                {
                    "data": null,
                    "defaultContent": '<button class="btn btn-primary edit-btn">修改</button> <button class="btn btn-danger del-btn">刪除</button>'
                }
            ],
            'createdRow': function (row, data, dataIndex) {
                $(row).attr('guid', data.emergency_member_guid);
            },
            "ajax": {
                "url": "/EmergencyGrouping/Emergency_member_table",
                "type": "POST",
                "data": function (d) {
                    d.grouping = selectgroupid
                },
                "dataSrc": function (rel) {
                    if (rel.code == "9999") {
                        toast_error(rel.msg);
                        return;
                    }
                    data = rel.data.data;
                    if (data == null || data.length == 0) {

                        this.data = [];
                    } else {
                    }
                    if (selectgroupid == 0) {
                        $('#Tablecard').hide();
                    } else {
                        $('#Tablecard').show();
                    }

                    /*$('#floorcard').hide();*/
                    return data;
                }
            }
        });
        GetDisasterList();
        Getdepartlist();
    })
    //新增人員驗證
    var memberValidate = $("#emergency-member-form").validate({
        rules: {
            emergency_member_name: {
                required: true,
            },
            emergency_member_phone: {
                required: true,
            },
            emergency_member_lineid: {
                required: true,
            },
            emergency_member_email: {
                required: true,
                email: true
            },
        }
    });
    //儲存人員
    function SaveMember() {
        if ($("#emergency-member-form").valid()) {
            var url = "/EmergencyGrouping/SaveMember";
            var send_data = {
                emergency_member_guid: selectemergency_member_guid,
                grouping: selectgroupid,
                full_name: $('#emergency_member_name').val(),
                department: $('#emergency_member_dept').val(),
                phone: $('#emergency_member_phone').val(),
                lineid: $('#emergency_member_lineid').val(),
                email: $('#emergency_member_email').val()
            };
            SaveSpinner(1);
            $.post(url, send_data, function (rel) {
                if (rel.code != "0000") {
                    if (rel.code == "9999") {
                        toast_error(rel.msg);
                    }
                    SaveSpinner(0);
                    return;
                }
                else {
                    toast_ok(rel.msg);
                    emergencyMemberTable.ajax.reload();
                    $('#emergency-member-modal').modal('hide');
                    SaveSpinner(0);
                    return;
                }
            }, 'json');
        }
    }
    //取得部門
    function Getdepartlist() {
        var url = "/EmergencyGrouping/Getdepartlist";
        var send_data = {};
        $.post(url, send_data, function (rel) {
            if (rel.code != "0000") {
                if (rel.code == "9999") {
                    toast_error(rel.msg);
                }
                return;
            }
            else {
                //$('#Disasterlist').empty();
                var Disasterstr = "";
                $.each(rel.data, function (index, val) {
                    $('#emergency_member_dept').append($("<option />").val(val.value).text(val.name));
                });
                $('#emergency_member_dept').append(Disasterstr);
                return;
            }
        }, 'json');

    }
    //新增人員
    function AddMember() {
        console.log($('#groupinglist').find('.btn-success').parent('div').attr('grouping'));
        selectgroupid = $('#groupinglist').find('.btn-success').parent('div').attr('grouping');
        $("#emergency-member-form").trigger("reset");
        selectemergency_member_guid = "";
        
        $('#emergency-member-modal').modal();
    }
    //取得災難類別
    function GetDisasterList() {
        var url = "/EmergencySetting/DisasterList";
        var send_data = {};
        $.post(url, send_data, function (rel) {
            if (rel.code != "0000") {
                if (rel.code == "9999") {
                    toast_error(rel.msg);
                }
                return;
            }
            else {
                $('#Disasterlist').empty();
                var Disasterstr = "";
                $.each(rel.data, function (index, val) {
                    if (index == 0) {
                        Disasterstr += '<button type="button" class="btn btn-success waves-effect waves-themed" onclick = "SelectDisaster(' + val.value + ',this)">' + val.name + '</button>';
                    }
                    else {
                        Disasterstr += '<button type="button" class="btn btn-secondary waves-effect waves-themed" onclick = "SelectDisaster(' + val.value + ',this)">' + val.name + '</button>';
                    }

                });
                $('#Disasterlist').append(Disasterstr);
                $('#Disasterlist').find('.btn-success').trigger('click');
                return;
            }
        }, 'json');
    }
    //選擇災難類別
    function SelectDisaster(Disaster, e) {
        Selectadisaster = Disaster;
        if ($("#Disasterlist").find('.btn').hasClass("btn-success")) {
            $("#Disasterlist").find('.btn').removeClass("btn-success").addClass("btn-secondary");
        }
        $(e).removeClass("btn-secondary").addClass("btn-success");
        GetGroupingList();
        selectgroupid = 0;
        emergencyMemberTable.ajax.reload();
    }
    //新增編組
    function Addgrouping() {
        /*var last = selectgroupid;*/
        selectgroupid = 0;
        $("#emergency-grouping-form").trigger("reset");
        var a = $('#groupinglist').find('.btn-group').length;
        $('#emergency_grouping_priority').val(a + 1);
        $('#deletebtn').hide();
        $('#emergency-grouping-modal').modal();
    }
    //儲存編組
    function SaveGrouping() {
        var url = "/EmergencyGrouping/SaveGrouping";
        var send_data = {
            id: selectgroupid,
            priority: $('#emergency_grouping_priority').val(),
            name: $('#emergency_grouping_name').val(),
            disaster: Selectadisaster
        };
        SaveSpinner(1);
        $.post(url, send_data, function (rel) {
            if (rel.code != "0000") {
                if (rel.code == "9999") {
                    toast_error(rel.msg);
                }
                SaveSpinner(0);
                return;
            }
            else {
                toast_ok(rel.msg);
                GetGroupingList();
                $('#emergency-grouping-modal').modal('hide');
                SaveSpinner(0);
                return;
            }
        }, 'json');
    }
    //取得編組列表
    function GetGroupingList() {
        var url = "/EmergencyGrouping/GetGroupingList";
        var send_data = {
            system_parent_id: Selectadisaster
        };
        $.post(url, send_data, function (rel) {
            if (rel.code != "0000") {
                if (rel.code == "9999") {
                    toast_error(rel.msg);
                }
                return;
            }
            else {
                var grouping = "";
                $('#groupinglist').empty();
                $.each(rel.data, function (index, val) {
                    if (val.id == selectgroupid) {
                        grouping += '<div class="btn-group mb-2 mr-2" grouping = "' + val.id + '">';
                        grouping += '<button type="button" class="btn btn-success select" onclick="SelectGrouping(' + val.id + ',this)">' + val.name + '</button>';
                        grouping += '<button type="button" class="btn btn-success edit" ><i class="fal fa-pencil"></i></button>';
                        grouping += '</div>';
                    } else {
                        grouping += '<div class="btn-group mb-2 mr-2" grouping = "' + val.id + '">';
                        grouping += '<button type="button" class="btn btn-secondary select" onclick="SelectGrouping(' + val.id + ',this)">' + val.name + '</button>';
                        grouping += '<button type="button" class="btn btn-secondary edit" ><i class="fal fa-pencil"></i></button>';
                        grouping += '</div>';
                    }
                });
                $('#groupinglist').append(grouping);
                return;
            }
        }, 'json');
    }
    //編輯編組列表單一資料
    $('#groupinglist').on("click", "button.edit", function () {
        $('#deletebtn').show();
        selectgroupid = $(this).parents('div').attr('grouping');
        if ($("#groupinglist").find('.btn').hasClass("btn-success")) {
            $("#groupinglist").find('.btn').removeClass("btn-success").addClass("btn-secondary");
        }
        $(this).parent('div').find('.btn').removeClass("btn-secondary").addClass("btn-success");
        var url = "/EmergencyGrouping/GetOneGrouping";
        var send_data = {
            selectgroupid: selectgroupid
        };
        $.post(url, send_data, function (rel) {
            if (rel.code != "0000") {
                if (rel.code == "9999") {
                    toast_error(rel.msg);
                }
                return;
            }
            else {

                $('#emergency_grouping_priority').val(rel.data.priority);
                $('#emergency_grouping_name').val(rel.data.name);
                $('#emergency-grouping-modal').modal();
                return;
            }
        }, 'json');
        emergencyMemberTable.ajax.reload();

    });
    //刪除編組列表
    function DeletedGrouping() {
        var send_data = {
            selectgroupid: selectgroupid
        };
        Swal.fire(
            {
                title: "刪除",
                text: "你確定是否刪除此筆資料?",
                type: "warning",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: "是",
                cancelButtonText: "否"
            }).then(function (result) {
                if (result.value) {
                    if ($("#emergencyMember_Table").find(".dataTables_empty").length != 1) {
                        Swal.fire(
                            {
                                title: "刪除失敗",
                                icon: 'warning',
                                html: '需先刪除所有相關人員才可進行刪除',
                            });
                        return;
                    } else {
                        var url = "/EmergencyGrouping/DeleteOne/";
                        $.post(url, send_data, function (rel) {
                            if (rel.code == "9999") {
                                toast_error(rel.msg);
                                return;
                            }
                            toast_ok(rel.msg);
                            selectgroupid = 0;
                            $('#emergency-grouping-modal').modal('hide');
                            GetGroupingList();
                        }, 'json');
                    }
                    
                }
            });
    }
    //選擇編組列表
    function SelectGrouping(id, e) {
        selectgroupid = id;
        if ($("#groupinglist").find('.btn').hasClass("btn-success")) {
            $("#groupinglist").find('.btn').removeClass("btn-success").addClass("btn-secondary");
        }
        $(e).parent('div').find('.btn').removeClass("btn-secondary").addClass("btn-success");
        emergencyMemberTable.ajax.reload();
    }
    //編輯人員單一資料
    $('#emergencyMember_Table').on("click", "button.edit-btn", function () {
        var url = "/EmergencyGrouping/GetOneMember";
        selectemergency_member_guid = $(this).parents('tr').attr('guid');
        var send_data = {
            guid: selectemergency_member_guid
        };
        $.post(url, send_data, function (rel) {
            if (rel.code != "0000") {
                toast_error(rel.msg);
            }
            else {
                $('#emergency_member_name').val(rel.data.full_name);
                $('#emergency_member_dept').val(rel.data.department);
                $('#emergency_member_phone').val(rel.data.phone);
                $('#emergency_member_lineid').val(rel.data.lineid);
                $('#emergency_member_email').val(rel.data.email);
                $('.modal-title').html("人員編組編輯");
                $('#emergency-member-modal').modal();
            }
        }, 'json');
    });
    //刪除人員單一資料
    $('#emergencyMember_Table').on("click", "button.del-btn", function () {
        var url = "/EmergencyGrouping/DeletedOneMember";
        selectemergency_member_guid = $(this).parents('tr').attr('guid');
        var send_data = {
            guid: selectemergency_member_guid
        };

        Swal.fire(
            {
                title: "刪除",
                text: "你確定是否刪除此筆資料?",
                type: "warning",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: "是",
                cancelButtonText: "否"
            }).then(function (result) {
                if (result.value) {
                    $.post(url, send_data, function (rel) {
                        if (rel.code != "0000") {
                            toast_error(rel.msg);
                        }
                        else {
                            emergencyMemberTable.ajax.reload();
                            toast_ok(rel.msg);
                        }
                    }, 'json');
                }
            })
    })

</script>

 }