@extends('dashboard.layout.partials.dashboard')

@section('content')


 <div class="card shadow">
                  <div class="card-header bg-color">
                      <h4 class="text" style="text-align: center !important;">Add Users </h4>
                  </div>
                      
                  <div class="card-body">
 
                    <form class="forms-sample" method="POST" action="{{route('users.store')}}">
                     @csrf()
                      <div class="form-group">
                        <label for="user_name">User Name</label>
                        <input type="text" class="form-control" name="user_name" autocomplete="off" id="user_name" placeholder="User Name">
                      </div>

                      <div class="form-group">
                        <label for="user_email">User Email</label>
                        <input type="text" class="form-control" name="user_email" autocomplete="off" id="user_email" placeholder="User Email">
                      </div>
                      
                       <div class="form-group">
                        <label for="role_id">Role</label>
                        <select type="text" class="form-control" name="role_id" autocomplete="off" id="role_id" onchange="roleFunction()">
                          <option value="">Select Role</option>
                          @foreach($role as $roles)
                          <option value="{{$roles->id}}">{{$roles->role_name}}</option>
                          @endforeach
                        </select>
                      </div>

                       <div class="form-group">
                        <label for="sub_role_id">Role Category</label>
                        <select type="text" class="form-control" name="sub_role_id" autocomplete="off" id="sub_role_id">
                      
                        </select>
                      </div>

                     <div class="form-group">
                        <label for="password">Password</label>
                        <input type="password" class="form-control" name="password" autocomplete="off" id="password" placeholder="Password">
                      </div>

                      <div class="form-group">
                        <label for="confirm_password">Confirm Password</label>
                        <input type="password" class="form-control" autocomplete="off" id="password_confirmation" name="password_confirmation" placeholder="Confirm Password ">
                      </div>

                     <div class="form-group">
                      <input type="checkbox" onclick="myFunction()"> Show Password
                    </div>

                      <button type="submit" class="btn btn-gradient-danger me-2">Submit</button>
                      <a class="btn btn-light" href="{{ url()->previous() }}">Cancel</a>
                    </form>
                  
                  </div>
                  
 </div>
              
              

@endsection

@section('javascript')

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
 
function myFunction() {
  var x = document.getElementById("password");
  var y = document.getElementById("password_confirmation");
  if (x.type === "password" || y.type === "password" ) {
    x.type = "text";
    y.type = "text";
  } else {
    x.type = "password";
    y.type = "password";
  }
}

 function roleFunction()
 {

  var role_id =  $("#role_id option:selected").val();

    $.ajax({
                    url: 'https://devstaging.a2zcreatorz.com/FutureParts/get/subroles/' + role_id,
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                      console.log(response);  
                     $("#sub_role_id").append('<option>'+'Select Role Category'+'</option>');
                     
                   $.each(response, function(key, value) {

                         $("#sub_role_id").append('<option value="' + value.id + '">' + value.sub_role_name + '</option>');  
                     });

                    }
                });

 } 


</script>
<style>
    .bg-color{
        background-color:white;
        padding-top:20px;
    }
    .text{
        font-size: 24px; 
        font-family: "Arial", sans-serif; 
    font-weight: bold;
    color:black;
    font-family: "Arial", sans-serif; 
    }
</style>
@endsection