@extends('layout')
@section('content')
<div class="page-content">
    <div class="container-fluid">

        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                    <h4 class="mb-sm-0 font-size-18">Articles</h4>

                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="javascript: void(0);">Home</a></li>
                            <li class="breadcrumb-item active">Articles</li>
                        </ol>
                    </div>

                </div>
            </div>
        </div>
        <!-- end page title -->

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header" >
                        <h4 class="card-title" style="float: left;">Articles List</h4>
                        <a href="{{url('article/add')}}" type="button" class="btn btn-success waves-effect waves-light" style="float: right;">Add Article</a>
                    </div>
                    <div class="card-body">
                        <table id="datatable-article" class="table table-bordered dt-responsive" style="min-width: 100%;">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>Title</th>
                                <th style="width: 150px">Category</th>
                                <th style="width: 150px">Action</th>
                            </tr>
                            </thead>


                           <tbody>

                           </tbody>
                        </table>

                    </div>
                </div>
            </div> <!-- end col -->
        </div> <!-- end row -->
    </div> <!-- container-fluid -->
</div>
<!-- End Page-content -->

    <script>
        $(document).ready(function (e) {
            $('#datatable-article').DataTable({
                "ordering": false,
                "pageLength": 10,
                "serverSide": true,
                "processing": true,
                "order": [[0, "asc"]],
                "ajax": {
                    url: '{{url('/article/data')}}',
                    type: 'POST',
                    "data": function (d) {
                        d._token = "{{ csrf_token() }}";
                    },
                    beforeSend: function(){
                        // Here, manually add the loading message.
                        $('#tableTransaction > tbody').html(
                            '<tr class="odd">' +
                            '<td valign="top" colspan="2" class="dataTables_empty">Loading&hellip;</td>' +
                            '</tr>'
                        );
                    }
                },

                "scrollX": true,
                // "scrollCollapse": true,
                "paging": true,

            });
        });
    </script>
@endsection