

<?php $__env->startSection('header-title', 'Yeni Widget Ekle'); ?>

<?php $__env->startSection('header-actions'); ?>
<a href="<?php echo e(route('admin.homepage.index')); ?>" class="header-action-btn">
    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
    Geri Dön
</a>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<style>
    .type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 20px; }
    .type-card {
        background: var(--surface);
        border: 2px solid var(--border);
        border-radius: 10px;
        padding: 16px 12px;
        text-align: center;
        cursor: pointer;
        transition: all 0.15s;
    }
    .type-card:hover { border-color: var(--accent); background: #f0f7ff; }
    .type-card.selected { border-color: var(--accent); background: #eff6ff; box-shadow: 0 0 0 3px rgba(59,130,246,0.12); }
    .type-card input { display: none; }
    .type-card-icon { font-size: 28px; margin-bottom: 8px; }
    .type-card-name { font-size: 12px; font-weight: 700; color: var(--text); }
    .type-card-desc { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

    .config-panel { display: none; }
    .config-panel.active { display: block; }

    .section-title {
        font-size: 13px;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 14px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: 8px;
    }
</style>

<div class="page-header">
    <div>
        <h1 class="page-title">➕ Yeni Widget Ekle</h1>
        <p class="page-subtitle">Ana sayfanıza widget ekleyin</p>
    </div>
</div>

<form method="POST" action="<?php echo e(route('admin.homepage.store')); ?>">
    <?php echo csrf_field(); ?>

    <div style="display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start;">
        
        <div style="display: flex; flex-direction: column; gap: 20px;">

            
            <div class="card">
                <div class="card-header">
                    <div>
                        <h3 class="card-title">1. Widget Tipi Seçin</h3>
                        <p class="card-subtitle">Hangi içerik tipini eklemek istiyorsunuz?</p>
                    </div>
                </div>
                <div class="card-body">
                    <div class="type-grid">
                        <?php $__currentLoopData = [
                            'hero'         => ['icon'=>'🎯','name'=>'Hero Banner','desc'=>'Ana başlık'],
                            'stats'        => ['icon'=>'📊','name'=>'İstatistikler','desc'=>'Sayaçlar'],
                            'features'     => ['icon'=>'⚡','name'=>'Özellikler','desc'=>'Modül kartları'],
                            'blog_posts'   => ['icon'=>'📰','name'=>'Blog Yazıları','desc'=>'Son yazılar'],
                            'forum_topics' => ['icon'=>'💬','name'=>'Forum','desc'=>'Son konular'],
                            'cta'          => ['icon'=>'📢','name'=>'Aksiyon','desc'=>'Call-to-action'],
                            'adsense'      => ['icon'=>'💰','name'=>'AdSense','desc'=>'Reklam alanı'],
                            'custom_html'  => ['icon'=>'🖥️','name'=>'Özel HTML','desc'=>'Serbest içerik'],
                        ]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $type => $info): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <label class="type-card" id="type-card-<?php echo e($type); ?>" onclick="selectType('<?php echo e($type); ?>')">
                            <input type="radio" name="widget_type" value="<?php echo e($type); ?>" <?php echo e(old('widget_type') === $type ? 'checked' : ''); ?> required>
                            <div class="type-card-icon"><?php echo e($info['icon']); ?></div>
                            <div class="type-card-name"><?php echo e($info['name']); ?></div>
                            <div class="type-card-desc"><?php echo e($info['desc']); ?></div>
                        </label>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                </div>
            </div>

            
            <div id="config-hero" class="config-panel card">
                <div class="card-header"><h3 class="card-title">🎯 Hero Banner Ayarları</h3></div>
                <div class="card-body">
                    <div class="form-group">
                        <label class="form-label">Ana Başlık</label>
                        <input type="text" name="content[title]" class="form-control" value="Askeri Kariyer Başarısının Merkezine Hoş Geldiniz">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Alt Başlık</label>
                        <textarea name="content[subtitle]" class="form-control" rows="2">KPSS hazırlığından mülakat pratiklerine kadar her şey tek platformda.</textarea>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">Rozet Metni</label>
                            <input type="text" name="content[badge_text]" class="form-control" value="Platform Açılıyor">
                        </div>
                        <div class="form-group" style="display:flex;align-items:flex-end;gap:16px;">
                            <div class="form-check">
                                <input type="checkbox" id="show_cta" name="content[show_cta]" value="1" checked>
                                <label for="show_cta">CTA Butonları</label>
                            </div>
                            <div class="form-check">
                                <input type="hidden" name="content[guest_only]" value="0">
                                <input type="checkbox" id="hero_guest" name="content[guest_only]" value="1">
                                <label for="hero_guest">Sadece Misafirler</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            
            <div id="config-stats" class="config-panel card">
                <div class="card-header"><h3 class="card-title">📊 İstatistik Kartları Ayarları</h3></div>
                <div class="card-body">
                    <div class="form-check" style="margin-bottom:10px;">
                        <input type="checkbox" id="show_topics" name="content[show_topics]" value="1" checked>
                        <label for="show_topics">Forum Konuları Göster</label>
                    </div>
                    <div class="form-check" style="margin-bottom:10px;">
                        <input type="checkbox" id="show_posts" name="content[show_posts]" value="1" checked>
                        <label for="show_posts">Blog Yazıları Göster</label>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" id="show_users" name="content[show_users]" value="1" checked>
                        <label for="show_users">Kullanıcı Sayısı Göster</label>
                    </div>
                </div>
            </div>

            
            <div id="config-features" class="config-panel card">
                <div class="card-header"><h3 class="card-title">⚡ Özellik Kartları Ayarları</h3></div>
                <div class="card-body">
                    <div class="form-group">
                        <label class="form-label">Maksimum Öğe Sayısı</label>
                        <input type="number" name="content[items_limit]" class="form-control" placeholder="Tüm modüller (boş bırakın)">
                    </div>
                    <div class="form-check">
                        <input type="checkbox" id="show_modules" name="content[show_modules]" value="1" checked>
                        <label for="show_modules">Aktif modülleri göster</label>
                    </div>
                </div>
            </div>

            
            <div id="config-blog_posts" class="config-panel card">
                <div class="card-header"><h3 class="card-title">📰 Blog Yazıları Ayarları</h3></div>
                <div class="card-body">
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">Öğe Sayısı</label>
                            <input type="number" name="content[items_limit]" class="form-control" value="4" min="1" max="20">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Kategori Filtresi (ID)</label>
                            <input type="number" name="content[category_filter]" class="form-control" placeholder="Tümü">
                        </div>
                    </div>
                    <div class="form-check" style="margin-bottom:10px;">
                        <input type="checkbox" id="show_excerpt" name="content[show_excerpt]" value="1" checked>
                        <label for="show_excerpt">Özet göster</label>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" id="show_blog_meta" name="content[show_meta]" value="1" checked>
                        <label for="show_blog_meta">Meta bilgileri göster</label>
                    </div>
                </div>
            </div>

            
            <div id="config-forum_topics" class="config-panel card">
                <div class="card-header"><h3 class="card-title">💬 Forum Konuları Ayarları</h3></div>
                <div class="card-body">
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">Öğe Sayısı</label>
                            <input type="number" name="content[items_limit]" class="form-control" value="4" min="1" max="20">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Kategori Filtresi (ID)</label>
                            <input type="number" name="content[category_filter]" class="form-control" placeholder="Tümü">
                        </div>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" id="show_forum_meta" name="content[show_meta]" value="1" checked>
                        <label for="show_forum_meta">Meta bilgileri göster</label>
                    </div>
                </div>
            </div>

            
            <div id="config-cta" class="config-panel card">
                <div class="card-header"><h3 class="card-title">📢 Call-to-Action Ayarları</h3></div>
                <div class="card-body">
                    <div class="form-group">
                        <label class="form-label">Başlık</label>
                        <input type="text" name="content[title]" class="form-control" value="Askeri Kariyerinize Bugün Başlayın">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Açıklama</label>
                        <textarea name="content[description]" class="form-control" rows="2">Binlerce başarılı kişi platformumuzda sizin gibi hedeflerine ulaşmaya çalışıyor.</textarea>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">Buton Metni</label>
                            <input type="text" name="content[button_text]" class="form-control" value="Hemen Kayıt Ol">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Buton URL</label>
                            <input type="text" name="content[button_url]" class="form-control" value="/register">
                        </div>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" id="cta_guest" name="content[guest_only]" value="1" checked>
                        <label for="cta_guest">Sadece misafirler için göster</label>
                    </div>
                </div>
            </div>

            
            <div id="config-adsense" class="config-panel card">
                <div class="card-header"><h3 class="card-title">💰 AdSense Ayarları</h3></div>
                <div class="card-body">
                    <div class="form-group">
                        <label class="form-label">Konum</label>
                        <select name="content[location]" class="form-control form-select">
                            <option value="homepage_top">Üst (homepage_top)</option>
                            <option value="homepage_middle" selected>Orta (homepage_middle)</option>
                            <option value="homepage_bottom">Alt (homepage_bottom)</option>
                        </select>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" id="show_placeholder" name="content[show_placeholder]" value="1" checked>
                        <label for="show_placeholder">Placeholder göster (reklam yoksa)</label>
                    </div>
                </div>
            </div>

            
            <div id="config-custom_html" class="config-panel card">
                <div class="card-header"><h3 class="card-title">🖥️ Özel HTML Ayarları</h3></div>
                <div class="card-body">
                    <div class="form-group">
                        <label class="form-label">HTML İçerik</label>
                        <textarea name="content[html_content]" class="form-control" rows="8" placeholder="<div>Özel HTML içeriği...</div>"></textarea>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" id="sanitized" name="content[sanitized]" value="1" checked>
                        <label for="sanitized">HTML'i güvenlik filtresiyle temizle</label>
                    </div>
                </div>
            </div>

        </div>

        
        <div style="display: flex; flex-direction: column; gap: 20px;">
            
            <div class="card">
                <div class="card-header"><h3 class="card-title">2. Temel Ayarlar</h3></div>
                <div class="card-body">
                    <div class="form-group">
                        <label class="form-label">Başlık <span style="color:var(--text-muted);font-size:11px;">(opsiyonel)</span></label>
                        <input type="text" name="title" class="form-control" value="<?php echo e(old('title')); ?>" placeholder="Widget başlığı...">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Genişlik</label>
                        <select name="width" class="form-control form-select">
                            <option value="full">↔ Tam Genişlik</option>
                            <option value="half">⬛ Yarım Genişlik</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Sıra Numarası</label>
                        <input type="number" name="sort_order" class="form-control" value="<?php echo e(\App\Models\HomepageWidget::max('sort_order') + 1); ?>" min="0">
                    </div>
                    <div class="form-check">
                        <input type="checkbox" id="is_active" name="is_active" value="1" checked>
                        <label for="is_active">Aktif (hemen göster)</label>
                    </div>
                </div>
                <div class="card-footer">
                    <a href="<?php echo e(route('admin.homepage.index')); ?>" class="btn btn-secondary">İptal</a>
                    <button type="submit" class="btn btn-primary">Widget Oluştur</button>
                </div>
            </div>
        </div>
    </div>
</form>

<script>
function selectType(type) {
    // Update card selection
    document.querySelectorAll('.type-card').forEach(function(c) { c.classList.remove('selected'); });
    document.getElementById('type-card-' + type).classList.add('selected');
    
    // Set radio value
    const radio = document.querySelector('input[name="widget_type"][value="' + type + '"]');
    if (radio) radio.checked = true;

    // Hide all config panels
    document.querySelectorAll('.config-panel').forEach(function(p) { p.classList.remove('active'); });

    // Show selected
    const panel = document.getElementById('config-' + type);
    if (panel) panel.classList.add('active');
}

// Auto-select if old value
<?php if(old('widget_type')): ?>
selectType('<?php echo e(old("widget_type")); ?>');
<?php endif; ?>
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('admin.layout', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\xampp\htdocs\askeribilgiler\resources\views\admin\homepage\create.blade.php ENDPATH**/ ?>