{% extends 'memberapp_users/layout.html' %}
{% block head %}
{% endblock %}
{% block title %}User Information{% endblock %} 
{% block content %} 
<form method="POST"  id="update_form" action="{{url_for('member.postStep',user_id = encrypt_user_id,society_id=society_id,society_key=society_key)}}">
	{% 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|safe }}</h4>
	</div>
	{% endfor %}
	<div class="row">
		<div class="col-md-12 text-center">
			<label><h2 class="font-weight-bold">User Information</h2></label>
		</div>
	</div>
	<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}}">
	<div class="row">
		<div class="col-md-6 form-group">
			<label>Prefix<span class="text-danger">*</span>:</label>
		</div>
		<div class="col-md-6 form-group">
			<select class="form-control" id="prefix" name="prefix">
				<option value="" id="select">Select Prefix</option>
				<option value="Mr."{{ "selected" if user.prefix == "Mr." }}>Mr.</option>
				<option value="Mrs."{{ "selected" if user.prefix == "Mrs." }}>Mrs.</option>
				<option value="Dr."{{ "selected" if user.prefix == "Dr." }}{{ "selected" if not user.prefix }} >Dr.</option>
				<option value="Ms."{{ "selected" if user.prefix == "Ms." }}>Ms.</option>
				<option value="Prof."{{ "selected" if user.prefix == "Prof." }}>Prof.</option>
			</select>     
		</div>
	</div>
	<div class="row">
		<div class="col-md-6 form-group">
			<label>Full Name<span class="text-danger">*</span>:</label>
			{% if society_key in Helper.ColumnDescription: %}
				<br>
				<span>(As mentioned in the Medical Council Registration)</span>
			{% endif %}
		</div>
		<div class="col-md-6 form-group">
			<input type="text" class="form-control trim" name="name" id="name" value="{{user.full_name or ''}}" placeholder="Enter your full name" />
		</div>
	</div>
	<div class="row">
		<div class="col-md-6 form-group">
			<label>Email id<span class="text-danger">*</span>:</label>
		</div>
		<div class="col-md-6 form-group">
			<label>{{user.email}}</label>
			<input type="hidden" class="form-control" id="email" name="email" value="{{user.email or ''}}" readonly>   
		</div>
	</div>
	<div class="row">
		<div class="col-md-6 form-group">
			<label>Mobile Number<span class="text-danger">*</span>:</label>
		</div>
		<div class="col-md-6 form-group">
			<input type="text" class="form-control" name="mobile" value="{{user.mobile or ''}}" id="mobile" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" placeholder="Enter your mobile number" minlenght="10" maxlength="10"/>
		</div>
	</div>
	<div class="row">
		<div class="col-md-6 form-group">
			<label>Whatsapp Number:</label>
			{% if society_key in Helper.ColumnDescription: %}
				<br>
				<span>(If different from Primary Number)</span>
			{% endif %}<br>
			
		</div>
		<div class="col-md-6 form-group">
			<input type="text" class="form-control" value="{{user.whatsapp_number or ''}}" name="whatsapp_number" id="whatsapp_number" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" minlenght="10" maxlength="10" />
		</div>
	</div>
	


	<div class="row">
        <div class="col-md-6 form-group">
            <label>DOB <span class="text-danger">*</span></label>
        </div>
        <div class="col-md-6 form-group">
        	<div class="row">
        		<div class=" col-md-4">            
		            <select class="form-control" id="date" name="date">
		                <option value="">Select Date</option>
		                {% for i in range(1,32) %}
		               
		                 
		                	{% if user_dob == i %} 
			                <option  value="{{i}}" selected>{{i}}</option>
			                {% else %}
			                 <option value="{{i}}">{{i}} </option>
			                {% endif %} 
		                
		                 {% endfor %}
		            </select>
		        </div>
		        <div class="col-md-4">
		            <select class="form-control" id="month" name="month">
		                <option value="">Select Month</option>
		            </select>
		        </div>
		        <div class="col-md-4">
		            <select class="form-control" id="year" name="year">
		                <option value="">Select Year</option>
		            </select>
		        </div>
        	</div>
        </div>       
    </div>
	<div class="row">
		<div class="col-md-6 form-group">
			<label>Gender<span class="text-danger">*</span>:</label>
		</div>
		<div class=" col-md-6 form-group">
			<div class="row">
				<div class="col-md-4">
					<input type="radio" class="form-input" name="gender" id="gender1" value="Male" {% if user.gender == 'Male' %} checked="checked" {% endif %}  > <label for="gender1" class="text-dark">Male</label>
				</div>
				<div class="col-md-4"> 
					<input type="radio" class="form-input" name="gender" id="gender2" value="Female" {% if user.gender == 'Female' %} checked="checked" {% endif %}> <label for="gender2" class="text-dark">Female</label>
				</div>
				<div class="col-md-4">
					<input type="radio" class="form-input" name="gender" id="gender3" value="Transgender" {% if user.gender == 'Transgender' %} checked="checked" {% endif %}  > <label for="gender3" class="text-dark">Transgender</label>
				</div>
				<br>
				<label id="gender-error" class="error" for="gender"></label>
			</div>
		</div>
	</div>
	<!--{% if society_key in Helper.AadhaarNumber: %}-->
	<!--<div class="row">-->
	<!--	<div class="col-md-6 form-group">-->
	<!--		<label>Aadhaar Number<span class="text-danger">*</span>:</label>-->
	<!--	</div>-->
	<!--	<div class=" col-md-6 form-group">-->
	<!--		<input type="text" class="form-control" name="aadhaar_number" value="{{user.aadhaar_number or ''}}" id="aadhaar_number"  placeholder="Enter your Aadhaar number" minlength="14" maxlength="14"/>-->
	<!--	</div>-->
	<!--</div>-->
	<!--{% endif %}-->
	{% if society_key in Helper.AiosMembershipNumber: %}
	<div class="row">
		<div class="col-md-6 form-group">
			<label>AIOS Membership Number:</label>
			{% if society_key in Helper.ColumnDescription: %}
				<br>
				<span>(If your a member)</span>
			{% endif %}
		</div>
		<div class=" col-md-6 form-group">
			<input type="text" class="form-control" name="aios_membership_number" value="{{user.aios_membership_number or ''}}" id="aios_membership_number" placeholder="Enter your AIOS Membership Number"/>
		</div>
	</div>
	{% endif %}
	<div class="row">
		<div class="col-md-6 form-group">
			<label>Address<span class="text-danger">*</span>:</label>
			{% if society_key in Helper.AadhaarAddress: %}
				<br>
				<span>(As in Aadhar card)</span>
			{% endif %}<br>
		</div>
		<div class="col-md-6 form-group">  
			<input type="text" class="form-control trim" name="address_1" value="{{user.address1 or ''}}" id="address_1" placeholder="Line 1*"/>
		</div>
	</div>
	<div class="row">
		<div class="col-md-6 form-group"></div>
		<div class="col-md-6 form-group">
			<input type="text" class="form-control" name="address_2" value="{{user.address2 or ''}}" id="address_2" placeholder="Line 2"/>
		</div>
	</div>
	<div class="row">
		<div class="col-md-6 form-group"></div>
		<div class="col-md-6 form-group">
			<input type="text" class="form-control" name="address_3" id="address_3" value="{{user.address3 or ''}}" placeholder="Line 3"/>
		</div>
	</div>
	<div class="row">
		<div class="col-md-6 form-group">
			<label>City<span class="text-danger">*</span>:</label>
		</div>
		<div class="col-md-6 form-group">
			<input type="text" class="form-control trim" name="city" id="city" value="{{user.city or ''}}" placeholder="City*"/>
		</div>
	</div>
	<div class="row">
		<div class="col-md-6 form-group">
			<label>District<span class="text-danger">*</span>:</label>
		</div>   
		<div class="col-md-6 form-group">
		    {% if society_id|int == 3 %}
            <select class="form-control" id="district" class="district" name="district">
                <option value="">--select district---</option>
                {% if district %} {% for i in district %}
                {% if user.district == i.district_name %}
                <option value="{{i.district_name}}" selected>{{i.district_name}}</option>
                {% else %}
                <option value="{{i.district_name}}">{{i.district_name}}</option>
                {% endif %} {% endfor %} {% endif %}
            </select><br>
            <input type="text" name="other_district" id="other_district" class="form-control" value="{{user.other_districts or ''}}">
            {% else %}
            <input type="text" name="district" id="district" class="form-control" value="{{user.district or ''}}" />
            {% endif %}
			<!--<input type="text" class="form-control trim" name="district" id="district" value="{{user.district or ''}}" placeholder="District"/>-->
		</div>
	</div>
	<div class="row">
		<div class="col-md-6 form-group">
			<label>PIN / ZIP Code:</label>
		</div>   
		<div class="col-md-6 form-group">
			<input type="text" class="form-control trim" name="pincode" id="pincode" value="{{user.pincode or ''}}" placeholder="Pincode" maxlength="6"/>
		</div>
	</div>
	<div class="row">
		<div class="col-md-6 form-group">
			<label>Country<span class="text-danger">*</span>:</label>
		</div>   
		<div class="col-md-6 form-group">
			<!-- user contry if not or new then default set 100 - india country id   -->
			{% set user_country = user.country_id if user.country_id else Auth.getSociety(society_id)['default_country_id'] %} 
			<select class = "form-control" id ="country" name= "country" onchange="onchange_country()">
				<option value = "" id = "select">Select Country*</option>
				{% if countries %}
					{% for country in countries %}
					<option value = "{{country.country_id}}" {{ "selected" if country.country_id == user_country  }}> {{country.country_name}}</option>
					{% endfor %}
				{% endif %}
			</select>
		</div>
	</div>
	<div class="row">
		<div class="col-md-6 form-group">
			<label>State<span class="text-danger">*</span>:</label>
		</div>     
		<div class="col-md-6 form-group">
			<select class = "form-control" id = "state" name = "state">
				<option value = "" id = "select">Select Country First*</option>
				{% if states %}
				{% for state in states %}
				<option value = "{{state.state_id}}">{{state.state_name}}</option>
				{% if state.state_id == user.state_id %}
				<option value = "{{state.state_id}}" selected>{{state.state_name}}</option>
				{% endif %}
				{% endfor %}
				{% endif %}
			</select>
		</div>
	</div>
	{% if society_id|int in (3,10) %}
	<div class="row">
		<div class="col-md-6">
			<label>Government Proof <span class="text-danger">*</span>:</label>
		</div>
		<div class="col-md-6">
			<select class="form-control" id="gov_proof_type" class="gov_proof_type" name="gov_proof_type">
                <option value="">--Select ID proof Type---</option>
                {% for i in Helper.gov_proof_type %} 
                    <option value="{{i}}" {% if i == user.gov_proof_type %} selected {% endif %} >{{i}}</option>
                {% endfor %}
            </select><br>
		</div>
	</div>
	<div class="row">
		<div class="col-md-6"></div>
		<div class="col-md-6">
			<input type="text" class="form-control" name="gov_proof_id" id="gov_proof_id" value="{{user.gov_proof_id or ''}}" placeholder="Enter your government proof number"/>
		</div>
	</div><br>
	{% endif %}
	{% if Helper.HospitalAddress.get(society_key,None) %}
			{% if Helper.HospitalAddress[society_key]['show'] == 1 %}
			 	{% include 'memberapp_users/user_additional.html' %}
			{% endif %}
	{% endif %}
	<div class="row">
		<div class="col-md-12">
			{% if member_types|length > 1 %}
				<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>
			{% endif %}
			<input type="submit" value="Please wait.." name="submit_update" id="submit" disabled class="btn btn-lg btn-primary float-right form-input">
		</div>
	</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.25.1/moment.min.js"></script>
{% endblock %}

