<div class="flex flex-col">

    {{-- HEADER --}}
    <div class="px-6 pt-6 pb-4 border-b border-gray-200 flex items-start gap-4">
        <div class="size-12 rounded-xl bg-indigo-100 flex items-center justify-center">
            <x-heroicon-o-calendar class="size-6 text-indigo-600"/>
        </div>

        <div class="flex-1">
            <h2 class="text-lg font-semibold text-gray-900">
                {{ t('calendar.edit_event') }}
            </h2>

            <p class="text-sm text-gray-500 mt-0.5">
                {{ \Carbon\Carbon::parse($date)->translatedFormat('l, d. F Y') }}
            </p>
        </div>
    </div>


    {{-- BODY --}}
    <div class="px-6 py-6 space-y-6">

        {{-- TITLE --}}
        <div>
            <label class="text-xs text-gray-500 mb-1 block">{{ t('events.title') }}</label>

            <input
                wire:model="title"
                type="text"
                class="w-full border border-gray-300 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-indigo-500"
            >
        </div>


        {{-- 🔥 GLOBAL SETTINGS --}}
        <div class="bg-white border border-gray-200 rounded-2xl p-5 shadow-sm space-y-5">

            <div class="text-sm font-semibold text-gray-900">
                {{ t('events.standard_all_days') }}
            </div>

            {{-- DATE RANGE --}}
            <div class="grid grid-cols-2 gap-4">

                <div>
                    <label class="text-xs text-gray-500 block mb-1">{{ t('events.start') }}</label>
                    <input wire:model="start_date" type="date"
                           class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm">
                </div>

                <div>
                    <label class="text-xs text-gray-500 block mb-1">{{ t('events.end') }}</label>
                    <input wire:model="end_date" type="date"
                           class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm">
                </div>

            </div>

            {{-- TIME --}}
            @if(!$is_all_day)
                <div class="grid grid-cols-2 gap-4">

                    <div>
                        <label class="text-xs text-gray-500 block mb-1">{{ t('common.from') }}</label>
                        <input wire:model="time" type="time"
                               class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm">
                    </div>

                    <div>
                        <label class="text-xs text-gray-500 block mb-1">{{ t('common.to') }}</label>
                        <input wire:model="end_time" type="time"
                               class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm">
                    </div>

                </div>
            @endif

        </div>


        {{-- 🔥 EXCEPTION --}}
        {{-- 🔥 EXCEPTION NUR BEI MULTI DAY --}}
        @if($start_date !== $end_date)

            <div class="bg-gray-50 border border-gray-200 rounded-2xl p-5 space-y-4">

                <div class="flex items-center justify-between">

                    <div>
                        <div class="text-sm font-medium text-gray-900">
                            {{ t('events.adjust_day_only') }}
                        </div>

                        <div class="text-xs text-gray-500">
                            {{ t('events.overrides_defaults') }}
                        </div>
                    </div>

                    <input
                        type="checkbox"
                        wire:model.live="use_exception"
                        class="w-5 h-5 accent-indigo-600"
                    >
                </div>

                @if($use_exception)

                    <div class="text-xs text-indigo-600 bg-indigo-50 border border-indigo-200 rounded-lg px-3 py-2">
                        {{ t('events.changes_this_day') }}
                    </div>

                    @if($use_exception && !$is_all_day)
                        <div class="grid grid-cols-2 gap-4">

                            <div>
                                <label class="text-xs text-gray-500 block mb-1">{{ t('common.from') }}</label>
                                <input wire:model="exception_time" type="time"
                                       class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm">
                            </div>

                            <div>
                                <label class="text-xs text-gray-500 block mb-1">{{ t('common.to') }}</label>
                                <input wire:model="exception_end_time" type="time"
                                       class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm">
                            </div>

                        </div>
                    @endif

                @endif

            </div>

        @endif

    </div>


    {{-- FOOTER --}}
    <div class="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">

        <button
            wire:click="$dispatch('closeModal')"
            class="px-5 py-2.5 text-sm bg-gray-100 hover:bg-gray-200 rounded-xl"
        >
            {{ t('common.cancel') }}
        </button>

        <button
            wire:click="save"
            class="px-5 py-2.5 text-sm bg-primary text-white rounded-xl shadow hover:opacity-90"
        >
            {{ t('common.save') }}
        </button>

    </div>

