@extends('layouts.app')
@section('content')
<div class="page-content row">
   <!-- Page header -->
   <div class="page-header">
      <div class="page-title">
         <h3> {{ $pageTitle }} <small>{{ $pageNote }}</small></h3>
      </div>
      <ul class="breadcrumb">
         <li><a href="{{ URL::to('dashboard') }}">{{ Lang::get('core.dashboard') }}</a></li>
         <li><a href="{{ URL::to('core/users?return='.$return) }}">{{ $pageTitle }}</a></li>
         <li class="active">{{ Lang::get('core.addedit') }} </li>
      </ul>
   </div>
   <div class="page-content-wrapper m-t">
      <div class="sbox animated fadeInRight">
         <div class="sbox-title">
            <h4> <i class="fa fa-table"></i>  <small>{{ $pageNote }}</small></h4>
         </div>
         <div class="sbox-content">
            <ul class="parsley-error-list" id="error">
               @foreach($errors->all() as $error)
               <li class="alert alert-danger">{{ $error }}</li>
               @endforeach
            </ul>
            <div id="image_error"></div>
                                       {!! Form::open(array('url'=>$pgurl,'id'=>'user_form', 'class'=>'form-horizontal','files' => true , 'parsley-validate'=>'','novalidate'=>'')) !!}
            <div class="col-md-6">
               <div class="form-group hidethis " style="display:none;">
                  <label for="Id" class=" control-label col-md-4 text-left"> {{ Lang::get('core.id') }} </label>
                  <div class="col-md-6">
                     {!! Form::text('id', $row['id'],array('class'=>'form-control','id'=>'id','placeholder'=>'',   )) !!} 
                  </div>
                  <div class="col-md-2">
                  </div>
               </div>
               <div class="form-group  " >
                  <label for="Group / Level" class=" control-label col-md-4 text-left"> {{ Lang::get('core.group_level') }} <span class="asterisk "> * </span></label>
                  <div class="col-md-6">
                     {!! Form::select('group_id',$user_groups,$row['group_id'],array('class'=>'select2','id'=>'group_id','placeholder'=>Lang::get('core.please_select'), 'required'=>'true' )) !!}
                  </div>
                  <div class="col-md-2">
                  </div>
               </div>
               <div class="form-group  " >
                  <label for="Username" class=" control-label col-md-4 text-left"> {{ Lang::get('core.Username') }} <span class="asterisk "> * </span></label>
                  <div class="col-md-6">
                     {!! Form::text('username', $row['username'],array('onkeyup'=>'validate()','class'=>'form-control', 'placeholder'=>'', 'required'=>'true'  )) !!} 
                  </div>
                  <div class="col-md-2">
                  </div>
               </div>
               <div class="form-group  " >
                  <label for="First Name" class=" control-label col-md-4 text-left"> {{ Lang::get('core.firstname') }}  <span class="asterisk "> * </span></label>
                  <div class="col-md-6">
                     {!! Form::text('first_name', $row['first_name'],array('class'=>'form-control', 'placeholder'=>'', 'required'=>'true'  )) !!} 
                  </div>
                  <div class="col-md-2">
                  </div>
               </div>
               <div class="form-group">
                  <label for="Last Name" class=" control-label col-md-4 text-left"> {{ Lang::get('core.lastname') }} <span class="asterisk "> * </span> </label>
                  <div class="col-md-6">
                     {!! Form::text('last_name', $row['last_name'],array('class'=>'form-control', 'placeholder'=>'', 'required'=>'true' )) !!} 
                  </div>
                  <div class="col-md-2">
                  </div>
               </div>
               <div class="form-group">
                  <label for="Date of Birth" class=" control-label col-md-4 text-left"> {{ Lang::get('core.dob') }} <span class="asterisk "> * </span> </label>
                  <div class="col-md-6">
                     {!! Form::text('dob', $row['dob'],array('class'=>'form-control date', 'placeholder'=>'', 'required'=>'true' )) !!} 
                  </div>
                  <div class="col-md-2">
                  </div>
               </div>
               <div class="form-group  " >
                  <label for="Group / Level" class=" control-label col-md-4 text-left"> {{ Lang::get('core.group_level') }} <span class="asterisk "> * </span></label>
                  <div class="col-md-6">
                     {!! Form::select('category_id[]',$category_id,$cat_id,array('multiple'=>'multiple','class'=>'select2','id'=>'category_id','placeholder'=>'', 'required'=>'true' )) !!}
                  </div>
                  <div class="col-md-2">
                  </div>
               </div>
               <div class="form-group  " >
                  <label for="Email" class=" control-label col-md-4 text-left"> {{ Lang::get('core.email') }} <span class="asterisk "> * </span></label>
                  <div class="col-md-6">
                     {!! Form::text('email', $row['email'],array('class'=>'form-control', 'placeholder'=>'', 'required'=>'true', 'parsley-type'=>'email' ,'onkeyup'=>'validate()'  )) !!} 
                  </div>
                  <div class="col-md-2">
                  </div>
               </div>
               <div class="form-group  " >
                  <label for="Phone" class=" control-label col-md-4 text-left"> {{ Lang::get('core.phone') }} <span class="asterisk "> * </span></label>
                  <div class="col-md-6">
                     {!! Form::text('phone', $row['phone'],array('class'=>'form-control', 'placeholder'=>'', 'required'=>'true','onkeyup'=>'validate()'  )) !!} 
                  </div>
                  <div class="col-md-2">
                  </div>
               </div>
               <div class="form-group  " >
                  <label for="Status" class=" control-label col-md-4 text-left"> {{ Lang::get('core.Status') }} <span class="asterisk "> * </span></label>
                  <div class="col-md-6">
                     <label class='radio radio-inline'>
                     {!! Form::radio('active',1,($row['active']==1) ? true:false,array()) !!} Active
                     </label>
                     <label class='radio radio-inline'>
                     {!! Form::radio('active',0,($row['active']==0) ? true:false,array()) !!} Inactive
                     </label>
                  </div>
                  <div class="col-md-2">
                  </div>
               </div>
               <div class="form-group  " >
                  <label for="Avatar" class=" control-label col-md-4 text-left"> {{ Lang::get('core.avatar') }} </label>
                  <div class="col-md-6">
                     <input  type='file' name='avatar' id='avatar' @if($row['avatar'] =='') class='required' @endif   />
                     <div>
                        @if($row['id'] !="" && $row['avatar'] != 0)
                        {!! SiteHelpers::customavatar($row['email'],$row['id'],'small','img-circle user_image_selector') !!}
                        <span class="pull-right" id="removeImage" style="margin-top:35px;color:red;cursor:pointer;">{{ Lang::get('core.x_remove') }}</span>
                        @else
                        <img class="img-circle user_image_selector" id="avatar-circle" border="2" width="100" />
                        <span class="pull-right" id="removeImage" style="margin-top:35px;color:red;cursor:pointer;display:none;">{{ Lang::get('core.x_remove') }}</span>
                        @endif
                     </div>
                  </div>
                  <div class="col-md-2">
                  </div>
               </div>
            </div>
            <div class="col-md-6">
               <div class="form-group">
                  <label for="ipt" class=" control-label col-md-4 text-left" > </label>
                  <div class="col-md-8">
                     @if($row['id'] !='')
                     {{ Lang::get('core.notepassword') }}
                     @else
                     Create Password
                     @endif	 
                  </div>
               </div>
               <div class="form-group">
                  <label for="ipt" class=" control-label col-md-4"> {{ Lang::get('core.newpassword') }}
                  @if($row['id'] =='')
                  <span class="asterisk ">*</span>
                  @endif
                  </label>
                  <div class="col-md-8">
                     <input name="password" type="password" id="password" autocomplete="off" class="form-control input-sm" value="" onblur ="password_validation()"
                     @if($row['id'] =='')
                     required
                     @endif
                     /> 
                  </div>
               </div>
               <div class="form-group">
                  <label for="ipt" class=" control-label col-md-4"> {{ Lang::get('core.conewpassword') }} 
                  @if($row['id'] =='')
                  <span class="asterisk ">*</span>
                  @endif
                  </label>
                  <div class="col-md-8">
                     <input name="password_confirmation" type="password" autocomplete="off" id="password_confirmation" class="form-control input-sm" value="" onblur ="password_validation()"
                     @if($row['id'] =='')
                     required
                     @endif		
                     />  
                  </div>
               </div>
            </div>
            <input name="removeeligible" type="text" id="removeeligible" value="0" hidden/>
            <div style="clear:both"></div>
            <div class="form-group">
               <label class="col-sm-4 text-right">&nbsp;</label>
               <div class="col-sm-8 btn-section">	
                  <button type="submit" name="apply" class="btn btn-info btn-sm" id="apply"><i class="fa  fa-check-circle"></i> {{ Lang::get('core.sb_apply') }}</button>
                  <button type="submit" name="submit" class="btn btn-primary btn-sm" id="save"><i class="fa  fa-save "></i> {{ Lang::get('core.sb_save') }}</button>
                  <button type="button" onclick="location.href='{{ URL::to('core/users?return='.$return) }}' " class="btn btn-success btn-sm "><i class="fa  fa-arrow-circle-left "></i>  {{ Lang::get('core.sb_cancel') }} </button>
               </div>
            </div>
            {!! Form::close() !!}
         </div>
      </div>
   </div>
