@extends('layouts.app')

@section('title', 'Clienti')

@section('content')
<style>
.liveclass
{
    font-size: smaller; 
    margin-right: 10px;
    background: #751cc6;
    padding: 2px 12px;
    color: white;
    display: inline-block;
    
}
.nav-tabs > li > a {
    color: #888888;

}

.nav-tabs > li > a:hover, .nav-tabs > li > a:focus {
    color: #ffffff;
}
.no-padding-right{
    padding-right: 0px!important;
}
.no-padding-left{
    padding-left: 0px!important;
}
.disabled_state
{
    background-color: rgba(220, 210, 210, 0.2);
    color: #b3b3b3;
}
.disabled_state:hover
{
    color:#23c6c8
}
.formStepToCreate
{
    transition:border 0.2s;
     transition:box-shadow 0.2s;
    border: 4px solid #23c6c8;
    box-shadow: 2px 3px 11px #888888;
}
.tabs-container .nav-tabs > li a:hover {
    background: transparent;
    border-color: transparent;
    color: rgba(35, 198, 200, 0.51);
}
.tabs-container .nav-tabs > li.active > a, .tabs-container .nav-tabs > li.active > a:hover, .tabs-container .nav-tabs > li.active > a:focus {
    border: 1px solid #e7eaec;
    border-bottom-color: transparent;
    color: #57d3d5;
}
.danger_modal_header
{
    background-color: red;
    width: 100%;
    display: inline-block;
    color: #fff;
}

</style>


  <input type="hidden" name="users_id" value=""/>
  <input type="hidden" name="id" value=""/>
  <input type="hidden" id="codice_provvigione" value=""/>

<div class="row wrapper border-bottom white-bg page-heading ">
                <div class="col-lg-10">
                    <h2>Cliente</h2>
                   
                    <ol class="breadcrumb">
                        <li>
                            <a href="/">Home</a>
                        </li>
                        <li>
                            <a href="/clienti/anagrafiche">Clienti</a>
                        </li>
                        <li>
                            <a href='/clienti/anagrafica?codice={{$utenza->anagrafica->Nr_}}'>Anagrafica</a>
                        </li>
                         <li>
                            <a href='/clienti/anagrafica?codice={{$utenza->anagrafica->Nr_}}'>{{$utenza->anagrafica->Nr_}}</a>
                        </li>
                        <li>
                            <a href='#'>Utenza</a>
                        </li>

                         <li class="active">
                              <strong><a>{{$utenza->Nr_}}</a></strong>
                         </li>
                    </ol>
                </div>
             
 </div>  
  
  
 