</div>


{{--<div class="flex flex-col">--}}

{{--    --}}{{-- HEADER --}}
{{--    <div class="px-6 pt-6 pb-4 border-b border-border flex items-start gap-4">--}}

{{--        <div class="size-12 rounded-xl bg-primary/10 flex items-center justify-center">--}}
{{--            <x-heroicon-o-calendar class="size-6 text-primary"/>--}}
{{--        </div>--}}

{{--        <div class="flex-1">--}}
{{--            <h2 class="text-lg font-semibold text-text">--}}
{{--                {{ $eventId ? 'Termin bearbeiten' : 'Neuer Termin' }}--}}
{{--            </h2>--}}

{{--            <p class="text-sm text-text-muted mt-0.5">--}}
{{--                {{ \Carbon\Carbon::parse($date)->translatedFormat('l, d. F Y') }}--}}
{{--            </p>--}}
{{--        </div>--}}

{{--    </div>--}}


{{--    --}}{{-- BODY --}}
{{--    <div class="px-6 py-5 space-y-6">--}}

{{--        --}}{{-- TITLE --}}
{{--        <div class="space-y-2">--}}
{{--            <label class="text-sm font-medium text-text-muted">Titel</label>--}}

{{--            <input--}}
{{--                wire:model="title"--}}
{{--                type="text"--}}
{{--                class="w-full bg-background border border-border rounded-xl px-4 py-3 text-sm"--}}
{{--            >--}}
{{--        </div>--}}

{{--        --}}{{-- START --}}
{{--        <div class="grid grid-cols-2 gap-3">--}}

{{--            <div>--}}
{{--                <label class="text-sm text-text-muted">Datum</label>--}}
{{--                <input wire:model="date" type="date" class="w-full input"/>--}}
{{--            </div>--}}

{{--            <div>--}}
{{--                <label class="text-sm text-text-muted">Startzeit</label>--}}
{{--                <input wire:model="time" type="time" class="w-full input"/>--}}
{{--            </div>--}}

{{--        </div>--}}

{{--        --}}{{-- END DATUM --}}
{{--        <div class="space-y-2">--}}
{{--            <label class="text-sm text-text-muted">Enddatum (optional)</label>--}}

{{--            <input--}}
{{--                wire:model.live="end_date"--}}
{{--                type="date"--}}
{{--                class="w-full input"--}}
{{--            >--}}
{{--        </div>--}}

{{--        --}}{{-- END TIME nur wenn END DATE gesetzt --}}
{{--        @if($end_date)--}}
{{--            <div class="space-y-2">--}}
{{--                <label class="text-sm text-text-muted">--}}
{{--                    Endzeit (optional)--}}
{{--                </label>--}}

{{--                <input--}}
{{--                    wire:model="end_time"--}}
{{--                    type="time"--}}
{{--                    class="w-full input"--}}
{{--                >--}}
{{--            </div>--}}
{{--        @endif--}}

{{--    </div>--}}

{{--    --}}{{-- FOOTER --}}
{{--    <div class="px-6 py-4 border-t border-border flex justify-end gap-3">--}}

{{--        <button--}}
{{--            wire:click="$dispatch('closeModal')"--}}
{{--            class="px-5 py-2.5 text-sm bg-background hover:bg-border rounded-xl"--}}
{{--        >--}}
{{--            Abbrechen--}}
{{--        </button>--}}

{{--        <button--}}
{{--            wire:click="save"--}}
{{--            class="px-5 py-2.5 text-sm bg-primary text-white rounded-xl shadow hover:opacity-90"--}}
{{--        >--}}
{{--            Speichern--}}
{{--        </button>--}}

