@extends('layouts.app')
@section('title','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-events.create')}}">Add New</a>
        </div>
        <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">Date</th>
                    <th scope="col">Created By</th>
                    <th scope="col">Updated By</th>
                    <th scope="col">Banner</th>
                    <th scope="col">Action</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
@endsection
@push('js')
    <script>
        $(function () {
            var t = $('.dataTable').DataTable({
                processing: true,
                serverSide: true,
                order: [[0, 'desc']],
                ajax: "{{route('getBlog')}}",
                columns: [
                    {data: 'id'},
                    {data: 'name'},
                    {data: 'date'},
                    {data: 'created_by'},
                    {data: 'updated_by'},
                    {data: 'banner'},
                    {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) {
                            if (data) {
                                return '<img src="{{ asset('front/images/blog') }}/' + data + '" height="60" alt="Banner">';
                            } else {
                                return '-';
                            }
                        },
                        targets: 5,
                        orderable: false,
                        searchable: false
                    },

                    {
                        render: function (data, type, row, meta) {

                            // Restore route
                            var restore = '{{ route("blog-events.restore", ":id") }}';
                            restore = restore.replace(':id', data.id);
                            // Delete route
                            var del = '{{ route("blog-events.delete", ":id") }}';
                            del = del.replace(':id', data.id);
                            // Edit route
                            var edit = '{{ route("blog-events.edit", ":id") }}';
                            edit = edit.replace(':id', data.id);
                            // Destroy route
                            var sdel = '{{ route("blog-events.destroy", ":id") }}';
                            sdel = sdel.replace(':id', data.id);

                            let preview = "{{ route('blogs.preview', ':id' )}}";
                            preview = preview.replace(':id', data.id);


                            if (data.deleted_at == '1') {
                                return '<div class="d-flex">' +
                                    // Restore Button
                                     @can('blog-restore')
                                        '<a href="' + restore + '" class="btn btn-sm btn-warning mx-2"><i class="fa fa-undo"></i></a>' +
                                     @endcan
                                    // Delete Button
                                        @can('blog-delete')
                                        '<form action="' + sdel + '" 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></i></button>' +
                                    '</form>' +
                                     @endcan

                                        '</div>';
                            }
                            if (data.deleted_at == '0') {
                                return '<div class="d-flex">' +

                                    @can('blog-preview')
                                        '<a href="' + preview + '" target="_blank" class="btn btn-sm mx-2" style="background-color:#28a745; color:#fff; border:none;"><i class="fa fa-eye"></i></a> ' +
                                    @endcan
                                    // Edit Button
                                    @can('blog-edit')
                                        '<a href="' + edit + '" class="btn btn-sm btn-warning mx-2"><i class="fa fa-edit"></i></a>' +
                                   @endcan
                                    // Destroy Button
                                    @can('blog-softdelete')
                                        '<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>';
                            }
                        },
                        searchable: false,
                        orderable: false,
                        targets: -1
                    }
                ]
            });
        });
    </script>
@endpush