161 lines
8.8 KiB
PHP
161 lines
8.8 KiB
PHP
<div>
|
|
@if ($syncFromAlpineProject)
|
|
<div
|
|
x-effect="
|
|
if (typeof selectedProject !== 'undefined' && selectedProject) {
|
|
$wire.$set('projectSlug', selectedProject.slug || '')
|
|
$wire.$set('projectTitle', selectedProject.title || '')
|
|
}
|
|
"
|
|
class="hidden"
|
|
aria-hidden="true"></div>
|
|
@endif
|
|
|
|
@if ($success)
|
|
<div class="flex flex-col items-center text-center py-6 gap-4">
|
|
<div class="flex items-center justify-center w-16 h-16 rounded-full bg-green-100">
|
|
<svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="text-lg font-semibold text-foreground">{{ __('ui.immobilien_form.success_title') }}</p>
|
|
<p class="text-muted-foreground mt-1 text-sm">{{ __('ui.immobilien_form.success_message') }}</p>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<form wire:submit="submit" class="space-y-6">
|
|
|
|
{{-- Honeypot --}}
|
|
<div class="opacity-0 absolute top-0 left-0 h-0 w-0 -z-10 overflow-hidden" aria-hidden="true">
|
|
<label for="website_hp">Website</label>
|
|
<input type="text" id="website_hp" name="website" wire:model="website" tabindex="-1" autocomplete="off">
|
|
</div>
|
|
|
|
@if ($showInterest && !empty($interestOptions))
|
|
<div>
|
|
<label for="interest" class="block text-sm font-medium text-foreground mb-2">{{ __('ui.immobilien_form.interest') }}</label>
|
|
<div class="grid grid-cols-1">
|
|
<select
|
|
wire:model="interest"
|
|
id="interest"
|
|
class="col-start-1 row-start-1 w-full appearance-none rounded-lg border border-border bg-background px-4 py-3 text-foreground focus:border-secondary focus:ring-1 focus:ring-secondary sm:text-sm/6">
|
|
<option value="">{{ __('ui.immobilien_form.please_select') }}</option>
|
|
@foreach ($interestOptions as $value => $label)
|
|
<option value="{{ $value }}">{{ $label }}</option>
|
|
@endforeach
|
|
</select>
|
|
<svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"
|
|
class="pointer-events-none col-start-1 row-start-1 mr-3 size-4 self-center justify-self-end text-muted-foreground">
|
|
<path d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
@error('interest') <span class="text-red-500 text-xs mt-1 block">{{ $message }}</span> @enderror
|
|
</div>
|
|
@endif
|
|
|
|
<div class="grid sm:grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="firstName" class="block text-sm font-medium text-foreground mb-2">{{ __('ui.immobilien_form.first_name') }}</label>
|
|
<input
|
|
wire:model="firstName"
|
|
id="firstName"
|
|
type="text"
|
|
placeholder="{{ __('ui.immobilien_form.first_name_placeholder') }}"
|
|
class="w-full rounded-lg border border-border bg-background px-4 py-3 text-foreground focus:border-secondary focus:ring-1 focus:ring-secondary sm:text-sm"
|
|
/>
|
|
@error('firstName') <span class="text-red-500 text-xs mt-1 block">{{ $message }}</span> @enderror
|
|
</div>
|
|
<div>
|
|
<label for="lastName" class="block text-sm font-medium text-foreground mb-2">{{ __('ui.immobilien_form.last_name') }}</label>
|
|
<input
|
|
wire:model="lastName"
|
|
id="lastName"
|
|
type="text"
|
|
placeholder="{{ __('ui.immobilien_form.last_name_placeholder') }}"
|
|
class="w-full rounded-lg border border-border bg-background px-4 py-3 text-foreground focus:border-secondary focus:ring-1 focus:ring-secondary sm:text-sm"
|
|
/>
|
|
@error('lastName') <span class="text-red-500 text-xs mt-1 block">{{ $message }}</span> @enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid sm:grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="email" class="block text-sm font-medium text-foreground mb-2">{{ __('ui.immobilien_form.email') }}</label>
|
|
<input
|
|
wire:model="email"
|
|
id="email"
|
|
type="email"
|
|
placeholder="{{ __('ui.immobilien_form.email_placeholder') }}"
|
|
class="w-full rounded-lg border border-border bg-background px-4 py-3 text-foreground focus:border-secondary focus:ring-1 focus:ring-secondary sm:text-sm"
|
|
/>
|
|
@error('email') <span class="text-red-500 text-xs mt-1 block">{{ $message }}</span> @enderror
|
|
</div>
|
|
<div>
|
|
<label for="phone" class="block text-sm font-medium text-foreground mb-2">
|
|
{{ __('ui.immobilien_form.phone') }}
|
|
</label>
|
|
<input
|
|
wire:model="phone"
|
|
id="phone"
|
|
type="tel"
|
|
placeholder="+49 ..."
|
|
class="w-full rounded-lg border border-border bg-background px-4 py-3 text-foreground focus:border-secondary focus:ring-1 focus:ring-secondary sm:text-sm"
|
|
/>
|
|
@error('phone') <span class="text-red-500 text-xs mt-1 block">{{ $message }}</span> @enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="message" class="block text-sm font-medium text-foreground mb-2">
|
|
{{ __('ui.immobilien_form.message') }}
|
|
</label>
|
|
<textarea
|
|
wire:model="message"
|
|
id="message"
|
|
rows="3"
|
|
placeholder="{{ __('ui.immobilien_form.message_placeholder') }}"
|
|
class="w-full rounded-lg border border-border bg-background px-4 py-3 text-foreground focus:border-secondary focus:ring-1 focus:ring-secondary sm:text-sm resize-none"
|
|
></textarea>
|
|
@error('message') <span class="text-red-500 text-xs mt-1 block">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<div x-data="{ on: $wire.entangle('privacy') }">
|
|
<label class="flex items-start gap-3 cursor-pointer">
|
|
<input
|
|
x-model="on"
|
|
id="privacy_immo"
|
|
type="checkbox"
|
|
class="sr-only"
|
|
/>
|
|
<span
|
|
role="switch"
|
|
:aria-checked="on.toString()"
|
|
:class="on ? 'bg-green-500' : 'bg-muted'"
|
|
class="relative mt-0.5 w-11 h-6 shrink-0 rounded-full transition-colors duration-200"
|
|
>
|
|
<span
|
|
:class="on ? 'translate-x-5' : 'translate-x-0'"
|
|
class="absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white shadow-sm transition-transform duration-200 pointer-events-none"
|
|
></span>
|
|
</span>
|
|
<span class="text-sm text-muted-foreground">
|
|
{{ __('ui.immobilien_form.privacy_prefix') }}
|
|
<a href="{{ route('privacy') }}" target="_blank" class="text-secondary underline underline-offset-2 hover:no-underline">Datenschutzerklärung</a>
|
|
{{ __('ui.immobilien_form.privacy_suffix') }}
|
|
</span>
|
|
</label>
|
|
@error('privacy') <span class="text-red-500 text-xs mt-1 block">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
wire:loading.attr="disabled"
|
|
class="w-full btn-primary-accent"
|
|
>
|
|
<span wire:loading.remove>{{ $submitLabel ?: __('ui.immobilien_form.submit') }}</span>
|
|
<span wire:loading>{{ __('ui.immobilien_form.sending') }}</span>
|
|
</button>
|
|
</form>
|
|
@endif
|
|
</div>
|