var offer_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-radius:0 !important;
		}
		.nav a[href$='#step-4']{
			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;}
		 .nav a[href$='#step-4']{border-radius: 10em !important;}
		}

		.booked{
			background-color: #6c757d !important;
		}

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

		.card{
			height: 100%;
		}

	</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">
							Dateien hochladen
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#step-4">
							Zusammenfassung
						</a>
					</li>
				</ul>


				<div class="tab-content">

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

						<h4><b>Informationen</b></h4>

						<div class="row mb-3 mt-1">
						  <div class="col">
								<label for="projectname" class="form-label">Projektname:</label>
								<input id="projectname" type="text" class="form-control" name="projectname" value="" placeholder="Musterprojekt"/>
						  </div>
						  <div class="col">
								<label for="projectnumber" class="form-label">Projektnummer:</label>
								<input id="projectnumber" type="text" class="form-control" name="projectnumber" value="" placeholder="falls vorhanden"/>
						  </div>
						</div>

						<div class="mb-3">
								<label for="address" class="form-label">Adresse des Objektes:</label>
								<input id="address" type="text" class="form-control" name="address" value="" placeholder="Musterstraße 123"/>
						</div>

						<div class="row mb-3">
						  <div class="col">
								<label for="plz" class="form-label">Postleitzahl:</label>
								<input id="plz" type="text" class="form-control" name="plz" value="" placeholder="24584"/>
						  </div>
						  <div class="col">
								<label for="place" class="form-label">Ort:</label>
								<input id="place" type="text" class="form-control" name="plce" value="" placeholder="Mustersadt"/>
						  </div>
						</div>

						<div class="form-group mb-3">
							<label for="notes"><b>Ihre Anmerkungen</b></label>
							<textarea id="notes" class="form-control" id="notes" rows="3"></textarea>
						</div>

					</div>


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

						<p class="mt-3" ><b>Hinweis:</b> Es ist möglich mehrere Leistungen auszuwählen.</p>

						<div class="row row-cols-1 row-cols-md-3 g-4">
							  <div class="col">
							    <div class="card">
							      <img src="/img/digi.jpg" class="card-img-top" style="height: 12rem;"/>
							      <div class="card-body d-flex flex-column" data-book="Digitalisierung">
							        <h5 class="card-title">Digitalisierung</h5>
							        <p class="card-text">
							         Digitalisierung von Bestandsplänen
							        </p>
											<div class="mt-auto">
												<button class="btn btn-primary" onclick="book_offer(this);">Auswählen</button>
											</div>
							      </div>
							    </div>
							  </div>
							  <div class="col">
							    <div class="card">
							      <img src="/img/wm.jpg" class="card-img-top" style="height: 12rem;" />
							      <div class="card-body d-flex flex-column" data-book="Werk-und Montageplanung">
							        <h5 class="card-title">Werk-und Montageplanung</h5>
							        <p class="card-text">
							         Planungsleistung.
							        </p>
											<div class="mt-auto">
												<button class="btn btn-primary" onclick="book_offer(this);">Auswählen</button>
											</div>
							      </div>
							    </div>
							  </div>
							  <div class="col">
							    <div class="card">
							      <img src="/img/Rev.jpg" class="card-img-top" style="height: 12rem;" />
							      <div class="card-body d-flex flex-column" data-book="Revisionsplan">
							        <h5 class="card-title">Revisionsplan</h5>
							        <p class="card-text">Vorbereitung der CAD-Dateien.</p>
											<div class="mt-auto">
												<button class="btn btn-primary" onclick="book_offer(this);">Auswählen</button>
											</div>
							      </div>
							    </div>
							  </div>
							  <div class="col">
							    <div class="card">
							      <img src="/img/FLK.jpg" class="card-img-top" style="height: 12rem;" />
							      <div class="card-body d-flex flex-column" data-book="Feuerwehr-Laufkarten">
							        <h5 class="card-title">Feuerwehr-Laufkarten</h5>
							        <p class="card-text">
							          nach DIN 14675
							        </p>
											<div class="mt-auto">
												<button class="btn btn-primary" onclick="book_offer(this);">Auswählen</button>
											</div>
							      </div>
							    </div>
							  </div>
								<div class="col">
									<div class="card">
										<img src="/img/FP.jpg" class="card-img-top" style="height: 12rem;" />
										<div class="card-body d-flex flex-column" data-book="Feuerwehrplan">
											<h5 class="card-title">Feuerwehrplan </h5>
											<p class="card-text">
												nach DIN 14095
											</p>
											<div class="mt-auto">
												<button class="btn btn-primary" onclick="book_offer(this);">Auswählen</button>
											</div>
										</div>
									</div>
								</div>
								<div class="col">
									<div class="card">
										<img src="/img/FRP.jpg" class="card-img-top" style="height: 12rem;" />
										<div class="card-body d-flex flex-column" data-book="Flucht-und Rettungsplan">
											<h5 class="card-title">Flucht-und Rettungsplan</h5>
											<p class="card-text">
												nach DIN ISO 23601
											</p>
											<div class="mt-auto">
												<button class="btn btn-primary" onclick="book_offer(this);">Auswählen</button>
											</div>
										</div>
									</div>
								</div>
							</div>


					</div>


					<div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
						<p>Die Gesamtgröße aller Dateien darf 1,5 GB nicht überschreiten.</p>
						<div id="upload_files">

						</div>

					</div>


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

						<div id="offer_summary" class="mt-3">
						</div>
					</div>


				</div>


			</div>

		</div>
  </div>


