include mixins
include mixins_day

doctype html
html
	include header
	script(src='/javascripts/socket.io.js' )
	link(href="/stylesheets/bootstrap-datepicker.min.css", rel="stylesheet")
	script(src='/javascripts/bootstrap-datepicker.min.js' )
	script(src='/javascripts/bootstrap-datepicker.de.min.js' )
	body(style="overflow: hidden;")
			
		if can_go_back === false
			script.
				history.pushState(null, null, location.href);
				window.onpopstate = function(event) {
					history.go(1);
				};
				
		.modal.fade(id="daypickerDialog", role="dialog", aria-labelledby="daypickerDialogLabel", aria-hidden="true")
			.modal-dialog(role="document")
				.modal-content
					.modal-header
						button(type="button", class="close", data-dismiss="modal", aria-hidden="true") ×
						h4(class="modal-title" id="daypickerDialogLabel") Datum anspringen
					.modal-body
						#datepicker()
					.modal-footer
						button(type="button", class="btn btn-default", data-dismiss="modal") Abbrechen
						button(type="button", class="btn btn-success", id="confirm") Anspringen
						
		+standard_delete_dialog("confirmDelete")
		//- .modal.fade(id="confirmDelete", role="dialog", aria-labelledby="confirmDeleteLabel", aria-hidden="true")
		//-	.modal-dialog(role="document")
		//-		.modal-content
		//-			.modal-header
		//-				button(type="button", class="close", data-dismiss="modal", aria-hidden="true") ×
		//-				h4(class="modal-title", id="confirmDeleteLabel") Löschen bestätigen
		//-			.modal-body
		//-				p Sind Sie sicher, dass Sie das Ereignis löschen wollen?
		//-			.modal-footer
		//-				button(type="button", class="btn btn-default", data-dismiss="modal") Abbrechen
		//-				button(type="button", class="btn btn-danger", id="confirm") Löschen

		.root
		
			.new_flex_zero
				+nav("PfarrInfoSystem", "dropdown_menu")
					+nav_item( "#", "active" ) Tag
					+nav_item( "/timeline/" + date.date) TagZeitleiste
					+nav_item( "/week/" + date.date) Woche
					+nav_item( "/day/"+date.date+"/select_punits_for_view" ) Angezeigte Orte konfigurieren
					+nav_item( "/info" ) Info
					
			#dataparent.subroot(style="overflow: hidden; height: 100%;")
				.new_flex_zero(style="margin-bottom: 15px; padding-left: 15px; padding-right: 15px;")
					#daycontrol_parent
						+daycontrol(date, litinfo, last_week, yesterday, tomorrow, next_week)
							+messageview(messages)

				.new_flex_one(style="overflow: auto; padding-left: 15px; padding-right: 15px;")
					.row
						.col-xs-12.col-sm-6
							fieldset(style="margin-bottom: 20px;")
								legend
									table(width="100%")
										tr
											td.
												Meine Termine & Co.
											td(align="right")
												+dropdown_button("Neu erstellen", "new_own", "right")
													- var link = "/" + date.date + "/new/edit";
													+dropdown_button_element_href("Ereignis", "/event" + link)
													+dropdown_button_element_href("Zu-Beachten", "/keep_in_mind" + link)
													+dropdown_button_element_href("Zu-Tun", "/todo" + link)
													+dropdown_button_element_href("Abwesenheit", "/away" + link)
													+dropdown_button_element_href("Fahrzeugenutzung", "/vehicle_use" + link)
								#activities_own
									+day_activities(date, parishcal, "own")
							
						.col-xs-12.col-sm-6
							fieldset(style="margin-bottom: 20px;")
								legend Andere Termine & Co.
								#activities_other
									+day_activities(date, parishcal, "other")
									
							+day_birthdays(parishcal.birthdays)
							
	script.
		var sockets;
		
		$(document).ready(function() {
			console.log('NOW CONNECTING');
		 	sockets = io.connect();
			
			sockets.on('invalid_session_data', function(data) {
				console.log('invalid_session_data', data);
				alert('INVALID SESSION PROVIDED!');
			});
			
			sockets.on('day_goto_result',function(data){
					console.log('day_goto_result');

					if(data.result === "OK") {
						var html = $(data.html);
						
						history.replaceState(null, document.title, "/day/" + data.date + "?back=false");
					
						$('#dataparent').html(data.html);
						
						var timeline_elem = $('.navbar-collapse > ul > li:nth(1) > a');
						timeline_elem.prop('href', '/timeline/' + data.date);
						var week_elem = $('.navbar-collapse > ul > li:nth(2) > a');
						week_elem.prop('href', '/week/' + data.date);
						console.log(week_elem);
					}
					else {
						$('#dataparent').html("<div class='new_flex_one' style='padding-left: 15px; padding-right: 15px;'>"+data.html+"</div>");
					}
				});
			
			sockets.on('pentry_delete_result', function(data) {
				console.log("pentry_delete_result");
				
				if(data.result === 'OK') {
					var button = $('[data-pentry-uuid="'+ data.uuid + '"]');
					var type = data.pentrytype;
					var box = button.closest('.' + type);
					box.remove();
				}
					
				$('#daycontrol_parent').append(data.message);
					
				$('#confirmDelete').modal('hide');
			});
		});
		
		function day_goto(new_date) {
			console.log(new_date);
			sockets.emit('day_goto', {date : new_date});
		}
		
		$('#datepicker').datepicker({format: "yyyy-mm-dd", language: "de", calendarWeeks: true, todayHighlight: true});
			
		$('#daypickerDialog').on('show.bs.modal', function (e) {
			date = $(e.relatedTarget).attr('data-date');
			$('#datepicker').datepicker("update", date);
		});
		
		$('#daypickerDialog').find('.modal-footer #confirm').on('click', function() {
				$('#daypickerDialog').modal('hide');
				console.log('CLICKED');
				day_goto($("#datepicker").datepicker('getFormattedDate'));
		});
		
		function toggle_pentrydetails_visibility(pentry) {
			$(pentry).find(".pentry_details").toggle();
		}
		
		$('#confirmDelete').on('show.bs.modal', function (e) {
			$etitle = $(e.relatedTarget).attr('data-pentry-title');
			$(this).find('.modal-body p').text("Sind Sie sicher, dass Sie " + $etitle + " löschen wollen?");
		
			$(this).find('.modal-footer #confirm').data('button', $(e.relatedTarget));
		});
		
		$('#confirmDelete').find('.modal-footer #confirm').on('click', function() {
				var delete_button = $(this).data('button');
				
				var date = delete_button.data('date');
				var type = delete_button.data('pentry-type');
				var uuid = delete_button.data('pentry-uuid');
				
				console.log(date, type, uuid);
				
				sockets.emit('pentry_delete', { date: date, pentrytype: type, uuid: uuid });
		});