@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">
         
                    <div class="col-lg-6">
             
                            <div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <h5>Importazione utenze <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 .csv input da gestionale<br>
                                    </h2>
                                    <p>
                                        per favore seleziona il file txt per provvedere al caricamento delle anagrafiche
                                      
                                    </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"/>
                                        </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 class="col-lg-12">
                            <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>Utenze Importate <span  id="count_anagrafiche" class="label label-info" style="float:right;">0</span></h5>
                                <div class="ibox-tools">
                                    <a class="collapse-link">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                        <i class="fa fa-wrench"></i>
                                    </a>
                                 
                                    <a class="close-link">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                                
                            <div id="table_block" class="ibox-content">
                                <div class="sk-spinner sk-spinner-cube-grid">
                                    <div class="sk-cube"></div>
                                    <div class="sk-cube"></div>
                                    <div class="sk-cube"></div>
                                    <div class="sk-cube"></div>
                                    <div class="sk-cube"></div>
                                    <div class="sk-cube"></div>
                                    <div class="sk-cube"></div>
                                    <div class="sk-cube"></div>
                                    <div class="sk-cube"></div>
                                </div>
                                <div id="noresult" class="text-center" style="padding:9%;">
                                    <h1>Non sono presenti risultati</h1>
                                </div>
                                <div  id="table_list" style="display:none">    
                            <table id="tabella_clienti" class="table table-bordered">
                                <thead>
                                <tr>
                                    <th>Tipo Utenza</th>
                                    <th>Codice Cliente</th>
                                    <th>Categoria</th>
                                    <th>Pdp</th>
                                </tr>
                                </thead>
                                <tbody>
                                  
                                </tbody>
                            </table>
                                </div>   

                        </div>
                    </div>
                </div>
     </div>
        
           <div class="modal inmodal in" id="modalFlussoImport" tabindex="-1" role="dialog" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content animated fadeIn">
                                        <div class="modal-header">
                                            <i class="fa fa-clock-o modal-icon"></i>
                                            <h4 class="modal-title">Importazione Utenze</h4>
                                            <small>Attendere il completamento</small>
                                        </div>
                                        <div class="modal-body">
                                            <h5>Percentuale di completamento<div id="perc_comp2"></div></h5>
                                            <div class="progress progress-bar-default">
                                                <div id="p2" style="width: 43%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="43" role="progressbar" class="progress-bar">
                                                    <span class="sr-only">43% Complete (success)</span>
                                                </div>
                                            </div>
                                        </div>
                                      
                                    </div>
                                </div>
            </div>      
@endsection 

@section('scripts')
<script>
    var table;
    var init=false;
         toDo={
        headers:null,
        jobs:null,
        importate:0
    };
    function clearUtenze()
    {
       $('#noresult').show();
        $('#table_list').hide(); 
        if($('#tabella_clienti').hasClass('initialized')){
        table.DataTable().destroy();
        $('#tabella_clienti').removeClass('initialized');
        }  
    }
    function loadUtenze()
    {
        $('#noresult').show();
        $('#table_list').hide(); 
        clearUtenze();
        $('#table_block').toggleClass('sk-loading');
        $.getJSON('/api/utenze/list', function (data) {
         count=data.length;  
         console.log(data);
         $('#count_anagrafiche').html(count);
         if( count > 0)
         {
            html="";
            $.each(data, function(i, item) {
             
                html+="<tr>";
                html+="<td>"+item.Tipo_Utenza+"</td>";
                html+="<td>"+item.Nr_+"</td>";
                html+="<td>"+item.Cat_Reg_Business+"</td>";
                html+="<td>"+item.Nr_Punto_Di_Riconsegna+"</td>";
                html+="</tr>";

            });
          
            $('#tabella_clienti').find('tbody').append(html);
            table= $('#tabella_clienti').addClass('initialized').dataTable( {
                "pageLength": 5
              } );
              init=true;   
              $('#table_block').toggleClass('sk-loading');
              $('#noresult').hide();
              $('#table_list').fadeIn();  
         }
         else
         {
          $('#table_block').toggleClass('sk-loading');
          $('#noresult').show();
          $('#table_list').hide(); 
         }

      });

    }
$( document ).ready(function() {
 loadUtenze();
 
 
  function elaborateSingleJob()
    {
     
     
     if (toDo.jobs.length>0)
     {
     percentuale=101-toDo.jobs.length;
     $('#perc_comp2').html(percentuale.toFixed(2)+'%');
     $('#p2').css('width',percentuale+'%').attr('aria-valuenow', percentuale);
     token=$('[name="_token"]').val();
     job=JSON.stringify(toDo.jobs[0]);    
     headers=JSON.stringify(toDo.headers);
        $.ajax({
                url: "/tools/elaboraUtenzeSingoloTask",
                type: 'POST',
                data: {'_token':token,'headers':headers,'job':job},
                dataType: "json",
                success: function (data) {
                 $('#modalFlussoImport').modal('show');
                 toDo.jobs.shift();
                 elaborateSingleJob();
         
                }
                
        });
     }
     else
     {
     $('#modalFlussoImport').modal('hide');
      loadUtenze();
     }
        
    }    
  
      
   $('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>');
       clearUtenze();
       
            
        
          $.ajax({
            url: window.location.pathname,
            type: 'POST',
            data: formData,
            dataType: "json",
            success: function (data) {
            
                    $('#carica').toggleClass('sk-loading');
                    toDo.jobs=data.jobs;
                    toDo.headers=data.headers;  
                    elaborateSingleJob();
 
            },
            error: function (jqXHR, textStatus, errorThrown) 
            {
                    $('#carica').toggleClass('sk-loading');
                console.log(jqXHR);
            },
            cache: false,
            contentType: false,
            processData: false
        });
        
    });
});

</script>

@endsection