@extends('layouts.header')

@section('content')

<h2 class="page-title my-4">Edit 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 ">

            <input type="hidden" name="user_role" id="user_role" value="{{ $data->role }}">

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

                 <input type="hidden" name="id" id="id" value="{{ $data->id }}">

                 <div class="row justify-content-center">
                     <div class="col-lg-4 col-md-5 mb-4 text-center">
                        
                         <div class="mb-3">
                         @if($data->avtar == "")
                             <img src="/images/no-pic.jpg" class="rounded-circle" alt="image thumb" id="img_hoder_1" width="130" height="130">
                        @else
                        <img src="{{ config('constants.USER_AVTAR').$data->avtar }}" class="rounded-circle" alt="image thumb" id="img_hoder_1" width="130" height="130">
                        @endif
                         </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',$data->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',$data->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',$data->email)}}" placeholder="Enter email" >
                         @if ($errors->has('email'))
                          <span id="email-error" class="error text-danger" for="email">{{ $errors->first('email') }}</span>
                         @endif
                         <a href="#changePasswordModal" id="changePwd" data-toggle="modal" style="text-decoration: underline;color:#214884;float:right;">Change Password</a>
                     </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',$data->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 }}" {{ $data->department_id == $dept->id ? 'selected' : ''}}>{{ $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 }}" {{ $data->country_id == $country->id ? 'selected' : ''}}>{{ $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 <span class="text-danger">*</span></label>
                         <div class="input-group form-group" id="show_hide_password">
                               <input class="form-control" 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 <span class="text-danger">*</span></label>
                         <div class="input-group form-group" id="show_hide_password">
                               <input class="form-control" 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" name="role" id="role_admin" class="role" value="ADMIN" {{ $data->role == 'ADMIN' ? 'checked' : ''}} > Admin </label> <br>
                         <label><input type="radio" name="role" id="role_user" class="role" value="USER" {{ $data->role == 'USER' ? 'checked' : ''}} > 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)

                            @php
                            $flag = false;
                            @endphp

                            @foreach($menu_asccess as $access)

                                @if($menu->id == $access->menu_id)
                                    @php
                                    $flag = true;
                                    @endphp
                                @endif

                            @endforeach

                         <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 }}" {{ $flag ? 'checked' : '' }} 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()">Update</button>
                     </div>
                 </div>
             </div>


             </form>

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


<!-- Change Password -->
<div class="modal fade" id="changePasswordModal" tabindex="-1" role="dialog" aria-labelledby="forgotpassModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content modal-sm" style="margin: 0 auto">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Change Password</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">


        <form id="changePasswordForm" method="POST" action="javascript:void(0)">
        @csrf

        <input type="hidden" name="id" id="id" value="{{ $data->id }}">

          <div class="row">
            <div class="col-lg-12 col-sm-12">
              <div class="form-group">
                <label>New Password <span class="error">*</span></label>
                <input type="password" name="new_password" id="new_password" value="{{ old('new_password')}}" class="form-control" placeholder="New Password">
                @if ($errors->has('new_password'))
                    <span id="new_password-error" class="error text-danger"
                        for="new_password">{{ $errors->first('new_password') }}</span>
                    @endif
              </div>
            </div>
            <div class="col-lg-12 col-sm-12">
              <div class="form-group">
                <label>Confirm New Password <span class="error">*</span></label>
                <input type="password" name="new_confirm_password" id="new_confirm_password" value="" class="form-control" placeholder="Confirm New Password">
                @if ($errors->has('new_confirm_password'))
                    <span id="new_confirm_password-error" class="error text-danger"
                        for="new_confirm_password">{{ $errors->first('new_confirm_password') }}</span>
                    @endif
              </div>
            </div>
          </div>
         <br>
         <div class="text-center">
            <button type="submit" class="btn btn-primary" onclick="changePasswordSubmit()">Save</button>
        </div>

        </form>

      </div>
      
    </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(){ 
        var role = $('#user_role').val();
        if(role == 'ADMIN'){
            $('#menu_access').hide();
        }else{
            $('#menu_access').show();
        }

    });


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,
        },
        confirm_password:{
            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 "
        },

    
    },

    errorPlacement: function(error, element) {
        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: '/update/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";
                    // window.location.href = "javascript:goBack(-1)";
                }, 2000); 
                }else{
                toastr.error(data.error); 
                }
                
            },
            complete: function(){
            setTimeout(function(){
                $('#btnAdd').removeClass('btn-disabled');
                $('#btnAdd').html('Update');
                },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);
                }
            },
        });

    },

    });

}

	//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" );
	}
});

function changePasswordSubmit(){
    $("#changePasswordForm").validate({
      errorElement:'div',
      rules: {
        new_password:{
            required: true,
            minlength:6,
        },
        new_confirm_password:{
          required: true,
          equalTo: '#new_password'
        }
        
      },

      messages: {
        new_password:{
            required: "Please enter new password",
        },
        new_confirm_password:{
          required: "Please enter confirm new password",
        }

      },

      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();
          $('#btnChangePwd').html('Please wait..');
          var form = $('#changePasswordForm')[0];
          var formData = new FormData(form);
          var pageName = $('#type').val();
          $.ajax({
            url: '/user/change-password' ,
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function( data ) {
                setTimeout(function(){
                  $('#btnChangePwd').html('Save');
                },2000);
                toastr.success(data.success); 
                $('#changePasswordForm')[0].reset(); 
                $('#changePasswordModal').modal('hide');              
            },
            error: function(error){
              toastr.error("You have entered wrong current password");
            },
          });

       },

      });
}

$('.role').on('click',function(){

    if($(this).val() == 'ADMIN'){
        $('#menu_access').hide();
    }else{
        $('#menu_access').show();
    }

});



</script>

@endsection