@extends('layouts.vertical', ['title' => 'View Content Page'])

@section('content')

<!-- Start Content-->
<div class="container-fluid">

<div class="py-3 d-flex align-items-sm-center flex-sm-row flex-column">
    <div class="flex-grow-1">
        <h4 class="fs-18 fw-semibold m-0">View Content Page</h4>
    </div>

    <div class="text-end">
        <ol class="breadcrumb m-0 py-0">
            <li class="breadcrumb-item"><a href="/dashboard/index">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('pages.index') }}">Content Pages</a></li>
            <li class="breadcrumb-item active">View</li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <div class="float-end">
                    <a href="{{ route('pages.edit', $page->id) }}" class="btn btn-success">Edit Page</a>
                    <a href="{{ route('pages.index') }}" class="btn btn-light">Back to List</a>
                </div>
                <h5 class="card-title mb-0">Page Details</h5>
            </div>

            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <strong>ID:</strong> {{ $page->id }}
                    </div>
                    <div class="col-md-6">
                        <strong>Slug:</strong> <code>{{ $page->slug }}</code>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-12">
                        <strong>Title:</strong> {{ $page->title }}
                    </div>
                </div>

                @if($page->excerpt)
                <div class="row mb-3">
                    <div class="col-md-12">
                        <strong>Excerpt:</strong>
                        <p class="text-muted">{{ $page->excerpt }}</p>
                    </div>
                </div>
                @endif

                @if($page->featured_image)
                <div class="row mb-3">
                    <div class="col-md-12">
                        <strong>Featured Image:</strong>
                        <div class="mt-2">
                            <img src="{{ asset('storage/' . $page->featured_image) }}" alt="Featured Image" class="img-thumbnail" style="max-height: 300px;">
                        </div>
                    </div>
                </div>
                @endif

                <div class="row mb-3">
                    <div class="col-md-12">
                        <strong>Content:</strong>
                        <div class="mt-2 p-3 border rounded">
                            {!! $page->content !!}
                        </div>
                    </div>
                </div>

                <hr>

                <h5 class="mb-3">SEO Information</h5>
                <div class="row mb-3">
                    <div class="col-md-12">
                        <strong>Meta Title:</strong> {{ $page->meta_title ?? 'Not set' }}
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-12">
                        <strong>Meta Description:</strong> {{ $page->meta_description ?? 'Not set' }}
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-12">
                        <strong>Meta Keywords:</strong> {{ $page->meta_keywords ?? 'Not set' }}
                    </div>
                </div>

                <hr>

                <h5 class="mb-3">Menu & Publishing Settings</h5>
                <div class="row mb-3">
                    <div class="col-md-4">
                        <strong>Published Status:</strong>
                        @if($page->is_published)
                            <span class="badge bg-success">Published</span>
                        @else
                            <span class="badge bg-secondary">Draft</span>
                        @endif
                    </div>
                    <div class="col-md-4">
                        <strong>Show in Top Menu:</strong>
                        @if($page->show_in_top_menu)
                            <span class="badge bg-success">Yes</span>
                        @else
                            <span class="badge bg-secondary">No</span>
                        @endif
                    </div>
                    <div class="col-md-4">
                        <strong>Show in Footer Menu:</strong>
                        @if($page->show_in_footer_menu)
                            <span class="badge bg-success">Yes</span>
                        @else
                            <span class="badge bg-secondary">No</span>
                        @endif
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <strong>Order Position:</strong> {{ $page->order_position }}
                    </div>
                </div>

                <hr>

                <div class="row mb-3">
                    <div class="col-md-6">
                        <strong>Created At:</strong> {{ $page->created_at->format('M d, Y H:i') }}
                    </div>
                    <div class="col-md-6">
                        <strong>Updated At:</strong> {{ $page->updated_at->format('M d, Y H:i') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</div> <!-- container-fluid -->

@endsection