@{
    ViewData["MainNum"] = "7";
    ViewData["SubNum"] = "1";
    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-xl-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">
                        <div class="col-12 d-flex justify-content-end">
                            <a href="javascript:;" class="btn btn-success waves-effect waves-themed mb-3" onclick="AddServicePlan()"><span class="fal fa-plus mr-1"></span>新增計畫</a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <!-- datatable start -->
                            <table id="ServicePlan_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>週期</th>
                                        <th>計畫期間</th>
                                        <th>功能</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="ServicePlan-modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered modal-lg" 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 class="ServicePlan-form" id="ServicePlan-form">
                    <div class="row">
                        <div class="form-group col-6">
                            <label class="form-label" for="ServicePlan-Name"><span class="text-danger">*</span>計畫名稱</label>
                            <input type="text" id="ServicePlan-Name" class="form-control" name="ServicePlanName">
                        </div>
                        <div class="form-group col-6">
                            <label class="form-label" for="ServicePlan-Building"><span class="text-danger">*</span>棟別</label>
                            <select class="form-control" id="ServicePlan-Building"></select>
                        </div>
                        <div class="form-group col-6">
                            <label class="form-label" for="ServicePlan-Table"><span class="text-danger">*</span>目標資料表</label>
                            <input type="text" id="ServicePlan-Table" class="form-control" name="ServicePlanTable">
                        </div>
                        <div class="form-group col-6">
                            <label class="form-label"><span class="text-danger">*</span>週期</label>
                            <div class="row d-flex justify-content-start align-items-center">
                                <div class="col-2">每</div>
                                <div class="col">
                                    <input type="number" id="ServicePlan-execution_time" class="form-control" name="ServicePlanexecution_time">
                                </div>
                                <div class="col">
                                    <select class="form-control" id="ServicePlan-execution_type" width="90" style="width: 90px">
                                        <option value="0">分</option>
                                        <option value="1">小時</option>
                                        <option value="2">天</option>
                                        <option value="3">週</option>
                                        <option value="4">月</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-group col-6">
                            <label class="form-label" for="ServicePlan-start_time"><span class="text-danger">*</span>開始時間</label>
                            <input type="datetime-local" id="ServicePlan-start_time" class="form-control" name="ServicePlanstart_time">
                        </div>
                        <div class="form-group col-6">
                            <label class="form-label" for="ServicePlan-end_time">結束時間</label>
                            <input type="datetime-local" id="ServicePlan-end_time" class="form-control" name="ServicePlanend_time">
                        </div>
                        <div class="form-group col-6">
                            <label class="form-label" for="ServicePlan-status">狀態</label>
                            <select class="form-control" id="ServicePlan-status">
                                <option value="0">啟用</option>
                                <option value="1">停用</option>
                            </select>
                        </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="SavePlan()">確定</button>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        var SelectPlanid = 0;
        var ServicePlanTable;
        $(function () {
            ServicePlanTable = $("#ServicePlan_table").DataTable({
                "columns": [
                    {
                        "data": "plan_name",
                        "render": function (data, type, row, meta) {
                            return meta.row + 1;
                        }
                    },
                    {
                        "data": "plan_name"
                    },
                    {
                        "data": "status"
                    },
                    {
                        "data": "building"
                    },
                    {
                        "data": "target_table"
                    },
                    {
                        "data": "execution"
                    },
                    {
                        "data": "time"
                    },
                    {
                        "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('bg-id', data.id);
                },
                "ajax": {
                    "url": "/ServicePlan/GetPlanTable",
                    "type": "POST",
                    "dataSrc": function (rel) {
                        if (rel.code == "9999") {
                            toast_error(rel.msg);
                            return;
                        }
                        data = rel.data;
                        if (data == null || data.length == 0) {

                            this.data = [];
                        } else {
                            $.each(this.data, function (k, rel) {
                                if (rel.status == 0) {
                                    rel.status = '啟用';
                                } else {
                                    rel.status = '停用';
                                }
                            })
                        }
                        //$('#floorcard').hide();
                        return data;
                    }
                }
            });
            SetBuild();
        });

        var formValid = $("#ServicePlan-form").validate({
            rules: {
                ServicePlanName: {
                    required: true,
                    maxlength: 50
                },
                ServicePlanTable: {
                    required: true,
                    maxlength: 50
                },
                ServicePlanexecution_time: {
                    required: true,
                    min: 1
                },
                ServicePlanstart_time: {
                    required: true
                }
            }
        });

        function AddServicePlan() {
            SelectPlanid = 0;
            formValid.resetForm();
            $("#ServicePlan-form").trigger("reset");
            $("#ServicePlan-modal .modal-title").html("服務計畫 - 新增");
            $("#ServicePlan-modal").modal();
        }

        function SavePlan() {
            var sent_data = {
                id: SelectPlanid,
                status: $('#ServicePlan-status').val(),
                plan_name: $('#ServicePlan-Name').val(),
                building_guid: $('#ServicePlan-Building').val(),
                target_table: $('#ServicePlan-Table').val(),
                execution_time: $('#ServicePlan-execution_time').val(),
                execution_type: $('#ServicePlan-execution_type').val(),
                start_time: $('#ServicePlan-start_time').val(),
                end_time: $('#ServicePlan-end_time').val()
            };
            //if ($('#ServicePlan-end_time').val() != '0001-01-01 00:00:00') {
            //    sent_data.append()
            //}
            var url = "/ServicePlan/SavePlan";
            if ($("#ServicePlan-form").valid())
            {
                $.post(url, sent_data, function (rel) {
                    if (rel.code != "0000") {
                        toast_error(rel.msg);
                        return;
                    } else {
                        toast_ok(rel.msg);
                        ServicePlanTable.ajax.reload();
                        $('#ServicePlan-modal').modal('hide');
                    }
                })

            }
        }

        function SetBuild() {
            var url = "/BuildInfo/BuildInfoList";
            $.post(url, null, function (rel) {
                if (rel.code != "0000") {
                    toast_error(rel.msg);
                    return;
                }
                if (rel.data.length > 0) {
                    $('#ServicePlan-Building').empty();
                    $.each(rel.data, function (index, val) {
                        $("#ServicePlan-Building").append($("<option />").val(val.building_guid).text(val.full_name));
                    });
                } else {
                    $("#ServicePlan-Building").empty();
                    $("#ServicePlan-Building").append('<option value="0" disabled>請先新增區域</option>');
                    $("#ServicePlan-Building").val($("#select_building option:first").val());
                }
            }, 'json');
        }

        $('#ServicePlan_table').on("click", "button.edit-btn", function () {
            formValid.resetForm();
            SelectPlanid = $(this).parents('tr').attr('bg-id');
            var url = "/ServicePlan/GetonePlan";
            var sent_data =
            {
                id: SelectPlanid
            };
            $.post(url, sent_data, function (rel) {
                if (rel.code != "0000") {
                    toast_error(rel.msg);
                    return;
                }
                $('#ServicePlan-status').val(rel.data.status);
                $('#ServicePlan-Name').val(rel.data.plan_name);
                $('#ServicePlan-Building').val(rel.data.building_guid);
                $('#ServicePlan-Table').val(rel.data.target_table);
                $('#ServicePlan-execution_time').val(rel.data.execution_time);
                $('#ServicePlan-execution_type').val(rel.data.execution_type);
                $('#ServicePlan-start_time').val(rel.data.start_time.replace(" ", "T"));
                if (rel.data.end_time == "0001-01-01 00:00:00") {
                    $('#ServicePlan-end_time').val(null);
                } else {
                    $('#ServicePlan-end_time').val(rel.data.end_time.replace(" ", "T"));
                }
                
                $("#ServicePlan-modal").modal();
            })
        })

        $('#ServicePlan_table').on("click", "button.del-btn", function () {
            SelectPlanid = $(this).parents('tr').attr('bg-id');
            var sent_data =
            {
                id: SelectPlanid
            };
            Swal.fire(
                {
                    title: "刪除",
                    text: "你確定是否刪除此筆資料?",
                    type: "warning",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: "是",
                    cancelButtonText: "否"
                }).then(function (result) {
                    if (result.value) {
                        var url = "/ServicePlan/DeletePlan/";
                        $.post(url, sent_data, function (rel) {
                            if (rel.code == "9999") {
                                toast_error(rel.msg);
                                return;
                            }
                            toast_ok(rel.msg);
                            ServicePlanTable.ajax.reload(null, false);
                        }, 'json');
                    }
                });
        });

    </script>
}