@extends('layouts.nifty')

@section('content')

<style>

#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 0%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}
</style>

        <section id="content" class="content">
            <div class="content__header content__boxed overlapping">
                <div class="content__wrap">

                    <!-- Breadcrumb -->
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fa fa-home"></i></a></li>
                            <li class="breadcrumb-item" aria-current="page">Employee 201 Files</li>
                            <li class="breadcrumb-item"><a href="{{ route('admin.employees.index') }}">List of Employees</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Import CSV File</li>
                        </ol>
                    </nav>
                    <!-- END : Breadcrumb -->

                    <h1 class="page-title mb-0 mt-2">Import CSV File</h1>
                    
                    <p>Click browse to import CSV File</p>
                    

                </div>

            </div>
            <div class="content__boxed">
                <div class="content__wrap">

                    <form action="{{ route('saveimportemployees') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <!-- Table with toolbar -->
                            <div class="card card-info">
                              <div class="card-header">
                                <h3 class="card-title">Import Status Information</h3>
                              </div>
                              <!-- /.card-header -->
                              <!-- form start -->
                              
                                    <div class="card-body">
                                      <div class="form-group" id="data">
                                          <div class="form-group row">
                                            <label for="suffix" class="col-sm-2 col-form-label">Total Jobs:</label>
                                            <div class="col-sm-2">
                                              <input type="text" class="form-control form-control-sm" id="total" name = "total" value="{{ $jobbatches->total_jobs }}" style="border: none">
                                            </div>
                                            <label for="suffix" class="col-sm-2 col-form-label">Pending Jobs:</label>
                                            <div class="col-sm-2">
                                              <input type="text" class="form-control form-control-sm" id="pending" name = "pending" value="{{ $jobbatches->pending_jobs }}" style="border: none">
                                            </div> 

                                          </div> 

                                          

                                                                                    <label for="file">Downloading Progress:  </label>
                                          <div id="myProgress">
                                            <div id="myBar"></div>
                                          </div>
                                          <input type="hidden" id="percentage" name="percentage" value="{{ $percentage }}">

                                          

                                      </div>                                      
                                    </div>
                                    <!-- /.card-body -->
       
                                <!-- /.card-footer -->
                    
                            </div>
                     </form>
                    <!-- END : Table with toolbar -->

                </div>
            </div>

            <!-- FOOTER -->
            @include('partials.footer')
            <!-- END - FOOTER -->
        </section>




<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/jquery-3.5.1.js') }}"></script>

<script>
$(document).ready(function(){
    myFunction();
});
</script>
 
<script>
var myVar = setInterval(myFunction, 1000);

function myFunction() {

      //setInterval(function(){
          $.ajax({
            url: "{{ route("empbatchstatus2") }}",
            success: function( response ) {
              var jobs, id, total, pending;
              jobs = response;
              total = jobs.total_jobs;
              pending = jobs.pending_jobs;
              //alert(id);
              document.getElementById('total').value = total;
              document.getElementById('pending').value = pending;
              var value = total - pending;
              var percentage = (value / total) * 100;
              var percentage2 = Math.round(percentage);
              document.getElementById('percentage').value = percentage;
              // update div

              var elem = document.getElementById("myBar");
              elem.style.width = percentage + "%";
              elem.innerHTML = percentage2  + "%";



              if (pending == 0) {
                  window.location = '{{ url('deleteemployeebatch') }}';
                  clearInterval(myVar);
              }


            }
          });
      //},1000);





}



</script>


@endsection