@extends('layouts.app')

@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{
       margin-bottom: 40px;
    background-color: #eae9e9!important;
    font-size: 20px;
    padding-bottom: 10px;
    
}


.add{
        float: right;
    padding: 15px 30px;
    margin: 17px 0px;
    background-color: #8BC34A!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: #034d7b;
    margin-bottom: 0px;
    padding: 0 20px;
    color: white;
}
.table {
    font-size: large;
}

.table > thead > tr > th {
    border-bottom: 6px solid #DDDDDD;
    vertical-align: bottom;
}
thead {
    background: #23c6c8;
    color: #fff;
    /* font-weight: bolder; */
}
.exbtn{
    background: none;
    /* border: 2px solid #dcbebe; */
    
}
.pagination > li > a, .pagination > li > span {
    background-color: #009688;
    border: 1px solid #DDDDDD;
    color: inherit;
    float: left;
    line-height: 1.42857;
    margin-left: -1px;
    padding: 15px 15px;
    position: relative;
    text-decoration: none;
    color: white;
}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background-color: #f4f4f4;
    border-color: #00BCD4;
    color: inherit;
    cursor: default;
    z-index: 2;
}
.chosen-container.chosen-container-single {
    width: 100% !important;
}
</style>

<div class="wrapper wrapper-content animated fadeInRight">
    <div class='row'>
        <div class='col-md-8 col-sm-12 text-left' style="background-color:white;box-shadow: 0px 4px #9e9e9e80;">
            <div id="title">
                
            </div> 
        </div>
        <div class='col-md-4 col-sm-12 text-right'>
            <a href="#" data-toggle="modal" data-target="#modal_crea_pratica"> <span class="label label-danger add"  style="float:right">
                             <i class="fa fa-plus fa-5x"></i>
                             <small><br>crea pratica</small>
                </span></a>
           
        </div>
    </div>
  
    <div class="row">
        <div id="elenco_totali">
     
        </div>
    
    </div>
    
    <div class="row filter">

        <div class="col-md-6 col-sm-12">
            
            
            <label class="filter-label">Filtra su Pratiche
                <smal style='font-size: small;'>(Nominativo,Pdp,Codice Fiscale,Partita Iva,Creatore)</smal>
                <button data-toggle="modal"  class="btn btn-danger btn-md" data-target="#modal_aggiungi_filtro"><i class="fa fa-wrench"></i>&nbsp;Aggiungi filtro</button>
            </label>
    <input type="text"  onkeyup="cercaElenco(this)" class="form-control" style="font-size: 24px;">
    
    

    
        </div>
        
    </div>
        
   <div class="scroll">    
        
    <div class="row">
        <div >
            
            
            
                <div class="clients-list">
                        <div class="full-height-scroll">
                            <div id="richieste_elenco">
                          
                            </div>
                  
                        </div>
                    </div>
            
            
        </div>

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

@component('components.richieste_modal')
@slot('title')
{{"crea_pratica"}}
@endslot
@slot('action')
{{"/richieste/createPraticaById"}}
@endslot
@slot('body')
<div class="col-md-12">
    <h2>Seleziona la tipologia di richiesta da creare</h2>
</div>
<div class="col-md-12">
    <select class="form-control" id="richiesta_id" name="richiesta[tipologia]">
        @foreach($tipologia_richieste as $tipologia_richiesta)
        @if($tipologia_richiesta->id ==14 || $tipologia_richiesta->id ==8 ||$tipologia_richiesta->id ==9)

        @if(Auth::user()->users_type_id < 3)
        <option value="{{$tipologia_richiesta->id}}"{{ (old("richiesta.tipologia") == $tipologia_richiesta->id ? "selected":"") }} >{{$tipologia_richiesta->nome}}</option>
        @endif
        @else
        <option {{ (old("richiesta.tipologia") == $tipologia_richiesta->id ? "selected":"") }} value="{{$tipologia_richiesta->id}}">{{$tipologia_richiesta->nome}}</option>
        @endif
        @endforeach
    </select>

</div>
   
@endslot
@endcomponent

@component('components.richieste_modal')
@slot('title')
{{"aggiungi_filtro"}}
@endslot
@slot('action')
{{"/richieste/createPraticaById"}}
@endslot
@slot('body')
<div class="col-md-12">
    <h2>Seleziona il filtro</h2>
</div>
<div class="col-md-12">
    <select class="form-control" id="" >
 
    </select>

</div>
   
@endslot
@endcomponent





