@extends('layouts.app')

@section('title', 'Tools')

@section('content')
<style>
    .mes
    {
        color: #ed5565;
        list-style-type: none;
    }
</style>
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row equal">

        <div class="col-lg-6">

            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Cambio Stato richieste</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>



                    </div>
                </div>
                <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>
                        file .xls input  richieste<br>
                    </h2>
                    <p>
                        non hai il template?<a href="/templates/templateRichiesteStato.xls">scaricalo</a>

                    </p>
                    <form action="/postIndexRichieste" 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</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 class="ibox-footer">


                </div>
            </div>


        </div>
        <div class="col-lg-6">

            <div id="info" class="panel panel-info" style="min-height: 268px;">
                <div class="panel-heading">
                    <i class="fa fa-info-circle"></i> Informazioni sulla compilazione
                </div>
                <div class="panel-body">
                    <h2>Nella colonna stato inserire il codice come da legenda</h2>
                    <ul style="list-style-type:none;width: 60%">
                    @foreach($stati as $stato)
                    <li style="padding:6px;width:100%"><span style="margin: 10px;
                    background: #ff5454;
                    padding: 0px 13px;
                    border-radius: 33px;
                    color: white;">CODICE:</span>
                    <span style='    border-radius: 50%;
    background: #1bb2d4;
    color: white;
    padding: 0 10px;'>{{$stato->id}}</span>
                    <span style='background: #1bb394;
    color: white;
    padding: 0px 12px;
    margin: 10px;
    border-radius: 10px;'>{{strtoupper($stato->stato)}}</span>
    
    
    
                    </li>
                    @endforeach
                    </ul>
                </div>

            </div>

        </div>

    </div>

    <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/elaboraRichiesteStatoSingoloTask",
            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');
                    }
                   // $('#info').find('.panel-body').empty().append('<p>importati ' + elaborati + ' elementi </p>');
                    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');
      //  $('#info').find('.panel-body').empty().append('<p>in caricamento.....</p>');




        $.ajax({
            url: "/tools/postIndexRichiesteStato",
            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