<div>
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-800">
            {{ $template ? __('تعديل قالب الإشعار') : __('إنشاء قالب إشعار') }}
        </h1>
        <a href="{{ route('notifications.templates') }}" wire:navigate
           class="inline-flex items-center gap-2 px-4 py-2.5 sm:py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-medium w-full sm:w-auto justify-center">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
            {{ __('رجوع') }}
        </a>
    </div>

    <form wire:submit="save" class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
            {{-- Event Type --}}
            <div>
                <label for="event_type" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع الحدث') }} <span class="text-red-500">*</span></label>
                <select wire:model.live="event_type" id="event_type"
                        class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                    <option value="">{{ __('اختر نوع الحدث') }}</option>
                    @foreach($this->eventTypes as $value => $label)
                    <option value="{{ $value }}">{{ $label }}</option>
                    @endforeach
                </select>
                @error('event_type') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
            </div>

            {{-- Channel --}}
            <div>
                <label for="channel" class="block text-sm font-medium text-gray-700 mb-1">{{ __('القناة') }} <span class="text-red-500">*</span></label>
                <select wire:model="channel" id="channel"
                        class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                    <option value="">{{ __('اختر القناة') }}</option>
                    @foreach($channels as $ch)
                    <option value="{{ $ch->value }}">{{ $ch->label() }}</option>
                    @endforeach
                </select>
                @error('channel') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
            </div>

            {{-- Subject (for email) --}}
            <div class="sm:col-span-2">
                <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الموضوع') }} <span class="text-xs text-gray-400">({{ __('للبريد الإلكتروني') }})</span></label>
                <input type="text" wire:model="subject" id="subject"
                       placeholder="{{ __('موضوع الإشعار (يدعم {{متغيرات}})') }}"
                       class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                @error('subject') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
            </div>

            {{-- Body --}}
            <div class="sm:col-span-2">
                <label for="body" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نص الإشعار') }} <span class="text-red-500">*</span></label>
                <textarea wire:model="body" id="body" rows="5"
                          placeholder="{{ __('نص الإشعار — استخدم {{اسم_المتغير}} للقيم الديناميكية') }}"
                          class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"></textarea>
                @error('body') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
            </div>

            {{-- Available Variables Hint --}}
            @if(!empty($this->availableVariables))
            <div class="sm:col-span-2">
                <div class="p-3 bg-blue-50 border border-blue-200 rounded-lg">
                    <p class="text-xs font-medium text-blue-700 mb-1">{{ __('المتغيرات المتاحة لهذا الحدث:') }}</p>
                    <div class="flex flex-wrap gap-2">
                        @foreach($this->availableVariables as $var)
                        <code class="px-2 py-0.5 bg-blue-100 text-blue-800 rounded text-xs" dir="ltr">{{ '{{' . $var . '}}' }}</code>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif

            {{-- Variables (comma-separated) --}}
            <div class="sm:col-span-2">
                <label for="variables_text" class="block text-sm font-medium text-gray-700 mb-1">{{ __('المتغيرات المطلوبة') }} <span class="text-xs text-gray-400">({{ __('مفصولة بفاصلة') }})</span></label>
                <input type="text" wire:model="variables_text" id="variables_text" dir="ltr"
                       placeholder="participant_name, amount, due_date"
                       class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                @error('variables_text') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                <p class="mt-1 text-xs text-gray-500">{{ __('أسماء المتغيرات التي يجب توفيرها عند إرسال هذا الإشعار') }}</p>
            </div>

            {{-- Locale --}}
            <div>
                <label for="locale" class="block text-sm font-medium text-gray-700 mb-1">{{ __('اللغة') }}</label>
                <select wire:model="locale" id="locale"
                        class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                    <option value="ar">{{ __('العربية') }}</option>
                    <option value="en">{{ __('English') }}</option>
                </select>
                @error('locale') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
            </div>

            {{-- Active --}}
            <div class="min-h-[44px] flex items-center gap-3 pt-6">
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" wire:model="is_active" class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-100 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                </label>
                <span class="text-sm font-medium text-gray-700">{{ __('القالب نشط') }}</span>
            </div>
        </div>

        {{-- Submit --}}
        <div class="mt-6 flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3 pt-4 border-t border-gray-200">
            <a href="{{ route('notifications.templates') }}" wire:navigate
               class="text-center px-4 sm:px-6 py-2.5 text-gray-700 rounded-lg hover:bg-gray-100 text-sm font-medium">
                {{ __('إلغاء') }}
            </a>
            <button type="submit" wire:loading.attr="disabled" wire:target="save"
                    class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed">
                <span wire:loading.remove wire:target="save">{{ __('حفظ') }}</span>
                <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
            </button>
        </div>
    </form>
</div>
