@extends('admin/site/side_layout')
@section('header_extend')
    <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-input {
            padding: 4px 2px;
            width: 100%;
            border-style: none;
        }

        .my-input2 {
            padding: 4px 2px;
            width: 100%;
        }

        .my-table {
            width: 100%;
        }

        .my-table td {
            border: 1px solid #E5E6E7;
            padding: 8px;
        }

        .my-table tr td:last-child {
            cursor: pointer;
            text-align: center;
        }

        .you-table {
            width: 100%;
        }

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

        .you-table tr td:last-child {
            width: 80px;
            cursor: pointer;
            text-align: center;
        }

        .you-table2 {
            width: 100%;
        }

        .you-table2 td {
            padding: 8px;
        }

        .you-table2 tr td:last-child {
            width: 180px;
        }

        .subInput {
            box-sizing: border-box;
            width: 92%;
            border: 1px dashed #999;
            padding: 4px 2px;
            margin-right: 5px;
        }

    </style>

@endsection

@section('right')

    {{--@php $scope=true;  @endphp--}}

    <ul class="nav nav-tabs">
        @foreach(\App\Http\Models\PryOptimizeData::Type as $inx=>$val)
            <li @if($inx=="traffic") class="active" @endif ><a href="#">优化师数据分析[{{$val}}]</a></li>
        @endforeach

        <li id="seoItemLi"><a href="#">引擎力seo</a></li>
        <li><a href="#">年度分析总结</a></li>
        <li><a href="#">社交推广</a></li>

    </ul>
    <ul class="ul-content">

        @foreach(\App\Http\Models\PryOptimizeData::Type as $inx=>$val)

            <li @if($inx=="traffic") class="active" @endif >

                <table class="my-table">
                    <caption style="font-size: 20px;font-weight: 600">固定话语</caption>
                    <thead>
                    <tr>
                        <td>
                            内容
                        </td>
                        @if($scope)
                            <td onclick="utils.addOptimizeDataScope('{{$inx}}')" style="width: 140px">
                                添加
                            </td>
                        @else
                            <td>
                                选中点击下方添加
                            </td>
                        @endif
                    </tr>
                    </thead>
                    <tbody id="{{$inx}}OptimizeDataScopeTBody">
                    @foreach($optimizeDataScopeList[$inx]??[] as $item)
                        <tr>
                            <td>
                                <input type="text" value="{{$item->content}}" class="my-input"
                                       name="optimizeDataScopeText" data-id="{{$item->id}}">
                            </td>
                            <td>
                                <input type="checkbox" name="optimizeDataScopeCheck" style="margin-right: 5px">
                                @if($scope)
                                    <a href="javascript:;" onclick="utils.delOptimizeDataScope(this)">删除</a>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
                @if($scope)
                    <button type="button" class="btn btn-success" style="margin: 10px 0"
                            onclick="utils.saveOptimizeDataScope('{{$inx}}')">保存
                    </button>
                @endif
                <div style="font-size: 20px;font-weight: 600;margin-top: 20px">功能需求
                </div>

                <table class="you-table">
                    <thead>
                    <tr>
                        <td></td>
                        <td style="font-size: 18px;font-weight: 600" onclick="utils.addOptimizeData('{{$inx}}')">添加</td>
                    </tr>
                    </thead>
                    <tbody id="{{$inx}}OptimizeTBody">

                    @foreach($optimizeDataList[$inx]??[] as $item)
                        <tr>
                            <td><input type="text" class="my-input" style="border-style: hidden" value="{{$item->content}}" data-id="{{$item->id}}">
                            </td>
                            <td class="you-del">删除</td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>

                <div style="padding: 10px">
                    <button class="btn btn-success" type="button" onclick="utils.saveOptimizeData('{{$inx}}')">保存
                    </button>
                </div>

            </li>
        @endforeach

        <li>

            <table class="my-table">
                <caption style="font-size: 20px;font-weight: 600">固定选项</caption>
                <thead>
                <tr>
                    <td>
                        内容
                    </td>
                    <td onclick="utils.addSeoItemScope()" style="width: 140px">
                        添加
                    </td>
                </tr>
                </thead>
                <tbody id="seoItemScopeBody">
                @foreach($seoItemScopeList as $item)
                    <tr>
                        <td>
                            <input type="text" class="my-input" name="seoItemInput" value="{{$item->content}}">
                            <input type="hidden" name="seoItemId" value="{{$item->id}}">
                        </td>
                        <td>
                            <a href="javascript:;" style="margin-left: 5px" onclick="utils.delSeoItemScope(this)">删除</a>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
            @if($scope)
                <button type="button" class="btn btn-success" style="margin: 10px 0"
                        onclick="utils.saveSeoItemScope()">保存
                </button>
            @endif


            <div>
                @php  $checkedList=$seoItemSingle->checked_list??[] @endphp

                @foreach($seoItemScopeList as $item)
                    <div style="margin: 5px;background-color: #fff5d4;padding: 5px;display: inline-block">
                        <input type="checkbox" name="seo_item" value="{{$item->id}}"
                               @if(in_array($item->id,$checkedList)) checked @endif> {{$item->content}}
                    </div>
                @endforeach
            </div>

            <button class="btn btn-success" type="button" style="margin-top: 20px"
                    onclick="utils.saveSeo()">保存
            </button>
        </li>

        <li>

            <table class="my-table">
                <caption style="font-size: 20px;font-weight: 600">固定话语</caption>
                <thead>
                <tr>
                    <td>
                        内容
                    </td>
                    {{--@if($scope)--}}
                    <td onclick="utils.addAnalyzeSummaryScope()" style="width: 140px">
                        添加
                    </td>
                    {{--@else--}}
                    {{--<td>--}}
                    {{--选中点击下方添加--}}
                    {{--</td>--}}
                    {{--@endif--}}
                </tr>
                </thead>
                <tbody id="analyzeSummaryScopeTBody">
                @foreach($analyzeSummaryScopeList as $item)
                    <tr>
                        <td>
                            <input type="text" value="{{$item->content}}" class="my-input"
                                   name="analyzeSummaryScopeText" data-id="{{$item->id}}">
                        </td>
                        <td>
                            <input type="checkbox" name="analyzeSummaryScopeCheck" style="margin-right: 5px">
                            {{--@if($scope)--}}
                            <a href="javascript:;" onclick="utils.delAnalyzeSummaryScope(this)">删除</a>
                            {{--@endif--}}
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
            {{--@if($scope)--}}

            <button type="button" class="btn btn-success" style="margin: 10px 0"
                    onclick="utils.saveAnalyzeSummaryScope()">保存
            </button>
            {{--@endif--}}
            <div style="font-size: 20px;font-weight: 600;margin-top: 20px">功能需求
            </div>

            <table class="you-table">
                <thead>
                <tr>
                    <td></td>
                    <td style="font-size: 18px;font-weight: 600" onclick="utils.addAnalyzeSummary()">添加</td>
                </tr>
                </thead>
                <tbody id="analyzeSummaryTBody">

                @foreach($analyzeSummaryList as $item)
                    <tr>
                        <td><input type="text" class="my-input" value="{{$item->content}}" data-id="{{$item->id}}"></td>
                        <td class="you-del">删除</td>
                    </tr>
                @endforeach
                </tbody>
            </table>

            <div style="padding: 10px">
                {{--<button class="btn btn-success" type="button" onclick="utils.saveOptimizeData('{{$inx}}')">保存</button>--}}
                {{--utils.saveOptimizeData('{{$inx}}')--}}
                <button class="btn btn-success" type="button" onclick="utils.saveAnalyzeSummary()">保存</button>
            </div>

        </li>
        <li>
            <table class="my-table">
                <thead>
                <tr>
                    <td>facebook <input type="checkbox" name="facebook_hide"></td>
                    <td>linkedIn <input type="checkbox" name="linkedIn_hide"></td>
                    <td>twitter <input type="checkbox" name="twitter_hide"></td>
                    <td>pin <input type="checkbox" name="pin_hide"></td>
                </tr>
                </thead>
                <tbody id="socialTBody">
                @for($i=1;$i<=12;$i++)
                    <tr>
                        <td><input type="number" name="facebook" class="form-control"></td>
                        <td><input type="number" name="linkedIn" class="form-control"></td>
                        <td><input type="number" name="twitter" class="form-control"></td>
                        <td><input type="number" name="pin" class="form-control"></td>
                    </tr>
                @endfor
                </tbody>
            </table>
            <div style="padding: 10px">
                <button class="btn btn-success" type="button" onclick="utils.saveSocial()">保存
                </button>
            </div>

        </li>

    </ul>


