@extends('layouts.app')

@section('title', 'Utenti')

@section('content')

@include('anagrafiche.head', ['tipoutenza' => $tipoutenza,'id_tipo'=>$utenza_id])

<input type="hidden" id="ut_tipo" value="{{$tipoutenza}}">
<input type="hidden" id="ut_id" value="{{$utenza_id}}">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-12 text-right">
            
            </div> 
        </div>
                <div class="row">
                    <div id="items" style="display: none"></div>
                    </div>
                </div>
   </div>


@endsection

@section('scripts')
<script>
    
    
 
function ricercaUtenze()
{
    id=$('#ut_id').val();
    tipo=$('#ut_tipo').val();
    ricerca=-1;
    if(!ricercaGlobale)
    {
        ricerca=$('#top-search').val()!=''?$('#top-search').val():-1;
    }
    $('#items').empty();
      $.getJSON( "/api/users/list?type="+tipo+"&ext="+id+"&ricerca="+ricerca, function( data ) {
        var html='';

         $.each( data, function( key, val ) {
             if(!data[key].daAgenzia)
             {
                 lbl="";
                  color="#1ab394";
             }
                
             else{
             color="#2b9192";
             lbl="<label class='label label-warning'>assegnato ad agenzia</label>";
             }
              
             html+='<div class="col-lg-3"><a href="/utenze/view/'+data[key].id+'"><div class="widget style1 navy-bg" style="background-color:'+color+'"><div class="row"><div class="col-xs-4"><img width="60" alt="image" class="img-circle" src="'+data[key].avatar+'"></div><div class="col-xs-8 text-right"><span> '+data[key].email+' </span><h3 class="font-bold">'+data[key].name+'</h3><div>'+lbl+'</div></div></div></div></a></div>';
             
                 
        });
        $('#items').append(html);

        $('#items').fadeIn();
      }); 
}

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

$(document).ready(function() {
    
    $('#top-search').on('keyup',function(){
        delay(function(){
            if(!ricercaGlobale )
            {
                if($('#top-search').val().length>2)
                {
                   ricercaUtenze();   
                }
                if($('#top-search').val()=='')
                {
                    ricercaUtenze(); 
                }

            }
              }, 500 );
       
       
        
    });
    
    ricercaUtenze();
    $("#modalCrea").on('show.bs.modal', function () {
             $("#modalCrea").find('input').each(function( index, value ) {
              if($(value).attr('type')!='hidden')   
              $(value).val('');   
             });
    });
    $('#salva_ut_btn').on('click',function(){
          var data=$('#form_ut').serialize();
          var url=$('#form_ut').attr('action');
          $('input').removeClass('error');
          $('.error').remove();
          $.ajax({
            type: "POST",
            url: url,
            data: data,
            error: function(xhr, status, error) {
                
                if(xhr.status==422)
                {
                  messages=JSON.parse(xhr.responseText);
                  console.log(messages);
                  $.each(messages,function(index, value) {
                    
                      html='<label class="error" for="'+index+'">'+value+'</label>'
                      $('[name="'+index+'"]').addClass('error').parent().append(html);
                 
                    });
                }
         
            },
            success: function(response){
               ricercaUtenze(); 
               $("#modalCrea").modal('hide');
                 
            },
    
          });
          
    });
    
});

</script>
@endsection