@extends('admin.layout')
@section('content')
<style>
	#watermarked::before {
    position: fixed;
    top: -75%;
    left: -75%;
    display: block;
    width: 300%;
    height: 300%;
    transform: rotate(-45deg);
    content: attr(data-watermark);
    font-size: 30px;
    opacity: 0.15;
    line-height: 4em;
    letter-spacing: 2px;
    color: #ff0523;
    z-index:0;
    }
    .content-wrapper, .right-side{
        background: #FFF;
    }
    .box {
        background: transparent;
        z-index: 1; 
    }
    html .magicsearch-wrapper .multi-item span {
        line-height: 1;
        font-size: 11px;
        align-self: center;
    }

    html .magicsearch-wrapper .multi-item {
        display: flex;
        font-size: inherit;
        position: relative;
        background: #ecf5fc;
        border: solid 1px #c2e0ff;
        padding-left: 4px;
        border-radius: 2px;
        margin-right: 4px !important;
        padding-right: 5px;
        margin-bottom: calc(1rem * 0.375) !important;
        height: auto !important;
        line-height: 1 !important;
    }

    html .magicsearch-wrapper .multi-item-close {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1;
        font-size: 11px;
        height: 100%;
        padding-top: 1px;
        padding-bottom: 1px;
        padding-left: 6px;
        padding-right: 6px;
        margin-left: 4px;
        border-left: solid 1px #c2e0ff;
        display: block;
        position: static;
    }

    html .magicsearch-wrapper .multi-item-close:before {
        content: "\00D7";
        transform: none;
        border: 0;
        background: transparent;
        height: auto;
        width: auto;
        font-size: 11px;
        position: static;
        line-height: 1;
        display: block;
        width: 10px;
    }

    html .magicsearch-wrapper .multi-item-close:after {
        display: none;
    }

    html .magicsearch-wrapper .multi-items {
        position: static;
        clear: both;
        margin-top: 4px;
        max-height: 60px;
        overflow-y: auto;
    }

    html .magicsearch-wrapper .multi-items:after {
        content: "";
        display: block;
        clear: both;
    }

    html .magicsearch-wrapper .multi-item-close:hover:before {
        background: transparent !important;
    }
    html .magicsearch-wrapper input.magicsearch.multi {
        display: block;
        width: 100% !important;
        height: 34px !important;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        border-radius: 0;
    }

    html .magicsearch-wrapper {
        width: 100% !important;
    }
