@extends('layouts.header')

@section('content')

<h2 class="page-title my-4">Add User</h2>

     <div class="row">
         <div class="col-md-8">
             <P><a href="/manage/users" class="text-primary mb-3"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Back</a></P>
             <div class="card form-style bg-light p-md-5 p-3 ">

             	 
           <form id="userForm" method="POST" action="javascript:void(0)" enctype="multipart/form-data">
                @csrf

                 <div class="row justify-content-center">
                     <div class="col-lg-4 col-md-5 mb-4 text-center">
                         <div class="mb-3"><img src="/images/no-pic.jpg" class="rounded-circle" alt="image thumb" id="img_hoder_1" width="130" height="130"></div>
                         <button type="button" class="btn px-3 upload-img-merge-btn  btn-secondary w-75 text-capitalize">
                             Upload
                             <input type="file" class="btn upload-img" id="AddPhoto" name="image" onchange="readURL(this);" accept=".png, .jpg, .jpeg">
                         </button>  
                       </div>
                 </div>
                 <div class="row">
                     
                     <div class="col-lg-6 mb-3">
                         <label for="">First Name <span class="text-danger">*</span></label>
                         <input type="text" class="form-control" id="first_name" name="first_name" value="{{ old('first_name')}}" placeholder="Enter first name" >
                         @if ($errors->has('first_name'))
                          <span id="first_name-error" class="error text-danger" for="first_name">{{ $errors->first('first_name') }}</span>
                         @endif
                     </div>

                     <div class="col-lg-6 mb-3">
                         <label for="">Last Name <span class="text-danger">*</span></label>
                         <input type="text" class="form-control" id="last_name" name="last_name" value="{{ old('last_name')}}" placeholder="Enter last name" >
                         @if ($errors->has('last_name'))
                          <span id="last_name-error" class="error text-danger" for="last_name">{{ $errors->first('last_name') }}</span>
                         @endif
                     </div>

                     <div class="col-lg-6 mb-4">
                         <label for="">Email <span class="text-danger">*</span></label>
                         <input type="email" class="form-control" id="email" name="email" value="{{ old('email')}}" placeholder="Enter email" >
                         @if ($errors->has('email'))
                          <span id="email-error" class="error text-danger" for="email">{{ $errors->first('email') }}</span>
                         @endif
                     </div>

                     <div class="col-lg-6 mb-3">
                         <label for="">Designation <span class="text-danger">*</span></label>
                         <input type="text" class="form-control" id="designation" name="designation" value="{{ old('designation')}}" placeholder="Enter designation">
                         @if ($errors->has('designation'))
                          <span id="designation-error" class="error text-danger" for="designation">{{ $errors->first('designation') }}</span>
                         @endif
                     </div>

                     <div class="col-lg-6 mb-3">
                         <label for="">Department <span class="text-danger">*</span></label>
                         <div class="selectParent mr-3">
                             <select class="select-option" name="department" id="department">
                                 <option value="" selected="">Select</option>
                                @foreach($departments as $dept) 
                                 <option value="{{ $dept->id }}">{{ $dept->department }}</option>
                                @endforeach
                             </select>
                             @if ($errors->has('department'))
                          <span id="department-error" class="error text-danger" for="department">{{ $errors->first('department') }}</span>
                         @endif
                         </div>
                     </div>

                     <div class="col-lg-6 mb-3">
                         <label for="">Country <span class="text-danger">*</span></label>
                         <div class="selectParent mr-3">
                             <select class="select-option" name="country" id="country">
                                 <option value="" selected="">Select</option>
                                @foreach($countries as $country)
                                <option value="{{ $country->id }}">{{ $country->name }}</option>
                                @endforeach
                              </select>
                              @if ($errors->has('country'))
                                <span id="country-error" class="error text-danger" for="country">{{ $errors->first('country') }}</span>
                                @endif
                         </div>
                     </div>
                     
                     <div class="col-lg-6 mb-3">
                         <label for="password">Password <span class="text-danger">*</span></label>
                         <div class="input-group form-group" id="show_hide_password">
                               <input class="form-control pwd_err" type="password" name="password" id="password" placeholder="Enter Password">
                               <div class="input-group-addon bg-light border px-2 py-2" style="border-top-right-radius: 2px;border-bottom-right-radius: 2px;">
                                 <a href="javascript:void(0);" class="align-text-top text-primary mt-1"><i class="fa fa-eye-slash" aria-hidden="true" ></i></a>
                               </div>
                               @if ($errors->has('password'))
                                <span id="password-error" class="error text-danger" for="password">{{ $errors->first('password') }}</span>
                                @endif
                         </div>
                     </div>

                     <div class="col-lg-6 mb-3">
                         <label for="confirm_password">Confirm Password <span class="text-danger">*</span></label>
                         <div class="input-group form-group" id="show_hide_password">
                               <input class="form-control pwd_err" type="password" name="confirm_password" id="confirm_password" placeholder="Enter confirm Password">
                               <div class="input-group-addon bg-light border px-2 py-2" style="border-top-right-radius: 2px;border-bottom-right-radius: 2px;">
                                 <a href="javascript:void(0);" class="align-text-top text-primary mt-1"><i class="fa fa-eye-slash" aria-hidden="true" ></i></a>
                               </div>
                               @if ($errors->has('confirm_password'))
                                <span id="confirm_password-error" class="error text-danger" for="confirm_password">{{ $errors->first('confirm_password') }}</span>
                                @endif
                         </div>
                     </div>

                     <div class="col-6 mb-4">
                         <label for="">User Role <span class="text-danger">*</span></label>
                         <div class="form-group mr-3">
                         <label><input type="radio" value="ADMIN" name="role" id="role_admin" class="role"> Admin </label> <br>
                         <label><input type="radio" value="USER" name="role" id="role_user" class="role"> User </label>
                         
                         @if ($errors->has('role'))
                          <span id="role-error" class="error text-danger" for="role">{{ $errors->first('role') }}</span>
                         @endif
                     </div>
                     </div>

                     <div class="col-6 mb-4" id="menu_access">
                         <label for="">Access Rights <span class="text-danger">*</span></label>
                         @foreach($menues as $menu)
                         <div class="custom-control custom-checkbox mr-sm-2 mb-2">
                             <input type="checkbox" class="custom-control-input " id="checkbox_{{$menu->id}}" value="{{ $menu->id }}" name="menues[]">
                             <label class="custom-control-label text-dark ml-2" for="checkbox_{{$menu->id}}">{{ $menu->name }}</label>
                         </div>
                        @endforeach
                     </div>
                     </div>

                    

                 <div class="row">
                     <div class="col-12 text- ">
                         <button type="button" class="btn btn-outline-primary mr-3" onClick="goBack();">Cancel</button>
                         <button type="submit" class="btn btn-primary" id="btnAdd" onclick="submitForm()">Save</button>
                     </div>
                 </div>
             </div>


             </form>

         </div>
     </div>
     
     
 </div>


