@extends('manager.layout.master')

@section('head')
    <style>
        .batch-bar { display: none; padding: 8px 15px; background: #E8F5E9; border: 1px solid #81C784; border-radius: 3px; margin-bottom: 10px; }
        .batch-bar .selected-count { color: #2E7D32; font-weight: bold; }
    </style>
@endsection

@section('body')
    <blockquote class="layui-elem-quote">
        回收站 &nbsp;&nbsp;
        <small style="color:#999;">已删除的政策资讯会保留在这里，可恢复或彻底删除</small>
    </blockquote>

    {{-- 工具栏 --}}
    <div class="my-btn-box">
        <span class="fl">
            <a class="layui-btn" href="{{route('articleList')}}">
                <i class="layui-icon">&#xe65c;</i>返回政策资讯列表
            </a>
            <a class="layui-btn layui-btn-normal" id="pageReload" title="刷新">
                <i class="layui-icon layui-icon-refresh-1"></i> 刷新
            </a>
        </span>
        <span class="fr">
            <form class="layui-form layui-form-pane" action="" method="get">
                <span class="layui-form-label">搜索条件：</span>
                <div class="layui-input-inline">
                    <input type="text" name="keyword" value="{{$request->keyword}}" autocomplete="off" placeholder="标题/发布人/来源" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <select name="category_id" lay-search>
                        <option value="">全部分类</option>
                        @foreach($categoryTree as $vo)
                            <option value="{{$vo->id}}" @if($request->category_id == $vo->id) selected @endif>{{$vo->name}}</option>
                            @if($vo->children)
                                @foreach($vo->children as $child)
                                    <option value="{{$child->id}}" @if($request->category_id == $child->id) selected @endif>&nbsp;&nbsp;├─ {{$child->name}}</option>
                                @endforeach
                            @endif
                        @endforeach
                    </select>
                </div>
                <button type="submit" class="layui-btn mgl-20">
                    <i class="layui-icon">&#xe615;</i> 查询
                </button>
            </form>
        </span>
    </div>

    {{-- 批量操作栏 --}}
    <div class="batch-bar" id="batchBar">
        <span>已选择 <strong class="selected-count" id="selectedCount">0</strong> 条政策资讯</span>
        <span style="margin-left:20px;">
            <a class="layui-btn layui-btn-sm layui-btn-normal" onclick="batchRestore()">批量恢复</a>
            <a class="layui-btn layui-btn-sm layui-btn-danger" onclick="batchForceDel()">彻底删除</a>
            <a class="layui-btn layui-btn-sm" onclick="clearBatch()">取消选择</a>
        </span>
    </div>

    {{-- 表格 --}}
    <table class="layui-table" lay-skin="line">
        <thead>
            <tr>
                <th width="40">
                    <input type="checkbox" id="batchCheckAll" lay-skin="primary" title="">
                </th>
                <th>封面图</th>
                <th>标题</th>
                <th>分类</th>
                <th>发布人</th>
                <th class="hidden-xs">来源</th>
                <th class="hidden-xs">浏览</th>
                <th>状态</th>
                <th class="hidden-xs">添加人</th>
                <th class="hidden-xs">删除时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            @forelse($list as $vo)
                <tr>
                    <td>
                        <input type="checkbox" lay-skin="primary" value="{{$vo->id}}" class="batch-check">
                    </td>
                    <td>
                        @if($vo->img && $vo->img->url)
                            <img src="{{$vo->img->url}}" style="width:50px;height:35px;" class="layer-photos-demo">
                        @else
                            <span style="color:#ccc;">无</span>
                        @endif
                    </td>
                    <td>{{$vo->title}}</td>
                    <td>{{$vo->category->name ?? '-'}}</td>
                    <td>{{$vo->author ?: '-'}}</td>
                    <td class="hidden-xs">{{$vo->source ?: '-'}}</td>
                    <td class="hidden-xs">{{$vo->view_count}}</td>
                    <td>
                        @if($vo->status == 1)
                            <span style="color:#5FB878;">正常</span>
                        @else
                            <span style="color:#FF5722;">禁用</span>
                        @endif
                    </td>
                    <td class="hidden-xs">{{$vo->manager->username ?? '-'}}</td>
                    <td class="hidden-xs">{{$vo->delete_time}}</td>
                    <td style="white-space:nowrap;">
                        <a class="layui-btn layui-btn-sm layui-btn-normal" onclick="restoreOne('{{$vo->id}}')">恢复</a>
                        <a class="layui-btn layui-btn-sm layui-btn-danger" onclick="forceDelOne('{{$vo->id}}')">彻底删除</a>
                    </td>
                </tr>
            @empty
                <tr><td colspan="11" style="text-align:center;color:#999;">回收站为空</td></tr>
            @endforelse
        </tbody>
    </table>

    @include('manager.include.pageBtn')
@stop

@section('js')
    <script>
        layer.photos({photos: 'tbody', anim: 5});

        // ==================== 批量操作 ====================

        function updateBatchBar() {
            var checked = $('.batch-check').filter(':checked');
            var count = checked.length;
            $('#selectedCount').text(count);
            count > 0 ? $('#batchBar').fadeIn() : $('#batchBar').fadeOut();
        }

        $('#batchCheckAll').on('click', function () {
            var checked = this.checked;
            $('.batch-check').each(function () { this.checked = checked; });
            layui.form.render('checkbox');
            updateBatchBar();
        });

        $(document).on('click', '.batch-check', function () {
            setTimeout(function () {
                var $all = $('.batch-check');
                var $checked = $all.filter(':checked');
                $('#batchCheckAll').prop('checked', $all.length === $checked.length && $all.length > 0);
                layui.form.render('checkbox');
                updateBatchBar();
            }, 0);
        });

        function getSelectedIds() {
            var ids = [];
            $('.batch-check:checked').each(function () { ids.push($(this).val()); });
            return ids;
        }

        function clearBatch() {
            $('#batchCheckAll').prop('checked', false);
            $('.batch-check').prop('checked', false);
            layui.form.render('checkbox');
            updateBatchBar();
        }

        // 单篇恢复
        function restoreOne(id) {
            layer.confirm('确认恢复该政策资讯吗？', {btnAlign: 'c'}, function () {
                var index = layer.load(2);
                $.ajax({
                    type: 'POST',
                    url: '{{route('articleRestore')}}',
                    data: {id: id, _token: '{{csrf_token()}}'},
                    dataType: 'json',
                    success: function (data) {
                        layer.close(index);
                        if (data.status == 1) {
                            layer.msg(data.message, {icon: 1, time: 1500}, function () { location.reload(); });
                        } else {
                            layer.msg(data.message, {icon: 0, time: 1500});
                        }
                    },
                    error: function () {
                        layer.close(index);
                        layer.msg('操作失败，请重试', {icon: 0, time: 1500});
                    }
                });
            });
        }

        // 单篇彻底删除
        function forceDelOne(id) {
            layer.confirm('彻底删除后不可恢复，确认删除该政策资讯吗？', {btnAlign: 'c'}, function () {
                var index = layer.load(2);
                $.ajax({
                    type: 'POST',
                    url: '{{route('articleForceDel')}}',
                    data: {id: id, _token: '{{csrf_token()}}'},
                    dataType: 'json',
                    success: function (data) {
                        layer.close(index);
                        if (data.status == 1) {
                            layer.msg(data.message, {icon: 1, time: 1500}, function () { location.reload(); });
                        } else {
                            layer.msg(data.message, {icon: 0, time: 1500});
                        }
                    },
                    error: function () {
                        layer.close(index);
                        layer.msg('操作失败，请重试', {icon: 0, time: 1500});
                    }
                });
            });
        }

        // 批量恢复
        function batchRestore() {
            var ids = getSelectedIds();
            if (ids.length === 0) {
                layer.msg('请先选择政策资讯', {icon: 0, time: 1500});
                return;
            }
            layer.confirm('确认恢复选中的 ' + ids.length + ' 条政策资讯吗？', {btnAlign: 'c'}, function () {
                var index = layer.load(2);
                $.ajax({
                    type: 'POST',
                    url: '{{route('articleRestore')}}',
                    data: {ids: ids, _token: '{{csrf_token()}}'},
                    dataType: 'json',
                    success: function (data) {
                        layer.close(index);
                        if (data.status == 1) {
                            layer.msg(data.message, {icon: 1, time: 1500}, function () { location.reload(); });
                        } else {
                            layer.msg(data.message, {icon: 0, time: 1500});
                        }
                    },
                    error: function () {
                        layer.close(index);
                        layer.msg('操作失败，请重试', {icon: 0, time: 1500});
                    }
                });
            });
        }

        // 批量彻底删除
        function batchForceDel() {
            var ids = getSelectedIds();
            if (ids.length === 0) {
                layer.msg('请先选择政策资讯', {icon: 0, time: 1500});
                return;
            }
            layer.confirm('彻底删除后不可恢复，确认删除选中的 ' + ids.length + ' 条政策资讯吗？', {btnAlign: 'c'}, function () {
                var index = layer.load(2);
                $.ajax({
                    type: 'POST',
                    url: '{{route('articleForceDel')}}',
                    data: {ids: ids, _token: '{{csrf_token()}}'},
                    dataType: 'json',
                    success: function (data) {
                        layer.close(index);
                        if (data.status == 1) {
                            layer.msg(data.message, {icon: 1, time: 1500}, function () { location.reload(); });
                        } else {
                            layer.msg(data.message, {icon: 0, time: 1500});
                        }
                    },
                    error: function () {
                        layer.close(index);
                        layer.msg('操作失败，请重试', {icon: 0, time: 1500});
                    }
                });
            });
        }
    </script>
@stop