@extends('layouts.app')

@section('title', 'Yeni Email Şablonu')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <div class="max-w-4xl">
        <div class="mb-6">
            <a href="{{ route('email-templates.index') }}" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:text-gray-300">
                <i class="fas fa-arrow-left"></i> Email şablonlarına dön
            </a>
        </div>

        <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
            <div class="px-4 py-5 sm:p-6">
                <h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-6">Yeni Email Şablonu</h2>

                <form action="{{ route('email-templates.store') }}" method="POST">
                    @csrf

                    <div class="grid grid-cols-1 gap-6">
                        <!-- Name -->
                        <div>
                            <label for="name" class="flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                <i class="fas fa-tag text-indigo-600"></i>
                                <span>Şablon Adı <span class="text-red-500">*</span></span>
                            </label>
                            <div class="relative">
                                <input type="text" name="name" id="name" value="{{ old('name') }}" required
                                       placeholder="Örn: Hoş Geldin Emaili"
                                       class="block w-full pl-10 pr-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fas fa-file-alt text-gray-400"></i>
                                </div>
                            </div>
                            @error('name')
                            <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </p>
                            @enderror
                        </div>

                        <!-- Slug -->
                        <div>
                            <label for="slug" class="flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                <i class="fas fa-link text-indigo-600"></i>
                                <span>Slug</span>
                            </label>
                            <div class="relative">
                                <input type="text" name="slug" id="slug" value="{{ old('slug') }}"
                                       placeholder="Otomatik oluşturulur (boş bırakın)"
                                       class="block w-full pl-10 pr-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fas fa-code text-gray-400"></i>
                                </div>
                            </div>
                            <p class="mt-2 text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1">
                                <i class="fas fa-info-circle"></i>
                                Boş bırakılırsa otomatik oluşturulur
                            </p>
                            @error('slug')
                            <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </p>
                            @enderror
                        </div>

                        <!-- Category and Type Row -->
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                            <!-- Category -->
                            <div>
                                <label for="category" class="flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                    <i class="fas fa-folder text-indigo-600"></i>
                                    <span>Kategori</span>
                                </label>
                                <div class="relative">
                                    <select name="category" id="category" 
                                            class="block w-full pl-10 pr-10 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200 appearance-none">
                                        <option value="">Kategori Seçin</option>
                                        @foreach($categories as $key => $label)
                                        <option value="{{ $key }}" {{ old('category') === $key ? 'selected' : '' }}>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fas fa-tags text-gray-400"></i>
                                    </div>
                                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                        <i class="fas fa-chevron-down text-gray-400"></i>
                                    </div>
                                </div>
                            </div>

                            <!-- Type -->
                            <div>
                                <label for="type" class="flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                    <i class="fas fa-code text-indigo-600"></i>
                                    <span>Tip <span class="text-red-500">*</span></span>
                                </label>
                                <div class="relative">
                                    <select name="type" id="type" required
                                            class="block w-full pl-10 pr-10 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200 appearance-none">
                                        @foreach($types as $key => $label)
                                        <option value="{{ $key }}" {{ old('type', 'markdown') === $key ? 'selected' : '' }}>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fas fa-file-code text-gray-400"></i>
                                    </div>
                                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                        <i class="fas fa-chevron-down text-gray-400"></i>
                                    </div>
                                </div>
                                @error('type')
                                <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                                    <i class="fas fa-exclamation-circle"></i>
                                    {{ $message }}
                                </p>
                                @enderror
                            </div>
                        </div>

                        <!-- Subject -->
                        <div>
                            <label for="subject" class="flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                <i class="fas fa-envelope-open-text text-indigo-600"></i>
                                <span>Email Konusu <span class="text-red-500">*</span></span>
                            </label>
                            <div class="relative">
                                <input type="text" name="subject" id="subject" value="{{ old('subject') }}" required
                                       placeholder="Örn: Hoş geldiniz {name}!"
                                       class="block w-full pl-10 pr-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fas fa-heading text-gray-400"></i>
                                </div>
                            </div>
                            <p class="mt-2 text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1">
                                <i class="fas fa-info-circle"></i>
                                Değişkenler için <code class="bg-gray-100 px-1 py-0.5 rounded">{variable_name}</code> formatını kullanın
                            </p>
                            @error('subject')
                            <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </p>
                            @enderror
                        </div>

                        <!-- Description -->
                        <div>
                            <label for="description" class="flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                <i class="fas fa-align-left text-indigo-600"></i>
                                <span>Açıklama</span>
                            </label>
                            <textarea name="description" id="description" rows="3"
                                      placeholder="Bu şablonun ne için kullanıldığını açıklayın..."
                                      class="block w-full px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200 resize-none">{{ old('description') }}</textarea>
                        </div>

                        <!-- Body -->
                        <div>
                            <label for="body" class="flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                <i class="fas fa-file-alt text-indigo-600"></i>
                                <span>Email İçeriği <span class="text-red-500">*</span></span>
                            </label>
                            <div class="relative">
                                <textarea name="body" id="body" rows="15" required
                                          placeholder="Email içeriğinizi buraya yazın...&#10;&#10;Örnek:&#10;Merhaba {name},&#10;&#10;Hoş geldiniz!&#10;&#10;Saygılarımızla..."
                                          class="block w-full px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200 font-mono resize-none">{{ old('body') }}</textarea>
                            </div>
                            <p class="mt-2 text-xs text-gray-500 dark:text-gray-400 flex items-start gap-1">
                                <i class="fas fa-info-circle mt-0.5"></i>
                                <span>
                                    Değişkenler için <code class="bg-gray-100 px-1 py-0.5 rounded">{variable_name}</code> formatını kullanın. 
                                    Markdown formatında yazabilirsiniz: <code class="bg-gray-100 px-1 py-0.5 rounded">**kalın**</code>, <code class="bg-gray-100 px-1 py-0.5 rounded">*italik*</code>, <code class="bg-gray-100 px-1 py-0.5 rounded">[link](url)</code>
                                </span>
                            </p>
                            @error('body')
                            <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                                <i class="fas fa-exclamation-circle"></i>
                                {{ $message }}
                            </p>
                            @enderror
                        </div>

                        <!-- Variables Info -->
                        <div class="bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
                            <h3 class="text-sm font-medium text-blue-900 dark:text-blue-300 mb-2">Kullanılabilir Değişkenler</h3>
                            <p class="text-xs text-blue-700 dark:text-blue-400 mb-2">Şablon içinde kullanabileceğiniz örnek değişkenler:</p>
                            <ul class="text-xs text-blue-700 dark:text-blue-400 space-y-1 list-disc list-inside">
                                <li><code>{name}</code> - Kullanıcı adı</li>
                                <li><code>{email}</code> - Email adresi</li>
                                <li><code>{site_name}</code> - Site adı</li>
                                <li><code>{site_url}</code> - Site URL'i</li>
                                <li><code>{date}</code> - Tarih</li>
                            </ul>
                        </div>

                        <!-- Is Active -->
                        <div class="flex items-center gap-3 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
                            <div class="flex items-center">
                                <input type="checkbox" name="is_active" id="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }}
                                       class="h-5 w-5 text-indigo-600 focus:ring-indigo-500 border-gray-300 dark:border-gray-600 rounded cursor-pointer transition duration-150">
                                <label for="is_active" class="ml-3 flex items-center gap-2 text-sm font-medium text-gray-900 dark:text-gray-100 cursor-pointer">
                                    <i class="fas fa-toggle-on text-green-600"></i>
                                    <span>Şablonu aktif olarak işaretle</span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700 flex items-center justify-end gap-3">
                        <a href="{{ route('email-templates.index') }}" class="inline-flex items-center gap-2 px-5 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-sm font-semibold text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-all duration-200">
                            <i class="fas fa-times"></i>
                            İptal
                        </a>
                        <button type="submit" class="inline-flex items-center gap-2 px-5 py-2.5 border border-transparent rounded-lg shadow-sm text-sm font-semibold text-white bg-indigo-600 dark:bg-indigo-500 hover:bg-indigo-700 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 transition-all duration-200">
                            <i class="fas fa-save"></i>
                            Oluştur
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection