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

{% block title %}{{ horoscope ? 'Burc Yorumu Duzenle' : 'Yeni Burc Yorumu' }}{% endblock %}
{% block page_title %}{{ horoscope ? horoscope.signName ~ ' - Yorum Duzenle' : 'Yeni Burc Yorumu Ekle' }}{% endblock %}

{% block body %}
    {# Breadcrumb #}
    <div class="mb-6">
        <nav class="flex items-center gap-2 text-sm text-gray-500">
            <a href="{{ path('admin_horoscope') }}" class="hover:text-primary-600 transition-colors">
                <i class="fas fa-moon mr-1"></i> Astroloji
            </a>
            <i class="fas fa-chevron-right text-xs text-gray-300"></i>
            <span class="text-gray-900 font-medium">{{ horoscope ? 'Duzenle' : 'Yeni Yorum' }}</span>
        </nav>
    </div>

    <form method="post" action="{{ horoscope ? path('admin_horoscope_edit', {id: horoscope.id}) : path('admin_horoscope_create') }}" class="space-y-6">
        <input type="hidden" name="_token" value="{{ csrf_token('horoscope_form') }}">

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {# Left: Main content #}
            <div class="lg:col-span-2 space-y-6">
                <div class="card">
                    <div class="card-body">
                        <h3 class="text-base font-bold text-gray-900 mb-4 flex items-center gap-2">
                            <i class="fas fa-moon text-purple-600"></i> Burc Yorumu
                        </h3>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                            <div>
                                <label for="sign" class="block text-sm font-medium text-gray-700 mb-1">Burc</label>
                                <select id="sign" name="sign" class="form-input w-full" required>
                                    <option value="">-- Burc Secin --</option>
                                    {% for slug, signData in signs %}
                                        <option value="{{ slug }}" {% if defaultSign == slug %}selected{% endif %}>
                                            {{ signData.icon }} {{ signData.name }} ({{ signData.date_range }})
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div>
                                <label for="horoscope_date" class="block text-sm font-medium text-gray-700 mb-1">Tarih</label>
                                <input type="date" id="horoscope_date" name="horoscope_date"
                                       value="{{ horoscope ? horoscope.horoscopeDate|date('Y-m-d') : defaultDate }}"
                                       class="form-input w-full" required>
                            </div>
                        </div>

                        <div>
                            <label for="content" class="block text-sm font-medium text-gray-700 mb-1">Yorum Icerigi</label>
                            <textarea id="content" name="content" rows="8"
                                      class="form-input w-full" required
                                      placeholder="Gunun burc yorumunu yazin...">{{ horoscope ? horoscope.content : '' }}</textarea>
                        </div>
                    </div>
                </div>

                {# Ratings #}
                <div class="card">
                    <div class="card-body">
                        <h3 class="text-base font-bold text-gray-900 mb-4 flex items-center gap-2">
                            <i class="fas fa-star text-yellow-500"></i> Puanlamalar
                        </h3>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div>
                                <label for="love_rating" class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fas fa-heart text-red-400 mr-1"></i>Ask
                                </label>
                                <select id="love_rating" name="love_rating" class="form-input w-full">
                                    <option value="">Secilmedi</option>
                                    {% for i in 1..5 %}
                                        <option value="{{ i }}" {% if horoscope and horoscope.loveRating == i %}selected{% endif %}>{{ i }}/5</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div>
                                <label for="career_rating" class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fas fa-briefcase text-blue-400 mr-1"></i>Kariyer
                                </label>
                                <select id="career_rating" name="career_rating" class="form-input w-full">
                                    <option value="">Secilmedi</option>
                                    {% for i in 1..5 %}
                                        <option value="{{ i }}" {% if horoscope and horoscope.careerRating == i %}selected{% endif %}>{{ i }}/5</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div>
                                <label for="health_rating" class="block text-sm font-medium text-gray-700 mb-1">
                                    <i class="fas fa-heartbeat text-green-400 mr-1"></i>Saglik
                                </label>
                                <select id="health_rating" name="health_rating" class="form-input w-full">
                                    <option value="">Secilmedi</option>
                                    {% for i in 1..5 %}
                                        <option value="{{ i }}" {% if horoscope and horoscope.healthRating == i %}selected{% endif %}>{{ i }}/5</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {# Right: Sidebar #}
            <div class="space-y-6">
                <div class="card">
                    <div class="card-body">
                        <h3 class="text-base font-bold text-gray-900 mb-4">Ek Bilgiler</h3>
                        <div class="space-y-4">
                            <div>
                                <label for="lucky_number" class="block text-sm font-medium text-gray-700 mb-1">Sanslı Sayi</label>
                                <input type="text" id="lucky_number" name="lucky_number"
                                       value="{{ horoscope ? horoscope.luckyNumber : '' }}"
                                       placeholder="7, 14, 21" class="form-input w-full">
                            </div>
                            <div>
                                <label for="lucky_color" class="block text-sm font-medium text-gray-700 mb-1">Sansli Renk</label>
                                <input type="text" id="lucky_color" name="lucky_color"
                                       value="{{ horoscope ? horoscope.luckyColor : '' }}"
                                       placeholder="Kirmizi" class="form-input w-full">
                            </div>
                            <div>
                                <label for="status" class="block text-sm font-medium text-gray-700 mb-1">Durum</label>
                                <select id="status" name="status" class="form-input w-full">
                                    <option value="published" {% if not horoscope or horoscope.status == 'published' %}selected{% endif %}>Yayinda</option>
                                    <option value="draft" {% if horoscope and horoscope.status == 'draft' %}selected{% endif %}>Taslak</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <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> Kaydet
                    </button>
                    <a href="{{ path('admin_horoscope') }}" class="btn-secondary w-full justify-center text-center">
                        <i class="fas fa-arrow-left mr-2"></i> Geri Don
                    </a>
                </div>
            </div>
        </div>
    </form>
{% endblock %}
