<script lang="ts">
	import HelpLabel from "#components/labels/HelpLabel.svelte";
	import Inputlabel from "#components/labels/InputLabel.svelte";
	import ZipSearch from "#components/PlzSuche.svelte";
	import { BenutzerClient, RechnungClient } from "./types.js";

	export let rechnung: Partial<RechnungClient>;

	$: {
		if (!rechnung.abweichende_versand_adresse) {
			rechnung.versand_empfaenger = rechnung.empfaenger
			rechnung.versand_ort = rechnung.ort
			rechnung.versand_plz = rechnung.plz
			rechnung.versand_strasse = rechnung.strasse
			rechnung.versand_zusatzzeile = rechnung.zusatzzeile
		}
	}
</script>

<div
	id="rechnungsadresse"
	class="bereich-box grid
grid-cols-1 gap-x-4 gap-y-8
sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
"
>
	<!-- Empfänger * -->

	<div class="input-standard order-1 md:order-1 xl:order-1">
		<Inputlabel title="Rechnungs-Empfänger *"></Inputlabel>

		<input
			name="rechnung_empfaenger"
			type="text"
			bind:value={rechnung.empfaenger}
			required
			data-rule-maxlength="100"
			data-msg-maxlength="max. 100 Zeichen"
		/>

		<div class="help-label">
			<HelpLabel>
				Bitte geben Sie den Empfänger ein, auf den die Rechnung
				ausgestellt wird.
			</HelpLabel>
		</div>
	</div>

	<!-- Straße, Hausnummer * -->

	<div class="input-standard order21 md:order-2 xl:order-2">
		<Inputlabel title="Straße, Hausnummer *"></Inputlabel>

		<input
			name="rechnung_strasse"
			bind:value={rechnung.strasse}
			type="text"
			required
			data-rule-maxlength="40"
			data-msg-maxlength="max. 40 Zeichen"
		/>

		<div class="help-label">
			<HelpLabel>
				Bitte geben Sie die Strasse und Hausnummer, so wie Sie auf der
				Rechnung erscheinen soll, ein.
			</HelpLabel>
		</div>
	</div>

	<!-- PLZ / ORT -->

	<div class="grid grid-cols-[2fr_4fr] gap-x-4 order-3 md:order-3 xl:order-3">
		<div class="input-noHelp">
			<Inputlabel title="PLZ *"></Inputlabel>
			<ZipSearch
				name="rechnung_plz"
				bind:zip={rechnung.plz}
				bind:city={rechnung.ort}
			/>
		</div>

		<div class="input-standard">
			<Inputlabel title="Ort *"></Inputlabel>

			<input
				name="rechnung_ort"
				type="text"
				required
				value={rechnung.ort}
			/>

			<div class="help-label">
				<HelpLabel>
					Bitte geben Sie die PLZ des Ortes, so wie Sie auf der
					Rechnung erscheinen soll, ein.
				</HelpLabel>
			</div>
		</div>
	</div>

	<!-- Zusatzzeile -->

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

		<input
			name="rechnung_zusatzzeile"
			bind:value={rechnung.zusatzzeile}
			type="text"
			data-rule-maxlength="80"
			data-msg-maxlength="max. 80 Zeichen"
		/>

		<div class="help-label">
			<HelpLabel>
				Bitte geben Sie, falls erforderlich, zusätzliche nformationen
				ein.
			</HelpLabel>
		</div>
	</div>

	<!-- E-mail -->

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

		<input name="rechnung_email" bind:value={rechnung.email} type="email" />

		<div class="help-label">
			<HelpLabel>
				Bitte geben Sie die E-Mail Adresse des Rechnungsempfängers ein.
			</HelpLabel>
		</div>
	</div>

	<!-- Telefon 

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

    <input
    name="rechnung_telefon"
    bind:value={rechnung.telefon}
    type="text"
/>

		<div class="help-label">
				<HelpLabel>
					Bitte geben Sie die Telefonnummer des Rechnungsempfängers ein.
				</HelpLabel>
			</div>
