@extends('admin.layout')

@section('title', 'Yeni Tema Oluştur')

@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">🎨 Yeni Tema Oluştur</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.store') }}" method="POST">
        @csrf

        <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') }}" 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') }}" 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') }}</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', 0) }}" 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="#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', '#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="#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', '#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="#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', '#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="#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', '#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="#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', '#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="#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', '#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', 'linear-gradient(135deg, #0f172a 0%, #1a2744 50%, #1a3a52 100%)') }}"
                                   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') == 'modern' ? 'selected' : '' }}>Modern</option>
                                        <option value="classic" {{ old('hero_style') == 'classic' ? 'selected' : '' }}>Classic</option>
                                        <option value="gradient" {{ old('hero_style') == 'gradient' ? 'selected' : '' }}>Gradient</option>
                                        <option value="animated" {{ old('hero_style') == 'animated' ? 'selected' : '' }}>Animated</option>
                                        <option value="minimal" {{ old('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') == 'elevated' ? 'selected' : '' }}>Elevated (Gölgeli)</option>
                                        <option value="flat" {{ old('card_style') == 'flat' ? 'selected' : '' }}>Flat (Düz)</option>
                                        <option value="outlined" {{ old('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') == 'gradient' ? 'selected' : '' }}>Gradient</option>
                                        <option value="solid" {{ old('button_style') == 'solid' ? 'selected' : '' }}>Solid</option>
                                        <option value="outlined" {{ old('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') == 'Inter' ? 'selected' : '' }}>Inter (Varsayılan)</option>
                                <option value="Poppins" {{ old('font_family') == 'Poppins' ? 'selected' : '' }}>Poppins</option>
                                <option value="Roboto" {{ old('font_family') == 'Roboto' ? 'selected' : '' }}>Roboto</option>
                                <option value="Georgia" {{ old('font_family') == 'Georgia' ? 'selected' : '' }}>Georgia (Serif)</option>
                                <option value="system-ui" {{ old('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', true) ? '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') }}</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') ? '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>
                        <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>
                    </div>
                </div>

                <!-- Hazır Temalar -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header"><strong>🚀 Hızlı Başlangıç</strong></div>
                    <div class="card-body">
                        <p class="small text-muted mb-3">Hazır bir tema şablonu seçin:</p>
                        <div class="d-grid gap-2">
                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="applyPreset('modern')">
                                🌑 Modern Dark
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="applyPreset('classic')">
                                ☀️ Classic Light
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-dark" onclick="applyPreset('minimal')">
                                ◻️ Minimal
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-warning" onclick="applyPreset('colorful')">
                                🌈 Colorful
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Kaydet -->
                <div class="d-grid">
                    <button type="submit" class="btn btn-primary btn-lg">
                        <i class="fas fa-save"></i> Temayı Kaydet
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
const presets = {
    modern: {
        name: 'modern',
        label: 'Modern Dark',
        hero_bg_gradient: 'linear-gradient(135deg, #0f172a 0%, #1a2744 50%, #1a3a52 100%)',
        hero_title_color: '#ffffff',
        primary_color: '#3b82f6',
        accent_color: '#2563eb',
        background_color: '#ffffff',
        text_color: '#0f172a',
        border_color: '#e5e7eb',
        hero_style: 'modern',
        card_style: 'elevated',
        button_style: 'gradient',
        font_family: 'Inter',
        show_animations: true,
    },
    classic: {
        name: 'classic',
        label: 'Classic Light',
        hero_bg_gradient: 'linear-gradient(180deg, #f8fafc 0%, #ffffff 100%)',
        hero_title_color: '#1e293b',
        primary_color: '#1e293b',
        accent_color: '#334155',
        background_color: '#ffffff',
        text_color: '#1e293b',
        border_color: '#e2e8f0',
        hero_style: 'classic',
        card_style: 'flat',
        button_style: 'solid',
        font_family: 'Georgia',
        show_animations: false,
    },
    minimal: {
        name: 'minimal',
        label: 'Minimal',
        hero_bg_gradient: 'linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%)',
        hero_title_color: '#111111',
        primary_color: '#111111',
        accent_color: '#333333',
        background_color: '#fafafa',
        text_color: '#111111',
        border_color: '#eeeeee',
        hero_style: 'minimal',
        card_style: 'outlined',
        button_style: 'outlined',
        font_family: 'system-ui',
        show_animations: false,
    },
    colorful: {
        name: 'colorful',
        label: 'Colorful',
        hero_bg_gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%)',
        hero_title_color: '#ffffff',
        primary_color: '#667eea',
        accent_color: '#764ba2',
        background_color: '#faf5ff',
        text_color: '#1a1a2e',
        border_color: '#e9d5ff',
        hero_style: 'gradient',
        card_style: 'elevated',
        button_style: 'gradient',
        font_family: 'Poppins',
        show_animations: true,
    },
};

function applyPreset(name) {
    const p = presets[name];
    if (!p) return;

    document.getElementById('name').value = p.name;
    document.getElementById('label').value = p.label;
    document.getElementById('hero_bg_gradient').value = p.hero_bg_gradient;
    document.getElementById('hero_title_color').value = p.hero_title_color;
    document.getElementById('primary_color').value = p.primary_color;
    document.getElementById('accent_color').value = p.accent_color;
    document.getElementById('background_color').value = p.background_color;
    document.getElementById('text_color').value = p.text_color;
    document.getElementById('border_color').value = p.border_color;

    // Selects
    document.getElementById('hero_style').value = p.hero_style;
    document.getElementById('card_style').value = p.card_style;
    document.getElementById('button_style').value = p.button_style;
    document.getElementById('font_family').value = p.font_family;

    // Checkbox
    document.getElementById('show_animations').checked = p.show_animations;

    // Color pickers
    document.getElementById('primary_color_picker').value = p.primary_color;
    document.getElementById('accent_color_picker').value = p.accent_color;
    document.getElementById('bg_color_picker').value = p.background_color;
    document.getElementById('text_color_picker').value = p.text_color;
    document.getElementById('border_color_picker').value = p.border_color;
    document.getElementById('hero_title_color_picker').value = p.hero_title_color;
}
</script>
@endsection
