<script lang="ts">
	import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
	import Progressbar from "#components/Ausweis/Progressbar.svelte";
	import Bereich from "#components/labels/Bereich.svelte";
	import type { BedarfsausweisGewerbe, BedarfsausweisWohnen, Bezahlmethoden, GEGNachweisGewerbe, GEGNachweisWohnen, Unterlage, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "#lib/client/prisma.js";
	import { Enums } from "#lib/client/prisma.js";
	import {
		API_ACCESS_TOKEN_COOKIE_NAME,
		PRICES,
	} from "#lib/constants.js";
	import Cookies from "js-cookie";
	import {
		AufnahmeClient,
		BenutzerClient,
		BildClient,
		ObjektClient,
		RechnungClient,
		VerbrauchsausweisWohnenClient,
	} from "#components/Ausweis/types.js";
	import { validateAccessTokenClient } from "src/client/lib/validateAccessToken.js";
	import { api } from "astro-typesafe-api/client";
	import PaymentOption from "#components/PaymentOption.svelte";
	import Overlay from "#components/Overlay.svelte";
	import EmbeddedAuthFlowModule from "./EmbeddedAuthFlowModule.svelte";
	import { ausweisSpeichern } from "#client/lib/ausweisSpeichern.js";
	import { addNotification } from "#components/Notifications/shared.js";
	import NotificationWrapper from "#components/Notifications/NotificationWrapper.svelte";
	import { nachweisSpeichern } from "#client/lib/nachweisSpeichern.js";
	import HelpLabel from "#components/labels/HelpLabel.svelte";
	import InputLabel from "#components/labels/InputLabel.svelte";
	import PlzSuche from "#components/PlzSuche.svelte";
	import { getMaximumDevitationInPercent } from "#client/lib/helpers.js";
	import { endEnergieVerbrauchVerbrauchsausweis_2016 } from "#lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016.js";
	import { endEnergieVerbrauchVerbrauchsausweisGewerbe_2016 } from "#lib/Berechnungen/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbe_2016.js";
		
	export let user: Partial<BenutzerClient>;
	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
	export let aufnahme: AufnahmeClient;
	export let objekt: ObjektClient;
	export let bilder: BildClient[];
	export let unterlagen: Unterlage[];
	export let rechnung: RechnungClient | null = null;
	export let ausweisart: Enums.Ausweisart;
	export let aktiveBezahlmethode: Bezahlmethoden = Enums.Bezahlmethoden.paypal;

	export let partner_code: string;


	let email: string, vorname: string, name: string, empfaenger: string, strasse: string, plz: string, ort: string, zusatzzeile: string, telefon: string;

	if (user.rolle !== Enums.BenutzerRolle.ADMIN) {
		// Falls der aktuelle Benutzer kein Admin ist können wir die Kundendaten aus den Stammdaten vorausfüllen.
		email = rechnung?.email || localStorage.getItem("kundendaten.email") || user.email || "";
		vorname = localStorage.getItem("kundendaten.vorname") || user.vorname || "";
		name = localStorage.getItem("kundendaten.name") || user.name || "";
		empfaenger = rechnung?.empfaenger || localStorage.getItem("kundendaten.empfaenger") || (user.vorname && user.name ? `${user.vorname} ${user.name}` : "")
		strasse = rechnung?.strasse || localStorage.getItem("kundendaten.strasse") || user.adresse || "";
		plz = rechnung?.plz || localStorage.getItem("kundendaten.plz") || user.plz || "";
		ort = rechnung?.ort || localStorage.getItem("kundendaten.ort") || user.ort || "";
		zusatzzeile = rechnung?.zusatzzeile || localStorage.getItem("kundendaten.zusatzzeile") || ""
		telefon = rechnung?.telefon || localStorage.getItem("kundendaten.telefon") || user.telefon || "";
	}

	let abweichende_versand_adresse = JSON.parse(localStorage.getItem("kundendaten.abweichende_versand_adresse") || "false")

	let versand_email: string | undefined,
			versand_zusatzzeile: string | undefined,
			versand_empfaenger: string | undefined,
			versand_strasse: string | undefined,
			versand_plz: string | undefined,
			versand_ort: string | undefined;
	$: {
		if (!abweichende_versand_adresse) {
			versand_email = email
			versand_zusatzzeile = zusatzzeile
			versand_empfaenger = empfaenger
			versand_strasse = strasse
			versand_plz = plz
			versand_ort = ort
		}
	}

	$: {
		// Wir speichern jede Änderung an den Kundendaten im localStorage ab.
		localStorage.setItem("kundendaten.email", email)
		localStorage.setItem("kundendaten.vorname", vorname)
		localStorage.setItem("kundendaten.name", name)
		localStorage.setItem("kundendaten.empfaenger", empfaenger)
		localStorage.setItem("kundendaten.strasse", strasse)
		localStorage.setItem("kundendaten.plz", plz)
		localStorage.setItem("kundendaten.ort", ort)
		localStorage.setItem("kundendaten.zusatzzeile", zusatzzeile)
		localStorage.setItem("kundendaten.telefon", telefon)
		localStorage.setItem("kundendaten.abweichende_versand_adresse", abweichende_versand_adresse)
	}

	let services: {
		name: string;
		id: Enums.Service;
		price: number;
		selected: boolean;
	}[] = [
		{
			name: "Qualitätsdruck per Post (zusätzlich zur PDF Version)",
			id: Enums.Service.Qualitaetsdruck,
			price: 9,
			selected: false,
		},
		{
			name: "Aushang (für öffentliche Gebäude gesetzlich vorgeschrieben)",
			id: Enums.Service.Aushang,
			price: 10,
			selected: false,
		},
		{
			name: "Same Day Service - Bestellung Werktags vor <b>12:00&nbsp;Uhr</b><br>Ausstellung bis <b>18:00&nbsp;Uhr</b> am gleichen Tag",
			id: Enums.Service.SameDay,
			price: 29,
			selected: false,
		},
		{
			name: "Telefonische Energie-Effizienzberatung",
			id: Enums.Service.Telefonberatung,
			price: 75,
			selected: false,
		},
	];

	let prices = PRICES[ausweisart];

	let basePrice: number = prices[ausweis.ausweistyp];

	$: price =
		basePrice +
		services.reduce(
			(acc, service) => (service.selected && acc + service.price) || acc,
			0
		);

	const zurueck = {
	[Enums.Ausweisart.VerbrauchsausweisWohnen]:
		new URL("/energieausweis-erstellen/verbrauchsausweis-wohngebaeude", window.location.origin),
	[Enums.Ausweisart.VerbrauchsausweisGewerbe]:
		new URL("/energieausweis-erstellen/verbrauchsausweis-gewerbe", window.location.origin),
	[Enums.Ausweisart.BedarfsausweisWohnen]:
		new URL("/energieausweis-erstellen/bedarfsausweis-wohngebaeude", window.location.origin),
	[Enums.Ausweisart.GEGNachweisWohnen]:
		new URL("/angebot-anfragen/geg-nachweis-wohnen-anfragen", window.location.origin),
	[Enums.Ausweisart.GEGNachweisGewerbe]:
		new URL("/angebot-anfragen/geg-nachweis-gewerbe-anfragen", window.location.origin),
	[Enums.Ausweisart.BedarfsausweisGewerbe]:
		new URL("/angebot-anfragen/bedarfsausweis-gewerbe-anfragen", window.location.origin),
	}[ausweisart];

	if (ausweis.id) {
		zurueck.searchParams.append("id", ausweis.id)
	}

	async function anfordern() {
		if (!form.checkValidity()) {
			addNotification({
				dismissable: true,
				message: "Fehlende Daten.",
				subtext: "Nicht alle notwendigen Felder sind ausgefüllt, bitte füllen sie diese aus bevor sie es erneut versuchen.."
			})

			form.reportValidity();
			return;
		}

		if (!await validateAccessTokenClient()) {
		loginAction = anfordern
		loginOverlayHidden = false;
			return
		}

		loginOverlayHidden = true

		let result: Awaited<ReturnType<typeof nachweisSpeichern>> | null = null;

		try {
			result = await nachweisSpeichern(ausweis as unknown as GEGNachweisWohnen | GEGNachweisGewerbe | BedarfsausweisGewerbe, objekt, aufnahme, bilder, unterlagen, ausweisart)
		} catch(e) {
			addNotification({
				dismissable: true,
				message: "Ups... Das hat nicht geklappt.",
				subtext: "Speichern ist fehlgeschlagen, bitte versuchen sie es erneut oder kontaktieren sie unseren Support."
			})
			return;
		}

		if (!result) {
			addNotification({
				dismissable: true,
				message: "Ups... Das hat nicht geklappt.",
				subtext: "Speichern ist fehlgeschlagen, bitte versuchen sie es erneut oder kontaktieren sie unseren Support."
			})
			return;
		}

		try {
			const { id } = await api.rechnung.anfordern.PUT.fetch(
				{
					email: email,
					empfaenger: empfaenger,
					strasse: strasse,
					plz: plz,
					ort: ort,
					versand_empfaenger: versand_empfaenger,
					versand_strasse: versand_strasse,
					versand_plz: versand_plz,
					versand_ort: versand_ort,
					telefon: telefon,
					nachweis_id: result.nachweis_id,
				},
				{
					headers: {
						Authorization: `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`,
					},
				}
			);

			// Alle alten Ausweisdateien im localStorage löschen.
			localStorage.clear();

			window.location.href = `/einpreisung/success?e=${id}&a=${result.nachweis_id}`;
		} catch (e) {
			addNotification({
				dismissable: true,
				message: "Ups... Das hat nicht geklappt.",
				subtext: "Beim erstellen des Nachweises ist etwas schiefgelaufen, bitte versuchen sie es erneut oder kontaktieren sie unseren Support."
			})
		}
	}

	async function speichern() {
		loginAction = speichern;
		if (!await validateAccessTokenClient()) {
			loginOverlayHidden = false;
			return
		}

		loginOverlayHidden = true

		let result: Awaited<ReturnType<typeof ausweisSpeichern>> | Awaited<ReturnType<typeof nachweisSpeichern>> | null = null;
		try {
			if (ausweisart === Enums.Ausweisart.GEGNachweisWohnen || ausweisart === Enums.Ausweisart.GEGNachweisGewerbe || ausweisart === Enums.Ausweisart.BedarfsausweisGewerbe) {
				result = await nachweisSpeichern(ausweis as unknown as GEGNachweisWohnen | GEGNachweisGewerbe | BedarfsausweisGewerbe, objekt, aufnahme, bilder, unterlagen, ausweisart)
			} else {
				result = await ausweisSpeichern(ausweis, objekt, aufnahme, bilder, unterlagen, ausweisart)
			}
		} catch(e) {
			addNotification({
				dismissable: true,
				message: "Ups... Das hat nicht geklappt.",
				subtext: "Speichern ist fehlgeschlagen, bitte versuchen sie es erneut oder kontaktieren sie unseren Support."
			})
		}

		if (result !== null) {
			window.history.pushState(
				{},
				"",
				`${location.pathname}?uid=${ausweis.id}`
			);

			localStorage.clear();
			window.location.href = `/speichern-erfolgreich?id=${ausweis.id}`
		}
	}

	async function bestellen() {
		if (!form.checkValidity()) {
			addNotification({
				dismissable: true,
				message: "Fehlende Daten.",
				subtext: "Nicht alle notwendigen Felder sind ausgefüllt, bitte füllen sie diese aus bevor sie es erneut versuchen.."
			})

			form.reportValidity();
			return;
		}

		if (!await validateAccessTokenClient()) {
			loginAction = bestellen
			loginOverlayHidden = false;
			return
		}

		loginOverlayHidden = true

		let result: Awaited<ReturnType<typeof ausweisSpeichern>> | Awaited<ReturnType<typeof nachweisSpeichern>> | null = null;
		if (ausweisart === Enums.Ausweisart.GEGNachweisWohnen || ausweisart === Enums.Ausweisart.GEGNachweisGewerbe || ausweisart === Enums.Ausweisart.BedarfsausweisGewerbe) {
			result = await nachweisSpeichern(ausweis, objekt, aufnahme, bilder, unterlagen, ausweisart)
		} else {
			result = await ausweisSpeichern(ausweis, objekt, aufnahme, bilder, unterlagen, ausweisart)
		}

		if (result === null) {
			if (ausweisart === Enums.Ausweisart.GEGNachweisWohnen || ausweisart === Enums.Ausweisart.GEGNachweisGewerbe || ausweisart === Enums.Ausweisart.BedarfsausweisGewerbe) {
				addNotification({
					dismissable: true,
					message: "Ups... Das hat nicht geklappt.",
					subtext: "Der Ausweis konnte nicht gespeichert werden, bitte versuchen sie es erneut oder kontaktieren sie unseren Support."
				})
			} else {
				addNotification({
					dismissable: true,
					message: "Ups... Das hat nicht geklappt.",
					subtext: "Ihre Anfrage für einen GEG Nachweis konnte nicht gespeichert werden, bitte versuchen sie es erneut oder kontaktieren sie unseren Support."
				})
			}
		}

		if (rechnung && rechnung.status === "paid") {
			window.location.href = "/dashboard"
			return;
		}

		try {
			let id: string, checkout_url: string | undefined;

			if (rechnung) {
				const result = await api.rechnung._id.PATCH.fetch({
					bezahlmethode: aktiveBezahlmethode,
					abweichende_versand_adresse: abweichende_versand_adresse,
					empfaenger: empfaenger,
					strasse: strasse,
					plz: plz,
					ort: ort,
					versand_empfaenger: versand_empfaenger,
					versand_strasse: versand_strasse,
					versand_plz: versand_plz,
					versand_ort: versand_ort,
					telefon: telefon,
					versand_zusatzzeile: versand_zusatzzeile
				}, {
					params: {
						id: rechnung.id
					},
					headers: {
						Authorization: `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`,
					},
				})				

				id = result.id
				checkout_url = result.checkout_url
			} else {
				const result = await api.rechnung.PUT.fetch(
					{
						ausweisart,
						bezahlmethode: aktiveBezahlmethode,
						services: services
							.filter((service) => service.selected)
							.map((service) => service.id),
						email: email,
						empfaenger: empfaenger,
						strasse: strasse,
						plz: plz,
						ort: ort,
						versand_empfaenger: versand_empfaenger,
						versand_strasse: versand_strasse,
						versand_plz: versand_plz,
						versand_ort: versand_ort,
						telefon: telefon,
						ausweis_id: ausweis.id,
						partner_code
					},
					{
						headers: {
							Authorization: `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`,
						},
					}
				);

				id = result.id;
				checkout_url = result.checkout_url;
			}

			// Alle alten Ausweisdateien im localStorage löschen.
			localStorage.clear();

			if (aktiveBezahlmethode === Enums.Bezahlmethoden.rechnung) {
				window.location.href = `/payment/success?r=${id}&a=${ausweis.id}`;
			} else {
				window.location.href = checkout_url as string;
			}
		} catch (e) {
			addNotification({
				dismissable: true,
				message: "Ups... Das hat nicht geklappt.",
				subtext: "Beim erstellen des Ausweises ist etwas schiefgelaufen, bitte versuchen sie es erneut oder kontaktieren sie unseren Support."
			})
		}
	}

	/**
	 * TODO
	 * Ausschlusskriterien: Neubau, Modernisierung
			Baujahr vor 1978, unsaniert und bis 4 Wohneinheiten /
			Heizung jünger als 3 Jahre / Verbrauchsjahre unvollständig / Verbrauchsjahre nicht aktuell genug /
			Klimafaktoren unvollständig /
			Leerstand größer 30% /
			Fehlende oder unvollständige Bilder (pro Abschnitt mindestens ein Bild) /
			Fehlende Angaben zum Sanierungsstand (Bei F mindestens 2 Haken), (Bei G mindestens 1 Haken)
	*/
	let bestellenNichtMoeglich = false;
	if (
		((ausweis.ausstellgrund === "Neubau" ||
			ausweis.ausstellgrund === "Modernisierung") &&
			aufnahme.baujahr_gebaeude[0] < 1978 &&
			aufnahme.saniert === false &&
			aufnahme.einheiten &&
			aufnahme.einheiten > 4) ||
		new Date().getFullYear() - aufnahme.baujahr_heizung[0] < 3 ||
		!ausweis.verbrauch_1 ||
		!ausweis.verbrauch_2 ||
		!ausweis.verbrauch_3 ||
		(aufnahme.leerstand && aufnahme.leerstand > 30)
	) {
		bestellenNichtMoeglich = true;
	}

	const gegAnfrage =
		ausweisart === Enums.Ausweisart.GEGNachweisWohnen ||
		ausweisart === Enums.Ausweisart.BedarfsausweisGewerbe ||
		ausweisart === Enums.Ausweisart.GEGNachweisGewerbe;

	let loginOverlayHidden = true;
	let loginAction = () => {};
	let form: HTMLFormElement;
</script>

<div
	id="skala"
	class="bg-white grid grid-cols-1 gap-x-8 gap-y-4 px-0 sm:p-4

2xl:grid-cols-2 2xl:gap-x-8
"
>
	{#if !gegAnfrage}
		
			<PerformanceScore
				bind:ausweis
				bind:aufnahme
				bind:objekt
				{ausweisart}
			/>
	{/if}

	
		{#if gegAnfrage}
			<Progressbar
				active={1}
				steps={["Gebäudedaten", "Kundendaten", "Bestätigung"]}
				{ausweisart}
				ausweistyp={"ausweistyp" in ausweis ? ausweis.ausweistyp : ausweis.nachweistyp}
				anliegen={"Angebot anfragen"}
			/>
		{:else}
			<Progressbar active={1} {ausweisart} ausweistyp={ausweis.ausweistyp} anliegen={"Energieausweis erstellen"} />
		{/if}
	</div>


<form id="formInput-2" bind:this={form}>
	<div id="formular-box" class="formular-boxen ring-0">
		<Bereich
			bereich="1"
			title="Eingabe des Ansprechpartners"
		>
		<div
		id="ansprechpartner"
		class="bereich-box grid
	grid-cols-1 gap-x-4 gap-y-8
	sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
	xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
	"
	>
	
		<!-- Vorname * -->
	
		<div class="input-standard order-1 md:order-1 xl:order-1">
			<InputLabel title="Vorname *"></InputLabel>
	
			<input name="vorname" type="text" bind:value={vorname} required />
	
			<div class="help-label">
				<HelpLabel>
					Bitte Geben Sie hier den Vornamen des Ansprechpartners&nbsp;ein.
				</HelpLabel>
			</div>
		</div>
	
		<!-- Nachname * -->
	
		<div class="input-standard order-2 md:order-2 xl:order-2">
			<InputLabel title="Nachname *"></InputLabel>
	
			<input name="name" type="text" bind:value={name} required />
	
			<div class="help-label">
				<HelpLabel>
					Bitte Geben Sie hier den Nachnamen des
					Ansprechpartners&nbsp;ein.
				</HelpLabel>
			</div>
		</div>
	
		<!-- Telefon & Email * -->
	
		<div class="input-standard order-3 md:order-3 xl:order-3">
			<InputLabel title="Telefonnummer *"></InputLabel>
	
			<input name="telefon" bind:value={telefon} type="text" required />
	
			<div class="help-label">
				<HelpLabel>
					Bitte Geben Sie hier die Telefonnummer des
					Ansprechpartners&nbsp;ein.
				</HelpLabel>
			</div>
		</div>
	</div>
	</Bereich
		>

		<Bereich bereich="2" title="Rechnungsadresse">
			<div
	id="rechnungsadresse"
	class="bereich-box grid 
grid-cols-1 gap-x-4 gap-y-8
sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
">
	<!-- Empfänger * -->

	<div class="input-standard order-1 md:order-1 xl:order-1">
		<InputLabel title="Rechnungs-Empfänger *"></InputLabel>

		<input
			name="rechnung_empfaenger"
			type="text"
			bind:value={empfaenger}
			required
			data-rule-maxlength="100"
			data-msg-maxlength="max. 100 Zeichen"
		/>

		<div class="help-label">
			<HelpLabel>
				Bitte geben Sie den Empfänger ein, auf den die Rechnung
				ausgestellt wird.
			</HelpLabel>
		</div>
	</div>

	<!-- Straße, Hausnummer * -->

	<div class="input-standard order-2 md:order-2 xl:order-2">
		<InputLabel title="Straße, Hausnummer *"></InputLabel>

		<input
			name="rechnung_strasse"
			bind:value={strasse}
			type="text"
			required
			data-rule-maxlength="40"
			data-msg-maxlength="max. 40 Zeichen"
		/>

		<div class="help-label">
			<HelpLabel>
				Bitte geben Sie die Strasse und Hausnummer, so wie Sie auf der
				Rechnung erscheinen soll, ein.
			</HelpLabel>
		</div>
	</div>

	<!-- PLZ / ORT -->

	<div class="grid grid-cols-[2fr_4fr] gap-x-4 order-3 md:order-3 xl:order-3">
		<div class="input-noHelp">
			<InputLabel title="PLZ *"></InputLabel>
			<PlzSuche
				name="rechnung_plz"
				bind:zip={plz}
				bind:city={ort}
			/>
		</div>

		<div class="input-standard">
			<InputLabel title="Ort *"></InputLabel>

			<input
				name="rechnung_ort"
				type="text"
				required
				bind:value={ort}
			/>

			<div class="help-label">
				<HelpLabel>
					Bitte geben Sie die PLZ des Ortes, so wie Sie auf der
					Rechnung erscheinen soll, ein.
				</HelpLabel>
			</div>
		</div>
	</div>

	<!-- Zusatzzeile -->

	<div class="input-standard order-4 md:order-4 xl:order-4">
		<InputLabel title="Zusatzzeile"></InputLabel>

		<input
			name="rechnung_zusatzzeile"
			bind:value={zusatzzeile}
			type="text"
			data-rule-maxlength="80"
			data-msg-maxlength="max. 80 Zeichen"
		/>

		<div class="help-label">
			<HelpLabel>
				Bitte geben Sie, falls erforderlich, zusätzliche nformationen
				ein.
			</HelpLabel>
		</div>
	</div>

	<!-- E-mail -->

	<div class="input-standard order-5 md:order-5 xl:order-5">
		<InputLabel title="E-mail *"></InputLabel>

		<input name="rechnung_email" bind:value={email} type="email" />

		<div class="help-label">
			<HelpLabel>
				Bitte geben Sie die E-Mail Adresse des Rechnungsempfängers ein.
			</HelpLabel>
		</div>
	</div>


	<div class="sm:col-span-3 order-7 md:order-7 xl:order-7">
		<div
			class="grid grid-cols-[25px_max-content] items-center justify-items-start"
		>
			<input
				id="abweichende_versand_adresse"
				class="w-[15px] h-[15px]"
				type="checkbox"
				name="abweichende_versand_adresse"
				bind:checked={abweichende_versand_adresse}
			/>

			<label for="abweichende_versand_adresse" class="cursor-pointer"
				>abweichende Versandadresse</label
			>
		</div>
	</div>

	{#if abweichende_versand_adresse}
		<!-- Versand Empfänger * -->

		<div class="input-standard order-8 md:order-8 xl:order-8">
			<InputLabel title="Versand-Empfänger *"></InputLabel>

			<input
				name="versand_empfaenger"
				type="text"
				readonly={!abweichende_versand_adresse}
				bind:value={versand_empfaenger}
				required
				data-rule-maxlength="100"
				data-msg-maxlength="max. 100 Zeichen"
			/>

			<div class="help-label">
				<HelpLabel>
					Bitte geben Sie den Namen des Versand-Empfängers ein.
				</HelpLabel>
			</div>
		</div>

		<!-- Versand Straße, Hausnummer * -->

		<div class="input-standard order-9 md:order-9 xl:order-9">
			<InputLabel title="Straße, Hausnummer *"></InputLabel>

			<input
				name="versand_strasse"
				type="text"
				readonly={!abweichende_versand_adresse}
				bind:value={versand_strasse}
				required
				data-rule-maxlength="40"
				data-msg-maxlength="max. 40 Zeichen"
			/>

			<div class="help-label">
				<HelpLabel>
					Bitte geben Sie die Versand-Empfänger Strasse und Hausnummer
					ein, an die die Rechnung versandt wird.
				</HelpLabel>
			</div>
		</div>

		<!-- PLZ / ORT -->

		<div
			class="grid grid-cols-[2fr_4fr] gap-x-4 order-10 md:order-10 xl:order-10"
		>
			<div class="input-noHelp">
				<InputLabel title="PLZ *"></InputLabel>
				<PlzSuche
					name="versand_plz"
					readonly={!abweichende_versand_adresse}
					bind:zip={versand_plz}
					bind:city={versand_ort}
				/>
			</div>

			<div class="input-standard">
				<InputLabel title="Ort *"></InputLabel>

				<input
					name="versand_ort"
					type="text"
					readonly
					required
					bind:value={versand_ort}
				/>

				<div class="help-label">
					<HelpLabel>
						Bitte geben Sie die Versand-Empfänger PLZ des Ortes ein,
						an den die Rechnung versandt wird.
					</HelpLabel>
				</div>
			</div>
		</div>

		<!-- Zusatzzeile -->

		<div class="input-standard order-11 md:order-11 xl:order-11">
			<InputLabel title="Zusatzzeile"></InputLabel>

			<input
				name="versand_zusatzzeile"
				type="text"
				readonly={!abweichende_versand_adresse}
				bind:value={versand_zusatzzeile}
				data-rule-maxlength="80"
				data-msg-maxlength="max. 80 Zeichen"
			/>

			<div class="help-label">
				<HelpLabel>
					Bitte geben Sie, falls erforderlich, zusätzliche
					nformationen ein.
				</HelpLabel>
			</div>
		</div>

		<!-- E-mail -->

		<div class="input-standard order-12 md:order-12 xl:order-12">
			<InputLabel title="E-mail *"></InputLabel>

			<input
				name="versand_email"
				bind:value={versand_email}
				type="email"
			/>

			<div class="help-label">
				<HelpLabel>
					Bitte geben Sie die E-Mail Adresse des Versand-Empfängers
					ein.
				</HelpLabel>
			</div>
		</div>

		<!-- Telefon 

<div class="input-standard order-[13] md:order-[13] xl:order-[13]">
	<Inputlabel title="Telefon *"></Inputlabel>

    <input
    name="rechnung_telefon"
    bind:value={rechnung.telefon}
    type="text"
/>

		<div class="help-label">
				<HelpLabel>
					Bitte geben Sie die Telefonnummer des Versand-Empfängers ein.
				</HelpLabel>
			</div>
</div>
-->
	{/if}
</div>
</Bereich
		>

		{#if !gegAnfrage}
			<Bereich bereich="3" title="Bezahlmethode">
				<div
					id="bezahlung"
					class="bereich-box grid
grid-cols-3 sm:grid-cols-5 justify-around justify-items-center items-center"
				>
					<PaymentOption
						bezahlmethode={Enums.Bezahlmethoden.paypal}
						bind:aktiveBezahlmethode
						name={"PayPal"}
						icon={"/images/paypal.png"}
					></PaymentOption>
					<PaymentOption
						bezahlmethode={Enums.Bezahlmethoden.sofort}
						bind:aktiveBezahlmethode
						name={"Sofort"}
						icon={"/images/sofort.png"}
					></PaymentOption>
					<PaymentOption
						bezahlmethode={Enums.Bezahlmethoden.giropay}
						bind:aktiveBezahlmethode
						name={"Giropay"}
						icon={"/images/giropay.png"}
					></PaymentOption>
					<PaymentOption
						bezahlmethode={Enums.Bezahlmethoden.creditcard}
						bind:aktiveBezahlmethode
						name={"Kreditkarte"}
						icon={"/images/creditcard.png"}
					></PaymentOption>
					<PaymentOption
						bezahlmethode={Enums.Bezahlmethoden.rechnung}
						bind:aktiveBezahlmethode
						name={"Rechnung"}
						icon={"/images/rechnung.png"}
					></PaymentOption>
				</div></Bereich
			>
			<div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 my-6">
				<div class="zusaetze bereich-box bg-white">
					<h3>Zusatzleistungen:</h3>

					{#each services as service}
						<div class="zusatz">
							<input
								type="checkbox"
								bind:checked={service.selected}
							/>
							<div class="text-right pr-6">
								<b>{@html service.price} €</b> inkl.&nbsp;Mwst
							</div>
							<div>{@html service.name}</div>
						</div>
					{/each}
				</div>

				<div class=" bereich-box bg-white ring-primary/50 ring-2">
					<h3>Kosten:</h3>

					<div class="ProduktKostenTabelle">
						<div class="zeile betrag">
							{#if ausweis.ausweistyp === Enums.AusweisTyp.Standard || ausweis.ausweistyp === Enums.AusweisTyp.standardXL}
								<span>Netto-Preis Energieausweis</span>
							{:else if ausweis.ausweistyp === Enums.AusweisTyp.Beratung || ausweis.ausweistyp === Enums.AusweisTyp.BeratungXL}
								<span>Energieausweis inkl. Beratung</span>
							{:else if ausweis.ausweistyp === Enums.AusweisTyp.Offline || ausweis.ausweistyp === Enums.AusweisTyp.OfflineXL}
								<span>Energieausweis Offline</span>
							{/if}
							<span>:</span>
							<div class="text-right">
								<b>{(price * 0.81).toFixed(2) + " €"}</b>
							</div>
						</div>

						<div class="zeile betrag">
							<div>Zusatzleistung (Prüfung Mehraufwand)</div>
							<div>:</div>
							<div class="text-right"><b>0.00 €</b></div>
						</div>

						<div class="zeile betrag">
							<div>19% gesetzl. MwSt.</div>
							<div>:</div>
							<div class="text-right">
								<b>{(price * 0.19).toFixed(2) + " €"}</b>
							</div>
						</div>
						<div class="zeile betrag mt-4">
							<div><b>Preis inkl. MwSt.</b></div>
							<div>:</div>
							<div class="text-right">
								<b>{price.toFixed(2) + " €"}</b>
							</div>
						</div>
						<div class="zeile betrag mt-4 items-center">
							<div><b>Bezahlmethode</b></div>
							<div>:</div>
							<div class="justify-self-end">
								<img
									src="images/{aktiveBezahlmethode}.png"
									alt={aktiveBezahlmethode}
								/>
							</div>
						</div>
					</div>
				</div>
			</div>
		{/if}

		<!-- Falls wir es mit einem Ausweis zu tun haben und der Nutzer keine Hilfe bestellt hat dann zeigen wir eine Box mit sachen an die vielleicht unklar sind. -->
		{#if (ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen || ausweisart === Enums.Ausweisart.VerbrauchsausweisGewerbe || ausweisart === Enums.Ausweisart.BedarfsausweisWohnen) && (ausweis.ausweistyp === Enums.AusweisTyp.Standard || ausweis.ausweistyp === Enums.AusweisTyp.standardXL)}
		<div class="grid grid-cols-1 sm:grid-cols-1 gap-x-6 my-6">
			<div class="pruefpunkte bereich-box bg-white">
				<h3>Bitte untenstehende Punkte bestätigen. Bitte gehen Sie gegebenenfalls zurück zum Formular und überprüfen bzw. korrigieren Ihre Eingaben.</h3>

					{#if ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen || ausweisart === Enums.Ausweisart.VerbrauchsausweisGewerbe}
						{@const request = ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen ? endEnergieVerbrauchVerbrauchsausweis_2016(ausweis, aufnahme, objekt) : endEnergieVerbrauchVerbrauchsausweisGewerbe_2016(ausweis, aufnahme, objekt)}
			
						{#await request}
							
						{:then berechnungen}
							<!-- Verbrauchsausweis Wohnen, Gewerbe [altes System: $ausweis->baujahr_anlage < (intval(date("Y")) - 3)] -->
							{#if (aufnahme.baujahr_heizung.at(-1) || new Date().getFullYear()) >= (new Date().getFullYear() - 3)}
								<div class="pruefpunkt">
									<input type="checkbox" name="pruefpunkt_heizungsalter" bind:checked={ausweis.pruefpunkt_heizungsalter} required/>
									<div class="text-left">
										Das Heizungsalter ist jünger als 3 Jahre. Es handelt sich hier um einen Heizungstausch ohne energetische Verbesserung.
									</div>
								</div>
							{/if}
							<!-- Verbrauchsausweis Wohnen, Gewerbe -->
							<!-- Bei besonders niedrigem Endenergieverbrauch [altes System:  $result->endEnergieVerbrauchGesamt < 40] -->
							{#if (berechnungen?.endEnergieVerbrauchGesamt || 0) < 40}
							<div class="pruefpunkt">	
								<input type="checkbox" name="pruefpunkt_verbrauch_niedrig" bind:checked={ausweis.pruefpunkt_verbrauch_niedrig}  required/>
								<div class="text-left">
									Ich habe die Verbrauchsangaben nochmal kontrolliert. Der ungewöhnlich niedrige Energiekennwert ist korrekt, da es sich um ein besonders effizientes Gebäude mit z.B. Wärmepumpe handelt.
								</div>
							</div>
							{/if}
							<!-- Verbrauchsausweis Wohnen, Gewerbe -->
							<!-- Bei besonders hohem Endenergieverbrauch [altes System: $result->endEnergieVerbrauchGesamt > 450] -->
							{#if (berechnungen?.endEnergieVerbrauchGesamt || 0) > 450}
								<div class="pruefpunkt">	
									<input type="checkbox" name="pruefpunkt_verbrauch_hoch" bind:checked={ausweis.pruefpunkt_verbrauch_hoch} required/>
									<div class="text-left">
										Ich habe die Verbrauchsangaben nochmal kontrolliert. Der ungewöhnlich hohe Energiekennwert ist korrekt, da es sich um ein sehr altes ungedämmtes Gebäude mit z.B. Einfachverglasung handelt.
									</div>
								</div>
							{/if}
							<!-- Verbrauchsausweis Wohnen, Gewerbe [altes System:  $ausweis->energieverbrauch_1_heizquelle_1 > 0 && $ausweis->energieverbrauch_2_heizquelle_1 > 0 
							&& $ausweis->energieverbrauch_3_heizquelle_1 > 0] -->
							{#if (ausweis.verbrauch_1 == 0) || (ausweis.verbrauch_2 == 0) || (ausweis.verbrauch_3 == 0)}
								<div class="pruefpunkt">	
									<input type="checkbox" name="pruefpunkt_verbrauch_null" bind:checked={ausweis.pruefpunkt_verbrauch_null} required/>
									<div class="text-left">
										Die eingegebenen Heizverbräuche sind korrekt und alle 3 Felder wurden vollständig eingegeben.
									</div>
								</div>
							{/if}
							<!-- Verbrauchsausweis Wohnen, Gewerbe [altes System:  getMaximumDevitationInPercent([$ausweis->energieverbrauch_1_heizquelle_1, 
							$ausweis->energieverbrauch_2_heizquelle_1, $ausweis->energieverbrauch_3_heizquelle_1]) < 50] -->
							{#if getMaximumDevitationInPercent(ausweis.verbrauch_1 || 0, ausweis.verbrauch_2 || 0, ausweis.verbrauch_3 || 0) > 50}
								<div class="pruefpunkt">	
									<input type="checkbox" name="pruefpunkt_verbrauch_abweichung" bind:checked={ausweis.pruefpunkt_verbrauch_abweichung} required/>
									<div class="text-left">
										Die eingegebenen Heizverbräuche sind korrekt und die Abweichung bei den Verbrauchsjahren lässt sich begründen. Falls es Leerstand gab, wurde 
										dieser im Formular von mir angegeben.
									</div>
								</div>
							{/if}
						{/await}
					{/if}

					{#if ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen || ausweisart === Enums.Ausweisart.BedarfsausweisWohnen}
						<!-- Verbrauchsausweis Wohnen und Bedarfsausweis Wohnen [altes System: $ausweis->wohnflaeche >= $ausweis->anzahl_einheiten * 30] -->
						{#if (aufnahme.flaeche || 0) < (aufnahme.einheiten || 0) * 30}
							<div class="pruefpunkt">	
								<input type="checkbox" name="pruefpunkt_wohnflaeche_einheiten" bind:checked={ausweis.pruefpunkt_wohnflaeche_einheiten} required/>
								<div class="text-left">
									Die Angabe der Wohnfläche ist korrekt und bezieht sich auf das gesamte Gebäude. 
								</div>
							</div>
						{/if}
					{/if}

					{#if ausweisart === Enums.Ausweisart.VerbrauchsausweisGewerbe}
						<!-- Zusätzlich beim Verbrauchsausweis Gewerbe [altes System: $ausweis->vanw_strom_1 > 0 && $ausweis->vanw_strom_2 > 0 && $ausweis->vanw_strom_3 > 0] -->
						{#if ausweis.strom_1 == 0 || ausweis.strom_2 == 0 || ausweis.strom_3 == 0}
							<div class="pruefpunkt">	
								<input type="checkbox" name="pruefpunkt_strom_null" bind:checked={ausweis.pruefpunkt_strom_null} required/>
								<div class="text-left">
									Die eingegebenen Stromverbräuche sind korrekt und alle 3 Felder wurden vollständig eingegeben.
								</div>
							</div>
						{/if}
						<!-- Zusätzlich beim Verbrauchsausweis Gewerbe [altes System: getMaximumDevitationInPercent([$ausweis->vanw_strom_1, $ausweis->vanw_strom_2, $ausweis->vanw_strom_3]) < 50] -->
						{#if getMaximumDevitationInPercent(ausweis.strom_1 || 0, ausweis.strom_2 || 0, ausweis.strom_3 || 0) > 50}
							<div class="pruefpunkt">	
								<input type="checkbox" name="pruefpunkt_strom_abweichung" bind:checked={ausweis.pruefpunkt_strom_abweichung} required/>
								<div class="text-left">
									Die eingegebenen Stromverbräuche sind korrekt und die Abweichung bei den Verbrauchsjahren lässt sich begründen. Falls es Leerstand gab, wurde 
									dieser im Formular von mir angegeben.
								</div>
							</div>
						{/if}
					{/if}

					
					<!-- Verbrauchsausweis Wohnen, Gewerbe und Bedarfsausweis Wohnen 
					 [altes System: !!db()->one("SELECT * FROM FORM WHERE zipcode = :zipcode", ["zipcode" => $ausweis->objekt_plz])] -->
					<!-- TODO -->
					<!-- <div class="pruefpunkt">	
						<input type="checkbox" name="pruefpunkt_plz" bind:checked={ausweis.pruefpunkt_plz}/>
						<div class="text-left">
							Ich habe meine Postleitzahl überprüft und bestätige hiermit die Richtigkeit.
						</div>
					</div> -->
					<!-- Verbrauchsausweis Wohnen, Gewerbe und Bedarfsausweis Wohnen [altes System: $ausweis->baujahr_anlage >= $ausweis->baujahr_gebaeude] -->
					{#if (aufnahme.baujahr_heizung.at(-1) || 0) < (aufnahme.baujahr_gebaeude[0] || 0)}
						<div class="pruefpunkt">	
							<input type="checkbox" name="pruefpunkt_heizungsanlage" bind:checked={ausweis.pruefpunkt_heizungsanlage} required/>
							<div class="text-left">
								Das Baujahr der Heizungsanlage ist kleiner als das Baujahr des Gebäudes und begründet.
							</div>
						</div>
					{/if}
					
					
					
					
					{#if ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen}
						<!-- Verbrauchsausweis Wohnen [altes System: $ausweis->anteil_warmwasser_1 < 6 OR $ausweis->anteil_warmwasser_1 > 40] -->
						{#if (ausweis.anteil_warmwasser_1 < 6) || (ausweis.anteil_warmwasser_1 > 40)}
							<div class="pruefpunkt">	
								<input type="checkbox" name="pruefpunkt_anteil_warmwasser" bind:checked={ausweis.pruefpunkt_anteil_warmwasser} required/>
								<div class="text-left">
									Ich habe den Warmwasseranteil nochmal überprüft. Dieser ist korrekt und begründet.
								</div>
							</div>
						{/if}
					{/if}
					{#if ausweisart === Enums.Ausweisart.BedarfsausweisWohnen}
						<!-- Zusätzlich beim Bedarfsausweis [altes System: $ausweis->wohnflaeche < $ausweis->energetische_nutzfläche] -->
						{#if ausweis.flaeche < ausweis.nutzflaeche}
							<div class="pruefpunkt">	
								<input type="checkbox" name="pruefpunkt_wohnflaeche" bind:checked={ausweis.pruefpunkt_wohnflaeche} required/>
								<div class="text-left">
									Ich habe die Wohnfläche nochmal überprüft und bestätige die Richtigkeit. Es handelt sich lediglich um die Wohnfläche innerhalb des Gebäudes. Flächen von eventuell vorhandenen Terassen und Balkonen wurden nicht mitgezählt.
								</div>
							</div>
						{/if}
						<!-- Zusätzlich beim Bedarfsausweis [altes System:  ($result->AHF / ($ausweis->volumen ?: 1)) > 1.4 OR ($result->AHF / ($ausweis->volumen ?: 1)) < 0.18] -->
						<!-- TODO -->
						<!-- <div class="pruefpunkt">	
							<input type="checkbox" name="pruefpunkt_geometrie"/>
							<div class="text-left">
								Ich habe die Angaben zur Gebäudegeometrie geprüft und bestätige die Richtigkeit.
							</div>
						</div> -->
						<!-- Zusätzlich beim Bedarfsausweis [altes System: getPortionInPercent(($ausweis->fenster_flaeche_1 + $ausweis->fenster_flaeche_2), $ausweis->aussenwand_flaeche) < 5 OR
						getPortionInPercent(($ausweis->fenster_flaeche_1 + $ausweis->fenster_flaeche_2), $ausweis->aussenwand_flaeche) > 70] -->
						<!-- <div class="pruefpunkt">	
							<input type="checkbox" name="pruefpunkt_fenster"/>
							<div class="text-left">
								Ich habe die Angaben zu den Fensterflächen geprüft und bestätige die Richtigkeit.
							</div>
						</div> -->
					{/if}
					<!-- Für alle -->
					<div class="pruefpunkt">	
						<input type="checkbox"/>
						<div class="text-left">
							Ich habe die AGB und DSGVO im <a href="/impressum#agb" target="_blank" rel="noopener noreferrer">Impressum</a> gelesen und akzeptiert.
						</div>
					</div>
			</div>
		</div>
		{/if}


		<div
			class="grid grid-cols-1 gap-x-2 gap-y-1 self-start mt-0
sm:grid-cols-[min-content_min-content_min-content] sm:justify-self-end sm:mt-8"
		>
			<a class="order-3 sm:order-1 button cursor-pointer text-center sm:text-start" href={zurueck.toString()}>Zurück</a>

			

			<button class="order-2 button" type="button" on:click={speichern}>Speichern</button>

			{#if rechnung && rechnung.status === "paid"}
				<!-- Von einer GEG Anfrage sollte man sowieso nicht noch mal auf die Kundendaten Seite gelangen, also brauchen wir das hier nicht. -->
				<button
					class="order-1 sm:order-2 button cursor-pointer"
					data-cy="bestellen"
					type="button"
					on:click={bestellen}>Absenden</button
				>
			{:else}
				{#if gegAnfrage}
					<button
						class="order-1 sm:order-2 button cursor-pointer"
						type="button"
						data-cy="bestellen"
						on:click={anfordern}>Angebot anfordern</button
					>
				{:else}
					<button
						class="order-1 sm:order-2 button cursor-pointer"
						data-cy="bestellen"
						type="button"
						on:click={bestellen}>Kostenpflichtig bestellen</button
					>
				{/if}
			{/if}

			{#if user.rolle === Enums.BenutzerRolle.ADMIN}
				<button class="button text-sm" on:click={() => {
					localStorage.clear()
					window.location.href = "/dashboard/objekte/1"
				}}>Zurück zum Dashboard</button>
			{/if}
		</div>
	</div>

	<Overlay bind:hidden={loginOverlayHidden}>
		<div class="bg-white w-full max-w-screen-sm py-8">
			<EmbeddedAuthFlowModule onLogin={loginAction} email={email}></EmbeddedAuthFlowModule>
		</div>
	</Overlay>
	
</form>

<NotificationWrapper></NotificationWrapper>



<style lang="postcss">
	h3 {
		@apply text-[1.25rem] ml-0 pl-0 font-bold mb-6;
	}

	.ProduktKostenTabelle {
		@apply block mt-6 sm:mt-0;
		.zeile {
			@apply grid grid-cols-[9rem_1rem_5rem_1fr] sm:grid-cols-[19rem_1rem_5rem_1fr];
		}
		.betrag {
			@apply font-bold text-[1.15rem];
		}
	}

	.varianten {
		@apply block;
		.variante {
			@apply grid grid-cols-[40px_8rem_1fr] items-start pb-4;
			input {
				@apply mt-[5px];
			}
		}
	}

	.zusaetze {
		@apply block;
		.zusatz {
			@apply grid grid-cols-[10px_6rem_1fr] sm:grid-cols-[40px_8rem_1fr] items-start pb-3;
			input {
				@apply mt-[4px];
			}
		}
	}

	.pruefpunkte {
		@apply block;
		.pruefpunkt {
			@apply grid grid-cols-[10px_1fr] sm:grid-cols-[40px_1fr] items-start pb-3;
			input {
				@apply mt-[4px];
			}
		}
	}
</style>
