@php
    $colorMap = [
        'indigo' => ['bg' => 'bg-indigo-50',  'text' => 'text-indigo-600',  'border' => 'border-indigo-200', 'ring' => 'ring-indigo-500'],
        'amber'  => ['bg' => 'bg-amber-50',   'text' => 'text-amber-600',   'border' => 'border-amber-200',  'ring' => 'ring-amber-500'],
        'blue'   => ['bg' => 'bg-blue-50',    'text' => 'text-blue-600',    'border' => 'border-blue-200',   'ring' => 'ring-blue-500'],
        'green'  => ['bg' => 'bg-green-50',   'text' => 'text-green-600',   'border' => 'border-green-200',  'ring' => 'ring-green-500'],
        'pink'   => ['bg' => 'bg-pink-50',    'text' => 'text-pink-600',    'border' => 'border-pink-200',   'ring' => 'ring-pink-500'],
        'gray'   => ['bg' => 'bg-gray-100',   'text' => 'text-gray-500',    'border' => 'border-gray-200',   'ring' => 'ring-gray-400'],
        'violet' => ['bg' => 'bg-violet-50',  'text' => 'text-violet-600',  'border' => 'border-violet-200', 'ring' => 'ring-violet-500'],
        'orange' => ['bg' => 'bg-orange-50',  'text' => 'text-orange-600',  'border' => 'border-orange-200', 'ring' => 'ring-orange-500'],
        'teal'   => ['bg' => 'bg-teal-50',    'text' => 'text-teal-600',    'border' => 'border-teal-200',   'ring' => 'ring-teal-500'],
    ];

    $dayLabels = [1 => t('automations.day.monday'), 2 => t('automations.day.tuesday'), 3 => t('automations.day.wednesday'), 4 => t('automations.day.thursday'), 5 => t('automations.day.friday'), 6 => t('automations.day.saturday'), 7 => t('automations.day.sunday')];
@endphp

