<script lang="ts">
	import { endEnergieVerbrauchVerbrauchsausweis_2016 } from "#lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016.js";
	import moment from "moment";
	import {
	AufnahmeClient,
	getAusweisartFromUUID,
	ObjektClient,
	UploadedGebaeudeBild,
	VerbrauchsausweisWohnenClient,
	} from "./Ausweis/types.js";
	import AusweisPruefenTooltip from "./AusweisPruefenTooltip.svelte";
	import { addNotification } from "#components/Notifications/shared.js";
	import { CheckCircled, CrossCircled, Image } from "radix-svelte-icons";
	import ChevronDown from "radix-svelte-icons/src/lib/icons/ChevronDown.svelte";
	import { Event } from "#lib/client/prisma.js";
	import { api } from "astro-typesafe-api/client";
	import Cookies from "js-cookie";
	import { API_ACCESS_TOKEN_COOKIE_NAME } from "#lib/constants.js";
	import NotificationWrapper from "./Notifications/NotificationWrapper.svelte";
		

	export let ausweis: VerbrauchsausweisWohnenClient;
	export let aufnahme: AufnahmeClient;
	export let objekt: ObjektClient;
	export let bilder: UploadedGebaeudeBild[]
	export let events: Event[]
	export let calculations: Awaited<
		ReturnType<typeof endEnergieVerbrauchVerbrauchsausweis_2016>
	>;

	async function ausweisAusstellen(uid: string) {
		try {
			await api.admin.ausstellen.GET.fetch({
				uid_ausweis: uid
			}, {
				headers: {
					"Authorization": `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`
				}
			})
		} catch(e) {			
			addNotification({
				message: "Das hat nicht geklappt.",
				subtext: e as string,
				timeout: 3000,
				type: "error",
			})
		}
	}

	

	const ausweisArt = getAusweisartFromUUID(ausweis.uid)

	let verbrauchWWGesamt_1 = "";
	let verbrauchWWGesamt_2 = "";

	var Ausweisbild,
		DatenBlattBild,
		warmWasser,
		anteilWarmwasser,
		solarsystemWarmwasser;

    let zurueckGestellt: any;
    let symbolPruefung: any;
	let	StatusIcon: any;
	let tooltip3Z1: any;
	let tooltip3Z2: any;
	let tooltip4Z1: any;
	let tooltip4Z2: any;
	let tooltip5Z1: any;
	let tooltip5Z2: any;
	let tooltip5Z3: any;
	let tooltip6Z1: any;
	let tooltip6Z2: any;
	let tooltip7Z1: any;
	let tooltip7Z2: any;
	let tooltip8Z1: any;
	let tooltip8Z2: any;
	let tooltip9Z1: any;
	let tooltip9Z2: any;
	let tooltip10Z1: any;
	let tooltip10Z2: any;
	let tooltip11Z1: any;
	let tooltip11Z2: any;
	let tooltip12Z1: any;
	let tooltip12Z2: any;
	let tooltip13Z1: any;
	let tooltip13Z2: any;
	let tooltip14Z1: any;
	let tooltip14Z2: any;
	let tooltip15Z1: any;
	let tooltip15Z2: any;
	let tooltip16Z1: any;
	let tooltip16Z2: any;

	let table3Z1: any;
	let table3Z2: any;
	let table4Z1: any;
	let table4Z2: any;
	let table5Z1: any;
	let table5Z2: any;
	let table6Z1: any;
	let table6Z2: any;
	let table7Z1: any;
	let table7Z2: any;
	let table8Z1: any;
	let table8Z2: any;
	let table9Z1: any;
	let table9Z2: any;
	let table10Z1: any;
	let table10Z2: any;
	let table11Z1: any;
	let table11Z2: any;
	let table12Z1: any;
	let table12Z2: any;
	let table13Z1: any;
	let table13Z2: any;
	let table14Z1: any;
	let table14Z2: any;
	let table15Z1: any;
	let table15Z2: any;
	let table16Z1: any;
	let table16Z2: any;

	let Abgeschlossen: any;

	if (ausweis.ausgestellt) {
		Ausweisbild = "/images/dashboard/ausweishaken.jpg";
		DatenBlattBild = "/images/dashboard/datenblatthaken.jpg";
		StatusIcon = "/images/dashboard/erledigt.svg";
		Abgeschlossen = 0;
	} else if (ausweis.bestellt) {
		Ausweisbild = "/images/dashboard/ausweis.jpg";
		DatenBlattBild = "/images/dashboard/datenblatt.jpg";
		StatusIcon = "/images/dashboard/bestellt.svg";
		Abgeschlossen = 1;
	} else {
		Ausweisbild = "/images/dashboard/ausweiskreuz.jpg";
		DatenBlattBild = "/images/dashboard/datenblattkreuz.jpg";
		StatusIcon = "/images/dashboard/gespeichert.svg";
		Abgeschlossen = 2;
	}

	if (aufnahme.boxpruefung) {
		symbolPruefung = "/images/dashboard/kreishaken.png";
	} else {
		symbolPruefung = "/images/dashboard/kreiskreuz.png";
	}

	if (ausweis.zurueckgestellt) {
		zurueckGestellt =
			"<img src='/images/dashboard/zurueckGestellt.svg' alt='Status' width=\"25\" height=\"25\"></img>";
	} else {
		zurueckGestellt = "";
	}


		if (ausweis.warmwasser_enthalten) {
			warmWasser = "Warmwasser enthalten";
		} else {
			warmWasser = "Warmwasser nicht enthalten";
		}
		if (ausweis.warmwasser_anteil_bekannt) {
			anteilWarmwasser = "Anteil bekannt";
		} else {
			anteilWarmwasser = "Anteil unbekannt";
		}

		if (
			ausweis.warmwasser_enthalten &&
			ausweis.warmwasser_anteil_bekannt
		) {
			if (aufnahme.solarsystem_warmwasser) {
				// Wenn Warmwasser enthalten und Anteil bekannt und Solarsystem
				verbrauchWWGesamt_1 = `${calculations?.energieVerbrauchGesamt_1} kWh x ${(ausweis.anteil_warmwasser_1 || 0) / 100} x 0.6`;
				verbrauchWWGesamt_2 = `${calculations?.energieVerbrauchGesamt_2} kWh x ${(ausweis.anteil_warmwasser_2 || 0) / 100} x 0.6`;
				solarsystemWarmwasser = "Solarsystem Warmwasser";
			} else {
				// Wenn Warmwasser enthalten und Anteil bekannt und **kein** Solarsystem
				verbrauchWWGesamt_1 = `${calculations?.energieVerbrauchGesamt_1} kWh x ${(ausweis.anteil_warmwasser_1 || 0) / 100} x 0.6`
				verbrauchWWGesamt_2 = `${calculations?.energieVerbrauchGesamt_2} kWh x ${(ausweis.anteil_warmwasser_2 || 0) / 100} x 0.6`
				solarsystemWarmwasser = "kein Solarsystem Warmwasser";
			}
		} else {
			if (aufnahme.solarsystem_warmwasser) {
				// Wenn Warmwasser Anteil unbekannt und Solarsystem
				verbrauchWWGesamt_1 =
					calculations?.energetischeNutzflaeche +
					" m² x 12 kWh/m² x 3 Jahre";
				solarsystemWarmwasser = "Solarsystem Warmwasser";
			} else {
				// Wenn Warmwasser Anteil unbekannt und **kein** Solarsystem
				verbrauchWWGesamt_1 =
					calculations?.energetischeNutzflaeche +
					" m² x 20 kWh/m² x 3 Jahre";
				solarsystemWarmwasser = "kein Solarsystem Warmwasser";
			}
		}



		tooltip3Z1 = "Wohnfläche in m²";
		tooltip3Z2 =
		ausweis.faktorKeller +
			" x " +
			aufnahme.flaeche +
			" m² Energetische Nutzfläche (Keller " +
			ausweis.keller_beheizt +
			" ) in m²";
			table3Z1 = aufnahme.flaeche;
			table3Z2 = calculations?.energetischeNutzflaeche;

	
		tooltip4Z1 =
			"(" +
			ausweis.verbrauch_1 +
			" " +
			ausweis.einheit_1 +
			" + " +
			ausweis.verbrauch_2 +
			" " +
			ausweis.einheit_1 +
			" + " +
			ausweis.verbrauch_3 +
			" " +
			ausweis.einheit_1 +
			") x " +
			calculations?.brennstoff_1.umrechnungsfaktor +
			" kWh/" +
			ausweis.einheit_1 +
			" >> Verbrauch 1 " +
			aufnahme.brennstoff_1 +
			" in kWh";
		tooltip4Z2 =
			"(" +
			ausweis.verbrauch_4 +
			" " +
			ausweis.einheit_2 +
			" + " +
			ausweis.verbrauch_5 +
			" " +
			ausweis.einheit_2 +
			" + " +
			ausweis.verbrauch_6 +
			" " +
			ausweis.einheit_2 +
			") x " +
			calculations?.brennstoff_2.umrechnungsfaktor +
			" kWh/" +
			ausweis.einheit_2 +
			" >> Verbrauch 2 " +
			aufnahme.brennstoff_2 +
			" in kWh";
		table4Z1 = calculations?.energieVerbrauchGesamt_1;
		table4Z2 = calculations?.energieVerbrauchGesamt_2;
	
		tooltip5Z1 =
			warmWasser + ", " + anteilWarmwasser + ", " + solarsystemWarmwasser;
		tooltip5Z2 = verbrauchWWGesamt_1;
		tooltip5Z3 = verbrauchWWGesamt_2;
		table5Z1 = calculations?.energieVerbrauchWarmwasser_1;
		table5Z2 = calculations?.energieVerbrauchWarmwasser_2;
	
		tooltip6Z1 =
			"(" +
			calculations?.klimafaktoren[0].klimafaktor +
			" + " +
			calculations?.klimafaktoren[1].klimafaktor +
			" + " +
			calculations?.klimafaktoren[2].klimafaktor +
			") / 3 >> durchschnittlicher Klimafaktor";
		tooltip6Z2 = "";
		table6Z1 = calculations?.durchschnittsKlimafaktor;
		table6Z2 = "";

		tooltip7Z1 =
			calculations?.energieVerbrauchHeizung_1 +
			" kWh x " +
			calculations?.durchschnittsKlimafaktor +
			" >> Klimabereinigter Heizverbrauch 1 in kWh";
		tooltip7Z2 =
			calculations?.energieVerbrauchHeizung_2 +
			" kWh x " +
			calculations?.durchschnittsKlimafaktor +
			" >> Klimabereinigter Heizverbrauch 2 in kWh";
		table7Z1 = calculations?.energieVerbrauchHeizungBereinigt_1;
		table7Z2 = calculations?.energieVerbrauchHeizungBereinigt_2;
	
	
		tooltip8Z1 =
			calculations?.energetischeNutzflaeche +
			" m² x 6 kWh/m² x 3 Jahre >> Kühlungszuschlag in kWh";
		tooltip8Z2 = "";
		table8Z1 = calculations?.kuehlungsZuschlag;
		table8Z2 = "";
	
		tooltip9Z1 =
			"-0.0028 x " +
			calculations?.durchschnittsEnergieVerbrauchHeizungBereingt +
			" + 0.9147 >> Heizungsfaktor";
		tooltip9Z2 =
			"(" +
			calculations?.energieVerbrauchHeizungBereinigt_1 +
			" + " +
			calculations?.energieVerbrauchHeizungBereinigt_2 +
			") / (3 * " +
			calculations?.energetischeNutzflaeche +
			") >> Durchschnittsverbrauch Heizung in kWh";
		table9Z1 =
			calculations?.faktorDurchschnittsEnergieVerbrauchHeizungBereinigt;
		table9Z2 = calculations?.durchschnittsEnergieVerbrauchHeizungBereingt;

		tooltip10Z1 =
			calculations[
				"faktorDurchschnittsEnergieVerbrauchHeizungBereinigt"
			] +
			" x " +
			calculations?.leerstand +
			" x (" +
			calculations.energieVerbrauchHeizungBereinigt_1 +
			" + " +
			calculations.energieVerbrauchHeizungBereinigt_2 +
			") >> Leerstandszuschlag Heizung in kWh";
		tooltip10Z2 =
			calculations?.leerstand +
			" x (" +
			calculations?.energieVerbrauchWarmwasser_1 +
			" + " +
			calculations?.energieVerbrauchWarmwasser_2 +
			") >> Leerstandszuschlag Warmwasser in kWh";
		table10Z1 = calculations?.leerstandsZuschlagHeizung;
		table10Z2 = calculations?.leerstandsZuschlagWarmwasser;

		tooltip11Z2 =
			"(" +
			calculations?.energieVerbrauchHeizungBereinigt_2 +
			" + " +
			calculations?.energieVerbrauchWarmwasser_2 +
			") / (3 Jahre x " +
			calculations?.energetischeNutzflaeche +
			")  Endenergieverbrauch 2 in kWh/m²a";
		table11Z1 = calculations?.endEnergieVerbrauch_1;
		table11Z2 = calculations?.endEnergieVerbrauch_2;

		tooltip12Z1 =
			"((" +
			calculations?.energieVerbrauchHeizungBereinigt_1 +
			" x " +
			calculations?.primaerfaktor_1 +
			") + (" +
			calculations?.energieVerbrauchWarmwasser_1 +
			" x " +
			calculations?.primaerfaktorww +
			")) / (3 Jahre x " +
			calculations?.energetischeNutzflaeche +
			")  Primärenergieverbrauch 1 in kWh/m²a";
		tooltip12Z2 =
			"((" +
			calculations?.energieVerbrauchHeizungBereinigt_2 +
			" x " +
			calculations?.primaerfaktor_1 +
			") + (" +
			calculations?.energieVerbrauchWarmwasser_2 +
			" x " +
			calculations?.primaerfaktorww_1 +
			")) / (3 Jahre x " +
			calculations?.energetischeNutzflaeche +
			") Primärenergieverbrauch 2 in kWh/m²a";
		table12Z1 = calculations?.primaerEnergieVerbrauch_1;
		table12Z2 = calculations?.primaerEnergieVerbrauch_2;

		tooltip13Z1 =
			"(" +
			calculations?.leerstandsZuschlagHeizung +
			" + " +
			calculations?.leerstandsZuschlagWarmwasser +
			") / (3 Jahre x " +
			calculations?.energetischeNutzflaeche +
			") Endenergieverbrauch Leerstand in kWh/m²a";
		tooltip13Z2 =
			"(" +
			calculations?.kuehlungsZuschlag +
			") / (3 Jahre x " +
			calculations?.energetischeNutzflaeche +
			") Endenergieverbrauch Kühlung in kWh/m²a";
		table13Z1 = calculations?.endEnergieVerbrauchLeerstandsZuschlag;
		table13Z2 = calculations?.endEnergieVerbrauchKuehlungsZuschlag;

		tooltip14Z1 =
			calculations?.endEnergieVerbrauchLeerstandsZuschlag +
			" x " +
			calculations?.primaerfaktor +
			" Primärenergieverbrauch Leerstand in kWh/m²a";
		tooltip14Z2 =
			calculations?.endEnergieVerbrauchKuehlungsZuschlag +
			" x 1.8 Primärenergieverbrauch Kühlung in kWh/m²a";
		table14Z1 = calculations?.primaerEnergieVerbrauchLeerstandsZuschlag;
		table14Z2 = calculations?.primaerEnergieVerbrauchKuehlungsZuschlag;

		tooltip15Z1 =
			calculations?.endEnergieVerbrauch_1 +
			" + " +
			calculations?.endEnergieVerbrauch_2 +
			" + " +
			calculations?.endEnergieVerbrauchLeerstandsZuschlag +
			" + " +
			calculations?.endEnergieVerbrauchKuehlungsZuschlag +
			" Endenergieverbrauch in kWh/m²a";
		tooltip15Z2 =
			"(" +
			calculations?.endEnergieVerbrauch_1 +
			" x " +
			calculations?.co2Emissionen_1 +
			") + (" +
			calculations?.endEnergieVerbrauch_2 +
			" x " +
			calculations?.co2Emissionen_2 +
			") + (" +
			calculations?.endEnergieVerbrauchLeerstandsZuschlag +
			" x " +
			calculations?.co2Emissionen_1 +
			") + (" +
			calculations?.endEnergieVerbrauchKuehlungsZuschlag +
			" x " +
			calculations?.co2Emissionen_1 +
			") CO2-Emissionen in kg/m²a";
		table15Z1 = calculations?.endEnergieVerbrauchGesamt;
		table15Z2 = calculations?.co2EmissionenGesamt;

		tooltip16Z1 =
			calculations?.primaerEnergieVerbrauch_1 +
			" + " +
			calculations?.primaerEnergieVerbrauch_2 +
			" + " +
			calculations?.primaerEnergieVerbrauchLeerstandsZuschlag +
			" x " +
			calculations?.primaerEnergieVerbrauchKuehlungsZuschlag +
			" Primärenergieverbrauch in kWh/m²a";
		tooltip16Z2 = "Effizienzklasse";
		table16Z1 = calculations?.primaerEnergieVerbrauchGesamt;
		table16Z2 = aufnahme.energieeffizienzklasse;

	let imagePreview = "";

	// let imageJson = JSON.parse(ausweis.images);
	// let imagePreview = "";
	// if (typeof imageJson === "object") {
	// 	imagePreview =
	// 		imageJson.daemmung.toString() +
	// 		"," +
	// 		imageJson.general.toString() +
	// 		"," +
	// 		imageJson.fenster.toString() +
	// 		"," +
	// 		imageJson.heizung.toString();
	// }

	async function stornieren(ausweis: VerbrauchsausweisWohnenClient) {
		try {
			const response = await api.admin.stornieren.PUT.fetch({
				uid_ausweis: ausweis.uid
			}, {
				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,
			})
		}
	}

	let bilderModal: HTMLDialogElement;
	let infoVisible = false;


	async function registriernummerAnfordern(uid: string) {
		try {
			const result = await api.admin.registriernummer.GET.fetch({
				uid
			}, {
				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,
			})
		}
	}
