@extends('layouts.main')
@section('title','User Assessment Mapping')
@section('content')
<div class="pcoded-content">
  <div class="hme-loading-mask">
    <div class="hme-loading-container">
        <div class="hme-dual-ring"></div>
        <div>Please wait, Loading...</div>
    </div>
  </div>
  <div class="pcoded-inner-content p-0">
    <div class="main-body">
      <div class="page-wrapper p-0">
        <div class="page-header p-15 m-b-0 pro-page-heading1">
          <div class="page-header-title">
            <h4>Manage User Assessment Mapping</h4>
          </div>

          <!-- Flesh Message Start -->
          @if(Session::get('errors'))
            <div class="alert alert-danger background-danger">
              <button type="button" class="close m-t-0" data-dismiss="alert" aria-label="Close">
                <i class="hiremee-multiply text-white"></i>
              </button>
              <strong>Error!</strong> {{ Session::get('errors')->first() }}
            </div>
          @endif
          @if($message = Session::get('error'))
            <div class="alert alert-danger background-danger">
              <button type="button" class="close m-t-0" data-dismiss="alert" aria-label="Close">
                <i class="hiremee-multiply text-white"></i>
              </button>
              <strong>Error!</strong> {{ $message }}
            </div>
          @elseif($message = Session::get('success'))
            <div class="alert alert-success background-success">
              <button type="button" class="close m-t-0" data-dismiss="alert" aria-label="Close">
                <i class="hiremee-multiply text-white"></i>
              </button>
              <strong>Success!</strong>  {{ $message }}
            </div>
          @endif
          <!-- Flesh Message End -->
          
          @if(!session()->has('new_portal_redirect'))
          <div class="page-header-breadcrumb p-r-10">
            <ul class="breadcrumb-title">
              <li class="breadcrumb-item">
                @if(Auth::guard('corporate')->user()->user_type == 1)
                  <a href="{{secure_url('company/dashboard') }}">
                @elseif(Auth::guard('corporate')->user()->user_type == 2)
                  <a href="{{secure_url('recruiter/dashboard') }}">
                @endif 
                    <span class="hiremee-home"></span>
                  </a>
              </li>
              <li class="breadcrumb-item">
               
                  <a href="{{ secure_url('pro/user/assessment/mapping') }}">Manage Mapping</a>
              </li>
            </ul>
          </div>
          @endif
        </div>

        <div class="page-body">
          <div class="pageheader">
            <div class="row">
              <div class="col col-md-6 d-flex align-items-center">
                Manage User Assessment Mapping
              </div>
            </div>

            <!-- @author Naveenkumar S @version 21.0 -->
              <!-- Start -->
              {!! Form::open(["id" => "evalualtor_mapping", "name" => "evalualtor_mapping"]) !!}
              <div class="d-flex align-items-start" style="margin-top: 19px;">
                <div class="col-md-3 text-left  f-w-400"><p class="l-h-0">User:</p>
                  <div class="input-group">
                    <select class="form-control js-select2" id="evaluator" placeholder="Select User" name="evaluator">
                      <option value="">Please select the User</option>
                      @foreach($corporate_user_dropdown as $user)
                        @php 
                          $role_id = "";
                          $username = $user->recruiterProfile ? ($user->recruiterProfile->first_name ?? '') : ''  . "(";
                          foreach($user->getProRoles->whereIn("role_id", [5, 7]) as $role) {
                            $username = ($role->role_id == 5) ? $username . " Evaluator " : $username . " Proof reader ";
                            $role_id = ($role_id == "") ? $role->role_id : $role_id . "," . $role->role_id;
                          }
                          $username = $username . ")";
                          $username = str_replace("  ", " ,", $username);
                        @endphp


                        <option value="{{ $user->id}}" data-role="{{ $role_id }}">{{ $username }}</option>
                      @endforeach
                    </select>
                  </div>
                </div>  
                <div id="assessment_type_field_div" class="form-radio ml-2"><p class="l-h-0">Assessment Type: </p>
                  <div class="radio radiofill radio-primary radio-inline">
                    <label>
                      <input name="assessment_type" class="assessment_type" value="1" type="radio" ><i class="helper"></i>Corporate
                    </label>
                  </div>
                  <div class="radio radiofill radio-primary radio-inline">
                      <label>
                        <input name="assessment_type" class="assessment_type" value="2" type="radio"><i class="helper"></i>Test Inventory
                      </label>
                  </div>
                </div>

                <div class="col-md-4 text-left  f-w-400"><p class="l-h-0">Assessment: </p>
                  <div class="input-group d-block">
                    <select class="form-control eval-select2 js-select2" id="assessment_ids" placeholder="Select Assessment" name="assessment_ids[]" width="100%" multiple>
                      <opion class="w-100">Please select the assessments</opion>
                    </select>
                    <p> <i id="assessment_selection_info">Select "User" and "Assessment Type" to get "Assessment" list</i></p>
                  </div>
                </div>
                <div class="col-md-2" style="margin-top: 16px;">
                  <button class="btn btn-primary" type="button" id="add_mapping">Add Mapping</button>
                </div>
              </div>
              {!! Form::close() !!}
              <br>
              <!-- End -->
            </div>
             <table class="table table-striped pro-list-table tbl-truncate-break">
              <thead class="bgn-gradient-blue">
                <tr>
                  <th scope="col">Sl. No.</th>
                  <th scope="col">Assessment</th>
                  <th scope="col">Assessment Type</th>
                  <th scope="col" id="js-col-ass-cmds">Comments</th>
                  <th scope="col">Action</th>
                </tr>
              </thead>
              <tbody id="table_content">
              </tbody>
            </table>
          </div>
          <div class="col-md-12 mb-4">
            <div class="text-center">
                <button class="btn btn-outline-info " style="margin: 15px;" id="load_more_assessment" data-page='1'>Load more...</button>
                
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
<div class="md-modal m-w-980 md-effect-1" id="assessment_cmd_view">
   <div class="md-content">
      <button type="button" class="btn btn-primary btn-icon-custom waves-effect md-close login-close-btn" id="clear_assessment_modal"><span class="hiremee-multiply f-18"></span></button>
      <div class="row p-l-15 p-r-15">
         <div class="col-sm-12 col-lg-12">
            <div class="page-header-title m-t-10 m-b-20">
               <h4 class="g-l-b">Assessment comments View</h4>
            </div>
            <div class="min-h-250">
            <div class="form-group" id="_load_assessment_cmd">
            </div>
          </div>
         </div>
      </div>
   </div>