{% block script %}

<script type="text/javascript">
	 var id_month = $("#month");
    var id_Years = $("#year");
     var dob = "{{user.dob}}";
	var BaseUrl = document.location.origin   
	$('#dob').mask('00-00-0000');
	$('#aadhaar_number').mask('0000 0000 0000');
	var society_id = "{{society_id}}";
	var society_key = "{{society_key}}";


	if (dob != "None") {
        var dob_list = [];
        dob_list = dob.split("-");
        month = dob_list[1];
        year = dob_list[0];
    }

$(document).ready(function()
{
	$("#submit").val("Next")
	$("#submit").attr("disabled",false)
	
	var district = $('#district').val();
        if (district =="Others"){
            $('#other_district').show();
        }
        else{
            $('#other_district').hide(); 
        }
	
	 set_month();
        set_year();
        if (dob != "None") {
            // alert(month)
            id_month.val(month);
            id_Years.val(year);
        }


	onchange_country();
	$('.error').hide();
	$("#submit").click(function() 
	{
		validate_update_form()
		var hos_required = $("#hos_required").val();
		var hos_address1 = $("#hos_address1").val();
		if (hos_required == 1 && hos_address1.length == 0 ){
			$('.error').show();
			$("#hos_error").text("Please enter address of the institute/hospital");
			return false;
		}
// 		var day = $("#date").val();
//         var month = $("#month").val();
//         var year = $("#year").val();
//         var input_date = month+'/'+day+"/"+year
//         var date = new Date(year+'-'+month+'-'+day);
//         var output_date = moment(date).format("MM/DD/YYYY");
//         if (input_date == output_date){
//         	return true
//         }
//         else{
//         	alert("Invalid date please enter valid date")
//         	return false
//         }
        
	})
	
})