</style>
<div class="search-list">
	<div class="content-wrapper search-result-list">
  <section class="content-header">
    <h1> {{ trans('Edit User') }} <small></small> </h1>
    <ol class="breadcrumb">
       <li><a href="{{ URL::to('admin/dashboard/this_month') }}"><i class="fa fa-dashboard"></i> {{ trans('labels.breadcrumb_dashboard') }}</a></li>
      <li class="active">{{ trans('Edit User') }}</li>
    </ol>
  </section>
	@php
		$getUserRoleData 			= userRoleData();
		$User				= explode(",",$getUserRoleData->User);
		//$User				= array("Add", "View", "Edit", "Delete");
	@endphp
  <section class="content"> 
    <div class="row">
      <div class="col-md-12">
        <div class="box box-info">
          <div class="box-header">
            <h3 class="box-title">{{ trans('Edit User') }} </h3>
          </div>
          <div class="box-body">
            <div class="row">
              <div class="col-xs-12">
                    <div class="">            
                         <div class="box-body">
							@if( count($errors) > 0)
								@foreach($errors->all() as $error)
									<div class="alert alert-success" role="alert">
										<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
										<span class="sr-only">{{ trans('labels.Error') }}:</span>
										{{ $error }}
									</div>
								@endforeach
							@endif    
							@if(in_array("Edit",$User ))                    
                            {!! Form::open(array('url' =>'admin/update-user', 'method'=>'post', 'class' => 'form-horizontal', 'id'=>'addnewuser', 'enctype'=>'multipart/form-data')) !!}
								{!! Form::hidden('id',  $result['getUserData']->myid, array('class'=>'form-control', 'id'=>'id')) !!}
								<div class="form-group">
									<label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('First Name') }}<span class="red_star">*</span></label>
									<div class="col-sm-10 col-md-4">
										{!! Form::text('first_name', $result['getUserData']->first_name, array('class'=>'form-control', 'id'=>'first_name', 'required'=>'required')) !!}
									</div>
								</div>
								<div class="form-group">
									<label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('Last Name') }}<span class="red_star">*</span></label>
									<div class="col-sm-10 col-md-4">
										{!! Form::text('last_name', $result['getUserData']->last_name, array('class'=>'form-control', 'id'=>'last_name', 'required'=>'required')) !!}
									</div>
								</div>
								<div class="form-group">
									<label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('Email') }}<span class="red_star">*</span></label>
									<div class="col-sm-10 col-md-4">
										{!! Form::email('email', $result['getUserData']->email, array('class'=>'form-control', 'id'=>'email', 'required'=>'required')) !!}
									</div>
								</div>                             
								<div class="form-group">
									<label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('Role') }}<span class="red_star">*</span></label>
									<div class="col-sm-10 col-md-4">
										<select class="form-control" name="role_id" id="role_id" required>
											<option value="">Select Role</option>
											@foreach($result['listUserRoleName'] as $key=>$roleValues)
												<option value="{{ $key }}" @if($result['getUserData']->role_id==$key) selected @endif>{{ $roleValues }}</option>
											@endforeach
										</select>
									</div>
								</div>
                <div class="form-group">
                  <label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('Department') }}</label>
                  <div class="col-sm-10 col-md-4">
                    <select class="form-control" name="department_id" id="department_id">
                      <option value="">Select Department</option>
                      @foreach($result['departments'] as $department)
                        <option value="{{ $department->id }}" @if($result['getUserData']->department_id == $department->id) selected @endif>{{ $department->name }}</option>
                      @endforeach
                    </select>
                  </div>
                </div>
								<div class="form-group">
									<label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('labels.Status') }}<span class="red_star">*</span> </label>
									<div class="col-sm-10 col-md-4">
										<select class="form-control" name="isActive" id="isActive" required>
											<option value="1" @if($result['getUserData']->isActive==1) selected @endif>{{ trans('labels.Active') }}</option>
											<option value="0" @if($result['getUserData']->isActive==0) selected @endif>{{ trans('labels.Inactive') }}</option>
											<option value="2" @if($result['getUserData']->isActive == 2) selected @endif>Suspended</option>   
										</select>                                      
									</div>
								</div>
								<div class="form-group">
									<label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('Products') }} </label>
									<div class="col-sm-10 col-md-4">
										<!-- {!! Form::text('products', '', array('class'=>'magicsearch', 'id'=>'products')) !!} -->
										<select name="products[]" multiple class="form-control select_customized" id="products">
											@foreach($result['getAllProductsData'] as $key=> $pd)
											<option value="{{$key}}" @if(in_array($key, explode(',', $result['getUserData']->products_access))) selected @endif>{{$pd}}</option>
											@endforeach
										</select>
									</div>
								</div>

								<div class="form-group">
									<label for="emp_id" class="col-sm-2 col-md-3 control-label">{{ trans('Emp ID') }}</label>
									<div class="col-sm-10 col-md-4">
										{!! Form::text('emp_id', $result['getUserData']->emp_id, array('class'=>'form-control', 'id'=>'emp_id', 'required'=>'required')) !!}
									</div>
								</div>



							<div class="form-group">
								<label for="extension_type" class="col-sm-2 col-md-3 control-label">{{ trans('Employee Type(3CX)') }}</label>
								<div class="col-sm-10 col-md-4">
									<select name="extension_type" id="extension_type" class="form-control" required>
										<option value="CSR" @if($result['getUserData']->extension_type == 'CSR') selected @endif>CSR</option>
										<option value="IT" @if($result['getUserData']->extension_type == 'IT') selected @endif>IT</option>
										<option value="Marketing" @if($result['getUserData']->extension_type == 'Marketing') selected @endif>Marketing</option>
									</select>
								</div>
							</div>



								<div class="form-group">
									<label for="extension_3cx" class="col-sm-2 col-md-3 control-label">3CX Extension</label>
									<div class="col-sm-10 col-md-4">
										{!! Form::text('extension_3cx', $result['getUserData']->extension_3cx, array('class'=>'form-control', 'id'=>'extension_3cx')) !!}
									</div>
								</div>

								<!-- <div class="form-group">
									<label for="extension_3cx" class="col-sm-2 col-md-3 control-label">3CX Extension Name</label>
									<div class="col-sm-10 col-md-4">
										{!! Form::text('extension_name', $result['getUserData']->extension_name, array('class'=>'form-control', 'id'=>'extension_name')) !!}
									</div>
								</div> -->

								<div class="form-group">
									<label for="extension_name" class="col-sm-2 col-md-3 control-label">3CX Extension Name<span class="red_star">*</span></label>
									<div class="col-sm-10 col-md-4">
									<select name="extension_name" class="form-control select2">
										<option value="">Select</option>
										<option value="CSR" @if(isset($result['getUserData']->extension_name) && $result['getUserData']->extension_name == 'CSR') selected @endif>CSR</option>
										<option value="BDR" @if(isset($result['getUserData']->extension_name) && $result['getUserData']->extension_name == 'BDR') selected @endif>BDR</option>
										<option value="Technical" @if(isset($result['getUserData']->extension_name) && $result['getUserData']->extension_name == 'Technical') selected @endif>Technical</option>
										<option value="VERIFIER" @if(isset($result['getUserData']->extension_name) && $result['getUserData']->extension_name == 'VERIFIER') selected @endif>VERIFIER</option>
										<option value="VOD" @if(isset($result['getUserData']->extension_name) && $result['getUserData']->extension_name == 'VOD') selected @endif>VOD</option>
										<option value="L2" @if(isset($result['getUserData']->extension_name) && $result['getUserData']->extension_name == 'L2') selected @endif>L2</option>
										<option value="Backend" @if(isset($result['getUserData']->extension_name) && $result['getUserData']->extension_name == 'Backend') selected @endif>Backend</option>
										<option value="ACTIVATION" @if(isset($result['getUserData']->extension_name) && $result['getUserData']->extension_name == 'ACTIVATION') selected @endif>ACTIVATION</option>
									</select>
									</div>
								</div>



								<div class="form-group">
									<label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('Team Leader') }}<span class="red_star">*</span> </label>
									<div class="col-sm-10 col-md-4">
										<select name="team_leader" class="form-control select2" required>
											<option value=''>Search by User</option>
											@foreach($result['users'] as $user)
											<option value="{{$user->myid}}" @if(isset($result['getUserData']->team_leader) &&
												!empty($result['getUserData']->team_leader) && $result['getUserData']->team_leader==$user->myid)
												selected @endif >{{$user->first_name}} {{$user->last_name}}
											</option>
											@endforeach
										</select>
									</div>
								</div>
								
								<div class="form-group">
									<div class="col-sm-offset-2 col-sm-10">
										<button type="submit" class="btn btn-primary">{{ trans('Submit') }}</button>
										<a href="../list-user" type="button" class="btn btn-primary">{{ trans('labels.back') }}</a>
									</div>
								</div>
                            {!! Form::close() !!}
							@else
								<p> <strong>Please contact with SuperAdmin</strong></p>
							@endif
                        </div>
                  </div>
              </div>
            </div>
          </div>
        </div>

		<div id="watermarked" data-watermark="{{ auth()->guard('admin')->user()->first_name }} {{ auth()->guard('admin')->user()->last_name }}" class="row listing">        
		</div>

      </div>
    </div>
  </section>
