@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 delle letture <small class="m-l-sm">genera</small></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 .xml input da distribuzione<br>
                        </h2>
                        <p>
                            per favore seleziona il file txt per provvedere al caricamento delle letture

                        </p>
                        <form method="post" enctype="multipart/form-data">
                            <input type="hidden" name="_token" value="{{ Session::token() }}" />
                            <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=".xml" />
                                </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 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;

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

        function elaborateSingleJob() {
            token = $('[name="_token"]').val();
            job = JSON.stringify(toDo[0]);
            $.ajax({
                url: "/tools/elaboraLettureSingoloTask",
                type: 'POST',
                data: {
                    '_token': token,
                    'job': job
                },
                dataType: "json",
                success: function(data) {
                    if (data != 'finished') {
                        toDo.shift();
                        elaborati += data;


                        if (toDo.length + 1 > 0) {
                            elaborateSingleJob();
                            start++;
                            elaboraProgress();
                        }
                    } else {
                        $('#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: window.location.pathname,
                type: 'POST',
                data: formData,
                dataType: "json",
                success: function(data) {

                    $('#carica').toggleClass('sk-loading');
                    toDo = data;
                    $('#info').find('.panel-body').empty().append('<p>blocchi da importare:' + toDo
                        .length + '</p>');
                    start = 0;
                    stop = data.length;
                    elaborateSingleJob();


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

        });
    </script>

@endsection