{{-- CODE REVIEW: RAFFAELE SCHIAVULLO --}} 

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

<style>
    .mes
    {
        color: #ed5565;
        list-style-type: none;
    }
</style>

<div class="wrapper wrapper-content animated fadeInRight">

    <!-- ********************************************* SEZIONE IMPORTAZIONE -->  
    <div class="row equal">    

        <!-- ********************************************* IMPORTAZIONE FILE XLSX-->          
        <div class="col-lg-6">

            <div class="ibox float-e-margins">                
                <div class="ibox-title">
                    <table>
                        <tr>
                            <td style="width:100%"><h5>Importazione CDR (Calls Detailed Records)</h5></td>
                            <td><a  class="btn btn-primary btn-xs float-sm-right" href="/tools/DownloadListaCDR_xls" title="Esporta l'intera tabella dei CDR in formato XLS">Esporta XLS</a></td>
                            <td>&nbsp;</td>
                            <td><a  class="btn btn-primary btn-xs float-sm-right" href="/tools/DownloadListaCDR_csv" title="Esporta l'intera tabella dei CDR in formato CSV">Esporta CSV</a></td>
                            <td>&nbsp;</td>
                            <td>                     
                                <div class="ibox-tools">
                                    <a class="collapse-link">
                                        <i class="fa fa-chevron-up"></i> 
                                    </a>
                                </div>
                            </td>
                        </tr>
                    </table>
                </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>
                        Seleziona file .xlsx<br>
                    </h2>

                    <!-- ********************************************* FORM-->
                    <form action="/postIndexListaCDR" method="post" enctype="multipart/form-data">
                        <input type="hidden" name="_token" value="{{ Session::token() }}" />
                        <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="lista_cdr"  accept=".xlsx" />
                                    </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>
                    <!-- ********************************************* END FORM-->                                     
                </div> 

            </div>
        </div>
        <!-- ********************************************* FINE IMPORTAZIONE FILE XLSX -->          

        <!-- ********************************************* INFORMAZIONI IMPORTAZIONE-->   
        <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 di importazione
                </div>
                <div class="panel-body">
                    <p>Nessuna informazione da visualizzare al momento</p>
                </div>
            </div> 
        </div>
        <!-- ********************************************* FINE INFORMAIONI IMPORTAZIONE -->   

    </div>
    <!-- ********************************************* FINE SEZIONE IMPORTAZIONE -->  

    <!-- ********************************************* STATO ELABORAZIONE -->      
    <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>
    <!-- ********************************************* FINE STATO ELABORAZIONE -->     

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

    function elaborateSingleJob()
    {
        token = $('[name="_token"]').val();

        size = 50;
        if (toDo.length < size)
        {
            size = toDo.length;
        }

        job = JSON.stringify(toDo.slice(0, size));

        $.ajax({
            url: "/tools/elaboraListaSingoloTaskCDR",
            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)
                {
                    elaborati=toDo.length;
                    elaborateSingleJob();
                    start += size;
                    elaboraProgress();
                } else
                {
                    if (!isLast)
                    {
                        isLast = true;
                        elaborateSingleJob();
                        start += size;
                        elaboraProgress();
                    } else
                    {
                        start = totalData;
                        elaborati=totalData;
                        elaboraProgress();
                        alertify.alert('Successo','CDR caricate.');
                        isLast = false;



                    }
                   // $('#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/postIndexListaCDR",
            type: 'POST',
            data: formData,
            dataType: "json",
            success: function (data) {
                if (data != "file non selezionato.") {
                    $('#carica').toggleClass('sk-loading');
                    toDo = data;
                    $('#info').find('.panel-body').empty().append('<p>pratiche da importare:' + toDo.length + '</p>');
                    start = 1;
                    stop = data.length;
                    totalData=data.length;
                    console.log(data);
                    elaborateSingleJob();
                } else
                {
                    alertify.alert('Errore','si è verificato un problema sul file');
                    $('#carica').toggleClass('sk-loading');
                }

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