{% set is_mc_mandatory = 'true' %}
	{% if Helper.getSettings(society_id,'is_mandatory_mc_fields'):%}
		{% set is_mc_mandatory = Helper.getSettings(society_id,'is_mandatory_mc_fields') %}
		
{% endif %}
{% extends 'memberapp_users/layout.html' %}
{% block head %}
{% endblock %}
{% block title %}Qualification{% endblock %} 
{% block content %} 
{% for mesg in get_flashed_messages(category_filter=["successMsg"]) %}        
<div class="alert alert-success text-center alert-dismissible" id="successMessage" >
	<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
	<h4><img src="/static/images/right.png" alt="right" height="21" width="21">{{ mesg|safe }}</h4>
</div>
{% endfor %}

{% for mesg in get_flashed_messages(category_filter=["errorMsg"]) %}
<div class="alert alert-danger text-center alert-dismissible" id="successMessage" >
	<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
	<h4><img src="/static/images/wrong_img.png" alt="wrong"height="21" width="21">{{ mesg }}</h4>
</div>
{% endfor %}
<form method="post" id="qualification_group" action="{{url_for('member.InsertQualification',society_id=society_id,society_key=society_key)}}">
	<input type="hidden" name="uq_id" id="uq_id" value="{{uq_id or 0}}">
	<input type="hidden" name="user_id" id="user_id" value="{{user_id}}">
	<div class="row">
		<div class="col-md-6 form-group">
			<label><h3 class="font-weight-bold"><b>Qualification/Fellowship:</b></h3></label>
		</div>
	</div>
	<div class="row">
		<div class=" col-md-4 form-group">
			<label>Qualification/Fellowship:</label>
			<input type="text" class="form-control trim" name="qualification" id="qualification" />
		</div>
		<div class="col-md-8 form-group">
			<label>Name of Institution/University:</label>
			<input type="text" class="form-control trim" name="institution" id="institution" />
		</div>  
	</div>
	<div class="row">
		<div class=" col-md-4 form-group">
			<label>From:</label>
			<select class="form-control" id="year_from" name="year_from" >
				<option id = "select" value="">Year</option>     
			</select>
		</div>
		<div class=" col-md-4 form-group">
			<label>Passed Out:</label>
			<select class="form-control" id="year_passing" name="year_passing" >
				<option id = "select" value="">Year</option>   
			</select>
		</div>     
	</div>
	<div class="row text-center">
		<div class="col-md-12">
			<input type="button" value="Add" name="add_submit" id="add_submit" class="btn btn-primary form-input mr-4">
			<input type="button" value="Clear" name="clear_submit" id="clear_submit" class="btn btn-danger form-input">
		</div>    
	</div>
	<br>
	<div class="row text-center">
		<div class=" col-md-12 form-group">
			<label><h3 class="font-weight-bold"><b>Your Qualification</b></h3></label>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12" id="ShowTable"></div>
	</div>
</form>
<br>
<hr>
<form method="post"  id="user_group" action="{{url_for('member.postStep',user_id = encrypt_user_id,society_id=society_id,society_key=society_key)}}" >
	<input type="hidden" name="user_id" id="user_id" value="{{user_id}}">
	<input type="hidden" id="cur_step" name="cur_step" value="{{cur_step}}">
	<input type="hidden" id="pre_step" name="pre_step" value="{{pre_step}}">
	<input type="hidden" id="nxt_step" name="nxt_step" value="{{nxt_step}}">
	{% if society_id|int == 2: %}
	<div class="row">
		<div class="col-md-2 form-group">
			<label>Are you PG ? <span class="text-danger">*</span></label>
		</div>
		<div class="col-md-2 form-group">
			<input type="radio" class="form-input" name="is_pg" id="yes" value="1" {% if user.is_pg|int == 1 %} checked="checked" {% endif %}  > <label for="yes" class="text-dark"> Yes</label>
		</div>
		<div class="col-md-2 form-group">
			<input type="radio" class="form-input" name="is_pg" id="no" value="0" {% if user.is_pg|int == 0 %} checked="checked" {% endif %}  > <label for="no" class="text-dark"> No</label>
		</div>  
	</div>
	{% endif %}
	<div class="row">
		<div class=" col-md-6 form-group">
			<label>Medical Council Number
			    {% if is_mc_mandatory == 'true':%}
						<span class="text-danger">*</span>
				{% endif %}:</label>
			<input type="text" class="form-control trim" name="mc_number"  id="mc_number" value="{{user.mc_number or ''}}" />
		</div>
		<div class=" col-md-6 form-group">
			<label>Medical Council State
			{% if is_mc_mandatory == 'true':%}
						<span class="text-danger">*</span>
				{% endif %}:</label>
			<select class="form-control" id="mc_state" name="mc_state">
				<option value = "" id ="select">Select State</option>
				{% if states_of_india %}
				{% for mc_state in states_of_india %}
				<option value = "{{mc_state.state_id}}" {{ 'selected' if mc_state.state_id == user.mc_state_id |int else '' }} > {{mc_state.state_name}} </option>
				{% endfor %}
				{% endif %}                           
			</select>
		</div>
	</div>
