@extends('admin.layout.master')

@section('title', 'Students Insert Progress')

@section('body')
<div class="page-header d-xl-flex d-block">
    <div class="page-leftheader">
        <h4 class="page-title">Import Student Progress</h4>
    </div>
</div>

<div class="row">
    <div class="col-xl-12 col-md-12 col-lg-12">
        <div class="card mb-lg-0">
            <div class="card-header border-bottom-0">
                <h3 class="card-title">Progress</h3>
            </div>
            <div class="card-body">
                <div class="progress-div">
                    <span id="status"></span>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%"></div>
                    </div>
                    {{ $batchId }}
                </div>
                <div class="mt-5 show_hide_import_error">
                    <div>
                        <span>Successfully Imported: <b class="show_success_count">0</b></span>
                    </div>
                    <div>
                        <span class="text-color-red">Error Processed: <b class="show_error_count">0</b></span>
                    </div>
                    <div>
                        <a href="#" class="text-color-anchor" id="error_file">File Containing error <i class="feather feather-external-link sidemenu_icon"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('script')
<script type="text/javascript">
    var batchId = '{{ $batchId }}'

    function recursiveAjaxCall() {
        $.ajax({
            url: "{{ route('admin.job_process') }}?batch_id=" + batchId
            , method: 'POST'
            , data: {
                _token: '{{ csrf_token() }}'
            }
            , success: function(response) {
                console.log(response)
                if (response.status == true) {

                    const totalJobs = response.totalJobs;
                    const pendingJobs = response.pendingJobs;
                    const failedJobs = response.failedJobs;

                    const completedJobs = totalJobs - (pendingJobs + failedJobs);

                    const progressPercentage = (completedJobs / totalJobs) * 100;

                    $('.progress-bar').css('width', progressPercentage + '%').attr('aria-valuenow', progressPercentage);
                    $('#status').text('Processing... ' + progressPercentage.toFixed(2) + '% Completed');
                    if (pendingJobs > 0) {
                        setTimeout(recursiveAjaxCall, 1000);
                    } else {
                        $('.progress-bar').css('width', '100%').attr('aria-valuenow', progressPercentage);
                        $('#status').text('100% Completed');
                        $.ajax({
                            url: "{{ route('admin.job_process_response') }}?batch_id=" + batchId
                            , method: 'POST'
                            , data: {
                                _token: '{{ csrf_token() }}'
                            }
                            , success: function(response) {
                                if (response.status == true) {
                                    custom_message('success', response.message)
                                } else {
                                    $('.show_success_count').html(response.count_insert)
                                    $('.show_error_count').html(response.total_error)
                                    $('#error_file').attr('href', response.href)
                                    $('.show_hide_import_error').show()
                                }
                            }
                        });
                    }
                } else {
                    custom_message('error', response.message)
                }
            }
            , error: function() {
                console.error('An error occurred');
                setTimeout(recursiveAjaxCall, 1000);
            }
        });
    }

    $(document).ready(function() {
        $('.sending-progress').removeClass('hidden');
        recursiveAjaxCall();
        $('.show_hide_import_error').hide()
    });

</script>
@endpush