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

{% block title %}Reklam Kanalları{% endblock %}
{% block page_title %}Reklam Kanalları{% endblock %}

{% block body %}
    {# Actions bar #}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 gap-4">
        <p class="text-sm text-gray-500">Tüm reklam pozisyonlarını ve mevcut reklam sayılarını aşağıda görebilirsiniz.</p>
        <a href="{{ path('admin_advertisements') }}" class="btn-outline">
            <i class="fas fa-arrow-left mr-2"></i> Reklamlara Dön
        </a>
    </div>

    <div class="space-y-8">

        {# ========== 1. Alan Reklamları ========== #}
        <div class="card overflow-hidden">
            <div class="bg-indigo-600 px-6 py-4">
                <h3 class="text-lg font-semibold text-white">
                    <i class="fas fa-images mr-2"></i> Alan Reklamları
                </h3>
                <p class="text-indigo-200 text-sm mt-1">Foto galeri ve akış içi reklam alanları</p>
            </div>
            <div class="card-body">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {% set alan_positions = {
                        'foto_galeri_akis_reklam': {'name': 'Foto Galeri Akış Reklam', 'dimensions': 'SG x SY'}
                    } %}
                    {% for key, pos in alan_positions %}
                        <div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 hover:shadow-sm transition-all">
                            <div class="flex items-start justify-between">
                                <div>
                                    <h4 class="font-medium text-gray-900">{{ pos.name }}</h4>
                                    <p class="text-xs text-gray-500 mt-1">{{ pos.dimensions }}</p>
                                </div>
                                <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {{ ad_counts[key] is defined and ad_counts[key] > 0 ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500' }}">
                                    {{ ad_counts[key]|default(0) }} aktif
                                </span>
                            </div>
                            <div class="mt-3">
                                <a href="{{ path('admin_ad_create', {position: key, position_category: 'alan_reklam'}) }}"
                                   class="text-sm text-indigo-600 hover:text-indigo-800 font-medium">
                                    <i class="fas fa-plus-circle mr-1"></i> Reklam Ekle
                                </a>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        {# ========== 2. Altsayfa Reklamları ========== #}
        <div class="card overflow-hidden">
            <div class="bg-blue-600 px-6 py-4">
                <h3 class="text-lg font-semibold text-white">
                    <i class="fas fa-file-alt mr-2"></i> Altsayfa Reklamları
                </h3>
                <p class="text-blue-200 text-sm mt-1">Haber detay sayfalarındaki reklam alanları</p>
            </div>
            <div class="card-body">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {% set altsayfa_positions = {
                        'sayfa_baslangici': {'name': 'Sayfa Başlangıcı', 'dimensions': '620 x SY'},
                        'sayfa_sonu': {'name': 'Sayfa Sonu', 'dimensions': '620 x SY'},
                        'baslik_alti': {'name': 'Başlık Altı', 'dimensions': '620 x SY'},
                        'baslik_ustu': {'name': 'Başlık Üstü', 'dimensions': '620 x SY'},
                        'spot_alti': {'name': 'Spot Altı', 'dimensions': '620 x SY'},
                        'fotograf_alti': {'name': 'Fotoğraf Altı', 'dimensions': '620 x SY'},
                        'ilginizi_cekebilir_alti': {'name': 'İlginizi Çekebilir Altı', 'dimensions': '620 x SY'}
                    } %}
                    {% for key, pos in altsayfa_positions %}
                        <div class="border border-gray-200 rounded-lg p-4 hover:border-blue-300 hover:shadow-sm transition-all">
                            <div class="flex items-start justify-between">
                                <div>
                                    <h4 class="font-medium text-gray-900">{{ pos.name }}</h4>
                                    <p class="text-xs text-gray-500 mt-1">{{ pos.dimensions }}</p>
                                </div>
                                <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {{ ad_counts[key] is defined and ad_counts[key] > 0 ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500' }}">
                                    {{ ad_counts[key]|default(0) }} aktif
                                </span>
                            </div>
                            <div class="mt-3">
                                <a href="{{ path('admin_ad_create', {position: key, position_category: 'altsayfa'}) }}"
                                   class="text-sm text-blue-600 hover:text-blue-800 font-medium">
                                    <i class="fas fa-plus-circle mr-1"></i> Reklam Ekle
                                </a>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        {# ========== 3. Genel Reklamlar ========== #}
        <div class="card overflow-hidden">
            <div class="bg-emerald-600 px-6 py-4">
                <h3 class="text-lg font-semibold text-white">
                    <i class="fas fa-globe mr-2"></i> Genel Reklamlar
                </h3>
                <p class="text-emerald-200 text-sm mt-1">Site genelinde görünen reklam alanları</p>
            </div>
            <div class="card-body">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {% set genel_positions = {
                        'kategori_alti': {'name': 'Kategori Altı', 'dimensions': '940 x SY'},
                        'kategori_mansetler_alti': {'name': 'Kategori-Manşetler Altı', 'dimensions': '620 x SY'},
                        'acilis_reklami': {'name': 'Açılış Reklamı', 'dimensions': 'SG x SY'},
                        'en_ust': {'name': 'En Üst', 'dimensions': '940 x SY'}
                    } %}
                    {% for key, pos in genel_positions %}
                        <div class="border border-gray-200 rounded-lg p-4 hover:border-emerald-300 hover:shadow-sm transition-all">
                            <div class="flex items-start justify-between">
                                <div>
                                    <h4 class="font-medium text-gray-900">{{ pos.name }}</h4>
                                    <p class="text-xs text-gray-500 mt-1">{{ pos.dimensions }}</p>
                                </div>
                                <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {{ ad_counts[key] is defined and ad_counts[key] > 0 ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500' }}">
                                    {{ ad_counts[key]|default(0) }} aktif
                                </span>
                            </div>
                            <div class="mt-3">
                                <a href="{{ path('admin_ad_create', {position: key, position_category: 'genel'}) }}"
                                   class="text-sm text-emerald-600 hover:text-emerald-800 font-medium">
                                    <i class="fas fa-plus-circle mr-1"></i> Reklam Ekle
                                </a>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        {# ========== 4. Paragraf Reklamları ========== #}
        <div class="card overflow-hidden">
            <div class="bg-orange-500 px-6 py-4">
                <h3 class="text-lg font-semibold text-white">
                    <i class="fas fa-paragraph mr-2"></i> Paragraf Reklamları
                </h3>
                <p class="text-orange-200 text-sm mt-1">Haber içeriği paragrafları arasında görünen reklamlar</p>
            </div>
            <div class="card-body">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {% set paragraf_positions = {
                        'paragraf_tekrar_eden': {'name': 'Paragraf Tekrar Eden', 'dimensions': '600 x SY'}
                    } %}
                    {% for key, pos in paragraf_positions %}
                        <div class="border border-gray-200 rounded-lg p-4 hover:border-orange-300 hover:shadow-sm transition-all">
                            <div class="flex items-start justify-between">
                                <div>
                                    <h4 class="font-medium text-gray-900">{{ pos.name }}</h4>
                                    <p class="text-xs text-gray-500 mt-1">{{ pos.dimensions }}</p>
                                </div>
                                <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {{ ad_counts[key] is defined and ad_counts[key] > 0 ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500' }}">
                                    {{ ad_counts[key]|default(0) }} aktif
                                </span>
                            </div>
                            <div class="mt-3">
                                <a href="{{ path('admin_ad_create', {position: key, position_category: 'paragraf'}) }}"
                                   class="text-sm text-orange-600 hover:text-orange-800 font-medium">
                                    <i class="fas fa-plus-circle mr-1"></i> Reklam Ekle
                                </a>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        {# ========== 5. Yan Reklamlar ========== #}
        <div class="card overflow-hidden">
            <div class="bg-purple-600 px-6 py-4">
                <h3 class="text-lg font-semibold text-white">
                    <i class="fas fa-columns mr-2"></i> Yan Reklamlar
                </h3>
                <p class="text-purple-200 text-sm mt-1">Sidebar (kenar çubuğu) reklam alanları</p>
            </div>
            <div class="card-body">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {% set yan_positions = {
                        'sidebar_ust': {'name': 'Sidebar Üst', 'dimensions': 'SG x SY'},
                        'sidebar_orta': {'name': 'Sidebar Orta', 'dimensions': 'SG x SY'},
                        'sidebar_alt': {'name': 'Sidebar Alt', 'dimensions': 'SG x SY'},
                        'sidebar_yapiskan': {'name': 'Sidebar Yapışkan', 'dimensions': 'SG x SY'}
                    } %}
                    {% for key, pos in yan_positions %}
                        <div class="border border-gray-200 rounded-lg p-4 hover:border-purple-300 hover:shadow-sm transition-all">
                            <div class="flex items-start justify-between">
                                <div>
                                    <h4 class="font-medium text-gray-900">{{ pos.name }}</h4>
                                    <p class="text-xs text-gray-500 mt-1">{{ pos.dimensions }}</p>
                                </div>
                                <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {{ ad_counts[key] is defined and ad_counts[key] > 0 ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500' }}">
                                    {{ ad_counts[key]|default(0) }} aktif
                                </span>
                            </div>
                            <div class="mt-3">
                                <a href="{{ path('admin_ad_create', {position: key, position_category: 'yan'}) }}"
                                   class="text-sm text-purple-600 hover:text-purple-800 font-medium">
                                    <i class="fas fa-plus-circle mr-1"></i> Reklam Ekle
                                </a>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>

    </div>
{% endblock %}
