include mixins

- var actual_background = "yellow";

mixin do_group(elem)
	.panel.panel-default.parishdbelemspane_elem.col-sm-12.col-xs-12.col-lg-6(id="#{elem.uid}", style="margin-bottom: 0px;", data-elemname="#{elem.name}", data-parishdb="", data-dn="#{elem.dn}", data-elemtype="group")
		.panel-heading.parishdb-group-heading(data-elem-uid="#{elem.uid}", onclick="select_elem('#{elem.uid}','');")
			h4.panel-title
				table(width="100%")
					tr
						td #{elem.name}
							p.parishdbelemspane_elem_kontext #{elem.kontext}
						td(align="right") 
							//- , onclick="var event = arguments[0] || window.event; event.stopPropagation(); $('#PANEL_#{elem.uid}').collapse('toggle');")
							a.parishdb-group-collapser(role="button", style="font-size: 10px; line-height: 1;", data-toggle="collapse", data-target="#PANEL_#{elem.uid}", aria-expanded="false", aria-controls="PANEL_#{elem.uid}")
								span(class="glyphicon glyphicon-chevron-down", aria-hidden="true")
								//- , onclick="$(this).find('.glyphicon').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');"
							//-button.btn.btn-xs.btn-primary(type="button", data-toggle="collapse", data-target="#PANEL_#{elem.uid}", aria-expanded="false", aria-controls="PANEL_#{elem.uid}", onclick="$(this).find('.glyphicon').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');")
								//- onclick="var event = arguments[0] || window.event; event.stopPropagation(); $('#PANEL_#{elem.uid}').collapse('toggle');"
								
		.panel-collapse.collapse.parishdb-group-collapse(id="PANEL_#{elem.uid}")
			.panel-body(style="padding: 5px;")
				each member in elem.members
					+do_groupmember(member, elem)
		
mixin do_person(elem)
	.panel.panel-default.parishdbelemspane_elem.col-sm-12.col-xs-12.col-lg-6(id="#{elem.uid}", style="margin-bottom: 0px; cursor: pointer;", data-elemname="#{elem.name}", data-parishdb="", data-dn="#{elem.dn}", data-elemtype="person")
		.panel-heading(onclick="select_elem('#{elem.uid}','');")
			h4.panel-title #{elem.name}
				p.parishdbelemspane_elem_kontext #{elem.kontext}
			
mixin do_groupmember(elem, group)
	.panel.panel-default(id="#{elem.uid}", style="cursor: pointer; margin-bottom: 0px;", data-elemname="#{elem.name}", data-dn="#{elem.person_dn}")
		.panel-heading(onclick="select_elem('#{elem.uid}', '#{group.uid}');")
			h4.panel-title #{elem.name}
				p.parishdbelemspane_elem_kontext #{elem.kontext}
				if elem.role !== ''
					p.parishdbelemspane_elem_role #{elem.role}

