@extends('backend.layouts.app')

@section('title') Projects @endsection



@section('content')
    @section('toolbar')
        @include('backend.layouts.nav', ['current' => 'Dashboard'])
    @endsection

    <!--begin::Card-->
    <div class="card">
        <!--begin::Card header-->
        <div class="card-header border-0 pt-6">
            <!--begin::Card title-->
            <div class="card-title">
                Projects
            </div>
            <!--begin::Card title-->
            <!--begin::Card toolbar-->
            <div class="card-toolbar">
                @if(Auth::user()->can('add project'))
                    <a href='{{ route('admin.projects.create') }}' class='btn btn-dark btn-sm'><i class="fas fa-plus"></i> New Project</a>
                @endif
            </div>
            <!--end::Card toolbar-->
        </div>
        <!--end::Card header-->
        <!--begin::Card body-->
        <div class="card-body pt-0">
            <!--begin::Table-->
            <div class="table-responsive">
                <table id="data-table" class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <!--end::Table-->
        </div>
        <!--end::Card body-->
    </div>
    <!--end::Card-->

@endsection

@section('scripts_lib')
<script>
    $('#data-table').DataTable({
        autoFill: true,
        processing: true,
        serverSide: true,
        search: {
            "caseInsensitive": true,
            "smart": true
        },
        ajax: {
            url: "{!! route('admin.projects.getData') !!}",
            type: "POST",
            dataType: "JSON"
        },
        columns: [
            {data: 'id', 'searchable': true, 'orderable': true, 'exportable': true, 'printable': true},
            {data: 'name', 'searchable': true, 'orderable': true, 'exportable': true, 'printable': true},
            {data: 'action', 'searchable': false, 'orderable': false, 'exportable': false, 'printable': false}
        ],
        dom: '<"d-flex justify-content-between"<f>>rt<"d-flex justify-content-between"<"d-flex align-items-center"<"me-3" l><i>><p>>'
    });
</script>
@endsection