{% extends 'base.html' %}

{% load crispy_forms_tags %}

{% block content %}
<style>
	td {
		font-size: 12px;
	}
	
</style>

<!-- <form method="POST" enctype="multipart/form-data"> -->
  
    <!-- Security token -->
    {% csrf_token %} 
  
    <!-- Using the formset -->
   <!-- \{\{ form.as_p \}\} -->
      
 <!--   <input type="submit" value="Submit"> 
</form>  -->
<script type="text/javascript">
        var formhasbeenchanged=false;
        loaded=false;
        var alldates=[]
        
        function KeyPress(e) {
            var evtobj = window.event? event : e
            if (evtobj.keyCode == 82 && evtobj.ctrlKey) $('#nextRecordModal').modal({keyboard:true,focus:true})
            if (evtobj.keyCode == 83 && evtobj.ctrlKey) {
            	document.hiddennextrecordform.submit();
            }
            return true;
        }

        document.onkeydown = KeyPress;

				function saveDetailsChanges() {
					var form = $("#mainform");
					d=objectifyForm(form);
					d['action']="update";
					for (var key in alldates) {
						d[key]=alldates[key];
					}
					form.attr('action','create');
					$("#action").val("update");
					form.submit();
					
					/*
					$.ajax({
						type: "POST",
						url: "create",
						data: d,
						dataType: 'json',
						success: function (data) {
						  if (! data.result) {
						    alert(data.message);
						  }
						  resetDetailsFormChanged();
						  
						}
					});
					*/
				}
				
				function resetDetailsFormChanged() {
					formhasbeenchanged=false;
					$("#leftdetailstable").attr("bgcolor","#ffffff");
					$("#rightdetailstable").attr("bgcolor","#ffffff");
					$("#framediv").attr("style","background-color: #ffffff;");
					$("#system_message").html("<i><b><font size='2'>RECORD SAVED</font></b></i> &nbsp ");
					$("#bottomsavespan").html("<i><b><font size='2'>RECORD SAVED</font></b></i> &nbsp ");
				}
				
				function detailsformchanged() {
					if (!loaded) {return;} //don't trigger when setting up
					formhasbeenchanged=true;
					var buttonsave="<button onClick='saveDetailsChanges();' value='Create New Record' >Create New Record</button>";
					$("#leftdetailstable").attr("bgcolor","#eefff0");
					$("#rightdetailstable").attr("bgcolor","#eefff0");
					$("#framediv").attr("style","background-color: #eefff0;");
					
					$("#system_message").html("<i><b><font color='blue'>Ready to create</font></b></i> &nbsp "+buttonsave);
					$("#bottomsavespan").html("<i><b><font color='blue'>Ready to create</font></b></i> &nbsp "+buttonsave);
				}
        $(function () {
        	showndateobj=null;
        	showingdate=false;
        	
        	$("#formpurpose").html("Use this form to create a new student record.");
        	
        	$.fn.datepicker.defaults.format = "mm/dd/yyyy";
        	//note available django filters https://www.webforefront.com/django/usebuiltindjangofilters.html 
        	datetimefields={
        		'graduation_date': '{{ data.graduation_date|date:"SHORT_DATE_FORMAT"}}',
        		'next_due_date': '{{ data.next_due_date|date:"SHORT_DATE_FORMAT"}}',
        		'leave_of_absence_date': '{{ data.leave_of_absence_date|date:"SHORT_DATE_FORMAT"}}',
        		'withdrawal_date': '{{ data.withdrawal_date|date:"SHORT_DATE_FORMAT"}}',
        		'suspension_date': '{{ data.suspension_date|date:"SHORT_DATE_FORMAT"}}',
        		'start_date': '{{ data.start_date|date:"SHORT_DATE_FORMAT"}}',
        		'extension_start_date': '{{ data.extension_start_date|date:"SHORT_DATE_FORMAT"}}'
        	}
        	for (var k in datetimefields) {
        		setupDateField(k,datetimefields[k]);
        	}
        	setupDateField('graduation_date','{{ data.graduation_date|date:"SHORT_DATE_FORMAT"}}');
					document.getElementById("mainform").addEventListener("dblclick", function() {
						if (showingdate) {
							showingdate=false;
							showndateobj.hide();
						}
					});
					
					$(".checkboxclass").each(function(index) {
						if ($(this).attr("value").toLowerCase() == "true" ||$(this).attr("value") =="1") {
							$(this).prop( "checked", 1 );
							$(this).attr("value",1);
						}
						else {
							$(this).prop( "checked", 0 );
							$(this).attr("value",0);
						}
					});
					
					$(".checkboxclass").change( function() {
						if ( $(this).is(":checked") ) {
							$(this).attr("value",1);
						}
						else {
							$(this).attr("value",0);
						}
					});
					
					$("input").each(function(index) {
						if ($(this).attr("value")) {
							if ($(this).attr("value").toLowerCase() == "none") {
								$(this).attr("value","");
							}
						}
						else {
							$(this).attr("value","");
						}
					});
					$("input,textarea").change( function() {
						detailsformchanged();
					});
					loaded=true;
        });
        function setupDateField(k, val) {
        	thedate=new Date(val);
        	if (!val) {
        		console.log("*invalid date:"+val+" for k"+k);
        		thedate=new Date();
        	}
        	else {
        		var newdateval=thedate.getFullYear()+"-"+(thedate.getMonth()+1)+"-"+thedate.getDate();
        		var visualdateval=(thedate.getMonth()+1)+"/"+thedate.getDate()+"/"+thedate.getFullYear();
        		alldates[k]=newdateval
        		
        		$("#"+k).attr("value",visualdateval);
        		console.log("*setting "+k+" to "+newdateval);
        	}
        	var id='#'+k+'-picker';
          $(id).datepicker({setDate: thedate, autoclose: true, todayHighlight: true, keepEmptyValues: true, immediateUpdates: true, defaultViewDate: val});

					$(id).datepicker("setDate", thedate).on('changeDate', function (ev) {
								if (!loaded) {return;}
								$('#'+k).val(ev.format('m/d/yyyy'));
						    console.log(ev.format('m/d/yyyy'));
						    alldates[k]=ev.format('yyyy-m-d');
						    detailsformchanged();
						    console.log("got here in datepicker, date changed");
						    //$("#system_message").html("<i><b><font color='blue'>CHANGED</font></b></i>");
					});
					
					
					$(id).attr("style","display: float;");
					$(id).hide();
					
					
					
					document.getElementById(k).addEventListener("focus", function() {
						$(id).show();
						if (showingdate) {
							showingdate=false;
							showndateobj.hide();
						}
						showingdate=true;
						showndateobj=$(id);
					}
					);
					
					console.log("setting up "+k+" and "+id);
			/*
					document.getElementById(k).addEventListener("focusout", function() {
						$(id).hide();}
					);
					*/
					$(":input").each(function() {
						$(this).on("focus", function() {
							if (showingdate) {
								showingdate=false;
								showndateobj.hide();
							}
						});
					});
					
				
        };
        function submitNextRecordForm(e) {
        	if (e && (e.keyCode ==13 || e.keyCode ==10)) {
        		$("#nextrecordform").submit();
        	}
        	return true;
        }
</script>
{% include "mainform.html" %}


<br/><br/><br/>

<hr />

Use this form to create a new student record.
{% endblock %}