<x-admin-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200 leading-tight">
                <i class="fas fa-file-alt mr-2"></i>{{ __('Adaugă Șablon Email Nou') }}
            </h2>
            <a href="{{ route('admin.settings.index') }}" 
               class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded-lg transition">
                <i class="fas fa-arrow-left mr-2"></i>Înapoi la Setări
            </a>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            @if ($errors->any())
                <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6 rounded" role="alert">
                    <p class="font-bold">Erori!</p>
                    <ul class="list-disc list-inside">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <form method="POST" action="{{ route('admin.email-templates.store') }}">
                        @csrf

                        <!-- Key -->
                        <div class="mb-6">
                            <label for="key" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Cheie Unică <span class="text-red-500">*</span>
                            </label>
                            <input type="text" 
                                   name="key" 
                                   id="key" 
                                   value="{{ old('key') }}"
                                   placeholder="ex: welcome_email, verify_email, reset_password"
                                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                                   required>
                            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                                Identificator unic pentru șablon (folosit în cod). Folosește snake_case.
                            </p>
                        </div>

                        <!-- Name -->
                        <div class="mb-6">
                            <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Nume Afișat <span class="text-red-500">*</span>
                            </label>
                            <input type="text" 
                                   name="name" 
                                   id="name" 
                                   value="{{ old('name') }}"
                                   placeholder="ex: Email Bun Venit"
                                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                                   required>
                        </div>

                        <!-- Category -->
                        <div class="mb-6">
                            <label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Categorie <span class="text-red-500">*</span>
                            </label>
                            <select name="category" 
                                    id="category"
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                                    required>
                                <option value="system" {{ old('category') == 'system' ? 'selected' : '' }}>System</option>
                                <option value="notification" {{ old('category') == 'notification' ? 'selected' : '' }}>Notification</option>
                                <option value="alert" {{ old('category') == 'alert' ? 'selected' : '' }}>Alert</option>
                            </select>
                        </div>

                        <!-- Subject -->
                        <div class="mb-6">
                            <label for="subject" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Subiect Email <span class="text-red-500">*</span>
                            </label>
                            <input type="text" 
                                   name="subject" 
                                   id="subject" 
                                   value="{{ old('subject') }}"
                                   placeholder="ex: Bine ai venit la {app_name}!"
                                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                                   required>
                            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                                Poți folosi variabile: {name}, {email}, {app_name}, etc.
                            </p>
                        </div>

                        <!-- Body -->
                        <div class="mb-6">
                            <label for="body" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Conținut Email <span class="text-red-500">*</span>
                            </label>
                            <textarea name="body" 
                                      id="body" 
                                      rows="15"
                                      class="mt-1 block w-full"
                                      required>{{ old('body') }}</textarea>
                            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                                <strong>Variabile disponibile:</strong> {name}, {email}, {verification_url}, {reset_url}, {app_name}, {app_url}, {domain}, {nameservers}
                            </p>
                        </div>

                        <!-- Description -->
                        <div class="mb-6">
                            <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Descriere
                            </label>
                            <textarea name="description" 
                                      id="description" 
                                      rows="3"
                                      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                                      placeholder="Descriere scurtă despre când se folosește acest șablon">{{ old('description') }}</textarea>
                        </div>

                        <!-- Is Active -->
                        <div class="mb-6">
                            <label class="flex items-center">
                                <input type="checkbox" 
                                       name="is_active" 
                                       value="1"
                                       {{ old('is_active', true) ? 'checked' : '' }}
                                       class="rounded border-gray-300 text-orange-600 shadow-sm focus:border-orange-500 focus:ring-orange-500 dark:bg-gray-700 dark:border-gray-600">
                                <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Șablon activ</span>
                            </label>
                        </div>

                        <!-- Buttons -->
                        <div class="flex items-center justify-end space-x-3 border-t border-gray-200 dark:border-gray-700 pt-6">
                            <a href="{{ route('admin.settings.index') }}" 
                               class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-6 rounded-lg transition">
                                <i class="fas fa-times mr-2"></i>Anulează
                            </a>
                            <button type="submit" 
                                    class="bg-orange-600 hover:bg-orange-700 text-white font-bold py-2 px-6 rounded-lg transition">
                                <i class="fas fa-save mr-2"></i>Salvează Șablonul
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script src="https://cdn.tiny.cloud/1/moy7o4x81alh6dv35ad8aaxxyekca0niyqdckco05kjpyjwz/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
    <script>
        tinymce.init({
            selector: '#body',
            height: 500,
            menubar: true,
            plugins: [
                'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
                'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
                'insertdatetime', 'media', 'table', 'help', 'wordcount'
            ],
            toolbar: 'undo redo | blocks | bold italic forecolor backcolor | ' +
                     'alignleft aligncenter alignright alignjustify | ' +
                     'bullist numlist outdent indent | removeformat | code | help',
            content_style: 'body { font-family: Arial, sans-serif; font-size: 14px; }',
            branding: false,
            promotion: false,
            setup: function(editor) {
                // Adaugă buton pentru variabile
                editor.ui.registry.addMenuButton('variables', {
                    text: 'Variabile',
                    icon: 'template',
                    fetch: function(callback) {
                        var items = [
                            {
                                type: 'menuitem',
                                text: '{name} - Nume utilizator',
                                onAction: function() {
                                    editor.insertContent('{name}');
                                }
                            },
                            {
                                type: 'menuitem',
                                text: '{email} - Email utilizator',
                                onAction: function() {
                                    editor.insertContent('{email}');
                                }
                            },
                            {
                                type: 'menuitem',
                                text: '{app_name} - Nume aplicație',
                                onAction: function() {
                                    editor.insertContent('{app_name}');
                                }
                            },
                            {
                                type: 'menuitem',
                                text: '{app_url} - URL aplicație',
                                onAction: function() {
                                    editor.insertContent('{app_url}');
                                }
                            },
                            {
                                type: 'menuitem',
                                text: '{verification_url} - Link verificare',
                                onAction: function() {
                                    editor.insertContent('{verification_url}');
                                }
                            },
                            {
                                type: 'menuitem',
                                text: '{reset_url} - Link resetare parolă',
                                onAction: function() {
                                    editor.insertContent('{reset_url}');
                                }
                            },
                            {
                                type: 'menuitem',
                                text: '{domain} - Domeniu DNS',
                                onAction: function() {
                                    editor.insertContent('{domain}');
                                }
                            },
                            {
                                type: 'menuitem',
                                text: '{nameservers} - Nameservere',
                                onAction: function() {
                                    editor.insertContent('{nameservers}');
                                }
                            }
                        ];
                        callback(items);
                    }
                });
            },
            toolbar: 'undo redo | blocks | bold italic forecolor backcolor | ' +
                     'alignleft aligncenter alignright alignjustify | ' +
                     'bullist numlist outdent indent | link image | variables | code | help'
        });
    </script>
    @endpush
</x-admin-layout>
