@extends('admin.layout')

@section('title', 'Tema Düzenle: ' . $theme->label)

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h1 class="h3">🎨 Tema Düzenle: {{ $theme->label }}</h1>
                <a href="{{ route('admin.homepage-themes.index') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Geri Dön
                </a>
            </div>
        </div>
    </div>

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

    <form action="{{ route('admin.homepage-themes.update', $theme) }}" method="POST">
        @csrf
        @method('PUT')

        <div class="row">
            <!-- Sol Kolon: Temel Bilgiler -->
            <div class="col-lg-8">
                <div class="card shadow-sm mb-4">
                    <div class="card-header"><strong>Temel Bilgiler</strong></div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="name" class="form-label">Tema Adı (Slug) <span class="text-danger">*</span></label>
                                    <input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror"
                                           value="{{ old('name', $theme->name) }}" placeholder="modern, classic, minimal vb." required>
                                    @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    <small class="text-muted">Sadece küçük harf, rakam ve tire kullanın.</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="label" class="form-label">Tema Etiketi <span class="text-danger">*</span></label>
                                    <input type="text" name="label" id="label" class="form-control @error('label') is-invalid @enderror"
                                           value="{{ old('label', $theme->label) }}" placeholder="Modern Tema" required>
                                    @error('label')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="description" class="form-label">Açıklama</label>
                            <textarea name="description" id="description" class="form-control" rows="2" placeholder="Tema hakkında kısa açıklama...">{{ old('description', $theme->description) }}</textarea>
                        </div>
                        <div class="mb-3">
                            <label for="sort_order" class="form-label">Sıralama</label>
                            <input type="number" name="sort_order" id="sort_order" class="form-control" value="{{ old('sort_order', $theme->sort_order) }}" min="0">
                        </div>
                    </div>
                </div>

                <!-- Hero Renkleri -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header"><strong>🎨 Renk Ayarları</strong></div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="primary_color" class="form-label">Ana Renk</label>
                                    <div class="input-group">
                                        <input type="color" class="form-control form-control-color" id="primary_color_picker" value="{{ old('primary_color', $theme->primary_color ?? '#3b82f6') }}" oninput="document.getElementById('primary_color').value=this.value">
                                        <input type="text" name="primary_color" id="primary_color" class="form-control" value="{{ old('primary_color', $theme->primary_color ?? '#3b82f6') }}">
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="accent_color" class="form-label">Vurgu Renk</label>
                                    <div class="input-group">
                                        <input type="color" class="form-control form-control-color" id="accent_color_picker" value="{{ old('accent_color', $theme->accent_color ?? '#2563eb') }}" oninput="document.getElementById('accent_color').value=this.value">
                                        <input type="text" name="accent_color" id="accent_color" class="form-control" value="{{ old('accent_color', $theme->accent_color ?? '#2563eb') }}">
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="background_color" class="form-label">Arka Plan Rengi</label>
                                    <div class="input-group">
                                        <input type="color" class="form-control form-control-color" id="bg_color_picker" value="{{ old('background_color', $theme->background_color ?? '#ffffff') }}" oninput="document.getElementById('background_color').value=this.value">
                                        <input type="text" name="background_color" id="background_color" class="form-control" value="{{ old('background_color', $theme->background_color ?? '#ffffff') }}">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="text_color" class="form-label">Metin Rengi</label>
                                    <div class="input-group">
                                        <input type="color" class="form-control form-control-color" id="text_color_picker" value="{{ old('text_color', $theme->text_color ?? '#0f172a') }}" oninput="document.getElementById('text_color').value=this.value">
                                        <input type="text" name="text_color" id="text_color" class="form-control" value="{{ old('text_color', $theme->text_color ?? '#0f172a') }}">
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="border_color" class="form-label">Kenar Rengi</label>
                                    <div class="input-group">
                                        <input type="color" class="form-control form-control-color" id="border_color_picker" value="{{ old('border_color', $theme->border_color ?? '#e5e7eb') }}" oninput="document.getElementById('border_color').value=this.value">
                                        <input type="text" name="border_color" id="border_color" class="form-control" value="{{ old('border_color', $theme->border_color ?? '#e5e7eb') }}">
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="hero_title_color" class="form-label">Hero Başlık Rengi</label>
                                    <div class="input-group">
                                        <input type="color" class="form-control form-control-color" id="hero_title_color_picker" value="{{ old('hero_title_color', $theme->hero_title_color ?? '#ffffff') }}" oninput="document.getElementById('hero_title_color').value=this.value">
                                        <input type="text" name="hero_title_color" id="hero_title_color" class="form-control" value="{{ old('hero_title_color', $theme->hero_title_color ?? '#ffffff') }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="hero_bg_gradient" class="form-label">Hero Arka Plan (CSS gradient/renk)</label>
                            <input type="text" name="hero_bg_gradient" id="hero_bg_gradient" class="form-control font-monospace"
                                   value="{{ old('hero_bg_gradient', $theme->hero_bg_gradient) }}"
                                   placeholder="linear-gradient(135deg, #0f172a 0%, #1e293b 100%)">
                            <small class="text-muted">CSS gradient syntax kullanabilirsiniz.</small>
                        </div>
                    </div>
                </div>

                <!-- Stil Ayarları -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header"><strong>✨ Stil Ayarları</strong></div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="hero_style" class="form-label">Hero Stili</label>
                                    <select name="hero_style" id="hero_style" class="form-select">
                                        <option value="modern" {{ old('hero_style', $theme->hero_style) == 'modern' ? 'selected' : '' }}>Modern</option>
                                        <option value="classic" {{ old('hero_style', $theme->hero_style) == 'classic' ? 'selected' : '' }}>Classic</option>
                                        <option value="gradient" {{ old('hero_style', $theme->hero_style) == 'gradient' ? 'selected' : '' }}>Gradient</option>
                                        <option value="animated" {{ old('hero_style', $theme->hero_style) == 'animated' ? 'selected' : '' }}>Animated</option>
                                        <option value="minimal" {{ old('hero_style', $theme->hero_style) == 'minimal' ? 'selected' : '' }}>Minimal</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="card_style" class="form-label">Kart Stili</label>
                                    <select name="card_style" id="card_style" class="form-select">
                                        <option value="elevated" {{ old('card_style', $theme->card_style) == 'elevated' ? 'selected' : '' }}>Elevated (Gölgeli)</option>
                                        <option value="flat" {{ old('card_style', $theme->card_style) == 'flat' ? 'selected' : '' }}>Flat (Düz)</option>
                                        <option value="outlined" {{ old('card_style', $theme->card_style) == 'outlined' ? 'selected' : '' }}>Outlined (Çerçeveli)</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="button_style" class="form-label">Buton Stili</label>
                                    <select name="button_style" id="button_style" class="form-select">
                                        <option value="gradient" {{ old('button_style', $theme->button_style) == 'gradient' ? 'selected' : '' }}>Gradient</option>
                                        <option value="solid" {{ old('button_style', $theme->button_style) == 'solid' ? 'selected' : '' }}>Solid</option>
                                        <option value="outlined" {{ old('button_style', $theme->button_style) == 'outlined' ? 'selected' : '' }}>Outlined</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="font_family" class="form-label">Font Ailesi</label>
                            <select name="font_family" id="font_family" class="form-select">
                                <option value="Inter" {{ old('font_family', $theme->font_family) == 'Inter' ? 'selected' : '' }}>Inter (Varsayılan)</option>
                                <option value="Poppins" {{ old('font_family', $theme->font_family) == 'Poppins' ? 'selected' : '' }}>Poppins</option>
                                <option value="Roboto" {{ old('font_family', $theme->font_family) == 'Roboto' ? 'selected' : '' }}>Roboto</option>
                                <option value="Georgia" {{ old('font_family', $theme->font_family) == 'Georgia' ? 'selected' : '' }}>Georgia (Serif)</option>
                                <option value="system-ui" {{ old('font_family', $theme->font_family) == 'system-ui' ? 'selected' : '' }}>System UI</option>
                            </select>
                        </div>
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" name="show_animations" id="show_animations" {{ old('show_animations', $theme->show_animations) ? 'checked' : '' }}>
                            <label class="form-check-label" for="show_animations">Animasyonları Göster</label>
                        </div>
                    </div>
                </div>

                <!-- Özel CSS -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header"><strong>💻 Özel CSS</strong></div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="custom_css" class="form-label">Özel CSS Kodu</label>
                            <textarea name="custom_css" id="custom_css" class="form-control font-monospace" rows="8" placeholder="/* Özel CSS kodlarınızı buraya yazın */
