@extends('source.layouts.app')

@section('content')
<div class="main-wrapper">

    @include('source.common.header')
    @include('source.common.sidebar')

    <div class="page-wrapper">
        <div class="content">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-3">
                <h6>View News</h6>
                <div>
                    <a href="{{ route('admin.news.edit', $news->id) }}" class="btn btn-primary me-2">
                        <i class="ti ti-edit me-1"></i>Edit
                    </a>
                    <a href="{{ route('admin.news') }}" class="btn btn-outline-secondary">
                        <i class="ti ti-arrow-left me-1"></i>Back
                    </a>
                </div>
            </div>

            <div class="card news-form-card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom-0 pt-4 pb-0 d-flex align-items-center justify-content-between">
                    <div>
                        <h5 class="mb-1">News Article Details</h5>
                        <p class="text-muted mb-0">Full details and content of this news article.</p>
                    </div>
                    <span class="badge {{ $news->is_published ? 'bg-success' : 'bg-secondary' }} align-self-start">{{ $news->is_published ? 'Published' : 'Draft' }}</span>
                </div>
                <div class="card-body pt-3">
                    <div class="row mb-3">
                        <div class="col-md-8">
                            <div class="mb-2">
                                <span class="fw-semibold text-muted small">Title</span>
                                <div class="fs-5 fw-bold text-dark">{{ $news->title }}</div>
                            </div>
                            <div class="mb-2">
                                <span class="fw-semibold text-muted small">Slug</span>
                                <div class="text-dark">{{ $news->slug }}</div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-2">
                                <span class="fw-semibold text-muted small">Published At</span>
                                <div class="text-dark">{{ $news->published_at ? $news->published_at->format('Y-m-d H:i') : '-' }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <span class="fw-semibold text-muted small">Summary</span>
                        <div class="border rounded p-2 bg-light">{{ $news->summary ?: '-' }}</div>
                    </div>
                    <div class="mb-3">
                        <span class="fw-semibold text-muted small">Content</span>
                        <div class="border rounded p-2 bg-light">{!! $news->content ?: '-' !!}</div>
                    </div>
                    <div class="mb-2">
                        <span class="fw-semibold text-muted small">Featured Image</span>
                        <div class="pt-2">
                            @if ($news->image)
                                <img src="{{ asset('storage/' . $news->image) }}" alt="News image" style="max-width:260px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.07);">
                            @else
                                <span class="text-muted">No image</span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer d-sm-flex align-items-center justify-content-between bg-white py-2 px-4 border-top">
            <p class="text-dark mb-0">
                &copy; {{ date('Y') }}
                <a href="javascript:void(0);" class="link-primary">C3S Publishers</a>,
                All Rights Reserved
            </p>
        </div>
    </div>
</div>
@endsection