var projects_template = `

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

</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.</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">
							<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 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 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}}

				</div>

			</div>

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

				<div id="filter_div">

					<div class="row">

						<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>
							</select>
						</div>

						<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 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="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(){

	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();

		$('.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();
						}
				}
		});

		update_map();
	},150);

}

function update_filter(clear_search_field=true){

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

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

	$('.cardwrapper').each(function() {
			if( target_user == "my"){
				if( $(this).hasClass( "coworkerproject" )) {
					$(this).hide();
				}else{
					$(this).show();
				}

			}else if( target_user == "all" ){
				$(this).show();
			}else{
				if( $(this).hasClass( "coworkerproject" )) {
					$(this).show();
				}else{
					$(this).hide();
				}
			}
	});

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

	$('.cardwrapper').each(function() {
		var status = $(this).find('.status').text().trim();
		if (status.includes(target_status) == false) {
			$(this).hide();
		}
	});

	target_plz = $('#filter_plz').val();
	$('.cardwrapper').each(function() {
		var status = $(this).find('.plz').text().trim();
		if( status.startsWith(target_plz)==false) {
				$(this).hide();
		}
	});

	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;
		$('.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();

		        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]);
		            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').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();
update_filter();

</script>
`;