<script lang="ts">
	import { fade } from "svelte/transition";
	import WidgetCardTemplate from "#components/widgets/immowelt/WidgetCardTemplate_immowelt.svelte";
	import { PRICES } from "#lib/constants.js";
	import { Enums } from "#lib/client/prisma";

	let ausnahme: boolean = false;
	let oneBOX: boolean = false;
	let threeBOX: boolean = false;	
	
	let gebaeudetyp: string 				= "bitte auswählen";
	let anlass: string 						= "bitte auswählen";
	let einheiten: string					= "bitte auswählen";
	let sanierungsstatus: string			= "bitte auswählen";
	let baujahr: string						= "bitte auswählen";
	let heizungsAlter: string				= "bitte auswählen";
	let leerStand: string					= "bitte auswählen";

	const twoBoxReason 						= ["Vermietung/Verkauf", "Aushangpflicht", "Sonstiges"];
	const gewerbeHouse 						= ["Gewerbegebäude", "Mischgebäude"];

$: ausnahme = 
    leerStand === "mehr als 30" || 
    heizungsAlter === "< 3" || 
    (baujahr === "vor 1978" && einheiten === "bis 4 Wohneinheiten" && sanierungsstatus === "unsaniert");

$: isTwoBoxReason = twoBoxReason.includes(anlass);

$: isGewerbe = gewerbeHouse.includes(gebaeudetyp);

$: oneBOX = 
    (ausnahme && !isGewerbe) ||
    (!isTwoBoxReason && gebaeudetyp !== "Mischgebäude") ||
    (gebaeudetyp === "Gewerbegebäude" && leerStand === "mehr als 30");

$: threeBOX = 
    (ausnahme && gebaeudetyp === "Mischgebäude" && isTwoBoxReason && leerStand !== "mehr als 30");


</script>