</script>

<div class="border rounded-lg bg-base-200">
	<table class="">
		<tbody>
			<tr>
				<td><button on:click={() => infoVisible = !infoVisible}><ChevronDown size={22} class="transition-all {infoVisible ? "" : "rotate-180"}"></ChevronDown></button></td>
				<td class="w-6 px-2"
					>
					{#if ausweis.ausgestellt}
						<div class="tooltip" data-tip="Ausweis wurde ausgestellt">
							<div class="rounded-full w-6 h-6 bg-success"></div>
						</div>
					{:else if ausweis.bestellt}
						<div class="tooltip" data-tip="Ausweis wurde bestellt">
							<div class="rounded-full w-6 h-6 bg-warning"></div>
						</div>
					{:else}
						<div class="tooltip" data-tip="Ausweis ist in Bearbeitung">
							<div class="rounded-full w-6 h-6 bg-error"></div>
						</div>
					{/if}
					</td
				>
				<td width="150px"
					>
					<AusweisPruefenTooltip>
						<div slot="tooltip">
							<span>{aufnahme.adresse} {aufnahme.plz} {aufnahme.ort}</span>
							<br>
							<span>{aufnahme.gebaeudetyp}, Einheiten: {aufnahme.einheiten}</span>
						</div>
						<span>{ausweisArt} - {aufnahme.id}</span>
						<span>{moment(aufnahme.erstellungsdatum).format("DD.MM.YYYY")}</span>
					</AusweisPruefenTooltip></td
				>
				<td width="35px"
					>
					<AusweisPruefenTooltip>
						<div slot="tooltip">
							<span>Baujahr Gebäude / Baujahr Heizung</span>
						</div>
						<span>{aufnahme.baujahr_gebaeude.join(", ")}</span>
							<span>{aufnahme.baujahr_heizung.join(", ")}</span>
					</AusweisPruefenTooltip>
					<div class="tooltip" data-tip="">
						
					</div></td
				>
				<td width="45px"
					>
					<AusweisPruefenTooltip>
						<div slot="tooltip">
							<span>Wohnfläche in m²</span>
							<br>
							<span>{ausweis.faktorKeller} x {aufnahme.flaeche}m² Energetische Nutzfläche (Keller {aufnahme.keller}) in m²</span>
						</div>
						<span>{aufnahme.flaeche}</span>
						<span><strong>{calculations?.energetischeNutzflaeche}</strong></span>
					</AusweisPruefenTooltip>
					</td
				>
				<td width="90px"
					>
					<AusweisPruefenTooltip>
						<div slot="tooltip">
							<span>{tooltip4Z1}</span>
							<br>
							<span>{tooltip4Z2}</span>
						</div>
						<span>{table4Z1}</span>
						<span>{table4Z2}</span>
					</AusweisPruefenTooltip></td
				>
				<td width="70px"
					>
					<AusweisPruefenTooltip>
						<div slot="tooltip">
							<span>{tooltip5Z1}</span>
							<br>
							<span>{tooltip5Z2}</span>
							<br>
							<span>{tooltip5Z3}</span>
						</div>
						<span>{table5Z1}</span>
						<span>{table5Z2}</span>
					</AusweisPruefenTooltip>
					</td
				>
				<td width="50px"
					>
					<AusweisPruefenTooltip>
						<div slot="tooltip">
							<span>{tooltip6Z1}</span>
							<br>
							<span>{tooltip6Z2}</span>
						</div>
						<span><strong>{table6Z1}</strong></span>
						<span><strong>{table6Z2}</strong></span>
					</AusweisPruefenTooltip></td
				>
				<td width="90px"
					>
					<AusweisPruefenTooltip>
						<div slot="tooltip">
							<span>{tooltip7Z1}</span>
							<br>
							<span>{tooltip7Z2}</span>
						</div>
						<span>{table7Z1}</span>
						<span>{table7Z2}</span>
					</AusweisPruefenTooltip></td
				>
				<td width="60px"
					>
					<AusweisPruefenTooltip>
						<div slot="tooltip">
							<span>{tooltip8Z1}</span>
							<br>
							<span>{tooltip8Z2}</span>
						</div>
						<span>{table8Z1}</span>
						<span>{table8Z2}</span>
					</AusweisPruefenTooltip></td
				>
				<td width="50px"
					>
					<AusweisPruefenTooltip>
						<div slot="tooltip">
							<span>{tooltip9Z1}</span>
							<br>
							<span>{tooltip9Z2}</span>
						</div>
						<span>{table9Z1}</span>
						<span><strong>{table9Z2}</strong></span>
					</AusweisPruefenTooltip></td
				>
				<td width="100px"
					>
					<AusweisPruefenTooltip>
						<div slot="tooltip">
							<span>{tooltip10Z1}</span>
							<br>
							<span>{tooltip10Z2}</span>
						</div>
						<span>{table10Z1}</span>
						<span>{table10Z2}</span>
					</AusweisPruefenTooltip></td
				>
				<td width="110px"
					>
					<AusweisPruefenTooltip>
						<div slot="tooltip">
							<span>({calculations?.energieVerbrauchHeizungBereinigt_1} + {calculations?.energieVerbrauchWarmwasser_1}) / (3 Jahre x {calculations?.energetischeNutzflaeche}) Endenergieverbrauch 1 in kWh/m²a</span>
							<br>
							<span>{tooltip11Z2}</span>
						</div>
						<span>{table11Z1}</span>
						<span>{table11Z2}</span>
					</AusweisPruefenTooltip></td
				>
				<td width="50px"
					>
					<AusweisPruefenTooltip>
						<div slot="tooltip">
							<span>{tooltip12Z1}</span>
							<br>
							<span>{tooltip12Z2}</span>
						</div>
						<span>{table12Z1}</span>
						<span>{table12Z2}</span>
					</AusweisPruefenTooltip>
					</td
				>
				<td width="60px"
					>
					<AusweisPruefenTooltip>
						<div slot="tooltip">
							<span>{tooltip13Z1}</span>
							<br>
							<span>{tooltip13Z2}</span>
						</div>
						<span>{table13Z1}</span>
						<span>{table13Z2}</span>
					</AusweisPruefenTooltip>
					</td
				>
				<td width="45px"
					>
					<AusweisPruefenTooltip>
						<div slot="tooltip">
							<span>{tooltip14Z1}</span>
							<br>
							<span>{tooltip14Z2}</span>
						</div>
						<span>{table14Z1}</span>
						<span>{table14Z2}</span>
					</AusweisPruefenTooltip>
					</td
				>
				<td width="45px"
					>
					<AusweisPruefenTooltip>
						<div slot="tooltip">
							<span>{tooltip15Z1}</span>
							<br>
							<span>{tooltip15Z2}</span>
						</div>
						<span><strong>{table15Z1}</strong></span>
						<span><strong>{table15Z2}</strong></span>
					</AusweisPruefenTooltip>
					</td
				>
				<td width="50px"
					>
					<AusweisPruefenTooltip>
						<div slot="tooltip">
							<span>{tooltip16Z1}</span>
							<br>
							<span>{tooltip16Z2}</span>
						</div>
						<span><strong>{table16Z1}</strong></span>
						<span><strong>{table16Z2}</strong></span>
					</AusweisPruefenTooltip>
					</td
				>
				<td title="Gebäudebilder anzeigen"
					><!-- Open the modal using ID.showModal() method -->
	<button class="btn btn-square" on:click={() => bilderModal.showModal()}><Image size={22}></Image></button>
	<dialog bind:this={bilderModal} class="modal p-4 rounded-lg">
		<div class="modal-box flex flex-row gap-4 items-center justify-center">
			{#if bilder.length === 0}
				<div class="flex flex-col gap-4 items-center justify-center">
					<p>Für diesen Ausweis sind noch keine Bilder vorhanden.</p>
					<button class="button" tabindex="0">Erinnerung Verschicken</button>
				</div>
			{:else}
				{#each bilder as image}
					<div>
						<h2 class="text-lg mb-4 font-bold">{image.kategorie}</h2>
						<img src="/bilder/{image.uid}.jpg">
					</div>
				{/each}
			{/if}
		</div>
		<form method="dialog" class="modal-backdrop">
			<button class="button">Close</button>
		</form>
	</dialog></td
				>
				<td class="w-[30px]"
					>
					<AusweisPruefenTooltip>
						<div slot="tooltip">
							<span>{aufnahme.prueftext}</span>
						</div>
						{#if aufnahme.boxpruefung}
							<CheckCircled size={22}></CheckCircled>
						{:else}
							<CrossCircled size={22}></CrossCircled>
						{/if}
					</AusweisPruefenTooltip></td
				>
				<td title="Ausweis anzeigen" class="w-[50px]"
					><a
						class="energieausweis-img"
						href="/pdf/ansichtsausweis?uid={ausweis.uid}"
						target="_blank"
						><img
							src="/images/dashboard/ausweis.jpg"
							alt="Energieausweis"
							class="w-full h-8"
						/></a
					></td
				>
				<td title="Datenblatt anzeigen" width="50px"
					><a
						class="energieausweis-img"
						href="/pdf/datenblatt?uid={ausweis.uid}"
						target="_blank"
						><img
							src="/images/dashboard/datenblatt.jpg"
							alt="Datenblatt"
						/></a
					></td
				>
				<td
					title="Ausweis stornieren und Zahlung wenn erforderlich automatisch zurückbuchen"
					class="w-4 p-1"
					><button
						class="btn btn-xs btn-ghost"
						on:click={() => stornieren(ausweis)}>S</button
					></td
				>
				<td title="Ausweis ausstellen" class="w-4 p-1"
					><button
						class="btn btn-xs btn-ghost"
						on:click={() => ausweisAusstellen(aufnahme.uid)}>A</button
					></td
				>
				<td
					title="Ausweis ausstellen und per Post verschicken"
					class="w-4 p-1"
					><button
						class="btn btn-xs btn-ghost"
						on:click={() => ausweisAusstellenPost(aufnahme.uid)}>P</button
					></td
				>
				<td
					title="E-Mail an Kunden schicken mit Erläuterungen warum der Ausweis noch nicht ausgestellt werden kann."
					class="w-4 p-1"
					><button
						class="btn btn-xs btn-ghost"
						on:click={() => ausweisnichtAusstellen(aufnahme.uid)}>N</button
					></td
				>
				<td
					title="Bestellbestätigung nochmal schicken (Zahlung nicht erfolgreich)"
					class="w-4 p-1"
					><button
						class="btn btn-xs btn-ghost"
						on:click={() => bestellBestaetigung(aufnahme.uid)}>B</button
					></td
				>
				<td
					title="E-Mail an Kunden schicken mit Erinnerung die Bestellung abzuschließen."
					class="w-4 p-1"
					><button
						class="btn btn-xs btn-ghost"
						on:click={() => erinnern(aufnahme.uid)}
						>E</button
					></td
				>
				<td
					title="Zum Formular mit allen Eingabedaten."
					class="w-4 p-1"
					><a
						class="btn btn-xs btn-ghost"
						target="_blank"
						href="/energieausweis-erstellen/gespeichert?id={aufnahme.uid}">F</a
					></td
				>
				{#if aufnahme.kontrolldatei}
					<td title="XML-Datei an das DiBT verschicken." class="w-4 p-1"><button class="btn btn-xs btn-ghost" on:click={() => {
						xmlAbschicken(aufnahme.uid)
					}}>X</button></td>
				{/if}
				{#if !ausweis.registriernummer}
					<td title="Registriernummer vom DiBT anfordern." class="w-4 p-1"><button class="btn btn-xs btn-ghost" on:click={() => {
						registriernummerAnfordern(ausweis.uid)
					}}>R</button></td>
				{/if}
			</tr>
		</tbody>
	</table>

	<div class:hidden={!infoVisible} class:block={infoVisible} class="py-4 border-t">
		<div class="grid grid-cols-[2fr_1fr] prose max-w-full">
			<div class="border-r px-8">
				<h3 class="mt-0">Wichtige Daten</h3>
				<table>
					<tbody>
						<tr>
							<td>Angewendete Berechnungsformel</td>
							<td><strong>EnEV 2016</strong></td>
						</tr>
						<tr>
							<td>Berechnungsergebnis</td>
							<td>{calculations?.endEnergieVerbrauchGesamt}kWh/m2/A - Energieeffizienzklasse <strong>{calculations?.energieEffizienzKlasse}</strong></td>
						</tr>
						<tr>
							<td>Informationen des Nutzers</td>
							<td>{aufnahme.boxpruefung}</td>
						</tr>
						<tr>
							<td>UID</td>
							<td><strong><pre>{ausweis.uid}</pre></strong></td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="px-8">
				<h3 class="mt-0">Ereignisse</h3>
				<ul class="timeline timeline-snap-icon max-md:timeline-compact timeline-vertical">
					<li>
						<div class="timeline-middle">
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /></svg>
						</div>
						<div class="timeline-start md:text-end mb-10">
							<time class="font-mono italic">{moment(ausweis.erstellungsdatum).format("DD.MM.YYYY - HH:mm")} Uhr</time>
							<div class="text-lg font-black">Ausweis erstellt</div>
						</div>
						<hr/>
					</li>
					{#each events as event, i}
						<li>
							<hr />
							<div class="timeline-middle">
								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /></svg>
							</div>
							<div class="mb-10" class:timeline-end={i % 2 == 0} class:timeline-start={i % 2 == 1}>
								<time class="font-mono italic">{moment(event.date).format("DD.MM.YYYY - HH:mm")} Uhr</time>
								<div class="text-lg font-black">{event.title}</div>
								{event.description || ""}
							</div>
							<hr />
						</li>
					{/each}
					{#if ausweis.erledigt}
					<li>
						<hr />
						<div class="timeline-middle">
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /></svg>
						</div>
						<div class="mb-10 timeline-end">
							<time class="font-mono italic">{moment(ausweis.ausstellungsdatum).format("DD.MM.YYYY - HH:mm")} Uhr</time>
							<div class="text-lg font-black">Ausweis ausgestellt</div>
							{ausweis.registriernummer ? `Registriernummer: ${ausweis.registriernummer}` : ""}
						</div>
						<hr />
					</li>
					{/if}
				</ul>
			</div>
		</div>
	</div>
</div>

<NotificationWrapper />