@extends('layouts.app')

@section('title', 'Tools')

@section('content')
<style>
    .mes
    {
    color: #ed5565;
    list-style-type: none;
    }
       .tooltipsy
    {
        padding: 10px;
        max-width: 200px;
        color: #303030;
        background-color: #f5f5b5;
        border: 1px solid #deca7e;
    }
    
</style>
    <div class="wrapper wrapper-content animated fadeInRight">
                <div class="row equal">
                        
                    
                    <div class="ibox">
                        <div class="ibox-content">
                           
                            <h2>Letture Distributore</h2>
                          
                            <div class="input-group">
                                <input type="text" placeholder="ricerca per pod " id="pod" class="input form-control">
                                <span class="input-group-btn">
                                    <button  onclick="cercaPod()" type="button" class="btn btn btn-primary"> <i class="fa fa-search"></i> Ricerca</button>
                                </span>
                            </div>
                            <div class="clients-list">

                                <div class="slimScrollDiv">
                                    <div class="full-height-scroll" style="overflow: hidden; width: auto; height: 100%;">
                                        <div class="table-responsive">
                                            <table class="table table-striped table-hover" id="tableclient">
                                                <thead>
                                                    <tr>
                                                        <th>Pod</th>
                                                        <th>Mat</th>
                                                        <th>PotImp</th>
                                                        <th>PotDisp</th>
                                                        <th>Tens</th>
                                                        <th>TipoLettura</th>
                                                        <th>Data Lettura</th>
                                                        <th>F1</th>
                                                        <th>F2</th>
                                                        <th>F3</th>
                                                        <th>R1</th>
                                                        <th>R2</th>
                                                        <th>R3</th>
                                                        <th>potf1</th>
                                                        <th>potf2</th>
                                                        <th>potf3</th>
                                                        <th>Eam</th>
                                                        <th>Erm</th>
                                                        <th>PotM</th>
                                                        <th>Tipo Dato</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                
                                                        
                                               
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                 
                                </div>

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

    </div>
@endsection 

@section('scripts')
<script>
    var tbldata;
    var tabellaL=$('#tableclient').dataTable({pageLength:7});
    
    function populateTable()
    {
         tabellaL.fnDestroy();
       tbl='';
       $.each(tbldata,function(key,val)
       {
       console.log(val);
       cls='';
       info='';
       switch(val.CodFlusso)
       {
           case 'PNO':
               cls='primary';
             //  info='sono le letture che solitamente sono inviate nei primi 10 giorni del mese ed indicano la letture della fine del mese precedente o anche letture di cambio contatore';
           break;    
           case 'SNM':
              cls='warning'; 
           //   info='letture iniziali, cioè la lettura alla quale un POD inizia ad essere in fornitura con noi';
           break;
           case 'RNO':
               cls='danger';
               //info='sono le letture di rettifica delle PNO, cioè possono sostituire le PNO arrivate per quel POD oppure possono essere inviate per un POD per cui non è arrivata precedentemente la PNO';
           break;
            case 'SNS':
                 cls='default';
                // info='lettura di dati storici, cioè indica nell’anno precedente quali sono stati i consumi di un POD';
            break;
           
       default:
           cls='default';
           info='';
       }
       val.PotF1=val.PotF1?val.PotF1:'';
       val.PotF2=val.PotF2?val.PotF2:'';
       val.PotF3=val.PotF3?val.PotF3:'';
       
       val.EaM=val.EaM?val.EaM:'';
       val.ErM=val.ErM?val.ErM:'';
       val.PotM=val.PotM?val.PotM:'';
         
       tbl+="<tr>"+
               "<td>"+val.Pod+"</td>"+
               "<td>"+val.MatrAtt+"</td>"+
               "<td>"+val.PotContrImp+"</td>"+
               "<td>"+val.PotDisp+"</td>"+
               "<td>"+val.Tensione+"</td>"+
               "<td><span  class='label label-"+cls+"'>"+val.CodFlusso+"</span></td>"+
               "<td>"+moment(val.DataMisura).format("DD/MM/YYYY")+"</td>"+
               "<td>"+val.EaF1+"</td>"+
               "<td>"+val.EaF2+"</td>"+
               "<td>"+val.EaF3+"</td>"+
               "<td>"+val.ErF1+"</td>"+
               "<td>"+val.ErF2+"</td>"+
               "<td>"+val.ErF3+"</td>"+
                "<td>"+val.PotF1+"</td>"+
               "<td>"+val.PotF2+"</td>"+
               "<td>"+val.PotF3+"</td>"+
                "<td>"+val.EaM+"</td>"+
               "<td>"+val.ErM+"</td>"+
               "<td>"+val.PotM+"</td>"+
                "<td>"+val.TipoDato+"</td>"+
               "</tr>";
      
       
       }); 
        $('#tableclient').find('tbody').empty().append(tbl);
         $('.hastip').tooltipsy();
         $('#tableclient').dataTable({pageLength:7,paging:true, dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]});
    }
    
    function cercaPod()
    {
        pod=$('#pod').val();
     $.getJSON("/api/dletture/list", { pod: pod } )
        .done(function( json ) {
         tbldata=json;
          populateTable();
        })
        .fail(function( jqxhr, textStatus, error ) {
          var err = textStatus + ", " + error;
          console.log( "Request Failed: " + err );
      });   
    }

</script>

@endsection