<div class="wrapper wrapper-content animated fadeInRight fd" >
    <div class="row no-padding">
        <div class="col-md-12">

            <div class="alert alert-danger" style="display:none">
               
            </div>
        </div>

        <div class="ibox">
   
            <div class="row">
                <div class="col-md-4" >
                    <div class="ibox">
                        <div class="ibox-content">
                           
                            <div class="col-md-8"><h2>
                                      @if($utenza->Cod_Tipo_Servizio=='EE')
                                                <img src="/images/luce.png" width="50px"/>
                                                 @elseif($utenza->Cod_Tipo_Servizio=='G')
                                                <img src="/images/gas.png" width="50px"/>
                                                @else
                                                <img src="/images/telefono.png" width="50px"/>
                                                @endif
                                                

                                    {{$utenza->Nr_}}</h2></div>
                            <div class="col-md-4 no-padding text-right">
                              @if($canUseAlert)
                                    <button class="btn btn-sm btn-danger" type="button" style="width:100%" data-toggle="modal" data-target="#modalAlert"><i class="fa fa-lg fa-bell-o" aria-hidden="true"></i>&nbsp;&nbsp;Alert</button>
                               @endif
                            </div>
                            
                            <div class="clearfix"></div>
                            <div class="col-md-12">
                                 <ul class="list-group clear-list">
                                     
                                           <li class="list-group-item fist-item">
                                                <span class="pull-right" id='smartbox_stato_utenza'> {{$utenza->Stato_Utenza}} </span>
                                                <b>Stato Utenza</b>
                                            </li>
                                            
                                            <li class="list-group-item fist-item">
                                                <span class="pull-right" id='smartbox_residente_utenza'> {{$utenza->Classe_Utenza=='D2'?'SI':'NO'}} </span>
                                                Residente
                                            </li>
                                            <li class="list-group-item">
                                                <span class="pull-right" id='smartbox_saldo'> €  {{number_format($utenza->Saldo,2,',','.')}}</span>
                                                Saldo
                                            </li>
                                            <li class="list-group-item">
                                                <span class="pull-right" id='smartbox_saldo_cauzione'> € {{$utenza->Saldo_Cauzione}}</span>
                                                Saldo Cauzione
                                            </li>
                                            <li class="list-group-item">
                                                <span class="pull-right" id='smartbox_saldo_periodo'> € {{$utenza->Saldo_Periodo}} </span>
                                                Saldo Periodo
                                            </li>
                                            <li class="list-group-item">
                                                <span class="pull-right" id='smartbox_scaduto'> € {{$utenza->Scaduto}} </span>
                                                Scaduto
                                            </li>
                                             <li class="list-group-item">
                                                <span class="pull-right" id='smartbox_stato_bonus'>  {{$utenza->Stato_Bonus}} </span>
                                                Bonus
                                            </li>
                                            
                                              <li class="list-group-item">
                                                <span class="pull-right" id='smartbox_frequenza_fatturazione'>  {{$utenza->Frequenza_Fatturazione=='12'?'Mensile':$utenza->Frequenza_Fatturazione=='06'?'Bimestrale Pari':'Bimestrale Dispari'}} </span>
                                                Frequenza Fatturazione
                                                
                                            </li>
                                             <li class="list-group-item">
                                                <span class="pull-right" id='smartbox_codice_amministratore'>  {{$utenza->Nr_Amministratore=='0'?'Non Associato':$utenza->Nr_Amministratore}} </span>
                                                Codice Amminitratore
                                            </li>
                                               <li class="list-group-item">
                                                <span class="pull-right" id='smartbox_cod_agente'>  {{$utenza->Cod_Agente}} </span>
                                                Codice Agente
                                            </li>
                                                <li class="list-group-item">
                                                <span class="pull-right" id='smartbox_descrizione_agente'>  {{$agente_descrizione}} </span>
                                                Descrizione Agente
                                            </li>
                                            
                                            
                                            
                                           
                                         
                                        </ul>
                            </div>
                            <div class="clearfix"></div>
                            @if(count($links)>0)
                            <div class="col-md-12">
                                  <a class="" type="button" style="width:100%;text-align:left" data-toggle="modal" data-target="#modalCollegamenti">
                                  <i class="fa fa-lg fa-link" aria-hidden="true"></i>&nbsp;&nbsp;Collegamenti</a>
                                  <span class="label label-info" style="float: right">{{count($links)}}</span>
                            </div>
                            @endif
                                       
                             <div class="clearfix"></div>         
                        </div> 
                    </div>
                    
                    <input type="hidden"  id="tipo" value="{{$utenza->Cod_Tipo_Servizio}}" />
                    <div class="clearfix">
                    </div>             
                    
                </div>
            <div class="col-md-8" >
                <div class="tabs-container">
                    <ul class="nav nav-tabs" >
                        <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true"><i class="fa fa-user"></i> Anagrafica</a></li>
                        <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false"><i class="fa fa-map"></i>Contratto</a></li>
                        @if($utenza->Cod_Tipo_Servizio=='G' || $utenza->Cod_Tipo_Servizio=='EE')
                         <li class=""><a data-toggle="tab" href="#tab-3" aria-expanded="false"><i class="fa fa-calculator"></i>Letture</a></li>
                         @endif
                         <li class=""><a data-toggle="tab" href="#tab-4" aria-expanded="false"><i class="fa fa-bars" ></i>Fatture</a></li>
                         
                          <li class=""><a data-toggle="tab" href="#tab-6" aria-expanded="false"><i class="fa fa-group"></i>MDC</a></li>
                    
                    </ul>

                    <div class="tab-content">
                        <div id="tab-1" class="tab-pane active">
                            <div class="panel-body">
                                @include('clienti.dettagli.partials.anagrafica')
                            </div>
                        </div>
                        <div id="tab-2" class="tab-pane">
                            <div class="panel-body">
                                @include('clienti.dettagli.partials.contratto')
                            </div>
                        </div>
                         <div id="tab-3" class="tab-pane">
                            <div class="panel-body">
                                @include('clienti.dettagli.partials.letture')
                            </div>
                        </div>
                         <div id="tab-4" class="tab-pane">
                            <div class="panel-body">
                                @include('clienti.dettagli.partials.fatture')
                            </div>
                        </div>
                 
                         <div id="tab-6" class="tab-pane">
                            <div class="panel-body">
                                @include('clienti.dettagli.partials.mdc')
                            </div>
                        </div>
                        
                    </div>

                </div>
            </div>

            </div>
            
            
        </div>
    </div>
