@extends('admin/site/side_layout')
@section('header_extend')

    <link rel="stylesheet" href="{{asset('js/plugins/zTree_v3-master/css/zTreeStyle/zTreeStyle.css')}}">

    <style type="text/css">
        .ztree li span.button.add {
            margin-left: 2px;
            margin-right: -1px;
            background-position: -144px 0;
            vertical-align: top;
            *vertical-align: middle
        }

        .ztree li span.button.reset {
            margin-right: 2px;
            background-position: -110px -48px;
            vertical-align: top;
            *vertical-align: middle
        }
    </style>
@endsection

@section('right')
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    平台页面
                </div>
                <div class="ibox-content">
                    <ul id="treeDemo" class="ztree"></ul>
                </div>
            </div>
        </div>

        <div class="col-sm-9">
            <div class="ibox float-e-margins">
                <div class="ibox-title">概要
                    {{--<button class="btn btn-info" type="button" style="float: right;margin: 0 5px;padding: 4px 12px"--}}
                    {{--onclick="units.batchDelete()">删除--}}
                    {{--</button>--}}

                    {{--<button class="btn btn-info" type="button" style="float: right;margin: 0 5px;padding: 4px 12px"--}}
                    {{--onclick="units.saveView(0)">添加--}}
                    {{--</button>--}}
                </div>
                <div class="ibox-content">
                    <form id="form">
                        <div class="form-group">
                            <label>主标题</label>
                            <input type="text" placeholder="" class="form-control" id="title" name="title">
                        </div>
                        {{--<div class="form-group">--}}
                        {{--<label>副标题</label>--}}
                        {{--<input type="text" placeholder="" class="form-control" id="subtitle" name="subtitle">--}}
                        {{--</div>--}}
                        <div class="form-group">
                            <label>uri地址</label>
                            <input type="text" placeholder="" class="form-control" id="uri" name="uri">
                        </div>

                        <div class="form-group">
                            <label>缩略图 </label>

                            <img
                                src="http://admin.yinqingli.com/storage/201906/jpg/1Q987Ryl6mdPFhJljhy5O1EhPol9M79dSVFbGnod.jpeg"
                                alt="" style="height: 100px" id="thumb">

                        </div>

                        <div class="form-group">
                            <label>内容摘要</label>
                            <textarea class="form-control" rows="5" placeholder="" id="summary"
                                      name="summary"></textarea>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label>需填内容</label>
                        </div>
                        <div class="form-group">
                            <label for="release_at">发布日期：</label>

                            <div>
                                <div class="input-group m-b">
                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    <input type="text" class="form-control" id="release_at" name="release_at">
                                </div>
                            </div>
                        </div>


                        <div class="form-group">
                            <label for="release_interval">发布间隔：</label>

                            <div>
                                <div class="input-group m-b">
                                    <input type="text" class="form-control" name="release_interval"
                                           id="release_interval">
                                    <span class="input-group-addon">天</span>
                                </div>
                            </div>
                        </div>


                        <div class="form-group">
                            <label for="release_interval">linkedIn组织ID：</label>

                            <div>
                                <div class="input-group m-b">
                                    {{$linkedInOrgId}}
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="pin_board">pinterest board：</label>

                            <div>
                                <div class="input-group m-b">

                                    @if($boardsErr==null)
                                        <select name="pin_board" id="pin_board" class="form-control">
                                            <option value="">请选择board</option>
                                            @foreach($boards as $board)
                                                <option value="{{$board}}">{{$board}}</option>
                                            @endforeach
                                        </select>
                                    @else
                                        <input type="hidden" name="pin_board" id="pin_board" value="">
                                        {{$boardsErr}}
                                    @endif
                                </div>
                            </div>
                        </div>

                        <button class="btn btn-info btn-sm" type="button" onclick="units.syncSocial()">同步社交</button>

                    </form>
                </div>
            </div>
        </div>

    </div>
@endsection


@section('footer_extend')
    <script src="{{asset('js/plugins/zTree_v3-master/js/jquery.ztree.core.min.js')}}"></script>
    {{--<script src="{{asset('js/plugins/zTree_v3-master/js/jquery.ztree.exedit.min.js')}}"></script>--}}
    <script src="{{asset('js/plugins/zTree_v3-master/js/jquery.ztree.excheck.min.js')}}"></script>
    <script src="{{asset('js/plugins/layDate-v5.0.9/laydate/laydate.js')}}"></script>
    <script>

        laydate.render({
            elem: '#release_at', //指定元素
            type: 'datetime'
        });
        var zTreeObj;
        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var setting = {
            check: {
                enable: true,
                chkboxType: {"Y": "s", "N": "s"}
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onClick: function (event, treeId, treeNode) {
                    // config.otherParams = {parentId: treeNode.id};
                    console.log(treeNode);

                    $("#title").val(treeNode.name);
                    // $("#subtitle").val(treeNode.subtitle);
                    $("#summary").val(treeNode.summary);
                    $("#thumb").attr('src', '{{sprintf('http://%s',$site->domain)}}' + treeNode.thumb);
                    $("#uri").val(treeNode.uri);
                    // tips.tableRefresh();
                }
            }
            // edit: {
            //     enable: true,
            //     showRenameBtn: false,
            //     showRemoveBtn: false
            // }
            // view: {
            //     addHoverDom: units.addHoverDom,
            //     removeHoverDom: function (treeId, treeNode) {
            //         $("#addBtn_" + treeNode.tId).unbind().remove();
            //         $("#resetBtn_" + treeNode.tId).unbind().remove();
            //     },
            //     selectedMulti: false
            // }
        };
        // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）

        var trees = JSON.parse('{!! addslashes(json_encode($trees)) !!}');
        console.log(trees);

        $(document).ready(function () {
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, trees);
        });

        var units = {
            syncSocial: function () {
                    {{--var data = tips.getFormValues('#form');--}}
                    {{--data.thumb = $("#thumb").attr('src');--}}
                    {{--var ajaxConfig = {--}}
                    {{--url: '/admin/sites/' + {{$siteId}} +'/social-publish',--}}
                    {{--type: 'post',--}}
                    {{--data: data--}}
                    {{--};--}}
                    {{--tips.ajax(ajaxConfig);--}}

                var checkedNodes = zTreeObj.getCheckedNodes();
                var nodeIds = [];
                $.each(checkedNodes, function (inx, val) {
                    nodeIds.push(val.id);
                });

                var ajaxConfig = {
                    url: '/admin/sites/' + {{$siteId}} +'/social-publish',
                    type: 'post',
                    data: {
                        checkIds: nodeIds,
                        release_at: $("#release_at").val(),
                        release_interval: $("#release_interval").val(),
                        pin_board: $("#pin_board").val()
                    }
                };
                tips.ajax(ajaxConfig);
            }
        };
    </script>
@endsection