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' )
	link(href="/stylesheets/style_week.css", rel="stylesheet")

	body
		
		.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

		.root

			.new_flex_zero
				//- +nav_main("PfarrInfoSystem", "dropdown_menu")
				//-	+nav_main_collapse()
				//-		+nav_item( "/day/" + basedate ) Tag
				//-		+nav_item( "/timeline/" + basedate ) TagZeitleiste
				//-		+nav_item( "#", "active" ) Woche
				//-	+nav_main_dropdown_right("Extras")
				//-		+nav_item( "/parishdb" ) Pfarrdatenbank
				//-		+nav_divider()
				//-		+nav_item( "/week/" + basedate + "/select_punits_for_view" ) Angezeigte Orte konfigurieren
				//-		+nav_divider()
				//-		+nav_item( "/info" ) Info
				+nav_main_primary("week", basedate)
			
			#dataparent.subroot
				.new_flex_zero(style="margin-bottom: 15px;")
					.container-fluid
						+weekcontrol(basedate, interval, last_week, next_week)
							+messageview(messages)

				.new_flex_one
					.container-fluid
						- var is_desktop = false;
						if(is_desktop)
							+week_complete_desktop(days)
						else
							+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");
				
				var day_elem = $('.navbar-collapse > ul > li:nth(0) > a');
				day_elem.prop('href', '/day/' + data.basedate);
				var timeline_elem = $('.navbar-collapse > ul > li:nth(1) > a');
				timeline_elem.prop('href', '/timeline/' + data.basedate);
				
				var select_for_view_elem = $('#select_punits_for_view').closest('a');
				select_for_view_elem.prop("href", "/week/"+data.basedate+"/select_punits_for_view");
				var parishcalA4week_elem = $('#parishcalA4week').closest('a');
				parishcalA4week_elem.prop("href", "/parishcalA4week/" + data.basedate);
				
				$("#dataparent").html(data.html);
			}
			else {
				$('#dataparent').html("<div class='new_flex_one' style=' padding-left: 15px; padding-right: 15px;'>"+data.html+"</div>");
			}
		});
	});
									
	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'));
	});