include mixins
include mixins_email

doctype html
html
	include header
	link(href="/stylesheets/bootstrap-datepicker.min.css", rel="stylesheet")
	script(src='/javascripts/bootstrap-datepicker.min.js' )
	script(src='/javascripts/bootstrap-datepicker.de.min.js' )
	script(src='/javascripts/tinymce/tinymce.min.js' )
	script(src="/javascripts/validator.min.js")
	script(src='/javascripts/pfiswebsocket.js')
	script(src='/javascripts/runtime.js')
	script(src='/templates/daycontent.js')
	body
		
		+standard_delete_dialog("confirmDelete")
		
		.root

			.new_flex_zero
				+nav("PfarrInfoSystem", "dropdown_menu")
				p.pentryedit_headline eMail versenden 
					button.btn.btn-success.btn-xs#sendbutton(style="margin-left: 15px; margin-right: 5px;", data-toggle="modal" data-target="#sendEmail") Senden
					span.glyphicon.glyphicon-info-sign#sendbutton_info(aria-hidden="true",  data-toggle="tooltip" data-placement="bottom" title="Sie müssen mindestens einen Empfänger sowie den Betreff angeben!")
					
				
			#the_wall.new_flex_one(style="margin-bottom: 15px; padding-left: 15px; padding-right: 15px; overflow: auto;")
				
				#daycontentparent
					
				button(style="btn btn-default", onclick="day_goto('2016-02-04');") Daycontent
				
				fieldset
					legend(style="font-size: 120%; margin-bottom: 0px;") Anhänge
					#attachments_parent
						p <i>Keine Anhänge vorhanden.</i>
								//-	tr(data-addresses="#{empf.addresses}", data-recipient-name="#{empf.recipient_name}")
								//-		td(class="the_email_recipient", width="90%") !{empf.recipient}
								//-		td 
								//-			span(	class="glyphicon glyphicon-trash", 
								//-					aria-hidden="true", 
								//-					style="color: red; padding-right: 10px; padding-left: 10px; cursor: pointer;" 
								//-					data-toggle="modal", 
								//-					data-target="#confirmDelete", 
								//-					data-delete-type="to", data-delete-name="#{empf.recipient_name}")
				
				
				input(type="file", id="fileupload", style="margin-top: 10px;")
				p#upload_pending_indicator(style='display: none; text-style: italic;') Datei wird hochgeladen...
				//- button#fileuploadbutton(type="button", class="btn btn-default btn-xs", onclick="do_fileupload();", disabled) Datei hochladen
			
				
			
		script.
			var ws = new PfISWebSocket("#{sessionuuid}"/*, "#{taskuuid}"*/);
			ws.bind_standard_close_handler();

			ws.bind('open', function() { 
				console.log('OPEN');
				ws.send('mymessage', {data: 'ABC', code: 'DEF'});
			});
			ws.bind('close', function() { 
				console.log('CLOSED'); 
				$("#the_wall").append('<p>connection closed</p>');
			});

			ws.bind('mymessage', function(data) { console.log('mymessage:', data); });
			
			ws.bind('fileupload_result', function(data) { console.log(data); add_attachment(data)});
			
			function day_goto(d) {
				ws.send('get_parishday', {"format"	: "day", "date"	: d});
			}
			
			ws.bind('get_parishday_result', function(result) {
				var dc = daycontent_template(result);
				console.log(dc);
				
				$('#daycontentparent').empty();
				$('#daycontentparent').append(dc);
			});
			
			function add_attachment(file) {
				var the_table = $("#attachments");
		
				if(the_table.length === 0) {
					$("#attachments_parent").empty();
					// <thead><tr><td width='75%'><span style='color: grey; font-size: 80%;'>Name</span></td><td width='20%'><span style='color: grey; font-size: 80%;'>Typ</span></td><td width='5%'></td></tr></thead>
					$("#attachments_parent").append("<table width='100%' class='table table-condensed' style='margin-bottom: 10px;' id='attachments'></table>");
					the_table = $("#attachments");
				}
				
				var the_delete = '<span class="glyphicon glyphicon-trash" aria-hidden="true" style="color: red; padding-right: 10px; padding-left: 10px; cursor: pointer;" data-toggle="modal", data-target="#confirmDelete", data-delete-type="Anhang", data-delete-name="' + file.name + '"></span>';
				//  width='90%'
				the_table.append("<tr id='" + file.uid + "'><td width='5%'>" + the_delete + "</td><td><p style='margin-bottom: 0px;'>" + file.name + "</p><p class='parishdbelemspane_elem_kontext', style='font-size: 80%;'>(" + file.type + ")</p></td></tr>");
				
				$("#upload_pending_indicator").hide();
			}
			
			$('#confirmDelete').on('show.bs.modal', function (e) {
				$etype = $(e.relatedTarget).attr('data-delete-type');
				$ename = $(e.relatedTarget).attr('data-delete-name');
				$(this).find('.modal-body p').text("Sind Sie sicher, dass Sie \"" + $ename + "\" als Anhang löschen wollen?");
				
				// Pass form reference to modal for submission on yes/ok
				var tr = $(e.relatedTarget).closest('tr');
				
				$(this).find('.modal-footer #confirm').data('tr', tr);
				
				$(this).find('.modal-footer #confirm').data('delete-type', $etype);
			});

			$('#confirmDelete').find('.modal-footer #confirm').on('click', function() {
				$etype = $(this).data('delete-type');
				console.log($etype);
				
				if($etype === 'Anhang')
				{
					ws.send("fileupload_remove", {uid: $(this).data('tr').prop('id')});
					return;
				}
				
				var tr = $(this).data('tr');
				
				if(tr.is(":last-child") && tr.is(":first-child")) {
					var table = tr.closest("table");
					var table_id = table.prop('id');
					var t_parent = table.parent();
					table.remove();
					t_parent.append("<p><i>Keine Anhänge vorhanden.</i></p>");
				}
				else
					tr.remove();
					
				$('#confirmDelete').modal('hide');
			});
			
			ws.bind('fileupload_remove_result', function(data) {
				console.log(data);
			
				var tr = $("#"+data.uid);
				
				if(tr.is(":last-child") && tr.is(":first-child")) {
					var table = tr.closest("table");
					var t_parent = table.parent();
					table.remove();
					t_parent.append("<p><i>Keine Anhänge vorhanden.</i></p>");
				}
				else
					tr.remove();
					
				$('#confirmDelete').modal('hide');
			});
			
			$("#fileupload").on('change', function(e){
				var files=$("#fileupload").prop('files');
				/*if(files.length === 0)
					$("#fileuploadbutton").prop('disabled', true);
				else
					$("#fileuploadbutton").prop('disabled', false);*/
				do_fileupload();
			});
			
			function do_fileupload() {
				var files=$("#fileupload").prop('files');
				if(files.length === 0)
					return;
				console.log(files);
				console.log(files.length);
				
				$("#upload_pending_indicator").show();
				
				// $("#fileuploadbutton").prop('disabled', true);
	
				for (var i = 0, numFiles = files.length; i < numFiles; i++) {
					var file = files[i];
					console.log(file.name);
					console.log(file.size);
					console.log(file.type);
					
					var reader = new FileReader();
					reader.onload = (function(aFile) { return function(e) { 
							var data = {
								name : aFile.name,
								size : aFile.size,
								type : aFile.type,
								content : e.target.result,
								uid : generateUID()
							};
							
							ws.send('fileupload', data);
						}})(file);
					reader.readAsDataURL(file);
				}
				$("#fileupload").val('');
			}