- var formats_string = JSON.stringify(data.formats);
- var formats_volunteers_string = JSON.stringify(data.formats_volunteers)

include mixins
include mixins_birthdaycards

doctype html
html
	include header
	script(src="/javascripts/validator.min.js")
	script(src='/javascripts/pfiswebsocket.js')
	script(src='/templates/birthdaycards_personview.js')
	script(src='/templates/birthdaycards_volunteerslist.js')
	script(src='/templates/birthdaycards_volunteerspersonslist.js')
	script(src='/javascripts/runtime.js')
	style.
		.send_card { background-color: yellow; }
		.send_card_group { background-color: yellow; }
		.send_card_volunteer { background-color: yellow; }
		
		.textarea_in_flex_one {
			padding-bottom: 15px;
			margin-left: 15px;
			margin-right: 15px;
			height: 100%;
		}
		@media only screen and (max-width: 768px) {
			.textarea_in_flex_one {
				height: 400px;
			}
		}
			
	body
		#meldeweseninput.sidewideoverlay(style="z-index: 5;")
			.root
				.new_flex_zero
					+nav("PfarrInfoSystem", "meldeweseninput_menu")
					.container-fluid
						h1 Geburtstagskarten erstellen
							.small Adressen eingeben
						p Bitte kopieren Sie in das Textfeld unten alle Zeilen aus dem Meldewesen
						nav
							ul.pager
								li.previous
									span(onclick="$('#meldeweseninput').hide(); $('html, body').scrollTop(0);") Zurück
								li.next#button_proceed_meldeweseninput
									span(onclick="proceed_meldeweseninput();") Weiter
				div(style="flex: 1; display: flex;")
					.textarea_in_flex_one(style="flex: 1;")
						textarea#meldeweseninputpane(style="width: 100%; height: 100%; resize: none;", oninput="meldeweseninputpane_change();").
							!{data.meldeweseninput}

		#meldewesenproceeded.sidewideoverlay(style="z-index: 10;")
			.root
				.new_flex_zero
					+nav("PfarrInfoSystem", "meldewesenproceeded_menu")
					.container-fluid
						h1 Geburtstagskarten erstellen
							.small Daten überprüfen, Auskunfssperren bearbeiten
						p Bitte überprüfen Sie unten stehende Daten und wählen Sie aus, welche Personen mit Auskunfssperre auch eine Karte erhalten sollen
						nav
							ul.pager
								li.previous
									span(onclick="$('#meldeweseninput').show(); $('#meldewesenproceeded').hide(); $('html, body').scrollTop(0);") Zurück
								li.next
									span(onclick="generate_cards();") Karten erstellen
				.new_flex_one
					.container-fluid
						#meldewesenproceededpane
							
		#volunteergroupselector.sidewideoverlay(style="z-index: 5;")
			.root
				.new_flex_zero
					+nav("PfarrInfoSystem", "volunteergroupselector_menu")
					.container-fluid
						h1 Geburstagskarten erstellen
							.small Ehrenamtlichengruppen auswählen
						p Wählen Sie die Gruppen aus, die eine Karte bekommen sollen und bestimmen Sie, welche Personengruppen daraus eine Karte erhalten sollen
						nav
							ul.pager
								li.previous
									span(onclick="$('#volunteergroupselector').hide(); $('html, body').scrollTop(0);") Zurück
								li.next.disabled#button_volunteergroupsselected
									span(onclick="volunteergroupsselected();") Weiter
				.new_flex_one
					.container-fluid
						fieldset(style="margin-bottom: 20px;")
							legend(style="font-size: 120%; margin-bottom: 0px; color: orange;") Einstellungen
							div
								b  Monat
								span 
								.form-group
									.col-sm-2
										select(id='combo_month', class="form-control")
											option(value="1") Januar
											option(value="2") Februar
											option(value="3") März
											option(value="4") April
											option(value="5") Mai
											option(value="6") Juni
											option(value="7") Juli
											option(value="8") August
											option(value="9") September
											option(value="10") Oktober
											option(value="11") November
											option(value="12") Dezember
									.col-sm-1
										select(id="combo_year", class="form-control", style="min-width: 100px;")
											option(value="2015") 2015
											option(value="2016") 2016
											option(value="2017") 2017
											option(value="2018") 2018
											option(value="2019") 2019
								script.
									var d = new Date();
									var year = d.getFullYear();
									var month = d.getMonth()+2;
									if(month===13) {
										year++;
										month=1;
									}
									$("#combo_month").val(month);
									$("#combo_year").val(year);
							br
							div(style="margin-top: 7px;")
								label
									input(type="checkbox", id="cb_omitt_normal_birthdays", checked, style="vertical-align: sub;") 
									span Schließe Geburtstagskinder aus, die eine normale Karte bekommen (würden)
								br
								label
									input(type="checkbox", id="cb_select_persons", style="vertical-align: sub;") 
									span Wähle einzelne Personen aus
						#volunteergroupselector_groupslist
		#volunteerpersonsselector.sidewideoverlay(style="z-index: 10;")
			.root
				.new_flex_zero
					+nav("PfarrInfoSystem", "volunteerpersonsselector_menu")
					.container-fluid
						h1 Geburstagskarten erstellen
							.small Ehrenamtliche auswählen
						p Wählen Sie die Personen aus, die eine Karte bekommen sollen
						nav
							ul.pager
								li.previous
									span(onclick="$('#volunteerpersonsselector').hide(); $('html, body').scrollTop(0);") Zurück
								li.next.disabled#button_volunteerpersonsselected
									span(onclick="volunteerpersonsselected();") Weiter
				.new_flex_one
					.container-fluid
						#volunteerpersonsselector_volunteerslist
		
		#cardspanel.sidewideoverlay(style="z-index: 15;")
			.root
				.new_flex_zero
					+nav("PfarrInfoSystem", "cardpanel_menu")
					.container-fluid
						h1 Geburtstagskarten erstellen
							.small Karten herunterladen
						p#cardspanel_downloadhint(style="display: none;") Sie können nun die erstellten Karten herunterladen
						nav
							ul.pager
								li.previous
									span#cardspanel_backbutton Zurück
								li.next.disabled
									span Weiter
				.new_flex_one
					.container-fluid
						a#cardspanel_link_cards(href="/birthdaycards/#{taskuuid}/download/cards.pdf", target="_blank", style="margin-right: 15px; display: none;")
							img(src="/images/mail-read-32.png", style="margin-right: 2px;")
							span Karten
						a#cardspanel_link_envelopes(href="/birthdaycards/#{taskuuid}/download/envelopes.pdf", target="_blank", style="margin-right: 15px; display: none;;")
							img(src="/images/mail-unread-32.png", style="margin-right: 2px;")
							span Umschläge
						.alert.alert-warning#cardspanel_nopersonsselectedwarning(style="display: none;")
							strong Achtung
							span 
							span Es wurden keine Karten und Umschläge erstellt, weil keine Personen den Kriterien entsprachen!
					
		.modal.fade(id="proceedMeldewesenInputDialog", role="dialog", aria-labelledby="proceedMeldewesenInputDialogLabel", aria-hidden="true")
			.modal-dialog(role="document")
				.modal-content
					.modal-header
						h4(class="modal-title", id="proceedMeldewesenInputDialogLabel") Meldewesendaten verarbeiten
					.modal-body
						p(style="font-weight: bold; font-style: italic;") Bitte warten Sie, während die Daten aus dem Meldewesen verarbeitet werden ...
						
		.modal.fade(id="generateCardsDialog", role="dialog", aria-labelledby="generateCardsDialogLabel", aria-hidden="true")
			.modal-dialog(role="document")
				.modal-content
					.modal-header
						h4(class="modal-title", id="generateCardsDialogLabel") Geburtstagskarten und Kuverts erstellen
					.modal-body
						p(style="font-weight: bold; font-style: italic;") Bitte warten Sie, während Geburtstagskarten und Kuverts erstellt werden:
						
						p(style="font-weigth: bold") Geburtstagskarten ...
						.progress
							#progress_cards.progress-bar(role="progressbar", aria-valuenow="0", aria-valuemin="0", aria-valuemax="100", style="width: 0%;")
								
						p(style="font-weigth: bold") Umschläge ...
						.progress
							#progress_envelopes.progress-bar(role="progressbar", aria-valuenow="0", aria-valuemin="0", aria-valuemax="100", style="width: 0%;")

		.root

			.new_flex_zero
				+nav("PfarrInfoSystem", "mainmenu")
				.container-fluid
					h1 Geburtstagskarten erstellen
						.small Grundeinstellungen
					p Bitte wählen Sie Pfarrei, Adressatengruppe und Kartenformat aus
					nav
						ul.pager
							li.previous.disabled
								span Zurück
							li.next
								span(onclick="save_settings();") Weiter
			.new_flex_one
				.container-fluid
					+birthdaycards_settings(data.parishes, data.parishid, data.receivers, data.formats, data.formats_volunteers, data.formatid)
			
		script.
			var ws = new PfISWebSocket("#{sessionuuid}", "#{taskuuid}");
			ws.bind_standard_close_handler();
			
			var formats = !{formats_string};
			var formats_volunteers = !{formats_volunteers_string};
			
			function update_formats() {
				var optionSelected = $("#combo_receivers").prop('selectedIndex');
				
				$("#combo_format").empty();
				
				var the_formats = (optionSelected === 0 ? formats : formats_volunteers);
				
				for(idx = 0; idx < the_formats.length; ++idx) {
					var format = the_formats[idx];
					$("#combo_format").append($("<option></option>").text(format));
				}
			}
			
			function save_settings() {
				var selectedParish = $("#combo_parish").prop('selectedIndex');
				var selectedReceivers = $("#combo_receivers").prop('selectedIndex');
				var selectedFormat = $("#combo_format").prop('selectedIndex');
				
				ws.send('save_settings', {parishid: selectedParish, receivers: selectedReceivers, formatid: selectedFormat});
			}
			
			ws.bind('save_settings_result', function(data) {
				if(data.receivers === 0) {
					$("#meldeweseninput").show();
				}
				else {
					var html = birthdaycards_volunteerslist_template(data);
					$("#volunteergroupselector_groupslist").empty();
					$("#volunteergroupselector_groupslist").html(html);
					$("#volunteergroupselector").show();
					$("#volunteergroupselector_groupslist").parent().parent().scrollTop(0);
				}
					
				$('html, body').scrollTop(0);
			});
			
			function meldeweseninputpane_change() {
				if($("#meldeweseninputpane").val()==="")
					$("#button_proceed_meldeweseninput").addClass('disabled');
				else
					$("#button_proceed_meldeweseninput").removeClass('disabled');
			}
			meldeweseninputpane_change();
			
			function proceed_meldeweseninput() {
				if($("#button_proceed_meldeweseninput").hasClass("disabled"))
					return;
			
				//$('#proceedMeldewesenInputDialog').modal('show');
				$('#proceedMeldewesenInputDialog').modal({
					backdrop: 'static',
					keyboard: false
				});
				ws.send('proceed_meldeweseninput', {input: $("#meldeweseninputpane").val()});
			}
			
			ws.bind('proceed_meldeweseninput_result', function(data) {
				console.log(data);
				$('#proceedMeldewesenInputDialog').modal('hide');
				var html = birthdaycards_personview_template(data);
				$("#meldewesenproceededpane").empty();
				$("#meldewesenproceededpane").html(html);
				$("#meldewesenproceeded").show();
				$("#meldeweseninput").hide();
				$("#meldewesenproceededpane").parent().parent().scrollTop(0);
				$('html, body').scrollTop(0);
			});
			
			function prepare_generate_cards() {
				$("#cardspanel_link_cards").hide();
				$("#cardspanel_link_envelopes").hide();
				$("#cardspanel_downloadhint").hide();
				$("#cardspanel_nopersonsselectedwarning").hide();
				$("#cardspanel").show();
				$('html, body').scrollTop(0);
				
				$("#progress_envelopes").prop("aria-valuenow", 0);
				$("#progress_envelopes").css("width", "0%");
				$("#progress_envelopes").html("0%");
				//$("#generateCardsDialog").modal('show');
				$('#generateCardsDialog').modal({
					backdrop: 'static',
					keyboard: false
				});
			}
			
			function cardspanel_go_back_to_meldewesenproceeded() {
				$('#meldewesenproceeded').show(); 
				$('#cardspanel').hide(); 
				$('#meldewesenproceededpane').parent().parent().scrollTop(0); 
				$('html, body').scrollTop(0);
			}
			
			function cardspanel_go_back_to_volunteergroupselector() {
				$('#volunteergroupselector').show(); 
				$('#cardspanel').hide(); 
				$('#volunteergroupselector_groupslist').parent().parent().scrollTop(0); 
				$('html, body').scrollTop(0);
			}
			
			function cardspanel_go_back_to_volunteerpersonsselector() {
				$('#volunteerpersonsselector').show(); 
				$('#cardspanel').hide(); 
				$('#volunteerpersonsselector_volunteerslist').parent().parent().scrollTop(0); 
				$('html, body').scrollTop(0);
			}
			
			function generate_cards() {
				$("#meldewesenproceeded").hide();
				prepare_generate_cards();
			
				var send_cards_to_add = [];
				
				$(".send_card").each(function(index) {
					send_cards_to_add.push($(this).prop('id'));
				});
				
				console.log(send_cards_to_add);
				
				$("#cardspanel_backbutton").off('click');
				$("#cardspanel_backbutton").on('click', cardspanel_go_back_to_meldewesenproceeded);
				
				ws.send('generate_cards', {send_cards_to_add: send_cards_to_add});
			}
			
			function update_button_volunteergroupsselected() {
				if($(".send_card_group").length > 0)
					$("#button_volunteergroupsselected").removeClass("disabled");
				else 
					$("#button_volunteergroupsselected").addClass("disabled")
			}
			
			function volunteergroupsselected() {
				if($("#button_volunteergroupsselected").hasClass("disabled"))
					return;
			
				var send_cards_to = [];
				
				$(".send_card_group").each(function(index) {
					send_cards_to.push($(this).data('dn'));
				});
				console.log(send_cards_to);
			
				if($("#cb_select_persons").prop('checked'))
					ws.send('get_volunteers_for_selection', {volunteergroups: send_cards_to, month: $("#combo_month").val(), year: $("#combo_year").val(), omitt_normal_birthdays: $("#cb_omitt_normal_birthdays").prop('checked')});
				else {
					$("#volunteergroupselector").hide();
					prepare_generate_cards();
					
					$("#cardspanel_backbutton").off('click');
					$("#cardspanel_backbutton").on('click', cardspanel_go_back_to_volunteergroupselector);
					
					ws.send('generate_cards', {volunteergroups: send_cards_to, persons: [], month: $("#combo_month").val(), year: $("#combo_year").val(), omitt_normal_birthdays: $("#cb_omitt_normal_birthdays").prop('checked')});
				}
			}
			
			function update_button_volunteerpersonsselected() {
				if($(".send_card_volunteer").length > 0) {
					$("#button_volunteerpersonsselected").removeClass("disabled");
					$("#button_volunteerpersonsselected").prop("disabled", false);
				}
				else {
					$("#button_volunteerpersonsselected").addClass("disabled");
					$("#button_volunteerpersonsselected").prop("disabled", true);
				}
			}
			
			ws.bind('get_volunteers_for_selection_result', function(data) {
				var html = birthdaycards_volunteerspersonslist_template(data);
				$("#volunteerpersonsselector_volunteerslist").empty();
				$("#volunteerpersonsselector_volunteerslist").html(html);
				$("#volunteerpersonsselector").show();
				$("#volunteerpersonsselector_volunteerslist").parent().parent().scrollTop(0);
				
				$('html, body').scrollTop(0);
			})
			
			function volunteerpersonsselected() {
				if($("#button_volunteerpersonsselected").hasClass("disabled"))
					return;
			
				$("#volunteerpersonsselector").hide();
				prepare_generate_cards();
				
				$("#cardspanel_backbutton").off('click');
				$("#cardspanel_backbutton").on('click', cardspanel_go_back_to_volunteerpersonsselector);
				
				var persons = [];
				
				$(".send_card_volunteer").each(function(index) {
					persons.push($(this).data('dn'));
				});
				
				ws.send('generate_cards', {persons: persons});
			}
			
			ws.bind('generate_cards_progress', function(data) {
				console.log(data);
				var percent = Math.round(data.generated * 100 / data.total) ;
				console.log(percent);
				switch(data.step) {
					case 'cards':
						$("#progress_cards").prop("aria-valuenow", percent);
						$("#progress_cards").css("width", percent +"%");
						$("#progress_cards").html(percent +"%");
						break;
					case 'envelopes':
						$("#progress_envelopes").prop("aria-valuenow", percent);
						$("#progress_envelopes").css("width", percent +"%");
						$("#progress_envelopes").html(percent +"%");
						break;
				};
			});
			
			ws.bind('generate_cards_result', function(data) {
				console.log('generate_cards_result');
				$("#generateCardsDialog").modal('hide');
				if(data.number_of_cards > 0) {
					$("#cardspanel_downloadhint").show();
					$("#cardspanel_link_cards").show();
					$("#cardspanel_link_envelopes").show();
				}
				else
					$("#cardspanel_nopersonsselectedwarning").show();
			});