@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">
    <link href="{{asset('js/plugins/jquery-pretty-radio-checkbox/css/jquery-labelauty.css')}}" rel="stylesheet">

    <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-top: 10px;
            width: 100%;
        }

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

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

        .operateAdd, .operateDel {
            font-weight: 600;
            cursor: pointer;
            text-align: center;
        }

        .mainStep {
            /*border: 1px solid #999;*/
            padding: 12px;
            margin-top: 20px;
        }

        .mainStepText {
            display: inline-block;
            width: 180px;
        }

        .my-select {
            /*width: 60% !important;*/
        }

        .radio-label,
        .radio-check {
            display: inline-block;
            position: relative;
        }

        .radio-label input[type="checkbox"] {
            appearance: none; /*清楚默认样式*/
            -webkit-appearance: none;
            /* opacity: 0; */
            outline: none;
            position: absolute;
            z-index: 2;
            width: 6px;
            height: 6px;
            top: 10px;
            left: 10px;
            border-radius: 50%;
            background: #b4b4b4;
        }

        .radio-label label {
            display: inline-block;
            min-width: 50px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            padding-right: 10px;
            border-radius: 5px;
            padding-left: 25px;
            color: #fff;
            background-color: #c9c9c9;
        }

        .radio-label input[type="checkbox"]:checked {
            opacity: 0;
        }

        .radio-label input[type="checkbox"]:checked + label {
            color: #fff;
            background-color: #3597db;
        }

        .radio-label input[type="checkbox"]:checked + label::after {
            content: "";
            position: absolute;
            left: 12px;
            top: 5px;
            width: 5px;
            height: 12px;
            border-right: 1px solid #fff;
            border-bottom: 1px solid #fff;
            transform: rotate(45deg);
        }
    </style>
@endsection

@section('right')

    <ul class="ul-content">
        <li class="active">
            <form id="form">
                <main id="main">
                    <button type="button" class="btn btn-success" onclick="utils.saveFlow()"
                            style="position: fixed;right: 50px;top:50px">保存
                    </button>
                    <div class="mainStep">
                        <div>
                            <table class="my-table">
                                <colgroup>
                                    <col style="width: 5%">
                                    <col style="width: 15%">
                                    <col style="width: 25%">
                                    <col style="width: 10%">
                                    <col style="width: 15%">
                                    <col style="width: 15%">
                                    <col style="width: 15%">
                                </colgroup>
                                <thead>
                                <tr>
                                    <td class="operateAdd">
                                        <a href="javascript:;" onclick="utils.add(this)"> <i class="fa fa-plus"
                                                                                             aria-hidden="true"
                                                                                             style="font-size: 18px"></i></a>
                                    </td>
                                    <td>标题</td>
                                    <td>内容</td>
                                    <td>是否完成</td>
                                    <td>安排时间</td>
                                    <td>完成时间</td>
                                    <td>人员</td>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($tasksList as $item)
                                    <tr>
                                        <td class="operateDel" onclick="utils.del(this)"><i class="fa fa-times"
                                                                                            aria-hidden="true"
                                                                                            style="font-size: 18px"></i>
                                        </td>
                                        <td>
                                            <input type="text" class="form-control" name="title"
                                                   value="{{$item['title']??''}}">
                                        </td>
                                        <td>
                                            <input type="text" class="form-control" name="data"
                                                   value="{{$item['data']??''}}">
                                        </td>
                                        <td>
                                            <select class="form-control" id="fulfil" name="fulfil">
                                                <option value="1" @if ($item['fulfil']==1) selected @endif>未完成
                                                </option>
                                                <option value="2" @if ($item['fulfil']==2) selected @endif>完成
                                                </option>
                                            </select>
                                        </td>
                                        <td>
                                            <input type="text" class="form-control my-date"
                                                   onclick="utils.bindDate(this)" autocomplete="off"
                                                   name="initial_date" value="{{$item['initial_date']??''}}">
                                        </td>
                                        <td>
                                            <input type="text" class="form-control my-date"
                                                   onclick="utils.bindDate(this)" autocomplete="off"
                                                   name="flow_except_date" value="{{$item['flow_except_date']?? $date}}">
                                        </td>

                                        <td>
                                            <select name="personnel" id="personnel" class="my-select"
                                                    data-container="body" data-live-search="true">
                                                <option value="0" selected>请选择人员</option>
                                                @foreach($optimizationPersonnel as $role)
                                                    <option value="{{$role->id}}"
                                                            @if (!empty($item['personnel']) && $role->id==$item['personnel']) selected @endif>{{$role->nickname}}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </main>
            </form>
        </li>
    </ul>
