@extends('layouts.app')

@section('title', 'Tools')

@section('content')
<style>
    .spinner {
  margin: 100px auto 0;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #1ab394!important;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

    .mes
    {
    color: #ed5565;
    list-style-type: none;
    }
       .tooltipsy
    {
        padding: 10px;
        max-width: 200px;
        color: #303030;
        background-color: #f5f5b5;
        border: 1px solid #deca7e;
    }
    
    .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: 100px;
    height: 100px;
    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;
}

.headtitle
{
    width: 100%;
    display: inline-block;
    padding: 10px 0 10px 0;
    background: #1ab394;
    color: #fff;
    font-size: medium;
}
.activeclass
{
    border-bottom: 4px solid #adc;
    padding-bottom: 1.1%;

}

.cessata:hover
{
        border: 4px solid red;
}
.cessata>span
{
    color:red;
}


.attiva>span{
    color:1ab394; 
}
.attiva:hover
{
        border: 4px solid #1ab394;
}
 
</style>
<div class="row wrapper border-bottom white-bg page-heading">
                <div class="col-lg-10">
                    <h2>Agenti</h2>
                    <ol class="breadcrumb">
                        <li>
                            <a href="/">Home</a>
                        </li>
                        <li>
                            <a>Agenti</a>
                        </li>
                        <li>
                            <a href='/agenti/anagrafiche'> elenco</a>
                        </li>
                        <li class="active">
                            <strong>{{$agente->Nome}}</strong>
                        </li>
                    </ol>
                </div>
             
 </div>  

    <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row equal">
                <div class="col-md-12" >
                    
                <div class="ibox">
                    <div class="ibox-content">
                        <h2><i class="fa fa-lg fa-suitcase" aria-hidden="true"></i>&nbsp;Dettaglio Agente  {{$agente->Nome}}</h2>
                        <br><br>
                          <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> Dettagli Agente</a></li>
                            <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false"><i class="fa fa-map"></i>Provvigioni</a></li>
                            <li class=""><a data-toggle="tab" href="#tab-3" aria-expanded="false"><i class="fa fa-map"></i>Dati Agente</a></li>


                        </ul>
 
                        <div class="tab-content">
                            <div id="tab-1" class="tab-pane active">
                                <div class="panel-body">
                                  
                                </div>
                            </div>
                            <div id="tab-2" class="tab-pane">
                                <div class="panel-body">
                                  @include('agenti.agenteCollegamenti_provvigioniBeta')
                                </div>
                            </div>
                            <div id="tab-3" class="tab-pane">
                                <div class="panel-body">
                               
                                </div>
                            </div>
                        </div>

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

        </div>

    </div>


<div class="modal fade in" id="modalinvito" data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        
          
            <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">Invito a Fatturare</h4>
               
            </div>
            <div class="modal-body">
                <iframe id="documentView" src="" download="invito.pdf" width="100%" height="550" frameborder="0" kwframeid="1"></iframe>
     
               
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Chiudi</button>

            </div>
             
        </div>
           
    </div>
</div>
@endsection 

@section('scripts')

