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

{% block title %}Tema Ayarları{% endblock %}
{% block page_title %}Tema Ayarları{% endblock %}

{% block body %}
    <form method="post" action="{{ path('admin_theme') }}" x-data="themeSettings()">
        <input type="hidden" name="_token" value="{{ csrf_token('theme_settings') }}">

        <div class="space-y-6">
            {# Genel (General) #}
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-cog mr-2 text-gray-500"></i> Genel</h3>
                </div>
                <div class="card-body space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label for="site_logo" class="form-label">Site Logosu</label>
                            <input type="text" id="site_logo" name="settings[site_logo]"
                                   value="{{ settings.site_logo|default('') }}"
                                   class="form-input w-full"
                                   placeholder="Logo URL veya yolu">
                        </div>
                        <div>
                            <label for="site_favicon" class="form-label">Favicon</label>
                            <input type="text" id="site_favicon" name="settings[site_favicon]"
                                   value="{{ settings.site_favicon|default('') }}"
                                   class="form-input w-full"
                                   placeholder="Favicon URL veya yolu">
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label for="site_name" class="form-label">Site Adı</label>
                            <input type="text" id="site_name" name="settings[site_name]"
                                   value="{{ settings.site_name|default('') }}"
                                   class="form-input w-full"
                                   placeholder="Site adı">
                        </div>
                        <div>
                            <label for="site_slogan" class="form-label">Slogan</label>
                            <input type="text" id="site_slogan" name="settings[site_slogan]"
                                   value="{{ settings.site_slogan|default('') }}"
                                   class="form-input w-full"
                                   placeholder="Site sloganı">
                        </div>
                    </div>
                    <div>
                        <label for="footer_text" class="form-label">Footer Metni</label>
                        <textarea id="footer_text" name="settings[footer_text]"
                                  rows="3" class="form-input w-full"
                                  placeholder="Alt bilgi metni">{{ settings.footer_text|default('') }}</textarea>
                    </div>
                </div>
            </div>

            {# Renkler (Colors) #}
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-palette mr-2 text-gray-500"></i> Renkler</h3>
                </div>
                <div class="card-body">
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
                        <div>
                            <label for="primary_color" class="form-label">Ana Renk</label>
                            <div class="flex items-center gap-2">
                                <input type="color" id="primary_color" name="settings[primary_color]"
                                       value="{{ settings.primary_color|default('#3b82f6') }}"
                                       class="h-10 w-14 rounded border border-gray-300 cursor-pointer"
                                       x-model="colors.primary_color">
                                <input type="text" x-model="colors.primary_color"
                                       class="form-input w-full text-sm"
                                       @input="document.getElementById('primary_color').value = $event.target.value">
                            </div>
                        </div>
                        <div>
                            <label for="secondary_color" class="form-label">İkincil Renk</label>
                            <div class="flex items-center gap-2">
                                <input type="color" id="secondary_color" name="settings[secondary_color]"
                                       value="{{ settings.secondary_color|default('#6b7280') }}"
                                       class="h-10 w-14 rounded border border-gray-300 cursor-pointer"
                                       x-model="colors.secondary_color">
                                <input type="text" x-model="colors.secondary_color"
                                       class="form-input w-full text-sm"
                                       @input="document.getElementById('secondary_color').value = $event.target.value">
                            </div>
                        </div>
                        <div>
                            <label for="header_bg" class="form-label">Header Arkaplan</label>
                            <div class="flex items-center gap-2">
                                <input type="color" id="header_bg" name="settings[header_bg]"
                                       value="{{ settings.header_bg|default('#ffffff') }}"
                                       class="h-10 w-14 rounded border border-gray-300 cursor-pointer"
                                       x-model="colors.header_bg">
                                <input type="text" x-model="colors.header_bg"
                                       class="form-input w-full text-sm"
                                       @input="document.getElementById('header_bg').value = $event.target.value">
                            </div>
                        </div>
                        <div>
                            <label for="footer_bg" class="form-label">Footer Arkaplan</label>
                            <div class="flex items-center gap-2">
                                <input type="color" id="footer_bg" name="settings[footer_bg]"
                                       value="{{ settings.footer_bg|default('#1f2937') }}"
                                       class="h-10 w-14 rounded border border-gray-300 cursor-pointer"
                                       x-model="colors.footer_bg">
                                <input type="text" x-model="colors.footer_bg"
                                       class="form-input w-full text-sm"
                                       @input="document.getElementById('footer_bg').value = $event.target.value">
                            </div>
                        </div>
                        <div>
                            <label for="accent_color" class="form-label">Vurgu Rengi</label>
                            <div class="flex items-center gap-2">
                                <input type="color" id="accent_color" name="settings[accent_color]"
                                       value="{{ settings.accent_color|default('#ef4444') }}"
                                       class="h-10 w-14 rounded border border-gray-300 cursor-pointer"
                                       x-model="colors.accent_color">
                                <input type="text" x-model="colors.accent_color"
                                       class="form-input w-full text-sm"
                                       @input="document.getElementById('accent_color').value = $event.target.value">
                            </div>
                        </div>
                    </div>

                    {# Live Preview #}
                    <div class="mt-6 p-4 rounded-lg border border-gray-200 bg-gray-50">
                        <p class="text-xs text-gray-500 mb-2 font-medium">Renk Önizleme</p>
                        <div class="flex items-center gap-3">
                            <div class="h-10 w-10 rounded-lg shadow-sm" :style="'background-color:' + colors.primary_color" title="Ana Renk"></div>
                            <div class="h-10 w-10 rounded-lg shadow-sm" :style="'background-color:' + colors.secondary_color" title="İkincil Renk"></div>
                            <div class="h-10 w-10 rounded-lg shadow-sm border" :style="'background-color:' + colors.header_bg" title="Header"></div>
                            <div class="h-10 w-10 rounded-lg shadow-sm" :style="'background-color:' + colors.footer_bg" title="Footer"></div>
                            <div class="h-10 w-10 rounded-lg shadow-sm" :style="'background-color:' + colors.accent_color" title="Vurgu"></div>
                        </div>
                    </div>
                </div>
            </div>

            {# Tipografi (Typography) #}
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-font mr-2 text-gray-500"></i> Tipografi</h3>
                </div>
                <div class="card-body">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label for="body_font" class="form-label">Gövde Fontu</label>
                            <select id="body_font" name="settings[body_font]" class="form-input w-full">
                                {% set bodyFontVal = settings.body_font|default('Inter') %}
                                <option value="Inter" {{ bodyFontVal == 'Inter' ? 'selected' : '' }}>Inter</option>
                                <option value="Roboto" {{ bodyFontVal == 'Roboto' ? 'selected' : '' }}>Roboto</option>
                                <option value="Open Sans" {{ bodyFontVal == 'Open Sans' ? 'selected' : '' }}>Open Sans</option>
                                <option value="Noto Sans" {{ bodyFontVal == 'Noto Sans' ? 'selected' : '' }}>Noto Sans</option>
                                <option value="Lato" {{ bodyFontVal == 'Lato' ? 'selected' : '' }}>Lato</option>
                                <option value="Source Sans Pro" {{ bodyFontVal == 'Source Sans Pro' ? 'selected' : '' }}>Source Sans Pro</option>
                            </select>
                        </div>
                        <div>
                            <label for="heading_font" class="form-label">Başlık Fontu</label>
                            <select id="heading_font" name="settings[heading_font]" class="form-input w-full">
                                {% set headingFontVal = settings.heading_font|default('Inter') %}
                                <option value="Inter" {{ headingFontVal == 'Inter' ? 'selected' : '' }}>Inter</option>
                                <option value="Roboto" {{ headingFontVal == 'Roboto' ? 'selected' : '' }}>Roboto</option>
                                <option value="Montserrat" {{ headingFontVal == 'Montserrat' ? 'selected' : '' }}>Montserrat</option>
                                <option value="Poppins" {{ headingFontVal == 'Poppins' ? 'selected' : '' }}>Poppins</option>
                                <option value="Playfair Display" {{ headingFontVal == 'Playfair Display' ? 'selected' : '' }}>Playfair Display</option>
                                <option value="Merriweather" {{ headingFontVal == 'Merriweather' ? 'selected' : '' }}>Merriweather</option>
                            </select>
                        </div>
                        <div>
                            <label for="font_size_base" class="form-label">Temel Font Boyutu</label>
                            <select id="font_size_base" name="settings[font_size_base]" class="form-input w-full">
                                {% set fontSizeVal = settings.font_size_base|default('16') %}
                                <option value="14" {{ fontSizeVal == '14' ? 'selected' : '' }}>14px - Kucuk</option>
                                <option value="15" {{ fontSizeVal == '15' ? 'selected' : '' }}>15px - Orta Kucuk</option>
                                <option value="16" {{ fontSizeVal == '16' ? 'selected' : '' }}>16px - Normal</option>
                                <option value="17" {{ fontSizeVal == '17' ? 'selected' : '' }}>17px - Orta Buyuk</option>
                                <option value="18" {{ fontSizeVal == '18' ? 'selected' : '' }}>18px - Buyuk</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            {# Layout #}
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-columns mr-2 text-gray-500"></i> Yerlesim (Layout)</h3>
                </div>
                <div class="card-body">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                        <div>
                            <label for="sidebar_position" class="form-label">Sidebar Konumu</label>
                            <select id="sidebar_position" name="settings[sidebar_position]" class="form-input w-full">
                                {% set sidebarVal = settings.sidebar_position|default('right') %}
                                <option value="left" {{ sidebarVal == 'left' ? 'selected' : '' }}>Sol</option>
                                <option value="right" {{ sidebarVal == 'right' ? 'selected' : '' }}>Sag</option>
                                <option value="none" {{ sidebarVal == 'none' ? 'selected' : '' }}>Yok</option>
                            </select>
                        </div>
                        <div>
                            <label for="header_style" class="form-label">Header Stili</label>
                            <select id="header_style" name="settings[header_style]" class="form-input w-full">
                                {% set headerStyleVal = settings.header_style|default('classic') %}
                                <option value="classic" {{ headerStyleVal == 'classic' ? 'selected' : '' }}>Klasik</option>
                                <option value="modern" {{ headerStyleVal == 'modern' ? 'selected' : '' }}>Modern</option>
                                <option value="minimal" {{ headerStyleVal == 'minimal' ? 'selected' : '' }}>Minimal</option>
                            </select>
                        </div>
                        <div>
                            <label for="footer_columns" class="form-label">Footer Kolon Sayısı</label>
                            <select id="footer_columns" name="settings[footer_columns]" class="form-input w-full">
                                {% set footerColVal = settings.footer_columns|default('3') %}
                                <option value="1" {{ footerColVal == '1' ? 'selected' : '' }}>1 Kolon</option>
                                <option value="2" {{ footerColVal == '2' ? 'selected' : '' }}>2 Kolon</option>
                                <option value="3" {{ footerColVal == '3' ? 'selected' : '' }}>3 Kolon</option>
                                <option value="4" {{ footerColVal == '4' ? 'selected' : '' }}>4 Kolon</option>
                            </select>
                        </div>
                        <div class="flex items-end">
                            <label class="flex items-center gap-3 cursor-pointer pb-2">
                                <input type="checkbox" name="settings[show_breadcrumb]" value="1"
                                       {{ settings.show_breadcrumb|default('1') == '1' ? 'checked' : '' }}
                                       class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                                <span class="form-label mb-0">Breadcrumb Goster</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            {# Sosyal Medya (Social) #}
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-share-alt mr-2 text-gray-500"></i> Sosyal Medya</h3>
                </div>
                <div class="card-body">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label for="facebook_url" class="form-label"><i class="fab fa-facebook text-blue-600 mr-1"></i> Facebook</label>
                            <input type="url" id="facebook_url" name="settings[facebook_url]"
                                   value="{{ settings.facebook_url|default('') }}"
                                   class="form-input w-full"
                                   placeholder="https://facebook.com/...">
                        </div>
                        <div>
                            <label for="twitter_url" class="form-label"><i class="fab fa-twitter text-sky-500 mr-1"></i> Twitter / X</label>
                            <input type="url" id="twitter_url" name="settings[twitter_url]"
                                   value="{{ settings.twitter_url|default('') }}"
                                   class="form-input w-full"
                                   placeholder="https://twitter.com/...">
                        </div>
                        <div>
                            <label for="instagram_url" class="form-label"><i class="fab fa-instagram text-pink-500 mr-1"></i> Instagram</label>
                            <input type="url" id="instagram_url" name="settings[instagram_url]"
                                   value="{{ settings.instagram_url|default('') }}"
                                   class="form-input w-full"
                                   placeholder="https://instagram.com/...">
                        </div>
                        <div>
                            <label for="youtube_url" class="form-label"><i class="fab fa-youtube text-red-600 mr-1"></i> YouTube</label>
                            <input type="url" id="youtube_url" name="settings[youtube_url]"
                                   value="{{ settings.youtube_url|default('') }}"
                                   class="form-input w-full"
                                   placeholder="https://youtube.com/...">
                        </div>
                        <div>
                            <label for="telegram_url" class="form-label"><i class="fab fa-telegram text-blue-500 mr-1"></i> Telegram</label>
                            <input type="url" id="telegram_url" name="settings[telegram_url]"
                                   value="{{ settings.telegram_url|default('') }}"
                                   class="form-input w-full"
                                   placeholder="https://t.me/...">
                        </div>
                    </div>
                </div>
            </div>

            {# Submit #}
            <div class="flex justify-end">
                <button type="submit" class="btn-primary">
                    <i class="fas fa-save mr-2"></i> Tema Ayarlarını Kaydet
                </button>
            </div>
        </div>
    </form>

    <script>
        function themeSettings() {
            return {
                colors: {
                    primary_color: '{{ settings.primary_color|default('#3b82f6') }}',
                    secondary_color: '{{ settings.secondary_color|default('#6b7280') }}',
                    header_bg: '{{ settings.header_bg|default('#ffffff') }}',
                    footer_bg: '{{ settings.footer_bg|default('#1f2937') }}',
                    accent_color: '{{ settings.accent_color|default('#ef4444') }}'
                }
            }
        }
    </script>
{% endblock %}