@endsection
@section('footer_extend')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
    <script src="{{asset('js/plugins/layDate-v5.0.9/laydate/laydate.js')}}"></script>
    <script>
        $(function () {
            $(".my-date").trigger('click'); //触发laydate绑定
            $('.my-select').selectpicker();
        });

        var utils = {
            add: function (_this) {
                var rowspan = $(_this).parent().next().attr('rowspan');
                $(_this).parent().next().attr('rowspan', rowspan + 1);
                var str =
                    '<tr>' +
                    '<td class="operateDel" onclick="utils.del(this)"><i class="fa fa-times" aria-hidden="true" style="font-size:18px"></i></td>' +
                    '<td>' +
                    '<input type="text" class="form-control" name="title">' +
                    '</td>' +
                    '<td>' +
                    '<input type="text" class="form-control" name="data">' +
                    '</td>' +
                    '<td>' +
                    '<select class="form-control" id="fulfil" name="fulfil">' +
                    '<option value="1" >未完成</option>' +
                    '<option value="2" >完成</option>' +
                    '</select>' +
                    '</td>' +
                    '<td>' +
                    '<input type="text" class="form-control my-date" name="initial_date" onclick="utils.bindDate(this)" autocomplete="off" value="{{$date}}">' +
                    '</td>' +
                    '<td>' +
                    '<input type="text" class="form-control my-date" name="flow_except_date" onclick="utils.bindDate(this)" autocomplete="off">' +
                    '</td>' +
                    '<td>' +
                    '<select name="personnel" id="personnel" class="my-select" data-container="body" data-live-search="true">' +
                    '      <option value="0" selected>请选择人员</option>' +
                    '      @foreach($optimizationPersonnel as $role)' +
                    '      <option value="{{$role->id}}">{{$role->nickname}}</option>' +
                    '      @endforeach' +
                    '</select>' +
                    '</td>' +
                    '</tr>';
                $(_this).parent().parent().parent().next().prepend(str);
                $(".my-date").trigger('click');
                $('.my-select').selectpicker();
            },
            del: function (_this) {
                $(_this).parent().remove();
            },
            saveFlow: function () {
                var flowData = [];
                var infoList = [];

                $('input[name="info"]:checked').each(function () {
                    infoList.push($(this).val());
                });
                var list = infoList.toString();

                $(".my-table").each(function () {

                    $(this).find("tbody tr").each(function () {

                        var title = $(this).find("[name=title]").val();
                        var data = $(this).find("[name=data]").val();
                        var flow_except_date = $(this).find("[name=flow_except_date]").val();
                        var initial_date = $(this).find("[name=initial_date]").val();
                        var fulfil = $(this).find("[name=fulfil]").val();
                        var personnel = $(this).find("[name=personnel]").val();

                        var temp = {
                                title: title,
                                data: data,
                                fulfil: fulfil,
                                flow_except_date: flow_except_date,
                                initial_date: initial_date,
                                personnel: personnel
                            }
                        ;
                        flowData.push(temp);
                    });
                });
                var ajaxConfig = {
                    url: '/admin/work-task/save/siteId/{{$siteId}}/status/{{$siteStatus}}',
                    type: 'post',
                    data: {
                        infoList: list,
                        dataList: flowData
                    },
                    success: function () {
                        layer.msg('操作成功', {
                            icon: 1,
                            time: 1500 //2秒关闭（如果不配置，默认是3秒）
                        }, function () {
                            window.location.reload()
                        });
                    }
                };
                tips.ajax(ajaxConfig);
            },
            bindDate: function (that) {
                var routeTime = {
                    type: 'date',
                    elem: that
                };
                laydate.render(routeTime);
            }
        };

    </script>
@endsection