var faq_template = `

	<style>

		#faq_nav .btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited, .btn-primary:focus {
    border-color: #6c757d;
    background-color: #6c757d;
		}

		.current_active{
			border-color: var(--orange_1) !important;
			background-color: var(--orange_2) !important;
		}

		#contactOverlay {
		 position: fixed;
		 bottom: 20px;
		 right: 20px;
		 z-index: 1000;
 		}

	</style>


	<div class="container-fluid">

		<div id="faq_nav" class="row mt-1 mb-5">

			<div class="col-12 col-md-3 col-sm-6 mb-2">
					<button class="btn btn-primary w-100 p-4 current_active" onclick="show_questions(this)" >Tipps und Tricks zur Web-APP</button>
			</div>

			<div class="col-12 col-md-3 col-sm-6  mb-2">
					<button class="btn btn-primary w-100 p-4" onclick="onboard();" >Demo-Tour ansehen</button>
			</div>

			<div class="col-12 col-md-3 col-sm-6  mb-2">
					<button class="btn btn-primary w-100 p-4" onclick="show_services(this)" >Leistungen</button>
			</div>

			<div class="col-12 col-md-3 col-sm-6  mb-2">
					<button class="btn btn-primary w-100 p-4" onclick="show_prices(this)" >Preise</button>
			</div>

		</div>

		<div id="questions">
			<div class="row">

				<div class="accordion" id="faqExample">

								<div class="card">
									<div class="card-header p-2" id="q1">
										<h5 class="mb-0">

										<button class="btn btn-link collapsed text-dark" type="button" data-bs-toggle="collapse" data-bs-target="#c1" aria-expanded="false" aria-controls="collapseTwo">
										In welchem Format erhalte ich die Feuerwehr-Laufkarte?
										</button>

									  </h5>
									</div>
									<div id="c1" class="collapse">
										<div class="card-body">
										Sie erhalten unsere Feuerwehr-Laufkarten in Hoch- oder Querformat. Je nach Kundenwunsch bzw. örtlichen Anforderungen kann die Größe zwischen DIN A4 - A3 variieren. Um die Qualität und Langlebigkeit des Produkts zu gewährleisten, wird jede Karte in formstabilem, transparentem Laminat eingeschweißt und mit einem unverlierbaren Nummernreiter versehen. Zusätzlich erhalten Sie Ihre Feuerwehr-Laufkarten digitalisiert als PDF für Ihre Unterlagen.
										</div>
									</div>
								</div>

								<div class="card">
									<div class="card-header p-2" id="q2">
										<h5 class="mb-0">
										<button class="btn btn-link collapsed text-dark" type="button" data-bs-toggle="collapse" data-bs-target="#c2" aria-expanded="false" aria-controls="collapseTwo" >
										  Muss ich noch eine zusätzliche Bestellung über meine Firma auslösen?
										</button>
									  </h5>
									</div>
									<div id="c2" class="collapse">
										<div class="card-body">
											Nein. Die Bestellung auf FEUERWEHR-LAUFKARTE.EU reicht aus, damit wir Ihr Projekt bearbeiten können.
										</div>
									</div>
								</div>

								<div class="card">
									<div class="card-header p-2" id="q3">
										<h5 class="mb-0">
										<button class="btn btn-link collapsed text-dark" type="button" data-bs-toggle="collapse" data-bs-target="#c3" aria-expanded="false" aria-controls="collapseTwo">
										  Wie lange dauert es, bis ich meine Feuerwehr-Laufkarte erhalte?
										</button>
									  </h5>
									</div>
									<div id="c3" class="collapse">
										<div class="card-body">

											<b>1. Erweiterung / Aktualisierung</b>
											<p>Möchten Sie eine Erweiterung oder eine Aktualisierung eines bestehendes Projekt bei FEUERWEHR-LAUFKARTE.EU in Auftrag geben, erhalten Sie den Entwurf (PDF-Format) in 2 Wochen.</p>

											<b>2. Neuerstellung</b>
											<p>Bis zur fertigen Feuerwehr-Laufkarte ist mit einer Bearbeitungsdauer von 4-5 Wochen zu rechnen.
												Diese setzt sich zusammen aus der Erstellung eines Gestaltungsvorschlags (2-3 Wochen), der zur Freigabe bei der zuständigen Brandschutzbehörde eingereicht wird, und, nach erfolgter Freigabe, mit der Entwurfserstellung (2 Wochen) begonnen wird. Diesen erhalten Sie im PDF-Format zur Prüfung.</p>

										</div>
									</div>
								</div>

								<div class="card">
									<div class="card-header p-2" id="q4">
										<h5 class="mb-0">
										<button class="btn btn-link collapsed text-dark" type="button" data-bs-toggle="collapse" data-bs-target="#c4" aria-expanded="false" aria-controls="collapseTwo">
										  Welche Daten sind erforderlich, um die Feuerwehr-Laufkarte zu erstellen?
										</button>
									  </h5>
									</div>
									<div id="c4" class="collapse">
										<div class="card-body">
											Grundlage unserer Arbeit sind die uns zum Zeitpunkt des Auftragseingangs vorliegenden digitalen Pläne (DWG-Daten, reduziert auf den reinen Architektur Grundriss sowie evtl. brandschutztechnischer Informationen), Planunterlagen und schriftlichen Angaben.
										</div>
									</div>
								</div>

								<div class="card">
									<div class="card-header p-2" id="q5">
										<h5 class="mb-0">
										<button class="btn btn-link collapsed text-dark" type="button" data-bs-toggle="collapse" data-bs-target="#c5" aria-expanded="false" aria-controls="collapseTwo">
										  Kann ich meine Bestellung noch ändern oder stornieren?
										</button>
									  </h5>
									</div>
									<div id="c5" class="collapse">
										<div class="card-body">
											Änderungen oder eine Stornierung des Auftrags sind jederzeit möglich.
											Bitte haben Sie Verständnis, dass wir bereits geleistete Stunden/Leistungen berechnen müssen.
										</div>
									</div>
								</div>

								<div class="card">
									<div class="card-header p-2" id="q6">
										<h5 class="mb-0">
										<button class="btn btn-link collapsed text-dark" type="button" data-bs-toggle="collapse" data-bs-target="#c6" aria-expanded="false" aria-controls="collapseTwo">
										  Wann werden die Laufkarten berechnet?
										</button>
									  </h5>
									</div>
									<div id="c6" class="collapse">
										<div class="card-body">
											Eine Woche nach Erhalt des Entwurfs der Feuerwehr-Laufkarten erlauben wir uns, diese zu berechnen.
										</div>
									</div>
								</div>

								<div class="card">
									<div class="card-header p-2" id="q7">
										<h5 class="mb-0">
										<button class="btn btn-link collapsed text-dark" type="button" data-bs-toggle="collapse" data-bs-target="#c7" aria-expanded="false" aria-controls="collapseTwo">
										  Wie aktualisiere ich meine Adresse?
										</button>
									  </h5>
									</div>
									<div id="c7" class="collapse">
										<div class="card-body">
											Ihre persönlichen Angaben können jederzeit unter Einstellungen angepasst werden.
										</div>
									</div>
								</div>

								<div class="card">
									<div class="card-header p-2" id="q8">
										<h5 class="mb-0">
										<button class="btn btn-link collapsed text-dark" type="button" data-bs-toggle="collapse" data-bs-target="#c8" aria-expanded="false" aria-controls="collapseTwo">
										  Ich habe mein Passwort vergessen, was kann ich tun?
										</button>
									  </h5>
									</div>
									<div id="c8" class="collapse">
										<div class="card-body">
											Um Ihr Passwort zurückzusetzen, wählen Sie im Login-Bereich Passwort vergessen. Im Folgeschritt senden wir ein neues Passwort an die von Ihnen hinterlegte E-Mail-Adresse, welches Sie dann unter Einstellungen anpassen können.
										</div>
									</div>
								</div>



								<div class="card">
									<div class="card-header p-2" id="q9">
										<h5 class="mb-0">
										<button class="btn btn-link collapsed text-dark" type="button" data-bs-toggle="collapse" data-bs-target="#c9" aria-expanded="false" aria-controls="collapseTwo">
											Wieviele Korrekturläufe gibt es?
										</button>
										</h5>
									</div>
									<div id="c9" class="collapse">
										<div class="card-body">
											Bei einem Korrekturlauf handelt es sich um Änderungen/Anpassungen, die in den Feuerwehr-Laufkarten des Entwurfes/Vorabzuges (nicht je Meldergruppe) eingetragen werden. Die Erstkorrektur der Feuerwehr-Laufkarten (Entwurf) ist im Leistungsumfang für Sie inbegriffen. Ab dem 2. Korrekturlauf erlauben wir uns, den Aufwand auf Stundennachweis zu berechnen.
										</div>
									</div>
								</div>

								<div class="card">
									<div class="card-header p-2" id="q10">
										<h5 class="mb-0">
										<button class="btn btn-link collapsed text-dark" type="button" data-bs-toggle="collapse" data-bs-target="#c10" aria-expanded="false" aria-controls="collapseTwo">
											In welcher Qualität benötigen wir Korrekturen, um diese verarbeiten zu können?
										</button>
										</h5>
									</div>
									<div id="c10" class="collapse">
										<div class="card-body">
											Notwendige Korrekturen sollten in die jeweilige Feuerwehr-Laufkarte eingetragen/-gezeichnet werden. Um Missverständnisse oder Unklarheiten vermeiden zu können, sollten diese mit unserem Editor oder einem beliebigen PDF-Annotator bearbeitet werden. Handschriftliche Anmerkungen können zu Mehraufwendungen führen. Diese werden auf Stundenbasis abgerechnet.
										</div>
									</div>
								</div>


								<div class="card">
									<div class="card-header p-2" id="q11">
										<h5 class="mb-0">
										<button class="btn btn-link collapsed text-dark" type="button" data-bs-toggle="collapse" data-bs-target="#c11" aria-expanded="false" aria-controls="collapseTwo">
											Was versteht man unter einem Vorabzug?
										</button>
										</h5>
									</div>
									<div id="c11" class="collapse">
										<div class="card-body">
											Beim Vorabzug handelt es sich um eine finale digitale Version. Sofern keine Änderungen mehr vorgenommen werden sollen, können diese nach Ihrer Freigabe gedruckt, laminiert und versandt werden.
										</div>
									</div>
								</div>

				</div>

			</div>
		</div>

		<div id="services" style="display:none;">
			<div class="row">
				<p>Wir freuen uns, dass Sie sich für unsere Dienstleistungen interessieren. Momentan arbeiten wir daran, unser Serviceangebot zu erweitern und zu verbessern, um Ihnen zukünftig noch mehr Möglichkeiten und maßgeschneiderte Lösungen bieten zu können. </p>
				<p>In Kürze werden Sie hier eine vollständige Übersicht unserer weiteren Dienstleistungen finden können. Wir danken Ihnen für Ihr Verständnis und freuen uns darauf, bald mit Ihnen zusammenzuarbeiten.</p>
			</div>
		</div>

		<div id="prices" style="display:none;">
			<p>Bei der Bearbeitung von Feuerwehr-Laufkarten machen wir einen Unterschied zwischen der Erstellung neuer Feuerwehr-Laufkarten und der Aktualisierung bestehender Feuerwehr-Laufkarten. Hierbei richtet sich unsere Kostenstruktur durch eine Flatrate, die sich nach der Auftragsgröße richtet. Unsere Flat-Angebote basieren auf der Erstellung der aktuellen DIN 14675 unter Berücksichtigung der Anforderungen (TAB) der zuständigen Behörde. Sollte hierfür ein höherer Aufwand als für eine Feuerwehr-Laufkarte nach DIN 14675 entstehen, erlauben wir uns, diesen zu faktorisieren. Unsere Inklusivleistungen für Sie:</p>
			 <ul>
				<li>die Abstimmung mit der zuständigen Behörde</li>
				<li>der erste Korrekturlauf (Ausnahme: Grundrissänderungen)</li>
				<li>Auslieferung in DIN A4 - A3 laminiert und eingeschweißt mit integriertem, unverlierbarem Nummernreiter versehen</li>
				<li>Erstellung des Gesamt-PDF für das Archiv bei Projekten in FEUERWEHR-LAUFKARTE.EU</li>
			</ul>

			<div id="load_prices"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="">&nbsp;Lade Daten...</span></div>

			<div id="price_error" style="display:none;">
				<h3>Fehler beim abrufen der Preise!</h3>
			</div>

			<div id="price_table" style="display:none;">
				<div class="row">

					<div class="col-12 col-md-6">
							<h3>Neuerstellung</h3>
							<img src="img/preis_1.jpg" style="width:100%;max-width:650px;">

							<div class="mt-2">
								<p class="text-start" ><b>Flat 10</b> (1-10 Feuerwehr-Laufkarten): <span id="flat_10_neu"></span></p>
								<p class="text-start" ><b>Flat 50</b> (11-50 Feuerwehr-Laufkarten): <span id="flat_50_neu"></span></p>
								<p class="text-start" ><b>Flat 100</b> (51-100 Feuerwehr-Laufkarten): <span id="flat_100_neu"></span></p>
								<p class="text-start" ><b>Extended Flat</b> (ab 101 Feuerwehr-Laufkarten): <span id="flat_ext_neu"></span></p>
							</div>

					</div>

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

							<h3>Aktualisierung</h3>
							<img src="img/preis_2.jpg" style="width:100%;max-width:650px">

							<div class="mt-2">
								<p class="text-start" ><b>Flat 10</b> (1-10 Feuerwehr-Laufkarten): <span id="flat_10_akk"></span></p>
								<p class="text-start" ><b>Flat 50</b> (11-50 Feuerwehr-Laufkarten): <span id="flat_50_akk"></span></p>
								<p class="text-start" ><b>Flat 50</b> (11-50 Feuerwehr-Laufkarten): <span id="flat_100_akk"></span></p>
								<p class="text-start" ><b>Extended Flat</b> (ab 101 Feuerwehr-Laufkarten): <span id="flat_ext_akk"></span></p>
							</div>

					</div>

				</div>
			</div>
		</div>

  </div>

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


		<h2 class="mt-3">Willkommen zur FEUERWEHR-LAUFKARTE.EU Demo-Tour</h2>

		<p>Lassen Sie uns gemeinsam erkunden, wie unsere App Ihren Alltag erleichtern kann!</p>

		<div class="text-center mt-5 mb-3">
			<button class="btn btn-primary mb-2" onclick="start_tour()" id="start_tour_btn" >Los gehts's</button>

			<button class="btn btn-secondary ms-3 mb-2" onclick="end_tour_first()" id="end_tour_btn" >Demo abbrechen</button>
		</div>

	</div>

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

<div class="text-center mt-4 mb-3">
	<h5 class="mb-4">Möchten Sie die Demo-Tour  wirklich beenden?</h5>

	<button class="btn btn-primary" onclick="end_tour_final()" >ja, beenden</button>

	<button class="btn btn-secondary ms-3" onclick="resume_tour()">nein, bleiben</button>
</div>

</div>


<div id="demo_footer" style="display:none !important" class="d-flex justify-content-end align-items-center">
	<div id="demo_footer_sub" onclick="end_tour()"class="me-4">
		<span>Demo beenden</span>
		<span>X</span>
	</div>
</div>


<!-- Kontaktmöglichkeit als Overlay-->
<div id="contactOverlay" class="card p-2" style="width: 28rem;max-width: 70%;background-color: #6c757d;">
		<div class="card-body text-center">

			<button type="button" class="btn-close" style="position: absolute; right: 0.5rem; top: 0.5rem; background-color: #ffffff; color: #000;" aria-label="Close" onclick="closeOverlay()"></button>


				<h5 class="card-title" style="color: #ffffff;" >Möchten Sie Ihre Frage an uns stellen?</h5>
				<textarea class="form-control" id="q_field" rows="6"></textarea>
				<div class="text-center">
					<button id="send_q" class="btn btn-primary mt-3" onclick="send_q();">Abschicken</button>
			</div>

		</div>
</div>




<script>

	var driver_global = null;

	function closeOverlay() {
    document.getElementById('contactOverlay').style.display = 'none';
	}

	function send_q(){
		var q_send_val = $("#q_field").val();

		if( q_send_val == "" ) {
			bootbox.alert('Das Feld darf nicht leer sein!');
		}else{
			$.post("/inform_faq", { question :  q_send_val }).done(function( data )
			{
				bootbox.alert('Vielen Dank! Unsere Experten melden sich in Kürze bei ihnen.');
				$("#q_field").val("");
			}).fail(function(xhr, status, error) {
				bootbox.alert("Fehler! Anfrage wurde nicht gesendet!");
			});
		}
	}

	function show_questions(in_e){
		$("#questions").show();
		$("#services").hide();
		$("#prices").hide();
		$(".btn").removeClass("current_active");
		$(in_e).addClass("current_active");
	}

	function show_services(in_e){
		$("#questions").hide();
		$("#services").show();
		$("#prices").hide();
		$(".btn").removeClass("current_active");
		$(in_e).addClass("current_active");
	}

	function show_prices(in_e){
		$("#questions").hide();
		$("#services").hide();
		$("#prices").show();
		$(".btn").removeClass("current_active");
		$(in_e).addClass("current_active");
		$("#load_prices").show();

		$.get("/get_articel", function( result_data )
		{
			if(result_data == "denied"){
				show_login();
				return
			}else{ logged_in = true; }

			articel_price_array = JSON.parse(result_data);

			$("#load_prices").hide();
			if( articel_price_array.length == 0){
				$("#price_error").show();
				$("#price_table").hide();
			}else{
				$("#price_error").hide();
				$("#price_table").show();
			}

			var flat_10_neu = "";
			var flat_10_akk = "";

			var flat_50_neu = "";
			var flat_50_akk = "";

			var flat_100_neu = "";
			var flat_100_akk = "";

			var flat_100_neu = "";
			var flat_100_akk = "";

			var flat_ext_neu = "";
			var flat_ext_akk = "";

			for (let i = 0; i < articel_price_array.length; i++) {

				 if( articel_price_array[i].Name.includes("(Flat 10)") && articel_price_array[i].Name.includes("flk.eu")){
					 if(articel_price_array[i].Name.includes("(A)")){
						 flat_10_akk = articel_price_array[i].Price;
					 }else{
						 flat_10_neu = articel_price_array[i].Price;
					 }
				 }

				 if( articel_price_array[i].Name.includes("(Flat 50)") && articel_price_array[i].Name.includes("flk.eu")){
					 if(articel_price_array[i].Name.includes("(A)")){
						 flat_50_akk = articel_price_array[i].Price;
					 }else{
						 flat_50_neu = articel_price_array[i].Price;
					 }
				 }

				 if( articel_price_array[i].Name.includes("(Flat 100)") && articel_price_array[i].Name.includes("flk.eu")){
					 if(articel_price_array[i].Name.includes("(A)")){
						 flat_100_akk = articel_price_array[i].Price;
					 }else{
						 flat_100_neu = articel_price_array[i].Price;
					 }
				 }

				 if( articel_price_array[i].Name.includes("(ext. Flat)") && articel_price_array[i].Name.includes("flk.eu")){
					 if(articel_price_array[i].Name.includes("(A)")){
						 flat_ext_akk = articel_price_array[i].Price;
					 }else{
						 flat_ext_neu = articel_price_array[i].Price;
					 }
				 }

			}

			$("#flat_10_neu").text( Number(flat_10_neu).toFixed(2) + "€");
			$("#flat_10_akk").text( Number(flat_10_akk).toFixed(2) + "€")

			$("#flat_50_neu").text( Number(flat_50_neu).toFixed(2) + "€")
			$("#flat_50_akk").text( Number(flat_50_akk).toFixed(2) + "€")

			$("#flat_100_neu").text( Number(flat_100_neu).toFixed(2) + "€")
			$("#flat_100_akk").text( Number(flat_100_akk).toFixed(2) + "€")

			$("#flat_ext_neu").text( Number(flat_ext_neu).toFixed(2) + "€")
			$("#flat_ext_akk").text( Number(flat_ext_akk).toFixed(2) + "€")

		});


	}

	function onboard(){
		if(driver_global == null)
		{
			driver_global = new Driver({
				allowClose: false,
				nextBtnText: '>',
				prevBtnText: '<',
				doneBtnText: ' <button id="tour_finish_btn" class="btn btn-primary" onclick="end_tour_final()" >Zur Anwendung</button>',
				onNext: (Element) => {
				},
				onPrevious: (Element) => {
				},
				onReset:(Element) => {
					$("#demo_footer").hide();
					$("#demo_footer").attr("style", "display: none !important");
				},
			});

			var mp = 'right';

			const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)

			if(vw < 768)
			{
				mp = 'bottom';
			}

			driver_global.defineSteps([
				{
					element: '#home_nav',
					className: 'popover-class',
					popover: {
					title: '<span class="onboard_position" >1 von 10</span><br>' + 'Startseite',
					description: 'Hier finden Sie Ihr Dashboard, um sich schnell einen Überblick zu verschaffen.',
					position: mp
					}
				},
				{
					element: '#inbox_nav',
					popover: {
					title: '<span class="onboard_position" >2 von 10</span><br>' + 'Ihre Nachrichten',
					description: 'Wurden Sie in einem Projekt erwähnt? Hier finden Sie alle Erwähnungen in einer Übersicht."',
					position: mp
					}
				},
				{
					element: '#projects_nav',
					popover: {
					title: '<span class="onboard_position" >3 von 10</span><br>' + 'Alle Projekte',
					description: 'Hier finden Sie alle aktuellen Projekte.',
					position: mp
					}
				},
				{
					element: '#orders_nav',
					popover: {
					title: '<span class="onboard_position" >4 von 10</span><br>' + 'Alle Aufträge',
					description: 'Liefert die Übersicht und den Status aller Aufträge.',
					position: mp
					}
				},
				{
					element: '#bills_nav',
					popover: {
					title: '<span class="onboard_position" >5 von 10</span><br>' + 'Alle Rechnungen',
					description: 'Hier können Sie Ihre Rechnungen einsehen.',
					position: mp
					}
				},
				{
					element: '#calendar_nav',
					popover: {
					title: '<span class="onboard_position" >6 von 10</span><br>' + 'Kalender',
					description: 'Ereignisse in Projekten sind hier dargestellt.',
					position: mp
					}
				},
				{
					element: '#archivs_nav',
					popover: {
					title: '<span class="onboard_position" >7 von 10</span><br>' + 'Ihr Archiv',
					description: 'Hier finden Sie alle archivierten Projekte.',
					position: mp
					}
				},
				{
					element: '#team_nav',
					popover: {
					title: '<span class="onboard_position" >8 von 10</span><br>' + 'Ihr Team',
					description: 'Verschaffen Sie sich einen Überblick über Ihr Team und laden Sie neue Mitarbeiter ein.',
					position: mp
					}
				},
				{
					element: '#faq_nav',
					popover: {
					title: '<span class="onboard_position" >9 von 10</span><br>' + 'Noch Fragen?',
					description: 'Hier finden Sie häufig gestellte Fragen.',
					position: mp
					}
				},
				{
					element: '#profil_nav',
					popover: {
					title: '<span class="onboard_position" >10 von 10</span><br>' + 'Einstellungen',
					description: 'Ihre hinterlegten Daten können Sie hier anpassen.',
					position: "left"
					}
				},
			]);
		}

		start_dialog = bootbox.dialog({
		message: $("#start_tour_div").html(),
		closeButton: false,
		centerVertical: true,
		size: 'large'
		});

	}

	function start_tour(){
			$("#demo_footer").show();
			try {
				start_dialog.modal('hide');
			}catch (e) {}
			bootbox.hideAll();

			setTimeout(function(){ driver_global.start(0); }, 300);
		}

	function end_tour_first(){
			start_dialog.modal('hide');
			bootbox.hideAll();
	}

	function end_tour_final(){
			$("#demo_footer").hide();
			$("#demo_footer").attr("style", "display: none !important");
			driver_global.reset();
			try {
				start_dialog.modal('hide');
			}catch (e) {}

			try {
				end_dialog.modal('hide');
			}catch (e) {}

	}

	function resume_tour(){
			try {
				end_dialog.modal('hide');
			}catch (e) {}
			$("#driver-page-overlay").show();
			$("#driver-popover-item").show();
	}

	function end_tour(){
			end_dialog = bootbox.dialog({
				message: $("#end_tour_div").html(),
				closeButton: false,
				centerVertical: true,
				size: 'small'
			});

			$("#driver-page-overlay").hide();
			$("#driver-popover-item").hide();
	}


</script>

`;