@extends(getTemplate('admin'))
@section('content')
	@push('custom-css')

	@endpush
	<div class="gadmin-pagesidebar-width-1 gadmin-mhide">
		<div class="panel panel-default gadmin-pagesidebar-width-1-panel ">
			<!-- begin panel-heading -->
			<div class="panel-heading gadmin-pagesidebar-width-1-heading">
				<h4 class="panel-title">{{__('admin.members_management')}}</h4>
			</div>
			<!-- end panel-heading -->
			<div class="gadmin-pagesidebar-body">
				<div class="gadmin-pagesidebar-main">
					<ul class="nav gadmin-pagesidebar-ul">
						<li><a href="{{ route('admin.users.create') }}" class="">{{ __('admin.view_user_accounts') }}</a></li>
						<li><a class=" active">{{__('core.add_new_user')}}</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>

<div class="gadmin-pagesidebar-width-2">
	<!-- begin panel -->
	<div class="panel panel-default " data-sortable-id="ui-widget-6">
		<div class="panel-heading">
			<h4 class="panel-title">
				Add New User
			</h4>
		</div>
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
		<div id="info-alert" class="alert" style="display:none">
			<span class="close" onclick="$('#info-alert').fadeOut()">×</span>
			<div class="alert-container"></div>
		</div>
		<div id="info-alert" class="alert" style="display:none">
			<span class="close" onclick="$('#info-alert').fadeOut()">×</span>
			<div class="alert-container"></div>
		</div>
        <div class="panel-body">
            <form class="form-horizontal form-bordered" enctype="multipart/form-data" action="{{ route('admin.users.store') }}" method="post" data-parsley-validate="true">
                <div class="form-group row">
                    <label class="col-md-3 col-form-label">{{ __('core.avatar')}}</label>
{{--                    <div class="col-md-8">
                        {!!dropzone('dragNdropUpload', 'User', '', 'users/user_' . $this->user->id, 1, 5, '.jpeg,.jpg,.png,.gif', 'image')!!}
                    </div>--}}
                </div>
                <div class="form-group row">
                    <label class="col-md-3 col-form-label">{{ __('core.first_name')}}</label>
                    <div class="col-md-8">
                        <input class="form-control" type="text" id="first_name" name="first_name" placeholder="{{__('core.first_name')}}" data-parsley-required="true" value="">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-md-3 col-form-label">{{__('core.last_name')}}</label>
                    <div class="col-md-8">
                        <input class="form-control" type="text" id="last_name" name="last_name" placeholder="{{__('core.last_name')}}" data-parsley-required="true" value="">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-md-3 col-form-label">{{__('core.email')}}</label>
                    <div class="col-md-8">
                        <input class="form-control" type="email" id="email" name="email" onkeyup="check_if_email_exists(this)" placeholder="{{__('core.email')}}" data-parsley-required="true" value="">
                        <div class="alert alert-danger" id="u-email" style="margin-top:10px;display: none;">{{__('core.user_email_error')}}</div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-md-3 col-form-label">{{__('admin.password')}}</label>
                    <div class="col-md-8">
                        <input class="form-control" type="password" id="password" name="password" placeholder="{{__('auth.password')}}" data-parsley-required="true" data-parsley-equalto="#password_confirmation" value="">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-md-3 col-form-label">{{__('admin.confirm_password')}}</label>
                    <div class="col-md-8">
                        <input class="form-control" type="password" id="password_confirmation" name="password_confirmation" placeholder="{{__('admin.confirm_password')}}" data-parsley-required="true" data-parsley-equalto="#password" value="">
                    </div>
                </div>
			   @if (setting('multihub'))
				   <div class="form-group row">
					   <label class="control-label col-md-3 col-sm-3 col-be-3" for="website">
						   Member Role:
						   <i class="fa fa-question-circle" data-toggle="tooltip" data-placement="top" title="Member Type / Role"></i>
					   </label>
					   <div class="col-md-4 col-sm-4">
                            @foreach ($roles as $role)
							   <input type="checkbox" name="roles[]" value="{{ $role->name }}">{{ $role->name }}</input>
                            @endforeach
					   </div>
				   </div>
			   @else
					<div class="form-group row">
						<label class="control-label col-md-3 col-sm-3 col-be-3" for="website">
							{{__('core.group_level')}}:
							<i class="fa fa-question-circle" data-toggle="tooltip" data-placement="top" title="Associate user with proposed usergroups"></i>
						</label>
						<div class="col-md-8 col-sm-8">
							<ul id="access-groups"></ul>
							<div id="ug" class="hidden alert alert-danger m-t-5"></div>
						</div>
					</div>
			   @endif
                <div class="form-group row m-b-0 form-save-bg">
                    <label class="col-md-3 col-sm-4 col-form-label">&nbsp;</label>
                    <div class="col-md-8 col-sm-8">
                        <button type="submit" class="btn btn-success form-button-save">{{__('core.addmember_save_success')}}</button>
                    </div>
                </div>
            </form>
        </div>
	</div>
</div>
	<script>
		$(document).ready(function (){
			@cannot('Hub Admin')
{{--				@php $groups = \Spatie\Models\Role::get(); @endphp
				$('#access-groups').tagit({
					fieldName: "groups",
					singleField: true,
					showAutocompleteOnFocus: true,
					@if(setting('multihub')/* && auth()->user()->isHubAdmin()*/)
						@php $hub_groups = get_hub_admin_allowed_usergroups(FALSE); @endphp
						availableTags: [ @foreach ($groups->where('name !=','admin')->get() as $group) @if(in_array($group->name, $hub_groups, TRUE)) "{{$group->name}}", @endif @endforeach]
					@else
						availableTags: [ @foreach ($groups->get() as $group) "{{$group->name}}", @endforeach],
					@endif
				});--}}
			@endif
		});

		function check_if_username_exists(_this) {
			$('#u-groups').slideDown().delay(3000).slideUp();
			$.ajax({
				type: "POST",
				url: site_root + 'ajax/check_if_username_exists',
				data :{
					username: $(_this).val(),
				},
				success : function(data) {
					if (data === 'true') {
						$(_this).addClass('error_exist')
						$('#u-username').slideDown().delay(3000).slideUp();
					} else {
						$(_this).removeClass('error_exist')
					}
				}
			});
		}

		function check_if_email_exists(_this) {
			$.ajax({
				type: "POST",
				url: site_root + 'ajax/check_if_email_exists',
				data :{
					email: $(_this).val(),
				},
				success : function(data) {
					if (data === 'true') {
						$(_this).addClass('error_exist')
						$('#u-email').slideDown().delay(3000).slideUp();
					} else {
						$(_this).removeClass('error_exist')
					}
				}
			});
		}

		$("form").on("submit", function () {
			var error = false;
			if ($('#username').hasClass('error_exist')) {
				$('#u-username').slideDown().delay(3000).slideUp();
				error = true;
			}

			if ($('#email').hasClass('error_exist')) {
				$('#u-email').slideDown().delay(3000).slideUp();
				error = true;
			}

			@cannot('Hub Admin')
				if (!$('#access-groups').tagit("assignedTags").length) {
					$('#ug').html('User Groups are required').slideDown().delay(3000).slideUp();
					error = true;
				}
			@endcannot
			if (error) {
				return false;
			}
		})

	</script>
	<!-- end panel -->
	@push('custom-js')

	@endpush
@endsection