268 lines
14 KiB
PHP
268 lines
14 KiB
PHP
@php
|
|
$isModal = $isModal ?? false;
|
|
$formAction = $event->exists
|
|
? route('calendar.event.update', [$calendar, $event])
|
|
: route('calendar.event.store', $calendar);
|
|
@endphp
|
|
|
|
<form method="POST" id="event-form" action="{{ $formAction }}" class="settings modal">
|
|
@csrf
|
|
@if($event->exists)
|
|
@method('PUT')
|
|
@endif
|
|
|
|
<div class="event-tabs" data-tabs>
|
|
<div class="tab-panels">
|
|
<section id="tab-details" role="tabpanel" aria-labelledby="tab-btn-details">
|
|
{{-- Title --}}
|
|
<div class="input-row input-row--1">
|
|
<div class="input-cell">
|
|
<x-input.label for="title" :value="__('Title')" />
|
|
<x-input.text
|
|
id="title"
|
|
name="title"
|
|
type="text"
|
|
:value="old('title', $event->meta?->title ?? '')"
|
|
required
|
|
autofocus
|
|
/>
|
|
<x-input.error class="mt-2" :messages="$errors->get('title')" />
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Description --}}
|
|
<div class="input-row input-row--1">
|
|
<div class="input-cell">
|
|
<x-input.label for="description" :value="__('Description')" />
|
|
<x-input.textarea
|
|
id="description"
|
|
name="description"
|
|
rows="3">{{ old('description', $event->meta?->description ?? '') }}</x-input.textarea>
|
|
<x-input.error :messages="$errors->get('description')" />
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Location --}}
|
|
<div class="input-row input-row--1">
|
|
<div class="input-cell">
|
|
<x-input.label for="location" :value="__('Location')" />
|
|
<x-input.text
|
|
id="location"
|
|
name="location"
|
|
:value="old('location', $event->meta?->location ?? '')"
|
|
{{-- live suggestions via htmx --}}
|
|
hx-get="{{ route('location.suggest') }}"
|
|
hx-trigger="keyup changed delay:300ms"
|
|
hx-target="#location-suggestions"
|
|
hx-swap="innerHTML"
|
|
/>
|
|
<x-input.error :messages="$errors->get('location')" />
|
|
|
|
{{-- suggestion dropdown target --}}
|
|
<div id="location-suggestions" class="relative z-20"></div>
|
|
{{-- hidden fields (filled when user clicks a suggestion; handy for step #2) --}}
|
|
<input type="hidden" id="loc_display_name" name="loc_display_name" />
|
|
<input type="hidden" id="loc_place_name" name="loc_place_name" />
|
|
<input type="hidden" id="loc_street" name="loc_street" />
|
|
<input type="hidden" id="loc_city" name="loc_city" />
|
|
<input type="hidden" id="loc_state" name="loc_state" />
|
|
<input type="hidden" id="loc_postal" name="loc_postal" />
|
|
<input type="hidden" id="loc_country" name="loc_country" />
|
|
<input type="hidden" id="loc_lat" name="loc_lat" />
|
|
<input type="hidden" id="loc_lon" name="loc_lon" />
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Start / End --}}
|
|
<div class="input-row input-row--1-1">
|
|
<div class="input-cell">
|
|
<x-input.label for="start_at" :value="__('Starts')" />
|
|
<x-input.text
|
|
id="start_at"
|
|
name="start_at"
|
|
type="datetime-local"
|
|
:value="old('start_at', $start)"
|
|
data-event-start
|
|
required
|
|
/>
|
|
<x-input.error :messages="$errors->get('start_at')" />
|
|
</div>
|
|
<div class="input-cell">
|
|
<x-input.label for="end_at" :value="__('Ends')" />
|
|
<x-input.text
|
|
id="end_at"
|
|
name="end_at"
|
|
type="datetime-local"
|
|
:value="old('end_at', $end)"
|
|
data-event-end
|
|
required
|
|
/>
|
|
<x-input.error :messages="$errors->get('end_at')" />
|
|
</div>
|
|
</div>
|
|
|
|
{{-- All-day --}}
|
|
<div class="input-row input-row--1">
|
|
<div class="input-cell">
|
|
<x-input.checkbox-label
|
|
label="{{ __('All day event') }}"
|
|
id="all_day"
|
|
name="all_day"
|
|
value="1"
|
|
data-all-day-toggle
|
|
:checked="(bool) old('all_day', $event->meta?->all_day)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="tab-repeat" role="tabpanel" aria-labelledby="tab-btn-repeat" hidden>
|
|
<div class="input-row input-row--1">
|
|
<div class="input-cell">
|
|
<div class="mt-3">
|
|
<x-input.label for="repeat_frequency" :value="__('calendar.event.recurrence.frequency')" />
|
|
<x-input.select
|
|
id="repeat_frequency"
|
|
name="repeat_frequency"
|
|
:options="$rruleOptions"
|
|
:selected="$repeatFrequency"
|
|
:placeholder="__('calendar.event.recurrence.none')"
|
|
data-recurrence-frequency
|
|
/>
|
|
<x-input.error :messages="$errors->get('repeat_frequency')" />
|
|
|
|
<div class="mt-3 {{ $repeatFrequency === '' ? 'hidden' : '' }}" data-recurrence-interval>
|
|
<x-input.label for="repeat_interval" :value="__('calendar.event.recurrence.every')" />
|
|
<div class="flex items-center gap-2">
|
|
<x-input.text
|
|
id="repeat_interval"
|
|
name="repeat_interval"
|
|
type="number"
|
|
min="1"
|
|
max="365"
|
|
:value="$repeatInterval"
|
|
/>
|
|
<span class="text-sm text-gray-600" data-recurrence-unit></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 {{ $repeatFrequency !== 'weekly' ? 'hidden' : '' }}" data-recurrence-section="weekly">
|
|
<p class="text-sm text-gray-600">{{ __('calendar.event.recurrence.on_days') }}</p>
|
|
<div class="flex flex-wrap gap-2 mt-2">
|
|
@foreach ($weekdayOptions as $code => $label)
|
|
<label class="inline-flex items-center gap-2 text-sm">
|
|
<x-input.checkbox
|
|
name="repeat_weekdays[]"
|
|
value="{{ $code }}"
|
|
:checked="in_array($code, (array) $repeatWeekdays, true)"
|
|
/>
|
|
<span title="{{ $weekdayLong[$code] ?? $code }}">{{ $label }}</span>
|
|
</label>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 {{ $repeatFrequency !== 'monthly' ? 'hidden' : '' }}" data-recurrence-section="monthly">
|
|
<div class="flex flex-col gap-3">
|
|
<div class="flex items-center gap-4">
|
|
<x-input.radio-label
|
|
id="repeat_monthly_mode_days"
|
|
name="repeat_monthly_mode"
|
|
value="days"
|
|
label="{{ __('calendar.event.recurrence.on_days') }}"
|
|
:checked="$repeatMonthMode === 'days'"
|
|
data-monthly-mode
|
|
/>
|
|
<x-input.radio-label
|
|
id="repeat_monthly_mode_weekday"
|
|
name="repeat_monthly_mode"
|
|
value="weekday"
|
|
label="{{ __('calendar.event.recurrence.on_the') }}"
|
|
:checked="$repeatMonthMode === 'weekday'"
|
|
data-monthly-mode
|
|
/>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-7 gap-2 {{ $repeatMonthMode !== 'days' ? 'hidden' : '' }}" data-monthly-days>
|
|
@for ($day = 1; $day <= 31; $day++)
|
|
<label class="inline-flex items-center gap-2 text-xs">
|
|
<x-input.checkbox
|
|
name="repeat_month_days[]"
|
|
value="{{ $day }}"
|
|
:checked="in_array($day, (array) $repeatMonthDays)"
|
|
/>
|
|
<span>{{ $day }}</span>
|
|
</label>
|
|
@endfor
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3 {{ $repeatMonthMode !== 'weekday' ? 'hidden' : '' }}" data-monthly-weekday>
|
|
<x-input.select
|
|
id="repeat_month_week"
|
|
name="repeat_month_week"
|
|
:options="[
|
|
'first' => __('calendar.event.recurrence.week_order.first'),
|
|
'second' => __('calendar.event.recurrence.week_order.second'),
|
|
'third' => __('calendar.event.recurrence.week_order.third'),
|
|
'fourth' => __('calendar.event.recurrence.week_order.fourth'),
|
|
'last' => __('calendar.event.recurrence.week_order.last'),
|
|
]"
|
|
:selected="$repeatMonthWeek"
|
|
/>
|
|
<x-input.select
|
|
id="repeat_month_weekday"
|
|
name="repeat_month_weekday"
|
|
:options="$weekdayLong"
|
|
:selected="$repeatMonthWeekday"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 text-sm text-gray-600 {{ $repeatFrequency !== 'yearly' ? 'hidden' : '' }}" data-recurrence-section="yearly">
|
|
{{ __('calendar.event.recurrence.yearly_hint') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="tab-invitees" role="tabpanel" aria-labelledby="tab-btn-invitees" hidden>
|
|
<div class="input-row input-row--1">
|
|
<div class="input-cell">
|
|
<p class="text-sm text-gray-600">More to come</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="tab-buttons" role="tablist" aria-orientation="vertical">
|
|
<button type="button" id="tab-btn-details" role="tab" aria-controls="tab-details" aria-selected="true">
|
|
<x-icon-info-circle width="20" />
|
|
<span>Details</span>
|
|
</button>
|
|
<button type="button" id="tab-btn-repeat" role="tab" aria-controls="tab-repeat" aria-selected="false">
|
|
<x-icon-repeat width="20" />
|
|
<span>Repeat</span>
|
|
</button>
|
|
<button type="button" id="tab-btn-invitees" role="tab" aria-controls="tab-invitees" aria-selected="false">
|
|
<x-icon-user-circle width="20" />
|
|
<span>Invitees</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Submit --}}
|
|
@if(!$isModal)
|
|
<div class="input-row input-row--actions input-row--start sticky-bottom">
|
|
<x-button type="anchor" variant="tertiary" href="{{ route('calendar.show', $calendar) }}">
|
|
{{ __('common.cancel') }}
|
|
</x-button>
|
|
<x-button variant="primary" type="submit">
|
|
{{ $event->exists ? __('Save') : __('Create') }}
|
|
</x-button>
|
|
</div>
|
|
@endif
|
|
|
|
</form>
|