<script>
    
    tbldata=[];
    tblArchivio=$('#tableArchivioProvvigioni').dataTable({pageLength:10
        ,bSort : false,
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]}
       );

     $('#tableprovvigioni').dataTable({pageLength:10
        ,bSort : false,
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]}
       );

    
  



     
     function populateTable()
     {
      tblArchivio.fnDestroy();
      tbl='';
      $.each(tbldata,function(key,val)
       {
    
           val.Residenziale=$.isNumeric(val.Residenziale)?val.Residenziale:0;
           val.Business=$.isNumeric(val.Business)?val.Business:0;
           val.Condomini=$.isNumeric(val.Condomini)?val.Condomini:0;
           totale=val.Residenziale+val.Condomini+val.Business;
           codice=$('input[name="agente_codice"]').val();
           datanew=key.replace('/','-').replace('/','-');
            tbl+="<tr  data-codice='"+codice+"' data-nominativo='"+$('input[name="provvigione[agente_Descrizione]"]').val()+"' data-data_invito='"+key+"' data-totale_residenziale='"+val.Residenziale+"' data-totale_business='"+val.Business+"' data-totale_condomini='"+val.Condomini+"' data-totale_fatturato='"+totale+"'>"+
                 "<td>"+key+"</td>"+
                 "<td>"+val.Residenziale+"</td>"+
                 "<td>"+val.Business+"</td>"+
                 "<td>"+val.Condomini+"</td>"+
                 "<td>"+totale.toFixed(2)+"</td>"+
                 "<td><div style='display:inline-flex!important' class='col-md-12'><a style='margin: 2px;' class='btn btn-success pull-right' download href='/uploads/calcoliProvvigioni/"+codice+"/"+datanew+"/calcolo.xls'><i class='fa fa-file'></i></a><button style='margin: 2px;' type='button' class='btn btn-danger pull-right' style='' onclick='deleteCalcolo(this)'><i class='fa fa-trash'></i></button><button style='margin: 2px;' type='button'  class='btn btn-warning pull-right' style=''><i class='fa fa-money'></i></button><button style='margin: 2px;' type='button'  data-toggle='modal' data-target='#modalinvito' class='btn btn-primary pull-right' style=''><i class='fa fa-envelope-open-o' aria-hidden='true'></i></button></div></td>"+
                 "</tr>";
       });
       $('#tableArchivioProvvigioni').find('tbody').empty().append(tbl);

     }   
     
     function deleteCalcolo(e)
     {
        $('#loaded_pan').hide();
        $('#load_pan').show();
           var obj=$(e).parents('tr'); 
           var data_invito=$(obj).data('data_invito');
           var codice=$(obj).data('codice');
           console.log(obj);
           
           $.post( "/agenti/anagrafiche/detail/deletecalcolo", { _token:$('meta[name="csrf-token"]').attr('content'), data: data_invito, codice: codice } ,function( data ) {
            cerca();
             $('#loaded_pan').fadeIn();
             $('#load_pan').hide();
           });

     }
     
     
    function cerca()
    {
       
     $.getJSON("/api/agenti/archivioCalcoloProvvigioni", { codice: $('input[name="provvigione[codice_agente]"]').val() } )
        .done(function( json ) {
         tbldata=json;
         populateTable();
        })
        .fail(function( jqxhr, textStatus, error ) {
          var err = textStatus + ", " + error;
          console.log( "Request Failed: " + err );
      });   
    }
    function postSplittedRequest(jobs)
    {
        alert(jobs);
                $.ajax( {
                type: "POST",
                url: "/agenti/provvigioni/calcolaSplittedBeta",
                data: jobs,
                dataType:"html",
                success: function( data ) {
                alert(data); 
                }
              } );
    }
  
  $(document).ready(function() {
  
         
        $('#dettagli-list').fadeIn();
        $('#load').hide();
        $('#calcolo').on('click',function(){
             $('#calcolo').attr('disabled','disabled');
            // $('#calcolo').html('non mi devi cliccare due volte maledetta!!!');
            $('#loaded_pan').hide();
             $('#load_pan').show();
           var form = $('#form_calcolo');
              $.ajax( {
                type: "POST",
                url: form.attr( 'action' ),
                data: form.serialize(),
                success: function( data ) {
                console.log(data);  
                postSplittedRequest(JSON.stringify(data));
              /*  $('#calcolo').removeAttr('disabled'); 
                 $('#calcolo').html('CALCOLA');
                var a = document.createElement('a');
                var url = window.URL.createObjectURL(data);
                a.href = url;
                a.download = 'calcolo.xls';
                a.click();
                window.URL.revokeObjectURL(url);
                cerca();
                     $('#loaded_pan').fadeIn();
                    $('#load_pan').hide(); */
                }
                
              } );
            });
        });       

</script>

@endsection