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

{% block title %}Widget Yonetimi{% endblock %}
{% block page_title %}Widget Yonetimi{% endblock %}

{% block body %}
    {# Actions bar #}
    <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">
            <button type="button" class="btn-primary" x-data @click="$dispatch('open-zone-modal')">
                <i class="fas fa-plus mr-2"></i> Yeni Alan
            </button>
        </div>
        <p class="text-sm text-gray-500">Widget alanlarini ve icindeki widgetlari yonetin.</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
        {# Widget Zones (8/12) #}
        <div class="lg:col-span-8 space-y-6">
            {% for zone in zones %}
                <div class="card">
                    <div class="card-header flex items-center justify-between">
                        <div class="flex items-center gap-3">
                            <h3 class="card-title">{{ zone.name }}</h3>
                            {% if zone.zoneType == 'header' %}
                                <span class="inline-flex items-center rounded-full bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700">Header</span>
                            {% elseif zone.zoneType == 'sidebar' %}
                                <span class="inline-flex items-center rounded-full bg-purple-50 px-2 py-0.5 text-xs font-medium text-purple-700">Sidebar</span>
                            {% elseif zone.zoneType == 'footer' %}
                                <span class="inline-flex items-center rounded-full bg-green-50 px-2 py-0.5 text-xs font-medium text-green-700">Footer</span>
                            {% elseif zone.zoneType == 'homepage' %}
                                <span class="inline-flex items-center rounded-full bg-orange-50 px-2 py-0.5 text-xs font-medium text-orange-700">Anasayfa</span>
                            {% elseif zone.zoneType == 'detail' %}
                                <span class="inline-flex items-center rounded-full bg-yellow-50 px-2 py-0.5 text-xs font-medium text-yellow-700">Detay</span>
                            {% elseif zone.zoneType == 'category' %}
                                <span class="inline-flex items-center rounded-full bg-pink-50 px-2 py-0.5 text-xs font-medium text-pink-700">Kategori</span>
                            {% endif %}
                            {% if not zone.isActive %}
                                <span class="badge-gray">Pasif</span>
                            {% endif %}
                        </div>
                        <div class="flex items-center gap-2">
                            <a href="{{ path('admin_widget_zone_edit', {id: zone.id}) }}"
                               class="text-primary-600 hover:text-primary-900 text-sm" title="Duzenle">
                                <i class="fas fa-edit"></i>
                            </a>
                            <form method="post" action="{{ path('admin_widget_zone_delete', {id: zone.id}) }}"
                                  onsubmit="return confirm('Bu widget alanini ve tum icindeki widgetlari silmek istediginize emin misiniz?')">
                                <input type="hidden" name="_token" value="{{ csrf_token('delete_zone_' ~ zone.id) }}">
                                <button type="submit" class="text-red-600 hover:text-red-900 text-sm" title="Sil">
                                    <i class="fas fa-trash-alt"></i>
                                </button>
                            </form>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        {# Placements list #}
                        {% if zone.placements|length > 0 %}
                            <div class="widget-placements-list" data-zone-id="{{ zone.id }}" data-save-url="{{ path('admin_widget_placements', {zoneId: zone.id}) }}">
                                {% for placement in zone.placements %}
                                    <div class="widget-placement-row flex items-center gap-3 px-4 py-3 border-b border-gray-100 last:border-b-0 hover:bg-gray-50 group"
                                         data-placement-id="{{ placement.id }}">
                                        <div class="cursor-grab text-gray-400 hover:text-gray-600 drag-handle">
                                            <i class="fas fa-grip-vertical"></i>
                                        </div>
                                        <div class="flex-1 min-w-0">
                                            <span class="font-medium text-gray-900 text-sm">{{ placement.title|default(placement.widgetType) }}</span>
                                            <span class="inline-flex items-center rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-600 ml-2">
                                                {{ placement.widgetType }}
                                            </span>
                                        </div>
                                        {% if not placement.isActive %}
                                            <span class="badge-gray text-xs">Pasif</span>
                                        {% endif %}
                                        <span class="text-xs text-gray-400">#{{ placement.position }}</span>
                                    </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="text-center text-gray-400 py-8 text-sm">
                                <i class="fas fa-puzzle-piece text-2xl text-gray-300 mb-2 block"></i>
                                Bu alanda henuz widget yok.
                            </div>
                        {% endif %}
                    </div>
                    {# Add widget to zone #}
                    <div class="card-body border-t border-gray-200 pt-3">
                        <form method="post" action="{{ path('admin_widget_add', {zoneId: zone.id}) }}" class="flex items-end gap-2">
                            <input type="hidden" name="_token" value="{{ csrf_token('widget_add') }}">
                            <div class="flex-1">
                                <select name="widget_type" class="form-input w-full text-sm" required>
                                    <option value="">Widget tipi sec...</option>
                                    {% for slug, widgetType in widgetTypes %}
                                        <option value="{{ slug }}">{{ slug }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="flex-1">
                                <input type="text" name="title" class="form-input w-full text-sm" placeholder="Baslik (opsiyonel)">
                            </div>
                            <button type="submit" class="btn-primary text-sm px-3 py-2">
                                <i class="fas fa-plus mr-1"></i> Ekle
                            </button>
                        </form>
                    </div>
                </div>
            {% else %}
                <div class="card">
                    <div class="card-body text-center py-12">
                        <i class="fas fa-puzzle-piece text-4xl text-gray-300 mb-3 block"></i>
                        <p class="text-gray-500">Henuz widget alani eklenmemis.</p>
                        <p class="text-sm text-gray-400 mt-1">Yeni bir widget alani olusturarak baslayabilirsiniz.</p>
                    </div>
                </div>
            {% endfor %}
        </div>

        {# Right column - Available Widget Types & Zone Edit (4/12) #}
        <div class="lg:col-span-4 space-y-6">
            {# Zone Edit Form (when editing) #}
            {% if editZone is defined and editZone %}
                <div class="card border-primary-200">
                    <div class="card-header bg-primary-50">
                        <h3 class="card-title text-primary-800">Alan Duzenle: {{ editZone.name }}</h3>
                    </div>
                    <div class="card-body">
                        <form method="post" action="{{ path('admin_widget_zone_edit', {id: editZone.id}) }}" class="space-y-4">
                            <input type="hidden" name="_token" value="{{ csrf_token('widget_zone_form') }}">
                            <div>
                                <label class="form-label">Alan Adi <span class="text-red-500">*</span></label>
                                <input type="text" name="name" value="{{ editZone.name }}" class="form-input w-full" required>
                            </div>
                            <div>
                                <label class="form-label">Slug <span class="text-red-500">*</span></label>
                                <input type="text" name="slug" value="{{ editZone.slug }}" class="form-input w-full" required>
                            </div>
                            <div>
                                <label class="form-label">Tip</label>
                                <select name="zone_type" class="form-input w-full">
                                    <option value="homepage" {{ editZone.zoneType == 'homepage' ? 'selected' : '' }}>Anasayfa</option>
                                    <option value="sidebar" {{ editZone.zoneType == 'sidebar' ? 'selected' : '' }}>Sidebar</option>
                                    <option value="footer" {{ editZone.zoneType == 'footer' ? 'selected' : '' }}>Footer</option>
                                    <option value="header" {{ editZone.zoneType == 'header' ? 'selected' : '' }}>Header</option>
                                    <option value="detail" {{ editZone.zoneType == 'detail' ? 'selected' : '' }}>Detay</option>
                                    <option value="category" {{ editZone.zoneType == 'category' ? 'selected' : '' }}>Kategori</option>
                                </select>
                            </div>
                            <div>
                                <label class="form-label">Aciklama</label>
                                <input type="text" name="description" value="{{ editZone.description }}" class="form-input w-full" placeholder="Opsiyonel aciklama">
                            </div>
                            <label class="flex items-center gap-3 cursor-pointer">
                                <input type="checkbox" name="is_active" value="1"
                                       {{ editZone.isActive ? 'checked' : '' }}
                                       class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                                <span class="form-label mb-0">Aktif</span>
                            </label>
                            <div class="flex gap-2">
                                <button type="submit" class="btn-primary flex-1 justify-center">
                                    <i class="fas fa-save mr-1"></i> Guncelle
                                </button>
                                <a href="{{ path('admin_widgets') }}" class="btn-outline flex-1 justify-center">Iptal</a>
                            </div>
                        </form>
                    </div>
                </div>
            {% endif %}

            {# Available Widget Types #}
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-puzzle-piece mr-2"></i> Mevcut Widget Tipleri</h3>
                </div>
                <div class="card-body p-0">
                    {% if widgetTypes|length > 0 %}
                        {% for slug, widgetType in widgetTypes %}
                            <div class="flex items-center gap-3 px-4 py-3 border-b border-gray-100 last:border-b-0">
                                <div class="flex-shrink-0 w-8 h-8 rounded bg-primary-50 flex items-center justify-center">
                                    <i class="fas fa-cube text-primary-500 text-sm"></i>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <span class="text-sm font-medium text-gray-900">{{ slug }}</span>
                                </div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <div class="text-center text-gray-400 py-6 text-sm">
                            Henuz widget tipi tanimlanmamis.
                        </div>
                    {% endif %}
                </div>
            </div>

            {# New Zone Form (modal-like) #}
            <div class="card" x-data="{ showNewZone: false }" @open-zone-modal.window="showNewZone = true">
                <div class="card-header cursor-pointer" @click="showNewZone = !showNewZone">
                    <h3 class="card-title"><i class="fas fa-plus-circle mr-2"></i> Yeni Widget Alani</h3>
                </div>
                <div class="card-body" x-show="showNewZone" x-cloak>
                    <form method="post" action="{{ path('admin_widget_zone_create') }}" class="space-y-4">
                        <input type="hidden" name="_token" value="{{ csrf_token('widget_zone_form') }}">
                        <div>
                            <label class="form-label">Alan Adi <span class="text-red-500">*</span></label>
                            <input type="text" name="name" class="form-input w-full" required placeholder="Ornek: Sag Sidebar">
                        </div>
                        <div>
                            <label class="form-label">Slug <span class="text-red-500">*</span></label>
                            <input type="text" name="slug" class="form-input w-full" required placeholder="sag-sidebar">
                        </div>
                        <div>
                            <label class="form-label">Tip</label>
                            <select name="zone_type" class="form-input w-full">
                                <option value="homepage">Anasayfa</option>
                                <option value="sidebar" selected>Sidebar</option>
                                <option value="footer">Footer</option>
                                <option value="header">Header</option>
                                <option value="detail">Detay</option>
                                <option value="category">Kategori</option>
                            </select>
                        </div>
                        <div>
                            <label class="form-label">Aciklama</label>
                            <input type="text" name="description" class="form-input w-full" placeholder="Opsiyonel aciklama">
                        </div>
                        <input type="hidden" name="is_active" value="1">
                        <button type="submit" class="btn-primary w-full justify-center">
                            <i class="fas fa-plus mr-2"></i> Alan Olustur
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {% block javascripts %}
        {{ parent() }}
        <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                document.querySelectorAll('.widget-placements-list').forEach(function (listEl) {
                    const saveUrl = listEl.dataset.saveUrl;

                    new Sortable(listEl, {
                        handle: '.drag-handle',
                        animation: 150,
                        ghostClass: 'bg-blue-50',
                        onEnd: function () {
                            const placements = [];
                            listEl.querySelectorAll('.widget-placement-row').forEach(function (row, index) {
                                placements.push({
                                    id: parseInt(row.dataset.placementId),
                                    position: index
                                });
                            });

                            fetch(saveUrl, {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-Requested-With': 'XMLHttpRequest'
                                },
                                body: JSON.stringify({ placements: placements })
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (!data.success) {
                                    console.error('Siralama kaydedilemedi:', data.message);
                                }
                            })
                            .catch(error => {
                                console.error('Siralama hatasi:', error);
                            });
                        }
                    });
                });
            });
        </script>
    {% endblock %}
{% endblock %}
