@extends($layout)


@section('createRichiesta', 'Richieste')

@section('content')
<style>
    .panel-info {
   border-style: none;
    
}
.jobs{
        margin-bottom: 10px;
    background-color: #d8d8d8!important;
    box-shadow: 0px 8px 0px -4px #bdbdbd;
}
.filter{
    
    background-color: #eae9e9!important;
    font-size: 20px;
    padding-bottom: 10px;
    
}


.add{
        float: left;
 
    padding: 13px 15px;
    margin: 9px 0px;
    background-color: #8BC34A!important;
    border-radius:0px!important;
    
}
.search{
        float: right;
    padding: 15px 30px;
    margin: 17px 12px;
    background-color: #607D8B!important;
}
.sk-spinner-circle .sk-circle {
    width: 100%;
    height: 500%;
    position: absolute;
    left: 0;
    top: 0;
}
.filter-label{
    background: #009688;
    margin-bottom: 0px;
    padding: 0 20px;
    color: white;
}
#load{
    display: none;
}

    .btn-custom{
 background-color: rgba(255,255,255,0);
    color: white;
    margin: 5px;
    border-radius: 0!important;
    color: #3c763d;
    border: 0px solid;
    }
       .btn-custom:hover{
 background-color: rgba(255,255,255,0);
    color: white;
    margin: 5px;
    border-radius: 0!important;
    color: #3c763d;
    border: 0px solid;
    font-size: larger;
    }


</style>


<div class="wrapper wrapper-content animated fadeInRight" id='loading'>
<div class="spiner-example">
    <div class="sk-spinner sk-spinner-cube-grid">
        <div class="sk-cube"></div>
        <div class="sk-cube"></div>
        <div class="sk-cube"></div>
        <div class="sk-cube"></div>
        <div class="sk-cube"></div>
        <div class="sk-cube"></div>
        <div class="sk-cube"></div>
        <div class="sk-cube"></div>
        <div class="sk-cube"></div>
    </div>
</div>
</div>


<div class="wrapper wrapper-content animated fadeInRight" id='load'>
    <div class='row'>
        <input type="hidden" id="richiesta_tipologia_type"/>
        <input type="hidden" id="richiesta_req_type"/>
     
        <div id="navigator">
            
        </div>
        

        <div class='col-md-2 text-left' >
            
            
            @if(Auth::user()->users_type_id<3)
             <a href='/richieste/createRichiestaNew' target="_blank" style='display:inline-block ' id="crea_pratica">
            @else
             <a href='/richieste/createRichiesta' target="_blank" style='display:inline-block ' id="crea_pratica">
            @endif
           
            <span class="label label-danger add">
             <span style='font-size: medium;'><i class="fa fa-plus"></i>&nbsp;crea pratica</span>
             </span>
                
            </a>
        </div>
    </div>
  
    <div class="row">
        <div id="elenco_totali">
     
        </div>
    
    </div>
    
 @component('components.richiesta_tipologia_filters')
 @endcomponent
 
 @component('components.richiesta_table_filters')
 @endcomponent
        
   
        
    <div class="row">
        <div class="col-md-12" id="richieste_elenco">
            
            
        </div>

        </div>
    <div class='row'>
      
        
    </div>
    
   
        
   
        
        
    </div>
</div>
@if(Auth::user()->users_type_id<3)
@component('components.richieste_tools')
@endcomponent
@endif

@component('components.table_note_addon')
@endcomponent




@endsection


@section('scripts')




<script>
    $(document).ready(function() {
        $('#loading').hide();
        $('#load').fadeIn();
    });
  
     var searchRequest = null;
    var search="";
      var spinner="<div class='spiner-example'><div class='sk-spinner sk-spinner-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>";
   
  
        
        elencoPraticheFiltred(search);    
    function cercaElenco(e)
    {
   
       elencoPraticheFiltred($(e).val()); 
    }
 
    $(".scroll").slimscroll({'height':window.innerHeight-450});
    
    function drawTipologie(data){
            $('#richieste_elenco').empty().append(data.pratiche);
             $('#elenco_totali').empty().append(data.totali);
             $('#navigator').empty().append(data.navigator);
              $('#tipologia_filters').show();
             
            
             // Collapse ibox function
                $('.collapse-link').on('click', function (e) {
                 
                    e.preventDefault();
                    var ibox = $(this).closest('div.ibox');
                    var button = $(this).find('i');
                    var content = ibox.children('.ibox-content');
                    content.slideToggle(200);
                    button.toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');
                    ibox.toggleClass('').toggleClass('border-bottom');
                    setTimeout(function () {
                        ibox.resize();
                        ibox.find('[id^=map-]').resize();
                    }, 50);
                });   
                
                  $('#tipologia_filters').show();
                 $('#table_filters').hide();
    }
    
    function elencoPraticheFiltred(search){
        $('#richieste_elenco').empty().append(spinner);
        if (searchRequest){
            searchRequest.abort();
            
        }
        if(search!="")
        {
         searchRequest = $.get('/richieste/elencoPratiche_n', {term:search},function(data){
         drawTipologie(data);   
         }); 
        }
        else
        {
        searchRequest =$.get('/richieste/elencoPratiche_n',function(data){
        drawTipologie(data); 
         });
            
        }
    }
    
            
      
    

    

</script>
@endsection