$("#district").change(function(){
        var district = $('#district').val();
        if (district=="Others"){
            $('#other_district').show();
        }
        else{
            $('#other_district').hide(); 
        }
    });




function set_month() {
        var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
        var i = 0;
        for (i; i < monthNames.length; i++) {
            var option = $("<option />");
            option.html(monthNames[i]);
            option.val(("0" + (i + 1)).slice(-2));
            id_month.append(option);
        }
    }
    function set_year() {
        var currentYear = new Date().getFullYear();
        for (var i = currentYear - 23; i >= 1930; i--) {
            var option = $("<option />");
            option.html(i);
            option.val(i);
            id_Years.append(option);
        }
    }


jQuery.validator.addMethod("validDate", function(value, element) {
	var check   = moment(value,"DD-MM-YYYY");    
	var isvalid =  this.optional(element) || check.isValid();
	if (isvalid == true)
	{   
		var year  = check.format('YYYY');
		if (year == "0000" )
		{
			isvalid = false; 
		}
	}
	return isvalid
	}, "Please enter a valid date in the format DD-MM-YYYY");

jQuery.validator.addMethod("valid23AboveYear", function(value, element) {
	var check = moment(value,"DD-MM-YYYY");    
	var isvalid =  this.optional(element) || check.isValid();
	if (isvalid == true)
	{   
		var year  = check.format('YYYY');
		var currentyear =  new Date().getFullYear();
		var checkyear = currentyear - 23;
		if (checkyear < year)
		{
			isvalid = false; 
		}
	}
	return isvalid
	}, "Invalid DOB ");    
	
