@extends('layouts.app')

@section('title', 'cliente')

@section('content')
  <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row equal">
            <div class="col-md-12">
                  <div class="ibox">
                    <div class="ibox-content" style="display: inline-block;">
                        <h1> il numero chiamante non è associato a nessun cliente</h1>
                        <h4>(se si vuole,si può associare questo numero ad un utenza esistente)</h4>
                        <br>
                        <div class="col-md-6 no-padding">
                            <div class="col-md-12 no-padding">
                            <div class="input-group">
                                <input type="text" placeholder="Ricerca per nominativo,codice fiscale pod,partita iva,email... " id="search" class="input form-control">
                                <span class="input-group-btn">
                                    <button  onclick="cerca()" type="button" class="btn btn btn-primary"> <i class="fa fa-search"></i> Ricerca </button>
                                </span>
                            </div>
                            </div>
                        </div>
                        <div class="col-md-6">&nbsp;</div>
                        <div class="clear-fix"></div>
                        <div class="col-md-12 no-padding">
                            
                                  <div class="clients-list">
                                <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></th>
                                                    <th>Codice Cliente</th>
                                                    <th>Codice Utenza</th>
                                                    <th>Codice Agente</th>
                                                    <th>Nominativo</th>
                                                    <th>Riferimento Fiscale</th>
                                                    <th>Email</th>
                                                    <th>Pdp</th>
                                                    <th>Categoria</th>
                                                    <th>Indirizzo Fornitura</th>
                                                    <th>Citta</th>
                                                    <th>Stato</th>
                                                    <th></th>

                                                </tr>
                                            </thead>
                                            <tbody>
                                                
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                        </div>
                        </div>
                    </div>
                  </div>
            </div>
        </div>
  </div>


<!-- modale di creazione utenza -->
<div class="modal fade in" id="modalphone" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
         <form id="form_ut" role="form" method="post" action="/clienti/anagrafiche/cliente/associaNumero">
            {{ csrf_field() }}
            <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>
             
                <h4 class="modal-title">Associa numero ad utenza</h4>
               
            </div>
            <div class="modal-body">
                
                <input type="hidden"  id="telefono" name="numero_telefono"  class="form-control" value="{{$telefono}}" >
                <input type="hidden" id="numero_cliente" name="numero_cliente"  class="form-control" value="" required >
                
              
                <h1>Associare il numero di telefono al cliente in oggetto?</h1> 
                
                
                    <h2 id="nome_cliente"> </h2>
              
                <div class="clear-fix"></div>
                    

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Chiudi</button>
                <button type="submit" id="salva_ut_btn" class="btn btn-primary">Associa</button>
                
            </div>
             
        </div>
             </form>
    </div>
</div>
@endsection
@section('scripts')
<script>
      var tbldata;
    var anagrafica;
    var tabellaL=$('#tableclient').dataTable({pageLength:7});
    
     function populateTable()
    {
         tabellaL.fnDestroy();
       tbl='';
       $.each(tbldata.data,function(key,val)
       {
       
       cls='';

       switch(val.Stato_Utenza)
       {
           case 'Attiva':
               cls='primary';
           break;    
           case 'Cessata':
              cls='danger'; 
           break;
           case 'Non Fatturabile':
              cls='danger'; 
           break;
           case 'Errata':
              cls='danger'; 
           break;
        
            case 'In Cessazione':
                 cls='warning';
            break;
           
       default:
           cls='default';
           info='';
       }
       if(!val.E_Mail)
           val.E_Mail="non presente";
       if(val.Cod_Tipo_Servizio=='EE')
           img="<img src='/images/luce.png' width='30px'/>";
       else
            img="<img src='/images/gas.png' width='30px'/>";
        
       tbl+="<tr data-id='"+val.Nr_Cliente+"' data-nominativo='"+val.Nome_Completo+"' data-cliente='"+val.Nr_Cliente+"' data-service='"+val.Cod_Tipo_Servizio+"'>"+
               "<td>"+img+"<span style='display:none'>"+val.Cod_Tipo_Servizio+"</span></td>"+
               "<td>"+val.Nr_Cliente+"</td>"+
               "<td>"+val.Nr_+"</td>"+
               "<td>"+val.Cod_Agente+"</td>"+
               "<td>"+val.Nome_Completo+"</td>"+
               "<td>"+val.Cod_Fiscale+"</td>"+
               "<td>"+val.E_Mail+"</td>"+
               "<td>"+val.Nr_Punto_Di_Riconsegna+"</td>"+
               "<td>"+val.Tipo_Utenza+"</td>"+
               "<td>"+val.Indirizzo+"</td>"+
               "<td>"+val.Citta+"</td>"+
               "<td><span style='width:90%;display:block' class='label label-"+cls+"'>"+val.Stato_Utenza+"</span></td>"+
               "<td><button style='width:90%;display:block' class='btn btn-sm btn-warning' data-toggle='modal' data-target='#modalphone'>Associa</button></td>"
               +"</tr>";
       }); 
        $('#tableclient').find('tbody').empty().append(tbl);
         $('.hastip').tooltipsy();
        tabellaL=$('#tableclient').dataTable({pageLength:7,paging:true, dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]});
    $('#tableclient_filter>label').hide();
    }
    
    
    function cerca()
    {
     search=$('#search').val();
     $.getJSON("/api/clienti/list", { search: search } )
        .done(function( json ) {
         tbldata=json;
         populateTable();
        })
        .fail(function( jqxhr, textStatus, error ) {
          var err = textStatus + ", " + error;
          console.log( "Request Failed: " + err );
      });   
    }
    
    $('#search').on('keydown',function(e){
      if(e.keyCode==13)
      {
          cerca();
      }
    });
    $("#modalphone").on("shown.bs.modal", function (e) { 
       var cliente=$(e.relatedTarget).parent('td').parent('tr').data('cliente');
       var nome=$(e.relatedTarget).parent('td').parent('tr').data('nominativo');
       $('#nome_cliente').html(nome);
       $('#numero_cliente').val(cliente);
    });
    
</script>
@endsection