<script lang="ts">
	import ProgressBar from "#components/Ausweis/Progressbar.svelte";
	import type {
		BedarfsausweisWohnen,
		Benutzer,
		Bezahlmethoden,
		VerbrauchsausweisGewerbe,
		VerbrauchsausweisWohnen,
	} from "@ibcornelsen/database/client";
	import { Enums } from "@ibcornelsen/database/client";

	export let user: Benutzer;
	export let ausweis:
		| VerbrauchsausweisWohnen
		| BedarfsausweisWohnen
		| VerbrauchsausweisGewerbe;

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

	export let selectedPaymentType: Bezahlmethoden =
		Enums.Bezahlmethoden.paypal;

	import { PRICES } from "#lib/constants";

	const prices = PRICES[ausweis.ausweisart];

	let basePrice: number = prices[0];

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

<div class="w-full px-8">
	<div class="flex flex-row gap-8 items-center mb-8 w-full">
		<div class="flex flex-col w-full">
			<h1>Verbrauchsausweis erstellen - 45€</h1>
			<ProgressBar progress={50} />
		</div>
	</div>

	<form>
		<div class="grid grid-cols-[1.5fr_2fr] gap-4">
			<div class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col gap-4">
				<div class="flex flex-col gap-2 test-box">
					<strong>A - Prüfung der Ausweisart</strong>
					<div>
						<span>Vermietung, Verkauf oder sonstiges</span>
						<span
							>Baujahr Heizung nicht kleiner als Baujahr Gebäude</span
						><span
							>Baujahr nach 1977 oder saniert oder mehr als 4
							Wohneinheiten</span
						><span>Heizung min. 3 Jahre alt</span><span
							>Verbrauchsausweis zulässig</span
						>
					</div>
				</div>
				<div class="flex flex-col gap-2 test-box">
					<strong
						>B - Prüfung der Adresse, Wohnfläche, Keller und Dach</strong
					>
					<div>
						<span>PLZ gültig</span><span>Klimafaktorern</span><span
							>Wohnfläche passt zu Wohneinheiten</span
						>
					</div>
				</div>
				<div class="flex flex-col gap-2 test-box">
					<strong>C - Prüfung der Verbrauchsangaben</strong>
					<div>
						<span>Verbrauchsmenge schlüssig</span><span
							>Verbrauchsabweichung im Rahmen</span
						><span>Endenergieverbrauch schlüssig</span>
					</div>
				</div>
				<div class="flex flex-col gap-2 test-box">
					<strong
						>D - Prüfung Warmwasser und alternative
						Energieversorgung</strong
					>
					<div>
						<span>Warmwasseranteil schlüssig</span>
					</div>
				</div>
				<div class="flex flex-col gap-2 test-box">
					<strong
						>E - Prüfung von Gebäudetyp, Lüftung, Kühlung und
						Leerstand</strong
					>
					<div>
						<span>Leerstand nicht größer als 30%</span>
					</div>
				</div>
				<div class="flex flex-col gap-2 test-box">
					<strong
						>F - Prüfung des Sanierungsstandes und der Gebäudebilder</strong
					>
					<div>
						<span>Mindestens ein Bild pro Abschnitt vorhanden</span
						><span>Angaben zum Sanierungsstand vorhanden</span><span
							>Bei Baujahr vor 1978 Dach oder Geschossdecke min.
							12 cm gedämmt</span
						>
					</div>
				</div>
			</div>
			<div>
				<div class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col">
					<table>
						<tr>
							<td><strong>Produkt:</strong></td>
							<td
								><div class="py-2">
									Verbrauchsausweis
								</div></td
							>
						</tr>
						<tr>
							<td><strong>Beschreibung:</strong></td>
							<td>
								<div class="py-2">
									Registrierung beim DiBt<br />
									Prüfung durch Diplom Ingenieur<br />
									Energieausweis Vorschau als PDF<br />
								</div>
							</td>
						</tr>
						<tr>
							<td>Netto-Preis</td>
							<td
								><div class="py-2">
									{(price * 0.81).toFixed(2) + "€"}
								</div></td
							>
						</tr>
						<tr>
							<td>19% gesetzl. MwSt.</td>
							<td
								><div class="py-2">
									{(price * 0.19).toFixed(2) + "€"}
								</div></td
							>
						</tr>
						<hr>
						<tr>
							<td>Preis inkl. MwSt.</td>
							<td
								><div class="py-2">
									<strong>{price + "€"}</strong>
								</div>
							</td>
						</tr>
					</table>
				</div>
				<h3 class="font-semibold mt-8">Hiermit bestelle ich folgende Version des Energieausweises:</h3>
				<div class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col">
					<table>
						<tr>
							<td
								>Verbrauchsausweis online für {prices[0]} € inkl. MwSt.
								als PDF per E-Mail</td
							>
							<td
								><input
									type="radio"
									class="radio radio-secondary"
									bind:group={basePrice}
									value={prices[0]}
									name="Preis"
									checked
								/>
							</td>
						</tr>
						<tr>
							<td
								>Verbrauchsausweis online inkl. Beratung für {prices[1]}
								€ inkl. MwSt. als PDF per E-Mail</td
							>
							<td
								><input
									type="radio"
									class="radio radio-secondary"
									bind:group={basePrice}
									value={prices[1]}
									name="Preis"
								/>
							</td>
						</tr><tr>
							<td
								>Verbrauchsausweis offline für {prices[2]} € inkl. MwSt.
								als PDF per E-Mail (Sie schicken uns 3 Verbrauchsabrechnungen)</td
							>
							<td
								><input
									type="radio"
									class="radio radio-secondary"
									bind:group={basePrice}
									value={prices[2]}
									name="Preis"
								/></td
							>
						</tr>
					</table>
				</div>
	
				<h3 class="font-semibold mt-8">Zusatzleistungen</h3>
				<div class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col">
					<table>
						{#each services as service}
							<tr>
								<td>{service.name}</td>
								<td
									><input
										type="checkbox"
										class="checkbox checkbox-secondary"
										bind:checked={service.selected}
									/>
								</td>
							</tr>
						{/each}
					</table>
				</div>
			</div>
			
		</div>
		<div class="flex flex-row justify-between">
			<!-- TODO: Zurück implementieren -->
			<button class="btn btn-secondary mt-4">Zurück</button>
			<div class="flex flex-row gap-4">
				<!-- TODO: Speichern implementieren -->
				<button class="btn btn-secondary mt-4">Speichern</button>
				<button class="btn btn-secondary mt-4">Zum Kaufabschluss</button>
			</div>
		</div>
	</form>
</div>

<style>
	.test-box div {
		@apply flex flex-col gap-1.5;
	}
</style>
