@extends('superAdmin.layouts.auth')

@section('title')
{{ env('APP_NAME') }} | Add New Challenges
@endsection

@section('styles')
	<!-- Data table css -->
	<link href="{{ asset('assets/plugins/datatable/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
	<link href="{{ asset('assets/plugins/datatable/jquery.dataTables.min.css') }}" rel="stylesheet" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet">
@endsection

@section('content')
	<!-- MAIN BODY CONTENT -->
	<div class="top-header">
		<a href="{{ route('superAdmin.challenge') }}">
        	<h1 class="link"><img src="{{ asset('assets/images/back-btn.svg') }}" alt=""> Return to Challenges</h1>
        </a>
    </div>

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

	<div class="row">
		<div class="col-md-12">
            <div class="card">
	            <div class="card-header">
	                <h2>
	                    <span>
	                      	<svg xmlns="http://www.w3.org/2000/svg" width="18" height="12.756" viewBox="0 0 18 12.756"><path d="M291.565,414.487v10.574h2.018V421.74H298.2v3.329h2.018V414.487Zm2.346,3.959H292.5V415.78h1.406Zm2.682,0h-1.406V415.78h1.406Zm2.682,0h-1.406V415.78h1.406Zm-7.711-3.959v10.574h2.018V421.74H298.2v3.329h2.018V414.487Zm2.346,3.959H292.5V415.78h1.406Zm2.682,0h-1.406V415.78h1.406Zm2.682,0h-1.406V415.78h1.406Zm-7.711-3.959v10.574h2.018V421.74H298.2v3.329h2.018V414.487Zm2.346,3.959H292.5V415.78h1.406Zm2.682,0h-1.406V415.78h1.406Zm2.682,0h-1.406V415.78h1.406Zm-7.711-3.959v10.574h2.018V421.74H298.2v3.329h2.018V414.487Zm2.346,3.959H292.5V415.78h1.406Zm2.682,0h-1.406V415.78h1.406Zm2.682,0h-1.406V415.78h1.406Zm2.018-3.019V413.4H290.487v2.027h-3.6v10.729h18V415.427Zm-10.807,9.85h-2.734V422.8h2.734Zm0-3.346h-2.734v-1.285h2.734Zm0-2.156h-2.734V418.5h2.734Zm0-2.148h-2.734V416.3h2.734Zm6.632,7.65h-2.458v-2.449h2.458Zm3.528.224h-2.881v-3.329h-3.752v3.321h-2.881V414.056h9.513Zm3.381-.224h-2.734V422.8h2.734Zm0-3.346h-2.734v-1.285h2.734Zm0-2.156h-2.734V418.5h2.734Zm0-2.148h-2.734V416.3h2.734Zm-10.445,4.114H298.2v3.329h2.018V414.487h-8.651v10.574h2.018Zm4.287-5.96h1.406v2.665h-1.406Zm-2.682,0h1.406v2.665h-1.406Zm-2.682,0h1.406v2.665H292.5Zm-.94-1.294v10.574h2.018V421.74H298.2v3.329h2.018V414.487Zm2.346,3.959H292.5V415.78h1.406Zm2.682,0h-1.406V415.78h1.406Zm2.682,0h-1.406V415.78h1.406Zm-7.711-3.959v10.574h2.018V421.74H298.2v3.329h2.018V414.487Zm2.346,3.959H292.5V415.78h1.406Zm2.682,0h-1.406V415.78h1.406Zm2.682,0h-1.406V415.78h1.406Z" transform="translate(-286.89 -413.4)" fill="#213b78"/></svg>
	                    </span>
	                    Add New Challenges 
	                </h2>
	            </div>
	            <div class="card-body">
	                <!-- add Company-->
	                <form action="{{ route('superAdmin.challengeCreateStep1')}}" method="post" enctype="multipart/form-data">
	                	@csrf
		                <div class="row">
		                     <div class="card-body">
		                     	@if(count($challengeCategories) > 0)	
				                 <ul class="items cat_item">
				                 	@foreach ($challengeCategories as $challengeCategory)
				                    	<li data-catid="{{ $challengeCategory->id }}" >				                    		
				                    		<img src="{{ url('storage/images/challenge/categories/web/'.$challengeCategory->image) }}" alt="{{ $challengeCategory->name }} image">				                    		
				                    		{{ $challengeCategory->name }}
				                    	</li>
				                    @endforeach	
				                    <input type="hidden" name="challenge_category_id" id="challenge_category_id" value="" >			                   
				                    <input type="hidden" name="challenge_category_id1" id="challenge_category_id1" value="" >			                   
				                 </ul>	
				                @endif			                 
				                 <ul class="select-items">
				                   <li class="item-radio">
				                      <label for="global" class="custom-radio-fill left">
				                        <input type="radio" name="type_by_super_admin" value="1" id="global" class="d-none abc" checked="checked">
				                        <span>Global Challenges</span>
				                      </label>
				                      @if(count($challengetakingTypes) > 0)
				                      <ul class="sub-items sub-items1">
				                      	@foreach ($challengetakingTypes as $challengetakingType)
				                        <li>
				                          <label for="{{ $challengetakingType->slug }}" class="custom-radio-fill left">
				                            <input type="radio" name="global_challenge_taking_type" value="{{ $challengetakingType->id }}" id="{{ $challengetakingType->slug }}" class="d-none sub">
				                            <span>{{ $challengetakingType->name }}</span>
				                          </label>
				                        </li>
				                         @endforeach
				                      </ul>
				                      @endif
				                   </li>
				                   <li class="item-radio">
				                      <label for="specific-challenge" class="custom-radio-fill left">
				                        <input type="radio" name="type_by_super_admin" value="2" id="specific-challenge" class="d-none abc">
				                        <span>Specific Company Challenge</span>
				                      </label>	
				                      @if(count($companys) > 0)			                      
				                      <ul class="sub-items sub-items2" style="display:none;">
				                        <li>
				                          <div class="form-group">
				                          		<label for="" class="form-label">Select Company(s)</label>
													<div class="dropdown custom-dropdown company-dropdown">
													    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"><span class="dropdown-text"> Select Options</span>
													    <span class="caret"></span></button>
													    <ul class="dropdown-menu">
													        <!-- <li><a href="#"><label><input type="checkbox" class="selectall" /><span class="select-text"> Select</span> All</label></a></li> -->
													        <li class="divider"></li>
													        @foreach ($companys as $company)
													        <li><a href="#"><label><input name='compamy_name[]' type="checkbox" class="option justone" value='{{ $company->hasAssignLocationAdmin->id }}'/>{{ $company->hasAssignLocationAdmin->company_name }}</label></a></li>
													        @endforeach
													      </ul>
													</div>				                            
				                          </div>
				                        </li>
				                      </ul>
				                      @endif

				                      <div class="sub-items specific_sub_item location-list select-specific" id="location-list" style="display:none;">
				                      </div>

				                      @if(count($challengetakingTypes) > 0)
				                      <ul class="sub-items specific_sub_item sub-items specific_sub_type" style="display:none;">
				                      	@foreach ($challengetakingTypes as $challengetakingType)
				                        <li>
				                          <label for="company_specific_{{ $challengetakingType->slug }}" class="custom-radio-fill left">
				                            <input type="radio" name="company_specific_challenge_taking_type" value="{{ $challengetakingType->id }}" id="company_specific_{{ $challengetakingType->slug }}" class="d-none xy">
				                            <span>{{ $challengetakingType->name }}</span>
				                          </label>
				                        </li>
				                         @endforeach
				                      </ul>
				                      @endif

				                      
				                    </li>
				                 </ul>
				                 <button type="submit" class="btn btn-primary stepone" style="display:none;">Next</button>
				              </div>

		                </div>
	                </form> 
	            </div>
            </div>
		</div>
	</div>
	<!--// MAIN BODY CONTENT -->