</div>
  
  <div class="row">
      
      <div class="col-md-6 col-lg-6 col-xs-12">       
        <div class="ibox">
            <div class="ibox-content" style="display: flex">
               <input type="hidden" id="curvesLettureStoriche" value="{{$curvesLettureStoriche}}">
               <div class="col-md-12">
                   <h2>Curve di consumo Energia Storiche</h2>
                   <canvas id="lineChartLettureStoriche" height="20" width="50%" style="display: block;"></canvas>
               </div>
           </div>
       </div>
      </div>
      
      <div class="col-md-6 col-lg-6 col-xs-12">      
        @if ($utenza->Cod_Tipo_Servizio=="EE")
           <div class="ibox">

                <div class="ibox-content" style="display: flex">
                   <input type="hidden" id="curves" value="{{$curves}}">
                   <div class="col-md-12">
                       <h2>Curve di consumo Energia</h2>
                       <canvas id="lineChart" height="20" width="50%" style="display: block;"></canvas>
                   </div>
               </div>

           </div>

        @elseif($utenza->Cod_Tipo_Servizio=='G')
            <div class="ibox">

               <div class="ibox-content" style="display: flex">
                   <input type="hidden" id="curves" value="{{$curves}}">
                   <div class="col-md-12">
                       <h2>Curve di consumo GAS</h2>
                       <canvas id="lineChart" height="20" width="50%" style="display: block;"></canvas>
                   </div>
               </div>
                        
        </div>            
        @endif
                   
                   
      </div>
      