</form>
<br/>
<div class="row">
	<div class="col-md-12">
		<a class="btn btn-lg btn-secondary" href="{{ url_for('member.getStep',user_id=encrypt_user_id,step_no=pre_step,society_id=society_id,society_key=society_key) }}">Previous</a>
		<input type="button" value="Next" name="submit_update" id="submit" class="btn btn-primary btn-lg float-right  form-input">
	</div>
</div>
{% endblock %}
{% block script %}
<script type="text/javascript">
var BaseUrl = document.location.origin
var user_id=$("#user_id").val();
var society_id = "{{society_id}}"
var society_key = "{{society_key}}"

$(document).ready( function ()
{   get_user_qualification_list()
	$("#submit").click(function(){
		validate_user_form()
		if(!$("#user_group").valid())
		{
			return false;
		}
		$("#user_group").submit()
		
	})
	$("#add_submit").click(function(){
		validate_qualification_form()
		if(!$("#qualification_group").valid())
		{
			return false;
		}
		$.ajax({
			type: 'POST', 
			url: $("#qualification_group").attr('action'), 
			data: $("#qualification_group").serialize(), 
			dataType: 'html',
			success: function(data)
			{
				$("#ShowTable").html(data);
				clear()              
			},
			error: function(XMLHttpRequest, textStatus, errorThrown){} 
		});
		return false;                        
	})
	$("#clear_submit").click(function() { clear() })
	var year_from = $("#year_from");
	var year_passing = $("#year_passing");
	
	var currentYear = (new Date()).getFullYear();
	for (var i =currentYear ; i >=1950 ; i--) {
		var option = $("<option />");
		option.html(i);
		year_from.append(option.val(i));
	}
	for (var i =currentYear ; i >=1950 ; i--) {
		var option = $("<option />");
		option.html(i);
		year_passing.append(option.val(i));
	}    
});
function get_user_qualification_list() {
	$.ajax({
		type: 'GET', 
		url: BaseUrl+"/get_qualifications_by_user/"+society_id+"/"+society_key, 
		data:{'user_id':user_id}, 
		dataType: 'html',
		success: function(data){
			$("#ShowTable").html(data);
		},
		error: function(XMLHttpRequest, textStatus, errorThrown) {} 
	});                  
}
function validate_user_form()
{
	errorclass : 'error',
	 
	$("#user_group").validate({
	   
		rules : {
           {% if is_mc_mandatory == 'true':%}
		   mc_number   : "required",
		   mc_state    : "required"
		   {% endif %}
		},

		messages : {
		   mc_number   : "Please enter your Medical Council number",
		   mc_state    : "Please select your Medical Council state"
			
		},
		highlight: function(element) {
			$(element).parent().addClass('error')
		},
	
		unhighlight: function(element) {
			$(element).parent().removeClass('error')
		},

		//  submitHandler: function(form) {
		//      form.submit();
		//  },
		invalidHandler: function(form, validator) {

		if (!validator.numberOfInvalids())
			return true; 

		$('html, body').animate({
		scrollTop: $(validator.errorList[0].element).offset().top
		}, 300); 
		StopProgress();  
	}
	})            
}
function validate_qualification_form()
{
	errorclass : 'error',
	$("#qualification_group").validate({
	
		rules : {
		qualification   : "required",
		
		year_passing    : {
							required    : true,
							greaterThan : "#year_from" 
							},

		year_from       : "required",
		institution     : "required",
		},
		messages : {
		qualification       : "Please enter your qualification",
		year_from           : "Please select your from year",
		year_passing        : {
							required:"Please select your passed year",
							greaterThan:"Passed out year must be greater than from year"
		},
		institution      : "Please enter your institution"  
		},
		highlight: function(element) {
			$(element).parent().addClass('error')
		},
	
		unhighlight: function(element) {
			$(element).parent().removeClass('error')
		},

		// submitHandler: function(form) {
		//     form.submit();
		// },
		invalidHandler: function(form, validator) {

		if (!validator.numberOfInvalids())
			return true; 

		$('html, body').animate({
		scrollTop: $(validator.errorList[0].element).offset().top
		}, 300);
		StopProgress();

		}
	})   
}
function clear() {
	$("#uq_id").val(0);
	$("#qualification").val('');
	$("#institution").val('');
	$("#year_from").val('');
	$("#year_passing").val('');
}
jQuery.validator.addMethod("greaterThan", 
function(value, element, params) {
	if (!/Invalid|NaN/.test(new Date(value))) {
		return new Date(value) >= new Date($(params).val());
	}
	return isNaN(value) && isNaN($(params).val()) 
		|| (Number(value) >= Number($(params).val())); 
},'Must be greater than {0}.');
</script>

{% endblock %}