@extends('admin.layout')

@section('header-title', 'SEO Ayarları')

@section('content')
<div class="page-title">
    <h1>SEO Ayarları</h1>
    <p>Sayfa bazlı meta etiket ve SEO ayarlarını yönetin</p>
</div>

@if(session('success'))
    <div style="padding: 16px; background: rgba(16, 185, 129, 0.1); border: 1px solid var(--success); border-radius: 8px; color: var(--success); margin-bottom: 20px; font-size: 14px;">
        {{ session('success') }}
    </div>
@endif

<div class="info-card">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
        <h2 style="margin: 0; border: none; padding: 0;">Sayfa SEO Ayarları</h2>
        <div style="display: flex; gap: 10px; align-items: center;">
            <span style="font-size: 13px; color: var(--gray-500);">{{ $seoSettings->count() }} sayfa yapılandırıldı</span>
        </div>
    </div>

    @if($seoSettings->isEmpty())
        <div style="text-align: center; padding: 60px 20px; color: var(--gray-500);">
            <div style="font-size: 48px; margin-bottom: 16px;">🔍</div>
            <div style="font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--gray-700);">SEO Kaydı Bulunamadı</div>
            <p style="font-size: 14px; margin-bottom: 24px;">Veritabanında henüz SEO ayarı kaydı yok. SEO ayarlarını başlatmak için aşağıdaki butona tıklayın.</p>
            <form method="POST" action="{{ route('admin.seo.seed') }}" style="display: inline;">
                @csrf
                <button type="submit" style="padding: 12px 24px; background: var(--primary); color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 14px;">
                    SEO Kayıtlarını Oluştur
                </button>
            </form>
        </div>
    @else
    <div style="overflow-x: auto;">
        <table style="width: 100%; border-collapse: collapse;">
            <thead>
                <tr style="border-bottom: 2px solid var(--gray-200);">
                    <th style="padding: 14px 16px; text-align: left; font-size: 12px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.5px;">Sayfa Türü</th>
                    <th style="padding: 14px 16px; text-align: left; font-size: 12px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.5px;">Meta Başlık</th>
                    <th style="padding: 14px 16px; text-align: left; font-size: 12px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.5px;">Açıklama</th>
                    <th style="padding: 14px 16px; text-align: left; font-size: 12px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.5px;">Robots</th>
                    <th style="padding: 14px 16px; text-align: left; font-size: 12px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.5px;">OG Tags</th>
                    <th style="padding: 14px 16px; text-align: right; font-size: 12px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.5px;">İşlemler</th>
                </tr>
            </thead>
            <tbody>
                @foreach($seoSettings as $seo)
                <tr style="border-bottom: 1px solid var(--gray-100);">
                    <td style="padding: 14px 16px;">
                        <span style="display: inline-block; padding: 4px 10px; background: rgba(59, 130, 246, 0.1); color: var(--primary); border-radius: 6px; font-size: 12px; font-weight: 600; text-transform: uppercase;">
                            {{ $seo->page_type }}
                        </span>
                    </td>
                    <td style="padding: 14px 16px;">
                        <div style="font-size: 14px; font-weight: 500; color: var(--gray-800); max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                            {{ $seo->meta_title ?: '—' }}
                        </div>
                    </td>
                    <td style="padding: 14px 16px;">
                        <div style="font-size: 13px; color: var(--gray-600); max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                            {{ $seo->meta_description ?: '—' }}
                        </div>
                    </td>
                    <td style="padding: 14px 16px;">
                        @php
                            $robotsColor = match($seo->robots) {
                                'index'   => ['bg' => 'rgba(16,185,129,0.1)', 'color' => 'var(--success)'],
                                'noindex' => ['bg' => 'rgba(239,68,68,0.1)',   'color' => 'var(--danger)'],
                                default   => ['bg' => 'rgba(107,114,128,0.1)', 'color' => 'var(--gray-600)'],
                            };
                        @endphp
                        <span style="display: inline-block; padding: 3px 10px; background: {{ $robotsColor['bg'] }}; color: {{ $robotsColor['color'] }}; border-radius: 20px; font-size: 12px; font-weight: 500;">
                            {{ $seo->robots ?? 'index' }}
                        </span>
                    </td>
                    <td style="padding: 14px 16px;">
                        @if($seo->og_tags && count($seo->og_tags) > 0)
                            <span style="display: inline-block; padding: 3px 10px; background: rgba(16,185,129,0.1); color: var(--success); border-radius: 20px; font-size: 12px; font-weight: 500;">
                                ✓ {{ count($seo->og_tags) }} etiket
                            </span>
                        @else
                            <span style="font-size: 13px; color: var(--gray-400);">—</span>
                        @endif
                    </td>
                    <td style="padding: 14px 16px; text-align: right;">
                        <a href="{{ route('admin.seo.edit', $seo) }}"
                           style="padding: 6px 14px; background: rgba(59, 130, 246, 0.1); color: var(--primary); border-radius: 6px; text-decoration: none; font-size: 13px; font-weight: 500; transition: all 0.2s ease;">
                            Düzenle
                        </a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <div style="margin-top: 24px; padding: 16px; background: var(--gray-50); border-radius: 8px; border: 1px solid var(--gray-200);">
        <div style="font-size: 13px; font-weight: 600; color: var(--gray-700); margin-bottom: 8px;">💡 SEO İpuçları</div>
        <ul style="list-style: none; padding: 0; margin: 0; font-size: 13px; color: var(--gray-600); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px;">
            <li>• Meta başlık 50–60 karakter arasında olmalı</li>
            <li>• Meta açıklama 150–160 karakter arasında olmalı</li>
            <li>• OG etiketleri sosyal medya paylaşımını iyileştirir</li>
            <li>• Schema markup arama sonuçlarını zenginleştirir</li>
        </ul>
    </div>
    @endif
</div>
@endsection