<script>
var zip_offer = null;
var uppy_instance = null;

function final_offer(){

		deactivate_reload_lock();
		$("#smartwizard").html("Daten werden gesendet...einen Moment Geduld....");

		var formData = new FormData();
		formData.append('zip', zip_offer);

		$.ajax({
			type: 'POST',
			url: "/submit_offer",
			data:   formData,
			cache: false,
			processData: false,
			contentType: false
		})
		.done(function( result_data )
		{
			if( result_data == "ok"){
				$("#smartwizard").html("Prima, das hat geklappt! Wir melden uns in Kürze mit einem Angebot bei Ihnen!" );
			}else if(result_data == "error_size"){
					$("#smartwizard").html("Fehler! Ihre Anfrage wurde nicht aufgegeben! Die Dateien in der sind zu groß!");
			}else{
				$("#smartwizard").html("Fehler! Ihre Anfrage wurde nicht aufgegeben! Bitte erneut versuchen.");
			}
		})
		.fail(function()
		{
			$("#smartwizard").html("Fehler! Ihre Anfrage wurde nicht aufgegeben! Bitte erneut versuchen.");
		});

}


function book_offer(in_e){

	if($(in_e).parent().parent().hasClass("booked")){
		$(in_e).parent().parent().removeClass("booked");
	}else{
		$(in_e).parent().parent().addClass("booked");
	}

}

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


	function build_sumary(){

		var result_html = "";

		$("input").each(function() {
					var elementId = $(this).attr('id');
					var elementValue;
					elementValue = $(this).val();
					labelValue = $("label[for='" + elementId + "']").text();

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

		result_html = '<div>' + result_html + "</div>";
		$("#offer_summary").html( result_html );

		var anmerkungen =  $("#notes").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;
		}

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

		all_files_in_order_html = ""
		var all_files_in_order = 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 = "-";
		}

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

		list_leistungen = "<ul>";
		$('.booked').each(function(i,ee){
				 list_leistungen = list_leistungen + "<li>" +  $(ee).data("book") + "</li>";
		});
		list_leistungen = list_leistungen + "</ul>";

		if( list_leistungen == "<ul></ul>"){
			 $("#offer_summary").append("<p><b>Leistungen: </b>keine</p>");
		 }else{
			 $("#offer_summary").append("<p><b>Leistungen: </b></p>" + list_leistungen);
		 }

	}


	//Init the smartwizard
	$('#smartwizard').smartWizard(smartwizard_options).on("showStep", function(e, anchorObject, stepIndex, stepDirection) {
				if( stepIndex == 3){

					build_sumary();

					if($("#offer_btn").length) //Button already exits, just show the button
					{
						$("#offer_btn").show();
					}
					else
					{
						$('<button id="offer_btn" onclick="final_offer()" 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;
					zip_offer = new JSZip();
					//Generate a PDF with a Summary of the order

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

								 var pdf_blob = pdf_result.output();

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

								 zip_offer.generateAsync({type:"blob"}).then(function(content)
								 {
									 zip_offer = content;
									 $("#offer_btn").text("Angebot einholen");
									 $("#offer_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{
					$("#offer_btn").html('Vorbereitung <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
					$("#offer_btn").attr("disabled", true);
					$("#offer_btn").hide();
				}
	});

	uppy_instance = init_uppy( "upload_files" ); //Initalisiert in img_editor.js Uppy + den PDF Viewer...

</script>
`;