@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="tab-panels" data-tabs>
        <menu class="tabs tabs--vertical" role="tablist" aria-orientation="vertical">
            <li id="tab-details" role="tab" aria-controls="tab-details" aria-selected="true">
                <x-button type="button">
                    <x-icon-info-circle width="20" />
                    <span>Details</span>
                </x-button>
            </li>
            <li id="tab-repeat" role="tab" aria-controls="tab-repeat" aria-selected="false">
                <x-button type="button">
                    <x-icon-repeat width="20" />
                    <span>Repeat</span>
                </x-button>
            </li>
            <li id="tab-invitees" role="tab" aria-controls="tab-invitees" aria-selected="false">
                <x-button type="button">
                    <x-icon-user-circle width="20" />
                    <span>Invitees</span>
                </x-button>
            </li>
        </menu>
        <div class="panels">
            <div 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="$event->exists"
                        />
                        <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>
            </div>

            <div 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>
            </div>

            <div id="tab-invitees" role="tabpanel" aria-labelledby="tab-btn-invitees" hidden>
                <div class="input-row input-row--1">
                    <div class="input-cell">
                        <input type="hidden" name="attendees_present" value="1">

                        <div class="flex flex-col gap-3" data-attendees data-next-index="{{ count($attendees ?? []) }}">
                            <div class="flex flex-col gap-2">
                                <x-input.label for="attendee_lookup" :value="__('calendar.event.attendees.add')" />
                                <p class="text-sm text-gray-600">{{ __('calendar.event.attendees.help') }}</p>
                                <div class="flex items-center gap-2">
                                    <x-input.text
                                        id="attendee_lookup"
                                        name="attendee"
                                        type="text"
                                        placeholder="{{ __('calendar.event.attendees.search_placeholder') }}"
                                        data-attendee-lookup
                                        hx-get="{{ route('attendee.suggest') }}"
                                        hx-trigger="keyup changed delay:250ms"
                                        hx-target="#attendee-suggestions"
                                        hx-swap="innerHTML"
                                    />
                                    <x-button type="button" variant="tertiary" data-attendee-add-manual>
                                        {{ __('calendar.event.attendees.add_button') }}
                                    </x-button>
                                </div>
                                <div id="attendee-suggestions"></div>
                            </div>

                            <div class="flex flex-col gap-3" data-attendees-list>
                                @foreach (($attendees ?? []) as $index => $attendee)
                                    <div class="attendee-row rounded-lg border border-gray-200 p-3 flex flex-col gap-3" data-attendee-row>
                                        <input type="hidden" name="attendees[{{ $index }}][attendee_uri]" value="{{ $attendee['attendee_uri'] ?? '' }}" data-attendee-uri>
                                        <input type="hidden" name="attendees[{{ $index }}][email]" value="{{ $attendee['email'] ?? '' }}" data-attendee-email>
                                        <input type="hidden" name="attendees[{{ $index }}][name]" value="{{ $attendee['name'] ?? '' }}" data-attendee-name>
                                        <input type="hidden" name="attendees[{{ $index }}][role]" value="{{ !empty($attendee['optional']) ? 'OPT-PARTICIPANT' : 'REQ-PARTICIPANT' }}" data-attendee-role>
                                        <input type="hidden" name="attendees[{{ $index }}][partstat]" value="NEEDS-ACTION">
                                        <input type="hidden" name="attendees[{{ $index }}][cutype]" value="INDIVIDUAL">
                                        <input type="hidden" name="attendees[{{ $index }}][is_organizer]" value="0">

                                        <div class="flex items-center justify-between gap-3">
                                            <div class="flex flex-col">
                                                <strong data-attendee-display>
                                                    {{ ($attendee['name'] ?? '') !== '' ? ($attendee['name'] . ' <' . ($attendee['email'] ?? '') . '>') : ($attendee['email'] ?? '') }}
                                                </strong>
                                                <span class="text-xs text-emerald-700 {{ !empty($attendee['verified']) ? '' : 'hidden' }}" data-attendee-verified>
                                                    {{ __('calendar.event.attendees.verified') }}
                                                </span>
                                            </div>
                                            <button type="button" class="button button--tertiary" data-attendee-remove>
                                                <x-icon-x width="18" />
                                                <span class="sr-only">{{ __('calendar.event.attendees.remove') }}</span>
                                            </button>
                                        </div>

                                        <div class="flex items-center gap-4">
                                            <label class="inline-flex items-center gap-2 text-sm">
                                                <input type="hidden" name="attendees[{{ $index }}][optional]" value="0">
                                                <x-input.checkbox
                                                    name="attendees[{{ $index }}][optional]"
                                                    value="1"
                                                    :checked="(bool) ($attendee['optional'] ?? false)"
                                                    data-attendee-optional
                                                />
                                                <span>{{ __('calendar.event.attendees.optional') }}</span>
                                            </label>

                                            <label class="inline-flex items-center gap-2 text-sm">
                                                <input type="hidden" name="attendees[{{ $index }}][rsvp]" value="0">
                                                <x-input.checkbox
                                                    name="attendees[{{ $index }}][rsvp]"
                                                    value="1"
                                                    :checked="(bool) ($attendee['rsvp'] ?? true)"
                                                />
                                                <span>{{ __('calendar.event.attendees.rsvp') }}</span>
                                            </label>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <template data-attendee-template>
                                <div class="attendee-row rounded-lg border border-gray-200 p-3 flex flex-col gap-3" data-attendee-row>
                                    <input type="hidden" name="attendees[__INDEX__][attendee_uri]" value="" data-attendee-uri>
                                    <input type="hidden" name="attendees[__INDEX__][email]" value="" data-attendee-email>
                                    <input type="hidden" name="attendees[__INDEX__][name]" value="" data-attendee-name>
                                    <input type="hidden" name="attendees[__INDEX__][role]" value="REQ-PARTICIPANT" data-attendee-role>
                                    <input type="hidden" name="attendees[__INDEX__][partstat]" value="NEEDS-ACTION">
                                    <input type="hidden" name="attendees[__INDEX__][cutype]" value="INDIVIDUAL">
                                    <input type="hidden" name="attendees[__INDEX__][is_organizer]" value="0">

                                    <div class="flex items-center justify-between gap-3">
                                        <div class="flex flex-col">
                                            <strong data-attendee-display></strong>
                                            <span class="text-xs text-emerald-700 hidden" data-attendee-verified>
                                                {{ __('calendar.event.attendees.verified') }}
                                            </span>
                                        </div>
                                        <button type="button" class="button button--tertiary" data-attendee-remove>
                                            <x-icon-x width="18" />
                                            <span class="sr-only">{{ __('calendar.event.attendees.remove') }}</span>
                                        </button>
                                    </div>

                                    <div class="flex items-center gap-4">
                                        <label class="inline-flex items-center gap-2 text-sm">
                                            <input type="hidden" name="attendees[__INDEX__][optional]" value="0">
                                            <input name="attendees[__INDEX__][optional]" type="checkbox" value="1" data-attendee-optional>
                                            <span>{{ __('calendar.event.attendees.optional') }}</span>
                                        </label>

                                        <label class="inline-flex items-center gap-2 text-sm">
                                            <input type="hidden" name="attendees[__INDEX__][rsvp]" value="0">
                                            <input name="attendees[__INDEX__][rsvp]" type="checkbox" value="1" checked>
                                            <span>{{ __('calendar.event.attendees.rsvp') }}</span>
                                        </label>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>

        </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>
