{% 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=[]
      	var loacount=0;
        
        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 addLOA() {
      			loacount++;
      			loatable=$("#LOA_table");
      			loatable.append("<tr id='loaid-"+loacount+"'><td>"+loacount+"</td><td><input name='loastart-"+loacount+"'  id='loastart-"+loacount+"' size='5'/></td><td><input name='loaend-"+loacount+"' id='loaend-"+loacount+"' size='5'/></td><td><button onClick='deleteLOA("+loacount+");return false;'>delete</button></td></tr>")

      			$("#pickers").append("<div id='loastart-"+loacount+"-picker' class='md-form md-outline input-with-post-icon datepicker'></div>");
      			setupDateField("loastart-"+loacount,'');
      			document.getElementById('loastart-'+loacount).addEventListener("focus", function() {
							var idp='#loastart-'+loacount+'-picker';
							$(idp).show();
							if (showingdate && showndateobj != $(idp)) {
								showingdate=false;
								showndateobj.hide();
							}
							showingdate=true;
							showndateobj=$(idp);
						});
      			$("#pickers").append("<div id='loaend-"+loacount+"-picker' class='md-form md-outline input-with-post-icon datepicker'></div>");
      			setupDateField("loaend-"+loacount,'');
      			return false;
      		}
      		
      		function deleteLOA(loaid) {
      			$("#loaid-"+loaid).remove();
      			$("#loastart-"+loaid+"-picker").remove();
      			$("#loaend-"+loaid+"-picker").remove();
      			var csrf=$("input[name=csrfmiddlewaretoken]")[0].value;
      			var d={};
      			d['loaid']=loaid;
        		d['csrfmiddlewaretoken']= csrf;
      			$.ajax({
						type: "POST",
						url: "{{ base }}deleteLOA/{{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) {
							  console.log("deleted loa");
							  refreshLoas();
	        		}

						});
      		}
      		
      		function createLOA() {
      			var csrf=$("input[name=csrfmiddlewaretoken]")[0].value;
      			var stobj=$("#loastart-new");
      			var endobj=$("#loaend-new");
      			var startd = stobj.val();
      			var endd = endobj.val();
      			var d={};
      			d['start']=startd;
      			d['end']=endd;
        		d['csrfmiddlewaretoken']= csrf;
        		d['student']={{data.id}};
      			$.ajax({
      				type: "POST",
							url: "{{ base }}createLOA",
							data: d,
							dataType: 'json',
							success: function (data) {
								//stobj.remove()
								//endobj.remove()
								refreshLoas();
      					stobj.val("");
      					endobj.val("");
      					//setupLoaDate("loastart-new","");
      					//setupLoaDate("loaend-new","");
      				},
							error: function (data) {
								alert("error:"+data.message);
	        		},
	        		complete: function(data) {
							  console.log("created loa");
	        		}
      			});
      		}
      		
      		function editLOA(loaid) {
      			var csrf=$("input[name=csrfmiddlewaretoken]")[0].value;
      			var stobj=$("#loastart-"+loaid);
      			var endobj=$("#loaend-"+loaid);
      			var startd = stobj.val();
      			var endd = endobj.val();
      			var d={};
      			d['loaid']=loaid;
      			d['start']=startd;
      			d['end']=endd;
        		d['csrfmiddlewaretoken']= csrf;
      			$.ajax({
						type: "POST",
						url: "{{ base }}updateLOA/{{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) {
						  console.log("updated loa");
						  refreshLoas();
        		}

					});
      		}
      		
    		function deleteKeyFromHash(key) {
			   if(alldates.hasKey(key)) {
			      delete alldates.container[key];
			      return true;
			   }
			   return false;
				}
				
function nicedatestr(instr) {
	let stdate=new Date(instr);
	let day = stdate.getDate();
	let month = stdate.getMonth()+1; //indexed by zero
	let year = stdate.getFullYear();
	return month + "/" + day + "/" + year;
}

function changeLOA(id) {
	$("#loastablebody").css('background-color', '#dddddd');
	$("#loabutton-"+id).removeAttr('disabled');
}

