@extends('main')
 
@section('css')
<link href="{{ asset('/css/bootstrapValidator.min.css')}}" rel="stylesheet">
@endsection

@section('content')
<section class="main_content">
    <div class="container">
      <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-10">
         <div class="signup-step-2-text"> <h1 class="signup-step-1-head">Specify your tags</h1>
          <p > You can detail your tags even further to get the best out of our search and collaboration features. 
            You will be able to do it later if you want.</p></div>
         <form method="post">   
          <div class="talent_specify">
            <ul class="row">
              @foreach($req_parent_data as $req)
              <li>
                <div class="col-sm-3">
                  <div class="btn-group">
                    <button data-toggle="dropdown" class="btn btn-info" type="button">{{$parent_data[$req]['name']}}</button>
                  </div>
                </div>
                <div class="col-sm-3" id="div_cat_{{$req}}">
                    @if(isset($child_data[$req]))
                                                <select class="form-control input-lg btn-warning profile_select change_cat" name="sub_cat_{{$req}}[]" id="sub_cat_{{$req}}" data-parent="{{$req}}">
                           <option value="">Add Skills</option>   
                        </select>
                    @endif
                </div>
                <div class="col-sm-3" id="div_ind_{{$req}}">
                    @if(isset($child_data[$req]))
                                                <select class="form-control input-lg btn-success profile_select change_industry" name="sub_industry_{{$req}}[]" id="sub_industry_{{$req}}" data-parent="{{$req}}">
                           <option value="">Add Industry</option>   
                        </select>
                    @endif
                </div>
                <div class="col-sm-3" id="div_role_{{$req}}">
                    @if(isset($child_data[$req]))
                                                <select class="form-control input-lg btn-primary profile_select change_role" name="sub_role_{{$req}}[]" id="sub_role_{{$req}}" data-parent="{{$req}}">
                           <option value="">Add Role</option>   
                        </select>
                    @endif
                </div>
                <div class="clearfix"></div>
              </li>
              @endforeach
            </ul>
            <div class="clearfix"></div>
          </div>
          <div class="row">
		  <div class="col-md-12 step-2-col">
<!--            <div class="col-sm-2"> <a class="form-control" href="#">Previous</a> </div>
            <div class="col-sm-2"> <a class="form-control" href="#">Goto Profile</a> </div>
            <div class="col-sm-2 pull-right xs-clear"> <a class="form-control orange" href="#">Next</a> </div>
-->               <input type="hidden" name="_token" value="{{ csrf_token() }}">
           <!-- <div class="col-sm-3"> <button type="button" class="form-control">Previous</button></div>-->
                   <input type="hidden" name="profile_save_type" id="profile_save_type" value="next">
                   <div class="signup-step-final">
              <button type="submit" class="btn go-to-profile" id="goto_profile" value="goto_profile">Goto Profile</button>
    <!--          <div class="col-sm-3 pull-right xs-clear"> <button type="submit" class="form-control orange " id="profile_next" name="next" value="step2">Next</button></div>-->
              <button type="submit" class="btn signup-setp1-next " id="profile_next" name="next" value="step2">Finish</button>
              </div>
			  </div>
          </div>
        </form>
        </div>
      </div>
    </div>
	
  </section>
@endsection
@section('js')
<script src="{{ asset('js/bootstrapValidator.min.js')}}"></script>
<script src="{{ asset('js/maskedinput/jquery.maskedinput.min.js')}}"></script>
<script src="{{ asset('js/validation.js')}}"></script>
<script type="text/javascript">
  var parent_cat = JSON.parse('null');
  var child_cat = JSON.parse('null');
  var roles = JSON.parse('null');
  var industry = JSON.parse('null');
  var roles = JSON.parse('null');

      $(document).on('change','.change_cat',function(){
    
	parent_id = $(this).attr('data-parent');
	sel_category = $(this).val();
	var sel_category_text="";
	sel_category_text = $(".change_cat:last option:selected").text();
	//alert(sel_category_text);
	//if(parent_id=="") parent_id = 7;
	if(sel_category_text   =='Other')
    { 
      $("#div_cat_"+parent_id).append('<input type="text" class="form-control other_skill" name="sub_skill_'+parent_id+'[]" id="sub_skill_'+parent_id+'"  placeholder="Other skill Value">');
    }	
     if(sel_category=='remove')
    {
      $(this).remove();
      $('select#sub_cat_'+parent_id).each(function(){
            if($(this).val()=='')
            $(this).remove();
       });
    }  
   
    parent_id = $(this).attr('data-parent');
    parent_child_data = child_cat[parent_id];
    p_c_d_length = parent_child_data.length;
    d_c_length = $('select#sub_cat_'+parent_id).length;
    
        tempArray = new Array();
         $('select#sub_cat_'+parent_id).each(function(){
         // alert($.type(parseInt($(this).val())));
            tempArray.push(parseInt($(this).val()));
          });
          option ='<option value="">Add Skills</option>';
           selected_id=''; selected_value='';cate_next_option=0;
         $.each(parent_child_data, function(i, item) {
         // alert($.inArray(parent_child_data[i].id,tempArray));
            if($.inArray(parent_child_data[i].id,tempArray)===-1)
            {
              option=option+'<option value="'+parent_child_data[i].id+'">'+parent_child_data[i].name+'</option>';
              cate_next_option++;
              //alert(parent_child_data[i].name);
            }
            else if(sel_category==parent_child_data[i].id)
            {
              selected_id = parent_child_data[i].id;
              selected_value = parent_child_data[i].name;
            }
          });
         
         if(selected_value && selected_id)
         $(this).html('<option value="remove">Remove Skills</option><option value="'+selected_id+'" selected>'+selected_value+'</option>');

        if(cate_next_option>0)
        {
         select ='<select class="form-control input-lg btn-warning profile_select change_cat" name="sub_cat_'+parent_id+'[]" id="sub_cat_'+parent_id+'" data-parent="'+parent_id+'">'+option+'</select>';
         $("#div_cat_"+parent_id).append(select);
		 
			if(sel_category_text !='Other')
				$('.other_skill').hide();		 
        }
    //console.log(tempArray);

  });

