@extends('layouts.app')

@section('title', 'Clienti')

@section('content')
<style>

.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;
}
   .flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    background-color: #fff;
}

.flex-item {
    background-color: #fff;
    width: 120px;
    height: 120px;
    margin: 10px;
}
.flex-item:hover{
  
    border:4px solid #adc; 
    cursor: pointer;

}
.flex-item>span{
    
    width: 100%;
   
    color: #1ab394;
    /* margin: 17%; */
    font-size: small;
    font-weight: 700;
}

</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='#'>Anagrafica</a>
                        </li>
                    
                         <li class="active">
                              <strong><a>{{$anagrafica->Nr_}}</a></strong>
                              <input type="hidden" id="cliente_id" value="{{$anagrafica->Nr_}}">
                              
                         </li>
                    </ol>
                </div>
             
 </div>  
  
  
 

<div class="wrapper wrapper-content animated fadeInRight fd" >
     <div class="row">
       <div class="col-md-6">  
        <div class="ibox">
          
            <div class="ibox-content">

                <div class="row">


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

                        <div class="form-group">
                            <label>Nominativo</label> 
                            <input type="text"  readonly placeholder="" value="{{$anagrafica->Nome}}" class="form-control"></div>
                    </div>

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


                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">

                        <div class="form-group">
                            <label>Codice Fiscale</label> 
                            <input type="text"  readonly placeholder="" value="{{$anagrafica->Codice_fiscale}}" class="form-control"></div>
                    </div>

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

                        <div class="form-group">
                            <label>Partita Iva</label> 
                            <input type="text"  readonly placeholder="" value="{{$anagrafica->Partita_IVA}}" class="form-control"></div>
                    </div>
                </div>
        
                <div class="row">
                    <div class="col-md-12">

                        <div class="form-group">
                            <label>Telefono</label> 
                            <input type="text"  readonly placeholder="" value="{{$anagrafica->Telefono}}" class="form-control"></div>
                    </div>

                </div>

                <div class="row">


                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Indirizzo</label> 
                            <input type="text"  readonly placeholder="" value="{{$anagrafica->Indirizzo}}" class="form-control"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">

                        <div class="form-group">
                            <label>Cap</label> 
                            <input type="text"  readonly placeholder="" value="{{$anagrafica->CAP}}" class="form-control"></div>
                    </div>

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

                        <div class="form-group">
                            <label>Città</label> 
                            <input type="text"  readonly placeholder="" value="{{$anagrafica->Citta}}" class="form-control"></div>
                    </div>
                    <div class="col-md-4">

                        <div class="form-group">
                            <label>Provincia</label> 
                            <input type="text"  readonly placeholder="" value="{{$anagrafica->Cod_Provincia}}" class="form-control"></div>
                    </div>
                </div>

                

            </div>
            
        </div>
       </div>
         <div class="col-md-6"> 
             <div class='ibox'>
                 <div class="ibox-content" style="display: -webkit-box;" >  
               <div class='col-md-12'>
                  
                        <h1>Saldo Cliente: € {{number_format($saldo,2,',','.')}} </h1>
                        <h4 style="color:red">(il presente saldo &egrave relativo alle fatture emesse e non pagate sui contratti associati al cliente)</h4>
                           
                            
                </div>
                     </div>
             </div>
             <div class="ibox" >
          
               
                <div class="ibox-content" style="display: -webkit-box;">
                    
                    <div class="col-md-12">
                        <strong class="headtitle">&nbsp;Contratti associati</strong>
                        <div class="slimScrollDiv">
                            <div  id="item_container" class="flex-container">

                                @foreach($links as $link)

                                <div class="flex-item" data-href="/clienti/anagrafiche/cliente?codice={{$link->Nr_}}" onclick="navigateUt(this)" ><span>{{$link->Nr_Punto_Di_Riconsegna}}</span><img alt="image" class="img-circle" id="service_icon" width="86px" src="{{$link->Cod_Tipo_Servizio=='EE'?'/images/luce.png':'/images/gas.png'}}"></div>

                                @endforeach

                            </div>
                        </div>

                    </div>   

                </div>
           </div>

             
         </div>
     </div>
    
    <div class="row">
        <div class="col-md-12">
               <div class="table-responsive">
                <table id="tab_mdc" class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>Operatore</th>
                            <th>Pdp</th>
                            <th>Data Contatto</th>
                            <th>Tipo Contatto</th>
                            <th>Note</th>
                            <th></th>


                        </tr>
                    </thead>
                    <tbody>

            
                        <tr>

                        </tr>
                   

                    </tbody>
                </table>
            </div>
            
        </div>
    </div>
   
</div>
  
  
  


    



@endsection

@section('scripts')
@parent




<script>
    
       function getMdc()
        {
            $.getJSON("/clienti/anagrafiche/cliente/mdc_clt?codice=" + $('#cliente_id').val(), function(json) {

            if (json != "false")
            {
                console.log(json);
                mdc = json;
                html = '';
                $.each(mdc, function(key, value){

                html += "<tr data-id='" + value.data.id + "'>";
                html += "<td><img src='" + value.user.avatar + "' height='80' style='padding:10px;float:left' /><span style='display: block;font-weight: 800;padding-top: 12px;'>" + value.user.name + "</span><span style='display: block'>" + value.user.email + "</span></td>";
                html+="<td>"+value.data.Nr_Punto_Di_Riconsegna+"</td>";
                html += "<td>" + moment(value.data.created_at).format("DD/MM/YYYY") + "</td>";
                html += "<td>" + value.data.motivo + "</td>";
                html += "<td>" + value.data.note + "</td>";
                html += "</tr>";
                });
                $('#tab_mdc').find('tbody').empty().append(html);
                $('.table-responsive').slimScroll({
                height: '350px',
                });
            }

            });
        }
    
    function navigateUt(e)
    {
       var href=$(e).data('href');
         window.open(href, '_self');
    }
    
  $('.slimScrollDiv').slimScroll({
                        height: '285px'
                       
                    });
    getMdc();
</script>
@endsection