<script lang="ts">
	import { fade } from "svelte/transition";
	import WidgetCardTemplate from "#components/design/content/WidgetCardTemplate.svelte";
	import { PRICES } from "#lib/constants.js";
	
	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"];


	let ausnahme: boolean = false;
	let oneBOX: boolean = false;
	let threeBOX: boolean = false;	

function getBoxes(){
if(twoBoxReason.includes(anlass)){

document.getElementById('firstrow')?.classList.remove('sm:grid-cols-2');
document.getElementById('firstrow')?.classList.add('sm:grid-cols-3');
}else{
document.getElementById('firstrow')?.classList.remove('sm:grid-cols-3');
document.getElementById('firstrow')?.classList.add('sm:grid-cols-2');
}
}

function getCount(){
if(oneBOX===true){
	console.log('ONE');
	document.getElementById('thirdrow')?.classList.remove('md:grid-cols-6');
	document.getElementById('thirdrow')?.classList.remove('md:grid-cols-4');
	document.getElementById('thirdrow')?.classList.add('grid-cols-1');
}else if(threeBOX===true){
	console.log('THREE');
	document.getElementById('thirdrow')?.classList.remove('grid-cols-1');
	document.getElementById('thirdrow')?.classList.remove('md:grid-cols-4');

	document.getElementById('thirdrow')?.classList.add('md:grid-cols-6');

}

else{
	console.log('FOUR');
	document.getElementById('thirdrow')?.classList.remove('grid-cols-1');
	document.getElementById('thirdrow')?.classList.remove('md:grid-cols-6');
	document.getElementById('thirdrow')?.classList.add('md:grid-cols-4');
}

}


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

oneBOX 		=  	((ausnahme === true) && (gebaeudetyp != "Gewerbegebäude")) && (gebaeudetyp != "Mischgebäude") || 
				((!twoBoxReason.includes(anlass)) && (gebaeudetyp != "Mischgebäude")) || 
				((gebaeudetyp === "Gewerbegebäude") && (leerStand === "mehr als 30"))
            ? true 
            : false;

threeBOX 	=  ((ausnahme === true) && (gebaeudetyp === "Mischgebäude") && (twoBoxReason.includes(anlass) && (leerStand != "mehr als 30")))
            ? true 
            : false;
			
}




</script>



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

	<div id="OEA_input">


		<div id="firstrow" class="firstrow">

			<div class="auswahl">
				<div class="titel">Anlass</div>
				<select
                    id="anlass"
					class="selectfeld"
					bind:value={anlass} on:change={getBoxes} on:change={getCount}
				>
					<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} on:change={getBoxes} on:change={getCount}
				>
					<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 twoBoxReason.includes(anlass)}
			<div class="auswahl">
				<div class="titel">Sanierungsstand</div>
				<select 
					class="selectfeld"	
					bind:value={sanierungsstatus} on:change={getBoxes} on:change={getCount}
					
				>
					<option selected disabled>bitte auswählen</option>
					<option value="saniert">saniert</option>
					<option value="unsaniert">unsaniert</option>
				</select>
			</div>
			{/if}

		</div>

		{#if twoBoxReason.includes(anlass)}
		<div id="secondrow" class="secondrow">	
			<div class="auswahl">
				<div class="titel">Baujahr</div>
				<select
					id="baujahr"
					class="selectfeld"
					bind:value={baujahr} on:change={getCount}
					
				>
					<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} on:change={getCount}
					>
						<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} on:change={getCount}
				>
					<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} on:change={getCount}
				>
					<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">
			{#if twoBoxReason.includes(anlass) && (gebaeudetyp != "Gewerbegebäude") && (ausnahme === false)}

				<div
					class="produktbox"
					transition:fade={{ duration: 0 }}
				>
				<WidgetCardTemplate
					name="Verbrauchsausweis Wohngebäude"
					price={PRICES.VerbrauchsausweisWohnen[0]}
					src="/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="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
					href_overview="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/produkt-uebersicht/"
				></WidgetCardTemplate>
				</div>
			{/if}

			{#if twoBoxReason.includes(anlass) && (gebaeudetyp != "Gewerbegebäude")}
				<div
					class="produktbox"
					transition:fade={{ duration: 0 }}
				>
				<WidgetCardTemplate
					name="Bedarfsausweis Wohngebäude"
					price={PRICES.BedarfsausweisWohnen[0]}
					src="/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="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
					href_overview="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/produkt-uebersicht/"
				></WidgetCardTemplate>
				</div>
			{/if}

			{#if twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp) && (leerStand != "mehr als 30")}
				<div
					class="produktbox"
					transition:fade={{ duration: 0 }}
				>
				<WidgetCardTemplate
					name="Verbrauchsausweis Gewerbegebäude"
					price={PRICES.VerbrauchsausweisGewerbe[0]}
					src="/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="/energieausweis-erstellen/verbrauchsausweis-gewerbe/"
					href_overview="/energieausweis-erstellen/verbrauchsausweis-gewerbe/produkt-uebersicht/"
				></WidgetCardTemplate>
				
				</div>
			{/if}

			{#if twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp)}
				<div
					class="produktbox"
					transition:fade={{ duration: 0 }}
				>
				<WidgetCardTemplate
					name="Bedarfsausweis Gewerbegebäude"
					price={PRICES.BedarfsausweisGewerbe[0]}
					src="/images/immowelt/gewerbegebaeude_immowelt.svg"
					alt="Gewerbe Bedarfsausweis"
					variant="fundiert"
					empfehlung="ja"
					cta="jetzt&nbsp;online erstellen"
					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="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
					href_overview="/energieausweis-erstellen/bedarfsausweis-gewerbe/produkt-uebersicht/"
				></WidgetCardTemplate>
				</div>
			{/if}

			{#if (anlass != "bitte auswählen") && !twoBoxReason.includes(anlass) && (gebaeudetyp != "Gewerbegebäude")}
			<div
				class="produktbox"
				transition:fade={{ duration: 0 }}
			>
			<WidgetCardTemplate
				name="GEG-Nachweis Wohngebäude"
				price=500
				src="/images/immowelt/wohngebaeude_immowelt.svg"
				alt="Gewerbe Bedarfsausweis"
				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="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
				href_overview="/energieausweis-erstellen/bedarfsausweis-gewerbe/produkt-uebersicht/" 

			></WidgetCardTemplate>
			
			</div>
			{/if}

			{#if (anlass != "bitte auswählen") && !twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp)}
			<div
				class="produktbox"
				transition:fade={{ duration: 0 }}
			>
			<WidgetCardTemplate
				name="GEG-Nachweis Gewerbegebäude"
				price=800
				src="/images/immowelt/gewerbegebaeude_immowelt.svg"
				alt="Gewerbe Bedarfsausweis"
				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="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
				href_overview="/energieausweis-erstellen/bedarfsausweis-gewerbe/produkt-uebersicht/"
			></WidgetCardTemplate>
			
			</div>
			{/if}

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

<style lang="postcss">

  @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');
  }

  @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-family: "immo Sans";}

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

.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;

.produktbox{@apply grid grid-cols-subgrid col-span-2 grid-rows-subgrid row-span-3 md:row-span-12 bg-black/5 rounded-lg
	px-2 py-2 mt-5;
	box-shadow:2px 2px 8px rgba(0,0,0,0.25)


}

}


}








			

			
	
			

		

			
		
	
</style>
