@extends('layouts.app')

@section('title', 'Tools')

@section('content')
    <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 righe fattura <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 ed alla generazione del flusso contabile
                                      
                                    </p>
                                    <form  method="post" enctype="multipart/form-data">
                                         {{ csrf_field() }}
                                     <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-6">
                        <div class="row p-sm">
                                <div class="form-group" id="data_5">
                                    <div class="col-md-6">
                                        <label>Periodo di Fatturazione</label>
                                        <div class="input-daterange input-group" id="datepicker">
                                            <input type="text" class="input-sm form-control" name="data_start" value="{{date('01/m/Y')}}"/>
                                            <span class="input-group-addon">a</span>
                                            <input type="text" class="input-sm form-control" name="data_end" value="{{date('t/m/Y')}}" />
                                        </div>
                                    </div> 

                                    <div class="col-md-4">
                                        <label>Numero fattura</label>

                                        <div class="input-group" id="">

                                            <input type="text" class="input-sm form-control" name="numero_fattura" value="" />


                                        </div>


                                    </div>    
                                    <div class="col-md-2">
                                        <br>
                                        <button type="button" class="btn btn-primary btn-md" onclick="reload()">cambia</button>
                                    </div>

                                </div>
                        </div>  
                 
                       
                    </div>
                    
                    <div class="col-lg-6"></div>
                   
                    
                       <div class="col-lg-12">
                            <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <div class="col-md-12">
                                    <h5 style="display: inline-block">fatture Importate nel periodo indicato<span  id="count_dfatt" class="label label-info" style="float:right;">0 singolo sito</span><span  id="count_mfatt" class="label label-danger" style="float:right">0 multisito</span></h5>
                                    
                                
                                    
                                       <div class="ibox-tools">
                               
                                          <button id="elabora_flusso_btn" type="button" class="btn btn-xs btn-outline btn-warning" data-toggle="modal" data-target="#modalFlusso" >Elabora file</button>
                                        </div>
                                    
                                </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_detfatt" class="table table-bordered">
                                <thead>
                                <tr>
                                    <th>Numero Fattura</th>
                                    <th>codice cliente</th>
                                    <th>data di emissione</th>
                                    <th>pdp</th>
                                </tr>
                                </thead>
                                <tbody>
                        
                                </tbody>
                            </table>
                                </div>   

                        </div>
                    </div>
                </div>
                </div>
        
        
     </div>


