include mixins

mixin do_location(location)
	- var my_class;
	- actual_location_id === location.id ? my_class = "panel-success" : my_class="panel-default";
	.panel(class=my_class, id=location.id, data-locationname=location.name, data-locationsign=location.sign, data-location="")
		.panel-heading(onclick="select_location('#{location.id}');")
			h4.panel-title
				table(width="100%")
					tr
						td(style="width: 80%;")
							span(style=style_text) #{location.name}
						td
							span(style=style_text) #{location.sign}

mixin do_city(city)
	- var my_uid = generateUID();
	.panel.panel-primary.panel_group_and_unit(id=my_uid, data-elemname=city.name, data-parishdb="", data-elemtype="city")
		.panel-heading
			h4.panel-title(data-toggle="collapse", data-target="#PANEL_"+my_uid, aria-expanded="false", aria-controls="PANEL_"+my_uid) #{city.name}
			//-  border-bottom: 2px solid #{elem.color};
		.panel-collapse.collapse(id="PANEL_"+my_uid)
			.panel-body(style="padding: 10px; "+my_border_top_color)
				each location in city.locations
					+do_location(location)


mixin do_unit(unit)
	- var my_uid = generateUID();
	- var my_border_color = unit.is_pastoral ? "border-color: "+ unit.color +"; " : "";
	- var my_background_image = unit.is_pastoral ? "background-image: linear-gradient(to bottom,"+unit.color+" 50%, #ffffff 100%); border-color: #ffffff; background-color: #ffffff; border-top-left-radius: 0px; border-top-right-radius: 0px;" : "";
	- var my_border_top_color = unit.is_pastoral ? "border-top-color: #ffffff;" : "";
	- var in_class = unit.subunits.length > 0 ? "in" : "";
	.panel.panel-default.panel_group_and_unit(id=my_uid, data-elemname=unit.name, data-parishdb="", data-dn=unit.dn, data-elemtype="unit", data-depth=unit.depth, style=my_border_color )
		.panel-heading(style=my_background_image)
			h4.panel-title(data-toggle="collapse", data-target="#PANEL_"+my_uid, aria-expanded="false", aria-controls="PANEL_"+my_uid) #{unit.name}
			//-  border-bottom: 2px solid #{elem.color};
		.panel-collapse.collapse(class=in_class, id="PANEL_"+my_uid)
			.panel-body(style="padding: 10px; "+my_border_top_color)
				if unit.cities.length > 0
					//- ul(class="list-group", style="margin-left: 12px; margin-bottom: 0px;")
					//- each location in unit.locations
					//-	+do_location(location)
					each city in unit.cities
						+do_city(city)
				if unit.subunits.length > 0
					//- ul(class="list-group", style="margin-left: 12px; margin-bottom: 0px;")
					each sub in unit.subunits
						+do_unit(sub)

.subroot
	.new_flex_zero(style="margin-bottom: 20px;")
		.container-fluid
			h4 Ort aus der Liste hinzufügen
			
			script.
				function set_visibility_according_to_filter(substrRegex, elems) {
				
					var units_are_shown = false;
				
					if(!units_are_shown) {
						$("[data-elemtype='unit'],[data-elemtype='city']").each(function(index) {
							var panel_id = "#PANEL_" + $(this).prop('id');
							$(panel_id).collapse('show');
						});
						console.log('SHOW ALL UNITS');
						units_are_shown = true;
					}
				
					var actual_id = $("#actual_location_id").val();
		
					elems.each(function(index) {
						my_panel = $(this);
						var txt = my_panel.data("locationname");
						var id =  my_panel.prop('id');
						
						if(substrRegex.test(txt)) {
							my_panel.show();
							if(actual_id === id) {
								$("#submit_button").prop('disabled', false);
								$("#errorpane").empty();
							}
						}
						else {	
							my_panel.hide();
							if(actual_id === id) {
								$("#submit_button").prop('disabled', true);
								$("#errorpane").html(get_compiled_message("danger", "Auswahl ungültig", "Durch die Filterangabe wurde Ihre Auswahl ungültig!"));
							}
						}
					});
				}
				
				function adjust_visible_locations(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-location]"));
				}

			form(class="form-horizontal" method="POST", action="#{pentry_edit_base}/add_predefined_location", id="form-locationselector")
				input(type="hidden", name="actual_location_id", id="actual_location_id", value="#{actual_location_id}")
				input(type="hidden", name="actual_location_name", id="actual_location_name", value="#{actual_location_name}")
				input(type="hidden", name="actual_location_sign", id="actual_location_sign", value="#{actual_location_sign}")
				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 -
				#errorpane

	.new_flex_one(style="padding-bottom: 200px;")
		.container-fluid
			//- ul(class="list-group")
			for unit in units
				+do_unit(unit)
		
		script.
			pcal_pentry_edit_manager.show_searchbar("adjust_visible_locations(this);");
			
			if("#{actual_location_id}" === "")
				$("#submit_button").prop('disabled', true);
										
			select_location = function(location_id)
			{
				console.log("SELECTED: " + location_id)
				actual_id = $("#actual_location_id").val();
				if(actual_id === location_id)
				{
					console.log("NOTHIN CHANGED");
					return;
				}
				
				if(actual_id !== '')
					$("#" + actual_id).closest('.panel').removeClass('panel-success').addClass('panel-default');
				
				var new_panel = $("#" + location_id).closest('.panel');
				
				new_panel.removeClass('panel-default').addClass('panel-success');
				
				$("#actual_location_id").val(location_id);
				var locname = $("#"+location_id).data("locationname");
				var locsign = $("#"+location_id).data("locationsign");
				$("#actual_location_name").val(locname);
				$("#actual_location_sign").val(locsign);
				
				if(locsign != "")
					locname = locname + " (" + locsign + ")";
				
				$("#actual_name").text(locname);
			
				$("#errorpane").empty();
				$("#submit_button").prop('disabled', false);
			}
			
			$("#form-locationselector").on('submit', function(e) {
				var data = {
					name : $("#actual_location_name").val(),
					sign : $("#actual_location_sign").val(),
					id   : $("#actual_location_id").val()
				};
				pcal_pentry_edit_manager.add_location(data);
				
				e.preventDefault();
			});
