include mixins
include mixins_pentryedit

mixin location_list(the_locations)
	.col-sm-12(style="padding-right: 0px;")
		if the_locations.length === 0
			p Keine Orte ausgewählt.
		else
			table(class="table table-condensed", style="margin-bottom: 5px;")
				thead
					tr
						th 
							span(style="color: grey; font-size: 80%;") Name
						th
							span(style="color: grey; font-size: 80%;") Signum
						th
				tbody
					each loc in the_locations
						tr(id="#{loc.uid}", data-uid="#{loc.uid}")
							td(width="70%") #{loc.name}
							td(widht="20%") #{loc.sign}
							td(align="right", style="white-space: nowrap;")
								if loc.id === "other"
									span(	class="glyphicon glyphicon-edit"
											aria-hidden="true",
											style="color: blue; cursor: pointer;",
											onclick="save_and_goto('edit_location', {'location': '#{loc.uid}'});")
								span(	class="glyphicon glyphicon-trash", 
										aria-hidden="true", 
										style='color: red; padding-right: 10px; padding-left: 10px; cursor: pointer;'
										data-toggle="modal", data-target="#confirmDelete", data-delete-type="Ort", data-delete-name="#{loc.name}"
										)

- var parent_event_uuid = (is_thereafter ? parent_event.uuid : "");
- var parent_event_start = (is_thereafter ? event.parent_start : "");

form(class="form-horizontal subroot", role="form", id="form", method="POST", action="#{event_href}/commit")
	.new_flex_zero
		.container-fluid(style="margin-bottom: 20px;")
			input(type="hidden", name="pcalview", value="#{pcalview}")
			button(class="btn btn-success btn-sm", type="submit") 
				span(class="glyphicon glyphicon-ok", aria-hidden="true")
				span 
				span Übernehmen
			
			+messageview(messages.other)
				
	.new_flex_one
		.container-fluid

			if ! is_thereafter
				.form-group
					label(for='edit_kontext', class="col-sm-2 control-label") Kontext
					.col-sm-10
						.input-group
							input(id="edit_kontext_dn", type="hidden", name="punit_dn", value="#{event.punit.dn}")
							input(id="edit_kontext", type="text", name="punit_name", class="form-control", value="#{event.punit.name}", readonly)
							span(class="input-group-btn")
								button(class="btn btn-default", type="button", onclick="save_and_goto('select_pastoralunit', {})") Ändern
							
			.form-group
				label(for='edit_name', class="col-sm-2 control-label") Name
				.col-sm-10
					input(id='edit_name', type="text", class="form-control noEnterSubmit", name="edit_name", value="#{event.name}", required)
					.help-block.with-errors
												
			.form-group
				label(for='edit_name_secondary', class="col-sm-2 control-label") Zusatz zum Namen
				.col-sm-10
					input(id='edit_name_secondary', type="text", class="form-control noEnterSubmit", name="edit_name_secondary", value="#{event.name_secondary}")
					.help-block.with-errors
												
			.form-group
				label(for='combo_type', class="col-sm-2 control-label") Typ
				.col-sm-10
					select(id='combo_type', name="combo_type", class="form-control")
						option(value="gdx") Gottesdienst (außergewöhnlich)
						option(value="gd") Gottesdienst
						option(value="publx") Öffentlich (außergewöhnlich)
						option(value="publ") Öffentlich
						option(value="intern") Intern
						option(value="hidden") Verborgen
												
			script.
				$("#combo_type").val("#{event.visibility}")

			if ! is_thereafter
				.form-group
					label(for='edit_begin', class="col-sm-2 control-label") Beginn
					.col-sm-5
						input(id='edit_begin', type="text", class="form-control noEnterSubmit", name="edit_begin",
										pattern="([01][0-9]|2[0-3]):[0-5][0-9]", 
										data-error="Bitte geben Sie eine gültige Uhrzeit ein!", 
										data-when_end_then_start="bar", 
										data-when_end_then_start-error="Wenn Sie ein Ende angeben, müssen Sie auch einen Beginn angeben!", 
										value="#{event.start}")
						.help-block.with-errors
										
			- var disable_end = is_thereafter && parent_event.start == "";
			.form-group(style="margin-bottom: 5px;")
				label(for='edit_end', class="col-sm-2 control-label") Ende
				.col-sm-5
					input(id='edit_end', type="text", class="form-control noEnterSubmit", name="edit_end",
									pattern="(([01][0-9]|2[0-3]):[0-5][0-9])|(24:00)", 
									data-error="Bitte geben Sie eine gültige Uhrzeit ein!", 
									data-when_end_then_start="bar",
									data-when_end_then_start-error="Wenn Sie ein Ende angeben, müssen Sie auch einen Beginn angeben!",  
									data-end_after_start="bar", 
									data-end_after_start-error="Das Ende muss nach dem Beginn liegen!", 
									value="#{event.end}",
									disabled=disable_end)
					.help-block.with-errors
						if disable_end
							p Da das übergeordnete Ereignis keinen Beginn hat, können Sie hier kein Ende angeben!
									
			.form-group
				label(for='check_end_is_vague', class="col-sm-2 control-label", id="check_end_is_vague_label") Ende ist ungenau
				.col-sm-5.checkbox
					label
						input(id='check_end_is_vague', type="checkbox", name="check_end_is_vague", checked=event.end_is_vague, disabled=disable_end)

			script.
				if($('#edit_end').val().trim().length===0)
				{
					$('#check_end_is_vague').prop('disabled', true);
					$('#check_end_is_vague_label').css('color','grey');
				}
				
				$("#edit_end").on('keyup blur', function(){
					var disable_end_is_vague = (this.value.trim().length===0);
					$('#check_end_is_vague').prop('disabled', disable_end_is_vague);
					$('#check_end_is_vague_label').css('color', (disable_end_is_vague ? "grey" : "black"));
				});
			
			.row
				div(class="col-xs-12 col-sm-6", style="margin-bottom: 20px;")
					fieldset(id="locations")
						legend(style="font-size: 150%; margin-bottom: 10px;") 
							table(width="100%")
								tr
									td Orte
									td(align="right")
										+dropdown_button("Hinzufügen", "new_location", "right")
											+dropdown_button_element_href("Von Liste", "javascript: save_and_goto('add_predefined_location', {});")
											+dropdown_button_element_href("Manuell", "javascript: save_and_goto('add_location', {});")
						+location_list(event.locations)
					#messageview_locations
						if messages.locations.length > 0
							+messageview(messages.locations)
				fieldset(class="col-xs-12 col-sm-6", id="involved")
					legend(style="font-size: 150%;") Beteiligte
					
					div(class="col-sm-12", style="padding-right: 0px;")
						fieldset
							+involved_list_label("Allgemein", "font-size: 130%; margin-bottom: 5px;", "font-style: italic;", "")
							+involved_list(event.involved, "Allgemein", "")
						
						#messageview_involved_primary
							if messages.involved.primary.length > 0
								+messageview(messages.involved.primary)
							
					fieldset(class="col-sm-12", style="margin-top: 15px; padding-right: 0px;")
						legend(style="font-size: 130%; margin-bottom: 10px;")
							table(width="100%")
								tr
									td
										span(class=["glyphicon", "glyphicon-thumbs-up"], aria-hidden="true")
										span 
										span(style=style_headline) <i>Dienste</i>
									td(align="right")
										button(type="button", class="btn btn-default btn-xs", onclick="save_and_goto('add_role', {});")
											span(	class="glyphicon glyphicon-plus", aria-hidden="true")
											span 
											span Dienst hinzufügen
						
						if event.involved_roles.length === 0
							.col-sm-12
								p Keine Dienste angegeben
						else
							div
								each role in event.involved_roles
									div(class="col-sm-12", style="padding-right: 0px; margin-top: 5px;")
										fieldset(data-uid="#{role.uid}")
											+involved_list_label(role.name, "font-size: 120%; margin-bottom: 5px;", "font-weight: normal; font-style: italic;", role.uid)
											+involved_list(role.involved, role.name, role.uid)
										div(id="messageview_involved_" + role.uid)
											if messages.involved[role.uid] && messages.involved[role.uid].length > 0
												+messageview(messages.involved[role.uid])
			.row
				fieldset(class="col-sm-12", style="margin-top: 20px;")
					legend(style="font-size: 150%") Beschreibung
					textarea(class="form-control", rows="5", id="area_description", name="area_description").
						#{event.description}
			.row
				fieldset(class="col-sm-12", style="margin-top: 20px; padding-bottom: 200px;")
					legend(style="font-size: 150%") Anmerkungen
					textarea(class="form-control", rows="5", id="area_annotations", name="area_annotations").
						#{event.annotations}
	script.
		$('.noEnterSubmit').keypress(function(e){
			if ( e.which == 13 ) e.preventDefault();
		});
		
		$('#form').validator({ 
			custom: {
						end_after_start: function(el) 
						{ 
							var start = "";
							console.log(#{is_thereafter})
							if(#{is_thereafter})
								start = "#{parent_event_start}";
							else
								start =  $('#edit_begin').val();
							var end   = $('#edit_end').val();
							
							console.log(start);
							console.log(end);
							
							if(end.length === 0)
								return;
							
							if (Date.parse("2015-08-31T"+end) <= Date.parse("2015-08-31T"+start))
								return "Das Ende des Ereignisses muss nach dessen Beginn liegen!";
						},
						when_end_then_start: function(el)
						{
							if(#{is_thereafter})
								return;
							console.log("WHEN END THEN START");
							
							var start = $('#edit_begin').val().trim();
							var end   = $('#edit_end').val().trim();
							
							if(end.length > 0 && start.length===0)
								return "Wenn Sie ein Ende angeben, müssen Sie auch einen Beginn angeben!";
						}
					}
		}).on('invalid.bs.validator', function (e) {
			console.log("INVALID");
			console.log(e);
		}).on('valid.bs.validator', function (e) {
			console.log("VALID");
			console.log(e);
		});