@extends('layouts.admin')

@section('content')

<div class="card-body">
<div class="tab-content" id="project-tabContent">
<div class="tab-pane fade active show" id="general" role="tabpanel" aria-labelledby="general-tab"> 
<form method="POST" action="{{ route('progress.direction') }}">
  @csrf	
   <small>
	<div class="card card card-secondary">
		<div class="card-header-new">
			<span class="card-title">Progress Report</span>
			<div class="card-tools">
			<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
			</div>
		</div>
		<!-- /.card-header-new -->
		<div class="card-body">
		<div class="row form-group">
			<div class="col-sm">
			<label for="projects">Project Title</label>
			<select class="form-control" name="projects" id="projects" required >
                  <option selected disabled>Project</option>
                    @foreach ($project as $pr )
                    <option value="{{$pr->id}}">{{$pr->code}}</option>
                    @endforeach
                    </select>
                </div>	
                	<div class="col-sm">
			<label for="result_id">Result</label>
			<select class="form-control" name="results_id" id="results" required >
      </select>      
            </div>	

            <div class="col-sm">
			<label for="activity_id">Activity</label>
			<select class="form-control" name="activity_id" id="activity" required >
			</select>
            </div>        
            </div>
            
</div>
</div>
</div>
<input type="hidden" name="atypeName" id="atypeID" >

<div class="row">
        <div class="col-sm">
        <button type="submit" class="btn btn-primary float-right ">Next</button>
        </div>
      </div>

</small>
</form>

<script type="text/javascript">
	$(document).ready(function(){

      
      $('#projects').change(function(){

         // Project id
         var id = $(this).val();
		$('#results').find('option').not(':first').remove();

         
         $.ajax({
         	url: 'getResult/'+id,
         	type: 'get',
         	dataType: 'json',
         	success: function(response){

         		var len = 0;
           
             if(response['data'] != null){
             	len = response['data'].length;
             }

             if(len > 0){
              
               for(var i=0; i<len; i++){

               	var result_id = response['data'][i].id;
               	var title = response['data'][i].title;
           
               	var option = "<option value='"+result_id+"'>"+title+"</option>"; 
                
               	$("#results").append(option); 
               }
           }

       }
   });
         });
    });
       </script>
 
<script type="text/javascript">
  $(document).ready(function(){
      
      $('#results').change(function(){

         var id = $(this).val();

		$('#activity').find('option').not(':first').remove();
         $.ajax({
         	url: 'getActivity/'+id,
         	type: 'get',
         	dataType: 'json',
         	success: function(response){

         		var len = 0;
           
             if(response['data'] != null){
             	len = response['data'].length;
             }

             if(len > 0){
              
               for(var i=0; i<len; i++){

               	var result_id = response['data'][i].id;
               	var title = response['data'][i].title;

               	var option = "<option value='"+result_id+"'>"+title+"</option>"; 
              
               	$("#activity").append(option); 
               }
           }

       }
   });
         });  
 
});
</script>
<script type="text/javascript">
  $(document).ready(function(){
      
      $('#activity').change(function(){
         var id = $(this).val();
		$('#geography').find('option').not(':first').remove();

         $.ajax({
         	url: 'getGeography/'+id,
         	type: 'get',
         	dataType: 'json',
         	success: function(response){

         		var len = 0;
           
             if(response['data'] != null){
             	len = response['data'].length;
             }

             if(len > 0){
              
               for(var i=0; i<len; i++){

               	var id = response['data'][i].id;
               	var district = response['data'][i].district;

               	var option = "<option value='"+id+"'>"+district+"</option>"; 

               	$("#geography").append(option); 
               }
           }

       }
   });
         });


         });
   </script>
   <script type="text/javascript">
  $(document).ready(function(){
      
      $('#activity').change(function(){
         var id = $(this).val();
  
        
         $.ajax({

          url: 'getType/'+id,
          type: 'get',
          dataType: 'json',
          success: function(response){
               
            var len = 0;
           
             if(response['data'] != null){
              len = response['data'].length;
             }

             if(len > 0){
              
               for(var i=0; i<len; i++){
              
                var id = response['data'][i].id;
                var type = response['data'][i].type;
                
               $("#atypeID").val(type); 
               }
           }

       }
   });
         });


         });
   </script>
@endsection