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

{% block title %}Astroloji{% endblock %}
{% block page_title %}Astroloji - Burc Yorumlari{% endblock %}

{% block body %}
    {# Date Picker & Actions #}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 gap-4">
        <div class="flex items-center gap-3">
            <form method="get" class="flex items-center gap-2">
                <label class="text-sm font-medium text-gray-700">Tarih:</label>
                <input type="date" name="date" value="{{ currentDate|date('Y-m-d') }}"
                       onchange="this.form.submit()"
                       class="form-input text-sm">
            </form>
            <span class="text-sm text-gray-500">
                {{ currentDate|date('d.m.Y') }} -
                {% if horoscopes|length == 12 %}
                    <span class="text-green-600 font-medium"><i class="fas fa-check-circle mr-1"></i>Tum burclar tamamlandi</span>
                {% else %}
                    <span class="text-yellow-600 font-medium">{{ horoscopes|length }}/12 burc</span>
                {% endif %}
            </span>
        </div>
        <div class="flex items-center gap-2">
            <a href="{{ path('admin_horoscope_bulk', {date: currentDate|date('Y-m-d')}) }}" class="btn-primary">
                <i class="fas fa-edit mr-2"></i> Toplu Gir
            </a>
            <a href="{{ path('admin_horoscope_create', {date: currentDate|date('Y-m-d')}) }}"
               class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-lg bg-white border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors">
                <i class="fas fa-plus"></i> Tekli Ekle
            </a>
        </div>
    </div>

    {# Horoscope Grid #}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
        {% for signSlug, signData in signs %}
            {% set horoscope = null %}
            {% for h in horoscopes %}
                {% if h.sign == signSlug %}
                    {% set horoscope = h %}
                {% endif %}
            {% endfor %}

            <div class="card overflow-hidden {{ horoscope ? '' : 'opacity-60 border-dashed' }}">
                {# Sign Header #}
                <div class="px-4 py-3 flex items-center justify-between" style="background: linear-gradient(135deg, #1a1a3e 0%, #2d1b4e 100%);">
                    <div class="flex items-center gap-3">
                        <span class="text-2xl" style="color: #d4af37;">{{ signData.icon }}</span>
                        <div>
                            <h3 class="font-bold text-white text-sm">{{ signData.name|upper }}</h3>
                            <p class="text-xs" style="color: #d4af37aa;">{{ signData.date_range }}</p>
                        </div>
                    </div>
                    {% if horoscope %}
                        <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium bg-green-400/20 text-green-300">
                            <i class="fas fa-check mr-1"></i>
                        </span>
                    {% else %}
                        <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium bg-yellow-400/20 text-yellow-300">
                            <i class="fas fa-exclamation mr-1"></i>
                        </span>
                    {% endif %}
                </div>

                <div class="p-4">
                    {% if horoscope %}
                        <p class="text-sm text-gray-700 line-clamp-3 mb-3 leading-relaxed">
                            {{ horoscope.content|striptags|slice(0, 150) }}{% if horoscope.content|length > 150 %}...{% endif %}
                        </p>

                        {% if horoscope.loveRating or horoscope.careerRating or horoscope.healthRating %}
                            <div class="flex items-center gap-3 text-xs text-gray-500 mb-3">
                                {% if horoscope.loveRating %}
                                    <span title="Ask"><i class="fas fa-heart text-red-400 mr-0.5"></i>{{ horoscope.loveRating }}/5</span>
                                {% endif %}
                                {% if horoscope.careerRating %}
                                    <span title="Kariyer"><i class="fas fa-briefcase text-blue-400 mr-0.5"></i>{{ horoscope.careerRating }}/5</span>
                                {% endif %}
                                {% if horoscope.healthRating %}
                                    <span title="Saglik"><i class="fas fa-heartbeat text-green-400 mr-0.5"></i>{{ horoscope.healthRating }}/5</span>
                                {% endif %}
                            </div>
                        {% endif %}

                        <div class="flex items-center gap-2">
                            <a href="{{ path('admin_horoscope_edit', {id: horoscope.id}) }}"
                               class="text-xs text-primary-600 hover:text-primary-800 font-medium">
                                <i class="fas fa-edit mr-1"></i>Duzenle
                            </a>
                            <form method="post" action="{{ path('admin_horoscope_delete', {id: horoscope.id}) }}" class="inline"
                                  onsubmit="return confirm('Bu burc yorumunu silmek istediginize emin misiniz?')">
                                <input type="hidden" name="_token" value="{{ csrf_token('delete_horoscope_' ~ horoscope.id) }}">
                                <button type="submit" class="text-xs text-red-600 hover:text-red-800 font-medium">
                                    <i class="fas fa-trash mr-1"></i>Sil
                                </button>
                            </form>
                        </div>
                    {% else %}
                        <p class="text-sm text-gray-400 mb-3 italic">Burc yorumu henuz girilmemis.</p>
                        <a href="{{ path('admin_horoscope_create', {sign: signSlug, date: currentDate|date('Y-m-d')}) }}"
                           class="text-xs text-primary-600 hover:text-primary-800 font-medium">
                            <i class="fas fa-plus mr-1"></i>Yorum Ekle
                        </a>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock %}
