{% extends 'base.html' %}
{% load tz %}
{% get_current_timezone as TIME_ZONE %}
{% timezone "US/Eastern" %}
{% endtimezone %}



{% block content %}
<style>
	.column {
  float: left;
  width: 50%;
}

	.tablerow {
		vertical-align: top;
	}
	
	.label {
		font-size: 12px;
		font-weight: bold;
		vertical-align: center;
	}
	.textarealabel {
		font-size: 12px;
		font-weight: bold;
		vertical-align: top;
	}
	.field {
		font-size: 12px;
	}
	
.transactionstable {
	width: 900px;
}

.fieldtransactionid {
	column-width: 100px;
	align: center;
	color: black;
}
.fieldstudentid {
	column-width: 100px;
	align: center;
	color: black;
}
.fieldtransactiondate {
	column-width: 200px;
	align: center;
	color: black;
}
.fieldtransactiontype {
	column-width: 100px;
	align: center;
	color: black;
}

.fieldtransactionamount {
	column-width: 100px;
	align: center;
	color: black;
}

.fieldtransactioninvoice {
	column-width: 100px;
	align: center;
	color: black;
}

.fieldtransactionnotes {
	column-width: 200px;
	align: center;
	color: black;
}
.systemmessageclass {
	font-size: 14px;	
}
/* billingtooltip container */
.billingtooltip {
  position: relative;
  display: inline;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* billingtooltip text */
.billingtooltip .billingtooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the billingtooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the billingtooltip text when you mouse over the billingtooltip container */
.billingtooltip:hover .billingtooltiptext {
  visibility: visible;
}
</style>
Control-R: <a href="javascript: $('#findRecordModal').modal({keyboard:true,focus:true});">find</a> a record  ||  Control - P: go to <a href="javascript:document.hiddenpreviousrecordform.submit()">previous</a> matching record ||  Control - N: go to <a href="javascript: document.hiddennextrecordform.submit();">next</a> matching record  ||  Control - L: go back to <a href="{{ base}}browse?page={{page}}">list</a>

{% include "mainform.html" %}
<br/><br/>
{% include "transactions_view.html" %}
<br/><br/>
{% include "invoices_view.html" %}

<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) $('#findRecordModal').modal({keyboard:true,focus:true})
            if (evtobj.keyCode == 78 && evtobj.ctrlKey) { //N for next
            	document.hiddennextrecordform.submit();
            }
            if (evtobj.keyCode == 76 && evtobj.ctrlKey) { //L for list
            	window.location.href="{{ base}}browse?page={{page}}"
            }
            if (evtobj.keyCode == 80 && evtobj.ctrlKey) { //P for previous
            	document.hiddenpreviousrecordform.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];
					}
					
					$.ajax({
						type: "POST",
						url: "{{ base }}saveDetailsChanges/{{data.id}}",
						data: d,
						dataType: 'json',
						success: function (data) {
						  if (! data.result) {
						    //alert(data.message);
						  }
						  
						},
						error: function (data) {
							//alert("error:"+data.message);
        		},
        		complete: function(data) {
						  resetDetailsFormChanged();
        		}

					});
					return false;
				}
				
				function resetDetailsFormChanged() {
					formhasbeenchanged=false;
					$("#leftdetailstable").attr("bgcolor","#ffffff");
					$("#rightdetailstable").attr("bgcolor","#ffffff");
					$("#system_message").html("<i><b><font size='2'>CHANGES SAVED</font></b></i> &nbsp ");
					$("#bottomsavespan").html("<i><b><font size='2'>All CHANGES SAVED</font></b></i> &nbsp ");
				}
				
				function detailsformchanged() {
					if (!loaded) {return;} //don't trigger when setting up
					formhasbeenchanged=true;
					var buttonsave="<button onClick='saveDetailsChanges(); return false;' value='Save Changes' >Save All Changes</button>";
					$("#leftdetailstable").attr("bgcolor","#eeeeee");
					$("#rightdetailstable").attr("bgcolor","#eeeeee");
					$("#system_message").html("<i><b><font color='blue'>CHANGED</font></b></i> &nbsp "+buttonsave);
					$("#bottomsavespan").html("<i><b><font color='blue'>CHANGED</font></b></i> &nbsp "+buttonsave);
				}
        $(function () {
        	showndateobj=null;
        	showingdate=false;
        	$("#formpurpose").html("Use this form to edit 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) {
						console.log("checkbox a "+index)
						val=$(this).attr("value");
						console.log($(this).attr("name"));
						if (val && (val.toLowerCase() == "true" ||val =="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) {
						console.log($(this).attr("name"));
						try {
							if ($(this).attr("value").toLowerCase() == "none") {
								$(this).attr("value","");
							}
						}
						catch (err) {
							console.log($(this).attr("name") +" MISSING a value attribute");
						}
					});
					$("input,textarea,select").not('.ignore').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).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>

<br/><br/><br/><br/>
<!-- hidden next search -->
<form name="hiddennextrecordform" action="{{ base }}nextrecord/" method="POST" >
<input type="hidden" name="currentid" value="{{data.id}}" />
<input type="hidden" name="currentpage" value="{{page}}" />
<input type="hidden" name="currentresnum" value="{{resnum}}" />
<input type="hidden" name="action" value="next" />
{% csrf_token %} 
</form>
<form name="hiddenpreviousrecordform" action="{{ base }}previousrecord/" method="POST">
<input type="hidden" name="currentid" value="{{data.id}}" />
<input type="hidden" name="currentpage" value="{{page}}" />
<input type="hidden" name="currentresnum" value="{{resnum}}" />
<input type="hidden" name="action" value="previous" />
{% csrf_token %} 
</form>

<!-- Modal -->
<div class="modal fade" id="findRecordModal" tabindex="-1" role="dialog" aria-labelledby="findRecordModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="findRecordModalLabel">Move to next record with...</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      	<form name="findrecordform" action="{{ base }}findrecord/" method="POST" onKeyPress="return submitNextRecordForm(event)">
        Keyword or Record id: <input id="findkeyword" name="findkeyword" value="" />
        <input type="hidden" name="currentid" value="{{data.id}}" />
        <input type="hidden" name="action" value="findrecord" />
        <input type="hidden" name="currentpage" value="{{page}}" />
        <input type="hidden" name="currentresnum" value="{{resnum}}" />
        
    {% csrf_token %} 
        <input type="submit" value="go to" />
      	</form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<hr />

Use this form to edit student records.
{% endblock %}