Files
timebank-cc-public/resources/views/livewire/contact-form.blade.php
Ronald Huynen 2547717edb Initial commit
2026-03-23 21:37:59 +01:00

170 lines
8.6 KiB
PHP

<div class="bg-white shadow-sm rounded-lg overflow-hidden">
<div class="p-6 sm:p-8">
{{-- Success Message --}}
@if($showSuccessMessage)
<div class="mb-6 rounded-md bg-green-50 border border-green-200 p-4">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<div class="text-sm text-green-800">
<p class="font-medium">{{ __('Message sent') }}</p>
<p class="mt-1">{{ __('We received your message successfully and will get back to you shortly!') }}</p>
</div>
</div>
<div class="ml-auto pl-3">
<button
type="button"
wire:click="$set('showSuccessMessage', false)"
class="inline-flex rounded-md p-1.5 text-green-500 hover:bg-green-100 focus:outline-none transition">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
@endif
{{-- Contact Form --}}
<form wire:submit.prevent="submitForm">
<div class="grid grid-cols-6 gap-6">
<div class="col-span-6 sm:col-span-4 space-y-6">
{{-- Name Field (only shown when not authenticated) --}}
@guest
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">
{{ __('Name') }}
</label>
<x-input
wire:model="name"
type="text"
placeholder="{{ __('Your full name') }}"
class="w-full"
/>
</div>
{{-- Email Field (only shown when not authenticated) --}}
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">
{{ __('Email') }}
</label>
<x-input
wire:model="email"
type="email"
placeholder="{{ __('your.email@example.com') }}"
class="w-full"
/>
</div>
@endguest
{{-- Subject Field (optional, shown for certain contexts) --}}
@if(in_array($context, ['contact', 'report-issue']))
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">
{{ __('Subject') }}
</label>
<x-input
wire:model="subject"
type="text"
placeholder="{{ __('Brief description of your message') }}"
class="w-full"
/>
</div>
@endif
{{-- URL Field (for error reporting only) --}}
@if($context === 'report-error')
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">
{{ __('Page URL') }}
</label>
<x-input
wire:model="url"
type="url"
placeholder="{{ __('URL where the error occurred') }}"
class="w-full"
/>
<p class="mt-1 text-xs text-gray-500">
{{ __('Copy and paste the web address from your browser.') }}
</p>
</div>
@endif
{{-- Message Field --}}
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">
{{ __('Message') }}
</label>
<x-textarea
wire:model="message"
rows="6"
placeholder="{{ __('Please provide as much detail as possible...') }}"
class="w-full"
/>
<p class="mt-1 text-xs text-gray-500">
{{ __('Minimum 10 characters') }}
</p>
</div>
{{-- Context-specific info boxes --}}
@if($context === 'delete-profile')
<div class="p-3 bg-yellow-50 rounded-md border border-yellow-200">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<p class="text-sm text-yellow-800">
<strong>{{ __('Important') }}:</strong> {{ __('Profile deletion is permanent and cannot be undone. All your data will be removed from our system.') }}
</p>
</div>
</div>
</div>
@endif
@if($context === 'report-error')
<div class="p-3 bg-gray-50 rounded-md border border-gray-300">
<p class="text-sm text-gray-700">
<strong>{{ __('Tip') }}:</strong> {{ __('Include details like what you were trying to do, what happened, and any error messages you saw.') }}
</p>
</div>
@endif
</div>
</div>
{{-- Submit Button --}}
<div class="text-right mt-6">
<x-button
type="submit"
primary
class="bg-theme-brand hover:bg-opacity-80"
wire:loading.attr="disabled"
wire:target="submitForm"
>
<span wire:loading.remove wire:target="submitForm">
{{ $this->submitButtonText }}
</span>
<span wire:loading wire:target="submitForm" class="flex items-center">
<svg class="animate-spin -ml-1 mr-2 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
{{ __('Sending...') }}
</span>
</x-button>
</div>
</form>
</div>
</div>