@endsection
@section('scripts')
<script>
    

        var getUrlParameter = function getUrlParameter(sParam) {
        var sPageURL = window.location.search.substring(1),
            sURLVariables = sPageURL.split('&'),
            sParameterName,
            i;

        for (i = 0; i < sURLVariables.length; i++) {
            sParameterName = sURLVariables[i].split('=');

            if (sParameterName[0] === sParam) {
                return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
            }
        }
    };
   
    
      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()); 
    }
    
    function elencoPraticheFiltred(search){
        $('#richieste_elenco').empty().append(spinner);
           
       
        if (searchRequest){
            searchRequest.abort();
        }
        
        
        if(search!="")
        {
         searchRequest = $.get('/richieste/elencoPratiche_n_d', {search_term:search,req_type:getUrlParameter("req_type"),tipologia:getUrlParameter("tipologia")},function(data){
           
             $('#richieste_elenco').empty().append(data.table);
             $('#elenco_totali').empty().append(data.totali);
             
             var tipo_richiesta=getUrlParameter("req_type");
             var subtitle="";
              $('#sub').empty();
             switch(tipo_richiesta){
                 case 'NEW':
                       subtitle="<small><i>#nuove</i></small><span style='color:#FF9800;font-size: medium'>#In stato:</span><small style='background-color: #034d7b;color: white;margin: 17px;padding: 5px;font-size: small;border-radius: 14px;'><i>&nbsp;#nuove</i></small><small style='font-size: small;'><i style='margin: 0 24px;color: white;padding: 4px 13px;background: #034d7b;border-radius: 16px 16px;'>#che contengono("+search+")</i></small>";
                 break;
                 case 'TODO':
                      subtitle="<small><i>#da lavorare</i></small><span style='color:#FF9800;font-size: medium'>#In stato:</span><small style='background-color: #034d7b;color: white;margin: 17px;padding: 5px;font-size: small;border-radius: 14px;'><i>&nbsp;#da lavorare</i></small><small style='font-size: small;'><i  style='margin: 0 24px;color: white;padding: 4px 13px;background: #034d7b;border-radius: 16px 16px;'>#che contengono("+search+")</i></small></small>";
                 break;
                 case 'COMPLETED':
                       subtitle="<small><i>#completate</i></small><small style='font-size: small;'><i  style='margin: 0 24px;color: white;padding: 4px 13px;background: #034d7b;border-radius: 16px 16px;'>#che contengono("+search+")</i></small></small>";
                 break;
                 case 'ARCHIVE':
                     
                       subtitle="<small><i>#archivio</i></small><span style='color:#FF9800;font-size: medium'>#In stato:</span><small style='background-color: #034d7b;color: white;margin: 17px;padding: 5px;font-size: small;border-radius: 14px;'><i>&nbsp;#archivio</i></small><small style='font-size: small;'><i  style='margin: 0 24px;color: white;padding: 4px 13px;background: #034d7b;border-radius: 16px 16px;'>#che contengono("+search+")</i></small></small>";
                 break;
             }
             subtitle+="<a href='/richieste/new' style='box-shadow: 0px 4px #c8c8c9;margin: -30px;background: #ed5666;color: white;padding: 0PX 15PX;FLOAT: RIGHT;FONT-WEIGHT: 700;'>X</a>";
             
              $('#sub').append(subtitle);
    
         }); 
        }
        else
        {
        searchRequest =$.get('/richieste/elencoPratiche_n_d',{req_type:getUrlParameter("req_type"),tipologia:getUrlParameter("tipologia")},function(data){
             $('#richieste_elenco').empty().append(data.table);
             $('#elenco_totali').empty().append(data.totali);
             var title="<h1><span><a href='/richieste/new'><i class='fa fa-home'></i></a></span> <i class='fa fa-mail-forward' style='font-size: medium;'></i> <span style='color:#FF9800;font-size: medium'>#Tipo Richiesta:</span><div id='sub' style='display:inline'><small style='background-color: #034d7b;color: white;margin: 17px;padding: 5px;font-size: small;border-radius: 14px;'><i>#"+data.title+"</i></div></small></h1>";
             $('#title').empty().append(title);
             
             var tipo_richiesta=getUrlParameter("req_type");
             var subtitle="";
             switch(tipo_richiesta){
                 case 'NEW':
                       subtitle="<i class='fa fa-mail-forward' style='font-size: medium;'></i><span style='color:#FF9800;font-size: medium'>#In stato:</span><small style='background-color: #034d7b;color: white;margin: 17px;padding: 5px;font-size: small;border-radius: 14px;'><i>&nbsp;#nuove</i></small>";
                 break;
                 case 'TODO':
                      subtitle="<i class='fa fa-mail-forward' style='font-size: medium;'></i><span style='color:#FF9800;font-size: medium'>#In stato:</span><small style='background-color: #034d7b;color: white;margin: 17px;padding: 5px;font-size: small;border-radius: 14px;'><i>#da lavorare</i></small>";
                 break;
                 case 'COMPLETED':
                       subtitle="<i class='fa fa-mail-forward' style='font-size: medium;'></i><span style='color:#FF9800;font-size: medium'>#In Stato:</span><small style='background-color: #034d7b;color: white;margin: 17px;padding: 5px;font-size: small;border-radius: 14px;'><i>#completate</i></small>";
                 break;
                 case 'ARCHIVE':
                     
                       subtitle="<i class='fa fa-mail-forward' style='font-size: medium;'></i><span style='color:#FF9800;font-size: medium'>#In Stato:</span><small style='background-color: #034d7b;color: white;margin: 17px;padding: 5px;font-size: small;border-radius: 14px;'><i>#archivio</i></small>";
                 break;
             }
             subtitle+="<a href='/richieste/new' style='box-shadow: 0px 4px #c8c8c9;margin: -30px;background: #ed5666;color: white;padding: 0PX 15PX;FLOAT: RIGHT;FONT-WEIGHT: 700;'>X</a>";
             
              $('#sub').append(subtitle);
             
             
             
             $('table').DataTable({ "lengthMenu": [[8, 10, 25, 100, 150, -1], [8, 10, 25, 100, 150, 'Tutte']], dom: 'Blfrtip',
                 buttons: [
                { "extend": 'pdf', "text":"<i class='fa fa-file-excel-o fa-2x' style='background-color:#3e7300!important;padding:3px 15px;color:white'></i>","className": 'btn btn-default btn-md exbtn' }
                ],
                columnDefs: [
            {
                targets: ['_all'],
                className: 'mdc-data-table__cell'
            }
            ]
             });
             
             $('#tableclient_filter').hide();
             
            
             
         });
            
        }
    };
    
  //  $('select').ajaxChosen();

</script>
@endsection