@extends('layouts.base')

@section('content')
    <div class="w1200 m0a">
        <div class="rightlist">
            <div class="right-titpos">
                <ul class="add-snav">
                    <li class="active"><a href="#">文章管理</a></li>
                </ul>
            </div>

            <div class="panel panel-info">
                <div class="panel-body">
                    <form action="" method="post" class="form-horizontal" role="form" id="form1">
                        <div class="form-group">
                            <!--<label class="col-xs-12 col-sm-3 col-md-1 control-label">筛选</label>-->
                            <div class="col-sm-11 col-xs-12">
                                <div class="row row-fix tpl-category-container">
                                    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
                                        <select class="form-control tpl-category-parent" name="search[category_id]">
                                            <option value="">全部分类</option>
                                            @foreach ($categorys as $category)
                                                <option value="{{ $category['id'] }}" @if ($search['category_id'] == $category['id']) selected="selected" @endif>{{ $category['name'] }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-xs-12 col-sm-8 col-lg-9">
                                        <input class="form-control" name="search[keyword]" id="" type="text" value="{{ $search['keyword'] }}" placeholder="请输入文章标题关键字进行检索（选择文章分类减小检索范围）">
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="form-group">
                            <div class="col-xs-12 col-sm-2 col-lg-2">
                                <button class="btn btn-success" id="search"><i class="fa fa-search"></i> 搜索</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <form action="{{yzWebUrl('plugin.article.manager.article.deleted')}}" method="post" id="form2">
                <a style="color: #FFFFFF" class='btn btn-primary' href="{{ yzWebUrl('plugin.article.manager.article-vue.info') }}"><i class="fa fa-plus"></i> 添加文章</a>
                <button id="batch_del_sub" class="btn btn-primary" onclick="return batchDel()"><i class="fa fa-minus"></i>批量删除</button>
                <div class="panel-heading">
                    文章列表 (总数: <span id="$articlenum">{{ $articles['total'] }}</span>)
                </div>
                <div class="panel-body">
                    <table class="table" style="">
                        <thead>
                        <tr>
                            <td style="width:50px; text-align:center;"><input id='select_all' onclick="selectAll()" type="checkbox"> 全选</td>
                            <th style="width:40px; text-align:center;">ID</th>
                            <th style="width:100px;">文章标题</th>
                            <th style="width:80px;">文章分类</th>
                            <th style="width:50px;">文章关键字</th>
                            <th style="width:80px;">文章创建时间</th>
                            <th style="width:50px;">真实阅读量</th>
                            <th style="width:50px;">真实点赞量</th>
                            <th style="width:70px;">数据统计</th>
                            <th style="width:40px;">评论</th>
                            <th style="width:50px;">状态</th>
                            <th style="width:100px; text-align:center;">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        @if (empty($categorys))
                            <tr class="noarticle">
                                <td style="text-align: center; line-height: 100px;" colspan="8">亲~您还没有添加文章分类哦~您可以点击 “<a class="nav-add" href="{{ yzWebUrl('plugin.article.manager.category.add') }}">添加文章分类</a>”</td>
                            </tr>
                        @elseif (empty($articles['data']))
                            <tr class="noarticle">
                                <td style="text-align: center; line-height: 100px;" colspan="8">亲~您还没有添加文章哦~您可以尝试 ↙ 左下角的 “<a class="nav-add" href="{{ yzWebUrl('plugin.article.manager.article-vue.info') }}">添加文章</a>”</td>
                            </tr>
                        @else
                            @foreach ($articles['data'] as $article)
                                <tr cid="{{ $article['id'] }}" cname="{{ $article['title'] }}">
                                    <td style="text-align:center;"><input class="ids_check" type="checkbox" name="ids[]" value="{{$article['id']}}"/></td>
                                    <td style="text-align:center;">{{ $article['id'] }}</td>
                                    <td>{{ $article['title'] }}</td>
                                    <td>{{ $article['belongs_to_category']['name'] }}</td>
                                    <td>{{ $article['keyword'] }}</td>
                                    <td>{{ $article['created_at'] }}</td>
                                    <td>{{ $article['read_num'] }}</td>
                                    <td>{{ $article['like_num'] }}</td>
                                    <td><a href="{{ yzWebUrl('plugin.article.manager.article.log', ['id' => $article['id']]) }}">查看记录</a></td>
                                    <td><a href="{{ yzWebUrl('plugin.article.manager.comment.index', ['id' => $article['id']]) }}">查看</a></td>
                                    <td>@if ($article['state'] == 1) <span style="color: green;">开启</span> @else 关闭 @endif</td>


                                    <td style="text-align:center;">

                                        @if($article['type'] != 1)
                                            <a href="javascript:;" data-clipboard-text="{{yzAppFullUrl('articleContent/'.$article['id'])}}" data-url="{{yzAppFullUrl('articleContent/'.$article['id'])}}" title="复制连接" class="js-clip">复制链接</a>
                                        @else
                                            <a href="javascript:;" data-clipboard-text="{{yzAppFullUrl('voiceDetail/'.$article['id'])}}" data-url="{{yzAppFullUrl('voiceDetail/'.$article['id'])}}" title="复制连接" class="js-clip">复制链接</a>
                                        @endif
                                        <a class='btn btn-default nav-edit' href="{{ yzWebUrl('plugin.article.manager.article-vue.info',['id' => $article['id']]) }}"><i class="fa fa-edit"></i></a>
                                        <a class='btn btn-default nav-del' href="{{ yzWebUrl('plugin.article.manager.article.deleted',['id' => $article['id']]) }}" onclick="return confirm('确认删除此文章吗？');return false;"><i class="fa fa-trash-o"></i></a>
                                    </td>
                                </tr>
                            @endforeach
                        @endif
                        </tbody>
                    </table>
                    {!! $pager !!}
                </div>
                <div><button id="batch_del_sub" style="display: none" type="submit" class="btn btn-success" onclick="return confirm('点击确认删除所选文章');return false;">提交批量删除</button></div>
            </form>
        </div>

    </div>
    <script language='javascript'>
        $(function () {
            $('#search').click(function () {
                $('#form1').attr('action', '{!! yzWebUrl('plugin.article.manager.article.index') !!}');
                $('#form1').submit();
            });
        });

        //触发批量删除文章
        function batchDeletion(){
            var input_ids = document.getElementsByClassName("ids_check");
        }

        function selectAll(){
            var input_ids = document.getElementsByClassName("ids_check");
            var select_all = document.getElementById('select_all');

            if(select_all.checked){
                for (i=0;i<input_ids.length;i++) {
                    input_ids[i].checked = 'checkbox';
                }
            }else{
                for (i=0;i<input_ids.length;i++) {
                    input_ids[i].checked = '';
                }
            }
        }

        function batchDel(){
            var ids = document.getElementsByClassName('ids_check');
            for(let element of ids){
                if (element.checked){
                    return true;
                }
            }
            alert('当前未选中文章ID');
            return false;
        }
    </script>
@endsection