@extends('admin.layout')
@section('title', 'Crear Nueva Página')
@section('page-title', 'Yeni Sayfa Oluştur')

@section('content')
<div class="content-card">
    <form action="{{ route('admin.pages.store') }}"
          method="POST"
          enctype="multipart/form-data">
        @csrf

        <div class="row">
            <div class="col-md-8">
                <!-- Başlık -->
                <div class="mb-3">
                    <label for="title" class="form-label">Sayfa Başlığı <span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('title') is-invalid @enderror"
                           id="title" name="title" value="{{ old('title') }}" required>
                    @error('title')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Alt Başlık -->
                <div class="mb-3">
                    <label for="subtitle" class="form-label">Alt Başlık</label>
                    <input type="text" class="form-control @error('subtitle') is-invalid @enderror"
                           id="subtitle" name="subtitle" value="{{ old('subtitle') }}"
                           placeholder="Hero bölümünde görünecek alt başlık">
                    @error('subtitle')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Slug -->
                <div class="mb-3">
                    <label for="slug" class="form-label">Slug (URL)</label>
                    <input type="text" class="form-control @error('slug') is-invalid @enderror"
                           id="slug" name="slug" value="{{ old('slug') }}"
                           placeholder="Otomatik oluşturulacak">
                    <small class="form-text text-muted">Boş bırakırsanız başlıktan otomatik oluşturulur (örn: dogum-haritasi)</small>
                    @error('slug')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Sayfa Şablonu -->
                <div class="mb-3">
                    <label for="template_key" class="form-label">Sayfa Şablonu</label>
                    <div class="input-group">
                        <select class="form-select @error('template_key') is-invalid @enderror" id="template_key" name="template_key">
                            @foreach($templateOptions as $templateKey => $templateLabel)
                                <option value="{{ $templateKey }}" {{ old('template_key', \App\Models\Page::TEMPLATE_DEFAULT) === $templateKey ? 'selected' : '' }}>
                                    {{ $templateLabel }}
                                </option>
                            @endforeach
                        </select>
                        <button type="button" class="btn btn-outline-primary" id="apply-template-btn">Şablonu Uygula</button>
                    </div>
                    <small class="form-text text-muted">Şablon uygulandığında boş alanlar örnek içerikle doldurulur.</small>
                    @error('template_key')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>

                <div class="card mb-3" id="layout-builder-card" style="display: none;">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <strong>Şablon Kurucu (Doğum Haritası)</strong>
                        <small class="text-muted">Hero + Bölümler + Hazır Bileşenler</small>
                    </div>
                    <div class="card-body">
                        <input type="hidden" id="layout_config" name="layout_config" value="{{ old('layout_config') }}">

                        <h6 class="mb-3">Hero Ayarları</h6>
                        <div class="row g-3 mb-3 align-items-end">
                            <div class="col-md-6">
                                <label class="form-label" for="builder-hero-title">Hero Başlık</label>
                                <input type="text" class="form-control" id="builder-hero-title" placeholder="Başlık">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label" for="builder-hero-subtitle">Hero Alt Başlık</label>
                                <input type="text" class="form-control" id="builder-hero-subtitle" placeholder="Alt başlık">
                            </div>

                            <div class="col-md-3">
                                <label class="form-label" for="builder-hero-background-type">Hero Arka Plan Türü</label>
                                <select class="form-select" id="builder-hero-background-type">
                                    <option value="image">Görsel</option>
                                    <option value="solid">Düz Renk</option>
                                    <option value="gradient">Gradient</option>
                                </select>
                            </div>

                            <div class="col-md-3" id="builder-hero-solid-group">
                                <label class="form-label" for="builder-hero-background-color">Düz Renk</label>
                                <input type="color" class="form-control form-control-color" id="builder-hero-background-color" value="#1f2937">
                            </div>

                            <div class="col-md-6" id="builder-hero-gradient-group">
                                <label class="form-label d-block">Gradient Renkleri</label>
                                <div class="d-flex align-items-center gap-2">
                                    <div>
                                        <small class="text-muted d-block">Başlangıç</small>
                                        <input type="color" class="form-control form-control-color" id="builder-hero-gradient-from" value="#1f2937">
                                    </div>
                                    <div class="text-muted mt-3">→</div>
                                    <div>
                                        <small class="text-muted d-block">Bitiş</small>
                                        <input type="color" class="form-control form-control-color" id="builder-hero-gradient-to" value="#7c3aed">
                                    </div>
                                </div>
                            </div>

                            <div class="col-12" id="builder-hero-image-group">
                                <label class="form-label d-block">Hero Görseli</label>
                                <button type="button" class="btn btn-outline-secondary btn-sm" id="builder-open-hero-image-picker">
                                    Hero Görseli Seç
                                </button>
                                <small class="text-muted ms-2" id="builder-hero-image-file-name">Görsel seçilmedi</small>
                            </div>
                        </div>

                        <div class="row g-3 mb-3">
                            <div class="col-md-3">
                                <label class="form-label" for="builder-hero-title-color">Başlık Rengi</label>
                                <input type="color" class="form-control form-control-color" id="builder-hero-title-color" value="#ffffff">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label" for="builder-hero-subtitle-color">Alt Başlık Rengi</label>
                                <input type="color" class="form-control form-control-color" id="builder-hero-subtitle-color" value="#ffffff">
                            </div>
                        </div>

                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h6 class="mb-0">Hero Butonları</h6>
                                <button type="button" class="btn btn-outline-primary btn-sm" id="add-hero-button-btn">+ Buton Ekle</button>
                            </div>
                            <div id="builder-hero-buttons-container" class="d-grid gap-2"></div>
                        </div>

                        <h6 class="mb-2">Sayfa Bölümleri</h6>
                        <div class="d-flex flex-wrap gap-2 mb-3">
                            <button type="button" class="btn btn-outline-primary btn-sm" id="add-text-part-btn">+ Yazı Bölümü Ekle</button>
                            <button type="button" class="btn btn-outline-success btn-sm" id="add-elements-part-btn">+ Elementler Bölümü Ekle</button>
                            <button type="button" class="btn btn-outline-warning btn-sm" id="add-zodiac-part-btn">+ Burçlar Bölümü Ekle</button>
                        </div>

                        <div id="builder-sections-container" class="d-grid gap-2"></div>

                        <hr class="my-3">
                        <h6>Önizleme Akışı</h6>
                        <div class="border rounded p-3 bg-light" id="builder-preview"></div>
                    </div>
                </div>

                <!-- Kısa Açıklama -->
                <div class="mb-3">
                    <label for="excerpt" class="form-label">Kısa Açıklama</label>
                    <textarea class="form-control @error('excerpt') is-invalid @enderror"
                              id="excerpt" name="excerpt" rows="3"
                              placeholder="Sayfa hakkında kısa açıklama (SEO ve önizleme için)">{{ old('excerpt') }}</textarea>
                    @error('excerpt')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- İçerik (Yazı Alanı) -->
                <div class="mb-3">
                    <label for="content" class="form-label">Sayfa İçeriği</label>
                    <textarea class="form-control @error('content') is-invalid @enderror"
                              id="content" name="content" rows="20">{{ old('content') }}</textarea>
                    <small class="form-text text-muted">Şablon kurucuyu kullanırsanız bu alan otomatik oluşturulur. İsterseniz manuel HTML de yazabilirsiniz.</small>
                    @error('content')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Hero Görseli (Resim Ekleme Alanı) -->
                <div class="mb-3">
                    <label for="hero_image" class="form-label">Hero Görseli</label>
                    <input type="file" class="form-control @error('hero_image') is-invalid @enderror"
                           id="hero_image" name="hero_image" accept="image/*">
                    <small class="form-text text-muted">Arka plan türü Görsel seçiliyse yükleyin. Düz renk/gradient kullanacaksanız boş bırakabilirsiniz.</small>
                    @error('hero_image')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <div class="col-md-4">
                <!-- Üst Sayfa -->
                <div class="mb-3">
                    <label for="parent_id" class="form-label">Üst Sayfa</label>
                    <select class="form-select @error('parent_id') is-invalid @enderror"
                            id="parent_id" name="parent_id">
                        <option value="">Ana Sayfa (Üst sayfa yok)</option>
                        @foreach($allPages as $parentPage)
                            <option value="{{ $parentPage->id }}" {{ old('parent_id') == $parentPage->id ? 'selected' : '' }}>
                                {{ $parentPage->title }}
                            </option>
                        @endforeach
                    </select>
                    <small class="form-text text-muted">Bu sayfayı başka bir sayfanın alt sayfası yapmak için seçin</small>
                    @error('parent_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Sıralama -->
                <div class="mb-3">
                    <label for="order" class="form-label">Sıralama</label>
                    <input type="number" class="form-control @error('order') is-invalid @enderror"
                           id="order" name="order" value="{{ old('order', 0) }}" min="0">
                    <small class="form-text text-muted">Sayı ne kadar küçükse, o kadar üstte görünür (0 = en üst)</small>
                    @error('order')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Durum -->
                <div class="mb-3">
                    <label for="status" class="form-label">Durum <span class="text-danger">*</span></label>
                    <select class="form-select @error('status') is-invalid @enderror"
                            id="status" name="status" required>
                        <option value="draft" {{ old('status') == 'draft' ? 'selected' : '' }}>Taslak</option>
                        <option value="published" {{ old('status') == 'published' ? 'selected' : '' }}>Yayında</option>
                    </select>
                    @error('status')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Görünürlük -->
                <div class="mb-3">
                    <label for="visibility" class="form-label">Menüde Görünürlük <span class="text-danger">*</span></label>
                    <select class="form-select @error('visibility') is-invalid @enderror"
                            id="visibility" name="visibility" required>
                        <option value="none" {{ old('visibility') == 'none' ? 'selected' : '' }}>Gizli</option>
                        <option value="header" {{ old('visibility') == 'header' ? 'selected' : '' }}>Sadece Başlık Menüsü</option>
                        <option value="footer" {{ old('visibility') == 'footer' ? 'selected' : '' }}>Sadece Altbilgi Menüsü</option>
                        <option value="both" {{ old('visibility') == 'both' ? 'selected' : '' }}>Her İkisinde</option>
                    </select>
                    @error('visibility')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Menü Grubu -->
                <div class="mb-3">
                    <label for="menu_group" class="form-label">Menü Grubu</label>
                    <select class="form-select @error('menu_group') is-invalid @enderror" id="menu_group" name="menu_group">
                        <option value="">Grup Yok</option>
                        @foreach($menuGroupOptions as $groupKey => $groupLabel)
                            <option value="{{ $groupKey }}" {{ old('menu_group') === $groupKey ? 'selected' : '' }}>{{ $groupLabel }}</option>
                        @endforeach
                    </select>
                    <small class="form-text text-muted">Doğum Haritası alt menüsünde göstermek için uygun grubu seçin.</small>
                    @error('menu_group')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Menü Başlığı -->
                <div class="mb-3">
                    <label for="menu_label" class="form-label">Menüde Görünecek Başlık</label>
                    <input type="text" class="form-control @error('menu_label') is-invalid @enderror"
                           id="menu_label" name="menu_label" value="{{ old('menu_label') }}"
                           placeholder="Boş kalırsa sayfa başlığı kullanılır">
                    @error('menu_label')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Meta Title (SEO) -->
                <div class="mb-3">
                    <label for="meta_title" class="form-label">Meta Başlık (SEO)</label>
                    <input type="text" class="form-control @error('meta_title') is-invalid @enderror"
                           id="meta_title" name="meta_title" value="{{ old('meta_title') }}"
                           placeholder="Arama motorları için başlık">
                    <small class="form-text text-muted">Boş bırakırsanız sayfa başlığı kullanılır</small>
                    @error('meta_title')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Meta Description (SEO) -->
                <div class="mb-3">
                    <label for="meta_description" class="form-label">Meta Açıklama (SEO)</label>
                    <textarea class="form-control @error('meta_description') is-invalid @enderror"
                              id="meta_description" name="meta_description" rows="3"
                              placeholder="Arama motorları için açıklama">{{ old('meta_description') }}</textarea>
                    <small class="form-text text-muted">Maksimum 160 karakter önerilir</small>
                    @error('meta_description')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Meta Keywords (SEO) -->
                <div class="mb-3">
                    <label for="meta_keywords" class="form-label">Meta Anahtar Kelimeler (SEO)</label>
                    <input type="text" class="form-control @error('meta_keywords') is-invalid @enderror"
                           id="meta_keywords" name="meta_keywords" value="{{ old('meta_keywords') }}"
                           placeholder="kelime1, kelime2, kelime3">
                    @error('meta_keywords')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Buttons -->
        <div class="d-flex justify-content-between mt-4">
            <a href="{{ route('admin.pages.index') }}" class="btn btn-secondary">
                <i class="bi bi-arrow-left"></i> İptal
            </a>
            <div>
                <button type="button" id="preview-btn" class="btn btn-info me-2">
                    <i class="bi bi-eye"></i> Ön İzle
                </button>
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-check-circle"></i> Sayfa Oluştur
                </button>
            </div>
        </div>
    </form>
</div>

@push('scripts')
<script>
    const templatePresets = @json($templatePresets);
    const birthChartTemplates = ['birth_chart_article', 'birth_chart_guide'];

    // Slug otomatik oluşturma
    document.getElementById('title').addEventListener('input', function() {
        const slugInput = document.getElementById('slug');
        if (!slugInput.value || slugInput.dataset.autoGenerated === 'true') {
            const slug = this.value
                .toLowerCase()
                .replace(/ş/g, 's')
                .replace(/ğ/g, 'g')
                .replace(/ü/g, 'u')
                .replace(/ö/g, 'o')
                .replace(/ç/g, 'c')
                .replace(/ı/g, 'i')
                .replace(/[^a-z0-9]+/g, '-')
                .replace(/^-+|-+$/g, '');
            slugInput.value = slug;
            slugInput.dataset.autoGenerated = 'true';
        }
    });

    // Slug manuel değiştirildiğinde otomatik oluşturmayı durdur
    document.getElementById('slug').addEventListener('input', function() {
        this.dataset.autoGenerated = 'false';
    });

    function defaultBuilderState() {
        return {
            hero: {
                title: '',
                subtitle: '',
                background_type: 'image',
                background_color: '#1f2937',
                gradient_from: '#1f2937',
                gradient_to: '#7c3aed',
                title_color: '#ffffff',
                subtitle_color: '#ffffff',
                buttons: []
            },
            sections: []
        };
    }

    function normalizeHeroButtons(buttons) {
        if (!Array.isArray(buttons)) {
            return [];
        }

        return buttons
            .filter((button) => button && typeof button === 'object')
            .map((button) => ({
                text: String(button.text || ''),
                url: String(button.url || ''),
                bg_color: String(button.bg_color || '#ffffff'),
                text_color: String(button.text_color || '#1f2937')
            }));
    }

    function parseBuilderState(rawValue) {
        if (!rawValue) {
            return defaultBuilderState();
        }

        try {
            const parsed = typeof rawValue === 'string' ? JSON.parse(rawValue) : rawValue;
            if (!parsed || typeof parsed !== 'object') {
                return defaultBuilderState();
            }

            const state = {
                hero: {
                    ...defaultBuilderState().hero,
                    ...(parsed.hero || {})
                },
                sections: Array.isArray(parsed.sections) ? parsed.sections : []
            };

            state.hero.buttons = normalizeHeroButtons(state.hero.buttons);

            // Geriye dönük uyumluluk: eski tek buton alanlarını yeni diziye aktar.
            if (!state.hero.buttons.length && (state.hero.button_text || state.hero.button_url)) {
                state.hero.buttons.push({
                    text: String(state.hero.button_text || ''),
                    url: String(state.hero.button_url || ''),
                    bg_color: '#ffffff',
                    text_color: '#1f2937'
                });
            }

            return state;
        } catch (error) {
            return defaultBuilderState();
        }
    }

    let builderState = parseBuilderState(document.getElementById('layout_config').value);

    function isBirthChartTemplateSelected() {
        return birthChartTemplates.includes(document.getElementById('template_key').value);
    }

    function setBuilderVisibility() {
        document.getElementById('layout-builder-card').style.display = isBirthChartTemplateSelected() ? 'block' : 'none';
    }

    function updateBackgroundControlVisibility() {
        const type = document.getElementById('builder-hero-background-type').value;
        document.getElementById('builder-hero-solid-group').style.display = type === 'solid' ? 'block' : 'none';
        document.getElementById('builder-hero-gradient-group').style.display = type === 'gradient' ? 'block' : 'none';
        document.getElementById('builder-hero-image-group').style.display = type === 'image' ? 'block' : 'none';
    }

    function updateHeroImageFileName() {
        const heroImageInput = document.getElementById('hero_image');
        const heroImageNameLabel = document.getElementById('builder-hero-image-file-name');
        if (!heroImageInput || !heroImageNameLabel) {
            return;
        }

        heroImageNameLabel.textContent = heroImageInput.files && heroImageInput.files.length
            ? heroImageInput.files[0].name
            : 'Görsel seçilmedi';
    }

    function escapeHtml(value) {
        return String(value || '')
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
    }

    function syncHeroInputsFromState() {
        document.getElementById('builder-hero-title').value = builderState.hero.title || '';
        document.getElementById('builder-hero-subtitle').value = builderState.hero.subtitle || '';
        document.getElementById('builder-hero-background-type').value = builderState.hero.background_type || 'image';
        document.getElementById('builder-hero-background-color').value = builderState.hero.background_color || '#1f2937';
        document.getElementById('builder-hero-gradient-from').value = builderState.hero.gradient_from || '#1f2937';
        document.getElementById('builder-hero-gradient-to').value = builderState.hero.gradient_to || '#7c3aed';
        document.getElementById('builder-hero-title-color').value = builderState.hero.title_color || '#ffffff';
        document.getElementById('builder-hero-subtitle-color').value = builderState.hero.subtitle_color || '#ffffff';
        updateBackgroundControlVisibility();
    }

    function syncStateFromHeroInputs() {
        builderState.hero.title = document.getElementById('builder-hero-title').value || '';
        builderState.hero.subtitle = document.getElementById('builder-hero-subtitle').value || '';
        builderState.hero.background_type = document.getElementById('builder-hero-background-type').value || 'image';
        builderState.hero.background_color = document.getElementById('builder-hero-background-color').value || '#1f2937';
        builderState.hero.gradient_from = document.getElementById('builder-hero-gradient-from').value || '#1f2937';
        builderState.hero.gradient_to = document.getElementById('builder-hero-gradient-to').value || '#7c3aed';
        builderState.hero.title_color = document.getElementById('builder-hero-title-color').value || '#ffffff';
        builderState.hero.subtitle_color = document.getElementById('builder-hero-subtitle-color').value || '#ffffff';
        builderState.hero.buttons = normalizeHeroButtons(builderState.hero.buttons);

        updateBackgroundControlVisibility();
        renderBuilderPreview();
    }

    function createHeroButton() {
        return {
            text: 'Buton',
            url: '',
            bg_color: '#ffffff',
            text_color: '#1f2937'
        };
    }

    function renderHeroButtonsEditor() {
        const container = document.getElementById('builder-hero-buttons-container');
        const buttons = normalizeHeroButtons(builderState.hero.buttons);
        builderState.hero.buttons = buttons;

        if (!buttons.length) {
            container.innerHTML = '<div class="alert alert-secondary mb-0">Henüz hero butonu yok.</div>';
            return;
        }

        container.innerHTML = buttons.map((button, index) => `
            <div class="border rounded p-2">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <strong>Buton #${index + 1}</strong>
                    <button type="button" class="btn btn-sm btn-outline-danger" data-action="remove-hero-button" data-index="${index}">Sil</button>
                </div>
                <div class="row g-2 align-items-end">
                    <div class="col-md-4">
                        <label class="form-label small mb-0">Metin</label>
                        <input type="text" class="form-control form-control-sm" data-action="update-hero-button-text" data-index="${index}" value="${escapeHtml(button.text)}" placeholder="Örn: Haritamı Keşfet">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label small mb-0">Link</label>
                        <input type="text" class="form-control form-control-sm" data-action="update-hero-button-url" data-index="${index}" value="${escapeHtml(button.url)}" placeholder="Örn: /panel-preview-form/natal">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small mb-0">Arka Plan</label>
                        <input type="color" class="form-control form-control-color" data-action="update-hero-button-bg" data-index="${index}" value="${escapeHtml(button.bg_color)}">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small mb-0">Yazı</label>
                        <input type="color" class="form-control form-control-color" data-action="update-hero-button-text-color" data-index="${index}" value="${escapeHtml(button.text_color)}">
                    </div>
                </div>
            </div>
        `).join('');
    }

    function createTextPartSection() {
        return {
            type: 'text_part',
            heading: 'Yeni Bölüm Başlığı',
            text: 'Bu bölüme yazınızı ekleyin.',
            background_type: 'none',
            background_color: '#ffffff',
            gradient_from: '#f8fafc',
            gradient_to: '#eef2ff'
        };
    }

    function renderSectionEditor() {
        const container = document.getElementById('builder-sections-container');

        if (!builderState.sections.length) {
            container.innerHTML = '<div class="alert alert-secondary mb-0">Henüz bölüm yok. Yukarıdaki butonlarla bölüm ekleyebilirsiniz.</div>';
            return;
        }

        container.innerHTML = builderState.sections.map((section, index) => {
            if (section.type === 'text_part') {
                return `
                    <div class="border rounded p-2" data-section-index="${index}">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <strong>Yazı Bölümü #${index + 1}</strong>
                            <button type="button" class="btn btn-sm btn-outline-danger" data-action="remove-section" data-index="${index}">Sil</button>
                        </div>
                        <div class="row g-2">
                            <div class="col-md-6">
                                <input type="text" class="form-control form-control-sm" data-action="update-text-heading" data-index="${index}" value="${escapeHtml(section.heading || '')}" placeholder="Bölüm başlığı">
                            </div>
                            <div class="col-md-6">
                                <select class="form-select form-select-sm" data-action="update-text-bg-type" data-index="${index}">
                                    <option value="none" ${section.background_type === 'none' ? 'selected' : ''}>Arka plan yok</option>
                                    <option value="solid" ${section.background_type === 'solid' ? 'selected' : ''}>Düz renk</option>
                                    <option value="gradient" ${section.background_type === 'gradient' ? 'selected' : ''}>Gradient</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <textarea class="form-control form-control-sm" rows="3" data-action="update-text-content" data-index="${index}" placeholder="Bölüm yazısı">${escapeHtml(section.text || '')}</textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small mb-0">Düz Renk</label>
                                <input type="color" class="form-control form-control-color" data-action="update-text-bg-color" data-index="${index}" value="${escapeHtml(section.background_color || '#ffffff')}">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label small mb-0">Gradient Başlangıç</label>
                                <input type="color" class="form-control form-control-color" data-action="update-text-gradient-from" data-index="${index}" value="${escapeHtml(section.gradient_from || '#f8fafc')}">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label small mb-0">Gradient Bitiş</label>
                                <input type="color" class="form-control form-control-color" data-action="update-text-gradient-to" data-index="${index}" value="${escapeHtml(section.gradient_to || '#eef2ff')}">
                            </div>
                        </div>
                    </div>
                `;
            }

            const sectionLabel = section.type === 'elements' ? 'Hazır Elementler Bölümü' : 'Hazır Burçlar Bölümü';
            return `
                <div class="border rounded p-2 d-flex justify-content-between align-items-center" data-section-index="${index}">
                    <strong>${sectionLabel}</strong>
                    <button type="button" class="btn btn-sm btn-outline-danger" data-action="remove-section" data-index="${index}">Sil</button>
                </div>
            `;
        }).join('');
    }

    function renderBuilderPreview() {
        const preview = document.getElementById('builder-preview');
        const heroTitle = builderState.hero.title || document.getElementById('title').value || 'Hero Başlığı';
        const heroSubtitle = builderState.hero.subtitle || document.getElementById('subtitle').value || 'Hero alt başlığı';
        const heroButtons = normalizeHeroButtons(builderState.hero.buttons);
        const heroButtonsText = heroButtons.length
            ? heroButtons.map((button, index) => `<li>${index + 1}. ${escapeHtml(button.text || 'Buton')} (${escapeHtml(button.url || '#')})</li>`).join('')
            : '<li>Buton eklenmedi</li>';

        const parts = builderState.sections.map((section, index) => {
            if (section.type === 'text_part') {
                return `<li><strong>${index + 1}. ${escapeHtml(section.heading || 'Başlıksız Bölüm')}</strong><br><small>${escapeHtml(section.text || '')}</small></li>`;
            }
            if (section.type === 'elements') {
                return `<li><strong>${index + 1}. Hazır Elementler Bölümü</strong></li>`;
            }
            return `<li><strong>${index + 1}. Hazır Burçlar Bölümü</strong></li>`;
        }).join('');

        preview.innerHTML = `
            <div class="mb-2"><strong>Hero:</strong> ${escapeHtml(heroTitle)}<br><small>${escapeHtml(heroSubtitle)}</small></div>
            <div><strong>Hero Butonları:</strong></div>
            <ul class="mb-2 ps-3">${heroButtonsText}</ul>
            <div><strong>Bölümler:</strong></div>
            <ol class="mb-0 ps-3">${parts || '<li>Bölüm eklenmedi</li>'}</ol>
        `;

        document.getElementById('layout_config').value = JSON.stringify(builderState);
    }

    function refreshBuilder() {
        syncHeroInputsFromState();
        renderHeroButtonsEditor();
        renderSectionEditor();
        renderBuilderPreview();
    }

    document.getElementById('builder-hero-buttons-container').addEventListener('input', function(event) {
        const index = Number(event.target.dataset.index);
        if (Number.isNaN(index) || !builderState.hero.buttons[index]) {
            return;
        }

        const action = event.target.dataset.action;
        const button = builderState.hero.buttons[index];

        if (action === 'update-hero-button-text') {
            button.text = event.target.value;
        } else if (action === 'update-hero-button-url') {
            button.url = event.target.value;
        } else if (action === 'update-hero-button-bg') {
            button.bg_color = event.target.value;
        } else if (action === 'update-hero-button-text-color') {
            button.text_color = event.target.value;
        }

        renderBuilderPreview();
    });

    document.getElementById('builder-hero-buttons-container').addEventListener('click', function(event) {
        const button = event.target.closest('button[data-action="remove-hero-button"]');
        if (!button) {
            return;
        }

        const index = Number(button.dataset.index);
        if (Number.isNaN(index)) {
            return;
        }

        builderState.hero.buttons.splice(index, 1);
        renderHeroButtonsEditor();
        renderBuilderPreview();
    });

    document.getElementById('builder-sections-container').addEventListener('input', function(event) {
        const index = Number(event.target.dataset.index);
        if (Number.isNaN(index) || !builderState.sections[index]) {
            return;
        }

        const action = event.target.dataset.action;
        const section = builderState.sections[index];

        if (action === 'update-text-heading') {
            section.heading = event.target.value;
        } else if (action === 'update-text-content') {
            section.text = event.target.value;
        } else if (action === 'update-text-bg-type') {
            section.background_type = event.target.value;
        } else if (action === 'update-text-bg-color') {
            section.background_color = event.target.value;
        } else if (action === 'update-text-gradient-from') {
            section.gradient_from = event.target.value;
        } else if (action === 'update-text-gradient-to') {
            section.gradient_to = event.target.value;
        }

        renderBuilderPreview();
    });

    document.getElementById('builder-sections-container').addEventListener('click', function(event) {
        const button = event.target.closest('button[data-action="remove-section"]');
        if (!button) {
            return;
        }

        const index = Number(button.dataset.index);
        if (Number.isNaN(index)) {
            return;
        }

        builderState.sections.splice(index, 1);
        renderSectionEditor();
        renderBuilderPreview();
    });

    ['builder-hero-title', 'builder-hero-subtitle', 'builder-hero-background-type', 'builder-hero-background-color', 'builder-hero-gradient-from', 'builder-hero-gradient-to', 'builder-hero-title-color', 'builder-hero-subtitle-color']
        .forEach(id => document.getElementById(id).addEventListener('input', syncStateFromHeroInputs));

    document.getElementById('add-hero-button-btn').addEventListener('click', function() {
        builderState.hero.buttons.push(createHeroButton());
        renderHeroButtonsEditor();
        renderBuilderPreview();
    });

    document.getElementById('builder-open-hero-image-picker').addEventListener('click', function() {
        document.getElementById('hero_image').click();
    });

    document.getElementById('hero_image').addEventListener('change', updateHeroImageFileName);

    document.getElementById('add-text-part-btn').addEventListener('click', function() {
        builderState.sections.push(createTextPartSection());
        renderSectionEditor();
        renderBuilderPreview();
    });

    document.getElementById('add-elements-part-btn').addEventListener('click', function() {
        builderState.sections.push({ type: 'elements' });
        renderSectionEditor();
        renderBuilderPreview();
    });

    document.getElementById('add-zodiac-part-btn').addEventListener('click', function() {
        builderState.sections.push({ type: 'zodiac' });
        renderSectionEditor();
        renderBuilderPreview();
    });

    function setValueIfEligible(id, value, overrideAll) {
        const element = document.getElementById(id);
        if (!element || typeof value === 'undefined' || value === null) {
            return;
        }

        const currentValue = String(element.value || '').trim();
        if (!overrideAll && currentValue !== '') {
            return;
        }

        element.value = value;
        element.dispatchEvent(new Event('input', { bubbles: true }));
        element.dispatchEvent(new Event('change', { bubbles: true }));
    }

    document.getElementById('apply-template-btn').addEventListener('click', function() {
        const templateKey = document.getElementById('template_key').value;
        const preset = templatePresets[templateKey];

        if (!preset) {
            return;
        }

        const overrideAll = window.confirm('Dolu alanlar da şablon ile güncellensin mi? "İptal" seçerseniz sadece boş alanlar doldurulur.');

        setValueIfEligible('subtitle', preset.subtitle, overrideAll);
        setValueIfEligible('excerpt', preset.excerpt, overrideAll);
        setValueIfEligible('content', preset.content, overrideAll);
        setValueIfEligible('meta_description', preset.meta_description, overrideAll);
        setValueIfEligible('meta_keywords', preset.meta_keywords, overrideAll);
        setValueIfEligible('menu_group', preset.menu_group, overrideAll);
        setValueIfEligible('menu_label', preset.menu_label, overrideAll);

        if (preset.layout_config) {
            builderState = parseBuilderState(preset.layout_config);
            refreshBuilder();
        }
    });

    document.getElementById('template_key').addEventListener('change', setBuilderVisibility);

    document.querySelector('form').addEventListener('submit', function() {
        if (!isBirthChartTemplateSelected()) {
            document.getElementById('layout_config').value = '';
            return;
        }

        syncStateFromHeroInputs();
        document.getElementById('layout_config').value = JSON.stringify(builderState);
    });

    setBuilderVisibility();
    refreshBuilder();
    updateHeroImageFileName();

    // Ön İzle butonu
    const previewBtn = document.getElementById('preview-btn');
    if (previewBtn) {
        previewBtn.addEventListener('click', function(e) {
            e.preventDefault();

            const form = document.querySelector('form');
            const originalAction = form.action;
            const originalTarget = form.target;

            form.action = '{{ route("admin.pages.preview") }}';
            form.target = '_blank';

            form.submit();

            setTimeout(() => {
                form.action = originalAction;
                form.target = originalTarget;
            }, 100);
        });
    }
</script>
@endpush
@endsection