jQuery.validator.addMethod("validdatefromate", function(value, element) {
	return this.optional(element) ||  /^\d{1,2}\-\d{1,2}\-\d{4}$/.test(value);
}, "Please enter valid date.");

function onchange_country()
{
	var country_id=$("#country").val();
	$.ajax({
		type: 'GET', 
		url: BaseUrl+"/state/"+society_id+"/"+society_key, 
		data:{
		  country_id:country_id
		}, 
		dataType: 'json',
		success: function(data){
			$("#state").empty();
			$("#state").append($("<option></option>").val('').html('Select State')); 
			$.each(data, function (i, state) 
			{  
				$("#state").append($("<option></option>").val(state.state_id).html(state.state_name)); 
			})
			//For edit state select from user table    
			$("#state").val("{{user.state_id}}")
		},
		error: function(XMLHttpRequest, textStatus, errorThrown) { 
		} 
	});                   
}
function validate_update_form()
{
	errorclass : 'error',
	$("#update_form").validate({
   
	rules : {
	   prefix      : "required",
	   name        : "required",
	   mobile      : {
					   required : true,
					   minlength : 10,
					   maxlength : 10
					   },
	   aadhaar_number: {
					   required : true,
					   minlength : 14,
					   maxlength : 14
					   },
	   whatsapp_number: {
					   minlength : 10,
					   maxlength : 10
					   },
	    date: {
                required: true,
            	},
        month: {
                required: true,
            },
        year: {
                required: true,
            },
	   gender       : "required",
	   address_1    : "required",
	   city         : "required",
	   district: {
                required: true,
            },
       other_district:{
                required: true,
            },
	   pincode     : {
					   minlength : 6,
					   maxlength : 6
					   },
	   country      : "required",
	   state        : "required",
	   gov_proof_type:{
                required: true,
            },
       gov_proof_id : {
       			required: true,
       }
	},
	messages : {
		prefix      : "Please select the prefix",
		name        : "Please enter your full name",
		mobile      : {
					   required : "Please enter mobile number",
					   maxlength : "Mobile Number provided is too long",
					   minlength : "Mobile number must be 10 digits"
						},
	whatsapp_number :  {
					   maxlength : "Whatsapp number Number provided is too long",
					   minlength : "Whatsapp Number must be 12 digits"
						},
		
		date        : "Select your Date",
        month       : "Select your Month",
        year        : "Select your Year",
		aadhaar_number :  {
					   required : "Please enter Aadhaar number",
					   maxlength : "Aadhaar Number provided is too long",
					   minlength : "Aadhaar Number must be 12 digits"
						},
		gender      : "Please select the Gender",
		address_1   : "Please enter your address",
		district    : "Please enter your district ",
		other_district: "Please enter your district",
		city        : "Please enter your city",
		pincode     : {
						maxlength:"Pincode must be 6 digits",
						minlength:"Pincode must be 6 digits",
						},
		country     : "Please select your country",
		state       : "Please select your state",
		gov_proof_type : "Please select your government proof type",
		gov_proof_id   : "Please enter your government proof id number"
					
	},
			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;

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