{% extends 'admin/base.html.twig' %}

{% block title %}{{ category ? 'Kategori Duzenle' : 'Yeni Kategori' }}{% endblock %}
{% block page_title %}{{ category ? 'Kategori Duzenle: ' ~ category.title : 'Yeni Kategori Olustur' }}{% endblock %}

{% block body %}
    <form method="post" action="{{ category ? path('admin_category_edit', {id: category.id}) : path('admin_category_create') }}">
        <input type="hidden" name="_token" value="{{ csrf_token('category_form') }}">

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
            {# Left column (8/12) #}
            <div class="lg:col-span-8 space-y-6">
                {# Category Info Card #}
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Kategori Bilgileri</h3>
                    </div>
                    <div class="card-body space-y-4">
                        {# Title #}
                        <div>
                            <label for="title" class="form-label">Baslik <span class="text-red-500">*</span></label>
                            <input type="text" id="title" name="title" required
                                   value="{{ category ? category.title : '' }}"
                                   class="form-input w-full"
                                   placeholder="Kategori basligi">
                        </div>

                        {# Slug #}
                        <div>
                            <label for="slug" class="form-label">Slug</label>
                            <input type="text" id="slug" name="slug"
                                   value="{{ category ? category.slug : '' }}"
                                   class="form-input w-full"
                                   placeholder="otomatik olusturulur">
                            <p class="text-xs text-gray-500 mt-1">Bos birakilirsa basliktan otomatik olusturulur.</p>
                        </div>

                        {# Description #}
                        <div>
                            <label for="description" class="form-label">Aciklama</label>
                            <textarea id="description" name="description" rows="4"
                                      class="form-input w-full"
                                      placeholder="Kategori aciklamasi">{{ category ? category.description : '' }}</textarea>
                        </div>

                        {# Parent Category #}
                        <div>
                            <label for="parent_id" class="form-label">Ust Kategori</label>
                            <select id="parent_id" name="parent_id" class="form-input w-full">
                                <option value="">-- Ust kategori yok --</option>
                                {% for cat in categories %}
                                    {% if not category or cat.id != category.id %}
                                        <option value="{{ cat.id }}"
                                            {{ category and category.parent and category.parent.id == cat.id ? 'selected' : '' }}>
                                            {{ cat.title }}
                                        </option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </div>

                        {# Status #}
                        <div>
                            <label for="status" class="form-label">Durum</label>
                            <select id="status" name="status" class="form-input w-full">
                                <option value="active" {{ (category and category.status == 'active') or not category ? 'selected' : '' }}>Aktif</option>
                                <option value="inactive" {{ category and category.status == 'inactive' ? 'selected' : '' }}>Pasif</option>
                            </select>
                        </div>
                    </div>
                </div>

                {# SEO Card #}
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">SEO Ayarlari</h3>
                    </div>
                    <div class="card-body space-y-4">
                        {# SEO Title #}
                        <div>
                            <label for="seo_title" class="form-label">SEO Baslik</label>
                            <input type="text" id="seo_title" name="seo_title"
                                   value="{{ category ? category.seoTitle : '' }}"
                                   class="form-input w-full"
                                   placeholder="Arama motorlarinda gorunecek baslik">
                            <p class="text-xs text-gray-500 mt-1">Maksimum 60 karakter onerilir.</p>
                        </div>

                        {# SEO Description #}
                        <div>
                            <label for="seo_description" class="form-label">SEO Aciklama</label>
                            <textarea id="seo_description" name="seo_description" rows="3"
                                      class="form-input w-full"
                                      placeholder="Arama motorlarinda gorunecek aciklama">{{ category ? category.seoDescription : '' }}</textarea>
                            <p class="text-xs text-gray-500 mt-1">Maksimum 160 karakter onerilir.</p>
                        </div>

                        {# SERP Preview #}
                        <div class="border border-gray-200 rounded-lg p-4 bg-gray-50">
                            <p class="text-xs text-gray-500 uppercase tracking-wider mb-2 font-semibold">SERP Onizleme</p>
                            <div class="space-y-1">
                                <p class="text-lg text-blue-700 font-medium truncate" id="serp-title">
                                    {{ category and category.seoTitle ? category.seoTitle : (category ? category.title : 'Sayfa Basligi') }}
                                </p>
                                <p class="text-sm text-green-700 truncate">
                                    {{ app.request.schemeAndHttpHost }}/kategori/<span id="serp-slug">{{ category ? category.slug : 'kategori-slug' }}</span>
                                </p>
                                <p class="text-sm text-gray-600 line-clamp-2" id="serp-description">
                                    {{ category and category.seoDescription ? category.seoDescription : 'Kategori aciklamasi burada gorunecek...' }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {# Right column (4/12) #}
            <div class="lg:col-span-4 space-y-6">
                {# Visual Settings Card #}
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Gorsel Ayarlar</h3>
                    </div>
                    <div class="card-body space-y-4">
                        {# Color #}
                        <div>
                            <label for="color" class="form-label">Renk</label>
                            <div class="flex items-center gap-3">
                                <input type="color" id="color" name="color"
                                       value="{{ category and category.color ? category.color : '#3B82F6' }}"
                                       class="h-10 w-14 rounded border border-gray-300 cursor-pointer">
                                <input type="text" id="color_hex"
                                       value="{{ category and category.color ? category.color : '#3B82F6' }}"
                                       class="form-input w-full"
                                       placeholder="#3B82F6" maxlength="7" readonly>
                            </div>
                        </div>

                        {# Icon #}
                        <div>
                            <label for="icon" class="form-label">Ikon</label>
                            <div class="flex items-center gap-3">
                                <div class="flex-shrink-0 w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center" id="icon-preview">
                                    {% if category and category.icon %}
                                        <i class="{{ category.icon }} text-gray-600"></i>
                                    {% else %}
                                        <i class="fas fa-icons text-gray-400"></i>
                                    {% endif %}
                                </div>
                                <input type="text" id="icon" name="icon"
                                       value="{{ category ? category.icon : '' }}"
                                       class="form-input w-full"
                                       placeholder="fas fa-newspaper">
                            </div>
                            <p class="text-xs text-gray-500 mt-1">FontAwesome ikon sinifi.</p>
                        </div>

                        {# Image URL #}
                        <div>
                            <label for="image" class="form-label">Gorsel URL</label>
                            <input type="text" id="image" name="image"
                                   value="{{ category ? category.image : '' }}"
                                   class="form-input w-full"
                                   placeholder="https://ornek.com/gorsel.jpg">
                            {% if category and category.image %}
                                <div class="mt-2">
                                    <img src="{{ category.image }}" alt="Kategori gorseli" class="w-full h-32 object-cover rounded-lg border border-gray-200">
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                {# Settings Card #}
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Ayarlar</h3>
                    </div>
                    <div class="card-body space-y-4">
                        {# Position #}
                        <div>
                            <label for="position" class="form-label">Sira</label>
                            <input type="number" id="position" name="position"
                                   value="{{ category ? category.position : 0 }}"
                                   class="form-input w-full"
                                   min="0">
                            <p class="text-xs text-gray-500 mt-1">Kucuk sayi once gorunur.</p>
                        </div>

                        {# Is Default #}
                        <div>
                            <label class="flex items-center gap-3 cursor-pointer">
                                <input type="checkbox" name="is_default" value="1"
                                       {{ category and category.isDefault ? 'checked' : '' }}
                                       class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                                <span class="form-label mb-0">Varsayilan Kategori</span>
                            </label>
                            <p class="text-xs text-gray-500 mt-1">Haber eklerken bu kategori otomatik secilir.</p>
                        </div>
                    </div>
                </div>

                {# Action Buttons #}
                <div class="flex flex-col gap-3">
                    <button type="submit" class="btn-primary w-full justify-center">
                        <i class="fas fa-save mr-2"></i>
                        {{ category ? 'Guncelle' : 'Kaydet' }}
                    </button>
                    <a href="{{ path('admin_categories') }}" class="btn-outline w-full justify-center">
                        <i class="fas fa-arrow-left mr-2"></i> Geri Don
                    </a>
                </div>
            </div>
        </div>
    </form>

    {% block javascripts %}
        {{ parent() }}
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                // Sync color picker with hex text input
                const colorInput = document.getElementById('color');
                const colorHex = document.getElementById('color_hex');
                if (colorInput && colorHex) {
                    colorInput.addEventListener('input', function () {
                        colorHex.value = this.value;
                    });
                }

                // SERP preview live update
                const titleInput = document.getElementById('title');
                const slugInput = document.getElementById('slug');
                const seoTitleInput = document.getElementById('seo_title');
                const seoDescInput = document.getElementById('seo_description');
                const serpTitle = document.getElementById('serp-title');
                const serpSlug = document.getElementById('serp-slug');
                const serpDescription = document.getElementById('serp-description');

                if (titleInput && serpTitle) {
                    titleInput.addEventListener('input', function () {
                        if (!seoTitleInput.value) {
                            serpTitle.textContent = this.value || 'Sayfa Basligi';
                        }
                    });
                }

                if (seoTitleInput && serpTitle) {
                    seoTitleInput.addEventListener('input', function () {
                        serpTitle.textContent = this.value || titleInput.value || 'Sayfa Basligi';
                    });
                }

                if (slugInput && serpSlug) {
                    slugInput.addEventListener('input', function () {
                        serpSlug.textContent = this.value || 'kategori-slug';
                    });
                }

                if (seoDescInput && serpDescription) {
                    seoDescInput.addEventListener('input', function () {
                        serpDescription.textContent = this.value || 'Kategori aciklamasi burada gorunecek...';
                    });
                }

                // Icon preview live update
                const iconInput = document.getElementById('icon');
                const iconPreview = document.getElementById('icon-preview');
                if (iconInput && iconPreview) {
                    iconInput.addEventListener('input', function () {
                        const iconClass = this.value.trim();
                        if (iconClass) {
                            iconPreview.innerHTML = '<i class="' + iconClass + ' text-gray-600"></i>';
                        } else {
                            iconPreview.innerHTML = '<i class="fas fa-icons text-gray-400"></i>';
                        }
                    });
                }
            });
        </script>
    {% endblock %}
{% endblock %}
