<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">
                            &times;
                        </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') }}{{ isset($r['time']) ? \Carbon\Carbon::createFromFormat('H:i', $r['time'], 'UTC')->setTimezone(auth()->user()->timezone ?? 'UTC')->format('H:i') : '' }}{{ t('events.reminder_clock_suffix') }}
                    @else
                        {{ t('events.reminder_prev_day_prefix') }}{{ isset($r['time']) ? \Carbon\Carbon::createFromFormat('H:i', $r['time'], 'UTC')->setTimezone(auth()->user()->timezone ?? 'UTC')->format('H:i') : '' }}{{ 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>
