@extends('admin.layout.app')

@section('content')
    <div class="content-wrapper">

        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1 class="pull-left">
                {{ $title }} List
            </h1>
            <span class="pull-right">
                <a href="{{ route($route.'create') }}" class="btn btn-success"> <i class="fa fa-plus"></i> Add new</a>
            </span>
            <p>&nbsp;</p>

        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    @include('flash')
                    <div class="box box-info">
                        <!-- /.box-header -->
                        <div class="box-body   ">
                            {{--<div class="table-responsive">--}}

                            <table id="datatable1" class="table table-bordered table-striped ">
                                <thead>
                                <tr>
                                   
                                    <th>Image</th>                                    <th>Description</th>
                                    <th>Created At</th>
                                    <th width="100px">Action</th>
                                </tr>
                                </thead>
                                <tbody>
                               
                                </tbody>
                                <tfoot>
                                <tr>
									
                                    <th>Image</th>                                    <th>Description</th>
                                    <th>Created At</th>
                                    <th>Action</th>
                                </tr>
                                </tfoot>
                            </table>
                            {{--</div>--}}
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->
    </div>
    @endsection

    @section('js')
            <!-- DataTables -->
    <script type="text/javascript">
        $(document).ready(function () {
            var oTable = $('#datatable1').DataTable({
				//responsive: true,
				//autoWidth: false,
                stateSave: false,
                processing: true,
                serverSide: true,
                //scrollY: 300,
                ajax: '{{ url('admin/gallery')  }}',
                columns: [
                    {data: 'image', name: 'image'},                    {data: 'description', name: 'description'},
                    {data: 'created_at', name: 'created_at'},
                    {data: 'action', name: 'action', searchable: false, orderable : false,className : 'text-center'},
                ]
            });
           
            $("#datatable1").on('click', '.data-delete', function () {
                var obj = $(this);
                var id = $(this).attr('data-id');
                if (confirm("Are you sure to Delete Data?")) {
                    $.ajax({
                        type: "DELETE",
                        url: "{{ url('admin/gallery')  }}/" + id,
                        data: {
                            id: id,
                            _token: "{{ csrf_token() }}"
                        },
                        dataType: 'json',
                        beforeSend: function () {
                            $(this).attr('disabled', true);
                            $('.alert .msg-content').html('');
                            $('.alert').hide();
                        },
                        success: function (resp) {
                            oTable.ajax.reload();
                            alert(resp.message);
                        },
                        error: function (e) {
                            alert('Error: ' + e);
                        }
                    });
                }
            });
        });
    </script>
@endsection