@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>
                    {{ __('Supports') }}</h5>
            </div>
            @include('backend.layouts.alert')
            <div class="table-responsive">
                <table id="datalist" data-delete="{{ route('admin.delete.flags') }}" style="cursor: pointer;" name="flags"
                    class="text-dark table flags table-hover" width="100%">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Content</th>
                            <th>User</th>
                            <th>Subject</th>
                            <th>Body</th>
                            <th>CreatedAt</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        $('#datalist').DataTable({
            order: [
                [0, 'desc']
            ],
            rowId: 'id',
            orderable: false,
            stateSave: true,
            processing: true,
            serverSide: true,
            select: {
                style: "multi",
                selector: 'td:nth-child(1)',
            },
            ajax: window.location.toString(),
            createdRow: function(row) {
                $(row).addClass('row-context-menu');
            },
            columns: [{
                    data: 'id',
                    name: 'id'
                },
                {
                    data: 'content',
                    name: 'content'
                },
                {
                    data: 'user',
                    name: 'user_id'
                },
                {
                    data: 'subject',
                    name: 'subject'
                },
                {
                    data: 'body',
                    name: 'body'
                },

                {
                    data: 'created_at',
                    name: 'created_at'
                }
            ],
            columnDefs: [{
                width: 15,
                targets: [0, -1],
            }]
        });
    </script>
    <script>
        window.contextMenu = @json($contextmenu);
    </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

@push('styles')
    <link rel="stylesheet" href="{{ asset('assets/dashboard/vendor/jquery-contextmenu/dist/jquery.contextMenu.min.css') }}">
@endpush