@extends('layouts.app')

@section('title', 'Statistiche')

@section('content')
<style>
    
    .table-hover > tbody > tr:hover {
    background-color: #1ab394!important;
    color: #ffffff!important;
 
}

   .bulb {
        height: 7rem;
        width: 7rem;
        background-color: #e8e8e8;
        border-radius: 50%;
        margin: 25px auto;
        transition: background 500ms;
        border: 3px solid #cccccc;

      }

</style>
<div class="row wrapper border-bottom white-bg page-heading">
    
    <h1>Credit Check</h1>
      <ol class="breadcrumb">
                        <li>
                            <a href="/">Home</a>
                        </li>
                        <li>
                            <a>Finanze</a>
                        </li>
                        <li>
                            <a href='/finanze/creditcheck'>Credit Check</a>
                        </li>
   
                            <li class="active">
                              <strong><a>Elaborazione Massiva</a></strong>
                          </li>
                     
         </ol>
    
</div>

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row equal">
     
     <div class="ibox float-e-margins" id='contratto_form'>
                   
                    <div class="ibox-title">
                        <div class="col-md-12 no-padding">
                            <h5 ><i class="fa fa-file-excel-o" aria-hidden="true"></i>&nbsp;Caricamento tracciato xls</h5> 
                           
                        </div>
                    
                    </div>
                   

        <div class="ibox-content" id="mcont">
             <div class="sk-spinner sk-spinner-chasing-dots">
                                <div class="sk-dot1"></div>
                                <div class="sk-dot2"></div>
                    </div>
               
            <div style="display: inline-block;padding-bottom: 50px;">
                <i style="float: left;
    padding: 20px;
    font-size: xx-large;" class="fa fa-lg fa-info" aria-hidden="true"></i>
                
                <p style="margin: 0px;font-size: medium;">Caricare il tracciato delle anagrafiche da verificare.</p>
                <p style="margin: 0px;
    font-size: medium;">Se persona giuridica inserire solo partita iva,altrimenti nome,cognome e codice fiscale.</p>
                
            </div>
            <form method="POST" action="/finanze/creditcheck/elaborateMassiveJobs" enctype="multipart/form-data">
                {{ csrf_field() }}
                <div class="col-lg-12">
                    <div class="row">
                        <div class="col-md-2 text-center"></div>
                        <div class="col-md-8 text-center">

                                    <div class="fileinput fileinput-new input-group {{$errors->has('file')?'has-error':''}}" data-provides="fileinput">
                                        <div class="form-control" data-trigger="fileinput">
                                            <i class="glyphicon glyphicon-file fileinput-exists"></i>
                                            <span class="fileinput-filename"></span>
                                        </div>
                                        <span class="input-group-addon btn btn-primary btn-file" style="background:#1ab394!important;color:white;">
                                            <span class="fileinput-new">Seleziona file</span>
                                            <span class="fileinput-exists">cambia</span>
                                            <input type="file" name="file_massivo_crediti"accept="application/vnd.ms-excel"  />
                                        </span>
                                        <a href="#" class="input-group-addon btn btn-danger fileinput-exists" data-dismiss="fileinput">Cancella</a>
                                    </div>
        
                        </div>
                    <div class="col-md-2 text-center"></div>

                    </div>
                </div>
                <div class="col-lg-12 text-center">
                    <a href="/templates/template_creditCheck.xls">Non hai il template?Scaricalo</a>
                </div>
                <div class="row">
                    @if (session('status')=='FILE CARICATO CORRETTAMENTE' )
                    <div class="col-md-12 text-center" style="padding:10px;color: green">
                        <h2> <i class="fa fa-lg fa-check-circle-o" aria-hidden="true"></i> {{ session('status') }}</h2>
                    </div>
                    @elseif (session('status')=='FILE NON VALIDO!' )  
                    <div class="col-md-12 text-center" style="padding:10px;color: red">
                        <h2> <i class="fa fa-ban" aria-hidden="true"></i> {{ session('status') }}</h2>
                    </div>
                    @endif

                </div>
                <div class="row">
                    <div class="col-md-12 text-center" style="padding:60px;">
                        <button type="submit"  id="submit"  class="btn btn-primary">Carica</button>
                    </div>

                </div>



            </form> 

        </div>


     </div>
    </div>
    
    <div class="row equal">
        <div class="ibox">
            <div class="ibox-title">
                <h2>Stato elaborazione</h2>
            </div>
            <div class="ibox-content">
                <h4>elaborati &nbsp;<span id="start"> 0 </span>&nbsp;su <span id="stop"> 0 </span></h4>
                     <div class="progress progress-striped">
                                <div id="p"  style="width:0" aria-valuemax="100" aria-valuemin="0" aria-valuenow="80" role="progressbar" class="progress-bar progress-bar-warning">
                                    <span class="sr-only">40% Complete (success)</span>
                                </div>
                            </div>
        
            </div>
            
            
        </div>
   
        
    </div>

</div>
@endsection 

@section('scripts')
<script>
var toDo=[];
var responseData=[];
var start;
var stop;
function finalizeJobs(responseData)
{
        $.ajax({
                url: "/finanze/creditcheck/finalizeMassiveJobs",
                type: 'POST',
                data: {'data':responseData},
                dataType: "JSON",
                success: function (data) {
                $('#mcont').toggleClass('sk-loading');
                 toDo=[];
                 responseData=[];
                 start=0;
                 stop=0;
                 elaboraProgress();
                window.location="/finanze/creditcheck/getXls?filename="+data;
                },
                error: function (jqXHR, textStatus, errorThrown) 
                {
                    var responseText = errorThrown;
                    console.log(responseText);
                }
             
            });

}

function elaborateJobs()
{
  
  
       $.ajax({
                url: "/finanze/creditcheck/elaborateSingleMassiveJob",
                type: 'POST',
                data: toDo[0],
                dataType: "JSON",
                success: function (data) {
                    responseData.push(data);
                    toDo.shift();
                    if(toDo.length>0)
                    {
                       elaborateJobs(); 
                       start++;
                       elaboraProgress();
                    }
                    else
                    {
                        start++;
                        elaboraProgress();
                        finalizeJobs(responseData);
                    }

                },
                error: function (jqXHR, textStatus, errorThrown) 
                {
                  
                    var responseText = errorThrown;
                    console.log(responseText);
                }
             
            });
}
 $('form').submit(function( event ) {
      responseData=[];
 $('.fileinput-filename').parent().removeClass('error');
            event.preventDefault();
            var formData = new FormData($(this)[0]);
            $('#mcont').toggleClass('sk-loading');
               $.ajax({
                url: $('form').eq(1).attr('action'),
                type: 'POST',
                data: formData,
                dataType: "json",
                success: function (data) {
                if(data=="file non selezionato.")
                {
                    $('.fileinput-filename').parent().addClass('error');
                    return;
                }
                toDo=data;
                start=0;
                stop=data.length;
              
               elaborateJobs();

                },
                error: function (jqXHR, textStatus, errorThrown) 
                {
                  
                    var responseText = errorThrown;
                    console.log(responseText);
                    $('#mcont').toggleClass('sk-loading');
                },
                cache: false,
                contentType: false,
                processData: false
            });

    });
    
    
      function elaboraProgress()
    {
          //calcolo percentuale elaborato
          var progress=(start*100)/stop;
          progress=!progress?0:progress;
          //$('#perc_comp').html(progress.toFixed(2)+'%');
          //console.log(progress);
            $('#start').html(start);
           $('#stop').html(stop);
          $('#p').css('width',progress+'%').attr('aria-valuenow', progress);
    }
 </script>
 
 
 @endsection