@extends('admin/site/side_layout')
@section('header_extend')
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">
    <style>
        .ul-content {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        .ul-content li {
            padding: 20px 10px 10px;
            display: none;
        }

        .ul-content .active {
            display: block;
        }

        .my-table {
            margin: 10px 0;
            width: 100%;
        }

        .my-table tr {
            border: 1px solid #f1f1f1;
        }

        .my-table td {
            padding: 8px;
        }


    </style>
@endsection

@section('right')
    <ul class="nav nav-tabs">
        <li class="active"><a>当周</a></li>
        <li><a>下周</a></li>
        <li><a>历史</a></li>
    </ul>
    <ul class="ul-content">
        <li class="active">
            <table class="my-table">
                <thead>
                <colgroup>
                    <col style="width: 150px">
                    <col>
                    <col style="width: 200px">
                    <col>
                    <col style="width: 200px">
                </colgroup>
                <tr>
                    <td>完成时间</td>
                    <td>事项</td>
                    <td>临时人员</td>
                    <td>编内人员</td>
                    <td>备注</td>
                    <td style="cursor: pointer" onclick="utils.addNow()">添加</td>
                </tr>
                </thead>
                <tbody id="nowTBody">
                @foreach($nowPlanList as $items)
                    <tr>
                        <td><input type="text" class="form-control my-date" name="done_date"
                                   onclick="utils.bindDate(this)" value="{{$items->done_date}}">
                        </td>
                        <td><input type="text" class="form-control" name="title" value="{{$items->title}}"></td>
                        <td><input type="text" class="form-control" name="username" value="{{$items->username}}"></td>
                        <td>
                            <select name="user_ids" class="my-select" multiple
                                    data-container="body" data-live-search="true">
                                @foreach($userList as $user)
                                    <option value="{{$user['id']}}"
                                            @if(is_array($items->user_ids??'') && in_array($user['id'],$items->user_ids)) selected @endif>
                                        {{$user['nickname']}}
                                        【{{\App\Http\Models\FlowInfoTpl::RoleScope[$user['role_id']]??''}}】
                                    </option>
                                @endforeach
                            </select>
                        </td>

                        <td><input type="text" class="form-control" name="remark" value="{{$items->remark}}"></td>
                        <td style="cursor: pointer" onclick="utils.delNow(this)">
                            删除<input type="hidden" name="id" value="{{$items->id}}">
                        </td>
                        <td style="cursor: pointer" onclick="utils.moveNow(this)">
                            迁移到下周<input type="hidden" name="id" value="{{$items->id}}">
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
            <button class="btn btn-success" type="button" onclick="utils.saveNow()"> 保存</button>

        </li>
        <li>
            <table class="my-table">
                <thead>
                <colgroup>
                    <col style="width: 150px">
                    <col style="width: 150px">
                    <col style="width: 150px">
                    <col style="width: 150px">
                    <col style="width: 200px">
                    <col style="width: 150px">
                </colgroup>
                <tr>
                    <td>预计时间</td>
                    <td>事项</td>
                    <td>临时人员</td>
                    <td>编内人员</td>
                    <td>备注</td>
                    <td style="cursor: pointer" onclick="utils.addNext()">添加</td>
                </tr>
                </thead>
                <tbody id="nextTBody">
                @foreach($nextPlanList as $items)
                    <tr>
                        <td><input type="text" class="form-control my-date" name="done_date"
                                   onclick="utils.bindDate(this)" value="{{$items->done_date}}">
                        </td>
                        <td><input type="text" class="form-control" name="title" value="{{$items->title}}"></td>
                        <td><input type="text" class="form-control" name="username"
                                   value="{{str_replace('、',' ',$items->username)}}"></td>
                        <td>
                            <select name="user_ids" class="my-select" multiple
                                    data-container="body" data-live-search="true">
                                @foreach($userList as $user)
                                    <option value="{{$user['id']}}"
                                            @if(is_array($items->user_ids??'') && in_array($user['id'],$items->user_ids)) selected @endif>
                                        {{$user['nickname']}}
                                        【{{\App\Http\Models\FlowInfoTpl::RoleScope[$user['role_id']]??''}}】
                                    </option>
                                @endforeach
                            </select>
                        </td>
                        <td><input type="text" class="form-control" name="remark" value="{{$items->remark}}"></td>
                        <td style="cursor: pointer" onclick="utils.delNext(this)">
                            删除<input type="hidden" name="id" value="{{$items->id}}">
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
            <button class="btn btn-success" type="button" onclick="utils.saveNext()"> 保存</button>
        </li>
        <li>

            @foreach($historyList as $inx=>$history)
                <table class="my-table">
                    <caption
                        style="text-align: center;font-size: 20px;font-weight: 600">{{substr($inx,0,4).'年'.substr($inx,4,2).'周'}}</caption>
                    <thead>
                    <colgroup>
                        <col style="width: 150px">
                        <col>
                        <col style="width: 200px">
                        <col>
                    </colgroup>
                    <tr>
                        <td>完成时间</td>
                        <td>事项</td>
                        <td>人员</td>
                        <td>备注</td>
                        <td>操作</td>

                    </tr>
                    </thead>
                    <tbody id="historyTBody">
                    @foreach($history as $item)
                        <tr>
                            <td class="doneDate">{{$item['done_date']}}</td>
                            <td class="title">{{$item['title']}}</td>
                            <td class="username">{{$item['username']}}</td>
                            <td class="remark">{{$item['remark']}}</td>
                            <td>
                                <button type="button"
                                        onclick='utils.editHistory("{{$item['id']}}")'>修改
                                </button>

                                <button type="button"
                                        onclick='utils.destroyHistory(this,"{{$item['id']}}")'>删除
                                </button>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            @endforeach
        </li>

    </ul>
@endsection

@section('footer_extend')

    <script src="{{asset('js/plugins/layDate-v5.0.9/laydate/laydate.js')}}"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
    <script src="{{asset('js/jquery-ui-1.10.4.min.js')}}"></script>

    <script>
        $(function () {
            $(".my-date").trigger('click'); //触发laydate绑定
            $('.my-select').selectpicker();
        });
        $("tbody").sortable({
            connectWith: ".nowTBody"
        }).disableSelection();

        $("tbody").sortable({
            connectWith: ".nextTBody"
        }).disableSelection();

        $(".nav-tabs>li").click(function () {
            var index = $(this).index();
            $(this).addClass("active");
            $(this).siblings().removeClass("active");

            $(".ul-content>li").eq(index).addClass("active").siblings().removeClass("active")
        });

        $(function () {
            $(".my-date").trigger('click'); //触发laydate绑定
        });
        var utils = {
            editHistory: function (id) {
                layer.open({
                    type: 2,
                    content: ['/admin/flow-plan-history-update/' + id],
                    area: ['60%', '60%'],
                    title: '修改'
                });
            },
            /*var ro = $(_this).parent().parent().find(".remark");
            var uo = $(_this).parent().parent().find(".username");
            var to = $(_this).parent().parent().find(".title");
            var ddo = $(_this).parent().parent().find(".doneDate");

            layer.open({
                title: "修改",
                area: '650px',
                type: 1,
                content: '<div class="ibox-content">\n' +
                    '        <form class="form-horizontal">\n' +
                    '\n' +
                    '            <div class="form-group">\n' +
                    '                <label class="col-sm-3 control-label" >完成时间：</label>\n' +
                    '\n' +
                    '                <div class="col-sm-8">\n' +
                    '                    <input type="text" class="form-control" value="' + ddo.text() + '" name="edit_done_date" onclick="utils.bindDate(this)">\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="form-group">\n' +
                    '                <label class="col-sm-3 control-label">事项：</label>\n' +
                    '\n' +
                    '                <div class="col-sm-8">\n' +
                    '                    <input type="text"  class="form-control" value="' + to.text() + '" name="edit_title">\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="form-group">\n' +
                    '                <label class="col-sm-3 control-label">临时人员：</label>\n' +
                    '\n' +
                    '                <div class="col-sm-8">\n' +
                    '                    <input type="text"  class="form-control" value="' + uo.text() + '" name="edit_username">\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="form-group">\n' +
                    '                <label class="col-sm-3 control-label">编内人员：</label>\n' +
                    '\n' +
                    '                <div class="col-sm-8">\n' +
                    '               <select name="user_ids" class="my-select" multiple data-container="body" data-live-search="true">' +
                    '
                        '                </select>' +
                        '                </div>\n' +
                        '            </div>\n' +
                        '            <div class="form-group">\n' +
                        '                <label class="col-sm-3 control-label">备注：</label>\n' +
                        '\n' +
                        '                <div class="col-sm-8">\n' +
                        '                    <input type="text"  class="form-control" value="' + ro.text() + '" name="edit_remark">\n' +
                        '                </div>\n' +
                        '            </div>\n' +
                        '        </form>\n' +
                        '        </div>',
                    success: function (layero, index) {
                        layero.find("[name=edit_done_date]").trigger('click');

                    },
                    btn: ['确认', '取消'],
                    yes: function (index, layero) {

                        var done_date = layero.find("[name=edit_done_date]").val();
                        var title = layero.find("[name=edit_title]").val();
                        var username = layero.find("[name=edit_username]").val();
                        var remark = layero.find("[name=edit_remark]").val();

                        var ajaxConfig = {
                            url: '/admin/flow-plan-edit',
                            type: 'put',
                            data: {title: title, doneDate: done_date, username: username, remark: remark, planId: id},
                            success: function () {
                                ro.text(remark);
                                uo.text(username);
                                to.text(title);
                                ddo.text(done_date);
                            }
                        };
                        tips.ajax(ajaxConfig);

                        layer.close(index);
                    }
                });
            },*/

            destroyHistory: function (_this, planId) {
                layer.confirm("是否确认删除", {icon: 3, title: '提示'}, function (inx) {
                    var ajaxConfig = {
                        url: '/admin/flow-plan-history?planId=' + planId,
                        type: 'delete',
                        success: function (result) {
                            layer.msg(result.message, {icon: 6, time: 1500}, function () {
                                $(_this).parent().parent().remove();
                                layer.close(inx)
                            });
                        }
                    };
                    tips.ajax(ajaxConfig)

                })
            },
            bindDate: function (that) {
                var routeTime = {
                    type: 'date',
                    elem: that
                };
                laydate.render(routeTime);
            },
            addNow: function () {
                var str = '<tr>' +
                    '<td><input type="text" class="form-control my-date" name="done_date" onclick="utils.bindDate(this)"></td>' +
                    '<td><input type="text" class="form-control" name="title"></td>' +
                    '<td><input type="text" class="form-control" name="username"></td>' +
                    '<td>' +
                    '<select name="user_ids" class="my-select" multiple data-container="body" data-live-search="true">' +
                    '@foreach($userList as $user)' +
                    '<option value="{{$user['id']}}">{{$user['nickname']}}' + '【{{\App\Http\Models\FlowInfoTpl::RoleScope[$user['role_id']]??''}}】' +
                    '</option>' +
                    '@endforeach' +
                    '</select>' +
                    '</td>' +
                    '<td><input type="text" class="form-control" name="remark"></td>' +
                    '<td style="cursor: pointer" onclick="utils.delNow(this)">删除<input type="hidden" name="id" value="0"></td>' +
                    '</tr>';
                $("#nowTBody").append(str);
                $(".my-date").trigger('click');
                $('.my-select').selectpicker();
            },
            delNow: function (_this) {
                $(_this).parent().remove();
            },
            saveNow: function () {

                var errMsg = '';
                var dataList = [];
                $("#nowTBody tr").each(function () {
                    var done_date = $(this).find("[name=done_date]").val();
                    var title = $(this).find("[name=title]").val();
                    var username = $(this).find("[name=username]").val();
                    var remark = $(this).find("[name=remark]").val();
                    var id = $(this).find("[name=id]").val();
                    var user_ids = $(this).find("[name=user_ids]").val();

                    !done_date && (errMsg += '请选择完成时间<br>');
                    !title && (errMsg += '请填写事项<br>');
                    //!username && (errMsg += '请填写人员<br>');
                    dataList.push({
                        done_date: done_date,
                        title: title,
                        username: username,
                        remark: remark,
                        id: id,
                        user_ids: user_ids,
                    })
                });
                if (errMsg !== '') {
                    layer.alert(errMsg, {icon: 5});
                    return;
                }
                var ajaxConfig = {
                    url: '/admin/flow-plan-save/sites/{{$siteId}}',
                    type: 'post',
                    data: {dataList: dataList}
                };
                tips.ajax(ajaxConfig);
                //window.location.reload()

            },
            moveNow: function (_this) {

                var id = $(_this).find("[name=id]").val();
                var errMsg = '';
                if (errMsg !== '') {
                    layer.alert(errMsg, {icon: 5});
                    return;
                }


                var ajaxConfig = {
                    url: '/admin/flow-plan-save/sites/{{$siteId}}?isMove=' + id,
                    type: 'post',
                    // data: {dataList: dataList}
                };
                tips.ajax(ajaxConfig);
                window.location.reload();
            },
            addNext: function () {
                var str =
                    '<tr>' +
                    '<td><input type="text" class="form-control my-date" name="done_date" onclick="utils.bindDate(this)"></td>' +
                    '<td><input type="text" class="form-control" name="title"></td>' +
                    '<td><input type="text" class="form-control" name="username"></td>' +
                    '<td>' +
                    '<select name="user_ids" class="my-select" multiple data-container="body" data-live-search="true">' +
                    '@foreach($userList as $user)' +
                    '<option value="{{$user['id']}}">{{$user['nickname']}}' + '【{{\App\Http\Models\FlowInfoTpl::RoleScope[$user['role_id']]??''}}】' +
                    '</option>' +
                    '@endforeach' +
                    '</select>' +
                    '</td>' +
                    '<td><input type="text" class="form-control" name="remark"></td>' +
                    '<td style="cursor: pointer" onclick="utils.delNext(this)">删除<input type="hidden" name="id" value="0"></td>' +
                    '</tr>';
                $("#nextTBody").append(str);
                $(".my-date").trigger('click');
                $('.my-select').selectpicker();
            },
            delNext: function (_this) {
                $(_this).parent().remove();
            },
            saveNext: function () {
                var errMsg = '';
                var dataList = [];
                $("#nextTBody tr").each(function () {
                    var done_date = $(this).find("[name=done_date]").val();
                    var title = $(this).find("[name=title]").val();
                    var username = $(this).find("[name=username]").val();
                    var remark = $(this).find("[name=remark]").val();
                    var id = $(this).find("[name=id]").val();
                    var user_ids = $(this).find("[name=user_ids]").val();

                    !done_date && (errMsg += '请选择预计时间<br>');
                    !title && (errMsg += '请填写事项<br>');
                    //!username && (errMsg += '请填写人员<br>');
                    dataList.push({
                        done_date: done_date,
                        title: title,
                        username: username,
                        remark: remark,
                        id: id,
                        user_ids: user_ids
                    })
                });
                if (errMsg !== '') {
                    layer.alert(errMsg, {icon: 5});
                    return;
                }
                var ajaxConfig = {
                    url: '/admin/flow-plan-save/sites/{{$siteId}}?isNext=1',
                    type: 'post',
                    data: {dataList: dataList}
                };
                tips.ajax(ajaxConfig);
                //window.location.reload()

            }
        };

    </script>
@endsection