@extends('includes.master')
@section('content')  

<style>
.error_class{
  color:red;
}
.success_class{
  color:green;
}
</style>  
<div class="right_col" role="main">
  <div class="row  class="right_col"">
    <div class="col-md-12 col-sm-12 col-xs-12">
      <div class="x_panel">

        <div class="x_content">
          <p class="text-muted font-13 m-b-30"></p>
          <b style="font-size: 30px">Assign User To Company</b><br><hr>

      <form class="form-horizontal" name="user_mapping_form" id="user_mapping_form" enctype='multipart/form-data' method='post'>
      {{csrf_field()}}

        <div class="col-md-6">
         <div class="form-group row">
              <label for="name" class="col-sm-4 col-form-label">Select Role :</label>
              <div class="col-sm-6">
                <select name='role_id' id='role_id' class='form-control'>
                  <option value=''>Select Role</option>
                  @foreach($role_result as $role)
                    <option value='{{ $role -> role_id }}'>{{ $role -> role_name }}</option>
                  @endforeach
                </select>
                <label class="control-label" for="inputError"><span id="err_role_id" class="error_class"></span></label>
              </div>
            </div>
        </div>


        <div class="col-md-6">
         <div class="form-group row">
              <label for="name" class="col-sm-4 col-form-label">Select User :</label>
              <div class="col-sm-6">
                <select name='user' id='user' class='form-control'>
                  <option value=''>Select User</option>  
                </select>
                <label class="control-label" for="inputError"><span id="err_user" class="error_class"></span></label>
              </div>
            </div>
        </div>


        <div class="col-md-6">
         <div class="form-group row">
              <label for="name" class="col-sm-4 col-form-label">Select Company :</label>
              <div class="col-sm-6">
                <select name='company' id='company' class='form-control'>
                  <option value=''>Select Company</option>
                </select>
                <label class="control-label" for="inputError"><span id="err_company" class="error_class"></span></label>
              </div>
            </div>
        </div>

       <center>
         <div class="col-sm-12">
         <button type="submit" id="btn_submit" name="btn_submit" class="btn btn-primary">Submit</button>
         </div>
       </center>
      </form>
          
        </div>
      </div>
    </div>
</div>
</div>

<script type="text/javascript">

  $("#role_id").on('change',function(){

    if($("#role_id").val() == "" || $("#role_id").val() == null){
      var option_data = "<option value=''>Select User</option>";
      $("#user").html(option_data);
      return false;
    }else{
      var formdata = new FormData($("#user_mapping_form")[0]);

      $.ajax({
        type : 'POST',
        url : 'load-rolewise-users',
        data : formdata,
        contentType : false,
        processData : false,
        success : function(response){
          var data = JSON.parse(response);
          var option_data = "<option value=''>Select User</option>";

          $.each(data , function(key , value){
            option_data += "<option value='" + value.user_id + "'>" + value.user_name + "(" + value.email + ")</option>";
          });

          $("#user").html(option_data);
        }
      });
    }

  });


  $('#user').on('change' , function(){

    if($("#user").val() == "" || $("#user").val() == null){
      var option_data = "<option value=''>Select Company</option>";
      $("#company").html(option_data);
      return false;
    }else{
      var formdata = new FormData($("#user_mapping_form")[0]);

      $.ajax({
        type : 'POST',
        url : 'load-userwise-company',
        data : formdata,
        contentType : false,
        processData : false,
        success : function(response){
          var data = JSON.parse(response);
          var option_data = "<option value=''>Select Company</option>";

          $.each(data , function(key , value){
            option_data += "<option value='" + value.comp_id + "'>" + value.comp_name + "</option>";
          });

          $("#company").html(option_data);
        }
      });
    }
  });

  $("#user_mapping_form").on('submit',function(event){

    event.preventDefault();
    $(".error_class").empty();
    var formdata = new FormData($("#user_mapping_form")[0]);

    $.ajax({
        type : 'POST',
        url : 'user-mapping-insert-update',
        data : formdata,
        contentType : false,
        processData : false,
        success : function(response){
          var data = JSON.parse(response);

          if(data.status == "success"){
            alert(data.messege);
            window.location.reload();
          }else{
            $.each(data , function(key , value){
              $("#err_" + key).text(value);
            });
          }
          
        }
      });

  });
</script>
@endsection