<div id="IBC_app">

	<input id="recode" type="hidden" value="widgetvorlage" />

	<div id="OEA_input">


		<div id="firstrow" class="firstrow"
  		class:sm:grid-cols-3={isTwoBoxReason}
  		class:sm:grid-cols-2={!isTwoBoxReason}>



			<div class="auswahl">
				<div class="titel">Anlass</div>
				<select
                    id="anlass"
					class="selectfeld"
					bind:value={anlass}>
				>
					<option selected disabled>bitte auswählen</option>
					<option value="Vermietung/Verkauf">Vermietung/Verkauf</option>
					<option value="Modernisierung">Modernisierung</option>
					<option value="Neubau">Neubau</option>
					<option value="Erweiterung">Erweiterung</option>
					<option value="Aushangpflicht">Aushangpflicht</option>
					<option value="Sonstiges">Sonstiges z.B. Bank</option>
				</select>
			</div>

			<div class="auswahl">
				<div class="titel">Gebäudetyp</div>
				<select 
					class="selectfeld"
					bind:value={gebaeudetyp}>
				>
					<option selected disabled>bitte auswählen</option>
					<option value="Einfamilienhaus">Einfamilienhaus</option>
					<option value="Zweifamilienhaus">Zweifamilienhaus</option>
					<option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
					<option value="Gewerbegebäude">Gewerbegebäude</option>
					<option value="Mischgebäude">Mischgebäude</option>
				</select>
			</div>

			{#if isTwoBoxReason}
			<div class="auswahl">
				<div class="titel">Sanierungsstand</div>
				<select 
					class="selectfeld"	
					bind:value={sanierungsstatus}>
					
				>
					<option selected disabled>bitte auswählen</option>
					<option value="saniert">saniert</option>
					<option value="unsaniert">unsaniert</option>
				</select>
			</div>
			{/if}

		</div>

		{#if isTwoBoxReason}
		<div id="secondrow" class="secondrow">	
			<div class="auswahl">
				<div class="titel">Baujahr</div>
				<select
					id="baujahr"
					class="selectfeld"
					bind:value={baujahr} 
					
				>
					<option selected disabled>bitte auswählen</option>
					<option value="vor 1978">vor 1978</option>
					<option value="nach 1977">nach 1977</option>
				</select>
			</div>

				<div class="auswahl">
					<div class="titel">Heizungsalter</div>
					<select
						class="selectfeld"
						bind:value={heizungsAlter} 
					>
						<option selected disabled>bitte auswählen</option>
						<option value="< 3">jünger als 3 Jahre</option>
						<option value=">= 3">3 Jahre oder älter</option>
					</select>
				</div>

			<div class="auswahl">
				<div class="titel">Wohneinheiten</div>
				<select
					class="selectfeld"
					bind:value={einheiten} 
				>
					<option selected disabled>bitte auswählen</option>
					<option value="bis 4 Wohneinheiten"
						>bis 4 Wohneinheiten</option
					>
					<option value="mehr als 4 Wohneinheiten"
						>mehr als 4 Wohneinheiten</option
					>
				</select>
			</div>

			<div class="OEA_item4">
				<div class="titel">Leerstand</div>
				<select
					class="selectfeld ausnahmen"
					bind:value={leerStand} 
				>
					<option selected disabled>bitte auswählen</option>
					<option value="bis 30">bis 30%</option>
					<option value="mehr als 30">mehr als 30%</option>
				</select>
			</div>
		</div>
		{/if}

		<div id="thirdrow" class="thirdrow"
 		 class:grid-cols-1={oneBOX}
 		 class:md:grid-cols-6={threeBOX}
 		 class:md:grid-cols-4={!oneBOX && !threeBOX}
		 >


			{#if isTwoBoxReason && (gebaeudetyp != "Gewerbegebäude") && (ausnahme === false)}


				<WidgetCardTemplate
					name="Verbrauchsausweis Wohngebäude"
					price={PRICES.VerbrauchsausweisWohnen[Enums.AusweisTyp.Standard]}
					src="https://online-energieausweis.org/images/immowelt/wohngebaeude_immowelt.svg"
					alt="Wohnhaus Verbrauchsausweis"
					variant="einfach"
					empfehlung="nein"
					cta="jetzt&nbsp;online erstellen"
					services={[
						["3&nbsp;Jahresverbräuche der Heizung benötigt.", true],
						["Zulässig bei Vermietung oder Verkauf.", true],
						["Unzulässig bei unsanierten Gebäuden vor 1978.", false],
						["Ungenau durch individuelles Heizverhalten.", false],
						["Wird nicht immer bei den Banken akzeptiert.", false]
					]}
					href_buy="https://online-energieausweis.org/immowelt/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
					href_overview="https://online-energieausweis.org/immowelt/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/produkt-uebersicht/"
				></WidgetCardTemplate>
			
			{/if}

			{#if isTwoBoxReason && (gebaeudetyp != "Gewerbegebäude")}

				<WidgetCardTemplate
					name="Bedarfsausweis Wohngebäude"
					price={PRICES.BedarfsausweisWohnen[Enums.AusweisTyp.Standard]}
					src="https://online-energieausweis.org/images/immowelt/wohngebaeude_immowelt.svg"
					alt="Wohnhaus Bedarfsausweis"
					variant="fundiert"
					empfehlung="ja"
					cta="jetzt&nbsp;online erstellen"
					services={[
						["Erfassung der Gebäudegeometrie.", true],
						["Für Vermietung, Verkauf und Finanzierung.", true],
						["Zulässig auch für unsanierte Objekte.", true],
						["Kann als Grundlage für den ISFP dienen.", true],
						["Objektivere Berechnungsmethode nach DIN 18599.", true],
					]}
					href_buy="https://online-energieausweis.org/immowelt/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
					href_overview="https://online-energieausweis.org/immowelt/energieausweis-erstellen/bedarfsausweis-wohngebaeude/produkt-uebersicht"
				></WidgetCardTemplate>
	
			{/if}

			{#if isTwoBoxReason && isGewerbe && (leerStand != "mehr als 30")}

				<WidgetCardTemplate
					name="Verbrauchsausweis Gewerbegebäude"
					price={PRICES.VerbrauchsausweisGewerbe[Enums.AusweisTyp.Standard]}
					src="https://online-energieausweis.org/images/immowelt/gewerbegebaeude_immowelt.svg"
					alt="Gewerbe Verbrauchsausweis"
					variant="einfach"
					empfehlung="nein"
					cta="jetzt&nbsp;online erstellen"					
					services={[
						
						["3&nbsp;Jahresverbräuche von Heizung Gebäudestrom&nbsp;nötig.", true],
						["Zulässig bei Vermietung oder Verkauf.", true],
						["Für bauliche und energetische Maßnahmen ungeeignet.", false],
						["Wird nicht immer bei den Banken akzeptiert.", false],
                        ["Ungenau durch individuelles Heizverhalten", false],
					]}
					href_buy="https://online-energieausweis.org/immowelt/energieausweis-erstellen/verbrauchsausweis-gewerbe/"
					href_overview="https://online-energieausweis.org/immowelt/energieausweis-erstellen/verbrauchsausweis-gewerbe/produkt-uebersicht/"
				></WidgetCardTemplate>
	
			{/if}

			{#if isTwoBoxReason && isGewerbe}

				<WidgetCardTemplate
					name="Bedarfsausweis Gewerbegebäude"
					price={PRICES.BedarfsausweisGewerbe[Enums.AusweisTyp.Standard]}
					src="https://online-energieausweis.org/images/immowelt/gewerbegebaeude_immowelt.svg"
					alt="Gewerbe Bedarfsausweis"
					variant="fundiert"
					empfehlung="ja"
					cta="Angebot anfragen"
					services={[
						
						["Mehrzonenmodell nach DIN 18599.", true],
						["Zulässig bei Vermietung oder Verkauf.", true],
						["Grundlage für Sanierung-Varianten.", true],
						["Objektiveres, besser vergleichbares Ergebnis.", true],
                        ["Zulässig bei Leerstand oder fehlenden Verbräuchen", true],
					]}
					href_buy="https://online-energieausweis.org/immowelt/angebot-anfragen/bedarfsausweis-gewerbe-anfragen/"
					href_overview="https://online-energieausweis.org/immowelt/angebot-anfragen/bedarfsausweis-gewerbe-anfragen/produkt-uebersicht/"
				></WidgetCardTemplate>
			
			{/if}

			{#if (anlass != "bitte auswählen") && !isTwoBoxReason && (gebaeudetyp != "Gewerbegebäude")}

			<WidgetCardTemplate
				name="GEG-Nachweis Wohngebäude"
				price={PRICES.GEGNachweisWohnen[Enums.AusweisTyp.Standard]}
				src="https://online-energieausweis.org/images/immowelt/wohngebaeude_immowelt.svg"
				alt="GEG-Nachweis-Wohnen"
				variant="Bauvorlage"
				empfehlung="ja"
				cta="Angebot anfragen"
				services={[
					
					["Nachweis fürs Bauamt bei Neubau oder Modernisierung.", true],
					["Beinhaltet die Effizienz der Bauteile und Anlagentechnik.", true],
					["Erstellung des Energieausweises nach Abschluss inklusive.", true],
					["Berechnung und Bilanzierung nach aktueller DIN 18599.", true],
					["Zonierung und Erstellung eines 3D Gebäudemodells.", true],
				]}
				href_buy="https://online-energieausweis.org/immowelt/angebot-anfragen/geg-nachweis-wohnen-anfragen/"
				href_overview="https://online-energieausweis.org/immowelt/angebot-anfragen/geg-nachweis-wohnen-anfragen/produkt-uebersicht/" 

			></WidgetCardTemplate>
			
			{/if}

			{#if (anlass != "bitte auswählen") && !isTwoBoxReason && isGewerbe}

			<WidgetCardTemplate
				name="GEG-Nachweis Gewerbegebäude"
				price={PRICES.GEGNachweisGewerbe[Enums.AusweisTyp.Standard]}
				src="https://online-energieausweis.org/images/immowelt/gewerbegebaeude_immowelt.svg"
				alt="GEG-Nachweis-Gewerbe"
				variant="Bauvorlage"
				empfehlung="ja"
				cta="Angebot anfragen"
				services={[
					
					["Nachweis fürs Bauamt bei Neubau oder Modernisierung.", true],
					["Beinhaltet die Effizienz der Bauteile und Anlagentechnik.", true],
					["Erstellung des Energieausweises nach Abschluss inklusive.", true],
					["Berechnung und Bilanzierung nach aktueller DIN 18599.", true],
					["Mehrzonenmodell inkl. Erstellung eines 3D Gebäudemodells.", true],
				]}
				href_buy="https://online-energieausweis.org/immowelt/angebot-anfragen/geg-nachweis-gewerbe-anfragen/"
				href_overview="https://online-energieausweis.org/immowelt/angebot-anfragen/geg-nachweis-gewerbe-anfragen/produkt-uebersicht/"
			></WidgetCardTemplate>

			{/if}

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



<style lang="postcss">

#IBC_app {

	@font-face {
    font-family: "immo Sans";
    src: url('/fonts/Immo-Sans/immoSans-Regular.eot');
    src: url('/fonts/Immo-Sans/immoSans-Regular.eot?#iefix') format('embedded-opentype'),
         url('/fonts/Immo-Sans/immoSans-Regular.woff2') format('woff2'),
         url('/fonts/Immo-Sans/immoSans-Regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "immo Sans Bold";
    src: url('/fonts/Immo-Sans/immoSans-Bold.eot');
    src: url('/fonts/Immo-Sans/immoSans-Bold.eot?#iefix') format('embedded-opentype'), url('../../Fonts/Immo-Sans/immoSans-Bold.woff2') format('woff2'), url('../../Fonts/Immo-Sans/immoSans-Bold.woff') format('woff');
    font-style: normal;
    font-weight: 700;
}

	@font-face {
	font-family: 'Antique Olive Compact bold';
	font-weight: 700;
	font-style: normal;
	font-display:swap;
	src: url("/fonts/Antique Olive Std Compact.woff2") format('woff2');
  }

	@apply min-w-[320px] max-w-[1920px] p-[4px]
	sm:p-[10px];

	font-family: "immo Sans";
	select option{
		font-family: "immo Sans",sans-serif;}

.firstrow{@apply grid grid-cols-1 gap-x-4 gap-y-2
	sm:grid-cols-2 sm:gap-x-4 sm:gap-y-2;

.titel{@apply text-black font-bold bg-[#ffcc00] px-2 py-1 rounded-[0.25rem];}

.selectfeld{@apply w-full px-2 py-1 min-h-[38px] ring-1 ring-black/15}

}

.secondrow{@apply grid grid-cols-2 gap-x-4 gap-y-2 mt-4
	sm:grid-cols-4 sm:gap-x-4 sm:gap-y-2;

.titel{@apply text-black font-bold bg-[#cccccc] px-2 py-1 rounded-[0.25rem];}
    
.selectfeld{@apply w-full px-2 py-1 min-h-[38px] ring-1 ring-black/15}

}

#OEA_input{@apply grid}

.thirdrow{@apply grid grid-cols-1 gap-x-4 gap-y-2 col-start-1
	md:grid-cols-4 md:gap-x-4 md:gap-y-2;



}

}
	
</style>