</div>
<script type="text/javascript">
   var _URL = window.URL || window.webkitURL;
   var avatar_image = $('.user_image_selector');
   var image_error = $('#image_error');
   var remove_btn = $('#removeImage');
   $("#avatar").change(function(e) {
   	$("#removeeligible").attr("value", "0");
   	var file, img,height;
   	image_error.html("");
   	avatar_image.removeAttr('src');
       if ((file = this.files[0])) {
           img = new Image();
           img.src = _URL.createObjectURL(file);
           ext = $(this).val().split('.').pop().toLowerCase();
   		if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
   		   html_error ='<div class="alert alert-danger">invalid file type!</div>';
   		   image_error.html(html_error);
   		   avatar_image.removeAttr('src');
   		   remove_btn.hide();
   		   $(this).val("");
   		   return false;
   		}else{
   			avatar_image.attr('src',img.src);
   			remove_btn.show();
   			img.onload = function(){
   				if(this.width < 500 || this.height < 500){
   					html_error ='<div class="alert alert-danger">The selected image size is '+this.width+'px * '+this.height+'px. The Minimum allowed image size is 500px * 500px.</div>';
   				   	image_error.html(html_error);
   				   	$("#avatar").val("");
   				   	avatar_image.removeAttr('src');
   				   	remove_btn.hide();
   				   	return false;
   				}
   			}
   			
   		}
       }
   });
   
   remove_btn.on('click',function(){
   		$("#avatar_image").val("");
   		$("#avatar").val("");
   		avatar_image.removeAttr('src');
   		remove_btn.hide();	
   		console.log("dsadasd");
   		$("#removeeligible").attr("value", "1");
   });
   
   function validate(){
   	var a = $('#user_form').serialize();
    	var id = '';
    	if(!id){
    		id = 0;
    	}
   			$.ajax({
   				url:'{!! url('').'/core/users/validate/'!!}' + id,
   		        data:a,
   		        type:"POST",
   		        success:function(res){
           	   if($.isEmptyObject(res.success)){
           	   		err_array = res.error;
   					html_error = ""
   					for(var i = 0; i < err_array.length; i++) {
   						html_error += '<li class="alert alert-danger">'+ err_array[i] +'</li>';
   					}        	   		
           	   		$('#error').html(html_error);
   	   				$('#apply').attr("disabled", "disabled");	
   					$('#save').attr("disabled", "disabled");
                   }
                   else{
                   	$('#error').html("");
                   	$('#apply').removeAttr("disabled");
   					$('#save').removeAttr("disabled");
                   }
   		        
   		        },
   		        fail:function(){
   		            $('#error').html("");
   		            $('#apply').removeAttr("disabled");
   					$('#save').removeAttr("disabled");
   		        }
   			});
   
   
   }
   
   var check_spaces = function(string) {
       return string.indexOf(' ') === -1;
   };
   
   function password_validation(){
   
   	var password = $('#password').val();
   	var confirmpassword = $('#password_confirmation').val();
   
   	if (password !=""){
   	if((password.length > 5) && (password.length < 13) && (confirmpassword.length > 5) && (confirmpassword.length < 13) && (check_spaces(password)) && (check_spaces(confirmpassword))){
   		$('#error').html(""); 
   			if(confirmpassword != password){
   			html_error ='<li class="alert alert-danger">The password confirmation does not match</li>';
   			$('#error').html(html_error);
   			$('#apply').attr("disabled", "disabled");
   			$('#save').attr("disabled", "disabled");
   	}
   	else{
   		html_error="";
   		$('#error').html(html_error);
   		$('#apply').removeAttr("disabled");
   		$('#save').removeAttr("disabled");
   	}
   	}
   	else{
   		html_error ='<li class="alert alert-danger">The password and confirm password must be between 6 ad 12 characters and without spaces</li>';  
   		$('#error').html(html_error); 	
   		$('#apply').attr("disabled", "disabled");	
   		$('#save').attr("disabled", "disabled");
   	}
   
   	}
   	else{
   		html_error="";
   		$('#error').html(html_error);
   		$('#apply').removeAttr("disabled");
   		$('#save').removeAttr("disabled");
   	}
   
   
   }
   
   
</script> 
@stop