</div>
-->

	<div class="col-span-3 order-7 md:order-7 xl:order-7">
		<div
			class="grid grid-cols-[25px_max-content] items-center justify-items-start"
		>
			<input
				id="abweichende_versand_adresse"
				class="w-[15px] h-[15px]"
				type="checkbox"
				name="abweichende_versand_adresse"
				bind:checked={rechnung.abweichende_versand_adresse}
			/>

			<label for="abweichende_versand_adresse" class="cursor-pointer"
				>abweichende Versandadresse</label
			>
		</div>
	</div>

	{#if rechnung.abweichende_versand_adresse}
		<!-- Versand Empfänger * -->

		<div class="input-standard order-8 md:order-8 xl:order-8">
			<Inputlabel title="Versand-Empfänger *"></Inputlabel>

			<input
				name="versand_empfaenger"
				type="text"
				readonly={!rechnung.abweichende_versand_adresse}
				bind:value={rechnung.versand_empfaenger}
				required
				data-rule-maxlength="100"
				data-msg-maxlength="max. 100 Zeichen"
			/>

			<div class="help-label">
				<HelpLabel>
					Bitte geben Sie den Namen des Versand-Empfängers ein.
				</HelpLabel>
			</div>
		</div>

		<!-- Versand Straße, Hausnummer * -->

		<div class="input-standard order-9 md:order-9 xl:order-9">
			<Inputlabel title="Straße, Hausnummer *"></Inputlabel>

			<input
				name="versand_strasse"
				type="text"
				readonly={!rechnung.abweichende_versand_adresse}
				bind:value={rechnung.versand_strasse}
				required
				data-rule-maxlength="40"
				data-msg-maxlength="max. 40 Zeichen"
			/>

			<div class="help-label">
				<HelpLabel>
					Bitte geben Sie die Versand-Empfänger Strasse und Hausnummer
					ein, an die die Rechnung versandt wird.
				</HelpLabel>
			</div>
		</div>

		<!-- PLZ / ORT -->

		<div
			class="grid grid-cols-[2fr_4fr] gap-x-4 order-10 md:order-10 xl:order-10"
		>
			<div class="input-noHelp">
				<Inputlabel title="PLZ *"></Inputlabel>
				<ZipSearch
					name="versand_plz"
					readonly={!rechnung.abweichende_versand_adresse}
					bind:zip={rechnung.versand_plz}
					bind:city={rechnung.versand_ort}
				/>
			</div>

			<div class="input-standard">
				<Inputlabel title="Ort *"></Inputlabel>

				<input
					name="versand_ort"
					type="text"
					readonly
					required
					bind:value={rechnung.versand_ort}
				/>

				<div class="help-label">
					<HelpLabel>
						Bitte geben Sie die Versand-Empfänger PLZ des Ortes ein,
						an den die Rechnung versandt wird.
					</HelpLabel>
				</div>
			</div>
		</div>

		<!-- Zusatzzeile -->

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

			<input
				name="versand_zusatzzeile"
				type="text"
				readonly={!rechnung.abweichende_versand_adresse}
				bind:value={rechnung.versand_zusatzzeile}
				data-rule-maxlength="80"
				data-msg-maxlength="max. 80 Zeichen"
			/>

			<div class="help-label">
				<HelpLabel>
					Bitte geben Sie, falls erforderlich, zusätzliche
					nformationen ein.
				</HelpLabel>
			</div>
		</div>

		<!-- E-mail -->

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

			<input
				name="rechnung_email"
				bind:value={rechnung.email}
				type="email"
			/>

			<div class="help-label">
				<HelpLabel>
					Bitte geben Sie die E-Mail Adresse des Versand-Empfängers
					ein.
				</HelpLabel>
			</div>
		</div>

		<!-- Telefon 

<div class="input-standard order-[13] md:order-[13] xl:order-[13]">
	<Inputlabel title="Telefon *"></Inputlabel>

    <input
    name="rechnung_telefon"
    bind:value={rechnung.telefon}
    type="text"
/>

		<div class="help-label">
				<HelpLabel>
					Bitte geben Sie die Telefonnummer des Versand-Empfängers ein.
				</HelpLabel>
			</div>
</div>
-->
	{/if}
</div>
