@extends('admin.layouts.master')
@section('breadcrumb')
    <section class="content-header">
        <h1>
            Failed Jobs
        </h1>

    </section>
@stop

@section('content')


    <div class="row">
        <div class="col-md-12">
            <div class="portlet light bordered">
                <div class="portlet-body">
                    <div class="table-scrollable">
                        <button id="retry-all-jobs" class="btn btn-primary" style="float: right; margin-right: 10px;">Retry All</button>
                        <button id="delete-all-jobs" class="btn btn-danger" style="float: right; margin-right: 10px;">Delete All</button>

                        <table class="table table-striped table-bordered table-hover table-checkable order-column dataTable no-footer" id="sample_1" role="grid" aria-describedby="sample_1_info">
                            <thead>
                            <tr role="row">

                            <tr >
                                <th> #</th>
                                <th> Connection</th>
                                <th> Queue</th>
                                <th> Exception</th>
                                <th> Payload</th>
                                <th> failed at</th>
                                <th> Action </th>
                            </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header" style="justify-content:flex-start;">
                    <h4 class="modal-title">Job Payload</h4>
                    <div style="position: absolute; top: 10px; right: 5px;">
                        <button type="button" class="close custom-close" data-dismiss="modal">&times;</button>
                    </div>
                </div>
                <div class="modal-body" style="max-height: 400px; overflow-y: auto; white-space: pre-wrap;"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>


    <div id="myModal2" class="modal fade" role="dialog">
        <div class="modal-dialog modal-dialog-centered">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header" style="justify-content:flex-start;">
                    <h4 class="modal-title"> Job Exception</h4>
                    <div style="position: absolute; top: 10px; right: 5px;">
                        <button type="button" class="close custom-close" data-dismiss="modal">&times;</button>
                    </div>
                </div>
                <div class="modal-body" style="max-height: 85%; overflow-y: auto; white-space: pre-wrap;">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>