<div class="modal inmodal in" id="modalFlusso" tabindex="-1" role="dialog" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content animated fadeIn">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                                            <i class="fa fa-clock-o modal-icon"></i>
                                            <h4 class="modal-title">Esportazione Flusso</h4>
                                            <small>Attendere il completamento</small>
                                        </div>
                                        <div class="modal-body">
                                            <h5>Percentuale di completamento<div id="perc_comp"></div></h5>
                                            <div class="progress progress-bar-default">
                                                <div id="p" 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 class="modal-footer">
                                            <button type="button" class="btn btn-white" data-dismiss="modal">Minimizza</button>
                                            <button type="button" id="esporta_btn" class="btn btn-primary">Esporta</button>
                                        </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 Flusso</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>
    table=false;
    toDo={
        headers:null,
        jobs:null,
        importate:0
    };
    elaborato={
       fatture:null,
       elaborate:0,
       totaleFatture:0
    };
    
    function reload()
    {
        if(table)
        {
            table.DataTable().destroy(); 
        }
        
     
     $('#tabella_detfatt').find('tbody').empty();
     loadDettagli();   
    }
    //questa funzione carica tutti i processi che serviranmno successivamente all'aelaborazione del file
     function loadDettagli()
    {
        inizio=$("[name='data_start']").val();
        fine=$("[name='data_end']").val();
        fattura=$('[name="numero_fattura"]').val()!=''?$('[name="numero_fattura"]').val():-1;
        
        $('#noresult').show();
        $('#table_list').hide(); 
        //clearAnagrafiche();
      
        $('#table_block').toggleClass('sk-loading');
        $.getJSON('/api/fatture/list?inizio='+inizio+'&fine='+fine+'&fattura='+fattura, function (data) {
         count=data.fatture_singole.length;  
         elaborato.fatture=data.fatture_singole;
         elaborato.totaleFatture=count;
         mm='';
        
       
         if( count > 0)
         {
            html="";
            $.each(data.fatture_singole, function(i, item) {
               // console.log(item);
                html+="<tr>";
                html+="<td>"+item.NUMERO_FATTURA+"</td>";
                html+="<td>"+item.CODICE_CLIENTE+"</td>";
                html+="<td>"+moment(item.DATA_EMISSIONE).format('DD/MM/YYYY')+"</td>";
                html+="<td>"+item.PDR+"</td>";
                html+="</tr>";

            });
             numeromultifatture=0;
             $.each(data.multifattura, function(i, item) {
               numeromultifatture++;
               
               $.each(item, function(z, mitem) {
                   elaborato.fatture.push(mitem);
                   elaborato.totaleFatture++;
               });
             });
              
            
              if(numeromultifatture>0)
               mm='  '+numeromultifatture+' fatture multisito';
             $('#count_dfatt').html(count+" fatture singolo sito");
             $('#count_mfatt').html(mm);
            
            //console.log(html);
            $('#tabella_detfatt').find('tbody').append(html);
             table=$('#tabella_detfatt').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(); 
         }

      });

    }
    
    
    function elaboraProgress()
    {
          //calcolo percentuale elaborato
          var progress=(elaborato.elaborate*100)/elaborato.totaleFatture;
          progress=!progress?0:progress;
          $('#perc_comp').html(progress.toFixed(2)+'%');
          console.log(progress);
          $('#p').css('width',progress+'%').attr('aria-valuenow', progress);
    }
    
    function elaboraFlusso()
    {
        if (elaborato.fatture.length>0)
        {
            $.ajax({
                url: "/api/fatture/elaborateSingleJobBill",
                type: 'POST',
                data: elaborato.fatture[0],
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    elaborato.fatture.shift();
                    elaborato.elaborate++;
                    elaboraProgress();
                    elaboraFlusso(); 
                }
               }); 
        }
    }
    
    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/elaboraSingoloTask",
                type: 'POST',
                data: {'_token':token,'headers':headers,'job':job},
                dataType: "json",
                success: function (data) {
                
                 toDo.jobs.shift();
                 elaborateSingleJob();
                 toDo.jobs.importate+=data.importate;
                 t='';
                 if(data[0].message.type=='error')
                 {
                    t="<i class='fa fa-minus-circle' style='color:red'></i>&nbsp;&nbsp;&nbsp;"; 
                 }
                 html="<p>"+t+data[0].message.text+"</p>";
                 $('#info').find('.panel-body').prepend(html);
                }
                
        });
     }
     else
     {
     $('#modalFlussoImport').modal('hide');
     }
        
    }
    
    $( document ).ready(function() {
    $('#data_5 .input-daterange').datepicker({
                keyboardNavigation: false,
                forceParse: false,
                autoclose: true,
                language: 'it'

            });

        $('#info').find('.panel-body').slimscroll();
        loadDettagli();
        $('#modalFlusso').on('show.bs.modal',function(){
         elaboraProgress();
        });
        
        $('#esporta_btn').on('click',function(){
           $(this).hide();
          elaboraFlusso();
          $('#elabora_flusso_btn').removeClass('btn-warning').addClass('btn-info').html('Visualizza Stato Flusso');
          
        });
        
        
      $('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(l\'operazione potrebbe richiedere del tempo ).....</p>');
    
            $.ajax({
                url: window.location.pathname,
                type: 'POST',
                data: formData,
                dataType: "json",
                success: function (data) {
                         toDo.jobs=data.jobs;
                         toDo.headers=data.headers;  
                        $('#carica').toggleClass('sk-loading');
                        html='<ul class="mes">';
                        count='';
                        total=data.length;
                        $('#info').find('.panel-body').empty();
                        $('#modalFlussoImport').modal({backdrop: 'static', keyboard: false});
                        elaborateSingleJob();
                    

                },
                error: function (jqXHR, textStatus, errorThrown) 
                {
                        $('#carica').toggleClass('sk-loading');
                        $('#info').find('.panel-body').empty();
                    console.log(jqXHR);
                },
                cache: false,
                contentType: false,
                processData: false
            });
        });
        
    });
</script>
@endsection