@extends('layout.index')

@section('title', 'Add Polygon Classification')
<!-- Dashboard Ecommerce start -->
@section('content')
    <section>

        <div class="content-body">
            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12 d-flex">
                            <h2 class="content-header-title float-start mb-0"> Add Polygon Classification;
                            </h2>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        @if ($message = Session::get('error'))
            <div class="demo-spacing-0 mb-1">
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <div class="alert-body">
                        {{-- <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> --}}
                        {{ $message }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">

                    </div>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
        @endif
        @if ($message = Session::get('success'))
            <div class="demo-spacing-0 mb-1">
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <div class="alert-body">
                        <i class="fa fa-check-circle" style="font-size:16px;" aria-hidden="true"></i>
                        {{ $message }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">

                    </div>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
        @endif

        <div class="alert alert-success p-1" id="success-alert" style="display: none;">
            <i class="fa fa-check-circle" style="font-size:16px;" aria-hidden="true"></i>
            <span id="success-message"></span>
        </div>
        
        <div class="alert alert-danger p-1" id="error-alert" style="display: none;">
            <i class="fa fa-exclamation-triangle" style="font-size:16px;" aria-hidden="true"></i>
            <span id="error-message"></span>
        </div>

        <div class="content-body">
            <section id="multiple-column-form">
                <div class="row justify-content-center">
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-body">
								
                                <form class="form" action="" method="post">
                                    <input type="hidden" name="form_type" value="add_polygon_classification">
                                    {{ csrf_field() }}

                                    <div class="row">
                                        <div class="col-md-4 col-12">
                                            <div class="form-group">

                                                <label for="country">Master Country<span style="color:red;">
                                                        *</span></label>
                                                
                                               
                                                <select name="country" id="country" class="form-control form-select"
                                                    onchange="get_state(); get_district();  get_block(); get_village();" >
                                                    <option value="0">Select Country</option>
                                                    
                                                </select>
                                                <h5><small class="text-danger" id="country_err"></small></h5>
                                                @error('country')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-md-4 col-12">
                                            <div class="form-group">

                                                <label for="country">Master State<span style="color:red;">
                                                        *</span></label>

                                                <select name="state" id="state" class="form-control form-select"
                                                    onchange="get_district(); get_block(); get_village();">
                                                    <option value="0">All State</option> 
                                                </select>
                                                <h5><small class="text-danger" id="state_err"></small></h5>
                                                @error('state')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-md-4 col-12">
                                            <div class="form-group">

                                                <label for="country">Master District<span style="color:red;">
                                                        *</span></label>

                                                <select name="district" id="district" class="form-control form-select" onchange="get_block();  get_village();">
                                                    <option value="0">All District</option> 
                                                </select>
                                                <h5><small class="text-danger" id="district_err"></small></h5>
                                                @error('district')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-md-4 col-12">
                                            <div class="form-group">

                                                <label for="block">Master Block<span style="color:red;">
                                                        *</span></label>

                                                <select name="block" id="block" class="form-control form-select" onchange="get_village()">
                                                    <option value="0">All Block</option> 
                                                </select>
                                                <h5><small class="text-danger" id="block_err"></small></h5>
                                                @error('block')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-md-4 col-12">
                                            <div class="form-group">

                                                <label for="village">Master Village<span style="color:red;">
                                                        *</span></label>

                                                <select name="village" id="village" class="form-control form-select">
                                                    <option value="0">All Village</option> 
                                                </select>
                                                <h5><small class="text-danger" id="village_err"></small></h5>
                                                @error('village')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
										
										<div class="col-md-4 col-12">
                                            <div class="form-group">
                                                <label for="form">Form <span style="color:red;">*</span></label>
                                                <select name="form" id="form" class="form-control form-select " onchange="get_Question(this)" >
                                                    <option value="0">Select Form</option> 
                                                </select>
                                                <h5><small class="text-danger" id="form_err"></small></h5>
                                                @error('form')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
										
										

                                        <div class="col-md-4 col-12">
                                            <div class="form-group">
                                                <label for="question">Question <span style="color:red;">*</span></label>
                                                <select name="question[]" id="question" class="form-control form-select select2" multiple>
                                                    <option value="0">Select Question</option> 
                                                </select>
                                                <h5><small class="text-danger" id="question_err"></small></h5>
                                                @error('question')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
										
										<div class="col-md-4 col-12">
                                            <div class="form-group">
                                                <label for="group">Group <span style="color:red;">*</span></label>
                                                <select name="group" id="group" class="form-control form-select">
                                                    <option value="">Select Group</option> 
                                                </select>
                                                <h5><small class="text-danger" id="group_err"></small></h5>
                                                @error('group')
                                                    <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
										
                                        <div class="col-12 text-center mt-1">

                                            <button type="submit" class="btn btn-primary mr-1"
                                                onClick="return validation({{ $id }})">Submit</button>
                                            <a href="{{ url('/polygon_classification') }}" type="reset"
                                                class="btn btn-outline-secondary btn-danger">Cancel</a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>

<script>
	$(document).ready(function() {
    // Code to be executed after the DOM is fully loaded
    var country_id=$('#country').val();

	if( country_id !=0){
		get_state();
		get_district();
        get_block();
        get_village();
	}else{
		$('#country').parent().addClass('has-error');
			$('#country_err').html('Please Select Country.');
			$('#country').focus();
			$('#country').change(function() {
				$('#country').parent().removeClass('has-error');
				$('#country_err').html('');
			});
			return false;
	}
});
</script>
    </section>

@endsection
<script>

	var a_states = [];
    var a_districts = [];
    var a_block = [];
    var a_village = [];
    var selected_state = 0;
    var selected_district = 0;
    var selected_block = 0;
    var selected_village = 0;
    
    function validation(id=0) {
        var country_id = $('#country').val();
        var form = $('#form').val();
        var question = $('#question').val();
        var group = $('#group').val();
		

        if ((country_id == 0) ||  (form == 0) || (question == []) || group =='') {
           
            if ($('#country').val() == 0) {
                $('#country').parent().addClass('has-error');
                $('#country_err').html('Please Select Country.');
                $('#country').focus();
                $('#country').change(function() {
                    $('#country').parent().removeClass('has-error');
                    $('#country_err').html('');
                });
                return false;
            }
           
         
			if (form== 0) {
                $('#form').parent().addClass('has-error');
                $('#form_err').html('Please select a form.');
                $('#form').focus();
                $('#form').change(function() {
                    $('#form').parent().removeClass('has-error');
                    $('#form_err').html('');
                });
                return false;
            }

            if (!Array.isArray(question) || question.length === 0) {
                $('#question').parent().addClass('has-error');
                $('#question_err').html('Please select a question.');
                $('#question').focus();
                $('#question').change(function() {
                    $('#question').parent().removeClass('has-error');
                    $('#question_err').html('');
                });
                return false;
            }


			if (($('#group').val() == 0)) {
                $('#group').parent().addClass('has-error');
                $('#group_err').html('Please Select Group .');
                $('#group').focus();
                $('#group').change(function() {
                    $('#group').parent().removeClass('has-error');
                    $('#group_err').html('');
                });
                return false;
            }
        } 
		
    }
	
	function get_state() {
       
	   var country_id = $('#country').val();
	  
	   s_states_options = '<option value="0">All State</option>';
	   $.each(a_states, function(key, state_obj) {
		   var selected='';
		   
			 
		   
		   if (country_id != 0 && state_obj.country_id == country_id) {
			 
			   s_states_options += '<option value=' + state_obj.id + ' country_id='+state_obj.country_id+' '+selected+'>' + state_obj.state_name + '</option>'
		   }else if (country_id == 0) {
			   s_states_options += '<option value=' + state_obj.id + ' country_id='+state_obj.country_id+' '+selected+'>' + state_obj.state_name + '</option>'
		   }
	   })
	 
	   $('#state').html(s_states_options);
}

   function get_district() {

	   
	   var country_id = $('#country').val();
	   var state_id = parseInt($('#state').val());
	   var selectedCountry = country_id;
	   
	  
	   
	   s_district_options = '<option value="0">All District</option>';
	   $.each(a_districts, function(key, district_obj) {
		  selected='';
		   if(country_id != 0 || state_id != 0){
			 
			   if(state_id != 0){
				   if(district_obj.country_id == selectedCountry && district_obj.state_id == state_id){
					   s_district_options += '<option value=' + district_obj.id + ' country_id='+district_obj.country_id+' '+selected+'>' + district_obj.district_name +
				   '</option>'
				   }
			   }else if(country_id != 0){
				   if( district_obj.country_id == country_id){
					   s_district_options += '<option value=' + district_obj.id + ' country_id='+district_obj.country_id+' '+selected+' >' + district_obj.district_name +
				   '</option>'
				   }
			   }
		   }else{
			   s_district_options += '<option value=' + district_obj.id + '  country_id='+district_obj.country_id+' '+selected+'>' + district_obj.district_name +
				   '</option>'
		   }
	   })
	   $('#district').html(s_district_options);
	   
   }

    function get_block() {
        var country_id = $('#country').val();
        var state_id = parseInt($('#state').val());
        var selectedCountry = country_id;
        var district_id = $('#district').val();
                
        s_block_options = '<option value="0">All Block</option>';
        $.each(a_block, function(key, block_obj) {
            var selected = '';
            if(selected_block == block_obj.id){
                selected = 'selected';
            } 
            if(country_id != 0 || state_id != 0 || district_id != 0){
                if(district_id != 0){
                
                if(block_obj.country_id == selectedCountry && block_obj.district_id == district_id ){
                        s_block_options += '<option value=' + block_obj.id + ' country_id='+block_obj.country_id+' '+selected+'>' + block_obj.block_name +
                    '</option>'
                    }
                
                }else if(state_id != 0){
                
                if(block_obj.country_id == selectedCountry && block_obj.state_id == state_id ){
                        s_block_options += '<option value=' + block_obj.id + ' country_id='+block_obj.country_id+' '+selected+'>' + block_obj.block_name +
                    '</option>'
                    }
                }else if(country_id != 0){
                    if( block_obj.country_id == country_id){
                    
                        s_block_options += '<option value=' + block_obj.id + ' country_id='+block_obj.country_id+' '+selected+'>' + block_obj.block_name +
                    '</option>'
                    }
                }
            }else{
                s_block_options += '<option value=' + block_obj.id + '  country_id='+block_obj.country_id+' '+selected+'>' + block_obj.block_name +
                    '</option>'
            }
            
        })
        $('#block').html(s_block_options);
    }

    function get_village() {
        var country_id = $('#country').val();
        var state_id = parseInt($('#state').val());
        var selectedCountry = country_id;
        var district_id = $('#district').val();
        var block_id = $('#block').val();

        s_village_options = '<option value="0">All Village</option>';
        $.each(a_village, function(key, village_obj) {
            var selected='';
            if(selected_village == village_obj.id){
                selected = 'selected';
            } 
            
            if (country_id != 0 || state_id != 0 || district_id != 0 || block_id != 0) {

                if (block_id != 0) {
                    
                        if(village_obj.country_id == selectedCountry && village_obj.block_id == block_id ){
                            s_village_options += '<option value=' + village_obj.id + ' country_id='+village_obj.country_id+' '+selected+'>' + village_obj.village_name +
                        '</option>'
                        }
                } else if (district_id != 0) {
                    
                        if(village_obj.country_id == selectedCountry && village_obj.district_id == district_id ){
                            s_village_options += '<option value=' + village_obj.id + ' country_id='+village_obj.country_id+' '+selected+'>' + village_obj.village_name +
                        '</option>'
                        }
                    
                } else if (state_id != 0) {

                    if (village_obj.country_id == selectedCountry && village_obj.state_id == state_id) {
                            s_village_options += '<option value=' + village_obj.id + ' country_id='+village_obj.country_id+' '+selected+'>' + village_obj.village_name +
                        '</option>'
                    }
                } else if (country_id != 0) {
                    if (village_obj.country_id == country_id) {
                        s_village_options += '<option value=' + village_obj.id + ' country_id='+village_obj.country_id+' '+selected+'>' + village_obj.village_name +
                                                '</option>'
                    }
                }

            } else {
                    s_village_options += '<option value=' + village_obj.id + ' country_id='+village_obj.country_id+' '+selected+'>' + village_obj.village_name +
                        '</option>'
            }

        })
        $('#village').html(s_village_options);
    }

    function get_Question() {
        
        var formId = $('#form').val(); 

        $.ajax({
            url:"