@endsection

@section('append')
<script src="/assets/js/jquery.dataTables.min.js"></script>
	<script src="/assets/js/dataTables.bootstrap4.min.js"></script>
<script>
       $(".mySelect").select2({
            placeholder: "select users",
            allowClear: false,
       });

       $(document).ready(function(){
            $('#role_user').attr('checked',true);
       });


function submitForm(){

    $("#userForm").validate({
    errorElement:'div',
    rules: {
        first_name:{
            required: true,
        },
        last_name:{
            required: true,
        },
        email:{
            required: true,
            email:true,
        },
        designation:{
            required: true,
        },
        department:{
            required: true,
        },
        country:{
            required: true,
        },
        password:{
            required: true,
            minlength: 6,
        },
        confirm_password:{
            required: true,
            equalTo: '#password',
        },
        role:{
            required:true,
        }
    
    },

    messages: {
        first_name:{
            required: "Please enter first name",
        },
        last_name:{
            required: "Please enter last name",
        },
        email:{
            required:"Please enter email",
        },
        designation:{
            required: "Please enter designation",
        },
        department:{
            required: "Please select department",
        },
        country:{
            required: "Please select country",
        },
        password:{
            required: "Please enter password",
        },
        confirm_password:{
            required:"Please enter confirm password ",
        },
        role:{
            required:"Please select role",
        }

    
    },

    errorPlacement: function(error, element) {
        if (element.hasClass('pwd_err')) {
              error.insertAfter(element.parent());
            }else if(element.hasClass('select-option')){
                error.insertAfter(element.parent());
            }
            else{
            error.appendTo( element.parent() );
            }
    },
    submitHandler: function(form) {
        //form.submit();

        var form = $('#userForm')[0];
        var formData = new FormData(form);
        $.ajax({
            url: '/add/user' ,
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function(){
                $('#btnAdd').addClass('btn-disabled');
                $('#btnAdd').html("<span class='spinner-border spinner-border' id='loader' style='width:20px;height:20px;'></span> Please wait...");
            },
            success: function( data ) {
            if(data.success != undefined){
                toastr.success(data.success); 
                $('#userForm')[0].reset();
                setTimeout(() => {
                    window.location.href="/manage/users";
                }, 2000); 
                }else{
                    toastr.error(data.error); 
                }
                
            },
            complete: function(){
            setTimeout(function(){
                $('#btnAdd').removeClass('btn-disabled');
                $('#btnAdd').html('Save');
                },1000);
            },
            error: function(xhr,status,error){
                var err = JSON.parse(xhr.responseText);
                if(err.errors.email != undefined ){
                    toastr.error(err.errors.email);
                }
                if(err.errors.first_name != undefined){
                    toastr.error(err.errors.first_name);
                }
                setTimeout(function(){
                    $('#btnAdd').removeClass('btn-disabled');
                    $('#btnAdd').html('Save');
                },1000);
            },
        });

    },

    });

}

	//upload photo
        function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#img_hoder_1')
                    .attr('src', e.target.result);
            };
                reader.readAsDataURL(input.files[0]);
            }
        }


	 //show hide password
	$("#show_hide_password a").on('click', function(event) {
	event.preventDefault();
	if($('#show_hide_password input').attr("type") == "text"){
		$('#show_hide_password input').attr('type', 'password');
		$('#show_hide_password i').addClass( "fa-eye-slash" );
		$('#show_hide_password i').removeClass( "fa-eye" );
	}else if($('#show_hide_password input').attr("type") == "password"){
		$('#show_hide_password input').attr('type', 'text');
		$('#show_hide_password i').removeClass( "fa-eye-slash" );
		$('#show_hide_password i').addClass( "fa-eye" );
	}
});


$('.role').on('click',function(){
    if($(this).val() == 'ADMIN'){
        $('#menu_access').hide();
    }else{
        $('#menu_access').show();
    }

});


</script>

@endsection