@extends('crudbooster::admin_template')

@push("head")
    <!-- Dependencies -->
    <link rel="stylesheet" href="{{ asset('/vendor/libs/datatables/datatables.css') }}">
    <style>
        .panel-heading{
            padding: 8px 15px;
        }
        div.dataTables_wrapper div.dataTables_processing {
            color: #ffcb00 !important;
        }
    </style>
    <link rel="stylesheet" href="{{ asset('/css/application.css') }}">


@endpush
@push('bottom')
    <script src="{{ asset('/vendor/libs/datatables/datatables.js') }}"></script>
    <script src="{{ asset('/js/tables_datatables.js') }}"></script>
    <script type="text/javascript">
        $(document).ready( function () {
            $('#jobs_list').DataTable({
                language: {
                    sEmptyTable: `{{trans('action.table_norecord')}}`,
                    sLoadingRecords: `{{ trans('action.table_loading')}}`,
                    sProcessing: `{{trans('action.table_pleasewait')}}`,
                    sSearch: `{{trans('action.search')}}`,
                    sZeroRecords: `{{trans('action.table_nodata')}}`,
                    oPaginate: {
                        sFirst: `{{trans('action.table_first')}}`,
                        sPrevious: `{{trans('action.table_back')}}`,
                        sNext: `{{trans('action.table_next')}}`,
                        sLast: `{{ trans('action.table_latest')}}`,
                    }
                },
                search: {
                    return: true,
                },
                button: false,
                searching: true,
                scrollY: true,
                scrollX: false,
                scrollCollapse: true,
                processing: true,
                serverSide: true,
                ajax: "{{ route('mailrecord.get-jobs-records') }}",
                columns: [
                    {
                        orderable: false, 
                        searchable: false,
                        render: function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    {
                        data: 'queue',
                        name: 'queue',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'payload',
                        name: 'payload',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'attempts',
                        name: 'attempts',
                        orderable: false,
                        searchable: false
                    },{
                        data: 'reserved_at',
                        name: 'reserved_at',
                        orderable: false,
                        searchable: false
                    },{
                        data: 'available_at',
                        name: 'available_at',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'created_at',
                        name: 'created_at',
                        orderable: false,
                        searchable: false
                    },
                ]
            });

            setInterval(function () {
                var table = $('#jobs_list').DataTable();
                        table.ajax.reload() 
            },10000);

        });
    </script>

@endpush

@section('content')
<!-- Your html goes here -->
<div class='panel panel-default'>
    <div class='panel-heading eap-box'>
        <div class="dark-color">
            <h4 style="display: inline-block;"><b>Available Jobs In QUEUE</b></h4>
            <div class="pull-right" style="top: 5px; position: relative">
                <a href="{{ route('mailrecord.get-failed-jobs-records') }}"><button class="btn btn-primary"><b><i class="fa fa-clock-o">&nbsp;</i>Failed Jabs Lists</b></button></a>
            </div>
        </div>
    </div>

    <div class='panel-body'>
        <div class="card-datatable table-responsive">
            <table class="table table-striped table-bordered" id="jobs_list">
                <thead>
                    <tr>
                        <th>SNo</th>
                        <th>Queue</th>
                        <th>Payload</th>
                        <th>Attempts</th>
                        <th>Reserved at</th>
                        <th>Available at</th>
                        <th>Created at</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>


@endsection