@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>Importazione sbilanciamento Terna</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>
                        Inserisci file .xlsx<br>
                    </h2>
                     <form action="/postIndexSbilTerna" 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="sbil_terna"  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>
                </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 di importazione
                </div>
                <div class="panel-body">
                    <p>Nessuna informazione da visualizzare al momento</p>
                </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;

    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 + " pod ");
        $('#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/elaboraSbilTernaTask",
            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 += size;
                        elaboraProgress();
                    }
                    $('#info').find('.panel-body').empty().append('<p>importati ' + elaborati + ' elementi </p>');
                    elaborati = 0;
                }

            }

        });

    }

    $('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/postIndexSbilTerna",
            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 = 0;
                    stop = data.length;
                    elaborateSingleJob();
                } else
                {
                    alert(data);
                    $('#carica').toggleClass('sk-loading');
                }

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

    }); 


</script>

@endsection