@extends('layout')
@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card mt-4 px-4">
                    <div class="card-body">   
                        <h1 style="color: rgb(40, 40, 195);">Jobs</h1>  
                        <button class="btn-primary mt-3" id="job-pause" style="{{ $jobQueue->status == 0 ? 'display: block;' : 'display: none;' }}">Pause All Jobs</button>
                        
                        <button class="btn-success mt-3" id="job-resume"  style="{{ $jobQueue->status == 1 ? 'display: block;' : 'display: none;' }}">Resume Jobs</button>       
                        </div>
                        <table id="mDataTableList" class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Job Id</th>
                                    <th>PostCode</th>
                                    <th>Pages Scrapped</th>
                                    <th>Total Pages</th>
                                    <th >Job Status</th>
                                    <th>Total Records</th>
                                    <th >Last Fetched</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
              </div>
        </div>
    </div>
  
</section>
@endsection
<!-- Include jQuery -->
<script src="{{ asset('assets/plugins/jquery/jquery.min.js') }}"></script>

<script>
 $(document).ready(function(){
    table1 = $("#mDataTableList").dataTable({
            "responsive": true,
            //stateSave: true,
            "lengthChange": true,
            "autoWidth": false,
            "ordering": true,
           "order": [[0,1, "DESC"]],
            "columnDefs": [{
                "orderable": false,
                "targets": [-2,-3,-4,-5]
            }],
            language: {
                searchPlaceholder: "Search..."
            },
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "{{ url('/get-jobs') }}",
                "dataType": "json",
                "type": "GET",
                "data": {
                    _token: "{{ csrf_token() }}"
                }
            },
            "columns": [{
                    "data": "id"
                },
                {
                    "data": "postcode"
                },
                {
                    "data":"pages"
                },
                {
                    "data":"total_pages"
                },
                {
                 "data": "status"
                },
                {
                    "data":"count"
                },
                {
                    "data": "updated_at"
                }
            ],
        })
})
$(function(){
    $('#job-pause').on('click', function() {
    $.ajax({
        url: "{{ route('post.cron') }}", 
        method: 'POST',
        data: { action: 'stop', _token : "{{ csrf_token() }}" },
        success: function(response) {
            console.log(response.status);
            $("#job-resume").css('display', 'block');
            $("#job-pause").css('display', 'none');
            alert(response.status);
        },
        error: function(xhr) {
            console.error("Error stopping cron:", xhr.responseText);
        }
    });
});

$('#job-resume').on('click', function() {
    $.ajax({
        url: "{{ route('post.cron') }}", 
        method: 'POST',
        data: { action: 'start',_token : "{{ csrf_token() }}" },
        success: function(response) {
            
            $("#job-resume").css('display', 'none');
            $("#job-pause").css('display', 'block');
            alert(response.status);
        },
        error: function(xhr) {
            console.error("Error starting cron:", xhr.responseText);
        }
    });
});

})

</script>