@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>


	<!-- Data tables -->
	<script src="{{ asset('assets/plugins/datatable/jquery.dataTables.min.js') }}"></script>
	<script src="{{ asset('assets/plugins/datatable/dataTables.bootstrap4.min.js') }}"></script>
	<script src="{{ asset('assets/js/datatable.js') }}"></script>	
	<script type="text/javascript">

	function changeSelection(value, data_loc){		
      var length = document.getElementById('company_location_'+data_loc).options.length;
      if(value == 0){
      for(var i = 1;i<length;i++)
        document.getElementById('company_location_'+data_loc).options[i].selected = "selected";

      document.getElementById('company_location_'+data_loc).options[0].selected = "";
      }
    
    var selected = $('#company_location_'+data_loc).val();

    if(selected.length > 0){
		jQuery.ajax({          
        	url: "{{ route('superAdmin.challenge.getLocationEmployee') }}",
            method: 'post',
            dataType : "json",    		
            data : {                 
                "secleted_company": data_loc, 
                "secleted_loc": selected, 
                "_token": jQuery('meta[name="csrf_token"]').attr('content')
            },
        	success: function(data){

        		var len = data.employee_data.length;         		
        		if(len == 0){
        			$('#noData').html('No Employee Found').show();
        			jQuery('#employee_specific_wp_'+data.secleted_company).hide();
		        	jQuery('#employee_list_wp_'+data.secleted_company).hide();
        		}else{
        			$('#noData').html('').hide();
	        		var html = '';
		            for(var i=0; i<len; i++){
		            	var name = data.employee_data[i].get_user_details.name;
	                	var user_id = data.employee_data[i].user_id;                	
	                	var location_id = data.employee_data[i].location_id;                	
	                	html += '<option value="'+data.secleted_company+'-'+location_id+'-'+user_id+'">'+name+'</option>';
	                	//jQuery('#employee_list_'+data.secleted_company).append(html);
		            }
	        		//console.log(html);        		
	        		jQuery('#employee_specific_wp_'+data.secleted_company).show();
	        		jQuery('#employee_specific_'+data.secleted_company).show();
	        		jQuery('#employee_list_wp_'+data.secleted_company).show();
	        		jQuery('#employee_list_'+data.secleted_company).html(html).show();

        		}      		
        		
        	}
		});
	}else{
		
	}
  }


	jQuery(document).ready(function($){		
		jQuery(document).on('change','.employee_specific',function(){
			//var checkedValue = jQuery('.employee_specific:checkbox:checked').val();
			 //var checkedValue = this.checked ? this.value : '';
			//console.log(checkedValue);
			//alert(checkedValue)
			var ischecked= $(this).is(':checked');
			if(ischecked){
				var checkedValue = this.value;
				//jQuery('#employee_list_'+checkedValue).prop('required',true);
				jQuery('#employee_list_'+checkedValue).attr('required', 'required');
			}else{
				var uncheckedValue = this.value;
				jQuery('#employee_list_'+uncheckedValue).removeAttr('required');
				//jQuery('#employee_list_'+checkedValue).prop('required',false);
			}
			
		});


		////$('#compamy_name').multiselect();
		//$("select[role='multiselect']").multiselect();
		/*$(".selectall").click(function(){
		    $('.option').not(this).prop('checked', this.checked);
		});*/	
		
		var catid = jQuery('.cat_item li').first().attr('data-catid');
		jQuery('#challenge_category_id').val(catid);
		jQuery('.cat_item li').first().addClass('active');
		jQuery('.cat_item li').on('click', function(){
			jQuery(this).addClass('active').siblings().removeClass('active');			
			jQuery('#challenge_category_id').val(jQuery(this).attr('data-catid'));
		});

		
		jQuery('.abc').on('click',function($){
        	jQuery(this).find(".stepone").prop('disabled','false');
        	jQuery(this).parent().parent().find('.sub-items').css('display','block');
        	jQuery(this).parent().parent().siblings().find('.sub-items').css('display','none');
        	jQuery('.specific_sub_type').hide();
        	jQuery(".stepone").css('display','none');
        	//alert('ji');
        	//alert(jQuery('.xy').attr('class'));
        	jQuery('.xy,.sub').each(function(){
        		//alert(jQuery(this).attr('class'));
        		jQuery(this).prop('checked', false);
        		jQuery(this).attr('checked', false);
        	})
        	jQuery('#location-list').html('');
        	jQuery('#compamy_name').val('');
        	jQuery('.option').prop('checked', false); // Unchecks it
        	//jQuery('.option').attr('checked', false); // Unchecks it
        });
        jQuery('.sub').on('click',function($){
        	var parentValue = jQuery(this).parent().parent().parent().parent().find('.abc').prop('checked');
        	//console.log(parentValue);
        	var radioValue = jQuery(this).prop('checked');
        	
            if(parentValue && radioValue){
               jQuery(".stepone").css('display','block');
               //jQuery(".stepone").prop('disabled','false');
            } else {
            	jQuery(".stepone").css('display','none');

            }
        });
         jQuery('.xy').on('click',function($){
        	//var parentValue = jQuery(this).parent().parent().parent().parent().find('.abc').prop('checked');
        	var parentValue = jQuery(this).parent().parent().parent().parent().find('.abc').attr('class');
        	console.log(parentValue);
        	var radioValue = jQuery(this).prop('checked');
        	var selectValue = jQuery(this).val();
        	//console.log(selectValue);
        	
            if(parentValue ){
            	console.log(radioValue);
            	console.log(selectValue);
            	
            	if (radioValue == true && selectValue != '') {
            		jQuery(".stepone").prop('disabled',false);
            		jQuery(".stepone").css('display','block');
            	} else {
            		jQuery(".stepone").prop('disabled',true);
            		jQuery(".stepone").css('display','block');
            	}
              }
        });

        jQuery(".option").on('click',function($){

        //$('#compamy_name').on('change',function($){

        	//var secleted_company=jQuery(this).val();
        	var id  = [];

        	var secleted_company = [];
	        jQuery(':checkbox:checked').each(function(i){
	          secleted_company[i] = jQuery(this).val();
	        });
        	console.log(secleted_company);
        	if(secleted_company!=''){
        		jQuery.ajax({          
		        	url: "{{ route('superAdmin.challenge.getCompanyLocation') }}",
		            method: 'post',
		            datatype : "html",    		
		            data : {                 
		                "secleted_company": secleted_company, 
		                "_token": jQuery('meta[name="csrf_token"]').attr('content')
		            },
		        	success: function(data){
		        		jQuery("#location-list").addClass('select-specific');
		        		jQuery("#location-list").html(data);
		        		jQuery('.specific_sub_type').show();

		        	}
				});
        	}else{
        		jQuery("#location-list").html('');
        	}
        	jQuery('.xy').each(function(){   
        		var checked = 0;
	        	if (jQuery(this).is(':checked')) {   
	        		 checked =1;
	        	}  
        	   if (checked==1) {
            		jQuery(".stepone").prop('disabled',false);
            		jQuery(".stepone").css('display','block');
            	} else {
            		jQuery(".stepone").prop('disabled',true);
            		jQuery(".stepone").css('display','block');
            	}

            })
        }); 




	});
   

	/*function getLocation(){
		var str='';
        var val=document.getElementById('compamy_name');

        for (i=0;i< val.length;i++) { 
            if(val[i].selected){
                str += val[i].value + ','; 
            }
        }         
        var str=str.slice(0,str.length -1);        
        $.ajax({          
        	url: "{{ route('superAdmin.challenge.getCompanyLocation') }}",
            method: 'post',
            //datatype : "application/json",    		
            data : {                 
                id: str, 
                _token: $('meta[name="csrf_token"]').attr('content')
            },
        	success: function(data){

        		var html ='<option value="">Select Location</option>';
        		$.each(data, function(i, item) {				    
				    html += '<option value="'+data[i].id+'">'+data[i].name+'</option>';
				});
        		$("#select-company-location").html(html);
        	}
		});
	}*/

	</script>

@endsection