var order_template = `

<style>

		.FIE_topbar-close-button{
			display: none !important;
		}

		.uppy-DashboardContent-panelBody{
			display: block;
		}

		#summary p{
			margin-bottom:0.5rem;
		}

		.toolbar-bottom{
			float: left;
		}
		.nav a[href$='#step-1']{
			border-top-right-radius: 0 !important;
			border-bottom-right-radius: 0 !important;
		}

		.nav a[href$='#step-2']{
			border-radius:0 !important;
		}

		.nav a[href$='#step-3']{
			border-top-left-radius: 0 !important;
			border-bottom-left-radius: 0 !important;
		}

		.nav .nav-link{
			margin: 0 !important;
		}

		@media only screen and (max-width: 640px) {
		 .nav a[href$='#step-1']{border-radius: 10em !important;}
		 .nav a[href$='#step-2']{border-radius: 10em !important;}
		 .nav a[href$='#step-3']{border-radius: 10em !important;}
		}


		.uppy-DashboardContent-panelBody{
			display: block;
		}

		#summary p{
			margin-bottom:0.5rem;
		}

		.toolbar-bottom{
			text-align: left !important;
		}

		#go_back_btn{
			border-color: #6c757d !important;
			background-color: #6c757d !important;
		}
		.sw-btn-prev{
			border-color: #6c757d !important;
			background-color: #6c757d !important;
		}

		.card {
		     flex: 0 0 auto;
		     margin: 2rem; /* Creates space around the cards */
		     max-width: calc(100%); /* Subtracts the margin from the width */
				width: 100%;
		}
		@media (min-width: 768px) {
		    .card {
		        max-width: calc(50% - 4rem); /* Subtracts the margin from the width */
		     }
		}

</style>

	<div class="container-fluid">
		<div class="row">


			<div id="smartwizard" class="mt-4" style="border:none; padding:0 !important;">

				<ul class="nav">
					<li class="nav-item">
						<a class="nav-link" href="#step-1">
							Projektdaten
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#step-2">
							Leistungen
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#step-3">
							Zusammenfassung
						</a>
					</li>
				</ul>


				<div class="tab-content">

					<div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">

						<div id="sub_1" style="display:block;">

							<div class="mb-3">
								<h4><b>Ansprechpartner für das Projekt</b></h4>
								<label for="ansprechpartner" class="form-label mt-2">Ansprechpartner</label>
								<input type="text" class="form-control" id="ansprechpartner">

								<a href="#details" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="details">Details zum Ansprechpartner</a>

								<div id="details" class="collapse">
									<div class="card card-body" style="margin:0">
										<div class="mb-3">
											<label for="ansprechpartner_mail" class="form-label">Email</label>
											<input type="text" class="form-control" id="ansprechpartner_mail">
										</div>
										<div class="mb-3">
											<label for="ansprechpartner_adress" class="form-label">Adresse</label>
											<input type="text" class="form-control" id="ansprechpartner_adress">
										</div>
										<div class="mb-3">
											<label for="ansprechpartner_plz" class="form-label">Postleitzahl</label>
											<input type="text" class="form-control" id="ansprechpartner_plz">
										</div>
										<div class="mb-3">
											<label for="ansprechpartner_ort" class="form-label">Ort</label>
											<input type="text" class="form-control" id="ansprechpartner_ort">
										</div>
									</div>
								</div>

							</div>

							<div class="mb-3">
								<label for="bestellnummer" class="form-label">Ihre Bestellnummer</label>
								<input type="text" class="form-control" id="bestellnummer" aria-describedby="emailHelp">
							</div>

							<hr>

							<h4><b>Projekt</b></h4>

							<div class="row mb-3">
								<div class="col-12 col-sm-6">
									<label for="Projektname" class="form-label">Projektname</label>
									<input type="text" class="form-control" id="Projektname">
								</div>
								<div class="col-12 col-sm-6">
									<label for="Projektnummer" class="form-label">Projektnummer</label>
									<input type="text" class="form-control" id="Projektnummer" >
								</div>
							</div>

							<div class="mb-3">
								<label for="Adresseobj" class="form-label">Adresse des Objektes</label>
								<input type="text" class="form-control" id="Adresseobj" >
							</div>

							<div class="row">
								<div class="col-6">
									<label for="Postleitzahl" class="form-label">Postleitzahl</label>
									<input type="text" class="form-control" id="Postleitzahl">
								</div>
								<div class="col-6">
									<label for="ort" class="form-label">Ort</label>
									<input type="text" class="form-control" id="ort">
								</div>
							</div>

							<div class="d-flex align-items-center justify-content-center mt-5">
								<span style="color:white;background:#f0962c;border-radius:0.7em" class="p-2 m-2" >&nbsp;1&nbsp;</span>
								<span style="color:white;background:#6c757d;border-radius:0.7em" class="p-2 m-2" >&nbsp;2&nbsp;</span>
								<span style="color:white;background:#6c757d;border-radius:0.7em" class="p-2 m-2" >&nbsp;3&nbsp;</span>
							</div>

						</div>


						<div id="sub_2" style="display:none;">

							<h4><b>Lieferadresse</b></h4>

							<div class="row mb-3">
								<div class="col-12">
									<label for="Lieferadresse_Empf" class="form-label">Empfänger</label>
									<input type="text" class="form-control" id="Lieferadresse_Empf" value="{{it.Shipping_attention}}"  name="Shipping_attention" onchange="update_field(this);" autocomplete="off">
								</div>
							</div>

							<div class="mb-3">
								<label for="Lieferadresse_Adresse" class="form-label">Adresse</label>
								<input type="text" class="form-control" id="Lieferadresse_Adresse"  value="{{it.Shipping_street}}" name="Shipping_street" onchange="update_field(this);" autocomplete="off">
							</div>

							<div class="row">
								<div class="col-6">
									<label for="Lieferadresse_Postleitzahl" class="form-label">Postleitzahl</label>
									<input type="text" class="form-control" id="Lieferadresse_Postleitzahl" value="{{it.Shipping_plz}}" name="Shipping_plz" onchange="update_field(this);" autocomplete="off">
								</div>
								<div class="col-6">
									<label for="Lieferadresse_Ort" class="form-label">Ort</label>
									<input type="text" class="form-control" id="Lieferadresse_Ort" value="{{it.Shipping_place}}" name="Shipping_place"  onchange="update_field(this);" autocomplete="off">
								</div>
							</div>


							<h4 class="mt-4" id="rechnungsadresse_head"><b>Rechnungsadresse</b></h4>

							<div class="row mb-3">
								<div class="col-12">
									<label for="Rechnungsadresse_Empf" class="form-label">Empfänger</label>
									<input type="text" class="form-control" id="Rechnungsadresse_Empf" value="{{it.Bill_attention}}"  name="Bill_attention" onchange="update_field(this);" autocomplete="off">
								</div>
							</div>

							<div class="mb-3">
								<label for="Rechnungsadresse_Adresse" class="form-label">Adresse</label>
								<input type="text" class="form-control"  id="Rechnungsadresse_Adresse" value="{{it.Bill_street}}" name="Bill_street" onchange="update_field(this);" >
							</div>

							<div class="row">
								<div class="col-6">
									<label for="Rechnungsadresse_Postleitzahl" class="form-label">Postleitzahl</label>
									<input type="text" class="form-control"  id="Rechnungsadresse_Postleitzahl" value="{{it.Bill_plz}}" name="Bill_plz" onchange="update_field(this);" autocomplete="off">
								</div>
								<div class="col-6">
									<label for="Rechnungsadresse_Ort" class="form-label">Ort</label>
									<input type="text" class="form-control" id="Rechnungsadresse_Ort"  value="{{it.Bill_place}}" name="Bill_place" onchange="update_field(this);" autocomplete="off">
								</div>
							</div>




							<div class="d-flex align-items-center justify-content-center mt-5">
								<span style="color:white;background:#6c757d;border-radius:0.7em" class="p-2 m-2" >&nbsp;1&nbsp;</span>
								<span style="color:white;background:#f0962c;border-radius:0.7em" class="p-2 m-2" >&nbsp;2&nbsp;</span>
								<span style="color:white;background:#6c757d;border-radius:0.7em" class="p-2 m-2" >&nbsp;3&nbsp;</span>
							</div>

						</div>

						<div id="sub_3" style="display:none;">
							<h4><b>Informationen</b></h4>

							<b>Leistung</b>

							<div class="row mb-3">

								<div class="col-12 col-md-8">

									<div class="row mb-4">
										<div class="col-6">
											<label for="leistung_typ" style="display:none">Leistung</label>
											<select class="form-select" id="leistung_typ">
											  <option value="Feuerwehr-Laufkarten">Feuerwehr-Laufkarten</option>
												<!-- Mehr Optionen in Zukunft -->
											  <!--<option value="Werk- und Montageplanung">Werk- und Montageplanung</option>-->
											</select>
										</div>
										<div class="col-6">
											<label for="art_typ" style="display:none">Art</label>
											<select class="form-select" id="art_typ" onchange="calc_price()" >
												<option value="Neuerstellung">Neuerstellung</option>
												<option value="Aktualisierung">Aktualisierung</option>
											</select>
										</div>
									</div>

									<div class="row mb-4">
										<div class="col-12 col-sm-6">
											<label for="Leistung_meldergruppen" class="form-label"><b>Anzahl der Meldergruppen</b></label>
											<input type="number" class="form-control" id="Leistung_meldergruppen" value="1" onchange="calc_price()" >
										</div>
										<div class="col-12 col-sm-6">
											<label for="Leistung_ausfertigungen" class="form-label"><b>Anzahl der Ausfertigungen</b></label>
											<input type="number" class="form-control" id="Leistung_ausfertigungen" value="1" onchange="calc_price()" >
										</div>
									</div>

									<div class="row d-flex align-items-stretch mb-4">

										<div class="col-12 col-sm-6">
											<b>Freigabeverfahren</b>

												<div class="mb-2">
													<input class="form-check-input" type="checkbox" value="Ausgewählt" id="freigabe" onchange="calc_price()">
													<label class="form-check-label" for="freigabe">Behördliche Freigabe einholen</label>
												</div>

									</div>

										<div class="col-12 col-sm-6 d-flex align-items-end ">
											<div class="mb-2">
											<input class="form-check-input" type="checkbox" value="Ausgewählt" id="fastlaneservice" onchange="calc_price()">
										  <label class="form-check-label" for="fastlaneservice">Fast-Lane-Service</label>
											</div>
										</div>
									</div>

									<div class="row mb-3">
										<div class="col-12 col-sm-6">
											<b>Gestaltungsrichtlinie</b>
											<div class="form-check">
													<input class="form-check-input" type="radio" name="flexRadioDefault" id="gestaltungsrichtlinie_bestand" value="Bestandskarte" data-label="Gestaltungsrichtlinie" onchange="calc_price();">
													<label class="form-check-label" for="gestaltungsrichtlinie_bestand">Bestandskarte</label>
											</div>

											<div class="form-check">
												  <input class="form-check-input" type="radio" name="flexRadioDefault" id="gestaltungsrichtlinie_din" value="DIN 14675" data-label="Gestaltungsrichtlinie" onchange="calc_price();">
												  <label class="form-check-label" for="gestaltungsrichtlinie_din">DIN 14675</label>
											</div>
											<div class="form-check">
												  <input class="form-check-input" type="radio" name="flexRadioDefault" id="gestaltungsrichtlinie_tab" value="TAB" data-label="Gestaltungsrichtlinie" onchange="calc_price();" checked>
												  <label class="form-check-label" for="gestaltungsrichtlinie_tab"> TAB</label>
													<!--<input type="text" class="form-control" id="gestaltungsrichtlinie_custom" oninput="calc_price();" >-->
											</div>

											<select class="" id="select_tab" oninput="calc_price();" style="width: 100%;">
													 <option value="" ></option>
													{{@each(tab_array) => current_tab}}
																  <option value="{{current_tab.Place}}" >{{current_tab.Place}}</option>
													{{/each}}
											</select>


										</div>

										<div class="col-12 col-sm-6">
											<b>Format</b>

											<div class="form-check">
													<input class="form-check-input" type="radio" name="format" id="format1" value="DIN A4" data-label="Format">
													<label class="form-check-label" for="format1">DIN A4</label>
											</div>
											<div class="form-check">
													<input class="form-check-input" type="radio" name="format" id="format2" value="DIN A3" data-label="Format" >
													<label class="form-check-label" for="format2">DIN A3</label>
											</div>
											<div class="form-check">
													<input class="form-check-input" type="radio" name="format" id="format3" value="Feuerwehranforderung" data-label="Format" checked>
													<label class="form-check-label" for="format3">Feuerwehranforderung</label>
											</div>
										</div>
									</div>

								</div>

								<div class="col-12 col-md-4">

										<div id="cost_div" class="p-4" style="min-height:100px;background-color:var(--orange_2);border-radius:2em;color:white">
											<div class="row">
												<div class="col">
													<p>Flat 100</p>
													<p>Mehrfertigung</p>
													<p>Aufschlag Gestaltungsrichtlinie</p>
													<p>Fast-Lane-Service</p>
													<p>Versandkosten</p>
												</div>

												<div class="col">
													<p class="float-end">123€</p>
												</div>
											</div>

											<div class="row">
												<hr>
											</div>

											<div class="row">
												<div class="col">
													<p><b>Gesamtpreis</b></p>
												</div>

												<div class="col">
													<p class="float-end">123€</p>
												</div>

											</div>

										</div>

								</div>
							</div>

							<div class="row mb-3">
									<div class="col-12">
										<b>Anmerkungen</b>
										<textarea class="form-control" id="anmerkungen" rows="3" placeholder="Teilen Sie uns hier bitte gegebenenfalls Ihren Ansprechpartner bei der zuständigen Behörde, im Raum stehende Termine und Besonderheiten, die beachtet werden sollten mit."></textarea>
									</div>
							</div>


							<div class="d-flex align-items-center justify-content-center mt-5">
								<span style="color:white;background:#6c757d;border-radius:0.7em" class="p-2 m-2" >&nbsp;1&nbsp;</span>
								<span style="color:white;background:#6c757d;border-radius:0.7em" class="p-2 m-2" >&nbsp;2&nbsp;</span>
								<span style="color:white;background:#f0962c;border-radius:0.7em" class="p-2 m-2" >&nbsp;3&nbsp;</span>
							</div>

						</div>

					</div>

					<div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">

						<h4><b>Dateien in der Bestellung</b></h4>

						<div>
							<p>Grundlage unserer Kalkulation sind die uns zum Zeitpunkt des Auftragseingangs vorliegenden aktuellen digitalen Pläne (DWG-Daten, reduziert auf den reinen Architekturgrundriss sowie evtl. brandschutztechnischer Informationen), Planunterlagen und schriftlichen Angaben. Es erfolgt kein Abgleich mit den baulichen Gegebenheiten vor Ort.
								<a href="/app#faq#q4" target="_blank" >Mehr Informationen<img src="img/help.svg"></a></p>
								<p>Die Gesamtgröße aller Dateien darf 1,5 GB nicht überschreiten.</p>
						</div>

						<div id="upload_files">
						</div>


					</div>

					<div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
							<h4><b>Zusammenfassung</b></h4>

							<div id="summary">
							</div>

							</div>

					</div>


				</div


		</div>
  </div>


	<script>
		var current_artikel_id = "";
		var current_artikel_anz = 0;
		var order_zip = null;

		$('#select_tab').select2({
			 theme: 'bootstrap',
			 tags: true,
			 tokenSeparators: ['||'],
			 placeholder: "Bitte wählen Sie eine Tab",
			 allowClear: true,
			 createTag: function (params) {
					 var term = $.trim(params.term);

					 if (term === '') {
							 return null;
					 }

					 return {
							 id: term,
							 text: term,
							 newTag: true
					 }
			 }
	 });

		//Called when the settings for the price changes..
		function calc_price(){

			var calc_display = "";
			var ges_price = 0;
			var count_meldergruppen = $("#Leistung_meldergruppen").val();

			if( count_meldergruppen < 11 ){
				flat_display_org = "Flat 10";
			}else if( count_meldergruppen < 51 ){
				flat_display_org = "Flat 50";
			}else if( count_meldergruppen < 101 ){
				flat_display_org = "Flat 100";
			}else{
				flat_display_org = "ext. Flat";
			}

			var flat_type = $("#art_typ").val();

			var flat_articel_obj = null;
			for (let i = 0; i < articel_array.length; i++) {
				 if( articel_array[i].Name.includes("("+flat_display_org+")") && articel_array[i].Name.includes("flk.eu")){
					 if( flat_type == "Aktualisierung" ){
						 if( articel_array[i].Name.includes("(A)") ){
							 flat_articel_obj = articel_array[i];
						 }
					 }else{
						 if( articel_array[i].Name.includes("(A)") == false ){
							 flat_articel_obj = articel_array[i];
						 }
					 }
				 }
			}

			if( flat_articel_obj == null ){ return; }

			ges_price = ges_price + (flat_articel_obj.Price * count_meldergruppen)
			all_order_items = '{"quantity": ' + count_meldergruppen + ',"item_id": "'+ flat_articel_obj.Id +'"}'

			if( flat_type == "Neuerstellung"){
				calc_display = flat_display_org + " (Neuerstellung): " + count_meldergruppen + "x" + parseFloat( flat_articel_obj.Price).toFixed(2) + " = " +  ( flat_articel_obj.Price * count_meldergruppen).toFixed(2) + "€<br>";
			}else{
				calc_display = flat_display_org + " (Aktualisierung): " + count_meldergruppen + "x" + parseFloat( flat_articel_obj.Price).toFixed(2) + " = " +  ( flat_articel_obj.Price * count_meldergruppen).toFixed(2) + "€<br>";
			}


			//Fastlane
			if($("#fastlaneservice").is(':checked')){

				var fastlane_articel_obj = null;
				for (let i = 0; i < articel_array.length; i++) {

					 if( articel_array[i].Name.includes(flat_display_org + " (flk.eu)") && articel_array[i].Name.includes("Fast-Lane") ){
						 if( flat_type == "Aktualisierung" ){
							 if( articel_array[i].Name.includes("(A)") ){
								 fastlane_articel_obj = articel_array[i];
							 }
						 }else{
							 if( articel_array[i].Name.includes("(A)") == false ){
								 fastlane_articel_obj = articel_array[i];
							 }
						 }
					 }
				}
				if( fastlane_articel_obj != null ){
					all_order_items = all_order_items + ',{"quantity": ' + count_meldergruppen + ',"item_id": "'+ fastlane_articel_obj.Id +'"}'
					calc_display = calc_display + "Fastlaneservice: " + count_meldergruppen + "x" + parseFloat( fastlane_articel_obj.Price).toFixed(2) + "=" + (fastlane_articel_obj.Price * count_meldergruppen).toFixed(2) + "€<br>";
					ges_price = ges_price + (fastlane_articel_obj.Price * count_meldergruppen);
				}
			}


			//Aufschlag TAB
			if($("#gestaltungsrichtlinie_tab").is(':checked')){
				var user_tab_place = $("#select_tab").val();
				user_tab_place = user_tab_place.toLowerCase().trim();
				add_tab_costs = false;

				for (let i = 0; i < tab_array.length; i++) {
					 if( (tab_array[i].Place).toLowerCase().trim() ==  user_tab_place ){
						 add_tab_costs = true;
					 }
				}

				if( add_tab_costs == true ){
					var tab_articel_obj = null;
					for (let i = 0; i < articel_array.length; i++) {
						 if( articel_array[i].Name.includes(flat_display_org + " (flk.eu)") && articel_array[i].Name.includes("Aufschlag Feuerwehr-Laufkarten") ){

							 if( flat_type == "Aktualisierung" ){
								 if( articel_array[i].Name.includes("(A)") ){
									 tab_articel_obj = articel_array[i];
								 }
							 }else{
								 if( articel_array[i].Name.includes("(A)") == false ){
									 tab_articel_obj = articel_array[i];
								 }
							 }
						 }
					}

					if( tab_articel_obj != null ){
						all_order_items = all_order_items + ',{"quantity": ' + count_meldergruppen + ',"item_id": "'+ tab_articel_obj.Id +'"}'
						calc_display = calc_display + "Aufschlag TAB: " + count_meldergruppen + "x" + parseFloat( tab_articel_obj.Price).toFixed(2) + "=" + parseFloat( tab_articel_obj.Price * count_meldergruppen ).toFixed(2) + "€<br>";
						ges_price = ges_price + (tab_articel_obj.Price * count_meldergruppen);
					}

				}
			}


			//Ausfertigungen, nur wenn mehr als 1 also erst ab 2  Eine Ausfertigung ist schon in Flat
			var ausf_articel_obj = null;
			for (let i = 0; i < articel_array.length; i++) {
				if( articel_array[i].Name.includes("Mehrfertigung")){
					 	ausf_articel_obj = articel_array[i];
				}
			}
			if( ausf_articel_obj != null ){
				count_ausf = $("#Leistung_ausfertigungen").val();
				if( count_ausf > 1 ){

					all_order_items = all_order_items + ',{"quantity": ' + count_meldergruppen * (count_ausf-1) + ',"item_id": "'+ ausf_articel_obj.Id +'"}'
					calc_display = calc_display + "Mehrfertigung: " + parseFloat( ausf_articel_obj.Price).toFixed(2) + "x" + count_meldergruppen  + "x" + (count_ausf - 1) + " = " + parseFloat( ausf_articel_obj.Price * count_meldergruppen * (count_ausf-1) ).toFixed(2) + "€<br>";
					ges_price = ges_price + (ausf_articel_obj.Price * count_meldergruppen * (count_ausf-1)  );
				}
			}


			//Versand
			var ship_obj = null;
			if( count_meldergruppen > 15 ){
				 for (let i = 0; i < articel_array.length; i++) {
					 if( articel_array[i].Name.includes("Kostenfreier Versand")){ship_obj = articel_array[i];}
				 }
			}else{
				for (let i = 0; i < articel_array.length; i++) {
				 if( articel_array[i].Name.includes("Verpackungskosten")){
					 ship_obj = articel_array[i];}
			 	}
			}

			if( ship_obj != null ){
				all_order_items = all_order_items + ',{"quantity": ' + 1 + ',"item_id": "'+ ship_obj.Id +'"}'
				calc_display = calc_display + "Versand: " + parseFloat( ship_obj.Price).toFixed(2) + "€<br>";
				ges_price = ges_price + parseFloat( ship_obj.Price);
			}

			all_costs_display = parseFloat(ges_price).toFixed(2) + "€"


			//all_order_items muss noch um Standard Artikel ergänzt werden!

			for (let i = 0; i < articel_array.length; i++) {	//Als erster Artikel muss immer der mit dem Namen DIN 14675 erscheinen
				 if( articel_array[i].Name.includes("Feuerwehr-Laufkarten nach DIN 14675") ){
						all_order_items = '{"quantity": ' + 1 + ',"item_id": "'+ articel_array[i].Id +'"},' + all_order_items
						break;
				 }
			}

			for (let i = 0; i < articel_array.length; i++) { //Als letzter Artikel muss immer der mit dem Namen Hinweis zur Auftragsbearbeitung erscheinen
				 if( articel_array[i].Name.includes("Hinweis zur Auftragsbearbeitung") ){
						all_order_items = all_order_items + ',{"quantity": ' + 1 + ',"item_id": "'+ articel_array[i].Id +'"}'
						break;
				 }
			}


			new_price_html = calc_display+"<hr>Gesamt: " + "<span id='ges_cost'>" + all_costs_display + "</span> <i class='bi bi-info-circle' onclick='$(\\"#price_info\\").show();'></i> <div id='price_info' style='display:none;'><i>Voraussichtlicher Preis, ohne Prüfung durch Concepture.</i></div>"
			$("#cost_div").html(new_price_html);

		}

		//Called to build the Summary at the end of a order
		function build_sumary(){

		  var processedRadioGroups = {};

			var current_display_head = "";
			var display_head_finish = false;

			var result_html = "";

		  $("input, select, h4,h3").each(function() {
		         var elementId = $(this).attr('id');
		         var elementValue;
		         var labelValue;


						 if( $(this).prop("tagName") == "H4" && elementId != "rechnungsadresse_head"){

							 if( current_display_head != $(this).text() && display_head_finish == false){
							 		current_display_head = $(this).text();//Informationen
									if( current_display_head == "Informationen"){
										display_head_finish = true;
									}

									if( result_html == ""){
										result_html = result_html + "<div class='card p-3 m-0 m-md-2'><h5 style='color:#f3ac04;'>" + current_display_head + "</h5>";
									}else{
										result_html = result_html + "</div><div class='card p-3 m-0 m-md-2'><h5 style='color:#f3ac04;'>" + current_display_head + "</h5>";
									}
							 }
							 return;
						 }


						 if( $(this).prop("tagName") == "H4" && elementId == "rechnungsadresse_head" ){
							 result_html = result_html +  "<h5 style='color:#f3ac04;'>" + $(this).text() + "</h5>";
							 return;
						 }

		         if ($(this).is(':radio')) {
		             var radioGroupName = $(this).attr('name');
		             if (processedRadioGroups[radioGroupName]) {
		                 return;
		             }
		             processedRadioGroups[radioGroupName] = true;
		             elementValue = $('input[name=' + radioGroupName + ']:checked').val();
		             labelValue = $('input[name=' + radioGroupName + ']:checked').data('label');
		         } else if ($(this).is(':checkbox')) {
		             if ($(this).is(':checked')) {
		                 elementValue = $(this).val();
		             } else {
		                 return;
		             }
		             labelValue = $("label[for='" + elementId + "']").text();
		         } else if ($(this).attr('type') == 'date') {
		             var date = new Date($(this).val());
		             if (isNaN(date)) {
		                 elementValue = "-";
		             } else {
		                 elementValue = ("0" + date.getDate()).slice(-2) + "." + ("0" + (date.getMonth() + 1)).slice(-2) + "." + date.getFullYear();
		             }
		             labelValue = $("label[for='" + elementId + "']").text();
		         } else {
		             elementValue = $(this).val();
		             labelValue = $("label[for='" + elementId + "']").text();
		         }

						 if( labelValue != "" && labelValue != undefined){

							if( labelValue=="Gestaltungsrichtlinie" && elementValue== "TAB"){
								elementValue = elementValue + ": " + $("#select_tab").val();
							}

							if( elementValue == ""){
								elementValue = "-";
							}

							if( labelValue != "" && labelValue != "Farbe:"){
								result_html = result_html + "<p><b>" + labelValue +": </b>" + elementValue + "</p>";
							}
						}
		     });



				 result_html = '<div class="d-flex flex-wrap ">' + result_html + "</div></div>";
				 $("#summary").html( result_html );

				 var anmerkungen =  $("#anmerkungen").val();
				 anmerkungen = anmerkungen.trim();
				 anmerkungen = anmerkungen.replaceAll("\\n","<br>");

				 anmerkungen_br_count = (anmerkungen.match(/<br>/g) || []).length;

				 if( anmerkungen_br_count > 0 ){
					 anmerkungen = "<br>" + anmerkungen;
				 }

				 if( anmerkungen == ""){
					 anmerkungen = "-";
				 }

				 all_files_in_order_html = ""
				 var all_files_in_order = window.uppy_instance.getFiles();
				 for (var cco = 0; cco < all_files_in_order.length; cco++)
				 {
					 all_files_in_order_html = all_files_in_order_html + "<li>" + all_files_in_order[cco].name + "</li>";
				 }
				 if( all_files_in_order_html != ""){
					 all_files_in_order_html = "<ul>" + all_files_in_order_html + "</ul>";
				 }else{
					 all_files_in_order_html = "-";
				 }

				 $("#summary .card").last().append("<p><b>Anmerkungen: </b>" +  anmerkungen +"</p>");

				 $("#summary .card").last().append("<p><b>Dateien: </b>" +  all_files_in_order_html +"</p>");

				 $("#summary .card").last().append("<p><b>Preis: </b>" +  $("#ges_cost").text() + " <i>(Voraussichtlich)</i></p>");
		}

		//Submit the generated PDF to the Api
		function create_order(){

			deactivate_reload_lock();

			var build_items = "";

			var anmerkungen = $("#anmerkungen").val();



			$("#smartwizard").html("Daten werden gesendet...Bestellung wird aufgegeben...einen Moment Geduld....");

			var formData = new FormData();
			formData.append('zip', order_zip);
			formData.append('number', 'Noch nicht zugeordnet');
			formData.append('notes',  anmerkungen );
			formData.append('items', all_order_items);

			$.ajax({
				type: 'POST',
			  url: "/submit_order",
			  data:   formData,
				cache: false,
			  processData: false,
			  contentType: false
			})
			.done(function( result_data )
			{
				if( result_data == "error"){
					$("#smartwizard").html('Fehler! Ihre Bestellung wurde nicht aufgegeben! Bitte erneut versuchen.<br><br><a href="#home" class="btn btn-primary">Zur Startseite</a>');
				}else if(result_data == "error_size"){
					$("#smartwizard").html('Fehler! Die Dateien in der Bestellung sind zu groß! Bitte erneut versuchen.<br><br><a href="#home" class="btn btn-primary">Zur Startseite</a>');
				}else{
					$("#smartwizard").html('Erfolgreich, Ihre Bestellnummer: ' + result_data  + '<br><br><a href="#home" class="btn btn-primary">Zur Startseite</a>');
				}
		  })
			.fail(function()
			{
	    	$("#smartwizard").html('Fehler! Ihre Bestellung wurde nicht aufgegeben! Bitte erneut versuchen.<br><br><a href="#home" class="btn btn-primary">Zur Startseite</a>');
  		});

		}


		var smartwizard_options = {
			theme: 'round',
			enableUrlHash: false,
			autoAdjustHeight: false,
			lang:
			{
				next: 'Weiter',
				previous: 'Zurück'
			},
		};

		//Init the smartwizard
		$('#smartwizard').smartWizard(smartwizard_options);

		//smartWizard event, when Page is loaded
		$("#smartwizard").on("leaveStep", function(e, anchorObject, currentStepIndex, nextStepIndex, stepDirection) {
			if($('#sub_3').is(':visible')){
				return true;
			}

			if($('#sub_2').is(':visible')){
				$("#sub_1").hide();
				$("#sub_2").hide();
				$('#sub_3').show();
				calc_price();
				return false;
			}

			if($('#sub_1').is(':visible')){
				$( ".toolbar-bottom" ).prepend( "<button id='go_back_btn' class='btn btn-primary back_btn' onclick='go_back_btn();'>Zurück</button>" );
				$("#sub_1").hide();
				$("#sub_2").show();
				$('#sub_3').hide();
				return false;
			}

		});

		$("#smartwizard").on("showStep", function(e, anchorObject, stepIndex, stepDirection) {

			if( stepIndex == 0){
				if($('#sub_1').is(':visible')==false){
					$( ".toolbar-bottom" ).prepend( "<button id='go_back_btn' class='btn btn-primary' onclick='go_back_btn();'>Zurück</button>" );
				}
			}else{
				$("#go_back_btn" ).remove();
			}

			if( stepIndex == 2){

				build_sumary();

				if($("#order_btn").length) //Button already exits, just show the button
				{
					$("#order_btn").show();
				}
				else
				{
					$('<button id="order_btn" onclick="create_order()" type="button" class="btn btn-primary" disabled>Vorbereitung <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span></button>' ).appendTo( ".toolbar-bottom" );
				}

				//Build PDF an ZIP File
				const { jsPDF } = window.jspdf;
				window.jsPDF = window.jspdf.jsPDF;
				window.html2canvas = html2canvas;
				var zip_order = new JSZip();
				//Generate a PDF with a Summary of the order

				$('#summary').width(740);
				var pdf = new window.jspdf.jsPDF();
				pdf.html(document.querySelector("#summary"), { callback: function (pdf_result) {

							 $("#summary").width("auto");

							 var pdf_blob = pdf_result.output();

							 zip_order.file( "Bestellungsangaben.pdf" ,pdf_blob,{binary:true})
							 var all_files = window.uppy_instance.getFiles();  //Get All Uppy files and add the files to the ZIP
							 for (var cc = 0; cc < all_files.length; cc++)
							 {
								 zip_order.file( all_files[cc].name , all_files[cc].data);
							 }


							 zip_order.generateAsync({type:"blob"}).then(function(content)
							 {
									order_zip = content;
									$("#order_btn").text("Kostenpflichtig bestellen");
									$("#order_btn").attr("disabled", false); //Now the user could click the "Bestellen" Button
								}).catch((error) => {
								  bootbox.alert("Dateien sind zu groß für den Upload!");
							 });


						},
						x: 10,
						y: 10,
						html2canvas: { scale: 0.3 }
					});

			}else {
				$("#order_btn").html('Vorbereitung <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
				$("#order_btn").attr("disabled", true);
				$("#order_btn").hide();
			}

		});


		//When the user clicks the go back button
		function go_back_btn(){
			if($('#sub_2').is(':visible')){
				$("#go_back_btn" ).remove();
				$("#sub_1").show();
				$("#sub_2").hide();
				$('#sub_3').hide();
			}
			if($('#sub_3').is(':visible')){
				$("#sub_1").hide();
				$("#sub_2").show();
				$('#sub_3').hide();
			}
		}


		//Get the profile Data to prefill
		$.get("/get_profil", function( result_data )
		{
			if(result_data == "denied"){
				document.cookie = "token=";
				show_login();
				return
			}else{ logged_in = true; }

			var result_data_array_profil = JSON.parse(result_data);

			$("#ansprechpartner").val( result_data_array_profil.Full_name );
			$("#ansprechpartner_mail").val( result_data_array_profil.Mail );
			$("#ansprechpartner_adress").val( result_data_array_profil.Shipping_street )
			$("#ansprechpartner_plz").val( result_data_array_profil.Shipping_plz )
			$("#ansprechpartner_ort").val( result_data_array_profil.Shipping_place )

		});


		//Update the user settings
		function update_field( in_e ){

			var field_name = $( in_e ).attr("name");
			var field_val = $(in_e).val();

			$.post("/update_profile", { name: field_name, val: field_val}).done(function( data ){});
		}

		if( window.archiv_handover_object != null) {

				change_uppy_target( "upload_files" );

				//Data from the handover
				$("#Projektname").val( window.archiv_handover_object.project_name );
				$("#Projektnummer").val( window.archiv_handover_object.project_nummer );

				$("#art_typ").val("Aktualisierung");

				window.archiv_handover_object = null;

		}else if( window.project_handover_object != null){

			change_uppy_target( "upload_files" );

			//Data from the handover
			$("#Projektname").val( window.project_handover_object.project_name );
			$("#Projektnummer").val( window.project_handover_object.project_nummer );

		}else{
			window.uppy_instance = null;
			init_uppy( "upload_files" ); //Initalisiert in img_editor.js Uppy + den PDF Viewer...
		}

		function image_editor_has_saved_event(){}
</script>
`;