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

include mixins
include mixins_labelprinter

doctype html
html
	include header
	script(src="/javascripts/validator.min.js")
	script(src='/javascripts/pfiswebsocket.js')
	script(src='/templates/labelprinter_nothandledlines.js')
	script(src='/javascripts/runtime.js')
	style.
		
		.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 Etiketten 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 Etiketten erstellen
							.small Daten überprüfen
						p Bitte überprüfen Sie unten stehende Daten - dass keine Zeile übersprungen wurde, die nicht hätte übersprungen werden dürfen
						nav
							ul.pager
								li.previous
									span(onclick="$('#meldeweseninput').show(); $('#meldewesenproceeded').hide(); $('html, body').scrollTop(0);") Zurück
								li.next
									span(onclick="generate_labels();") Etiketten erstellen
				.new_flex_one
					.container-fluid
						#meldewesenproceededpane
		
		#labelspanel.sidewideoverlay(style="z-index: 15;")
			.root
				.new_flex_zero
					+nav("PfarrInfoSystem", "cardpanel_menu")
					.container-fluid
						h1 Etiketten erstellen
							.small Etiketten herunterladen
						p#labelspanel_downloadhint(style="display: none;") Sie können nun die erstellten Etiketten herunterladen
						nav
							ul.pager
								li.previous
									span#labelspanel_backbutton Zurück
								li.next.disabled
									span Weiter
				.new_flex_one
					.container-fluid
						a#labelspanel_link_labels(href="/labelprinter/#{taskuuid}/download/labels.pdf", target="_blank", style="margin-right: 15px; display: none;")
							img(src="/images/mail-read-32.png", style="margin-right: 2px;")
							span Etiketten
						a#labelspanel_link_postmen(href="/labelprinter/#{taskuuid}/download/postmen.html", target="_blank", style="margin-right: 15px; display: none;")
							img(src="/images/mail-unread-32.png", style="margin-right: 2px;")
							span Austräger-zu-ID-Tabelle
					
		.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="generateLabelsDialog", role="dialog", aria-labelledby="generateLabelsDialogLabel", aria-hidden="true")
			.modal-dialog(role="document")
				.modal-content
					.modal-header
						h4(class="modal-title", id="generateLabelsDialogLabel") Etiketten erstellen
					.modal-body
						p(style="font-weight: bold; font-style: italic;") Bitte warten Sie, während die Etiketten erstellt werden:
						
						p(style="font-weigth: bold") Etiketten ...
						.progress
							#progress_labels.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 Etiketten erstellen
						.small Grundeinstellungen
					p Bitte wählen Sie Pfarrei, Etiketten-Format und weitere Einstellungen
					nav
						ul.pager
							li.previous.disabled
								span Zurück
							li.next
								span(onclick="save_settings();") Weiter
			.new_flex_one
				.container-fluid
					+labelprinter_settings(data.parishes, data.parishid, data.formats, data.formatid, data.last_field_is_postman, data.generate_detailed_postmeninfo)
			
		script.
			var ws = new PfISWebSocket("#{sessionuuid}", "#{taskuuid}");
			ws.bind_standard_close_handler();
			
			var formats = !{formats_string};
			
			function save_settings() {
				var selectedParish = $("#combo_parish").prop('selectedIndex');
				var selectedFormat = $("#combo_format").prop('selectedIndex');
				var last_field_is_postman = $("#check_last_field_is_postman").prop('checked');
				var generate_detailed_postmeninfo = $('#check_generate_detailed_postmeninfo').prop('checked');
				
				ws.send('save_settings', {parishid: selectedParish, formatid: selectedFormat, last_field_is_postman: last_field_is_postman, generate_detailed_postmeninfo: generate_detailed_postmeninfo});
			}
			
			ws.bind('save_settings_result', function(data) {
				if(data.result === "ERROR") {
					alert(data.message);
					return;
				}
				
				$("#meldeweseninput").show();
					
				$('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({
					backdrop: 'static',
					keyboard: false
				});
				ws.send('proceed_meldeweseninput', {input: $("#meldeweseninputpane").val()});
			}
			
			ws.bind('proceed_meldeweseninput_result', function(data) {
				console.log(data);
				$('#proceedMeldewesenInputDialog').modal('hide');
				
				if(data.result === "ERROR") {
					alert(data.message);
					return;
				}
				
				var html = labelprinter_nothandledlines_template(data);
				$("#meldewesenproceededpane").empty();
				$("#meldewesenproceededpane").html(html);
				$("#meldewesenproceeded").show();
				$("#meldeweseninput").hide();
				$("#meldewesenproceededpane").parent().parent().scrollTop(0);
				$('html, body').scrollTop(0);
			});
			
			function labelspanel_go_back_to_meldewesenproceeded() {
				$('#meldewesenproceeded').show(); 
				$('#labelspanel').hide(); 
				$('#meldewesenproceededpane').parent().parent().scrollTop(0); 
				$('html, body').scrollTop(0);
			}

			function generate_labels() {
				$("#meldewesenproceeded").hide();
				
				$("#labelspanel_link_labels").hide();
				$("#labelspanel_link_postmen").hide();
				$("#labelspanel_downloadhint").hide();
				
				$("#labelspanel").show();
				$('html, body').scrollTop(0);
				
				$("#progress_labels").prop("aria-valuenow", 0);
				$("#progress_labels").css("width", "0%");
				$("#progress_labels").html("0%");

				$('#generateLabelsDialog').modal({
					backdrop: 'static',
					keyboard: false
				});

				$("#labelspanel_backbutton").off('click');
				$("#labelspanel_backbutton").on('click', labelspanel_go_back_to_meldewesenproceeded);
				
				ws.send('generate_labels', {});
			}
			
			ws.bind('generate_labels_progress', function(data) {
				console.log(data);
				var percent = Math.round(data.generated * 100 / data.total) ;
				console.log(percent);
				$("#progress_labels").prop("aria-valuenow", percent);
				$("#progress_labels").css("width", percent +"%");
				$("#progress_labels").html(percent +"%");
			});
			
			ws.bind('generate_labels_result', function(data) {
				console.log('generate_labels_result');
				$("#generateLabelsDialog").modal('hide');
				
				if(data.result === "ERROR") {
					alert(data.message);
					return;
				}

				$("#labelspanel_downloadhint").show();
				$("#labelspanel_link_labels").show();
				if(data.have_postmeninfo)
					$("#labelspanel_link_postmen").show();
				else
					$("#labelspanel_link_postmen").hide();
			});