</div>
<div class="md-overlay"></div>
@endsection

@section('footer')
  
  <script type="text/javascript">
    $(function() {
        $("#load_more_assessment").hide();
        $("#evaluator").change(function() {

          var roles = $(this).find("option:selected").data("role").toString();

          var is_proof_reader = (roles.indexOf('7') != -1) ? true : false;
          var is_evaluator = (roles.indexOf('5') != -1) ? true : false;
          var assessment_type
          var evaluator_id = $(this).val();

          if(is_proof_reader && !is_evaluator) {
            $("#assessment_type_field_div").hide();
            assessment_type = 1;
            $("#assessment_selection_info").html('Select "User" to get "Assessment" list');
          } else {
            $("#assessment_type_field_div").show();
            assessment_type = $("input[name='assessment_type']:checked").val();
            $("#assessment_selection_info").html('Select "User" and "Assessment Type" to get "Assessment" list');
          }

          var show_comments = true;
          if(is_evaluator && !is_proof_reader) {
            show_comments = false;
          }

          if(assessment_type && evaluator_id) {
            getAssessmentDropdownList(evaluator_id, assessment_type);
          }
          getUserAssessmentList(evaluator_id, 1, show_comments);

        });
    });

    function getAssessmentDropdownList(evaluator_id, assessment_type) {
      $.ajax({
        url: baseUrl+'/pro/user/mapping/dropdown/'+evaluator_id,
        dataType: "json",
        type: "get",
        data: { "type" : assessment_type},
        async: false,
        success: function(data) {
          var option = "<option class='w-100'>Select the assessment<option>";
          $.each(data.dropdown_assessment_list, function(id, optionvalue) {
            option = option + "<option class='w-100' value='" +  id + "'>" + optionvalue + "</option>";
          });
          $("#assessment_ids").html(option);
        }, 
        error: function (req, status, error) {
          alert("Something went wrong");
          console.log(req);
          console.log(status);
          console.log(error);
        }
      });
    }

    function getUserAssessmentList(evaluator_id, page = 1, show_comments = false) {
      $.ajax({
        url: baseUrl+'/pro/user/assessment/mapping/list/'+evaluator_id,
        dataType: "json",
        type: "get",
        data: {"page": page},
        success: function(data) {
          if(data.page > 1) {
            $("#table_content").append(data.render);
          } else {
            $("#table_content").html(data.render);
          }
          if(data.hasMorePage) {
            $("#load_more_assessment").show();
          } else {
            $("#load_more_assessment").hide();
          }
          if(show_comments) {
            $(".proofreader_ass_cmds").show();
          } else {
            $(".proofreader_ass_cmds").hide();
          }
        }, 
        error: function (req, status, error) {
          alert("Something went wrong");
          console.log(req);
          console.log(status);
          console.log(error);
        }
      });
    }

    $(function() {
      $("#add_mapping").click(function() {
          var evaluator = $("#evaluator").val();
           if(evaluator == "" || evaluator == undefined) {
            swal(
                "Error!",
                "Please select the evaluator",
                "error"
              );
            valid = false;
            return false;
          }
          var assessments = $("#assessment_ids").val();
          var roles = $("#evaluator").find("option:selected").data("role").toString();
          var is_proof_reader = (roles.indexOf('7') != -1) ? true : false;
          var is_evaluator = (roles.indexOf('5') != -1) ? true : false;
          var assessment_type;
          if(is_proof_reader && !is_evaluator) {
            $("#assessment_type_field_div").hide();
            assessment_type = 1;
          } else {
            $("#assessment_type_field_div").show();
            assessment_type = $("input[name='assessment_type']:checked").val();
          }

          var show_comments = true;
          if(is_evaluator && !is_proof_reader) {
            show_comments = false;
          }

          var valid = true;

          
          if(assessments == "" || assessments == undefined) {
            swal(
                "Error!",
                "Please select the assessment",
                "error"
              );
            valid = false;
          }

          if(assessments == "" || assessments == undefined) {
            swal(
                "Error!",
                "Please select the evaluator",
                "error"
              );
            valid = false;
          }

          if(valid) {
            $.ajax({
              url: baseUrl+'/pro/user/add/assessment/mapping/'+evaluator,
              dataType: "json",
              type: "post",
              data: {"assessment_ids": assessments, "assessment_type": assessment_type},
              success: function(data) {

                $("#table_content").append(data.render);

                getAssessmentDropdownList(evaluator, assessment_type);
                getUserAssessmentList(evaluator, 1, show_comments);
                swal(
                    "Success",
                    "Mapping added successfully",
                    "success"
                  );

              }, 
              error: function (req, status, error) {
                alert("Something went wrong");
                console.log(req);
                console.log(status);
                console.log(error);
              }
            });
          }
      });
    });

      $(document).on("click", ".delete_mapping", function() {
        
        var assessment = $(this).data("mapping_id");

        swal({
            title: "Confirm the delete record",
    
            type: "info",
            showCancelButton: true,
            confirmButtonText: "Delete",
            cancelButtonText: "Cancel",
            closeOnConfirm: false
          }, function(isConfirm) {
            if (isConfirm) {
              var evaluator = $("#evaluator").val();
              var roles = $("#evaluator").find("option:selected").data("role").toString();

              var is_proof_reader = (roles.indexOf('7') != -1) ? true : false;
              var is_evaluator = (roles.indexOf('5') != -1) ? true : false;
              var assessment_type;
              if(is_proof_reader && !is_evaluator) {
                $("#assessment_type_field_div").hide();
                assessment_type = 1;
              } else {
                $("#assessment_type_field_div").show();
                assessment_type = $("input[name='assessment_type']:checked").val();
              }

              var show_comments = true;
              if(is_evaluator && !is_proof_reader) {
                show_comments = false;
              }

              $.ajax({
                url: baseUrl+'/pro/user/remove/assessment/mapping/'+evaluator,
                dataType: "json",
                type: "delete",
                data: {"assessment_id": assessment},
                success: function(data) {

                  $("#table_content").append(data.render);

                  getAssessmentDropdownList(evaluator, assessment_type);
                  getUserAssessmentList(evaluator, 1, show_comments);
                  swal(
                      "Success",
                      "Mapping removed successfully",
                      "success"
                    );

                }, 
                error: function (req, status, error) {
                  alert("Something went wrong");
                  console.log(req);
                  console.log(status);
                  console.log(error);
                }
              });
            }
         });
      });



        $(document).on("click", "input[name='assessment_type']:checked", function() {

          var evaluator_id = $("#evaluator").val();
          var assessment_type = $(this).val();

          if(evaluator_id && assessment_type) {
            var page = 1;



            var roles = $("#evaluator").find("option:selected").data("role").toString();
            var is_proof_reader = (roles.indexOf('7') != -1) ? true : false;
            var is_evaluator = (roles.indexOf('5') != -1) ? true : false;
            var show_comments = true;

            if(is_evaluator && !is_proof_reader) {
              show_comments = false;
            }

            getAssessmentDropdownList(evaluator_id, assessment_type);
            getUserAssessmentList(evaluator_id, page, show_comments);
          }
          
        });

      $(function() {
        $("#load_more_assessment").click(function() {
          var evaluator = $("#evaluator").val();
          var page = parseInt($(this).data("page")) + parseInt(1);

          var roles = $("#evaluator").find("option:selected").data("role").toString();
          var is_proof_reader = (roles.indexOf('7') != -1) ? true : false;
          var is_evaluator = (roles.indexOf('5') != -1) ? true : false;

          var show_comments = true;
          if(is_evaluator && !is_proof_reader) {
            show_comments = false;
          }

          getUserAssessmentList(evaluator, page, show_comments);
	  $(this).data("page", page);
        });
      });
  $(document).on('click','.proofreader_ass_cmds',function(){ 
   var ass_id = $(this).attr('data-assessment_id');
   var evaluator_id = $(this).attr('data-evaluator_id');
   $.ajax({
      type: "get",
      url: baseUrl +"/pro/assessment/proofreader-commads",
      data:{"assessment_id":ass_id, "evaluator_id": evaluator_id},
      dataType:'html',
      cache:false,  
      success: function(data) {
            $('#assessment_cmd_view').addClass('md-show');
            $("body").find("#_load_assessment_cmd").html(data);
          }
        });
});
$('#clear_assessment_modal').click(function(){
    $('#_load_assessment_cmd').html("");
    $('#assessment_cmd_view').removeClass('md-show');
   });
  </script>
@endsection