@stop
@section('last_scripts')
    <script type="text/javascript">
        $(document).ready(function () {
            $("#myModal").on('show.bs.modal', function (e) {
                var triggerLink = $(e.relatedTarget);
                var payload = unescape(triggerLink.data("payload"));
                $(this).find(".modal-body").html(payload !== "null" ? '<pre>' + payload + '</pre>' : '{}');
            });
            $("#myModal2").on('show.bs.modal', function (e) {
                var triggerLink = $(e.relatedTarget);
                var exception = unescape(triggerLink.data("exception"));
                $(this).find(".modal-body").html(exception !== "null" ? '<pre>' + exception + '</pre>' : '{}');
            });
            var table = $('#sample_1').DataTable(
                {
                    processing: true,
                    serverSide: true,
                    "searching": true,
                    "paging": true,
                    'bSortable': true,
                    "bInfo": true,
                    iDisplayLength: 10,
                    "lengthChange": true,
                    "autoWidth": false,
                    responsive: true,
                    sAjaxSource: '{{ route('failed_jobs_listing_ajax') }}',
                    "columns": [
                        {
                            "data": "serial_no"
                        },
                        {
                            "data": "connection"
                        },
                        {
                            "data": "queue"
                        },
                        {
                            "data": "exception",
                            "orderable": false,
                            "render": function (data, type, row) {
                                return '<a style="color: blue; text-decoration: underline; cursor: pointer;" data-toggle="modal" data-exception="' + escape(row.exception) + '" data-target="#myModal2">view</a>';
                            }
                        },
                        {
                            "data": "payload",
                            "orderable": false,
                            "render":
                                function (data, type, row) {
                                    return '<a style="color: blue; text-decoration: underline; cursor: pointer;" data-toggle="modal" data-payload="' + escape(row.payload) + '" data-target="#myModal">view</a>';
                                }
                        },
                        {
                            "data": "failed_at"
                        },
                        {
                            "data": "actions"
                        },


                    ],
                    columnDefs: [
                        { width: '10%', targets: 0 },
                        { width: '10%', targets: 1 },
                        { width: '10%', targets: 2 },
                        { width: '10%', targets: 3 },
                        { width: '15%', targets: 4 },
                        { width: '10%', targets: 5 },
                        { width: '10%', targets: 6 }
                    ],
                    // columnDefs: [
                    //     { responsivePriority: 1, targets: 4 },
                    //     { responsivePriority: 2, targets: 5 }
                    // ],
                    order: [[4, "desc"]],
                    language: {
                        paginate: {
                            next: '&#8594;', // or '→'
                            previous: '&#8592;' // or '←'
                        },
                        "emptyTable": "No Failed Jobs",
                        "sSearch": '<i class="fa fa-search" aria-hidden="true"></i>',
                        searchPlaceholder: 'Search by store name or domain.',
                        processing: "<small>Loading failed jobs...</small>",
                        "sLengthMenu": '<span class="per-page-label cc">per page</span><select class="per_page_length form-control input-sm input-xsmall input-inline">' +
                            '<option value="10">10</option>' +
                            '<option value="30">30</option>' +
                            '<option value="50">50</option>' +
                            '<option value="100">100</option>' +
                            '</select>'
                    },
                    drawCallback: function () {
                        var pageInfo = this.api().page.info();
                        var multiPage = pageInfo.pages > 1;
                        $('#sample_1_paginate').toggle(multiPage);
                        if (!multiPage && pageInfo.recordsTotal == pageInfo.recordsDisplay) {
                            $('#sample_1_info').text('Showing all ' + pageInfo.recordsTotal + ' entries');
                        }
                        if (pageInfo.recordsTotal == 0) {
                            $('#sample_1_info').text('');
                        }
                    },
                    // highlight ordered column

                    "oSearch": {"sSearch": "{{session('shopSearch')}}"},
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        $.getJSON(sSource, aoData, function (json) {
                            $('#sample_1').show();
                            fnCallback(json)
                        });
                    }, "fnServerParams": function (aoData) {
                        aoData.push(
                            {"name": "plan", "value": $('#connector_channel_id :selected').val()},
                            {"name": "store_status", "value": $('#webhook_status :selected').val()},
                            {"name": "installed_at", "value": $('#trigger_at').val()}
                        )
                    },
                    "dom": ' <"search-filter"f><"length-dropdown"l>rt<"bottom"ip><"clear">'
                });
            $('#connector_channel_id,#webhook_status,#trigger_at').on('change', function () {
                table.draw();
            });
            $('#clearLogFilters').on('click', function () {
                $('#webhook_status').val('');shop
                $('#trigger_at').val('');
                $("#connector_channel_id").val('');
                table.search("").draw();
            });


            $('#sample_1 tbody').on('click', 'button.retry-job', function () {
                var jobId = $(this).data('id');

                swal({
                    title: 'Are you sure?',
                    text: "You want to retry this job?",
                    icon: 'warning',
                    showCloseButton: true,
                    showDenyButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, retry it!'
                }).then((result) => {
                    if (result) {
                        $.ajax({
                            url: '{{ route('retry_failed_job') }}',
                            method: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}',
                                id: jobId
                            },
                            success: function(response) {
                                if (response.success) {
                                    callSwalWithHTML('Retried', 'Job retried successfully.', 'success');
                                    setTimeout(function() {
                                        table.ajax.reload();
                                    }, 3000); // 3-second delay before reloading the table
                                } else {
                                    callSwalWithHTML('Error', 'Failed to retry the job.', 'error');
                                }
                            },
                            error: function() {
                                callSwalWithHTML('Error', 'An error occurred while retrying the job.', 'error');
                            },
                            timeout: 15000
                        }).fail(function(jqXHR, textStatus) {
                            if (textStatus === 'timeout') {
                                callSwalWithHTML('Error', 'Please wait... Slow connection!', 'error');
                            }
                        });
                    }
                });
            });

            $('#retry-all-jobs').on('click', function () {
                swal({
                    title: 'Are you sure?',
                    text: "This will retry all failed jobs.",
                    icon: 'warning',
                    showCloseButton: true,
                    showDenyButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, retry all!'
                }).then((result) => {
                    if (result) {
                        $.ajax({
                            url: '{{ route('retry_all_failed_jobs') }}',
                            type: 'POST',
                            data: {
                                _method: 'POST',
                                _token: "