@extends('admin.layouts.app')

@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-flex align-items-center justify-content-between">
                        <h4 class="mb-0 font-size-18">Service List</h4>

                        <div class="page-title-right">
                            <a href="{{ url('admin/service/create') }}" class="btn btn-primary">Add New</a>

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

            <!-- start message title -->
            <div class="row">
                <div class="col-12">
                    @include('admin/layouts/flash-message')
                    @include('admin/layouts/validation-message')
                </div>
            </div>     
            <!-- end message title -->


            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <table id="data-table" class="table  dt-responsive nowrap w-100 data-table">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Image</th>
                                        <th>Name</th>
                                        <th>Slug</th>
                                        <th>Description</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                            
                                <tbody>
                                </tbody>
                            </table>

                        </div> <!-- end card body-->
                    </div> <!-- end card -->
                </div><!-- end col-->
            </div>
            <!-- end row-->

        </div> <!-- container-fluid -->
    </div>
<!-- end main content-->

@endsection 

@section('custom_script')
<script>
$(document).ready(function() {
    $('#data-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ url('admin/service') }}",
        columns: [
            { data: 'id', name: 'id' },
            { data: 'image', name: 'image', orderable: false, searchable: false },
            { data: 'name', name: 'name' },
            { data: 'slug', name: 'slug' },
            { data: 'description', name: 'description' },
            { data: 'action', name: 'action', orderable: false, searchable: false }
        ]
    });
});
</script>
@endsection