@extends('layouts.main')
@section('title',"Pool Management")
@section('content')
<div class="pcoded-content">
   <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 Pools</h4>
               </div>
               <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/pool-master') }}">Pool master</a>
                     </li>
                  </ul>
               </div>
            </div>
            <div class="page-body">
               {{-- Upload Question Wrapper for tabs and content --}}
               <div class="row">
                  <div class="col-xs-12 col-md-12">
                     <div class="tab-content p-0" id="myTabContent">
                        <div class="tab-pane fade show active" id="question-pool" role="tabpanel" aria-labelledby="bulk-upload-tab">
                           <div class="card-block p-0">
                              <div class="row">
                                 <div class="col-xs-12 col-md-9 p-r-0">
                                    <table class="table tbl-truncate-break table-striped pro-list-table">
                                       <thead class="bgn-gradient-blue">
                                          <tr>
                                             <th scope="col">
                                                Pool Name
                                             </th>
                                             <th scope="col">Question Type</th>
                                             <th scope="col">Created Date</th>
                                             <th scope="col"> </th>
                                             <th scope="col"> Action</th>
                                          </tr>
                                       </thead>
                                       <tbody id="js-component-loadpool">
                                          <div class="hme-loading-mask">
                                             <div class="hme-loading-container">
                                                <div class="hme-dual-ring"></div>
                                                <div>Please wait, Loading...</div>
                                             </div>
                                          </div>
                                        {!! $component_pool !!}

                                       </tbody>
                                    </table>
                                    <input type="hidden" id="total_count" value={{count($pool_master_list)}}>
                                    <div class="col-md-12">
                                       <div class="text-center">
                                          <a href="javascript:void(0)" class="btn orange btn-lg" id="poolname_loader" data-page='2'>Load more...</a>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="col-xs-12 col-md-3 bg-eaeaea">
                                    <header class="hme-pro-head m-t-15">Create a new Question Pool</header>
                                     {!! Form::open(array('class'=>'form-horizontal','name'=>'poolmasteradd','id'=>'poolmasteradd')) !!}
                                    <div class="pro-right-utility">
                                       <div class="form-group mb-4">
                                          <label>Question Type </label>
                                          <div class="pos-relative">
                                             <div class="hme-select-style">
                                                {!! Form::select('question_type',$type_master_selectbox ,null,['class'=>'form-control js-select2','id'=>'pool_question_type','placeholder' => 'Please Select Question type']) !!}
                                             </div>
                                          </div>
                                       </div>
                                       <input type="hidden" class="form-control text-left" name="pool_id"id="pool_id">
                                       <div class="form-group mb-4">
                                          <label>Pool name </label>
                                          <div class="pos-relative">
                                             <input type="text" class="form-control" name="poolname" id="poolname">
                                          </div>
                                       </div>
                                       <div class="row m-t-20">
                                          <div class="col-sm-12 d-flex justify-content-center">
                                             <button type="submit" class="btn btn-primary pro-green c-white" id="create_pool">Create Pool</button>  &nbsp; 
                                             <a href="javascript:void(0)" class="btn btn-default" id="clear_pool">Clear</a>                     
                                          </div>
                                       </div>
                                    </div>
                                    {!! Form::close() !!}
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<div class="md-modal m-w-440 md-effect-1" id="view-topic">
   <div class="md-content">
      <button type="button" class="btn btn-primary btn-icon-custom waves-effect md-close login-close-btn" id="clear_topic_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">Question Topic</h4>
            </div>
            <div class="min-h-250">
            <div class="form-group" id="modal_list">
            </div>
          </div>
            <div class="row m-t-20  ">
               <div class="col-sm-12 d-flex justify-content-center">
                  <a href="javascript:void(0)" class="btn p-l-40 p-r-40 btn-warning f-16 pull-right" id="clear_topic_modal_2">OK</a>
               </div>
               <div class="col-md-2"></div>
            </div>
         </div>
      </div>
   </div>