$(document).on('change','.change_industry',function(){
    parent_id = $(this).attr('data-parent');
    sel_industry = $(this).val();

    if(industry[sel_industry] && industry[sel_industry].name ==='Other')
    {
      $("#div_ind_"+parent_id).append('<input type="text" class="form-control other_industry" name="sub_industry_'+parent_id+'[]" id="sub_industry_'+parent_id+'"  placeholder="Other Industry Value">');
    }

    if(sel_industry=='remove')
    {
      selected_data_id = $(this).attr('data-selected-id');
      
      if(industry[selected_data_id].name ==='Other')
      $('.other_industry').remove();
      
      $(this).remove();
      $('select#sub_industry_'+parent_id).each(function(){
            if($(this).val()=='')
            $(this).remove();
       });
    }  

      s_i_t_array = new Array(); //s_i_t_array : selected indutry temprary array;
        $('select#sub_industry_'+parent_id).each(function(){
            s_i_t_array.push(parseInt($(this).val()));
          });

        //console.log(s_i_t_array);
          industry_option ='<option value="">Add Industry</option>';      

          industry_next_option = 0;selected_ind_id=''; selected_ind_value='';
          $.each(industry, function(i, item) {
         // alert($.inArray(parent_child_data[i].id,tempArray));
              
            if($.inArray(industry[i].id,s_i_t_array)===-1)
            {
              industry_option=industry_option+'<option value="'+industry[i].id+'">'+industry[i].name+'</option>';
              industry_next_option++; 
              //alert(parent_child_data[i].name);
            }
            else if(sel_industry==industry[i].id)
            {
              selected_ind_id = industry[i].id;
              selected_ind_value = industry[i].name;
            }
          });

       if(selected_ind_value && selected_ind_id)
       {
        $(this).attr('data-selected-id',selected_ind_id);
        $(this).html('<option value="remove">Remove Industry</option><option value="'+selected_ind_id+'" selected>'+selected_ind_value+'</option>');
       }
       if(industry_next_option>0)   
       {
         industry_select ='<select class="form-control input-lg btn-success profile_select change_industry" name="sub_industry_'+parent_id+'[]" id="sub_industry_'+parent_id+'" data-parent="'+parent_id+'">'+industry_option+'</select>';

         $("#div_ind_"+parent_id).append(industry_select);
       }   
});
$(document).on('change','.change_role',function(){
    parent_id = $(this).attr('data-parent');
    sel_role = $(this).val();
	var sel_category_text="";
	sel_category_text = $(".change_role:last option:selected").text();
	//alert(sel_category_text);
	//if(parent_id=="") parent_id = 7;
	if(sel_category_text   =='Others')
    { 
      $("#div_role_"+parent_id).append('<input type="text" class="form-control other_role" name="sub_role_'+parent_id+'[]" id="sub_skill_'+parent_id+'"  placeholder="Other role Value">');
    }	
	
    if(sel_role=='remove')
    {
      $(this).remove();
      $('select#sub_role_'+parent_id).each(function(){
            if($(this).val()=='')
            $(this).remove();
       });
    }  

    s_c_i_r_length = $('select#sub_role_'+parent_id).length; //s_c_i_r_length : selected category indutry role length

      s_r_t_array = new Array(); //s_r_t_array : selected role temprary array;
        $('select#sub_role_'+parent_id).each(function(){
            s_r_t_array.push(parseInt($(this).val()));
          });


        //console.log(s_r_t_array);
          roles_option ='<option value="">Add Role</option>';    
          selected_id=''; selected_value=''; roles_next_option=0;
          $.each(roles, function(i, item) {
            if($.inArray(roles[i].id,s_r_t_array)===-1)
            {
              roles_option=roles_option+'<option value="'+roles[i].id+'">'+roles[i].name+'</option>';
              roles_next_option++;
              //alert(parent_child_data[i].name);
            }
            else if(sel_role==roles[i].id)
            {
              selected_id = roles[i].id;
              selected_value = roles[i].name;
            }
          });

         if(selected_value && selected_id)
         $(this).html('<option value="remove">Remove Role</option><option value="'+selected_id+'" selected>'+selected_value+'</option>');

      if(roles_next_option>0) 
      {  
         roles_select ='<select class="form-control input-lg btn-primary profile_select change_role" name="sub_role_'+parent_id+'[]" id="sub_role_'+parent_id+'" data-parent="'+parent_id+'">'+roles_option+'</select>';
         $("#div_role_"+parent_id).append(roles_select); 
		 if(sel_category_text !='Others')
				$('.other_role').hide();
		 
      }
  });
</script>

@endsection