339 lines
17 KiB
PHP
339 lines
17 KiB
PHP
<div class="space-y-5">
|
|
|
|
{{-- TITLE --}}
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-600 mb-1.5">
|
|
{{ t('events.title') }} <span class="text-red-400">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
wire:model.live="title"
|
|
placeholder="{{ t('events.title_placeholder') }}"
|
|
class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm font-medium focus:outline-none focus:border-indigo-400 placeholder:text-gray-400"
|
|
>
|
|
</div>
|
|
|
|
{{-- DATE & TIME --}}
|
|
<div>
|
|
<label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">{{ t('events.datetime') }}</label>
|
|
|
|
<div class="space-y-3">
|
|
|
|
{{-- DATE --}}
|
|
<div class="flex justify-between items-center gap-3">
|
|
<span class="text-sm text-gray-600">{{ t('events.date') }}</span>
|
|
<input type="date"
|
|
wire:model="starts_at"
|
|
class="border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-400 w-[160px]">
|
|
</div>
|
|
|
|
{{-- MEHRTÄGIG --}}
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-sm text-gray-600">{{ t('events.multiday') }}</span>
|
|
<button wire:click="$toggle('is_multi_day')"
|
|
class="relative rounded-full transition-colors"
|
|
style="width:40px;height:22px;background:{{ $is_multi_day ? '#6366f1' : '#e5e7eb' }}">
|
|
<div class="absolute top-[3px] w-4 h-4 bg-white rounded-full shadow transition-all"
|
|
style="{{ $is_multi_day ? 'left:20px' : 'left:3px' }}"></div>
|
|
</button>
|
|
</div>
|
|
|
|
{{-- MULTI DAY EXCEPTIONS --}}
|
|
@if($is_multi_day)
|
|
<div class="border border-gray-200 rounded-lg p-3 space-y-2.5">
|
|
|
|
<div class="text-xs font-semibold text-gray-500 uppercase tracking-wider">
|
|
{{ t('events.custom_days') }}
|
|
</div>
|
|
|
|
@foreach($this->days as $day)
|
|
@php
|
|
$d = $day->format('Y-m-d');
|
|
$has = isset($exceptions[$d]);
|
|
@endphp
|
|
|
|
<div class="flex items-center justify-between gap-2">
|
|
<div class="text-xs text-gray-600 w-[100px]">
|
|
{{ $day->translatedFormat('D d.m') }}
|
|
</div>
|
|
|
|
<button wire:click="toggleException('{{ $d }}')"
|
|
class="text-[10px] px-2 py-1 rounded-md border font-medium transition-all
|
|
{{ $has ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-gray-50 border-gray-200 text-gray-500 hover:bg-gray-100' }}">
|
|
{{ $has ? t('events.custom') : t('events.standard') }}
|
|
</button>
|
|
|
|
@if($has)
|
|
<div class="flex gap-1.5">
|
|
<input type="time"
|
|
wire:model="exceptions.{{ $d }}.start"
|
|
class="border border-gray-200 rounded-lg px-2 py-1.5 text-xs focus:outline-none focus:border-indigo-400 w-[80px]">
|
|
<input type="time"
|
|
wire:model="exceptions.{{ $d }}.end"
|
|
class="border border-gray-200 rounded-lg px-2 py-1.5 text-xs focus:outline-none focus:border-indigo-400 w-[80px]">
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endforeach
|
|
|
|
</div>
|
|
@endif
|
|
|
|
{{-- MULTI DATE --}}
|
|
@if($is_multi_day)
|
|
<div class="space-y-2.5 pt-2.5 border-t border-gray-100">
|
|
<div class="flex justify-between items-center gap-3">
|
|
<span class="text-sm text-gray-500">{{ t('common.from') }}</span>
|
|
<input type="date" wire:model="multi_start_date"
|
|
class="border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-400 w-[160px]">
|
|
</div>
|
|
<div class="flex justify-between items-center gap-3">
|
|
<span class="text-sm text-gray-500">{{ t('common.to') }}</span>
|
|
<input type="date" wire:model="multi_end_date"
|
|
class="border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-400 w-[160px]">
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- TIME --}}
|
|
@if(!$is_all_day)
|
|
<div class="flex justify-between items-center gap-3">
|
|
<span class="text-sm text-gray-600">{{ t('events.time') }}</span>
|
|
<div class="flex gap-2">
|
|
<input type="time" wire:model="start_time"
|
|
class="border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-400 w-[100px]">
|
|
<input type="time" wire:model="end_time"
|
|
class="border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-400 w-[100px]">
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- ALL DAY --}}
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-sm text-gray-600">{{ t('events.all_day') }}</span>
|
|
<button wire:click="$toggle('is_all_day')"
|
|
class="relative rounded-full transition-colors"
|
|
style="width:40px;height:22px;background:{{ $is_all_day ? '#6366f1' : '#e5e7eb' }}">
|
|
<div class="absolute top-[3px] w-4 h-4 bg-white rounded-full shadow transition-all"
|
|
style="{{ $is_all_day ? 'left:20px' : 'left:3px' }}"></div>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{{-- COLOR --}}
|
|
<div>
|
|
<label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">{{ t('events.color') }}</label>
|
|
|
|
<div class="flex gap-2.5">
|
|
@foreach(['#6366f1','#22c55e','#ef4444','#f59e0b','#0ea5e9'] as $c)
|
|
<button
|
|
wire:click="$set('color','{{ $c }}')"
|
|
class="w-7 h-7 rounded-full border-2 transition-all
|
|
{{ $color === $c ? 'border-indigo-400 scale-110 ring-2 ring-indigo-200' : 'border-transparent hover:scale-105' }}"
|
|
style="background: {{ $c }}">
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
{{-- TEILNEHMER --}}
|
|
<div>
|
|
<label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">{{ t('events.participants') }}</label>
|
|
|
|
{{-- Ausgewählte Teilnehmer als Chips --}}
|
|
@if(count($attendees) > 0)
|
|
<div class="flex flex-wrap gap-1.5 mb-2">
|
|
@foreach($attendees as $attendee)
|
|
<span class="inline-flex items-center gap-1 px-2.5 py-1 bg-indigo-50 text-indigo-700 text-xs font-medium rounded-full border border-indigo-200">
|
|
{{ $attendee['name'] }}
|
|
<button wire:click="removeAttendee('{{ $attendee['id'] }}')" type="button"
|
|
class="text-indigo-400 hover:text-indigo-700 ml-0.5 leading-none">
|
|
×
|
|
</button>
|
|
</span>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Suchfeld --}}
|
|
<div class="relative">
|
|
<input
|
|
type="text"
|
|
wire:model.live.debounce.300ms="attendeeSearch"
|
|
placeholder="{{ t('events.participant_search') }}"
|
|
class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-400 placeholder:text-gray-400"
|
|
autocomplete="off"
|
|
>
|
|
|
|
{{-- Dropdown Vorschläge --}}
|
|
@if(count($attendeeSuggestions) > 0)
|
|
<div class="absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden">
|
|
@foreach($attendeeSuggestions as $suggestion)
|
|
<button
|
|
wire:click="addAttendee('{{ $suggestion['id'] }}', '{{ addslashes($suggestion['name']) }}')"
|
|
type="button"
|
|
class="w-full text-left px-3 py-2.5 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-700 transition-colors flex items-center gap-2"
|
|
>
|
|
<span class="w-6 h-6 rounded-full bg-indigo-100 text-indigo-600 text-[10px] font-semibold flex items-center justify-center uppercase flex-shrink-0">
|
|
{{ mb_substr($suggestion['name'], 0, 1) }}
|
|
</span>
|
|
{{ $suggestion['name'] }}
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
{{-- NOTES --}}
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-600 mb-1.5">{{ t('events.note') }}</label>
|
|
|
|
<textarea wire:model="notes"
|
|
rows="3"
|
|
placeholder="{{ t('events.note_placeholder') }}"
|
|
class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-indigo-400 placeholder:text-gray-400 resize-none"></textarea>
|
|
</div>
|
|
|
|
{{-- ERINNERUNGEN --}}
|
|
<div>
|
|
@php $locale = auth()->user()->locale ?? 'de'; @endphp
|
|
<label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">
|
|
{{ t('events.reminders') }}
|
|
</label>
|
|
|
|
{{-- Bestehende Erinnerungen --}}
|
|
@foreach($reminders as $i => $r)
|
|
<div class="flex items-center gap-2 bg-indigo-50 rounded-lg px-3 py-2 mb-1.5">
|
|
<x-heroicon-o-bell class="w-4 h-4 text-indigo-500 shrink-0" />
|
|
<span class="flex-1 text-sm text-gray-700">
|
|
@if(($r['type'] ?? '') === 'before')
|
|
@if(($r['minutes'] ?? 0) >= 1440) {{ t('events.reminder_1day') }}
|
|
@elseif(($r['minutes'] ?? 0) >= 60) {{ ($r['minutes'] ?? 0) / 60 }}{{ t('events.reminder_h_before') }}
|
|
@else {{ $r['minutes'] ?? 30 }}{{ t('events.reminder_min_before') }}
|
|
@endif
|
|
@elseif(($r['type'] ?? '') === 'time_of_day')
|
|
{{ t('events.reminder_on_day_prefix') }}{{ $r['time'] ?? '' }}{{ t('events.reminder_clock_suffix') }}
|
|
@else
|
|
{{ t('events.reminder_prev_day_prefix') }}{{ $r['time'] ?? '' }}{{ t('events.reminder_clock_suffix') }}
|
|
@endif
|
|
</span>
|
|
<button wire:click="removeReminder({{ $i }})" type="button"
|
|
class="text-gray-400 hover:text-red-500 transition-colors">
|
|
<x-heroicon-o-x-mark class="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
@endforeach
|
|
|
|
{{-- Hinzufügen --}}
|
|
<div x-data="{ open: false }">
|
|
<button @click="open = !open" type="button"
|
|
class="flex items-center gap-1.5 text-sm text-indigo-600 hover:text-indigo-800 mt-2 transition-colors">
|
|
<x-heroicon-o-plus-circle class="w-4 h-4" />
|
|
{{ t('events.add_reminder') }}
|
|
</button>
|
|
|
|
<div x-show="open" x-collapse class="mt-3 space-y-3">
|
|
|
|
<div>
|
|
<p class="text-xs text-gray-400 mb-2">{{ t('events.reminder_before_section') }}</p>
|
|
<div class="flex flex-wrap gap-2">
|
|
@foreach([
|
|
['label' => '10 Min', 'min' => 10],
|
|
['label' => '30 Min', 'min' => 30],
|
|
['label' => '1 Std', 'min' => 60],
|
|
['label' => '2 Std', 'min' => 120],
|
|
['label' => '1 Tag', 'min' => 1440],
|
|
] as $o)
|
|
<button wire:click="addReminder('before', {{ $o['min'] }}, null)"
|
|
@click="open = false" type="button"
|
|
class="px-3 py-1.5 text-xs font-medium rounded-full bg-indigo-50 text-indigo-600 hover:bg-indigo-100 transition-colors">
|
|
{{ $o['label'] }}{{ t('events.reminder_before_suffix') }}
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p class="text-xs text-gray-400 mb-2">{{ t('events.reminder_on_day_section') }}</p>
|
|
<div class="flex flex-wrap gap-2">
|
|
@foreach(['07:00', '08:00', '09:00', '12:00'] as $time)
|
|
<button wire:click="addReminder('time_of_day', null, '{{ $time }}')"
|
|
@click="open = false" type="button"
|
|
class="px-3 py-1.5 text-xs font-medium rounded-full bg-green-50 text-green-600 hover:bg-green-100 transition-colors">
|
|
{{ $time }}{{ t('events.reminder_clock_suffix') }}
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p class="text-xs text-gray-400 mb-2">{{ t('events.reminder_day_before_section') }}</p>
|
|
<div class="flex flex-wrap gap-2">
|
|
@foreach(['17:00', '18:00', '20:00'] as $time)
|
|
<button wire:click="addReminder('day_before', null, '{{ $time }}')"
|
|
@click="open = false" type="button"
|
|
class="px-3 py-1.5 text-xs font-medium rounded-full bg-orange-50 text-orange-600 hover:bg-orange-100 transition-colors">
|
|
{{ $time }}{{ t('events.reminder_clock_suffix') }}
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Custom Zeit --}}
|
|
<div class="mt-3 pt-3 border-t border-gray-100">
|
|
<p class="text-xs text-gray-400 mb-2">
|
|
{{ t('events.reminder_custom_time') }}
|
|
</p>
|
|
<div class="flex items-center gap-2">
|
|
<select wire:model="customReminderType"
|
|
class="text-xs border border-gray-200 rounded-lg px-2 py-1.5 text-gray-600 bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
|
<option value="time_of_day">{{ t('events.reminder_on_day') }}</option>
|
|
<option value="day_before">{{ t('events.reminder_day_before') }}</option>
|
|
</select>
|
|
<input type="time"
|
|
wire:model="customReminderTime"
|
|
class="text-xs border border-gray-200 rounded-lg px-2 py-1.5 text-gray-600 bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500"/>
|
|
<button wire:click="addCustomReminder"
|
|
@click="open = false"
|
|
type="button"
|
|
class="px-3 py-1.5 text-xs font-medium rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition disabled:opacity-50"
|
|
:disabled="!$wire.customReminderTime">
|
|
{{ t('common.add') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- WIEDERHOLUNG --}}
|
|
<div>
|
|
<label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">
|
|
{{ t('events.recurrence') }}
|
|
</label>
|
|
|
|
<select wire:model="recurrence"
|
|
class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-indigo-400 text-gray-700 bg-white">
|
|
<option value="">{{ t('events.recurrence_none') }}</option>
|
|
<option value="daily">{{ t('events.recurrence_daily') }}</option>
|
|
<option value="weekly">{{ t('events.recurrence_weekly') }}</option>
|
|
<option value="monthly">{{ t('events.recurrence_monthly') }}</option>
|
|
<option value="yearly">{{ t('events.recurrence_yearly') }}</option>
|
|
</select>
|
|
|
|
@if($recurrence)
|
|
<div class="flex justify-between items-center gap-3 mt-3">
|
|
<span class="text-sm text-gray-500">{{ t('events.recurrence_end') }}</span>
|
|
<input type="date"
|
|
wire:model="recurrence_end_date"
|
|
class="border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-400 w-[160px]">
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
</div>
|