@extends('admin.layout')
@section('title', 'Sayfa Detayı')
@section('page-title', 'Sayfa Detayı')

@section('content')
<div class="content-card">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h3 class="mb-0">{{ $page->title }}</h3>
            <p class="text-muted mb-0">Sayfa detay bilgileri</p>
        </div>
        <div>
            <a href="{{ route('admin.pages.edit', $page) }}" class="btn btn-primary me-2">
                <i class="bi bi-pencil"></i> Düzenle
            </a>
            <a href="{{ route('admin.pages.show', $page) }}" target="_blank" class="btn btn-info">
                <i class="bi bi-eye"></i> Ön İzle
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8">
            <!-- Hero Görseli -->
            @if($page->hero_image)
                <div class="mb-4">
                    <label class="form-label fw-bold">Hero Görseli</label>
                    <div>
                        <img src="{{ asset($page->hero_image) }}" alt="{{ $page->title }}"
                             class="img-fluid rounded" style="max-height: 400px; width: 100%; object-fit: cover;">
                    </div>
                </div>
            @endif

            <!-- İçerik -->
            <div class="mb-4">
                <label class="form-label fw-bold">Sayfa İçeriği</label>
                <div class="border rounded p-3 bg-light">
                    {!! $page->content ?? '<p class="text-muted mb-0">İçerik bulunmamaktadır.</p>' !!}
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <!-- Genel Bilgiler -->
            <div class="card mb-3">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="bi bi-info-circle"></i> Genel Bilgiler</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label fw-bold">Başlık</label>
                        <p class="mb-0">{{ $page->title }}</p>
                    </div>
                    @if($page->subtitle)
                        <div class="mb-3">
                            <label class="form-label fw-bold">Alt Başlık</label>
                            <p class="mb-0">{{ $page->subtitle }}</p>
                        </div>
                    @endif
                    <div class="mb-3">
                        <label class="form-label fw-bold">Slug</label>
                        <p class="mb-0"><code>{{ $page->slug }}</code></p>
                    </div>
                    @if($page->excerpt)
                        <div class="mb-3">
                            <label class="form-label fw-bold">Kısa Açıklama</label>
                            <p class="mb-0">{{ $page->excerpt }}</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Durum ve Ayarlar -->
            <div class="card mb-3">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0"><i class="bi bi-gear"></i> Durum ve Ayarlar</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label fw-bold">Durum</label>
                        <div>
                            @if($page->status === 'published')
                                <span class="badge bg-success">Yayında</span>
                            @else
                                <span class="badge bg-secondary">Taslak</span>
                            @endif
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Görünürlük</label>
                        <div>
                            @if($page->visibility === 'header')
                                <span class="badge bg-primary">Başlık Menüsü</span>
                            @elseif($page->visibility === 'footer')
                                <span class="badge bg-secondary">Altbilgi Menüsü</span>
                            @elseif($page->visibility === 'both')
                                <span class="badge bg-info">Her İkisinde</span>
                            @else
                                <span class="badge bg-dark">Gizli</span>
                            @endif
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Üst Sayfa</label>
                        <div>
                            @if($page->parent)
                                <span class="badge bg-info">{{ $page->parent->title }}</span>
                            @else
                                <span class="text-muted">Ana Sayfa</span>
                            @endif
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Sıralama</label>
                        <p class="mb-0">{{ $page->order }}</p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Şablon</label>
                        <p class="mb-0">{{ \App\Models\Page::templateOptions()[$page->template_key ?? 'default'] ?? ($page->template_key ?? 'Standart') }}</p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Menü Grubu</label>
                        @if($page->menu_group)
                            <p class="mb-0">{{ \App\Models\Page::menuGroupOptions()[$page->menu_group] ?? $page->menu_group }}</p>
                        @else
                            <p class="mb-0 text-muted">Grup yok</p>
                        @endif
                    </div>
                    @if($page->menu_label)
                        <div class="mb-3">
                            <label class="form-label fw-bold">Menü Başlığı</label>
                            <p class="mb-0">{{ $page->menu_label }}</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- SEO Bilgileri -->
            @if($page->meta_title || $page->meta_description || $page->meta_keywords)
                <div class="card">
                    <div class="card-header bg-warning text-dark">
                        <h5 class="mb-0"><i class="bi bi-search"></i> SEO Bilgileri</h5>
                    </div>
                    <div class="card-body">
                        @if($page->meta_title)
                            <div class="mb-3">
                                <label class="form-label fw-bold">Meta Başlık</label>
                                <p class="mb-0">{{ $page->meta_title }}</p>
                            </div>
                        @endif
                        @if($page->meta_description)
                            <div class="mb-3">
                                <label class="form-label fw-bold">Meta Açıklama</label>
                                <p class="mb-0">{{ $page->meta_description }}</p>
                            </div>
                        @endif
                        @if($page->meta_keywords)
                            <div class="mb-3">
                                <label class="form-label fw-bold">Meta Anahtar Kelimeler</label>
                                <p class="mb-0">{{ $page->meta_keywords }}</p>
                            </div>
                        @endif
                    </div>
                </div>
            @endif
        </div>
    </div>

    <!-- Alt Sayfalar -->
    @if($page->children->count() > 0)
        <div class="mt-4">
            <h5>Alt Sayfalar</h5>
            <div class="table-responsive">
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th>Başlık</th>
                            <th>Slug</th>
                            <th>Durum</th>
                            <th>İşlemler</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($page->children as $child)
                            <tr>
                                <td>{{ $child->title }}</td>
                                <td><code>{{ $child->slug }}</code></td>
                                <td>
                                    @if($child->status === 'published')
                                        <span class="badge bg-success">Yayında</span>
                                    @else
                                        <span class="badge bg-secondary">Taslak</span>
                                    @endif
                                </td>
                                <td>
                                    <a href="{{ route('admin.pages.show', $child) }}" class="btn btn-sm btn-outline-info">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif

    <!-- 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> Geri Dön
        </a>
        <div>
            <form action="{{ route('admin.pages.destroy', $page) }}" method="POST" class="d-inline" onsubmit="return confirm('Bu sayfayı silmek istediğinizden emin misiniz?');">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-danger">
                    <i class="bi bi-trash"></i> Sayfayı Sil
                </button>
            </form>
        </div>
    </div>
</div>
@endsection