</div>
</div>
<script src="{!! asset('assets/admin/plugins/jQuery/jQuery-2.2.0.min.js') !!}"></script>
<script src="{!! asset('assets/admin/plugins/validate/jquery.validate.js') !!}"></script>
<script src="{!! asset('assets/admin/plugins/validate/additional-methods.js') !!}"></script>
<script>
	document.querySelectorAll('#watermarked').forEach(function(el) {
			  el.dataset.watermark = (el.dataset.watermark + ' ').repeat(500);
		  });
</script>
<script type="text/javascript">
	
	// Email Check
	$.validator.addMethod("email", function(value) {
		return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(value) // consists of only these
	});
	// Password Check
	$.validator.addMethod("pwcheck", function(value) {
		return /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{6,16}$/.test(value) // consists of only these
	});
	
	$.validator.addMethod("alpha", function(value, element) {
		return this.optional(element) || value == value.match(/^[a-zA-Z\s]+$/);
	});
	jQuery.validator.addMethod("filesize_max", function(value, element, param) {
		var isOptional = this.optional(element),
			file;

		if(isOptional) {
			return isOptional;
		}
		if ($(element).attr("type") === "file") {

			if (element.files && element.files.length) {

				file = element.files[0];            
				return ( file.size && file.size <= param ); 
			}
		}
		return false;
	}, "File size is too large.");	

	// Product Form Validation
	$( "#addnewuser" ).validate( {
		rules: {
			first_name: {
				required: true,
				rangelength: [3, 15],
				alpha: true
			},
			last_name: {
				required: true,
				rangelength: [3, 15],
				alpha: true
			},
			email: {
				required: true,
				email:true,
			},
			role_id: {
				required: true
			},
			isActive: {
				required: true,
			},
		},
		messages: {
			first_name: {
				required: "Please enter your first name",
				alpha: "Please enterr first name alphabets only"
			},
			last_name: {
				required: "Please enterr your last name",
				alpha: "Please enter last name alphabets only"
			},
			email: {
				required: "Please enter your email",
				email:"Please enter valid email address",
				/* remote:  "Please enter different email" */
			},
			role_id: {
				required: "Please select your role"
			},
			isActive: {
				required: "Please select your status"
			},
		},
		errorElement: "em",
		errorPlacement: function ( error, element ) {
			// Add the `help-block` class to the error element
			error.addClass( "help-block" );

			// Add `has-feedback` class to the parent div.form-group
			// in order to add icons to inputs
			element.parents( ".col-sm-5" ).addClass( "has-feedback" );

			if ( element.prop( "type" ) === "checkbox" ) {
				error.insertAfter( element.parent( "label" ) );
			} else {
				error.insertAfter( element );
			}

			// Add the span element, if doesn't exists, and apply the icon classes to it.
			if ( !element.next( "span" )[ 0 ] ) {
				$( "<span class='glyphicon glyphicon-remove form-control-feedback'></span>" ).insertAfter( element );
			}
		},
		success: function ( label, element ) {
			// Add the span element, if doesn't exists, and apply the icon classes to it.
			if ( !$( element ).next( "span" )[ 0 ] ) {
				$( "<span class='glyphicon glyphicon-ok form-control-feedback'></span>" ).insertAfter( $( element ) );
			}
		},
		highlight: function ( element, errorClass, validClass ) {
			$( element ).parents( ".col-sm-5" ).addClass( "has-error" ).removeClass( "has-success" );
			$( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
		},
		unhighlight: function ( element, errorClass, validClass ) {
			$( element ).parents( ".col-sm-5" ).addClass( "has-success" ).removeClass( "has-error" );
			$( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
		}
	});
</script>
<script>
    /*$(function() {
        var dataSource = function(query) {
            var result = null;
            $.ajax({
               url: '{{URL("admin/get-all-products-data")}}',
               type: "get",
               async: false,	                   
				data:{'other':'other'},
               success: function(data) {
                   result = data;
               } 
            });
            //console.log(result);
            return  JSON.parse(result);
    	};
        $('#products').magicsearch({
            dataSource: dataSource,
            fields: ['name'],
            id: 'id',
            format: '%name%',
            multiple: true,
            multiField: 'name',
			focusShow:true,
			hidden:true,
            multiStyle: {
                space: 5,
                width: 'auto'
            }
        });
    });
	window.onload = function() {
		
		//init();
		//doSomethingElse();
		      
        $('#products').trigger('set', { id: '{{$products_access}}' });            
	};
    $('body').on('click','.magicsearch-wrapper.focus .magicsearch.multi', function(){
        
        if( $('.magicsearch-box.all').is(':hidden') ){            
            $(this).parent().find('.multi-items').trigger('click');
        }
    });*/
</script>
@endsection