{{--    </div>--}}

{{--</div>--}}

{{--<div class="flex flex-col">--}}

{{--    --}}{{----}}{{-- HEADER --}}
{{--    <div class="px-6 pt-6 pb-4 border-b border-border flex items-start gap-4">--}}

{{--        <div class="size-12 rounded-xl bg-primary/10 flex items-center justify-center">--}}
{{--            <x-heroicon-o-calendar class="size-6 text-primary"/>--}}
{{--        </div>--}}

{{--        <div class="flex-1">--}}
{{--            <h2 class="text-lg font-semibold text-text">--}}
{{--                {{ $eventId ? 'Termin bearbeiten' : 'Neuer Termin' }}--}}
{{--            </h2>--}}

{{--            <p class="text-sm text-text-muted mt-0.5">--}}
{{--                {{ \Carbon\Carbon::parse($date)->translatedFormat('l, d. F Y') }}--}}
{{--            </p>--}}
{{--        </div>--}}

{{--    </div>--}}


{{--    --}}{{----}}{{-- BODY --}}
{{--    <div class="px-6 py-5 space-y-5">--}}

{{--        --}}{{----}}{{-- TITLE --}}
{{--        <div class="space-y-2">--}}
{{--            <label class="text-sm font-medium text-text-muted">Titel</label>--}}

{{--            <input--}}
{{--                wire:model="title"--}}
{{--                wire:keydown.enter="save"--}}
{{--                type="text"--}}
{{--                placeholder="z.B. Zahnarzt"--}}
{{--                class="w-full bg-background border border-border rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary outline-none"--}}
{{--                autofocus--}}
{{--            >--}}
{{--        </div>--}}


{{--        --}}{{----}}{{-- TIME --}}
{{--        <div class="space-y-2">--}}
{{--            <label class="text-sm font-medium text-text-muted">Uhrzeit</label>--}}

{{--            <input--}}
{{--                wire:model="time"--}}
{{--                type="time"--}}
{{--                class="w-full bg-background border border-border rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary outline-none"--}}
{{--            >--}}
{{--        </div>--}}


{{--        --}}{{----}}{{-- 🔥 NEU: END DATE --}}
{{--        <div class="space-y-2">--}}
{{--            <label class="text-sm font-medium text-text-muted">--}}
{{--                Enddatum (optional)--}}
{{--            </label>--}}

{{--            <input--}}
{{--                wire:model="end_date"--}}
{{--                type="date"--}}
{{--                class="w-full bg-background border border-border rounded-xl px-4 py-3 text-sm"--}}
{{--            >--}}
{{--        </div>--}}


{{--        <div class="flex items-center gap-2">--}}
{{--            <input type="checkbox" wire:model.live="use_end_time">--}}
{{--            <label class="text-sm">Endzeit hinzufügen</label>--}}
{{--        </div>--}}

{{--        @if($use_end_time)--}}
{{--            <input--}}
{{--                wire:model="end_time"--}}
{{--                type="time"--}}
{{--                class="w-full bg-background border border-border rounded-xl px-4 py-3 text-sm"--}}
{{--            >--}}
{{--        @endif--}}
{{--    </div>--}}


{{--    --}}{{----}}{{-- FOOTER --}}
{{--    <div class="px-6 py-4 border-t border-border flex justify-end gap-3">--}}

{{--        <button--}}
{{--            wire:click="$dispatch('closeModal')"--}}
{{--            class="px-5 py-2.5 text-sm bg-background hover:bg-border rounded-xl"--}}
{{--        >--}}
{{--            Abbrechen--}}
{{--        </button>--}}

{{--        <button--}}
{{--            wire:click="save"--}}
{{--            class="px-5 py-2.5 text-sm bg-primary text-white rounded-xl shadow hover:opacity-90"--}}
{{--        >--}}
{{--            Speichern--}}
{{--        </button>--}}

{{--    </div>--}}

{{--</div>--}}
