@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 () {
            $('#failed_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-failed-jobs-records') }}",
                columns: [
                    {
                        orderable: false, 
                        searchable: false,
                        render: function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    {
                        data: 'connection',
                        name: 'connection',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'queue',
                        name: 'queue',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'payload',
                        name: 'payload',
                        orderable: false,
                        searchable: false
                    },{
                        data: 'exception',
                        name: 'exception',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'failed_at',
                        name: 'failed_at',
                        orderable: false,
                        searchable: false
                    },
                    {data: 'action', name: 'action', orderable: false, searchable: false}
                ]
            });

        });
    </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>Failed Jobs In QUEUE</b></h4>
            <div class="pull-right" style="top: 5px; position: relative">
                <a href="{{route('mailrecord.get-jobs-records')}}"><button class="btn btn-primary"><b><i class="fa fa-clock-o">&nbsp;</i> Job List</b></button></a>
            </div>
        </div>
    </div>

    <div class='panel-body'>
        <div class="card-datatable table-responsive">
            <table class="table table-striped table-bordered" id="failed_jobs_list">
                <thead>
                    <tr>
                        <th>SNo</th>
                        <th>Connection</th>
                        <th>Queue</th>
                        <th>Payload</th>
                        <th>Exception</th>
                        <th>Failed at</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>


@endsection