<div x-data="{ panelOpen: @entangle('panelOpen') }" class="space-y-6">

    {{-- HEADER --}}
    <div>
        <h2 class="text-xl font-semibold text-gray-800">{{ t('automations.title') }}</h2>
        <p class="text-sm text-gray-500 mt-1">{{ t('automations.subtitle') }}</p>
    </div>

    {{-- UPGRADE BANNER — nur für Free User --}}
    @if(!$isPro)
    <div class="bg-gradient-to-br from-indigo-50 to-purple-50 border border-indigo-200 rounded-2xl px-6 py-5 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div class="flex items-center gap-3.5">
            <div class="w-11 h-11 rounded-xl bg-indigo-600 flex items-center justify-center shrink-0">
                <x-heroicon-s-bolt class="w-5 h-5 text-white"/>
            </div>
            <div>
                <p class="text-[15px] font-semibold text-indigo-900">2 Automationen kostenlos verfügbar · Upgrade für alle {{ count($types) }}</p>
                <p class="text-[13px] text-indigo-600 mt-0.5">{{ t('automations.upgrade_hint', ['count' => count($types)]) }}</p>
            </div>
        </div>
        <a href="{{ route('subscription.index') }}"
           class="inline-flex items-center gap-2 px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-xl transition-colors shrink-0">
            {{ t('automations.upgrade_now') }}
            <x-heroicon-o-arrow-right class="w-4 h-4"/>
        </a>
    </div>
    @endif

    {{-- KOSTENLOS --}}
    <div>
        <h3 class="text-[11px] font-semibold text-gray-400 tracking-wider uppercase mb-3">{{ t('automations.section.free') }}</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
        @foreach($types as $type => $def)
            @if(!$def['is_free']) @continue @endif
            @php
                $record = $records[$type] ?? null;
                $active = $record?->active ?? false;
                $c      = $colorMap[$def['color']];
            @endphp
            <div class="bg-white border rounded-xl p-5 shadow-sm flex flex-col justify-between transition-all
                        {{ $active ? 'border-gray-200' : 'border-gray-100 opacity-75' }}">

                {{-- TOP --}}
                <div>
                    <div class="flex items-start justify-between gap-3">

                        {{-- Icon --}}
                        <div class="w-10 h-10 rounded-lg {{ $c['bg'] }} flex items-center justify-center shrink-0">
                            @if($def['icon'] === 'bell')
                                <x-heroicon-o-bell class="w-5 h-5 {{ $c['text'] }}"/>
                            @elseif($def['icon'] === 'sun')
                                <x-heroicon-o-sun class="w-5 h-5 {{ $c['text'] }}"/>
                            @elseif($def['icon'] === 'calendar-days')
                                <x-heroicon-o-calendar-days class="w-5 h-5 {{ $c['text'] }}"/>
                            @elseif($def['icon'] === 'clipboard-document-check')
                                <x-heroicon-o-clipboard-document-check class="w-5 h-5 {{ $c['text'] }}"/>
                            @elseif($def['icon'] === 'cake')
                                <x-heroicon-o-cake class="w-5 h-5 {{ $c['text'] }}"/>
                            @elseif($def['icon'] === 'clock')
                                <x-heroicon-o-clock class="w-5 h-5 {{ $c['text'] }}"/>
                            @elseif($def['icon'] === 'moon')
                                <x-heroicon-o-moon class="w-5 h-5 {{ $c['text'] }}"/>
                            @elseif($def['icon'] === 'user-group')
                                <x-heroicon-o-user-group class="w-5 h-5 {{ $c['text'] }}"/>
                            @elseif($def['icon'] === 'calendar')
                                <x-heroicon-o-calendar class="w-5 h-5 {{ $c['text'] }}"/>
                            @endif
                        </div>

                        {{-- Toggle --}}
                        <button wire:click="toggle('{{ $type }}')"
                                class="relative w-10 h-5.5 rounded-full shrink-0 transition-colors focus:outline-none mt-0.5
                                       {{ $active ? 'bg-indigo-500' : 'bg-gray-200' }}"
                                style="width:40px;height:22px">
                            <div class="absolute top-[3px] w-4 h-4 bg-white rounded-full shadow transition-all
                                        {{ $active ? 'left-[20px]' : 'left-[3px]' }}"></div>
                        </button>

                    </div>

                    <div class="mt-3">
                        <p class="font-medium text-gray-800 text-sm">{{ t("automations.type.{$type}.name") }}</p>
                        <p class="text-xs text-gray-400 mt-1 leading-relaxed">{{ t("automations.type.{$type}.description") }}</p>
                    </div>

                    {{-- Aktuelle Konfiguration --}}
                    @if($record)
                        <div class="mt-3 flex flex-wrap gap-1.5">
                            @if($type === 'event_reminder')
                                <span class="text-[10px] bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">
                                    {{ $record->cfg('minutes_before', 30) >= 60
                                        ? ($record->cfg('minutes_before') / 60) . ' ' . t('automations.hours_before')
                                        : $record->cfg('minutes_before', 30) . ' ' . t('automations.minutes_before') }}
                                </span>
                            @elseif($type === 'daily_agenda')
                                <span class="text-[10px] bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">
                                    {{ $record->cfg('send_time', '08:00') }} {{ t('automations.oclock') }}
                                </span>
                            @elseif($type === 'weekly_overview')
                                <span class="text-[10px] bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">
                                    {{ $dayLabels[$record->cfg('send_day', 1)] ?? t('automations.day.monday') }}, {{ $record->cfg('send_time', '08:00') }} {{ t('automations.oclock') }}
                                </span>
                            @elseif($type === 'event_followup')
                                <span class="text-[10px] bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">
                                    {{ $record->cfg('delay_minutes', 30) }} {{ t('automations.min_after') }}
                                </span>
                            @elseif($type === 'birthday_reminder')
                                <span class="text-[10px] bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">
                                    {{ $record->cfg('days_before', 7) == 0
                                        ? t('automations.before.today')
                                        : $record->cfg('days_before', 7) . ' ' . t('automations.days_before') }}
                                </span>
                            @elseif($type === 'no_activity_reminder')
                                <span class="text-[10px] bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">
                                    {{ t('automations.after_free_days') }} {{ $record->cfg('days_inactive', 3) }}
                                </span>
                            @elseif($type === 'daily_summary')
                                <span class="text-[10px] bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">
                                    {{ $record->cfg('send_time', '18:00') }} {{ t('automations.oclock') }}
                                </span>
                            @elseif($type === 'contact_followup')
                                <span class="text-[10px] bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">
                                    {{ t('automations.after_days') }} {{ $record->cfg('days_since_contact', 14) }}
                                </span>
                            @elseif($type === 'free_slots_report')
                                <span class="text-[10px] bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">
                                    {{ $dayLabels[$record->cfg('send_day', 7)] ?? t('automations.day.sunday') }}, {{ $record->cfg('send_time', '17:00') }} {{ t('automations.oclock') }}
                                </span>
                                <span class="text-[10px] bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">
                                    {{ t('automations.from_min') }} {{ $record->cfg('min_slot_minutes', 60) }}
                                </span>
                            @endif

                            @foreach($def['channels'] ?? ['push'] as $ch)
                                <span class="text-[10px] px-2 py-0.5 rounded-full font-medium
                                    {{ $ch === 'push' ? 'bg-indigo-50 text-indigo-500' : 'bg-green-50 text-green-600' }}">
                                    {{ $ch === 'push' ? 'Push' : 'E-Mail' }}
                                </span>
                            @endforeach

                            @if($record->last_run_at)
                                <span class="text-[10px] text-gray-400 px-1 py-0.5">
                                    {{ t('automations.last_run') }} {{ $record->last_run_at->diffForHumans() }}
                                </span>
                            @endif
                        </div>
                    @endif
                </div>

                {{-- FOOTER --}}
                <div class="flex items-center justify-between mt-5 pt-4 border-t border-gray-50">

                    <span class="text-[11px] font-medium px-2 py-0.5 rounded-full
                        {{ $active
                            ? 'bg-green-50 text-green-600 border border-green-200'
                            : 'bg-gray-100 text-gray-400' }}">
                        {{ $active ? t('common.active') : t('common.inactive') }}
                    </span>

                    <div class="flex items-center gap-2">
                        @if($record)
                            <button wire:click="delete('{{ $type }}')"
                                    wire:confirm="{{ t('automations.confirm_reset') }}"
                                    class="text-[11px] text-gray-400 hover:text-red-500 transition-colors">
                                {{ t('automations.reset') }}
                            </button>
                        @endif
                        <button wire:click="openPanel('{{ $type }}')"
                                class="text-[11px] font-medium text-indigo-600 hover:text-indigo-800 transition-colors border border-indigo-200 px-2.5 py-1 rounded-lg hover:bg-indigo-50">
                            {{ $record ? t('common.edit') : t('common.setup') }}
                        </button>
                    </div>

                </div>

            </div>
        @endforeach
        </div>
    </div>

    {{-- PRO --}}
    <div>
        <h3 class="text-[11px] font-semibold text-gray-400 tracking-wider uppercase mb-3">PRO</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
        @foreach($types as $type => $def)
            @if($def['is_free']) @continue @endif
            @php
                $record = $records[$type] ?? null;
                $active = $record?->active ?? false;
                $c      = $colorMap[$def['color']];
            @endphp

            @if(!$isPro)
            {{-- Gesperrte Pro Karte für Free User --}}
            <a href="{{ route('subscription.index') }}"
               class="bg-white border border-gray-100 rounded-xl p-5 shadow-sm opacity-70 hover:opacity-90 transition-all block">
                <div class="flex items-start justify-between gap-3">
                    <div class="w-10 h-10 rounded-lg {{ $c['bg'] }} flex items-center justify-center shrink-0">
                        @if($def['icon'] === 'bell')                        <x-heroicon-o-bell class="w-5 h-5 {{ $c['text'] }}"/>
                        @elseif($def['icon'] === 'sun')                     <x-heroicon-o-sun class="w-5 h-5 {{ $c['text'] }}"/>
                        @elseif($def['icon'] === 'calendar-days')           <x-heroicon-o-calendar-days class="w-5 h-5 {{ $c['text'] }}"/>
                        @elseif($def['icon'] === 'clipboard-document-check')<x-heroicon-o-clipboard-document-check class="w-5 h-5 {{ $c['text'] }}"/>
                        @elseif($def['icon'] === 'cake')                    <x-heroicon-o-cake class="w-5 h-5 {{ $c['text'] }}"/>
                        @elseif($def['icon'] === 'clock')                   <x-heroicon-o-clock class="w-5 h-5 {{ $c['text'] }}"/>
                        @elseif($def['icon'] === 'moon')                    <x-heroicon-o-moon class="w-5 h-5 {{ $c['text'] }}"/>
                        @elseif($def['icon'] === 'user-group')              <x-heroicon-o-user-group class="w-5 h-5 {{ $c['text'] }}"/>
                        @elseif($def['icon'] === 'calendar')                <x-heroicon-o-calendar class="w-5 h-5 {{ $c['text'] }}"/>
                        @endif
                    </div>
                    <div class="flex items-center gap-2">
                        <div class="inline-flex items-center gap-1 bg-indigo-50 rounded-md px-2 py-0.5">
                            <x-heroicon-o-lock-closed class="w-2.5 h-2.5 text-indigo-600"/>
                            <span class="text-[10px] font-medium text-indigo-600">Pro</span>
                        </div>
                        <div class="relative shrink-0" style="width:40px;height:22px">
                            <div class="w-full h-full rounded-full bg-gray-200"></div>
                            <div class="absolute top-[3px] left-[3px] w-4 h-4 bg-white rounded-full shadow"></div>
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <p class="font-medium text-gray-800 text-sm">{{ t("automations.type.{$type}.name") }}</p>
                    <p class="text-xs text-gray-400 mt-1 leading-relaxed">{{ t("automations.type.{$type}.description") }}</p>
                </div>
                <div class="flex items-center justify-between mt-5 pt-4 border-t border-gray-50">
                    <span class="text-[11px] font-medium px-2 py-0.5 rounded-full bg-gray-100 text-gray-400">{{ t('common.inactive') }}</span>
                    <span class="text-[11px] font-medium text-indigo-500 border border-indigo-100 px-2.5 py-1 rounded-lg">Freischalten</span>
                </div>
            </a>
            @else
            {{-- Aktive Pro Karte --}}
            <div class="bg-white border rounded-xl p-5 shadow-sm flex flex-col justify-between transition-all
                        {{ $active ? 'border-gray-200' : 'border-gray-100 opacity-75' }}">

                {{-- TOP --}}
                <div>
                    <div class="flex items-start justify-between gap-3">

                        {{-- Icon --}}
                        <div class="w-10 h-10 rounded-lg {{ $c['bg'] }} flex items-center justify-center shrink-0">
                            @if($def['icon'] === 'bell')
                                <x-heroicon-o-bell class="w-5 h-5 {{ $c['text'] }}"/>
                            @elseif($def['icon'] === 'sun')
                                <x-heroicon-o-sun class="w-5 h-5 {{ $c['text'] }}"/>
                            @elseif($def['icon'] === 'calendar-days')
                                <x-heroicon-o-calendar-days class="w-5 h-5 {{ $c['text'] }}"/>
                            @elseif($def['icon'] === 'clipboard-document-check')
                                <x-heroicon-o-clipboard-document-check class="w-5 h-5 {{ $c['text'] }}"/>
                            @elseif($def['icon'] === 'cake')
                                <x-heroicon-o-cake class="w-5 h-5 {{ $c['text'] }}"/>
                            @elseif($def['icon'] === 'clock')
                                <x-heroicon-o-clock class="w-5 h-5 {{ $c['text'] }}"/>
                            @elseif($def['icon'] === 'moon')
                                <x-heroicon-o-moon class="w-5 h-5 {{ $c['text'] }}"/>
                            @elseif($def['icon'] === 'user-group')
                                <x-heroicon-o-user-group class="w-5 h-5 {{ $c['text'] }}"/>
                            @elseif($def['icon'] === 'calendar')
                                <x-heroicon-o-calendar class="w-5 h-5 {{ $c['text'] }}"/>
                            @endif
                        </div>

                        {{-- Toggle --}}
                        <button wire:click="toggle('{{ $type }}')"
                                class="relative w-10 h-5.5 rounded-full shrink-0 transition-colors focus:outline-none mt-0.5
                                       {{ $active ? 'bg-indigo-500' : 'bg-gray-200' }}"
                                style="width:40px;height:22px">
                            <div class="absolute top-[3px] w-4 h-4 bg-white rounded-full shadow transition-all
                                        {{ $active ? 'left-[20px]' : 'left-[3px]' }}"></div>
                        </button>

                    </div>

                    <div class="mt-3">
                        <p class="font-medium text-gray-800 text-sm">{{ t("automations.type.{$type}.name") }}</p>
                        <p class="text-xs text-gray-400 mt-1 leading-relaxed">{{ t("automations.type.{$type}.description") }}</p>
                    </div>

                    {{-- Aktuelle Konfiguration --}}
                    @if($record)
                        <div class="mt-3 flex flex-wrap gap-1.5">
                            @if($type === 'event_reminder')
                                <span class="text-[10px] bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">
                                    {{ $record->cfg('minutes_before', 30) >= 60
                                        ? ($record->cfg('minutes_before') / 60) . ' ' . t('automations.hours_before')
                                        : $record->cfg('minutes_before', 30) . ' ' . t('automations.minutes_before') }}
                                </span>
                            @elseif($type === 'daily_agenda')
                                <span class="text-[10px] bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">
                                    {{ $record->cfg('send_time', '08:00') }} {{ t('automations.oclock') }}
                                </span>
                            @elseif($type === 'weekly_overview')
                                <span class="text-[10px] bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">
                                    {{ $dayLabels[$record->cfg('send_day', 1)] ?? t('automations.day.monday') }}, {{ $record->cfg('send_time', '08:00') }} {{ t('automations.oclock') }}
                                </span>
                            @elseif($type === 'event_followup')
                                <span class="text-[10px] bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">
                                    {{ $record->cfg('delay_minutes', 30) }} {{ t('automations.min_after') }}
                                </span>
                            @elseif($type === 'birthday_reminder')
                                <span class="text-[10px] bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">
                                    {{ $record->cfg('days_before', 7) == 0
                                        ? t('automations.before.today')
                                        : $record->cfg('days_before', 7) . ' ' . t('automations.days_before') }}
                                </span>
                            @elseif($type === 'no_activity_reminder')
                                <span class="text-[10px] bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">
                                    {{ t('automations.after_free_days') }} {{ $record->cfg('days_inactive', 3) }}
                                </span>
                            @elseif($type === 'daily_summary')
                                <span class="text-[10px] bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">
                                    {{ $record->cfg('send_time', '18:00') }} {{ t('automations.oclock') }}
                                </span>
                            @elseif($type === 'contact_followup')
                                <span class="text-[10px] bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">
                                    {{ t('automations.after_days') }} {{ $record->cfg('days_since_contact', 14) }}
                                </span>
                            @elseif($type === 'free_slots_report')
                                <span class="text-[10px] bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">
                                    {{ $dayLabels[$record->cfg('send_day', 7)] ?? t('automations.day.sunday') }}, {{ $record->cfg('send_time', '17:00') }} {{ t('automations.oclock') }}
                                </span>
                                <span class="text-[10px] bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">
                                    {{ t('automations.from_min') }} {{ $record->cfg('min_slot_minutes', 60) }}
                                </span>
                            @endif

                            @foreach($def['channels'] ?? ['push'] as $ch)
                                <span class="text-[10px] px-2 py-0.5 rounded-full font-medium
                                    {{ $ch === 'push' ? 'bg-indigo-50 text-indigo-500' : 'bg-green-50 text-green-600' }}">
                                    {{ $ch === 'push' ? 'Push' : 'E-Mail' }}
                                </span>
                            @endforeach

                            @if($record->last_run_at)
                                <span class="text-[10px] text-gray-400 px-1 py-0.5">
                                    {{ t('automations.last_run') }} {{ $record->last_run_at->diffForHumans() }}
                                </span>
                            @endif
                        </div>
                    @endif
                </div>

                {{-- FOOTER --}}
                <div class="flex items-center justify-between mt-5 pt-4 border-t border-gray-50">

                    <span class="text-[11px] font-medium px-2 py-0.5 rounded-full
                        {{ $active
                            ? 'bg-green-50 text-green-600 border border-green-200'
                            : 'bg-gray-100 text-gray-400' }}">
                        {{ $active ? t('common.active') : t('common.inactive') }}
                    </span>

                    <div class="flex items-center gap-2">
                        @if($record)
                            <button wire:click="delete('{{ $type }}')"
                                    wire:confirm="{{ t('automations.confirm_reset') }}"
                                    class="text-[11px] text-gray-400 hover:text-red-500 transition-colors">
                                {{ t('automations.reset') }}
                            </button>
                        @endif
                        <button wire:click="openPanel('{{ $type }}')"
                                class="text-[11px] font-medium text-indigo-600 hover:text-indigo-800 transition-colors border border-indigo-200 px-2.5 py-1 rounded-lg hover:bg-indigo-50">
                            {{ $record ? t('common.edit') : t('common.setup') }}
                        </button>
                    </div>

                </div>

            </div>
            @endif {{-- Ende: isPro --}}
        @endforeach
        </div>
    </div>


    {{-- ══════════════════════════════════════════════════════════════════ --}}
    {{-- SLIDE-IN PANEL                                                    --}}
    {{-- ══════════════════════════════════════════════════════════════════ --}}

    {{-- Backdrop --}}
    <div x-show="panelOpen"
         x-cloak
         x-transition.opacity
         class="fixed inset-0 z-40 bg-black/10"
         x-on:click="$wire.closePanel()"></div>

    {{-- Panel --}}
    <div x-show="panelOpen"
         x-cloak
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="translate-x-full"
         x-transition:enter-end="translate-x-0"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="translate-x-0"
         x-transition:leave-end="translate-x-full"
         class="fixed top-0 right-0 h-full w-[400px] z-50 bg-white border-l border-gray-100 shadow-xl flex flex-col">

        @if($activeType && isset($types[$activeType]))
            @php
                $def = $types[$activeType];
                $c   = $colorMap[$def['color']];
            @endphp

            {{-- Panel Header --}}
            <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100 shrink-0">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded-lg {{ $c['bg'] }} flex items-center justify-center">
                        @if($def['icon'] === 'bell')
                            <x-heroicon-o-bell class="w-4 h-4 {{ $c['text'] }}"/>
                        @elseif($def['icon'] === 'sun')
                            <x-heroicon-o-sun class="w-4 h-4 {{ $c['text'] }}"/>
                        @elseif($def['icon'] === 'calendar-days')
                            <x-heroicon-o-calendar-days class="w-4 h-4 {{ $c['text'] }}"/>
                        @elseif($def['icon'] === 'clipboard-document-check')
                            <x-heroicon-o-clipboard-document-check class="w-4 h-4 {{ $c['text'] }}"/>
                        @elseif($def['icon'] === 'cake')
                            <x-heroicon-o-cake class="w-4 h-4 {{ $c['text'] }}"/>
                        @elseif($def['icon'] === 'clock')
                            <x-heroicon-o-clock class="w-4 h-4 {{ $c['text'] }}"/>
                        @elseif($def['icon'] === 'moon')
                            <x-heroicon-o-moon class="w-4 h-4 {{ $c['text'] }}"/>
                        @elseif($def['icon'] === 'user-group')
                            <x-heroicon-o-user-group class="w-4 h-4 {{ $c['text'] }}"/>
                        @elseif($def['icon'] === 'calendar')
                            <x-heroicon-o-calendar class="w-4 h-4 {{ $c['text'] }}"/>
                        @endif
                    </div>
                    <div>
                        <p class="font-semibold text-gray-800 text-sm">{{ t("automations.type.{$activeType}.name") }}</p>
                        <p class="text-xs text-gray-400">{{ t('automations.configure') }}</p>
                    </div>
                </div>
                <button wire:click="closePanel"
                        class="w-7 h-7 rounded-md flex items-center justify-center text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors">
                    <x-heroicon-o-x-mark class="w-4 h-4"/>
                </button>
            </div>

            {{-- Panel Body --}}
            <div class="flex-1 overflow-y-auto px-5 py-5 space-y-5">

                {{-- KANAL BADGE --}}
                <div class="flex items-center gap-2">
                    <span class="text-xs text-gray-400">Kanal:</span>
                    @foreach($def['channels'] ?? ['push'] as $ch)
                        <span class="text-xs font-medium px-2.5 py-0.5 rounded-full
                            {{ $ch === 'push' ? 'bg-indigo-50 text-indigo-600' : 'bg-green-50 text-green-600' }}">
                            {{ $ch === 'push' ? 'Push' : 'E-Mail' }}
                        </span>
                    @endforeach
                </div>

                {{-- TYP-SPEZIFISCHE FELDER --}}

                @if($activeType === 'event_reminder')
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">{{ t('automations.how_early') }}</label>
                        <div class="grid grid-cols-2 gap-2">
                            @foreach([15 => t('automations.time.15min'), 30 => t('automations.time.30min'), 60 => t('automations.time.1h'), 120 => t('automations.time.2h'), 1440 => t('automations.time.1d')] as $min => $label)
                                <button wire:click="$set('f_minutes_before', '{{ $min }}')"
                                        class="py-2.5 text-xs font-medium rounded-lg border transition-all text-center
                                            {{ (int)$f_minutes_before === $min
                                                ? 'border-indigo-400 bg-indigo-50 text-indigo-700'
                                                : 'border-gray-200 text-gray-500 hover:bg-gray-50' }}">
                                    {{ $label }}
                                </button>
                            @endforeach
                        </div>
                    </div>
                @endif

                @if($activeType === 'daily_agenda')
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">{{ t('automations.time_label') }}</label>
                        <input type="time"
                               wire:model="f_send_time"
                               class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-400">
                    </div>
                @endif

                @if($activeType === 'weekly_overview')
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">{{ t('automations.weekday') }}</label>
                        <select wire:model="f_send_day"
                                class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-400">
                            @foreach([1=>t('automations.day.monday'),2=>t('automations.day.tuesday'),3=>t('automations.day.wednesday'),4=>t('automations.day.thursday'),5=>t('automations.day.friday'),6=>t('automations.day.saturday'),7=>t('automations.day.sunday')] as $d => $dn)
                                <option value="{{ $d }}">{{ $dn }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">{{ t('automations.time_label') }}</label>
                        <input type="time"
                               wire:model="f_send_time"
                               class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-400">
                    </div>
                @endif

                @if($activeType === 'event_followup')
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">{{ t('automations.delay_after') }}</label>
                        <div class="grid grid-cols-3 gap-2">
                            @foreach([0 => t('automations.delay.immediate'), 30 => t('automations.delay.30min'), 60 => t('automations.delay.1h')] as $min => $label)
                                <button wire:click="$set('f_delay_minutes', '{{ $min }}')"
                                        class="py-2.5 text-xs font-medium rounded-lg border transition-all text-center
                                            {{ (int)$f_delay_minutes === $min
                                                ? 'border-indigo-400 bg-indigo-50 text-indigo-700'
                                                : 'border-gray-200 text-gray-500 hover:bg-gray-50' }}">
                                    {{ $label }}
                                </button>
                            @endforeach
                        </div>
                    </div>
                @endif

                @if($activeType === 'birthday_reminder')
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">{{ t('automations.days_before_label') }}</label>
                        <div class="grid grid-cols-2 gap-2">
                            @foreach([0 => t('automations.before.today'), 1 => t('automations.before.1d'), 3 => t('automations.before.3d'), 7 => t('automations.before.1w')] as $days => $label)
                                <button wire:click="$set('f_days_before', '{{ $days }}')"
                                        class="py-2.5 text-xs font-medium rounded-lg border transition-all text-center
                                            {{ (int)$f_days_before === $days
                                                ? 'border-indigo-400 bg-indigo-50 text-indigo-700'
                                                : 'border-gray-200 text-gray-500 hover:bg-gray-50' }}">
                                    {{ $label }}
                                </button>
                            @endforeach
                        </div>
                    </div>
                @endif

                @if($activeType === 'no_activity_reminder')
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">{{ t('automations.free_period') }}</label>
                        <div class="grid grid-cols-3 gap-2">
                            @foreach([1 => t('automations.period.1d'), 3 => t('automations.period.3d'), 7 => t('automations.period.7d')] as $days => $label)
                                <button wire:click="$set('f_days_inactive', '{{ $days }}')"
                                        class="py-2.5 text-xs font-medium rounded-lg border transition-all text-center
                                            {{ (int)$f_days_inactive === $days
                                                ? 'border-indigo-400 bg-indigo-50 text-indigo-700'
                                                : 'border-gray-200 text-gray-500 hover:bg-gray-50' }}">
                                    {{ $label }}
                                </button>
                            @endforeach
                        </div>
                    </div>
                @endif

                @if($activeType === 'daily_summary')
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">{{ t('automations.time_label') }}</label>
                        <input type="time"
                               wire:model="f_send_time"
                               class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-400">
                    </div>
                @endif

                @if($activeType === 'contact_followup')
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">{{ t('automations.reminder_after') }}</label>
                        <div class="grid grid-cols-2 gap-2">
                            @foreach([7 => t('automations.after.1w'), 14 => t('automations.after.2w'), 30 => t('automations.after.1m'), 90 => t('automations.after.3m')] as $days => $label)
                                <button wire:click="$set('f_days_since_contact', '{{ $days }}')"
                                        class="py-2.5 text-xs font-medium rounded-lg border transition-all text-center
                                            {{ (int)$f_days_since_contact === $days
                                                ? 'border-indigo-400 bg-indigo-50 text-indigo-700'
                                                : 'border-gray-200 text-gray-500 hover:bg-gray-50' }}">
                                    {{ $label }}
                                </button>
                            @endforeach
                        </div>
                    </div>
                @endif

                @if($activeType === 'free_slots_report')
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">{{ t('automations.weekday') }}</label>
                        <select wire:model="f_send_day"
                                class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-400">
                            @foreach([1=>t('automations.day.monday'),2=>t('automations.day.tuesday'),3=>t('automations.day.wednesday'),4=>t('automations.day.thursday'),5=>t('automations.day.friday'),6=>t('automations.day.saturday'),7=>t('automations.day.sunday')] as $d => $dn)
                                <option value="{{ $d }}">{{ $dn }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">{{ t('automations.time_label') }}</label>
                        <input type="time"
                               wire:model="f_send_time"
                               class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-400">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">{{ t('automations.min_slot') }}</label>
                        <div class="grid grid-cols-3 gap-2">
                            @foreach([30 => t('automations.slot.30min'), 60 => t('automations.slot.1h'), 120 => t('automations.slot.2h')] as $min => $label)
                                <button wire:click="$set('f_min_slot_minutes', '{{ $min }}')"
                                        class="py-2.5 text-xs font-medium rounded-lg border transition-all text-center
                                            {{ (int)$f_min_slot_minutes === $min
                                                ? 'border-indigo-400 bg-indigo-50 text-indigo-700'
                                                : 'border-gray-200 text-gray-500 hover:bg-gray-50' }}">
                                    {{ $label }}
                                </button>
                            @endforeach
                        </div>
                    </div>
                @endif

                {{-- Beschreibung --}}
                <div class="bg-gray-50 rounded-xl px-4 py-3">
                    <div class="flex items-start gap-2">
                        <x-heroicon-o-information-circle class="w-4 h-4 text-gray-400 mt-0.5 shrink-0"/>
                        <p class="text-xs text-gray-500 leading-relaxed">{{ t("automations.type.{$activeType}.description") }}</p>
                    </div>
                </div>

            </div>

            {{-- Panel Footer --}}
            <div class="shrink-0 border-t border-gray-100 px-5 py-4 flex justify-between items-center bg-white">
                <button wire:click="closePanel"
                        class="px-3 py-1.5 text-xs rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 transition-colors">
                    {{ t('common.cancel') }}
                </button>
                <button wire:click="save"
                        class="px-4 py-1.5 text-xs rounded-lg bg-indigo-600 text-white font-medium hover:bg-indigo-700 transition-colors shadow-sm flex items-center gap-1.5">
                    <x-heroicon-o-check class="w-3.5 h-3.5"/>
                    {{ t('automations.save_activate') }}
                </button>
            </div>
        @endif

    </div>

</div>
