@extends('admin::layouts.plane')
@section('page_heading') {{$title}} @endsection
@section('content')

<div class="col-lg-12">
    <div class="panel panel-default filterable">
        <div class="panel-heading">
            <div class="panel-title">{{$title}}</div>
        </div>
        <div class="panel-body">
            <div class="row" style="margin-bottom: 20px;">
                <div class="col-md-12">
                    <div class="form-group">
                        <label style="margin-right: 20px;">Job Type:</label>
                        <label class="radio-inline">
                            <input type="radio" name="job_type" value="pending" checked> Pending Jobs
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="job_type" value="failed"> Failed Jobs
                        </label>
                    </div>
                </div>
            </div>
            
            <div class="table-responsive">
                <table id="jobs-table" class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>Job ID</th>
                            <th>School ID</th>
                            <th>School Name</th>
                            <th>Session</th>
                            <th>Class</th>
                            <th>Section</th>
                            <th>Board</th>
                            <th>Admission No</th>
                            <th>Job Class</th>
                            <th>Queue</th>
                            <th>Attempts</th>
                            <th>Created At</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Data will be loaded via AJAX -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Exception Modal -->
<div class="modal fade" id="exceptionModal" tabindex="-1" role="dialog" aria-labelledby="exceptionModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="exceptionModalLabel">Job Exception</h4>
            </div>
            <div class="modal-body">
                <pre id="exceptionModalBody" style="white-space: pre-wrap; word-break: break-word; max-height: 60vh; overflow: auto;"></pre>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@stop

@section('styles')
<style>
    .radio-inline {
        margin-right: 15px;
    }
    .radio-inline input[type="radio"] {
        margin-right: 5px;
    }
</style>
@stop

@section('scripts')
<script type="text/javascript">
    var table;

    function b64EncodeUnicode(str) {
        try {
            return btoa(unescape(encodeURIComponent(str || '')));
        } catch (e) {
            return btoa('');
        }
    }

    function b64DecodeUnicode(str) {
        try {
            return decodeURIComponent(escape(atob(str || '')));
        } catch (e) {
            return '';
        }
    }
    
    function loadJobs() {
        var jobType = $('input[name="job_type"]:checked').val();
        
        if (!table) {
            return;
        }
        
        table.clear();
        
        $.ajax({
            url: "{{ route('jobs-status.get-jobs') }}",
            type: 'GET',
            data: {
                type: jobType
            },
            success: function(response) {
                if (response.success && response.data) {
                    $.each(response.data, function(index, job) {
                        var actionsHtml = '-';
                        if (job.type === 'failed') {
                            var exB64 = b64EncodeUnicode(job.exception || '');
                            actionsHtml = ''
                                + '<button type="button" class="btn btn-info btn-sm view-exception" data-ex="' + exB64 + '">View Exception</button> '
                                + '<button type="button" class="btn btn-warning btn-sm retry-job" data-id="' + job.id + '">Retry</button>';
                        }
                        
                        table.row.add([
                            job.id || 'N/A',
                            job.school_id || 'N/A',
                            job.school_name || 'N/A',
                            job.session || 'N/A',
                            job.class || 'N/A',
                            job.section || 'N/A',
                            job.board || 'N/A',
                            job.admission_no || 'N/A',
                            job.job_class || 'Unknown',
                            job.queue || 'default',
                            job.attempts || '0',
                            job.created_at || 'N/A',
                            actionsHtml
                        ]);
                    });
                    table.draw();
                } else {
                    alert('Error loading jobs: ' + (response.error || 'Unknown error'));
                }
            },
            error: function(xhr) {
                var errorMsg = 'Failed to load jobs';
                if (xhr.responseJSON && xhr.responseJSON.error) {
                    errorMsg = xhr.responseJSON.error;
                }
                alert('Error: ' + errorMsg);
            }
        });
    }
    
    $(document).ready(function() {
        // Initialize DataTable
        table = $('#jobs-table').DataTable({
            "serverSide": false,
            "paging": true,
            "searching": true,
            "ordering": true,
            "info": true,
            "autoWidth": false,
            "pageLength": 25,
            "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
            "order": [[0, "desc"]],
            "columnDefs": [
                { "orderable": false, "targets": 12 } // Actions column
            ]
        });

        // Initial load
        loadJobs();

        // Handle radio button change
        $(document).on('change', 'input[type="radio"][name="job_type"]', function() {
            loadJobs();
        });

        // Handle retry button click
        $(document).on('click', '.retry-job', function() {
            var jobId = $(this).data('id');
            var button = $(this);
            
            if (!confirm('Are you sure you want to retry this failed job?')) {
                return;
            }

            button.prop('disabled', true).text('Retrying...');

            $.ajax({
                url: "{{ url('admin/jobs-status/retry') }}/" + jobId,
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        alert('Job has been retried successfully');
                        loadJobs();
                    } else {
                        alert('Error: ' + (response.error || 'Failed to retry job'));
                        button.prop('disabled', false).text('Retry');
                    }
                },
                error: function(xhr) {
                    var errorMsg = 'Failed to retry job';
                    if (xhr.responseJSON && xhr.responseJSON.error) {
                        errorMsg = xhr.responseJSON.error;
                    }
                    alert('Error: ' + errorMsg);
                    button.prop('disabled', false).text('Retry');
                }
            });
        });

        // Handle view exception click
        $(document).on('click', '.view-exception', function() {
            var exB64 = $(this).attr('data-ex') || '';
            var exceptionText = b64DecodeUnicode(exB64);
            $('#exceptionModalBody').text(exceptionText || 'No exception text available.');
            $('#exceptionModal').modal('show');
        });
    });
</script>
@stop