.subroot
	.new_flex_zero
		.container-fluid
			
			h4 Beteiligten aus der Pfarrdatenbank hinzufügen

			//- form(class="form-horizontal", id="form-filter")
			//- 	.form-group
			//- 		label(for='edit_filter', class="col-sm-1 col-xs-2 control-label") Filter
			//- 		.col-sm-11.col-xs-10
			//- 			input(id="edit_filter", type="text", class="form-control", oninput="adjust_visible_elems(this);")
			//- script.
			//- 	$("#form-filter").on('submit', function(e){
			//- 		console.log('FILTER SUBMIT');
			//- 		e.preventDefault();
			//- 	});
			//- 	// HINT: the 'autofocus'-attribute is obviously only interpreted once!!!
			//- 	$("#edit_filter").focus();
			
			form(class="form-horizontal", id="form-parishdbpersongroupselector")
				input(type="hidden", name="actual_elem_uid", id="actual_elem_uid")
				input(type="hidden", name="actual_elem_dn", id="actual_elem_dn")
				input(type="hidden", name="actual_elem_name", id="actual_elem_name")
				input(type="hidden", name="actual_elem_group", id="actual_elem_group")
				input(type="hidden", name="for_role", id="for_role", value="#{for_role}")
				button(class="btn btn-success btn-sm", type="submit", id="submit_button") 
					span(class="glyphicon glyphicon-ok", aria-hidden="true")
					span 
					span Übernehmen
				
				button(class="btn btn-warning btn-sm", type="button", onclick="history.back();") 
					span(class="glyphicon glyphicon-remove-circle", aria-hidden="true")
					span 
					span Abbrechen
					
				p.small(style="margin-top: 7px; margin-bottom: 0px; font-weight: bold;") Aktuell ausgewählt
				p(style="font-size: 100%; font-weight: bold; margin-bottom: 0px;")
					span#actual_name -
					.parishdbelemspane_elem_kontext#actual_kontext ()
				#errorpane
		
	.new_flex_one(style="padding-bottom: 200px;")
		.container-fluid
			.parishdbelemspane
				for elem in parishdb
					if elem.type === "person"
						+do_person(elem)
					if elem.type === "group"
						+do_group(elem)
	
	script.
		/*$('.parishdb-group-heading').on('click', function(event) {
			var target = $(event.target).closest(".parishdb-group-heading");
			select_elem(target.data('elem-uid'),'');
		});*/
		
		$('.parishdb-group-collapse').on('hide.bs.collapse', function (event) {
				$(event.target).closest('.panel').find('.glyphicon').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
			});
		$('.parishdb-group-collapse').on('show.bs.collapse', function (event) {
				$(event.target).closest('.panel').find('.glyphicon').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
			});
			
		$('a.parishdb-group-collapser').on('click', function(event) {
			$(event.target).closest('.panel').find('.panel-collapse').collapse('toggle');
			event.stopPropagation();
		});
			
		//show_submitbutton("submit-btn-pdbselector", "submit_pdbelem();",("#{actual_elem_dn}" === "" ? "disabled" : ""));
		pcal_pentry_edit_manager.show_searchbar("adjust_visible_elems(this);");
		
		if("#{actual_elem_id}" === "")
			$("#submit_button").prop('disabled', true);
		
		function select_elem(elem_uid, group_dn) {
			console.log("SELECTED: " + elem_uid);
			var actual_uid   = $("#actual_elem_uid").val();
						
			if(actual_uid === elem_uid) {
				console.log("NOTHIN CHANGED");
				return;
			}
			
			console.log(actual_uid);
			
			if(actual_uid !== '')
				$("#" + actual_uid).closest('.panel').removeClass('panel-success').addClass('panel-default');
			
			var new_panel = $("#" + elem_uid).closest('.panel');
			
			new_panel.removeClass('panel-default').addClass('panel-success');

			var actual_dn = new_panel.data('dn');
			var actual_name = new_panel.data("elemname");
					
			$("#actual_elem_uid").val(elem_uid);
			$("#actual_elem_dn").val(actual_dn);
			$("#actual_elem_name").val(actual_name);
			$("#actual_elem_group").val(group_dn);
			
			if(new_panel.data("elemtype")==="group") {
				var actual_kontext = $(new_panel.find('.parishdbelemspane_elem_kontext')[0]).text();
				actual_name = "G " + actual_name + "/" + actual_kontext;
				$("#actual_kontext").text('');
			}
			else {
				var actual_kontext = new_panel.find('.parishdbelemspane_elem_kontext').text();
				$("#actual_kontext").text(actual_kontext);
			}

			$("#actual_name").text(actual_name);

			$("#errorpane").empty();
			$("#submit_button").prop('disabled', false);
			//$("#submit_button").removeClass('disabled');
		}
		
		function set_visibility_according_to_filter(substrRegex, elems) {
			var actual_dn = $("#actual_elem_dn").val();
			var actual_group = $("#actual_elem_group").val();
			
			elems.each(function(index) {
				var txt = $(this).data('elemname');
				var dn = $(this).data('dn');
				
				var show = substrRegex.test(txt);
				if(show === false)
					show = substrRegex.test($(this).find('.parishdbelemspane_elem_kontext').text());
				
				if($(this).data('elemtype') === "group") {
					var childelems = $(this).find('[data-elemname]');
					childelems.each(function(index) {
						if(substrRegex.test($(this).data('elemname'))) {
							show = true;
							return false;
						}
					});
				}
			
				if(show) {
					$(this).show();
					if(actual_dn === dn || actual_group === dn) {
						$("#submit_button").prop('disabled', false);
						//$("#submit_button").removeClass('disabled');
						$("#errorpane").empty();
					}
				}
				else {	
					$(this).hide();
					if(actual_dn === dn || actual_group === dn) {
						$("#submit_button").prop('disabled', true);
						//$("#submit_button").addClass('disabled');
						$("#errorpane").html(get_compiled_message("danger", "Auswahl ungültig", "Durch die Filterangabe wurde Ihre Auswahl ungültig!"));
					}
				}
			});
		}
		
		function adjust_visible_elems(my_input) {
			console.log(my_input.value);
			
			// regex used to determine if a string contains the substring `q`
			substrRegex = new RegExp(my_input.value, 'i');
			
			set_visibility_according_to_filter(substrRegex, $("[data-parishdb]"));
		}
		
		function submit_pdbelem() {
			var data = {
				for_role: "#{for_role}",
				name 	: $("#actual_name").text(),
				id   	: "dn",
				dn		: $("#actual_elem_dn").val()
			};
			pcal_pentry_edit_manager.add_involved(data);
		}
		
		$("#form-parishdbpersongroupselector").on('submit', function(e) {
			submit_pdbelem();
			e.preventDefault();
		});