.hero-section { ... }
.hp-module-card:hover { ... }">{{ old('custom_css', $theme->custom_css) }}</textarea>
                            <small class="text-muted">Bu CSS sadece ana sayfaya uygulanacaktır.</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sağ Kolon: Ayarlar -->
            <div class="col-lg-4">
                <div class="card shadow-sm mb-4">
                    <div class="card-header"><strong>⚙️ Durum Ayarları</strong></div>
                    <div class="card-body">
                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" name="is_active" id="is_active" {{ old('is_active', $theme->is_active) ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_active">
                                <strong>Aktif</strong><br>
                                <small class="text-muted">Bu temayı ana sayfada kullan</small>
                            </label>
                        </div>
                        @if($theme->is_active)
                        <div class="alert alert-success">
                            <i class="fas fa-check-circle"></i>
                            <small>Bu tema şu anda aktif.</small>
                        </div>
                        @else
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle"></i>
                            <small>Bir tema aktif edildiğinde diğer tüm temalar otomatik pasif olur.</small>
                        </div>
                        @endif
                    </div>
                </div>

                <!-- Önizleme -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header"><strong>👁️ Önizleme</strong></div>
                    <div class="card-body">
                        <a href="{{ route('admin.homepage-themes.preview', $theme) }}" class="btn btn-info w-100 mb-2" target="_blank">
                            <i class="fas fa-eye"></i> Ana Sayfada Önizle
                        </a>
                        <small class="text-muted">Yeni sekmede açılır ve kaydetmeden önizleme yapabilirsiniz.</small>
                    </div>
                </div>

                <!-- Kaydet -->
                <div class="d-grid">
                    <button type="submit" class="btn btn-primary btn-lg">
                        <i class="fas fa-save"></i> Değişiklikleri Kaydet
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection
