var projects_template = `

<style>
#map { height: 400px; }



	@keyframes blink-input {
	  0% {
	    background: transparent;
	  }
	  40% {
	    background: #f0962c;
	  }

		100% {
			background: transparent;
		}
	}

	.blink {
	  animation: blink-input 1.5s ease;

	}

</style>




	<div class="container-fluid">

		{{@if(it.projects_array == "" && coworker_projects_array == "")}}
			<p class="mb-4">Hier finden Sie alle Ihre Projekte. Filtern Sie nach Projektstatus und/oder nach Verantwortlicher. Der Filter wirkt sich auf die Projektliste und auf die Karte aus. Noch sind keine Projekte vorhanden.</p>
		{{#else}}
			<p class="mb-4">Hier finden Sie alle Ihre Projekte. Filtern Sie nach Projektstatus und/oder nach Verantwortlicher. Der Filter wirkt sich auf die Projektliste und auf die Karte aus.<br>
			<b>Hinweis:</b> Da archivierte Projekte keine Verantwortlichen haben, muss der Filter <i>"Verantwortlich"</i> auf <i>"alle"</i> gesetzt werden, um sie anzuzeigen.
			</p>
		{{/if}}



		<div class="row">

			<div  class="col-12 col-lg-8 order-1 order-lg-0" >

				<div class="row">

					<div id="no_projects" class="col-12 col-lg-8 mt-2 mb-4" style="display:none">
						<b>Keine Projekte!</b>
					</div>

				{{@if(it.projects_array != "")}}

					{{@each(it.projects_array) => val, index}}
						<div class="col-12 col-lg-6 col-xl-6 col-xxl-4 p-1 cardwrapper normalproject">
							<div class="card" style="height:100%;">
								<div style="width:100%;max-height:25rem;">
									<img class="card-img-top" src="/get_thumbnail?id={{val[0]}}" alt="Lade..." style="width:fit-content;max-width:100%;max-height:100%;padding: 8%;" loading="lazy">
								</div>
								<div class="card-body d-flex flex-column">

									<div class="d-flex flex-column" style="height:100%">

										<div class="mb-auto">
											<h4 class="card-title"><b>{{val[1]}} - {{val[0]}}</b></h4>
											<p class="card-text status">Status: {{val[2]}}</p>
										</div>

										<p class="card-text project_nr" style="display:none">{{val[0]}}</p>

										<p class="card-text plz" style="display:none">{{val[4]}}</p>
										<p class="card-text lat" style="display:none">{{val[5]}}</p>
										<p class="card-text long" style="display:none">{{val[6]}}</p>
										<p class="card-text full_adresss" style="display:none">{{val[7]}}</p>

											<p>Mitarbeiter:
												<span onclick="adjust_user_project('{{val[0]}}','{{@each( val[3] => valp, index3}}{{valp[1]}},{{/each}}');">
														<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
													  	<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"></path>
													  	<path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"></path>
													</svg>
												</span>
											</p>

											<ul>
												{{@each( val[3] => val2, index2}}
												<li>{{val2[0]}}</li>
												{{/each}}
											</ul>

										<div class="text-center mt-auto">
											<a href="#show_project:{{val[0]}}" class="btn btn-primary">Bearbeiten</a>
										</div>

									</div>


								</div>
							</div>
						</div>
					{{/each}}

				{{/if}}

				{{@if(it.coworker_projects_array != "")}}

					{{@each(it.coworker_projects_array) => val, index}}
					<div class="col-12 col-lg-6 col-xl-6 col-xxl-4 p-1 coworkerproject cardwrapper">
						<div class="card" style="height:100%">

							<div style="width:100%;max-height:25rem;">
								<img class="card-img-top" src="/get_thumbnail?id={{val[0]}}" alt="Lade..." style="width:fit-content;max-width:100%;max-height:100%;padding: 8%;" loading="lazy">
							</div>

							<div class="card-body d-flex flex-column">

								<div class="mt-auto">

									<h4 class="card-title"><b>{{val[1]}} - {{val[0]}}</b></h4>
									<p class="card-text status" >Status: {{val[2]}}</p>

									<p class="card-text project_nr" style="display:none">{{val[0]}}</p>

									<p class="card-text plz" style="display:none">{{val[4]}}</p>
									<p class="card-text lat" style="display:none">{{val[5]}}</p>
									<p class="card-text long" style="display:none">{{val[6]}}</p>
									<p class="card-text full_adresss" style="display:none">{{val[7]}}</p>

									<p>Mitarbeiter:
										<span onclick="adjust_user_project('{{val[0]}}','{{@each( val[3] => valp, index3}}{{valp[1]}},{{/each}}');">
											<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
											<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"></path>
											<path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"></path>
										</svg>
										</span>
									</p>

									<ul>
										{{@each( val[3] => val2, index2}}
										<li>{{val2[0]}}</li>
										{{/each}}
									</ul>
									<div class="text-center mt-auto">
										<a href="#show_project:{{val[0]}}" class="btn btn-primary disabled ">Bearbeiten</a>
									</div>

								</div>

							</div>
						</div>
					</div>
					{{/each}}

				{{/if}}



				{{@if(it.archivs_array != "")}}

					{{@each(it.archivs_array) => val, index}}
						<div class="col-12 col-lg-6 col-xl-6 col-xxl-4 p-1 archivproject cardwrapper">
							<div class="card" style="height:100%;">
								<div style="width:100%;max-height:25rem;">
									<img class="card-img-top" src="/get_thumbnail?id={{val[0]}}" alt="Lade..." style="width:fit-content;max-width:100%;max-height:100%;padding: 8%;" loading="lazy">
								</div>
								<div class="card-body d-flex flex-column">

									<div class="d-flex flex-column" style="height:100%">

										<div class="mb-auto">
											<h4 class="card-title"><b>{{val[1]}} - {{val[0]}}</b></h4>
											<p class="card-text status">Status: {{val[2]}}</p>
										</div>

										<p class="card-text project_nr" style="display:none">{{val[0]}}</p>

										<p class="card-text plz" style="display:none">{{val[4]}}</p>
										<p class="card-text lat" style="display:none">{{val[5]}}</p>
										<p class="card-text long" style="display:none">{{val[6]}}</p>
										<p class="card-text full_adresss" style="display:none">{{val[7]}}</p>

										<div class="text-center mt-auto">
												<a href="#show_archiv:{{val[0]}}" class="btn btn-primary">Öffnen</a>
										</div>

									</div>

								</div>
							</div>
						</div>
					{{/each}}

				{{/if}}


				</div>

			</div>

			<div class="col-12 col-lg-4 order-0 order-lg-1">

				<div id="filter_div">

					<div class="row">

						<div id="filter_status_div" class="col-12 col-md-4">
							<span>Status</span>

							<select id="filter_status" class="form-select" aria-label="Filter Status" onchange="update_filter();">
								<option value="" selected>Alle</option>
								<option value="In Bearbeitung">In Bearbeitung</option>
								<option value="Kundenrückmeldung ausstehend">Rückmeldung ausstehend</option>
								<option value="Warten auf Behörde">Warten auf Behörde</option>
								<option value="Abgeschlossen">Abgeschlossen</option>
								<option value="Archiviert">Archiviert</option>
							</select>
						</div>

						<div id="filter_plz_div" class="col-12 col-md-4">
							<span>Postleitzahl</span>
							<input type="text" id="filter_plz" class="form-control" aria-describedby="filter_plz" oninput="update_filter()">
						</div>


						<div id="filter_user_div" class="col-12 col-md-4">
							<span>Verantwortlich</span>
							<select id="filter_user" class="form-select" aria-label="Filter Besitzer" onchange="update_filter();">
								<option value="my" selected>Ich</option>
								<option value="other">Mitarbeiter</option>
								<option value="all">Alle</option>
							</select>
						</div>

					</div>

					<div class="row mt-3">
						<div class="col-12">
							<label for="search_text" class="form-label">Suche</label>
							<input type="text" id="search_text" class="form-control" aria-describedby="search_text" oninput="do_search()">
						</div>
					</div>

					<!--
					<div id="arch_info" class="row">
						<div class="col-12">
							<span style="font-size:0.8rem;">Hinweis: Archivierte Projekte habe keine Verantwortlichkeit, daher muss der Filter Verantwortlichkeit auf "alle" stehen, um diese anzuzeigen.</span>
						</div>
					</div>-->

					<div id="map" class="mt-2">

					</div>

				</div>

			</div>

		</div>
	</div>


<div id="all_user_tmpl" style="display:none">

	  <input class="search form-control mb-3" placeholder="Suchen..." />

		<p class="warn_userlist" style="display:none;">Mindestens ein Mitarbeiter muss angegeben werden!</p>

		<div style="max-height: 40vh;overflow-y: auto;overflow-x:hidden">
			<ul class="list-group list-group-light">
				{{@each(it.company_user_array) => valc, index3}}
					  <li class="list-group-item">
					    <input class="form-check-input me-1 usercheckbox" type="checkbox" value="{{valc.Mail}}" aria-label="{{valc.User}}" onchange="check_allowed()"/>
							 <span class="name">{{valc.User}}</span>
					  </li>
				{{/each}}
			</ul>
		</div>
</div>


<script>

var markers = null;
var map = null;

var search_func_timer = null;

var search_project_member_list = null;

function do_search( in_fast = false){
	var timer = 50;

	if( in_fast == true ){
		timer = 1;
	}

	if( search_func_timer != null){
		try {
			clearTimeout(search_func_timer)
		} catch (error) {}
	}
	search_func_timer = setTimeout( function(){

		$('#filter_user option[value="all"]').prop('selected', true)
		$('#filter_status option[value=""]').prop('selected', true)

		$('#filter_plz').val("");


		update_filter( false );


		var search_val = $("#search_text").val().toLowerCase();

		/* Slwo jquery Code
			$('.cardwrapper').each(function() {
				if($(this).is(":visible")) {
						var titel = $(this).find('.card-title').text().trim().toLowerCase();
						var mitarbeiter = $(this).find('ul').text().trim().toLowerCase();

						var full_address = $(this).find('.full_adresss').text().trim().toLowerCase();

						if( titel.includes(search_val) || mitarbeiter.includes(search_val) || full_address.includes(search_val)  ){
							$(this).show();
						}else{
							$(this).hide();
						}
				}
		});
		*/

		//Faster Vanilla Code

		var cardWrappers = document.querySelectorAll('.cardwrapper');
		cardWrappers.forEach(function(cardWrapper) {
		  if (cardWrapper.style.display !== 'none') {
		    var titleElement = cardWrapper.querySelector('.card-title');
		    var mitarbeiterElement = cardWrapper.querySelector('ul');
		    var addressElement = cardWrapper.querySelector('.full_adresss');
		    var titel = titleElement ? titleElement.textContent.trim().toLowerCase() : '';
		    var mitarbeiter = mitarbeiterElement ? mitarbeiterElement.textContent.trim().toLowerCase() : '';
		    var fullAddress = addressElement ? addressElement.textContent.trim().toLowerCase() : '';
		    if (titel.includes(search_val) || mitarbeiter.includes(search_val) || fullAddress.includes(search_val)) {
		      cardWrapper.style.display = '';
		    } else {
		      cardWrapper.style.display = 'none';
		    }
		  }
		});

		update_map();

	}, timer);

}

function update_filter(clear_search_field=true){

	if(clear_search_field == true){
		$("#search_text").val("");
	}

	target_status = $('#filter_status').val();

	if( target_status == "Archiviert"){
		$('#filter_user').val("all");
	}

	/*Slow jquery code:
	$('.cardwrapper').each(function() {
		var status = $(this).find('.status').text().trim();
		if (status.includes(target_status) == false) {
			$(this).hide();
		}else{
			$(this).show();
		}
	});
	*/
	//Fast Vanilla Code
	var cardWrappers = document.querySelectorAll('.cardwrapper');
	cardWrappers.forEach(function(cardWrapper) {
	  var statusElement = cardWrapper.querySelector('.status');
	  var status = statusElement ? statusElement.textContent.trim() : '';

	  if (!status.includes(target_status)) {
	    cardWrapper.style.display = 'none';
	  } else {
	    cardWrapper.style.display = 'block';
	  }
	});


	target_plz = $('#filter_plz').val();
	/*Slow jquery Code
	$('.cardwrapper').each(function() {
		var status = $(this).find('.plz').text().trim();
		if( status.startsWith(target_plz)==false) {
				$(this).hide();
		}
	});*/
	//Fast Vanilla JS code:
	var cardWrappers = document.querySelectorAll('.cardwrapper');
	cardWrappers.forEach(function(cardWrapper) {

	  var plzElement = cardWrapper.querySelector('.plz');
	  var plz = plzElement ? plzElement.textContent.trim() : '';

	  if (!plz.startsWith(target_plz)) {
	    cardWrapper.style.display = 'none';
	  }
	});


	target_user = $('#filter_user').val();

	/* Slow jquery
	$('.cardwrapper').each(function() {

			if( target_user == "my"){
				if( $(this).hasClass( "normalproject" ) == false){
					$(this).hide();
				}
			}

			if( target_user == "other" ){
				if( $(this).hasClass( "coworkerproject" ) == false){
					$(this).hide();
				}
			}
	});
	*/
	//Fast vanilla js
	//var cardWrappers = document.querySelectorAll('.cardwrapper');

	cardWrappers.forEach(function(cardWrapper) {

	  if (target_user === "my") {
	    if (!cardWrapper.classList.contains("normalproject")) {
	      cardWrapper.style.display = 'none';
	    }
	  }

	  if (target_user === "other") {
	    if (!cardWrapper.classList.contains("coworkerproject")) {
	      cardWrapper.style.display = 'none';
	    }
	  }
	});

	//Store search:

	var store_ob = {
	  status: target_status,
	  plz: target_plz,
	  user: target_user,
		search: $("#search_text").val().toLowerCase()
	};

 	store_string = JSON.stringify(store_ob);
	window.localStorage.setItem("project_search", store_string);

	update_map();
}

function update_map(){

    if( markers != null ){
        markers.clearLayers();
    }else{
			markers = L.layerGroup();
		}

		var bounds = new L.LatLngBounds();
		var marker_counter = 0;
		var projects_counter = 0;

		/*Slow jquery code:
		$('.card').each(function() {
		    if($(this).is(":visible")) {
		        var lat = $(this).find('.lat').text().trim();
		        var long = $(this).find('.long').text().trim();
		        var project_title = $(this).find('.card-title').text().trim();
						var project_nr = $(this).find('.project_nr').text().trim();

						var project_type = "project";

						if( $(this).parent().hasClass("archivproject") ){
							project_type = "archiv";
						}else if( $(this).parent().hasClass("coworkerproject")){
							project_type = "coworker";
						}

		        if (lat !== "" && long !== "" && lat !== "undefined" && long !== "undefined" && lat != 0 && long != 0 ) {
		            var latlng = new L.LatLng(lat, long);
		            bounds.extend(latlng);

		            var marker = new L.Marker([lat, long]);

								if( project_type == "project"){
		            	marker.bindPopup("<strong><a href='#show_project:" +  project_nr+ "'>" + project_title + "</a></strong>", {maxWidth: 500});
								}else if( project_type == "archiv"){
									marker.bindPopup("<strong><a href='#show_archiv:" +  project_nr+ "'>" + project_title + "</a></strong>", {maxWidth: 500});
								}else{
									marker.bindPopup("<strong>" + project_title + "</strong>", {maxWidth: 500});
								}

		            markers.addLayer(marker);
								marker_counter++;
		        }
						projects_counter++;
		    }
		});
		*/

		//Fast vanilla js code:

		var cards = document.querySelectorAll('.cardwrapper');
		cards.forEach(function(card) {

		  if (card.style.display != 'none') {

		    // Hole die Unterelemente
		    var latElement = card.querySelector('.lat');
		    var longElement = card.querySelector('.long');
		    var titleElement = card.querySelector('.card-title');
		    var nrElement = card.querySelector('.project_nr');

		    // Stelle sicher, dass die Elemente existieren, bevor du auf deren Eigenschaften zugreifst
		    var lat = latElement ? latElement.textContent.trim() : '';
		    var long = longElement ? longElement.textContent.trim() : '';
		    var project_title = titleElement ? titleElement.textContent.trim() : '';
		    var project_nr = nrElement ? nrElement.textContent.trim() : '';

		    var project_type = "project";

		    if(card.classList.contains("archivproject")) {
		      project_type = "archiv";
		    } else if(card.classList.contains("coworkerproject")) {
		      project_type = "coworker";
		    }

		    if (lat !== "" && long !== "" && lat !== "undefined" && long !== "undefined" && lat != 0 && long != 0) {
		      var latlng = new L.LatLng(lat, long);
		      bounds.extend(latlng);

		      var marker = new L.Marker([lat, long]);

		      if (project_type === "project") {
		        marker.bindPopup("<strong><a href='#show_project:" + project_nr + "'>" + project_title + "</a></strong>", { maxWidth: 500 });
		      } else if (project_type === "archiv") {
		        marker.bindPopup("<strong><a href='#show_archiv:" + project_nr + "'>" + project_title + "</a></strong>", { maxWidth: 500 });
		      } else {
		        marker.bindPopup("<strong>" + project_title + "</strong>", { maxWidth: 500 });
		      }

		      markers.addLayer(marker);
		      marker_counter++;
		    }

		    projects_counter++;
		  }
		});


		if( projects_counter == 0 ){
			$("#no_projects").show();
		}

		if( projects_counter != 0 ){
			$("#no_projects").hide();
		}

		if( marker_counter != 0){
			$("#map").show();
			if( map != 0){
				markers.addTo(map);
				map.fitBounds(bounds);
			}
		}

		if( marker_counter == 0){
			$("#map").hide();
		}

}

function check_allowed(){
	var is_ok = false;

	search_project_member_list.items.forEach(function(item) {
		 var checkbox = item.elm.querySelector('.usercheckbox');
		 if (checkbox && checkbox.checked) {
			 is_ok = true;
		 }
 	});

	if(is_ok == false){
			$(".save_userlist_btn").prop("disabled",true);
			$(".save_userlist_btn").hide();
			$(".warn_userlist").show();
	}else{
			$(".save_userlist_btn").prop("disabled",false);
			$(".save_userlist_btn").show();
			$(".warn_userlist").hide();
	}

}

function save_user_for_project(in_project_nr){

	//Reset the search
	search_project_member_list.search('');

	var result_user_array = [];
	$('#all_user_bootbox input:checked').each(function () {
				 result_user_array.push( $(this).val() );
	});

	$.ajax({
			url:"/update_project_user",
			type:"POST",
			async: false,
			contentType:"application/json",
			dataType:"json",
			data: JSON.stringify( {number: in_project_nr, user: result_user_array} ) ,
		});
}

function adjust_user_project( in_nr , in_select_user ){

		$(".warn_userlist").hide();
		$(".save_userlist_btn").html('Speichern');

		in_select_user = in_select_user.replace(/,*$/, '');

		setTimeout(function(){
			in_select_user_array = in_select_user.split(",");
			for (var i = 0; i < in_select_user_array.length; i++) {
					$(":checkbox[value='" +in_select_user_array[i] + "']").prop("checked","true");
			}

			var options = {
				valueNames: [ 'name' ], // Suchen nach dem Text in den <li>-Elementen mit der Klasse 'name'
				listClass: 'list-group' // Die Klasse deiner <ul>-Liste
			};

			if( search_project_member_list != null ){
				search_project_member_list = null;
			}

			search_project_member_list = new List('all_user_bootbox', options);

		},250);

		bootbox.dialog({
			title: 'Mitarbeiter im Projekt: ' + in_nr ,
			message: "<div id='all_user_bootbox' >" + $("#all_user_tmpl").html() + "</div>",
			size: 'large',
			buttons: {
				cancel: {
					label: "Abbrechen",
					className: 'btn-secondary',
					callback: function(){return true;}
				},
				confirm: {
							label: 'Speichern',
							className: 'btn-primary save_userlist_btn',
							callback: function(){
								setTimeout(function(){
									save_user_for_project(in_nr)
									location.reload();
								},100);
								$(".save_userlist_btn").html('Speichern &nbsp;<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
								return false;
							}
					},
		}});
}

function load_map(){

		if(typeof L  !== "undefined"){

		map = L.map('map',{
			fullscreenControl: true,
			attributionControl: false
		}).setView([0,0], 5);

		L.Marker.prototype.options.icon = L.icon({iconUrl: "/img/marker.png",});

		const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
				maxZoom: 19,
				attribution: ''
			}).addTo(map);


			update_map();
		}
		else{
				setTimeout(load_map,100);
		}
}

load_map();

//Store seach/filter
var stored_project_search = window.localStorage.getItem("project_search");
if(stored_project_search) {



  var stored_project_search_object = JSON.parse(stored_project_search);

	$('#filter_status').val( stored_project_search_object.status );
	$('#filter_user').val( stored_project_search_object.user );
	$('#filter_plz').val( stored_project_search_object.plz );

	if( stored_project_search_object.search != "" ){
		$("#search_text").val( stored_project_search_object.search );
		do_search( true );
		$("#search_text").addClass("blink");
		setTimeout(function(){$("#search_text").removeClass("blink");}, 1500);
	}

	if( stored_project_search_object.plz != ""){
		$("#filter_plz").addClass("blink");
		setTimeout(function(){$("#filter_plz").removeClass("blink");}, 1500);
	}

	if( stored_project_search_object.status != ""){
		$("#filter_status").addClass("blink");
		setTimeout(function(){$("#filter_status").removeClass("blink");}, 1500);
	}

	if( stored_project_search_object.user != "my" && stored_project_search_object.search == "" ){
		$("#filter_user").addClass("blink");
		setTimeout(function(){$("#filter_user").removeClass("blink");}, 1500);
	}

}

update_filter(false);


</script>
`;