<script lang="ts">
	import { AufnahmeKomplettClient, BedarfsausweisWohnenClient, BenutzerClient, getAusweisartFromId, RechnungClient, GEGEinpreisungClient, VerbrauchsausweisGewerbeClient, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types.js";
	import moment from "moment";
	import { dialogs } from "svelte-dialogs";
	import {
		CrossCircled,
		DotsVertical,
		Pencil2,
		QuestionMarkCircled,
	} from "radix-svelte-icons";
	import { api } from "astro-typesafe-api/client";
	import Cookies from "js-cookie";
	import { API_ACCESS_TOKEN_COOKIE_NAME, AusstellungsTyp } from "#lib/constants.js";
	import { Enums, Objekt } from "#lib/client/prisma.js";
	import { addNotification, updateNotification } from "#components/Notifications/shared.js";
	import { endEnergieVerbrauchVerbrauchsausweis_2016_Client } from "#lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016_Client.js";
	import { endEnergieVerbrauchVerbrauchsausweisGewerbe_2016_Client } from "#lib/Berechnungen/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbe_2016_Client.js";

	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbeClient | BedarfsausweisWohnenClient;
	export let aufnahme: AufnahmeKomplettClient;
	export let rechnung: RechnungClient | null;
	export let einpreisung: GEGEinpreisungClient | null;
	export let objekt: Objekt;
	export let benutzer: BenutzerClient;
	import { FileText } from "radix-svelte-icons";
	import NotificationProvider from "#components/NotificationProvider/NotificationProvider.svelte";
	import DashboardNotification from "./DashboardNotification.svelte";
	import { notifications } from "#components/NotificationProvider/shared.js";
	import { Bell } from "radix-svelte-icons";
    import mime from "mime"
    
	const progress = ausweis.ausgestellt ? 100 : ausweis.bestellt ? 66 : 33;

	const ausweisart = getAusweisartFromId(ausweis.id);

	const id = ausweis.id;

	async function ausweisStornieren() {
		const result = await dialogs.confirm({
			title: "Ausweis Stornieren",
			text: "Sind sie sich sicher, dass sie den Ausweis stornieren möchten? Diese Operation kann nicht rückgängig gemacht werden!",
			confirmButtonText: "Ausweis Stornieren",
			confirmButtonClass: "btn btn-primary",
			declineButtonClass: "btn btn-bordered",
			declineButtonText: "Abbrechen",
			dialogClass: "modal-box",
			headerClass: "bg-base-100 text-center",
			titleClass: "text-base-content text-xl font-medium",
			dividerClass: "hidden",
			footerClass: "bg-base-100 justify-center gap-4 mt-4",
		});

		if (result === true) {
			if (ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen) {
				await api["verbrauchsausweis-wohnen"]._id.DELETE.fetch(undefined, {
					params: {
						id: ausweis.id,
					},
					headers: {
						Authorization: `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`,
					},
				});
			} else if (ausweisart === Enums.Ausweisart.VerbrauchsausweisGewerbe) {
				await api["verbrauchsausweis-gewerbe"]._id.DELETE.fetch(undefined, {
					params: {
						id: ausweis.id,
					},
					headers: {
						Authorization: `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`,
					},
				});
			}

			ausweis.storniert
			ausweis = ausweis;

			dialogs.alert({
				title: "Ausweis Storniert",
				text: "Der Ausweis wurde erfolgreich storniert.",
				dismissButtonText: "Schließen",
				dismissButtonClass: "btn btn-primary",
				dialogClass: "modal-box",
				headerClass: "bg-base-100 text-center",
				titleClass: "text-base-content text-xl font-medium",
				dividerClass: "hidden",
				footerClass: "bg-base-100 justify-center gap-4 mt-4",
			});
		}
	}

	let hilfeModal: HTMLDialogElement;

	let calculations = null;

	if (ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen) {
		calculations = endEnergieVerbrauchVerbrauchsausweis_2016_Client(ausweis as VerbrauchsausweisWohnenClient, aufnahme, objekt);
	} else if (ausweisart === Enums.Ausweisart.VerbrauchsausweisGewerbe) {
		calculations = endEnergieVerbrauchVerbrauchsausweisGewerbe_2016_Client(ausweis as VerbrauchsausweisGewerbeClient, aufnahme, objekt);
	}

	async function registriernummer() {
		try {
			const result = await api.admin.registriernummer.GET.fetch({
				id: ausweis.id
			}, {
				headers: {
					"Authorization": `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`
				}
			})
		} catch(e) {
			addNotification({
				message: "Registriernummer anfordern fehlgeschlagen.",
				subtext: e as string,
				type: "error",
				dismissable: true,
				timeout: 3000,
			})
		}
	}

	async function stornieren() {
		try {
			const response = await api.admin.stornieren.PUT.fetch({
				ausweis_id: ausweis.id
			}, {
				headers: {
					"Authorization": `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`
				}
			})

			addNotification({
				message: "Ausweis wurde storniert",
				type: "success",
				dismissable: true,
				timeout: 3000,
			})

			ausweis.storniert = true;
			ausweis = ausweis;
		} catch(e) {
			addNotification({
				message: "Ausweis konnte nicht storniert werden.",
				subtext: e as string,
				type: "error",
				dismissable: true,
				timeout: 3000,
			})
		}
	}



	async function ausstellen(post = false) {
		const notification = addNotification({
			message: "Ausweis wird ausgestellt.",
			subtext: "Der Ausweis wird nun ausgestellt, bitte habe einen Augenblick geduld..",
			type: "info",
			timeout: 0,
		})

		if (ausweisart === Enums.Ausweisart.BedarfsausweisWohnen) {
			const results: {data: string, name: string, type: "Sonstiges" | "Ausweis"}[] = []
			let i = 0
			const dateien = [...(bedarfsausweisAdditionalInput.files || []), ...(bedarfsausweisFileInput.files || [])];

			if (dateien.length === 0) {
				addNotification({
					message: "Bitte laden sie vor dem Ausstellen einen Ausweis hoch.",
					timeout: 3000,
					type: "error",
					dismissable: true
				})
				return;
			}

			for (const datei of dateien) {
				const reader = new FileReader();

				reader.onload = async (ev) => {
					const result = reader.result;

					if (!result) {
						addNotification({
							message: `Die Datei ${datei.name} konnte nicht verarbeitet werden.`,
							timeout: 3000,
							type: "error",
							dismissable: true
						})
					} 

					results.push({
						data: result as string,
						name: datei.name,
						type: i == dateien.length - 1 ? "Ausweis" : "Sonstiges"
					})
					i++

					if (i === dateien.length) {
						try {
							await api.admin["bedarfsausweis-ausstellen"].POST.fetch({
								id_ausweis: ausweis.id,
								post,
								files: results
							}, {
								headers: {
									"Content-Type": "application/json",
									"Authorization": `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`
								}
							})
							updateNotification(notification, {
								message: "Ausweis ausgestellt.",
								subtext: "Der Ausweis wurde erfolgreich ausgestellt.",
								timeout: 3000,
								type: "success",
							})
						} catch(e) {
							updateNotification(notification, {
								message: "Das hat nicht geklappt.",
								subtext: e as string,
								timeout: 3000,
								type: "error",
							})
						}
					}
				}
				reader.readAsDataURL(datei)
			}
		} else {
			try {
				await api.admin.ausstellen.GET.fetch({
					id_ausweis: ausweis.id,
					post
				}, {
					headers: {
						"Authorization": `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`
					}
				})

				ausweis.ausgestellt = true;

				updateNotification(notification, {
					message: "Ausweis ausgestellt.",
					subtext: "Der Ausweis wurde erfolgreich ausgestellt.",
					timeout: 3000,
					type: "success",
				})
			} catch(e) {			
				updateNotification(notification, {
					message: "Das hat nicht geklappt.",
					subtext: e as string,
					timeout: 3000,
					type: "error",
				})
			}
		}
	}

	let bedarfsausweisFileInput: HTMLInputElement;
	let bedarfsausweisAdditionalInput: HTMLInputElement;
</script>

<div class="relative bg-base-200 border border-base-300 rounded-lg p-4 mx-2">
	{#if ausweis.storniert}
		<div
			class="absolute top-0 left-0 w-full h-full bg-[rgba(0,0,0,0.4)] z-[5] rounded-lg select-none"
		>
			<h1
				class="absolute -rotate-[25deg] text-xl md:text-xl tracking-wide uppercase text-red-500 border-4 border-red-500 rounded-lg top-[50%] translate-y-[-50%] left-[50%] translate-x-[-50%]"
			>
				Storniert
			</h1>
		</div>
	{/if}
	<div class="card-body">
		<div
			class="flex justify-end mb-2 dropdown dropdown-bottom absolute top-4 right-4"
		>
			<button class="rounded-full p-2.5 hover:bg-base-100">
				<DotsVertical size={15} />
			</button>
			<ul
				tabindex="-1"
				class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-64 gap-2"
			>
				<li>
					<button on:click={ausweisStornieren}
						><CrossCircled size={15} />Ausweis Stornieren</button
					>
				</li>
				<li>
					<button><Pencil2 size={15} /> Als Vorlage benutzen</button>
				</li>
				<li>
					<button on:click={() => hilfeModal.showModal()}
						><QuestionMarkCircled size={15} /> Hilfe Erhalten</button
					>
				</li>
			</ul>
		</div>
		<div class="flex flex-row flex-wrap items-center gap-2">
			{#if ausweis.ausgestellt}
				<span class="bg-green-600 px-2 py-0.5 text-sm font-semibold rounded-lg text-white">Ausgestellt</span>
			{:else if ausweis.bestellt}
				<span class="bg-primary px-2 py-0.5 text-sm font-semibold rounded-lg text-white">Bestellt</span>
			{:else}
				{#if ausweisart === Enums.Ausweisart.BedarfsausweisGewerbe || ausweisart === Enums.Ausweisart.GEGNachweisWohnen || ausweisart === Enums.Ausweisart.GEGNachweisGewerbe}
					<span class="bg-red-600 px-2 py-0.5 text-sm font-semibold rounded-lg text-white">Angefordert</span>
				{:else}
					<span class="bg-red-600 px-2 py-0.5 text-sm font-semibold rounded-lg text-white">Gespeichert</span>
				{/if}
			{/if}
			<div class="text-lg font-semibold">
				{#if ausweisart == Enums.Ausweisart.VerbrauchsausweisWohnen}
					Verbrauchsausweis Wohnen
				{:else if ausweisart == Enums.Ausweisart.BedarfsausweisWohnen}
						Bedarfsausweis Wohnen
				{:else if ausweisart == Enums.Ausweisart.VerbrauchsausweisGewerbe}
						Verbrauchsausweis Gewerbe
				{:else if ausweisart == Enums.Ausweisart.GEGNachweisWohnen}
					GEG Nachweis Wohnen
				{:else if ausweisart == Enums.Ausweisart.GEGNachweisGewerbe}
						GEG Nachweis Gewerbe
				{:else if ausweisart == Enums.Ausweisart.BedarfsausweisGewerbe}
						Bedarfsausweis Gewerbe
				{/if}
			</div>
		</div>
		<div class="badge badge-accent font-semibold text-black text-m">
			{#if ausweis.ausweistyp === Enums.AusweisTyp.Beratung || ausweis.ausweistyp === Enums.AusweisTyp.BeratungXL}
					mit Beratung 
				{:else if ausweis.ausweistyp === Enums.AusweisTyp.Offline || ausweis.ausweistyp === Enums.AusweisTyp.OfflineXL}
					Offline 
				{/if}
			{#if (rechnung?.services ?? []).length > 0}
			{#if rechnung}
				<span class="text-sm italic">({rechnung.services})</span>
			{/if}
			{/if}
		</div>
		<div class="mb-4 flex flex-row items-center gap-4">
			<div class="w-full border rounded-lg my-2">
				<div class="bg-green-600 h-4 rounded-lg" class:bg-red-600={progress == 33} class:bg-primary={progress == 66} style="width: {progress}%;"></div>
			</div>
			<span class="text-sm font-semibold text-base-content"
				>{progress}%</span
			>
		</div>
		{#await calculations then calculations}
			<div class="flex flex-col mb-4">
				<div class="flex flex-row justify-between">
					<span>Erstellungsdatum</span>
					<span class="font-bold text-base-content"
						>{moment(aufnahme.erstellungsdatum).format(
							"DD.MM.YYYY"
						)}</span
					>
				</div>
				<div class="flex flex-row justify-between">
					<span>Energieverbrauch</span>
					<span class="font-bold text-base-content"
						>{calculations?.endEnergieVerbrauchGesamt}kWh/A</span
					>
				</div>
				<div class="flex flex-row justify-between">
					<span>CO2 Ausstoß</span>
					<span class="font-bold text-base-content"
						>{calculations?.co2EmissionenGesamt}Kg/A</span
					>
				</div>
				<div class="flex flex-row justify-between">
					<span>Baujahr</span>
					<span
						class="font-bold text-base-content"
						title="Gebäude / Heizung"
						>{aufnahme.baujahr_gebaeude[0] || "N/A"} /
						{aufnahme.baujahr_heizung[0] || "N/A"}</span
					>
				</div>
				<div class="flex flex-row justify-between">
					<span>Wohnfläche</span>
					<span class="font-bold text-base-content"
						>{aufnahme.flaeche
							? `${aufnahme.flaeche}m²`
							: "N/A"}</span
					>
				</div>
			</div>
		{/await}

		{#if benutzer.rolle === Enums.BenutzerRolle.ADMIN && ausweisart === Enums.Ausweisart.BedarfsausweisWohnen}
			<span>Laden sie hier den Ausweis hoch</span>
			<input type="file" bind:this={bedarfsausweisFileInput}>
			<span>Laden sie hier zusätzliche Dokumente hoch</span>
			<input type="file" bind:this={bedarfsausweisAdditionalInput} multiple>
		{/if}
			
			<div class="flex flex-row justify-start items-center mb-4">
	
			<a
				class="p-1 rounded-lg hover:bg-gray-200 mr-2 border-2 border-gray-300"
				title="PDF Herunterladen"
				target="_blank"
				href="/pdf/ansichtsausweis?id={ausweis.id}"
			>
			{#if ausweis.ausgestellt}
				<img src="../../images/dashboard/AusweisHaken.svg" width="65" alt="Energieausweis">
			{:else}
				<img src="../../images/dashboard/AusweisKreuz.svg" width="65" alt="Energieausweis">
			{/if}
			</a>
			<a
				class="p-1 rounded-lg hover:bg-gray-200 border-2 border-gray-300"
				title="PDF Herunterladen"
				target="_blank"
				href="/pdf/datenblatt?id={ausweis.id}"
			>
			{#if ausweis.ausgestellt}
			<img src="../../images/dashboard/DatenblattHaken.svg" width="65" alt="Energieausweis">
			{:else}
			<img src="../../images/dashboard/DatenblattKreuz.svg" width="65" alt="Energieausweis">
			{/if}
			</a>
			<div class="w-1/2 ml-4 text-sm">
				{#if ausweis.bestellt}
					{#if ausweis.ausweistyp === Enums.AusweisTyp.Beratung || ausweis.ausweistyp === Enums.AusweisTyp.BeratungXL}
					Sie haben Hilfe zu diesem Ausweis angefordert. Sie werden <span class="font-bold">innerhalb der nächsten 48 Stunden</span> über die hinterlegte Telefonnummer vom IB Cornelsen kontaktiert.
					{:else if ausweis.ausweistyp === Enums.AusweisTyp.Offline || ausweis.ausweistyp === Enums.AusweisTyp.OfflineXL}
					Sie haben die offline Variant zu diesem Ausweis angefordert. Bitte <span class="font-bold">übermitteln Sie uns die letzten drei Jahre der Energieabrechnungen</span> Ihres Energieversorgers.
					{:else if !ausweis.ausgestellt}
						Der Ausweis wurde von Ihnen freigegeben und befindet sich <span class="font-bold">in Prüfung durch IB Cornelsen</span>
					{/if}
				{:else if ausweis.ausgestellt}
				Vorgang erledigt. Ausweis ist <span class="font-bold">geprüft und ausgestellt.</span>
				{:else}
				Der Ausweis wurde von Ihnen gespeichert <span class="font-bold">und muss noch bestellt werden.</span>
				{/if}
				</div>
				</div>
				<div class="text-sm mb-2">
					<span class="font-bold">Rechnungsadresse</span><br>
					{#if ausweisart == Enums.Ausweisart.GEGNachweisWohnen || ausweisart == Enums.Ausweisart.GEGNachweisGewerbe || ausweisart == Enums.Ausweisart.BedarfsausweisGewerbe}
						{einpreisung?.empfaenger},
						{#if einpreisung?.zusatzzeile !== null}
							{einpreisung?.zusatzzeile}, 
						{/if}
						{einpreisung?.strasse}, {einpreisung?.plz} {einpreisung?.ort}
					{:else}
						{rechnung?.empfaenger}, 
						{#if rechnung?.zusatzzeile !== null}
							{rechnung?.zusatzzeile}, 
						{/if}
						{rechnung?.strasse}, {rechnung?.plz} {rechnung?.ort}
					{/if}
				</div>
				<div class="text-sm mb-2">
					<span class="font-bold">Versandadresse</span><br>
					{#if ausweisart == Enums.Ausweisart.GEGNachweisWohnen || ausweisart == Enums.Ausweisart.GEGNachweisGewerbe || ausweisart == Enums.Ausweisart.BedarfsausweisGewerbe}
						{einpreisung?.versand_empfaenger},
						{#if einpreisung?.versand_zusatzzeile !== null}
							{einpreisung?.versand_zusatzzeile}, 
						{/if}
						{einpreisung?.versand_strasse}, {einpreisung?.versand_plz} {einpreisung?.versand_ort}
					{:else}
						{rechnung?.versand_empfaenger}, 
						{#if rechnung?.versand_zusatzzeile !== null}
							{rechnung?.versand_zusatzzeile}, 
						{/if}
						{rechnung?.versand_strasse}, {rechnung?.versand_plz} {rechnung?.versand_ort}
					{/if}
				</div>
			<div class="flex flex-row gap-2 justify-end items-center mt-4">
				{#if !ausweis.storniert && !ausweis.ausgestellt}
				<!--
					<a
					class="button text-sm"
					href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude?uid={ausweis.id}"
					>Stornieren</a>
				-->
			{/if}

			{#if ausweis.bestellt && (!rechnung || rechnung.bezahlmethode === Enums.Bezahlmethoden.rechnung)}
				<!-- <a href="/energieausweis-erstellen/bezahlung?uid={ausweis.id}" class="button text-sm">Bezahlen</a> -->
			{/if}
			
			
			{#if !ausweis.ausgestellt && (!ausweis.bestellt || (ausweis.ausweistyp === Enums.AusweisTyp.Beratung || ausweis.ausweistyp === Enums.AusweisTyp.Offline || ausweis.ausweistyp === Enums.AusweisTyp.OfflineXL || ausweis.ausweistyp === Enums.AusweisTyp.BeratungXL))}
				{#if ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen}
					<a
					class="button text-sm"
					href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude?ausweis_id={ausweis.id}&typ={AusstellungsTyp.Speichern}"
					>Bearbeiten</a>
				{:else if ausweisart === Enums.Ausweisart.VerbrauchsausweisGewerbe}
					<a
					class="button text-sm"
					href="/energieausweis-erstellen/verbrauchsausweis-gewerbe?ausweis_id={ausweis.id}&typ={AusstellungsTyp.Speichern}"
					>Bearbeiten</a>
				{:else if ausweisart === Enums.Ausweisart.BedarfsausweisWohnen}
					<a
					class="button text-sm"
					href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude?ausweis_id={ausweis.id}&typ={AusstellungsTyp.Speichern}"
					>Bearbeiten</a>
				{:else if ausweisart === Enums.Ausweisart.GEGNachweisWohnen}
					<a
					class="button text-sm"
					href="/angebot-anfragen/geg-nachweis-wohnen-anfragen?ausweis_id={ausweis.id}&typ={AusstellungsTyp.Speichern}"
					>Bearbeiten</a>
				{:else if ausweisart === Enums.Ausweisart.GEGNachweisGewerbe}
					<a
					class="button text-sm"
					href="/angebot-anfragen/geg-nachweis-gewerbe-anfragen?ausweis_id={ausweis.id}&typ={AusstellungsTyp.Speichern}"
					>Bearbeiten</a>
				{:else if ausweisart === Enums.Ausweisart.BedarfsausweisGewerbe}
					<a
					class="button text-sm"
					href="/angebot-anfragen/bedarfsausweis-gewerbe-anfragen?ausweis_id={ausweis.id}&typ={AusstellungsTyp.Speichern}"
					>Bearbeiten</a>
				{/if}
			{/if}

			{#if benutzer.rolle === Enums.BenutzerRolle.ADMIN}
				{#if ausweisart === Enums.Ausweisart.VerbrauchsausweisWohnen}
					<a
					class="button text-sm"
					href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude?ausweis_id={ausweis.id}&typ={AusstellungsTyp.Speichern}"
					>Formular</a>
				{:else if ausweisart === Enums.Ausweisart.VerbrauchsausweisGewerbe}
					<a
					class="button text-sm"
					href="/energieausweis-erstellen/verbrauchsausweis-gewerbe?ausweis_id={ausweis.id}&typ={AusstellungsTyp.Speichern}"
					>Formular</a>
				{:else if ausweisart === Enums.Ausweisart.BedarfsausweisWohnen}
					<a
					class="button text-sm"
					href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude?ausweis_id={ausweis.id}&typ={AusstellungsTyp.Speichern}"
					>Formular</a>
				{/if}
			{/if}

			{#if benutzer.rolle === Enums.BenutzerRolle.ADMIN}
				
				<button class="button text-sm" title="Ausstellen" on:click={() => ausstellen(false)}>A</button>
				<button class="button text-sm" title="Ausstellen mit Postversand" on:click={() => ausstellen(true)}>P</button>
				<button class="button text-sm" title="Stornieren" on:click={stornieren}>S</button>
				<button class="button text-sm" title="Registriernummer anfordern" on:click={registriernummer}>R</button>
			{/if}
			</div>
			
	</div>
</div>

<div class="relative bg-base-200 border border-base-300 rounded-lg p-4 mx-2">
	<div class="card-body">
		<div class="flex flex-row flex-wrap items-center gap-2">
			
				<div class="text-lg font-semibold">{aufnahme.gebaeudetyp} 
					{#if (aufnahme.einheiten > 0 && aufnahme.einheiten !== null)}
					mit {aufnahme.einheiten} Wohneinheiten
					{/if}
				</div>
			
			<div class="text-sm">
				<span class="font-bold">Gebäude (Bj {aufnahme.baujahr_gebaeude})</span> mit 
				{#if aufnahme.flaeche > 0 && aufnahme.flaeche !== null}
				{aufnahme.flaeche} m² Wohnfläche
				{/if}
				{#if aufnahme.nutzflaeche === 0}
				. Die energetische Nutzfläche wurde nach §82 GEG aus der Wohnfläche ermittelt.
				{:else}
				 sowie {aufnahme.nutzflaeche} m² energetische Nutzfläche. 
				{/if}
				Als Ausstellgrund wurde {ausweis.ausstellgrund} angegeben. 
				{aufnahme.gebaeudeteil === "Wohnen" 
					? "Die eingegebenen Daten beziehen sich auf den Wohnteil eines gemischt genutzten Gebäudes." 
					: "Die eingegebenen Daten beziehen sich auf das gesamte Gebäude."} 
				{aufnahme.saniert ? "Das Gebäude ist in saniertem Zustand." : "Das Gebäude ist in unsaniertem Zustand."}
			</div>
			{#if ausweisart === Enums.Ausweisart.VerbrauchsausweisGewerbe}
			<div class="text-sm">
				<span class="font-bold">Gebäudestrom</span> der Jahre vom
				{moment(ausweis.startdatum).format("MM.YYYY")} bis {moment(ausweis.startdatum).add("3", "years").format("MM.YYYY")} beträgt 
				{ausweis.strom_1} kWh, {ausweis.strom_2} kWh und {ausweis.strom_3} kWh. 
				Im Stromverbrauch enthalten sind 
				{ausweis.stromverbrauch_enthealt_heizung ? "Heizung, " : ""}
				{ausweis.stromverbrauch_enthaelt_warmwasser ? "Warmwasser, " : ""}
				{ausweis.stromverbrauch_enthaelt_lueftung ? "Lüftung, " : ""}
				{ausweis.stromverbrauch_enthaelt_beleuchtung ? "Beleuchtung, " : ""}
				{ausweis.stromverbrauch_enthaelt_kuehlung ? "Kühlung, " : ""}
				{#if ausweis.stromverbrauch_sonstig !== null}
				sowie {ausweis.stromverbrauch_enthaelt_sonstige}.
				{/if}
			</div>
			{/if}	
				<div class="text-sm">
					<span class="font-bold">Heizung (Bj {aufnahme.baujahr_heizung})</span> wird mit 
					{ausweis.brennstoff_1} betrieben. Die Verbräuche vom
					{moment(ausweis.startdatum).format("MM.YYYY")} bis {moment(ausweis.startdatum).add("3", "years").format("MM.YYYY")} betragen 
					{ausweis.verbrauch_1} {ausweis.einheit_1}, {ausweis.verbrauch_2} {ausweis.einheit_1} und {ausweis.verbrauch_3} {ausweis.einheit_1}.
					{#if ausweis.zusaetzliche_heizquelle} - 
					Eine weitere Heizung wird mit {ausweis.brennstoff_2} betrieben mit den Verbräuchen {ausweis.verbrauch_4} {ausweis.einheit_2}, {ausweis.verbrauch_5} 
					{ausweis.einheit_2} und {ausweis.verbrauch_6} {ausweis.einheit_2}.
					{/if}
				</div>
			<div class="text-sm">	

				{#if ausweis.anteil_warmwasser_1 !== null && ausweis.anteil_warmwasser_1 > 0}
					{#if aufnahme.solarsystem_warmwasser}
						Da ein Solarsystem für Warmwasser vorhanden ist, 
						wurde ein Warmwasseranteil von {ausweis.anteil_warmwasser_1 * 0.6}% berücksichtigt.
					{:else}
						Es wurde ein Warmwasseranteil von {ausweis.anteil_warmwasser_1}% berücksichtigt.
					{/if}
				{:else}
					{#if aufnahme.solarsystem_warmwasser}
						Da ein Solarsystem für Warmwasser vorhanden ist, wurde ein reduzierter Warmwasserzuschlag von 12 kWh/m²a angesetzt.
					{:else}
						Es wurde ein Warmwasserzuschlag von 20 kWh/m²a angesetzt.
					{/if}
				{/if}

				{#if ausweis.warmwasser_enthalten}
					Der Anteil wird vom Gesamtverbrauch abgezogen, um den Heizwärmebedarf zu ermitteln und diesen mit dem 
					über drei Jahre gemittelten Klimafaktor zu multiplizieren.
					{:else}
					Der Anteil wird als Zuschlag zum Gesamtverbrauch addiert, und im Ausweis in einer separaten Zeile ausgewiesen.
				{/if}

				{#if !ausweis.alternative_heizung && !ausweis.alternative_warmwasser && !ausweis.alternative_lueftung && !ausweis.alternative_kuehlung}
					Alternative Energieversorgung wird nicht verwendet
				{:else}
					Alternative Energieversorgung wird verwendet für {ausweis.alternative_heizung ? "Heizung, " : ""}{ausweis.alternative_warmwasser ? "Warmwasser, " : ""}{ausweis.alternative_lueftung ? "Lüftung, " : ""}{ausweis.alternative_kuehlung ? "Kühlung, " : ""}
				{/if}. 
				Der Leerstand beträgt {aufnahme.leerstand}%. Das Gebäude verfügt über eine 
				{#if aufnahme.lueftung === Enums.Lueftungskonzept.Fensterlueftung}
					Fensterlüftung
				{:else if aufnahme.lueftung === Enums.Lueftungskonzept.Schachtlueftung}
					Schachtlüftung
				{:else if aufnahme.lueftung === Enums.Lueftungskonzept.LueftungsanlageMitWaermerueckgewinnung}
					Lüftungsanlage mit Wärmerückgewinnung
				{:else if aufnahme.lueftung === Enums.Lueftungskonzept.LueftungsanlageOhneWaermerueckgewinnung}
					Lüftungsanlage ohne Wärmerückgewinnung
				{/if}
				{#if ausweis.kuehlung_enthalten && ausweis.kuehlung_entahlten !== null}
				und wird thermisch gekühlt.
				{:else if aufnahme.kuehlung === "1" && aufnahme.kuhlung !== null}
				und wird gekühlt.
				{:else}
				und wird nicht gekühlt.
				{/if}
			</div>
			<div class="text-sm">
				<span class="font-bold">Heizung: </span>
				{aufnahme.zentralheizung ? "Zentral/Etagenheizung, " : ""} 
				{aufnahme.einzelofen ? "Einzelofen, " : ""} 
				{aufnahme.waermepumpe ? "Wärmepumpe, " : ""}
				{aufnahme.niedertemperatur_kessel ? "Niedertemperaturkessel, " : ""} 
				{aufnahme.standard_kessel ? "Standardkessel, " : ""} 
				{aufnahme.durchlauf_erhitzer ? "Durchlauferhitzer, " : ""} 
				{aufnahme.solarsystem_warmwasser ? "Solarsystem für Warmwasser, " : ""} 
				{aufnahme.brennwert_kessel ? "Brennwertkessel, " : ""} 
				{aufnahme.standard_kessel ? "Standardkessel, " : ""} 
				{aufnahme.warmwasser_rohre_gedaemmt ? "Warmwasserrohre gedämmt, " : ""} 
				{aufnahme.heizungsrohre_gedaemmt ? "Heizungsrohre gedämmt, " : ""} 
				{aufnahme.photovoltaik ? "Photovoltaik, " : ""} 
				{aufnahme.raum_temperatur_regler ? "Raumtemperaturregler, " : ""} 
				{aufnahme.zirkulation ? "Zirkulation, " : ""}
			</div>
			<div class="text-sm">
				<span class="font-bold">Fenster: </span>
				{aufnahme.isolier_verglasung ? "Fenster Isolierglas, " : ""} 
				{aufnahme.dreifach_verglasung ? "Dreifachverglasung, " : ""} 
				{aufnahme.doppel_verglasung ? "Doppelverglasung, " : ""} 
				{aufnahme.einfach_verglasung ? "Einfachverglasung, " : ""} 
				{aufnahme.fenster_dicht ? "Fenster dicht, " : ""} 
				{aufnahme.fenster_teilweise_undicht ? "Fenster teilweise undicht, " : ""} 
				{aufnahme.tueren_undicht ? "Türen undicht, " : ""} 
				{aufnahme.tueren_dicht ? "Türen dicht, " : ""} 
				{aufnahme.rolllaeden_kaesten_gedaemmt ? "Rollladenkästen gedämmt" : ""} 
			</div>
			<div class="text-sm">
				<span class="font-bold">Dämmung: </span>
				{aufnahme.dachgeschoss_gedaemmt ? "Dachgeschoss gedämmt, " : ""} 
				{aufnahme.aussenwand_gedaemmt ? "Außenwand gedämmt, " : ""} 
				{aufnahme.keller_decke_gedaemmt ? "Kellerdecke gedämmt, " : ""} 
				{aufnahme.keller_wand_gedaemmt ? "Kellerwand gedämmt, " : ""} 
				{aufnahme.oberste_geschossdecke_gedaemmt ? "oberste Geschossdecke gedämmt, " : ""} 
				{aufnahme.oberste_geschossdecke_min_12cm_gedaemmt ? "oberste Geschossdecke min. 12cm gedämmt, " : ""} 
				{aufnahme.dachgeschoss_min_12cm_gedaemmt ? "Dachgeschoss min. 12cm gedämmt, " : ""} 
				{aufnahme.aussenwand_min_12cm_gedaemmt ? "Außenwand min. 12cm gedämmt" : ""}
			</div>
			<div class="text-xs space-y-1 p-2">
				<span class="font-semibold">Hiermit bestätige ich {benutzer.vorname} {benutzer.name} als Besteller:</span><br>
				{#if ausweis.pruefpunkt_heizungsalter}
				<div>Das Heizungsalter ist jünger als 3 Jahre. Es betrifft einen Heizungstausch ohne energetische Verbesserung.</div>
				{/if}
				{#if ausweis.pruefpunkt_verbrauch_niedrig}
				<div>Ich habe die Verbrauchsangaben kontrolliert. Der niedrige Energiekennwert ist korrekt.</div>
				{/if}
				{#if ausweis.pruefpunkt_verbrauch_hoch}
				<div>Ich habe die Verbrauchsangaben kontrolliert. Der hohe Energiekennwert ist korrekt.</div>
				{/if}
				{#if ausweis.pruefpunkt_verbrauch_null}
				<div>Die eingegebenen Heizverbräuche sind korrekt und alle 3 Felder wurden vollständig eingegeben.</div>
				{/if}
				{#if ausweis.pruefpunkt_verbrauch_abweichung}
				<div>Die eingegebenen Heizverbräuche sind korrekt und die Abweichung lässt sich begründen.</div>
				{/if}
				{#if ausweis.pruefpunkt_wohnflaeche_einheiten}
				<div>Die Angabe der Wohnfläche ist korrekt und bezieht sich auf das gesamte Gebäude.</div>
				{/if}
				{#if ausweis.pruefpunkt_strom_null}
				<div>Die eingegebenen Stromverbräuche sind korrekt. Alle 3 Felder wurden vollständig eingegeben.</div>
				{/if}
				{#if ausweis.pruefpunkt_strom_abweichung}
				<div>Die eingegebenen Stromverbräuche sind korrekt und die Abweichung lässt sich begründen.</div>
				{/if}
				{#if ausweis.pruefpunkt_heizungsanlage}
				<div>Das Baujahr der Heizungsanlage ist kleiner als das Baujahr des Gebäudes und begründet.</div>
				{/if}
				{#if ausweis.pruefpunkt_anteil_warmwasser}
				<div>Ich habe den Warmwasseranteil nochmal überprüft. Dieser ist korrekt und begründet.</div>
				{/if}
				{#if ausweis.pruefpunkt_wohnflaeche}
				<div>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.</div>
				{/if}
				<div>Ich habe die AGB und DSGVO im <a href="/impressum#agb" target="_blank" rel="noopener noreferrer">Impressum</a> gelesen und akzeptiert. Ich bestätige die Richtigkeit der Eingabe.</div>
			</div>
		</div>
	</div>					
</div>

<div class="relative bg-base-200 border border-base-300 rounded-lg p-4 mx-2">
	<div class="card-body">
		<div class="flex flex-col flex-wrap items-left gap-2">
			
			<h3 class="font-semibold text-lg">Bilder</h3>
			<div class="grid grid-cols-[1fr] md:grid-cols-[1fr,1fr,1fr] lg:grid-cols-[1fr,1fr,1fr] justify-start items-center gap-2">
			{#each aufnahme.bilder as bild, i (i)}
			<img src="/bilder/{bild.id}.jpg" alt={bild.kategorie} loading="lazy" class="max-h-[10vh] h-full w-full object-contain">
			{/each}
			</div>
			<hr>
			<h3 class="font-semibold text-lg">Unterlagen</h3>
			<div class="text-sm">
				{#if aufnahme.unterlagen.length > 0}
					{#each aufnahme.unterlagen as unterlage}
						<a href="/unterlagen/{unterlage.id}.{mime.getExtension(unterlage.mime)}" target="_blank" class="text-black flex flex-row items-center gap-2 bg-base-200 p-2 rounded-lg"><FileText size={32}></FileText> {unterlage.name}</a>
					{/each}
				{/if}
			</div>
		</div>

		<div class="dropdown dropdown-top items-end absolute bottom-4 right-4 z-50">
			<div class="indicator">
				{#if Object.keys($notifications).length > 0}
					<span class="indicator-item badge badge-accent text-xs"
						>{Object.keys($notifications).length}</span
					>
				{/if}
				<button
					tabindex="0"
					class="hover:bg-gray-200 p-3 rounded-lg"
				>
					<Bell size={24} />
				</button>
			</div>
			<ul
				class="dropdown-content mb-2 border border-base-300 z-10 menu py-4 px-0 bg-base-200 rounded-box w-80"
			>
				<NotificationProvider component={DashboardNotification} />
			</ul>
		</div>

	</div>
</div>

<dialog bind:this={hilfeModal} class="modal">
	<div class="modal-box">
		<h3 class="font-bold text-xl mb-4">Hilfe Anfordern</h3>
		<p>
			Brauchen sie Hilfe bei der Erstellung oder Bearbeitung ihres
			Ausweises?
		</p>
		<p>
			In unserem <a href="/helpdesk">Helpdesk</a> finden sie antworten auf
			häufig gestellte Fragen.
		</p>
		<p>
			Falls sie dort nicht finden wonach sie suchen, rufen sie uns doch
			unter <a href="tel:040-209-339-850">040 209 339 850</a> an oder
			<a href="mailto:info@online-energieausweis.com">schreiben sie uns eine email</a
			>.
		</p>
		<p>
			Wenn wir telefonisch nicht erreichbar sind, können sie uns auch
			direkt hier eine Nachricht hinterlassen.
		</p>
		<form class="my-4">
			<textarea
				class="textarea textarea-bordered"
				placeholder="Ihre Nachricht..."
				cols="10"
				rows="5"
			></textarea>
			<button class="btn btn-primary">Nachricht Abschicken</button>
		</form>
		<div class="modal-action">
			<form method="dialog">
				<button class="btn">Schließen</button>
			</form>
		</div>
	</div>
</dialog>

<style lang="postcss">

	*{@apply font-sans
	}
	</style>
	