@extends('admin.layout')

@section('title', 'Header/Footer Düzenle: ' . ($setting->label ?? $setting->section))

@section('content')
<div class="page-header">
    <div>
        <a href="{{ route('admin.header-footer.index') }}" class="back-link">
            <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"/>
            </svg>
            Header/Footer Listesi
        </a>
        <h1 class="page-title">{{ $sections[$setting->section] ?? $setting->section }} Düzenle</h1>
        <p class="page-subtitle">Section: <code>{{ $setting->section }}</code></p>
    </div>
</div>

@if($errors->any())
    <div class="alert alert-danger">
        @foreach($errors->all() as $error)
            <div>{{ $error }}</div>
        @endforeach
    </div>
@endif

<form method="POST" action="{{ route('admin.header-footer.update', $setting) }}">
    @csrf
    @method('PUT')

    <div class="form-layout">
        {{-- Left Column --}}
        <div class="form-main">

            {{-- General Settings --}}
            <div class="form-card">
                <div class="form-card-header">
                    <h2 class="form-card-title">Genel Ayarlar</h2>
                </div>
                <div class="form-card-body">
                    <div class="form-group">
                        <label class="form-label">Etiket <span class="required">*</span></label>
                        <input type="text" name="label" value="{{ old('label', $setting->label) }}" class="form-input" required maxlength="100" placeholder="örn: Header (Üst Menü)">
                    </div>

                    <div class="form-group">
                        <label class="form-label">Sıra</label>
                        <input type="number" name="sort_order" value="{{ old('sort_order', $setting->sort_order ?? 0) }}" class="form-input" min="0" style="width:100px;">
                    </div>

                    <div class="toggle-group">
                        <div class="toggle-item-row">
                            <div>
                                <div class="toggle-label">Aktif/Pasif</div>
                                <div class="toggle-desc">Bu bölümü tamamen gizle/göster</div>
                            </div>
                            <label class="switch">
                                <input type="checkbox" name="is_enabled" value="1" {{ old('is_enabled', $setting->is_enabled) ? 'checked' : '' }}>
                                <span class="slider"></span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            @if($setting->section === 'header')
            {{-- Header-Specific Settings --}}
            <div class="form-card">
                <div class="form-card-header">
                    <h2 class="form-card-title">Header Bileşenleri</h2>
                    <p class="form-card-subtitle">Hangi öğelerin görüntüleneceğini seçin</p>
                </div>
                <div class="form-card-body">
                    <div class="toggle-group">
                        <div class="toggle-item-row">
                            <div>
                                <div class="toggle-label">Logo</div>
                                <div class="toggle-desc">Sol taraftaki site logosu ve adı</div>
                            </div>
                            <label class="switch">
                                <input type="checkbox" name="show_logo" value="1" {{ old('show_logo', $setting->show_logo) ? 'checked' : '' }}>
                                <span class="slider"></span>
                            </label>
                        </div>

                        <div class="toggle-item-row">
                            <div>
                                <div class="toggle-label">Navigasyon Menüsü</div>
                                <div class="toggle-desc">Modül linkleri (Blog, Forum, vb.)</div>
                            </div>
                            <label class="switch">
                                <input type="checkbox" name="show_navigation" value="1" {{ old('show_navigation', $setting->show_navigation) ? 'checked' : '' }}>
                                <span class="slider"></span>
                            </label>
                        </div>

                        <div class="toggle-item-row">
                            <div>
                                <div class="toggle-label">Arama Kutusu</div>
                                <div class="toggle-desc">Üst menüdeki arama formu</div>
                            </div>
                            <label class="switch">
                                <input type="checkbox" name="show_search" value="1" {{ old('show_search', $setting->show_search) ? 'checked' : '' }}>
                                <span class="slider"></span>
                            </label>
                        </div>

                        <div class="toggle-item-row">
                            <div>
                                <div class="toggle-label">Giriş / Kayıt Butonları</div>
                                <div class="toggle-desc">Ziyaretçilere gösterilen giriş/kayıt butonları</div>
                            </div>
                            <label class="switch">
                                <input type="checkbox" name="show_auth_buttons" value="1" {{ old('show_auth_buttons', $setting->show_auth_buttons) ? 'checked' : '' }}>
                                <span class="slider"></span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-card">
                <div class="form-card-header">
                    <h2 class="form-card-title">Özel CSS</h2>
                    <p class="form-card-subtitle">Header için ek CSS stilleri (isteğe bağlı)</p>
                </div>
                <div class="form-card-body">
                    <div class="form-group">
                        <textarea name="custom_css" class="form-textarea code-textarea" rows="6" placeholder="/* Özel CSS buraya */&#10;.site-navbar { background: #1e3a5f; }">{{ old('custom_css', $setting->custom_css) }}</textarea>
                        <p class="form-hint">Bu CSS yalnızca header bölümüne uygulanır.</p>
                    </div>
                </div>
            </div>

            @else
            {{-- Footer-Specific Settings --}}
            <div class="form-card">
                <div class="form-card-header">
                    <h2 class="form-card-title">Footer Bölümleri</h2>
                    <p class="form-card-subtitle">Hangi bölümlerin görüntüleneceğini seçin</p>
                </div>
                <div class="form-card-body">
                    <div class="toggle-group">
                        <div class="toggle-item-row">
                            <div>
                                <div class="toggle-label">Sosyal Medya Linkleri</div>
                                <div class="toggle-desc">Twitter, Instagram, Facebook, YouTube ikonları</div>
                            </div>
                            <label class="switch">
                                <input type="checkbox" name="show_social_links" value="1" {{ old('show_social_links', $setting->show_social_links) ? 'checked' : '' }}>
                                <span class="slider"></span>
                            </label>
                        </div>

                        <div class="toggle-item-row">
                            <div>
                                <div class="toggle-label">Platform Linkleri</div>
                                <div class="toggle-desc">Blog, Forum, Kütüphane, Mülakat</div>
                            </div>
                            <label class="switch">
                                <input type="checkbox" name="show_platform_links" value="1" {{ old('show_platform_links', $setting->show_platform_links) ? 'checked' : '' }}>
                                <span class="slider"></span>
                            </label>
                        </div>

                        <div class="toggle-item-row">
                            <div>
                                <div class="toggle-label">Araçlar Linkleri</div>
                                <div class="toggle-desc">Hesaplamalar, BMI, KPSS, Şafak Vakti</div>
                            </div>
                            <label class="switch">
                                <input type="checkbox" name="show_tools_links" value="1" {{ old('show_tools_links', $setting->show_tools_links) ? 'checked' : '' }}>
                                <span class="slider"></span>
                            </label>
                        </div>

                        <div class="toggle-item-row">
                            <div>
                                <div class="toggle-label">Kurumsal Linkler</div>
                                <div class="toggle-desc">Hakkımızda, Gizlilik, SSS</div>
                            </div>
                            <label class="switch">
                                <input type="checkbox" name="show_corporate_links" value="1" {{ old('show_corporate_links', $setting->show_corporate_links) ? 'checked' : '' }}>
                                <span class="slider"></span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-card">
                <div class="form-card-header">
                    <h2 class="form-card-title">Footer İçeriği</h2>
                </div>
                <div class="form-card-body">
                    <div class="form-group">
                        <label class="form-label">Marka Açıklaması</label>
                        <textarea name="brand_description" class="form-textarea" rows="3" maxlength="1000" placeholder="Siteniz hakkında kısa bir açıklama...">{{ old('brand_description', $setting->brand_description) }}</textarea>
                        <p class="form-hint">Footer'ın sol tarafında logo altında görünür.</p>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Telif Hakkı Metni</label>
                        <input type="text" name="copyright_text" value="{{ old('copyright_text', $setting->copyright_text) }}" class="form-input" maxlength="255" placeholder="Örn: Tüm hakları saklıdır.">
                        <p class="form-hint">Boş bırakırsanız varsayılan metin kullanılır.</p>
                    </div>
                </div>
            </div>

            <div class="form-card">
                <div class="form-card-header">
                    <h2 class="form-card-title">Özel HTML</h2>
                    <p class="form-card-subtitle">Footer'a özel HTML ekleyin (isteğe bağlı)</p>
                </div>
                <div class="form-card-body">
                    <div class="form-group">
                        <textarea name="custom_html" class="form-textarea code-textarea" rows="6" placeholder="<!-- Özel HTML buraya -->&#10;<div class=&quot;my-widget&quot;>...</div>">{{ old('custom_html', $setting->custom_html) }}</textarea>
                        <p class="form-hint">Bu HTML footer'ın en altına eklenir.</p>
                    </div>
                </div>
            </div>
            @endif

        </div>

        {{-- Right Column: Save --}}
        <div class="form-sidebar">
            <div class="form-card sticky-card">
                <div class="form-card-header">
                    <h2 class="form-card-title">Kaydet</h2>
                </div>
                <div class="form-card-body">
                    <button type="submit" class="btn btn-primary btn-full">
                        <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
                        </svg>
                        Değişiklikleri Kaydet
                    </button>
                    <a href="{{ route('admin.header-footer.index') }}" class="btn btn-outline btn-full" style="margin-top:8px;">İptal</a>
                </div>
            </div>

            <div class="form-card" style="margin-top:16px;">
                <div class="form-card-header">
                    <h2 class="form-card-title">Bilgi</h2>
                </div>
                <div class="form-card-body">
                    <div class="info-list">
                        <div class="info-item">
                            <span class="info-label">Section</span>
                            <span class="info-value">{{ $setting->section }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">Durum</span>
                            <span class="info-value {{ $setting->is_enabled ? 'text-success' : 'text-danger' }}">
                                {{ $setting->is_enabled ? 'Aktif' : 'Pasif' }}
                            </span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">Son Güncelleme</span>
                            <span class="info-value">{{ $setting->updated_at?->format('d.m.Y H:i') ?? 'Bilinmiyor' }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<style>
.back-link { display: inline-flex; align-items: center; gap: 6px; color: #6b7280; font-size: 14px; text-decoration: none; margin-bottom: 8px; }
.back-link:hover { color: #2563eb; }
.page-title { font-size: 22px; font-weight: 700; color: #111827; margin: 0 0 4px; }
.page-subtitle { color: #9ca3af; font-size: 13px; margin: 0; }
.page-subtitle code { background: #f3f4f6; padding: 2px 6px; border-radius: 4px; font-size: 12px; }

.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; font-size: 14px; }
.alert-danger { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; }

.form-layout { display: grid; grid-template-columns: 1fr 280px; gap: 24px; align-items: start; }
@media (max-width: 900px) { .form-layout { grid-template-columns: 1fr; } }

.form-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; margin-bottom: 20px; }
.form-card-header { padding: 16px 20px 14px; border-bottom: 1px solid #f1f5f9; }
.form-card-title { font-size: 15px; font-weight: 600; color: #111827; margin: 0 0 2px; }
.form-card-subtitle { font-size: 13px; color: #9ca3af; margin: 0; }
.form-card-body { padding: 20px; }

.form-group { margin-bottom: 18px; }
.form-group:last-child { margin-bottom: 0; }
.form-label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.required { color: #ef4444; }
.form-input { width: 100%; padding: 9px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; font-family: inherit; color: #111827; background: #fff; transition: all 0.2s; }
.form-input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.form-textarea { width: 100%; padding: 9px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; font-family: inherit; color: #111827; background: #fff; transition: all 0.2s; resize: vertical; }
.form-textarea:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.code-textarea { font-family: 'Courier New', Consolas, monospace; font-size: 13px; background: #0f172a; color: #e2e8f0; border-color: #334155; }
.code-textarea:focus { border-color: #3b82f6; }
.form-hint { font-size: 12px; color: #9ca3af; margin-top: 5px; }

/* Toggle Switch */
.toggle-group { display: flex; flex-direction: column; gap: 1px; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
.toggle-item-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: #fff; border-bottom: 1px solid #f1f5f9; transition: background 0.15s; }
.toggle-item-row:last-child { border-bottom: none; }
.toggle-item-row:hover { background: #f9fafb; }
.toggle-label { font-size: 14px; font-weight: 500; color: #111827; margin-bottom: 2px; }
.toggle-desc { font-size: 12px; color: #9ca3af; }

.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #d1d5db; border-radius: 24px; transition: 0.3s; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.3s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
input:checked + .slider { background: #2563eb; }
input:checked + .slider:before { transform: translateX(20px); }

/* Sidebar */
.sticky-card { position: sticky; top: 20px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; border: none; transition: all 0.15s; }
.btn-primary { background: linear-gradient(135deg, #2563eb, #3b82f6); color: white; }
.btn-primary:hover { box-shadow: 0 4px 12px rgba(37,99,235,0.3); }
.btn-outline { background: white; border: 1px solid #d1d5db; color: #374151; }
.btn-outline:hover { background: #f9fafb; border-color: #9ca3af; }
.btn-full { width: 100%; }

.info-list { display: flex; flex-direction: column; gap: 10px; }
.info-item { display: flex; justify-content: space-between; font-size: 13px; }
.info-label { color: #9ca3af; }
.info-value { font-weight: 500; color: #374151; }
.text-success { color: #15803d; }
.text-danger { color: #dc2626; }
</style>
@endsection