function refreshLoas() {
		$("#loastablebody").html("<tr><td colspan='5'><marquee>LOADING LOAS...</marquee></td></tr>");
		$("#pickers").html("");
		//$("#pickers").append('<div id="loastart-new-picker" class="md-form md-outline input-with-post-icon datepicker"></div><div id="loaend-new-picker" class="md-form md-outline input-with-post-icon datepicker"></div>');
		//setupLoaDate("loastart-new","");
		//setupLoaDate("loaend-new","");
		
		$.get('{{ base }}loas/{{data.id}}', function(d) {
				var all_loas=d.data
				var newhtml="";
				for (i=0;i<all_loas.length;++i) {
					loa=all_loas[i];
					//stdate=nicedatestr(loa.loa_start);
					//enddate=nicedatestr(loa.loa_end);
				
					newhtml+="<tr valign=\"bottom\"><td>"+loa.id+"</td>";
					newhtml+="<td><input name='loastart-"+loa.id+"' id='loastart-"+loa.id+"' value='' size='10' /></td>";
					newhtml+="<td><input name='loaend-"+loa.id+"' id='loaend-"+loa.id+"' value='' size='10'/></td>";
					newhtml+="<td><button value='edit' onClick='editLOA("+loa.id+"); return false;' disabled id='loabutton-"+loa.id+"'>SAVE</button></td>";
					newhtml+="<td><button value='delete' onClick='deleteLOA("+loa.id+"); return false;'>DELETE</button></td>";
					newhtml+="</tr>";
					$("#pickers").append("<div id='loastart-"+loa.id+"-picker' class='md-form md-outline input-with-post-icon datepicker'></div>");
					$("#pickers").append("<div id='loaend-"+loa.id+"-picker' class='md-form md-outline input-with-post-icon datepicker'></div>");
			
				}
				//var arr=JSON.parse(d);
				//window.alert("here");
				
				$("#loastablebody").html(newhtml);
				$("#loastablebody").css('background-color', '#ffffff');
				for (i=0;i<all_loas.length;++i) {
					loa=all_loas[i];
					setupLoaDate("loastart-"+loa.id,loa.loa_start);
					setupLoaDate("loaend-"+loa.id,loa.loa_end);
      	}
				
			});
			//var newhtml="<tr valign=\"bottom\"><td>" + sp + "</td></tr>"; //$("#newtransactionsform").html()
			//newhtml+=data;
			
		
	}
      	
      	
      	
				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"}}',
        		'inactive_date': '{{ data.inactive_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"}}',
        		'loastart-new' : '',
        		'loaend-new' : ''
        	}
        	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();
					});
					refreshLoas();
					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 idp='#'+k+'-picker';
          $(idp).datepicker({clearBtn: true, setDate: thedate, autoclose: true, todayHighlight: true, keepEmptyValues: true, immediateUpdates: true, defaultViewDate: val});

					$(idp).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>");
					});
					
					
					
					$(idp).hide();
					
					document.getElementById(k).addEventListener("focus", function() {
						$(idp).show();
						if (showingdate) {
							showingdate=false;
							showndateobj.hide();
						}
						showingdate=true;
						showndateobj=$(idp);
					}
					);
					
					console.log("setting up "+k+" and "+idp);
			/*
					document.getElementById(k).addEventListener("focusout", function() {
						$(id).hide();}
					);
					*/
					$(":input").each(function() {
						$(this).on("focus", function() {
							if (showingdate) {
								showingdate=false;
								showndateobj.hide();
							}
						});
					});
				
        }; //end setupDateField
        
        
        function setupLoaDate(k, val) {
        	const regex=/-([\d]+)/;
        	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();
        		
        		$("#"+k).attr("value",visualdateval);
        		console.log("*loa date "+k+" is "+newdateval);
        	}
        	var idp='#'+k+'-picker';
        	
        	$(idp).datepicker({clearBtn: true, setDate: thedate, autoclose: true, todayHighlight: true, keepEmptyValues: true, immediateUpdates: true, defaultViewDate: val});
        	
        
        	$(idp).datepicker().on('changeDate', function (ev) {
									if (!loaded) {return;}
									$('#'+k).val(ev.format('m/d/yyyy'));
									found=k.match(regex);
									loaid=found[1];
									console.log("F: "+loaid);
									changeLOA(loaid);
						});

        	$(idp).hide();
        	
					document.getElementById(k).addEventListener("focus", function() {
						$(idp).show();
						if (showingdate && showndateobj != $(idp)) {
							showingdate=false;
							showndateobj.hide();
						}
						showingdate=true;
						showndateobj=$(idp);
					});
					
					
					console.log("LOA setting up "+k+" and "+idp);
					/*document.getElementById(k).addEventListener("focusout", function() {
						$(idp).hide();
						showingdate=null;
					});*/
        }; //end setupLoaDate
        
        
        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 %}