@extends('layouts.app')
@section('title', 'Tools')

@section('content')
<div class="wrapper wrapper-content animated fadeInRight">
    
    <!--********************* CARICAMENTO FILE XLS -->
    <div class="row equal">
        <div class="col-lg-12">
            

            <div class="ibox float-e-margins">
                
                <!--********************* INTESTAZIONE -->
                <div class="ibox-title">
                    <h5>Motivi di Contatto</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                    </div>
                </div>
 
                <!--********************* SELEZIONE FILE -->
                <div class="ibox-content" id="carica">

                        <div class="sk-spinner sk-spinner-wave">
                            <div class="sk-rect1"></div>
                            <div class="sk-rect2"></div>
                            <div class="sk-rect3"></div>
                            <div class="sk-rect4"></div>
                            <div class="sk-rect5"></div> 
                        </div>                   
                        <h2>
                            Carica il file in formato .xls con la lista dei "Motivi di Contatto"<br>
                        </h2>
                        <p>
                            Non hai il template?<a href="/templates/templateMotiviDiContatto.xls"> Scaricalo</a>
                        </p>

                    
                    <!--********************* CARICAMENTO DATI -->                      
                    <form action="/postIndexRichiesteStatoMotiviDiContatto" method="post" enctype="multipart/form-data"> 
                        <input type="hidden" name="_token" value="{{ Session::token() }}" />
                        <div class="row">
                            <div class="col-md-12">     
                            </div>
                        </div>
                        <div class="col-md-12"> 
                           <div class="row">    
                                <br><br>
                                   <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 file</span>
                                               <input type="file" name="file_gestionale"  accept=".xls" />
                                           </span>
                                           <a href="#" class="input-group-addon btn btn-danger fileinput-exists" data-dismiss="fileinput">Cancella</a>
                                  </div>

                                   @if ($errors->has('file'))
                                   <span class="help-block">
                                       <label class="control-label" style="color:#ed5565">{{ $errors->first('file') }}</label>
                                   </span>
                                   @endif
                                   
                               <div class="col-md-12">
                                   <button type="submit" class="btn btn-primary btn-lg center-block">Conferma</button>
                               </div>
                            </div>
                        </div>
                         <div class="clearfix"></div>
                    </form>
                </div>
                
            </div>
            
        </div>
    </div>
    
    <!--********************* STATO ELABORAIONE-->
    <div class="row equal">
        <div class="col-md-12">
            <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>
</div>

@endsection

@section('scripts')
<script>
    var toDo = [];
    var start;
    var stop;
    var elaborati = 0;
    var isLast = false;
    var totalData=0;

    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 + " pratiche ");
        $('#stop').html(stop);
        $('#p').css('width', progress + '%').attr('aria-valuenow', progress);
    }

    function elaborateSingleJob()
    {
        token = $('[name="_token"]').val();
        size = 300;
        if(toDo.length<size)
        {
        size=toDo.length;    
        }

        job = JSON.stringify(toDo.slice(0, size));
        $.ajax({
            url: "/tools/elaboraRichiesteStatoSingoloTaskMotiviDiContatto",
            type: 'POST',
            data: {'_token': token, 'job': job},
            dataType: "json",
            success: function (data) {
                toDo.splice(0, size);
                elaborati += toDo.length;

                if (toDo.length + 1 > size && !isLast)
                {
                    elaborateSingleJob();
                    start += size;
                    elaboraProgress();
                } else
                {
                    if (!isLast)
                    {
                        isLast = true;
                        elaborateSingleJob();
                        start += size;
                        elaboraProgress();
                    } else
                    {
                        start = totalData;
                        elaboraProgress();
                         alertify.alert('Successo','Richieste caricate');
                    }
                    elaborati = 0;
                }

            },
            
            error: function (jqXHR, textStatus, errorThrown) {
                alertify.alert('Errore','si è verificato un problema ');               
                console.log(jqXHR);
            }

        });

    }

    $('form').submit(function (event) {
        event.preventDefault();
        var formData = new FormData($(this)[0]);
        $('#carica').toggleClass('sk-loading');

    $.ajax({
            url: "/tools/postIndexRichiesteStatoMotiviDiContatto",
            type: 'POST',
            data: formData,
            dataType: "json",
            success: function (data) {             
              
                if (data != "file non selezionato.") {
                    $('#carica').toggleClass('sk-loading');
                    toDo = data;
                  
                    start = 1;
                    totalData=data.length;
                    stop = data.length;
                    elaborateSingleJob();
                } else 
                {
                   alertify.alert('Errore','si è verificato un problema sul file');
                    $('#carica').toggleClass('sk-loading');
                }

            },
            error: function (jqXHR, textStatus, errorThrown)
            {
                $('#carica').toggleClass('sk-loading');
                console.log(jqXHR);
                 alertify.alert('Errore','si è verificato un problema con caricamento del file,è stato caricato il file corretto?');
            },
            cache: false,
            contentType: false,
            processData: false
        });
    });


</script>
@endsection