@extends('admin.layouts.app')
@section('title','View All Blog')
@section('content')
    <div class="container-fluid">
        <div class="d-flex justify-content-between py-4">
            <p class="page-title">Blog</p>
            <a class="btn btn-sm btn-success" href="{{route('blog.create')}}">Add New</a>
        </div>
        <div class="card rounded-0">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped table-sm dataTable">
                        <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Name</th>
                            <th scope="col">Department</th>
                            <th scope="col">Category</th>
                            <th scope="col">Blog Date</th>
                            <th scope="col">Thumbnail</th>
                            <th scope="col">Status</th>
                            <th scope="col">Created By</th>
                            <th scope="col">Action</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        $(function (){
            var t = $('.dataTable').DataTable({
                processing: true,
                serverSide: true,
                order:[[0,'desc']],
                ajax: "{{route('get-blog')}}",
                columns: [
                    { data: 'id',orderable:false },
                    { data: 'name' },
                    { data: 'dpt_id',orderable:false },
                    { data: 'bCateID',orderable:false },
                    { data: 'b_date' },
                    { data: null },
                    { data: 'status', orderable: false},
                    { data: 'created_by' },
                    { data: null}
                ],
                columnDefs: [
                    {
                        render: function ( data, type, row,meta ) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        },
                        searchable:false,
                        orderable:true,
                        targets: 0
                    },{
                        render: function (data,type,row,meta) {
                            var messageSliderImage ='{{ asset('front/images/new-giu/blog/')}}/'+data.img;
                            return '<img src="' + messageSliderImage + '" height="40" width="40" alt="No Image Uploaded"/>';
                        },
                        searchable:false,
                        orderable:false,
                        targets: 5
                    },{
                        render: function (data,type,row,meta) {
                            if(data == 1){
                                return '<span class="badge bg-success">Active</span>';
                            } else {
                                return '<span class="badge bg-danger">Inactive</span>';
                            }
                        },
                        searchable:false,
                        orderable:false,
                        targets: 6
                    },{
                        render: function (data,type,row,meta) {
                            var edit ='{{ route("blog.edit", ":id") }}';
                            edit = edit.replace(':id', data.id);
                            var del ='{{ route("blog.delete", ":id") }}';
                            del = del.replace(':id', data.id);
                            var sdel ='{{ route("blog.destroy", ":id") }}';
                            sdel = sdel.replace(':id', data.id);
                            var restore ='{{ route("blog.restore", ":id") }}';
                            restore = restore.replace(':id', data.id);
                            var activate ='{{ route("blog.activate", ":id") }}';
                            activate = activate.replace(':id', data.id);

                            let preview = "{{ route('blog.preview', ':slug' )}}";
                            preview = preview.replace(':slug', row['slug']);

                            let seo = "{{ route('blog.seo', ':id' )}}";
                            seo = seo.replace(':id', row.id);

                            // For deleted blogs
                            if(data.deleted_at == '1'){
                                return '<div class="d-flex">' +
                                    @can('blog-restore')
                                        '<a href="'+restore+'" class="btn btn-sm btn-warning mx-2">Restore</a>'+
                                    @endcan
                                        @can('blog-delete')
                                        '<form action="'+del+'" method="POST">'+
                                    '<input type="hidden" name="_token" value="{{ csrf_token() }}">'+
                                    '<input type="hidden" name="_method" value="delete" />'+
                                    '<button type="submit" class="btn btn-sm btn-danger mx-2" onclick="return confirm(`Are you sure?`)"><i class="fa fa-trash"></i></button>'+
                                    '</form>'+
                                    @endcan
                                        '</div>';
                            }

                            // For active blogs (not deleted)
                            if(data.deleted_at == '0'){
                                var activateBtn = '';
                                @can('blog-activate')
                                if(data.status == 1){
                                    activateBtn = '<a href="' + activate + '" class="btn btn-sm btn-secondary mx-1 mb-1" title="Inactive">INACTIVE</a>';
                                } else {
                                    activateBtn = '<a href="' + activate + '" class="btn btn-sm btn-success mx-1 mb-1" title="Active">ACTIVE</a>';
                                }
                                @endcan

                                    return '<div class="d-flex flex-wrap">' +
                                    @can('blog-preview')
                                        '<a href="' + preview + '" target="_blank" class="btn btn-sm btn-info mx-1 mb-1" title="Preview">PREVIEW</a>' +
                                    @endcan
                                        activateBtn +
                                    @can('blog-seo')
                                        '<a href="' + seo + '" class="btn btn-sm btn-primary mx-1 mb-1 fw-bold" title="SEO">SEO</a>' +
                                    @endcan
                                        @can('blog-edit')
                                        '<a href="'+edit+'" class="btn btn-sm btn-warning mx-1 mb-1" title="Edit">EDIT</a>'+
                                    @endcan
                                        @can('blog-softdelete')
                                        '<form action="'+sdel+'" method="POST" class="d-inline">'+
                                    '<input type="hidden" name="_token" value="{{ csrf_token() }}">'+
                                    '<input type="hidden" name="_method" value="delete" />'+
                                    '<button type="submit" class="btn btn-sm btn-danger mx-1 mb-1" title="Delete" onclick="return confirm(`Are you sure?`)">DELETE</button>'+
                                    '</form>'+
                                    @endcan
                                        '</div>';
                            }
                        },
                        searchable:false,
                        orderable:false,
                        targets: -1
                    }
                ]
            });
        });
    </script>
@endpush