@extends('backend.layouts.app')
@section('content')
    <div class="card shadow mb-4">
        <div class="card-body">
            <div class="row justify-content-between mb-2">
                <h5 class="text-primary ml-2 heading"><i class="fas fa-fw fa-list"></i>
                    {{ __('Sections') }}</h5>
                @can('homesections.create')
                    <a href="{{ route('admin.homesections.create') }}" class="btn btn-outline-info context-menu-one"><i
                            class="fas fa-plus" aria-hidden="true"></i>
                        {{ __('Add Section') }}</a>
                @endcan
            </div>
            @include('backend.layouts.alert')
            <div class="table-responsive">
                <table id="datalist" data-delete="{{ route('admin.delete.homesections') }}"
                    style="user-select:none;cursor: pointer;" name="homesections"
                    class="text-dark table nowrap homesections table-hover" width="100%">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Title</th>
                            <th>Status</th>
                            <th>Ord</th>
                            <th>UpdatedAt</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection
@push('styles')
    <link rel="stylesheet" href="{{ asset('assets/dashboard/vendor/jquery-contextmenu/dist/jquery.contextMenu.min.css') }}">
@endpush

@push('scripts')
    <script>
        window.contextMenu = @json($contextmenu);

        $("#datalist").DataTable({
            order: [
                [3, "asc"]
            ],
            rowId: "id",
            orderable: false,
            stateSave: true,
            processing: true,
            serverSide: true,
            select: {
                style: "multi",
                selector: "td:nth-child(1)",
            },
            ajax: location.href,
            createdRow: function(row) {
                $(row).addClass("row-context-menu");
            },
            columns: [{
                    data: "id",
                    name: "id"
                },
                {
                    data: "title",
                    name: "title"
                },
                {
                    data: "active",
                    name: "active",
                    searchable: false
                },
                {
                    data: "ord",
                    name: "ord",
                    searchable: false
                },
                {
                    data: "updated_at",
                    name: "updated_at"
                },
            ],
            columnDefs: [{
                width: 15,
                targets: [0, -1, -2, -3],
            }, ],
        });
    </script>
    <script src="{{ asset('assets/dashboard/vendor/jquery-contextmenu/dist/jquery.contextMenu.min.js') }}"></script>
    <script src="{{ asset('assets/dashboard/vendor/jquery-contextmenu/dist/jquery.ui.position.js') }}"></script>
    <script src="{{ asset('assets/dashboard/js/context.js') }}"></script>
@endpush