@if($jobsData->count())

    <div class="table-responsive">
        <table class="table table-striped table-bordered table-hover dataTable dtr-inline reporttable" role="grid"
               aria-describedby="sample_1_info" style="width: 100%;">
            <thead>
            <tr>
                <th> {{ _t('settings.sl_no') }}</th>
                <th> {{ _t('settings.created_at') }}</th>
                <th> {{ _t('settings.queue_job') }}</th>
                <th> {{ _t('settings.status') }}</th>
                <th> {{ _t('settings.updated_at') }}</th>
                <th> {{ _t('settings.action') }}</th>
            </tr>
            </thead>
            <tbody>
            @foreach($jobsData as $job)
                <tr>
                    <td>{{ ($jobsData->currentPage() * $jobsData->perPage()) - $jobsData->perPage() + $loop->iteration }}</td>
                    <td> {{ date($job->created_at) }} </td>
                    <td> {{ $job->name }} </td>
                    <td> {{ $job->jobStatus->title }} </td>
                    <td> {{ date($job->updated_at)}} </td>

                    <td> @if($job->jobStatus->slug == 'failed')
                            <button class="btn ladda-button blue retry-btn"
                                    data-id="{{$job->id}}">{{ _t('settings.retry') }}</button>
                        @endif
                        @if($job->jobStatus->slug == 'failed')
                            <button class="btn ladda-button red dlt-btn"
                                    data-id="{{$job->id}}">{{ _t('settings.delete') }}</button>
                        @endif
                        @if($job->jobStatus->slug == 'completed' && $job->downloadLink )
                            <a href="{{ $job->downloadLink }}" class="btn ladda-button green" {{ _t('settings.download') }}>{{ _t('settings.download') }}</a>
                        @endif
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
    <div class="paginationWrapper">
        {!! $jobsData->links() !!}
    </div>
@else
    {{ _t('settings.no_queue_jobs') }}
@endif
<style>
    tr td button.btn {
        padding: 4px !important;
        display: inline-block !important;
        margin: 0px !important;
    }
</style>
<script type="text/javascript">

    $('.paginationWrapper .pagination li a').click(function (e) {
        e.preventDefault();
        var route = $(this).attr('href');
        fetchQueueJobsList(route);
    });


    $(function () {
        $('.retry-btn').on('click', function () {
            const id = $(this).data('id');
            $.post("{{ scopeRoute('queue.retry') }}", {
                id: id
            }, function (res) {
                setTimeout(function () {
                    fetchQueueJobsList();
                }, 3000);
            }).fail(function () {
                toastr.error('Retry failed');
            });
        });

        $('.dlt-btn').on('click', function () {
            const id = $(this).data('id');
            $.post("{{ scopeRoute('queue.delete') }}", {
                id: id
            }, function (res) {
                fetchQueueJobsList();
            }).fail(function () {
                toastr.error('Delete failed');
            });
        });
        $('.download-btn').on('click', function () {
            const id = $(this).data('id');
            $.post("{{ scopeRoute('queue.download') }}", {id: id}, function (response) {
                window.open(response.link);
            }).fail(function () {
                toastr.error('Download failed');
            });
        });
    });

</script>