<script lang="ts">
import HelpLabel from "#components/labels/HelpLabel.svelte";
import Inputlabel from "#components/labels/InputLabel.svelte";
export let ausweis;

const arrayRange = (start: number, stop: number, step: number) =>
		Array.from(
			{ length: (stop - start) / step + 1 },
			(value, index) => start + index * step
		);
</script>


<div
id="superBereich2"
class="grid w-full items-start
grid-cols-1 gap-x-4 gap-y-4
sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
">

<div class="bereich-box col-span-2">
    <div class="w-full grid grid-cols-2 sm:grid-cols-4 gap-4 justify-between justify-items-center items-center">
        <div class="ring-1 ring-black/15 bg-white rounded-md"><img src="/images/form-r.svg" alt="rechteck"/></div>
        <div class="ring-1 ring-black/15 bg-white rounded-md"><img src="/images/form-l.svg" alt="l-form" /></div>
        <div class="ring-1 ring-black/15 bg-white rounded-md"><img src="/images/form-t.svg" alt="t-form" /></div>
        <div class="ring-1 ring-black/15 bg-white rounded-md"><img src="/images/form-u.svg" alt="u-form" /></div>
    </div>
</div>

<div class="col-span-2 xl:col-span-1">

<div
	id="Berechnungshilfe2"
	class="bereich-box grid w-full
grid-cols-2 gap-x-4 gap-y-8
sm:grid-cols-3 sm:gap-x-6 sm:gap-y-8
xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
"
>

<div class="input-standard col-span-2 sm:col-span-3">
    <h4 class="m-0 font-bold p-1 pt-2 min-h-[38px] ring-1 bg-white ring-black/15 rounded-sm;">Berechnungshilfe - Eingabe der Grundfläche, Gechossanzahl und -höhe</h4>
    <div class="help-label">
        <HelpLabel>Hier wählen Sie Ihren passenden Grundriss aus, und tragen die entsprechenden Maße unten ein. 
            Bitte berücksichtigen Sie nur den Grundriss der zum beheizten Gebäude gehört. 
            Garagen oder Schuppen die an das Haus herangebaut sind aber keine Verbindung zum Wohnhaus haben bitte weglassen.</HelpLabel>
    </div>
</div>

<div class="input-standard order-1 md:order-1 xl:order-1">
    <Inputlabel title="A"></Inputlabel>

    <input
    name="masse_a"
    type="number"
    bind:value={ausweis.masse_a}
/>

<div class="help-label">
    <HelpLabel></HelpLabel>
</div>
</div>

<div class="input-standard order-2 md:order-2 xl:order-2">
    <Inputlabel title="B"></Inputlabel>

    <input
                    name="masse_b"
                    type="number"
                    bind:value={ausweis.masse_b}
                />

<div class="help-label">
    <HelpLabel></HelpLabel>
</div>
</div>

<div class="input-standard order-3 md:order-3 xl:order-3">
    <Inputlabel title="C"></Inputlabel>

    <input
                    name="masse_c"
                    type="number"
                    bind:value={ausweis.masse_c}
                />

<div class="help-label">
    <HelpLabel></HelpLabel>
</div>
</div>

<div class="input-standard order-4 md:order-4 xl:order-4">
    <Inputlabel title="D"></Inputlabel>

    <input
                    name="masse_d"
                    type="number"
                    bind:value={ausweis.masse_d}
                />

<div class="help-label">
    <HelpLabel></HelpLabel>
</div>

</div>

<div class="input-standard order-5 md:order-5 xl:order-5">
    <Inputlabel title="E"></Inputlabel>

    <input
                    name="masse_e"
                    type="number"
                    bind:value={ausweis.masse_e}
                />

<div class="help-label">
    <HelpLabel></HelpLabel>
</div>

</div>


<div class="input-standard order-6 md:order-6 xl:order-6">
    <Inputlabel title="F"></Inputlabel>

    <input
                    name="masse_f"
                    type="number"
                    bind:value={ausweis.masse_f}
                />

<div class="help-label">
    <HelpLabel></HelpLabel>
