@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('Add  New 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('Timeline ') }}</li>
      <li class="active">{{ trans('List User ') }}</li>
      <li class="active">{{ trans('Add New User ') }}</li>
    </ol>
  </section>
			@php
				$getUserRoleData 			= userRoleData();
				$userManagement					= explode(",",$getUserRoleData->userManagement);
			@endphp
  <section class="content"> 
    <div class="row">
      <div class="col-md-12">
        <div class="box box-info">
          
          <div class="box-body">
            <div class="row">
              <div class="col-xs-12">
                    <div class="">            
                         <div class="box-body">
							@if(Session::has('message'))
								<p class="alert {{ Session::get('alert-class', 'alert-info') }}">{{ Session::get('message') }}</p>
							@endif

							@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("Add",$userManagement ))							
                            {!! Form::open(array('url' =>'admin/add-new-user-management', 'method'=>'post', 'class' => 'form-horizontal', 'id'=>'addnewuser', 'enctype'=>'multipart/form-data')) !!}



                             <div class="form-group">
									<label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('Name') }}<span class="red_star">*</span></label>
									<div class="col-sm-10 col-md-4">
										{!! Form::text('name', '', array('class'=>'form-control', 'id'=>'name', 'required'=>'required')) !!}
									</div>
								</div>

								<div class="form-group">
									<label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('Account Name') }}<span class="red_star">*</span></label>
									<div class="col-sm-10 col-md-4">
										{!! Form::text('account_name', '', array('class'=>'form-control', 'id'=>'account_name', 'required'=>'required')) !!}
									</div>
								</div>

								<div class="form-group">
									<label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('Emp ID') }} </label>
									<div class="col-sm-10 col-md-4">
										{!! Form::text('unique_id', '', array('class'=>'form-control', 'id'=>'unique_id')) !!}
									</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', '', 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('IP Address') }}<span class="red_star">*</span></label>
									<div class="col-sm-10 col-md-4">
										{!! Form::text('ip_address', '', array('class'=>'form-control', 'id'=>'ip_address', 'required'=>'required')) !!}
									</div>
								</div>

							<div class="form-group">
								<label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('Supervisor') }}</label>
								<div class="col-sm-10 col-md-4">
									<select class="form-control select2 select2-hidden-accessible" style="width: 100%;" data-select2-id="1" tabindex="-1" aria-hidden="true" name="supervisor_id" id="supervisor_id">
										<option value="">Select Supervisor</option>
											@if($result['accountlists'] > 0)
												@foreach($result['accountlists'] as $key=>$accountlist)
												<option value="{{ $accountlist->id }}">{{ ucfirst($accountlist->name) }}</option>
												@endforeach
											@endif
									</select>
								</div>
							</div>



								<!--<div class="form-group">
									<label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('Shift Timing ') }}</label>
									<div class="col-sm-10 col-md-2">
										<div class='input-group date' id='datetimepicker3'>
											<input type='text' name="shift_start_time" id="shift_start_time" value="" class="form-control shift_start_time_timepicker" />
											<span class="input-group-addon">
											<span class="glyphicon glyphicon-time"></span>
											</span>
										</div>
										
									</div>


									 
										<div class="col-sm-10 col-md-2">
										<div class='input-group date' id='datetimepicker4'>
											<input type='text' name="shift_end_time" id="shift_end_time" value="" class="form-control shift_end_time_timepicker" />
											<span class="input-group-addon">
											<span class="glyphicon glyphicon-time"></span>
											</span>
										</div>
										
									</div>

								</div>

								<div class="form-group">
									<label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('Week Off') }} </label>
									<div class="col-sm-10 col-md-4">
										
								<select name="weeks[]" multiple class="form-control select_customized" id="products">
								>
								<option value="Monday">Monday </option>
								<option value="Tuesday">Tuesday</option>
								<option value="Wednesday">Wednesday</option>
								<option value="Thursday">Thursday</option>
								<option value="Friday">Friday</option>
								<option value="Saturday">Saturday</option>
								<option value="Sunday">Sunday</option>
								
								</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">{{ trans('labels.Active') }}</option>
											<option value="0">{{ trans('labels.Inactive') }}</option>                                       
										</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="{{ URL::to('admin/timeline-user-management')}}" 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 type="text/javascript">
    $.ajaxSetup({
        headers: {
            'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
        }
    });
</script>
<script type="text/javascript">
	

 
		$.validator.addMethod("validAccountName", function(value, element) { 
		return value.indexOf(" ") < 0 && value != ""; 
		}, "No space please and don't leave it empty");
	

	// Product Form Validation
	$( "#addnewuser" ).validate( {
		rules: {
			account_name: {
				required: true,
				validAccountName:true,
				rangelength: [3, 50],
				alpha: true
			},
			name: {
				required: true,
			},	
			/*unique_id: {
				required: true,
			},	*/
			/*
			email: {
				required: true,
				email:true,
				onkeyup: false,
				
			},*/

			ip_address: {
				required: true,
			},	

		

			/*shift_start_time: {
				required: true,
			},
			shift_end_time: {
				required: true,
			},*/

			isActive: {
				required: true,
			},				
			
		},
		messages: {
			account_name: {
				required: "Please enter your account name",
				validAccountName:"No space please and don't leave it empty",
				alpha: "Please enter  account name alphabets only"

			},
			name: {
				required: "Please enter your name"
			},
			/*unique_id: {
				required: "Please enter emp id"
			},*/
			
			/*email: {
				required: "Please enter your email",
				email:"Please enter valid email address",
				remote:  "Please enter different email"
			},*/
			
			isActive: {
				required: "Please select status"
			},

			ip_address: {
				required: "Please enter ip address"
			},
			
			/*shift_start_time: {
				required: "Please select shift start time"
			},

			shift_end_time: {
				required: "Please select shift end time"
			},*/
		},
		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 type="text/javascript">
        	/*$(document).ready(function() {
        		 $('input.shift_start_time_timepicker').timepicker({ 
        		  showMeridian: false   
                 });
             	

             	$('.shift_end_time_timepicker').timepicker({
					 showMeridian: false 
             	},
             	);



            });*/


</script>
<script>
	document.querySelectorAll('#watermarked').forEach(function(el) {
			  el.dataset.watermark = (el.dataset.watermark + ' ').repeat(500);
		  });
  </script>

      
@endsection