</div>
<div class="md-overlay"></div>
@endsection
@section('footer')
<script type="text/javascript">
$(document).ready(function(){
  if($('#total_count').val()>=100){
    $('#poolname_loader').show();
  }else{
    $('#poolname_loader').hide();
  }
});
 $("#poolmasteradd").submit(function(e) {
    e.preventDefault();
  }).validate({
     errorElement: 'span',
           errorPlacement: function (error,element){
               var parent = $(element).parent();
               $('.tooltip').tooltip('hide');
               $("body").find('#'+error[0].id+'-custom').remove();
               parent.append('<span data-position="left" data-delay="0" data-toggle="tooltip" data-original-title="'+error[0].innerText+'" class="js-tootletip hiremee-info text-danger tooltip-validate tooltipped" id="'+error[0].id+'-custom"></span>');
               $('#'+error[0].id+'-custom').tooltip(tooltip_direction_options);
           },
           success: function (element){
             $("body").find('#'+element[0].id+'-custom').remove();
             $('#'+element[0].id+'-custom').tooltip('hide');
             $('.js-tooltip-validate').tooltip();
           },
            onfocusout: false,
           rules: {
               question_type: {
                   required: true,
               },
                poolname: {
                   required: true,
                   normalizer: function( value ) {
                      return $.trim( value );
                     },
                  maxlength:100,
           },
         },
          messages: {
               question_type: {
                   required: "Please select a Question type",
               },
               poolname: {
                   required: "Please enter a Pool name",
                   maxlength:"Please enter pool name less than 100 characters",
               },
           },
      submitHandler: function(form) { 
         $("body").find("#create_pool").text("Processing...").attr("disabled",true);
            var question_type= $.trim($('#pool_question_type').val());
            var poolname= $.trim($('#poolname').val());
            var pool_id=$("#pool_id").val();
            $.ajax({
              method:"POST",
              url: baseUrl+"/pro/pool-master-insert",
              data:{ "pool_id":pool_id,"question_type":question_type,"poolname":poolname,"_token": $('meta[name=csrf-token]').attr('content') },
              success:function(response){
                if (response.status == 200) {
                      swal({
                        html: true, 
                        title: '<span class="sweet-success-text">Success</span>', 
                        text: response.message,
                        type: 'success',
                        confirmButtonColor: '#28e1bd',
                        showCancelButton: false,
                        confirmButtonText: "OK",
                        closeOnConfirm: false
                      });
                    $("body").find("#create_pool").text("Create Pool").attr("disabled",false);
                    $('#js-component-loadpool').html("");
                    $('#js-component-loadpool').append(response.component);
                    $('.hme-loading-mask').fadeOut();
                    if(response.hasmore == false) {
                      $('#poolname_loader').hide();
                      $('#loader').show();
                    } else {
                      $('#poolname_loader').show();
                      $('#loader').hide();
                      if(parseInt($('#poolname_loader').attr('data-page')) != 2){
                      $('#poolname_loader').attr('data-page',2);
                    }
                  }
                      $("#pool_question_type").attr('disabled',false);
                      $("#pool_question_type").val(null).trigger('change.select2');
                      $('#pool_id').val("");
                      $('#poolname').val("");
                      $(".tooltip-validate").remove();
                      $(".hme-pro-head").text("Create a new Question Pool");
                      e.preventDefault();
                 }else{
                      swal({
                        html: true, 
                        title: '<span class="sweet-warning-text">Something Went Wrong</span>', 
                        text: response.message,
                        type: "warning",
                        showCancelButton: false,
                        confirmButtonText: "OK",
                        closeOnConfirm: false,
                         confirmButtonColor: '#ffbc01',
                      });
                    $("body").find("#create_pool").text("Create pool").attr("disabled",false);
                 }
               }  
             });
        return false;
    }
});

   $(document).on('click','#pool_op_modal', function() {
     $('#view-topic').addClass('md-show');
   });
   $(document).on('click','#clear_pool', function() {
          $("#pool_question_type").attr('disabled',false);
          $("#pool_question_type").val(null).trigger('change.select2');
          $("body").find("#create_pool").text("Create Pool");
          $('#pool_id').val("");
          $('#poolname').val("");
          $(".tooltip-validate").remove();
          $(".hme-pro-head").text("Create a new Question Pool");
   });
   $(document).on('click','.pool_edit', function() {
  $("body").find("#create_pool").text("Update Pool").attr("disabled",false);
   $pool_edit_val=$(this).attr("data-id");
    $.ajax({
         type : "get",
         url: baseUrl+"/pro/pool-master-edit",
         data : {"id":$pool_edit_val},
         success : function(data)
         {
          if(data.status==200){
          $("#pool_question_type").val(data.pool_master_list.question_type).trigger('change.select2');
          $("#pool_question_type").attr('disabled',true);
          $('#pool_id').val(data.pool_master_list.id);
          $('#poolname').val(data.pool_master_list.name);
           $(".hme-pro-head").text("Update Question Pool");
          $("body").find("#create_pool").text("Update Pool");  
         }else{
                swal({
                        html: true, 
                        title: '<span class="sweet-warning-text">Something Went Wrong</span>', 
                        text: data.message,
                        type: "warning",
                        showCancelButton: false,
                        confirmButtonText: "OK",
                        closeOnConfirm: false,
                         confirmButtonColor: '#ffbc01',
                      });
              $("body").find("#create_pool").text("Create Pool");  
            }
         }
      });
   });
   $(document).on('click','.pool_topic', function() {
   $pool_title_list_val=$(this).attr("data-id");
    $.ajax({
         type : "get",
         url: baseUrl+"/pro/pool-master-topiclists",
         data : {"id":$pool_title_list_val},
         success : function(data)
         {
          if (data.component =="") {
              $('#modal_list').append("No records found");
          }else{
          for (var i = 0 ; i <= data.component.length-1; i++) {
              var $newDiv = $("<div/>").addClass("col-md-12 text-left f-w-100 f-14 m-b-8 border-grey").html(i+1+'.&nbsp'+data.component[i]+'</br>');
          $('#modal_list').append($newDiv);
          }
          }           
         },
        error: function(error){
         swal({
         html: true, 
         title: '<span class="sweet-danger-text">Something Went Wrong</span>', 
         text: "Your action  has been suspended, Sorry for the inconvenience. Please try again later",
         type: "error",
         showCancelButton: false,
         confirmButtonText: "OK",
         closeOnConfirm: false
       });
     }
      });
   });
   $('#clear_topic_modal').click(function(){
    $('#modal_list').html("");
    $('#view-topic').removeClass('md-show');
   });
   $('#clear_topic_modal_2').click(function(){
    $('#modal_list').html("");
    $('#view-topic').removeClass('md-show');
   });
   $(document).on('click','.pool_delete', function() {
   $pool_delete_val=$(this).attr("data-id");
   swal({
       html: true, 
       title: "Delete",
       text: '<span class="sweet-warning-text">Are you sure want to delete?</span>', 
       type: "warning",
       showCancelButton: true,
       confirmButtonText: "OK",
       closeOnConfirm: false
     },
     function() {
     $.ajax({
         type : "get",
         url: baseUrl+"/pro/pool-master-delete",
         data : {"id":$pool_delete_val},
         success : function(data)
         {
          if(data.status==200){
             swal({
                       html: true, 
                       title: '<span class="sweet-success-text">Deleted</span>', 
                       text: 'Deleted successfully',
                       type: 'success',
                       showCancelButton: false,
                       confirmButtonText: "OK",
                       closeOnConfirm: false
             });
             $('#js-component-loadpool').html("");
         $('#js-component-loadpool').append(data.component);
         $('.hme-loading-mask').fadeOut();
         if(data.hasmore == false) {
           $('#poolname_loader').hide();
           $('#loader').show();
         } else {
           $('#poolname_loader').show();
           $('#loader').hide();
           if(parseInt($('#poolname_loader').attr('data-page')) != 2){
           $('#poolname_loader').attr('data-page',2);
           }
         } 
          $("#pool_question_type").attr('disabled',false);
          $("#pool_question_type").val(null).trigger('change.select2');
          $('#pool_id').val("");
          $('#poolname').val("");
          $(".tooltip-validate").remove();
          $(".hme-pro-head").text("Create a new Question Pool");
          $("body").find("#create_pool").text("Create Pool");                
         }else{
                      swal({
                        html: true, 
                        title: '<span class="sweet-warning-text">Something Went Wrong</span>', 
                        text: response.message,
                        type: "warning",
                        showCancelButton: false,
                        confirmButtonText: "OK",
                        closeOnConfirm: false,
                         confirmButtonColor: '#ffbc01',
                      });
                    $("body").find("#create_pool").text("Create pool").attr("disabled",false);
                 }
     }
      });
   });
    });
   $(document).on('click','#poolname_loader', function() {
   $(this).hide();
   $('.hme-loading-mask').fadeIn();
   $.ajax({
     url: baseUrl+'/pro/pool-master',
     type: "get",
     data: {'limit': 100,'page':$(this).attr('data-page')},
     success: function(response){
       if (response.status == 200) {
         $('#js-component-loadpool').append(response.component);
         $('.hme-loading-mask').fadeOut();
         if(response.hasmore == false) {
           $('#poolname_loader').hide();
           $('#loader').show();
         } else {
           $('#poolname_loader').show();
           $('#loader').hide();
           $('#poolname_loader').attr('data-page',parseInt($('#poolname_loader').attr('data-page'))+1);
         }
       }
     },
     error: function(error){
       swal({
         html: true, 
         title: '<span class="sweet-danger-text">Something Went Wrong</span>', 
         text: "Your action  has been suspended, Sorry for the inconvenience. Please try again later",
         type: "error",
         showCancelButton: false,
         confirmButtonText: "OK",
         closeOnConfirm: false
       });
     }
   });
   });

</script>
@endsection