include mixins
include mixins_week

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;")
		
		.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
		
		.container-horizontal(style="overflow: hidden;")
    
			.flex-one(style="overflow: hidden; height: 100%;")
      
				.container-vertical
      
					.flex-zero
						+nav("PfarrInfoSystem", "dropdown_menu")
							+nav_item( "/day/" + basedate ) Tag
							+nav_item( "#", "active" ) Woche
							+nav_item( "/week/select_punits_for_view" ) Angezeigte Orte konfigurieren
							+nav_item( "/info" ) Info
							
						.container-fluid(style="margin-bottom: 18px;")
							
							#weekcontrol_parent
								+weekcontrol(basedate, interval, last_week, next_week)
									+messageview(messages)
	
					.flex-one(style="overflow: auto; padding-left: 15px; padding-right: 15px;")
						- var is_desktop = false;
						
						if(is_desktop)
							- var celebration_printed = false;
							table(width="100%")
								each day in days
									- var red_class = day.litinfo.decoration_hint_red ? "litpanel_red" : "";
									- var celebration_class = "";
									- if(day.litinfo.decoration_hint == 2) celebration_class = "week_celebration_stage2";
									- if(day.litinfo.decoration_hint == 1) celebration_class = "week_celebration_stage1";
									- var the_date = day.date.weekday_short + ", " + day.date.day + ". " + day.date.month_short + " " + day.date.year;
									if( ! celebration_printed)
										tr
											td(valign='top', width="10%")
												span(class=["week_celebration", celebration_class, red_class]) !{the_date}
											td(width="8%")
											td
											td 
												span(class=["week_celebration", celebration_class, red_class]) #{day.litinfo.celebration}
												if day.litinfo.celebration_add != ""
													br
													span(class="litpanel_celebration_add") !{day.litinfo.celebration_add}
												if day.litinfo.infos != ""
													br
													span(class="litpanel_infos") !{day.litinfo.infos}
										- the_date = "";
									else if(celebration_printed && day.parishcal.events.today.length === 0)
										tr
											td(valign='top', width="10%")
												span(class=["week_celebration", celebration_class, red_class]) !{the_date}
											td
											td
											td
									each away in day.parishcal.away
										+week_away(away, the_date)
										- the_date = '';
									each todo in day.parishcal.todo
										+week_todo(todo, the_date)
										- the_date = '';
									each keep_in_mind in day.parishcal.keep_in_mind
										+week_keep_in_mind(keep_in_mind, the_date)
										- the_date = '';
									each vu in day.parishcal.vehicle_use
										+week_vehicle_use(vu, the_date)
										- the_date = '';
									each event in day.parishcal.events.today
										+week_event(event, the_date)
										- the_date = '';
									if(day.parishcal.tomorrow)
										tr
											td  
											td  
											td  
											td  
										- celebration_printed = true;
										- var red_class_tomorrow = day.parishcal.tomorrow.decoration_hint_red ? "litpanel_red" : "";
										- var celebration_class_tomorrow = "";
										- if(day.parishcal.tomorrow.decoration_hint == 2) celebration_class_tomorrow = "week_celebration_stage2";
										- if(day.parishcal.tomorrow.decoration_hint == 1) celebration_class_tomorrow = "week_celebration_stage1";
										tr
											td
											td
											td
											td 
												span(class=["week_celebration", celebration_class_tomorrow, red_class_tomorrow]) #{day.parishcal.tomorrow.celebration}
												if day.parishcal.tomorrow.celebration_add != ""
													br
													span(class="litpanel_celebration_add") !{day.parishcal.tomorrow.celebration_add}
												if day.parishcal.tomorrow.infos != ""
													br
													span(class="litpanel_infos") !{day.parishcal.tomorrow.infos}
										- var the_date = day.date.weekday_short + ", " + day.date.day + ". " + day.date.month_short + " " + day.date.year;
										each event in day.parishcal.events.tomorrow
											+week_event(event, the_date)
											- the_date = "";
									else
										- celebration_printed = false;
										tr
											td  
											td  
											td  
											td  
								
								
						else
							#week_complete_parent
								+week_complete_mobile(days)
							
script.
	var sockets;
	
	$(document).ready(function() {
		console.log('NOW CONNECTING');
		sockets = io.connect();
		
		sockets.on('week_goto_result',function(data){
			console.log('week_goto_result');
			console.log(data);
			if(data.result === "OK") {
				var html = $(data.html);
				console.log(html);
				history.replaceState(null, document.title, "/week/" + data.basedate + "?back=false");
				console.log("X");
				$("#weekcontrol_parent").html(html.filter("#control"));
				$("#week_complete_parent").html(html.filter("#week_complete"));
			}
			else {
				$("#weekcontrol_parent").html(data.html);
				$("#week_complete_parent").html("");
			}
		});
	});
									
	function week_goto(new_date) {
			console.log(new_date);
			sockets.emit('week_goto', {basedate : 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');
		week_goto($("#datepicker").datepicker('getFormattedDate'));
	});