@endsection

@section('footer_extend')
    <script src="{{asset('js/plugins/layDate-v5.0.9/laydate/laydate.js')}}"></script>
    <script>

        var utils = {

            delOptimizeDataScope: function (_this) {
                $(_this).parent().parent().remove();
            },
            addOptimizeDataScope: function (type) {
                var tbody = "#" + type + "OptimizeDataScopeTBody";

                var str = '<tr>' +
                    '<td>' +
                    '<input type="text" value=""  class="my-input" name="optimizeDataScopeText">' +
                    '</td>' +
                    '<td>' +
                    '<input type="checkbox" name="optimizeDataScopeCheck" style="margin-right: 5px">' +
                    '<a href="javascript:;" onclick="utils.delOptimizeDataScope(this)">删除</a>' +
                    '</td>' +
                    '</tr>';

                $(tbody).append(str);
            },

            saveOptimizeDataScope: function (type) {

                var dataList = [];
                var tbody = "#" + type + "OptimizeDataScopeTBody";
                $(tbody).find("[name=optimizeDataScopeText]").each(function () {
                    var val = $(this).val();
                    var id = $(this).data('id');
                    if (val.length > 0) {
                        dataList.push({
                            id: id,
                            content: val
                        })
                    }
                });

                var ajaxConfig = {
                    url: '/admin/promote-year-optimize-data-scope-save',
                    type: 'post',
                    data: {
                        dataList: dataList,
                        type: type
                    },
                    success: function (result) {


                        var resultDataList = result.data;

                        var html = '';
                        for (var i = 0; i < resultDataList.length; i++) {
                            html += '<tr>' +
                                ' <td><input type="text" value="' + resultDataList[i]['content'] + '" class="my-input" name="optimizeDataScopeText" data-id="' + resultDataList[i]['id'] + '">' +
                                '                            </td>' +
                                '                            <td>' +
                                '                            <input type="checkbox" name="optimizeDataScopeCheck" style="margin-right: 5px">' +
                                '                            <a href="javascript:;" onclick="utils.delOptimizeDataScope(this)">删除</a>' +
                                '                            </td>' +
                                '                            </tr>';
                        }
                        $(tbody).html(html);
                        layer.msg("操作成功", {icon: 6, time: 1500});

                    }
                };
                tips.ajax(ajaxConfig);
            },
            bindDate: function (that) {
                var routeTime = {
                    type: 'date',
                    elem: that
                };
                laydate.render(routeTime);
            },
            addOptimizeData: function (type) {

                var checkedScope = [];
                $("#" + type + "OptimizeDataScopeTBody tr").find("[name=optimizeDataScopeCheck]:checked").each(function () {
                    checkedScope.push($(this).parent().prev().find("input").val())
                });

                if (checkedScope.length > 0) {
                    for (var i = 0; i < checkedScope.length; i++) {
                        utils.addHtml(checkedScope[i], type);
                    }
                } else {
                    utils.addHtml("", type);
                }

            },
            addHtml: function (text, type) {
                var str = '<tr>' +
                    '<td><input type="text" class="my-input2" value="' + text + '"></td>' +
                    '<td class="you-del">删除</td>' +
                    '</tr>';

                $("#" + type + "OptimizeTBody").append(str)

            },
            saveOptimizeData: function (type) {
                var dataList = [];
                var tbody = "#" + type + "OptimizeTBody";

                $(tbody).find("input").each(function () {
                    var val = $(this).val();
                    var id = $(this).data('id');
                    if (val.length > 0) {
                        dataList.push({
                            content: val,
                            id: id
                        })
                    }
                });
                var ajaxConfig = {
                    url: '/admin/promote-year-optimize-data-save/sites/' + "{{$siteId}}",
                    type: 'post',
                    data: {
                        dataList: dataList,
                        type: type
                    },
                    success: function (result) {
                        var resultDataList = result.data;

                        var html = '';
                        for (var i = 0; i < resultDataList.length; i++) {
                            html += '<tr>' +
                                '<td><input type="text" class="my-input" value="' + resultDataList[i]['content'] + '" data-id="' + resultDataList[i]['id'] + '"></td>' +
                                '<td class="you-del">删除</td>' +
                                '</tr>';
                        }
                        $(tbody).html(html);
                        layer.msg("操作成功", {icon: 6, time: 1500});
                    }
                };
                tips.ajax(ajaxConfig);
            },

            saveSocial:function(){
                var facebook=[],twitter=[],linkedIn=[],pin=[];
                $("#socialTBody").find("[name=facebook]").each(function () {
                    facebook.push($(this).val());
                });
                $("#socialTBody").find("[name=twitter]").each(function () {
                    twitter.push($(this).val());
                });
                $("#socialTBody").find("[name=linkedIn]").each(function () {
                    linkedIn.push($(this).val());
                });
                $("#socialTBody").find("[name=pin]").each(function () {
                    pin.push($(this).val());
                });


                var ajaxConfig = {
                    url: '/admin/promote-year-social-save/sites/' + "{{$siteId}}",
                    type: 'post',
                    data: {
                        facebook: facebook,
                        linkedIn: linkedIn,
                        twitter: twitter,
                        pin: pin,
                        facebookHide: $("[name=facebook_hide]").prop('checked') ? 1 : 0,
                        linkedInHide: $("[name=linkedIn_hide]").prop('checked') ? 1 : 0,
                        twitterHide: $("[name=twitter_hide]").prop('checked') ? 1 : 0,
                        pinHide: $("[name=pin_hide]").prop('checked') ? 1 : 0
                    }
                };
                tips.ajax(ajaxConfig);
            },
            addSeoItemScope: function () {
                var str = '<tr>' +
                    '<td><input type="text" class="my-input" name="seoItemInput" value=""> <input type="hidden" name="seoItemId" value="0">' +
                    ' </td>' +
                    '  <td>' +
                    ' <a href="javascript:;" style="margin-left: 5px" onclick="utils.delSeoItemScope(this)">删除</a>' +
                    ' </td>' +
                    '</tr>';

                $("#seoItemScopeBody").append(str)
            },
            delSeoItemScope: function (_this) {
                $(_this).parent().parent().remove()
            },
            saveSeoItemScope: function () {
                var dataList = [];
                $("#seoItemScopeBody tr").each(function () {
                    var seoItemInput = $(this).find("[name=seoItemInput]").val();
                    var seoItemId = $(this).find("[name=seoItemId]").val();

                    if (seoItemInput.length > 0) {
                        dataList.push({
                            content: seoItemInput,
                            seoItemId: seoItemId
                        })
                    }
                });
                var ajaxConfig = {
                    url: '/admin/promote-year-seo-item-scope-save',
                    type: 'post',
                    data: {
                        dataList: dataList
                    },
                    success: function (result) {

                        var config = {
                            url: "/admin/promote-year-seo-item-scope",
                            success: function (result) {
                                var resultDataList = result.data;
                                var str = '';
                                for (var i = 0; i < resultDataList.length; i++) {
                                    str += '<tr>' +
                                        '<td><input type="text" class="my-input" name="seoItemInput" value="' + resultDataList[i]['content'] + '"> <input type="hidden" name="seoItemId" value="' + resultDataList[i]['id'] + '">' +
                                        ' </td>' +
                                        '  <td>' +
                                        ' <a href="javascript:;" style="margin-left: 5px" onclick="utils.delSeoItemScope(this)">删除</a>' +
                                        ' </td>' +
                                        '</tr>';
                                }
                                $("#seoItemScopeBody").html(str);
                                layer.msg("操作成功", {icon: 6, time: 1500});
                            }
                        };
                        tips.ajax(config)
                    }
                };
                tips.ajax(ajaxConfig);
            },
            saveSeo: function () {
                var checkedItems = [];
                $("[name=seo_item]:checked").each(function () {
                    checkedItems.push($(this).val())
                });

                var ajaxConfig = {
                    url: '/admin/promote-year-seo-item-save/sites/' + "{{$siteId}}",
                    type: 'post',
                    data: {checked_list: checkedItems}
                };
                tips.ajax(ajaxConfig);
            },

            delAnalyzeSummaryScope: function (_this) {
                $(_this).parent().parent().remove();
            },
            addAnalyzeSummaryScope: function () {

                var str = '<tr>' +
                    '<td>' +
                    '<input type="text" value=""  class="my-input" name="analyzeSummaryScopeText">' +
                    '</td>' +
                    '<td>' +
                    '<input type="checkbox" name="analyzeSummaryScopeCheck" style="margin-right: 5px">' +
                    '<a href="javascript:;" onclick="utils.delAnalyzeSummaryScope(this)">删除</a>' +
                    '</td>' +
                    '</tr>';

                $("#analyzeSummaryScopeTBody").append(str);
            },

            saveAnalyzeSummaryScope: function () {

                var dataList = [];
                var tbody = "#analyzeSummaryScopeTBody";
                $(tbody).find("[name=analyzeSummaryScopeText]").each(function () {
                    var val = $(this).val();
                    var id = $(this).data('id');
                    if (val.length > 0) {
                        dataList.push({
                            id: id,
                            content: val
                        })
                    }
                });

                var ajaxConfig = {
                    url: '/admin/promote-year-analyze-summary-scope-save',
                    type: 'post',
                    data: {
                        dataList: dataList
                    },
                    success: function (result) {


                        var resultDataList = result.data;

                        var html = '';
                        for (var i = 0; i < resultDataList.length; i++) {
                            html += '<tr>' +
                                ' <td><input type="text" value="' + resultDataList[i]['content'] + '" class="my-input" name="analyzeSummaryScopeText" data-id="' + resultDataList[i]['id'] + '">' +
                                '                            </td>' +
                                '                            <td>' +
                                '                            <input type="checkbox" name="analyzeSummaryScopeCheck" style="margin-right: 5px">' +
                                '                            <a href="javascript:;" onclick="utils.delAnalyzeSummaryScope(this)">删除</a>' +
                                '                            </td>' +
                                '                            </tr>';
                        }
                        $(tbody).html(html);
                        layer.msg("操作成功", {icon: 6, time: 1500});

                    }
                };
                tips.ajax(ajaxConfig);
            },

            addAnalyzeSummary: function () {

                var checkedScope = [];
                $("#analyzeSummaryScopeTBody tr").find("[name=analyzeSummaryScopeCheck]:checked").each(function () {
                    checkedScope.push($(this).parent().prev().find("input").val())
                });

                if (checkedScope.length > 0) {
                    for (var i = 0; i < checkedScope.length; i++) {
                        utils.addAnalyzeHtml(checkedScope[i]);
                    }
                } else {
                    utils.addAnalyzeHtml("");
                }

            },
            addAnalyzeHtml: function (text) {
                var str = '<tr>' +
                    '<td><input type="text" class="my-input2" value="' + text + '"></td>' +
                    '<td class="you-del">删除</td>' +
                    '</tr>';

                $("#analyzeSummaryTBody").append(str)

            },
            saveAnalyzeSummary: function () {
                var dataList = [];
                var tbody = "#analyzeSummaryTBody";

                $(tbody).find("input").each(function () {
                    var val = $(this).val();
                    var id = $(this).data('id');
                    if (val.length > 0) {
                        dataList.push({
                            content: val,
                            id: id
                        })
                    }
                });
                var ajaxConfig = {
                    url: '/admin/promote-year-analyze-summary-save/sites/' + "{{$siteId}}",
                    type: 'post',
                    data: {
                        dataList: dataList
                    },
                    success: function (result) {
                        var resultDataList = result.data;

                        var html = '';
                        for (var i = 0; i < resultDataList.length; i++) {
                            html += '<tr>' +
                                '<td><input type="text" class="my-input" value="' + resultDataList[i]['content'] + '" data-id="' + resultDataList[i]['id'] + '"></td>' +
                                '<td class="you-del">删除</td>' +
                                '</tr>';
                        }
                        $(tbody).html(html);
                        layer.msg("操作成功", {icon: 6, time: 1500});
                    }
                };
                tips.ajax(ajaxConfig);
            }
        };
        $(".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")
        });

        $(document).on('click', '.you-del', function () {
            $(this).parent().remove();
        });

    </script>
@endsection