</div>

</div>

</div>

<div
	id="Berechnungshilfe1"
	class="bereich-box grid w-full mt-6
grid-cols-1 gap-x-4 gap-y-8
sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
"
>

<div class="input-standard order-1 md:order-1 xl:order-1">
    <Inputlabel title="Anzahl Vollgeschosse *"></Inputlabel>

    <input
                    name="anzahl_vollgeschosse"
                    bind:value={ausweis.anzahl_vollgeschosse}
                    type="number"
                    required
                />

<div class="help-label">
    <HelpLabel>Bitte geben Sie hier die Anzahl der Vollgeschosse
        an. Keller und Dachgeschoss mit Schrägen zählen
        nicht dazu.</HelpLabel>
</div>
</div>

<div class="input-standard order-2 md:order-2 xl:order-2">
    <Inputlabel title="Geschosshöhe *"></Inputlabel>

    <select
                    name="geschosshoehe"
                    bind:value={ausweis.geschosshoehe}
                    required
                >
                    <option>Bitte auswählen</option>
                    {#each arrayRange(2.1, 4.5, 0.1) as step}
                        <option value={step}>{step.toFixed(2)} m</option
                        >
                    {/each}
                </select>

<div class="help-label">
    <HelpLabel>Bitte geben Sie hier die Geschosshöhe (lichte
        Raumhöhe + Deckenstärke) des Gebäudes ein. Bei
        unterschiedlichen Geschosshöhen bilden Sie einen
        Mittelwert.</HelpLabel>
</div>
</div>

<div class="input-standard order-3 md:order-3 xl:order-3">
    <Inputlabel title="Gaubenanzahl"></Inputlabel>

    <input
    name="anzahl_gauben"
    bind:value={ausweis.anzahl_gauben}
    type="number"
/>

<div class="help-label">
    <HelpLabel>Wenn Ihr Gebäude Dachgauben besitzt geben Sie hier
        die Anzahl ein.</HelpLabel>
</div>
</div>

<div class="input-standard order-4 md:order-4 xl:order-4">
    <Inputlabel title="Breite aller Gauben in m"></Inputlabel>

    <select
                    name="breite_gauben"
                    bind:value={ausweis.breite_gauben}
                >
                    <option>Bitte auswählen</option>
                    {#each arrayRange(0.5, 10, 0.1) as step}
                        <option value={step}>{step.toFixed(2)} m</option
                        >
                    {/each}
                </select>

<div class="help-label">
    <HelpLabel>Bitte geben Sie hier die Gesamtbreite aller Gauben
        in m ein.</HelpLabel>
</div>


</div>
</div>

</div>

<div class="bereich-box col-span-2 xl:col-span-1">
<div
	id="Berechnungstabelle"
	class="grid w-full 
grid-cols-2 gap-x-4 gap-y-8
sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8 xl:col-span-1 
"
>
<div class="input-standard col-span-2">
   <h4 class="m-0 font-bold p-1 pt-2 min-h-[38px] ring-1 bg-white ring-black/15 rounded-sm ">Außenflächen, U-Werte und Volumen</h4>
   <div class="help-label">
    <HelpLabel>Die wärmeübertragende Umfassungsflächen sind die Hüllflächen des beheizten Gebäudes die an die Außenluft bzw. an unbeheizte Vorbauten grenzen. 
        Wenn Ihnen die Außenwand-,Dach-,Decken- und Bodenflächen vorliegen können Sie die Eingabe direkt vornehmen. 
        Hier können Sie auch das von den Umfassungsflächen eingeschlossene Volumen des Gebäudes eingeben. 
        Die ermittelten Werte der Berechnungshilfe können hier präzisiert werden.</HelpLabel>
</div>
</div>

<div class="input-standard col-span-2">
    <Inputlabel title="Tabellenwerte"></Inputlabel>

 <div class="input-checkboxen">
        <div
            class="grid grid-cols-[25px_max-content] items-center justify-items-start"
        >
     
        <input
            id="tabellenwerte_aendern"
            type="checkbox"
            bind:checked={ausweis.tabellenwerte_aendern}
            name="tabellenwerte_aendern"
        />
            <label for="tabellenwerte_aendern">Tabellenwerte manuell ändern</label>
        </div>

    </div>

    <div class="help-label">
        <HelpLabel></HelpLabel>
    </div>
</div>

<div class="input-standard order-1 md:order-1 xl:order-1">
    <Inputlabel title="Dachfläche in m²"></Inputlabel>

    <input
    name="dachflaeche"
    bind:value={ausweis.dachflaeche}
    readonly={!ausweis.tabellenwerte_aendern}
    type="number"
/>

    <div class="help-label">
        <HelpLabel></HelpLabel>
    </div>
</div>

<div class="input-standard order-2 md:order-2 xl:order-2">
    <Inputlabel title="U-Wert in W/m²K"></Inputlabel>

    <input
                    name="dach_u_wert"
                    bind:value={ausweis.dach_u_wert}
                    readonly={!ausweis.tabellenwerte_aendern}
                    type="number"
                />

    <div class="help-label">
        <HelpLabel></HelpLabel>
    </div>
</div>

<div class="input-standard order-3 md:order-3 xl:order-3">
    <Inputlabel title="Geschoßdecke&nbsp;in&nbsp;m²"></Inputlabel>

    <input
                    name="deckenflaeche"
                    bind:value={ausweis.deckenflaeche}
                    readonly={!ausweis.tabellenwerte_aendern}
                    type="number"
                />

    <div class="help-label">
        <HelpLabel></HelpLabel>
    </div>
</div>

<div class="input-standard order-4 md:order-4 xl:order-4">
    <Inputlabel title="U-Wert in W/m²K"></Inputlabel>

    <input
    name="decke_u_wert"
    bind:value={ausweis.decke_u_wert}
    readonly={!ausweis.tabellenwerte_aendern}
    type="number"
/>

    <div class="help-label">
        <HelpLabel></HelpLabel>
    </div>
</div>

<div class="input-standard order-5 md:order-5 xl:order-5">
    <Inputlabel title="Außenwand in m²"></Inputlabel>

    <input
                    name="aussenwand_flaeche"
                    bind:value={ausweis.aussenwand_flaeche}
                    readonly={!ausweis.tabellenwerte_aendern}
                    type="number"
                />

    <div class="help-label">
        <HelpLabel></HelpLabel>
    </div>
</div>

<div class="input-standard order-6 md:order-6 xl:order-6">
    <Inputlabel title="U-Wert in W/m²K"></Inputlabel>

    <input
    name="aussenwand_u_wert"
    bind:value={ausweis.aussenwand_u_wert}
    readonly={!ausweis.tabellenwerte_aendern}
    type="number"
/>

    <div class="help-label">
        <HelpLabel></HelpLabel>
    </div>
</div>  

<div class="input-standard order-7 md:order-7 xl:order-7">
    <Inputlabel title="Fußboden in m²"></Inputlabel>

    <input
                    name="fussboden_flaeche"
                    bind:value={ausweis.fussboden_flaeche}
                    readonly={!ausweis.tabellenwerte_aendern}
                    type="number"
                />

    <div class="help-label">
        <HelpLabel></HelpLabel>
    </div>
</div>

<div class="input-standard order-8 md:order-8 xl:order-8">
    <Inputlabel title="U-Wert in W/m²K"></Inputlabel>

    <input
    name="fussboden_u_wert"
    bind:value={ausweis.fussboden_u_wert}
    readonly={!ausweis.tabellenwerte_aendern}
    type="number"
/>

    <div class="help-label">
        <HelpLabel></HelpLabel>
    </div>
</div>  

<div class="input-standard order-9 md:order-9 xl:order-9 col-span-2">
    <Inputlabel title="eingeschlossenes Gebäudevolumen in m³"></Inputlabel>

    <input
                name="volumen"
                type="number"
                bind:value={ausweis.volumen}
                readonly={!ausweis.tabellenwerte_aendern}
            />

    <div class="help-label">
        <HelpLabel></HelpLabel>
    </div>
</div>  

<div class="input-standard order-10 md:order-10 xl:order-10 col-span-2">
    <Inputlabel title="Blower-Door-Test erfolgreich durchgeführt:"></Inputlabel>


<div class="grid grid-cols-[max-content_max-content] bg-white gap-x-12 p-1 min-h-[38px] ring-1 ring-black/15 rounded-sm">
    
<div class="grid grid-cols-[25px_1fr] items-center justify-items-start">
    <input
    id="bow-yes"
    type="radio"
    value={true}
    bind:group={ausweis.dicht}
    name="dichtheit"
/>
    <label for="bow-yes" class="radio-inline">Ja</label>
   

    </div>

<div class="grid grid-cols-[25px_1fr] items-center justify-items-start">
    <input
    id="bow-no"
    type="radio"
    value={false}
    bind:group={ausweis.dicht}
    name="dichtheit"
    />
<label for="bow-no" class="radio-inline">Nein</label>
 
</div>

</div>

    <div class="help-label">
        <HelpLabel></HelpLabel>
    </div>
</div> 

</div>
</div>

</div>



<!--<div class="grid grid-cols-[3fr_2fr] gap-4">
    <div class="GRB3 gap-4">
        <HelpLabel
            title="Berechnungshilfe - Eingabe der Grundfläche, Gechossanzahl und -höhe"
            >Hier wählen Sie Ihren passenden Grundriss aus, und tragen
            die entsprechenden Maße unten ein. Bitte berücksichtigen Sie
            nur den Grundriss der zum beheizten Gebäude gehört. Garagen
            oder Schuppen die an das Haus herangebaut sind aber keine
            Verbindung zum Wohnhaus haben bitte weglassen.</HelpLabel
        >

       

        <div class="grid grid-cols-4 gap-4">
            <img src="/images/r.png" alt="rechteck" />
            <img src="/images/l.png" alt="l-form" />
            <img src="/images/t.png" alt="t-form" />
            <img src="/images/u.png" alt="u-form" />
        </div>

        <div class="grid grid-cols-6 gap-4">
            <div>
                <HelpLabel title="A"
                    >Bitte Eingabe in m. Punkt statt Komma verwenden
                    z.B.: 10.40 (Eingabebeispiel)</HelpLabel
                >
                <input
                    name="masse_a"
                    type="number"
                    bind:value={ausweis.masse_a}
                />
            </div>
            <div>
                <Label>B</Label>
                <input
                    name="masse_b"
                    type="number"
                    bind:value={ausweis.masse_b}
                />
            </div>
            <div>
                <Label>C</Label>
                <input
                    name="masse_c"
                    type="number"
                    bind:value={ausweis.masse_c}
                />
            </div>
            <div>
                <Label>D</Label>
                <input
                    name="masse_d"
                    type="number"
                    bind:value={ausweis.masse_d}
                />
            </div>
            <div>
                <Label>E</Label>
                <input
                    name="masse_e"
                    type="number"
                    bind:value={ausweis.masse_e}
                />
            </div>
            <div>
                <Label>F</Label>
                <input
                    name="masse_f"
                    type="number"
                    bind:value={ausweis.masse_f}
                />
            </div>
        </div>

        <div class="grid grid-cols-3 gap-4">
            <div>
                <Label>Fensterfläche Südost bis Südwest in m²</Label>
                <input
                    name="fensterflaeche_so_sw"
                    bind:value={ausweis.fensterflaeche_so_sw}
                    type="number"
                />
            </div>
            <div>
                <Label>Fensterfläche Nordwest bis Nordost in m²</Label>
                <input
                    name="fensterflaeche_nw_no"
                    bind:value={ausweis.fensterflaeche_nw_no}
                    type="number"
                />
            </div>
            <div>
                <Label>Außenwandfläche an unbeheizten Vorbau</Label>
                <input
                    name="aussenwandflaeche_unbeheizt"
                    bind:value={ausweis.aussenwandflaeche_unbeheizt}
                    type="number"
                />
            </div>
        </div>
    </div>
    <div class="GRB3">
        <HelpLabel title="Außenflächen, U-Werte und Volumen"
            >Die wärmeübertragende Umfassungsflächen sind die
            Hüllflächen des beheizten Gebäudes die an die Außenluft bzw.
            an unbeheizte Vorbauten grenzen. Wenn Ihnen die
            Außenwand-,Dach-,Decken- und Bodenflächen vorliegen können
            Sie die Eingabe direkt vornehmen. Hier können Sie auch das
            von den Umfassungsflächen eingeschlossene Volumen des
            Gebäudes eingeben. Die ermittelten Werte der
            Berechnungshilfe können hier präzisiert werden.</HelpLabel
        >
        <div class="flex flex-row items-center gap-4">
            <Label>Tabellenwerte manuell ändern</Label>
            <input
                type="checkbox"
                bind:checked={ausweis.tabellenwerte_aendern}
                name="tabellenwerte_aendern"
            />
        </div>

        <div class="grid grid-cols-2 gap-4">
            <div>
                <Label>Dachfläche in m²</Label>
                <input
                    name="dachflaeche"
                    bind:value={ausweis.dachflaeche}
                    readonly={!ausweis.tabellenwerte_aendern}
                    type="number"
                />
            </div>
            <div>
                <Label>U-Wert in W/m²K</Label>
                <input
                    name="dach_u_wert"
                    bind:value={ausweis.dach_u_wert}
                    readonly={!ausweis.tabellenwerte_aendern}
                    type="number"
                />
            </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
            <div>
                <Label>Geschoßdecke in m²</Label>
                <input
                    name="deckenflaeche"
                    bind:value={ausweis.deckenflaeche}
                    readonly={!ausweis.tabellenwerte_aendern}
                    type="number"
                />
            </div>
            <div>
                <Label>U-Wert in W/m²K</Label>
                <input
                    name="decke_u_wert"
                    bind:value={ausweis.decke_u_wert}
                    readonly={!ausweis.tabellenwerte_aendern}
                    type="number"
                />
            </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
            <div>
                <Label>Außenwand in m²</Label>
                <input
                    name="aussenwand_flaeche"
                    bind:value={ausweis.aussenwand_flaeche}
                    readonly={!ausweis.tabellenwerte_aendern}
                    type="number"
                />
            </div>
            <div>
                <Label>U-Wert in W/m²K</Label>
                <input
                    name="aussenwand_u_wert"
                    bind:value={ausweis.aussenwand_u_wert}
                    readonly={!ausweis.tabellenwerte_aendern}
                    type="number"
                />
            </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
            <div>
                <Label>Fußboden in m²</Label>
                <input
                    name="fussboden_flaeche"
                    bind:value={ausweis.fussboden_flaeche}
                    readonly={!ausweis.tabellenwerte_aendern}
                    type="number"
                />
            </div>
            <div>
                <Label>U-Wert in W/m²K</Label>
                <input
                    name="fussboden_u_wert"
                    bind:value={ausweis.fussboden_u_wert}
                    readonly={!ausweis.tabellenwerte_aendern}
                    type="number"
                />
            </div>
        </div>

        <div>
            <Label
                >Das von den Flächen eingeschlossene Gebäudevolumen in
                m³</Label
            >
            <input
                name="volumen"
                type="number"
                bind:value={ausweis.volumen}
                readonly={!ausweis.tabellenwerte_aendern}
            />
        </div>

        <div>
            <Label>Blower-Door-Test erfolgreich durchgeführt</Label>
            <div class="flex flex-row gap-4">
                <label class="radio-inline"
                    ><input
                        type="radio"
                        value={true}
                        bind:group={ausweis.dicht}
                        name="dichtheit"
                    />Ja</label
                >
                <label class="radio-inline"
                    ><input
                        type="radio"
                        value={false}
                        bind:group={ausweis.dicht}
                        name="dichtheit"
                    />Nein</label
                >
            </div>
        </div>
    </div>
</div>

-->