</div>
  
  <div class="modal inmodal in" id="modalCollegamenti" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content animated fadeIn">
                    <div class="modal-header default_modal_header">
                        <span class="modal-title"><i class="fa fa-lg fa-link" aria-hidden="true"></i>&nbsp;Collegamenti</span>
                      
                    </div>
                    <div class="modal-body">


                        <div class="col-md-12">
                            
                            <table class="table table-striped table-hover no-footer dataTable">
                                <thead style="background: #add;">
                                    <tr>
                                        <th>Servizio</th>
                                        <th>Punto di riconsegna</th>
                                       
                                        <th>Tipo Utenza</th>
                                        
                                         <th>Stato Utenza</th>
                                    </tr>
                                    </thead>
                                
                                <tbody>
                                     @foreach($links as $link)
                                     <tr onclick="navigate(this)" data-href="/clienti/anagrafiche/cliente?codice={{$link->Nr_}}">
                                         <td>
                                               @if($link->Cod_Tipo_Servizio=='EE')
                                                <img src="/images/luce.png" width="30px"/>
                                                @else
                                                <img src="/images/gas.png" width="30px"/>
                                                @endif
                                         </td>
                                         <td>{{$link->Nr_Punto_Di_Riconsegna}}</td>
                                       
                                         <td>{{$link->Tipo_Utenza}}</td>
                                         <td style="text-align:center"><span class="label label-primary" >{{$link->Stato_Utenza}}</span></td>
                                     </tr>
                                      @endforeach
                                </tbody>
                                
                            </table>
                     

                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="modal-footer">
                        
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Annulla</button>
              
                    </div>

                </div>
            </div>
        </div>
  
  
    <div class="modal inmodal in" id="modalAlert" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content animated fadeIn">
                    <div class="modal-header danger_modal_header">
                        <span class="modal-title"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>&nbsp;Alert</span>
                      
                    </div>
                    <div class="modal-body">


                        <div class="col-md-12">

                            <div class="form-group">
                                <label>Note</label>
                                <form id="alert" method="post">
                                <input type="hidden" name="users_id" value="{{Auth::user()->id}}">
                                <input type="hidden" name="codice_utente" value="{{$utenza->Nr_}}">
                                <textarea name="messaggio" class="form-control" rows="4" cols="50" style="resize:none;"></textarea>
                                </form>

                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="modal-footer">
                        
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Annulla</button>
                        <button id="elimina_alert" type="button" class="btn btn-default" data-dismiss="modal" onclick="EliminaAlert()" style="display:none" >Elimina</button>
                        <button id="btn_sub_alert" type="button" class="btn btn-primary" data-dismiss="modal" onclick="salvaAlert()">Inserisci</button>
                    </div>

                </div>
            </div>
        </div>
  
  
  <div class="modal inmodal in" id="modalAlertCompiled" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content animated fadeIn">
                    <div class="modal-header danger_modal_header">
                        <span class="modal-title"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>&nbsp;Alert</span>
                      
                    </div>
                    <div class="modal-body">


                        <div class="col-md-12">
                            <div class="contact-box">
                               
                                    <div class="col-sm-4">
                                        <div class="text-center">
                                            <img id="usr_id_alert" alt="image"  class="img-circle m-t-xs img-responsive" src="">
                                           
                                        </div>
                                    </div>
                                    <div class="col-sm-8">
                                        <h3><strong id="usr_name_alert">Michael Zimber</strong></h3>
                                      
                                        <address>
                             
                                            <i><h2 id="alert_message"></h2></i>
                                        </address>
                                    </div>
                                    <div class="clearfix"></div>
                                
                            </div>
                        
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="modal-footer">
                        
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Chiudi</button>
                      
                    </div>

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



@endsection

@section('scripts')
@parent

<script>
 
   var curv=null;
   var curvLettureStoriche=null;
   var label=[];
   var labelLettureStoriche=[];
   var values=[];
   var valuesLettureStoriche=[];
   var livedata='';

function navigate(e)
{
    $('#modalCollegamenti').modal('hide');
    window.open($(e).data('href'),'_blank');
}


function salvaAlert()
{
    data=$('#alert').serialize();
    if($('[name="messaggio"]').val().trim()=='')
    {
        $('[name="messaggio"]').addClass('error');
        return false;
    }
     $('[name="messaggio"]').removeClass('error');
     $.post( "cliente/alert", data,function(data){
         getAlertMessage(); 
    });    
}

function EliminaAlert()
{
    data=$('#alert').serialize();
    if($('[name="messaggio"]').val().trim()=='')
    {
        $('[name="messaggio"]').addClass('error');
        return false;
    }
     $('[name="messaggio"]').removeClass('error');
     $.post( "cliente/alert/delete", data,function(data){
        $('.alert-danger').hide();   
    });   
}


  function getAlertMessage()
   {
            $.getJSON( "/clienti/anagrafiche/cliente/getalert?codice="+$('[name="codice_utente"]').val(), function( json ) {

                if(json!="false")
                {
                    $('#usr_id_alert').attr('src',json.user.avatar);
                    $('#usr_name_alert').html(json.user.name+' in data '+moment(json.alert.updated_at).format('DD/MM/YYYY h:mm:ss')+' ha scritto:');
                    $('#alert_message').html(json.alert.messaggio);
                    $('#modalAlertCompiled').modal('show');
                    $('[name="messaggio"]').val(json.alert.messaggio);
                    $('#btn_sub_alert').html('modifica').removeClass('btn-primary').addClass('btn-warning');
                    $('#elimina_alert').show();

                    $('.alert-danger').html("<h3><i class='fa fa-lg fa-exclamation-triangle'></i>&nbsp;"+json.user.name+' in data '+moment(json.alert.updated_at).format('DD/MM/YYYY h:mm:ss')+' ha scritto: '+json.alert.messaggio+"</h3>");
                     $('.alert-danger').show();
                }
         });
     }
     
  function createLiveData(tag,message)
  {
     $('#'+tag).html('<span class="liveclass pull-right" style="margin-left: 10px;"  data-toggle="tooltip" data-placement="top" title="in tempo reale con mubi"><i class="fa fa-wifi" aria-hidden="true"></i>&nbsp;&nbsp;Live</span>'+ message);  
  }


$(document).ready(function(){
    $.post( "/api/getLiveData",{ utente: $('[name="codice_utente"]').val()}, function( data ) {
       livedata=JSON.parse(data);
       console.log(livedata);
       $('#table_load').hide();

       if(livedata.Stato_Utenza){
       createLiveData('smartbox_stato_utenza',livedata.Stato_Utenza);
       createLiveData('smartbox_residente_utenza',livedata.Residente);
       saldo= livedata.Saldo;
       createLiveData('smartbox_saldo','€ '+saldo);
       saldocauzione=livedata.Saldo_Cauzione;
        createLiveData('smartbox_saldo_cauzione','€ '+saldocauzione);
        saldoperiodo=livedata.Saldo_Periodo;
        createLiveData('smartbox_saldo_periodo','€ '+saldoperiodo);
        scaduto=livedata.Scaduto;
        createLiveData('smartbox_scaduto','€ '+scaduto);
        createLiveData('smartbox_stato_bonus',livedata.Bonus);
        createLiveData('smartbox_frequenza_fatturazione',livedata.Frequenze_Fatturazione);
        createLiveData('smartbox_codice_amministratore',livedata.Cod_Amministratore);
        }
        //fatture reali
        
        rows='';
        
        
        
        $.each(livedata.Fatture,function(index,value)
        {
            rows+='<tr data-numero="'+value.Nr_Fattura+'" data-hrf="#" style="background-color:#daf3cb!important;">';
            rows+="<td><span class='liveclass' data-toggle='tooltip' data-placement='top' title='in tempo reale con mubi'><i class='fa fa-wifi' aria-hidden='true'></i>&nbsp;&nbsp;Live</span>"+value.Data_Emissione+"</td>";
            rows+="<td>"+value.Nr_Punto_Di_Riconsegna+"</td>";
            rows+="<td>"+value.Nr_Fattura+"</td>";
            rows+="<td data-avaiable=''><div class='spiner-bill'><div class='sk-spinner sk-spinner-fading-circle'><div class='sk-circle1 sk-circle'></div><div class='sk-circle2 sk-circle'></div><div class='sk-circle3 sk-circle'></div><div class='sk-circle4 sk-circle'></div><div class='sk-circle5 sk-circle'></div><div class='sk-circle6 sk-circle'></div><div class='sk-circle7 sk-circle'></div><div class='sk-circle8 sk-circle'></div><div class='sk-circle9 sk-circle'></div><div class='sk-circle10 sk-circle'></div><div class='sk-circle11 sk-circle'></div><div class='sk-circle12 sk-circle'></div></div></div></td>";
            rows+="<td>"+value.Data_Scadenza+"</td>";
            rows+="<td>"+value.Totale_a_Pagare+"</td>";
              rows+="<td>"+value.Importo_Residuo+"</td>";
            rows+="<td>"+value.Pagata+"</td>";
            rows+="<td>"+value.Rateizzata+"</td>";

            //qui iniziano i movimenti di fattura
              $.each(value.Movimenti,function(index2,value2){
                 rows+="<tr>";
                 rows+="<td colspan='2'><i style='font-size: 10px;'>"+value2.Data_Operazione+"</i></td>";
                 rows+="<td colspan='2'><i style='font-size: 10px;'>"+value2.Descrizione+"</i></td>";
                 rows+="<td colspan='2'><i style='font-size: 10px;'>"+value2.Data_scadenza+"</i></td>";
                 rows+="<td colspan='1'><i style='font-size: 10px;'>"+value2.Importo+"</i></td>";
                 rows+="<td colspan='1'><i style='font-size: 10px;'>"+value2.Tipo_di_documento+"</i></td>";
                 rows+="<td colspan='3'><i style='font-size: 10px;'>"+value2.Codice_metodo_di_pagamento+"</i></td></tr>";
              });
            
            
            rows+="</tr>";
         
        });
        $('#fat_tab').find('tbody').append(rows);
            $( "td:contains('VERO')" ).each(function( index ) {
                $(this).html('<i  style="color:green" class="fa fa-check" aria-hidden="true"></i>');
            });
            $( "td:contains('FALSO')").each(function( index ) {
            $(this).html('<i  style="color:red" class="fa fa-times" aria-hidden="true"></i>');
            });
                
                
       getAviableBills();
      }).fail(function() {
    alert( "error" );
  });

   if($('#smartbox_stato_utenza').html().trim()=='Cessata')
   {
      $('#smartbox_stato_utenza').css('color','red'); 
      $('#smartbox_stato_utenza').parent().css('border-bottom','3px solid red');
   }
   else if($('#smartbox_stato_utenza').html().trim()== 'In Cessazione')
   {
        $('#smartbox_stato_utenza').css('color','purple'); 
      $('#smartbox_stato_utenza').parent().css('border-bottom','3px solid purple');
   }
   else if($('#smartbox_stato_utenza').html().trim()=='Attiva')
   {
      $('#smartbox_stato_utenza').css('color','green'); 
      $('#smartbox_stato_utenza').parent().css('border-bottom','3px solid green');  
   }
   else
   {
     
      $('#smartbox_stato_utenza').parent().css('border-bottom','3px solid grey');  
   }
 
    getAlertMessage();
    
    //CURVE CON CHART JS
    curv=JSON.parse($('#curves').val());
    curvLettureStoriche=JSON.parse($('#curvesLettureStoriche').val());
    
    var backgroundColor='';
    
    if($('#tipo').val()=='EE')
     {
       backgroundColor= 'rgba(255, 234, 130, 0.76)' ; 
     }
     else
     {
      backgroundColor= 'rgba(30, 193, 255, 0.76)' ;    
     }
 
    //parametro comune ad entrambe le curve
    var lineOptions = {
        responsive: true
    };

    //CURVE DI CONSUMO ENERGIA
    $.each( curv, function( key, value ) {
            label.push(key);
            values.push(value);         
          });                
          
        var lineData = {
            labels: label,
            datasets: [
                {
                    label: "Consumi Fatturati",
                    lineTension: 0,
                    backgroundColor:backgroundColor,
                    borderColor: "rgba(26,179,148,0.7)",
                    pointBackgroundColor: "rgba(26,179,148,1)",
                    pointBorderColor: "#fff",
                    data:values
                }
            ]
        };
         
        var ctx = document.getElementById("lineChart").getContext("2d");
        new Chart(ctx, {type: 'line', data: lineData, options:lineOptions});
        
        //CURVE STORICHE DI CONSUMO ENERGIA       
        $.each( curvLettureStoriche, function( key, value ) {
            labelLettureStoriche.push(key);
            valuesLettureStoriche.push(value);         
          });    
          
        var lineDataLettureStoriche = {
            labels: labelLettureStoriche,
            datasets: [
                {
                    label: "Consumi Storici",
                    lineTension: 0,
                    backgroundColor:"rgba(255, 130, 130, 1.0)",
                    borderColor: "rgba(255,0,0,1.0)",
                    pointBackgroundColor: "rgba(255,0,0,1.0)",
                    pointBorderColor: "#fff",
                    data:valuesLettureStoriche
                }
            ]
        };
        
        var ctx2 = document.getElementById("lineChartLettureStoriche").getContext("2d");
        new Chart(ctx2, {type: 'line', data: lineDataLettureStoriche, options:lineOptions});
 
});
</script>
@endsection