@extends('public.layout.app')

@section('title', $post->title)

@section('body')
@php
    $image = $post->cover_image ? asset('storage/' . $post->cover_image) : null;
    \App\Models\Finance\ModuleSetting::ensureDefaults();
    $publicFormVisible = fn ($key) => \App\Models\Finance\ModuleSetting::allows('online_forms') && \App\Models\Finance\ModuleSetting::allows($key);
@endphp

<section class="article-page">
    <div class="container">
        <div class="article-layout">
            <article class="article-main">
                <a href="{{ route('front.posts.index') }}" class="article-back"><i class="fa-solid fa-arrow-left"></i> Back to News</a>

                <div class="article-meta">
                    <span><i class="fa-regular fa-calendar"></i> {{ optional($post->published_at ?? $post->created_at)->format('F j, Y') }}</span>
                    <span><i class="fa-solid fa-link"></i> {{ $post->slug }}</span>
                </div>

                <h2>{{ $post->title }}</h2>

                @if($image)
                    <img class="article-cover" src="{{ $image }}" alt="{{ $post->title }}">
                @else
                    <div class="article-cover placeholder"><i class="fa-regular fa-newspaper"></i></div>
                @endif

                <div class="article-body">
                    {!! $post->body ?? '' !!}
                </div>
            </article>

            <aside class="article-sidebar">
                <div class="article-box dark">
                    <h3>News Tools</h3>
                    <a href="{{ route('front.posts.index') }}"><i class="fa-regular fa-newspaper"></i> All News</a>
                    <a href="{{ route('front.events.index') }}"><i class="fa-solid fa-calendar-check"></i> Events</a>
                    <a href="{{ route('front.directory') }}"><i class="fa-solid fa-compass"></i> Website Directory</a>
                    @if($publicFormVisible('public_form_contact'))
                        <a href="{{ route('front.contact') }}"><i class="fa-solid fa-envelope"></i> Contact</a>
                    @endif
                </div>

                <div class="article-box">
                    <h3>Related News</h3>
                    <div class="related-list">
                        @forelse($relatedPosts as $related)
                            <a href="{{ route('front.posts.show', $related->slug) }}">
                                <span>{{ $related->title }}</span>
                                <small>{{ optional($related->published_at ?? $related->created_at)->format('M j, Y') }}</small>
                            </a>
                        @empty
                            <p class="text-muted mb-0">More news will appear here after publishing.</p>
                        @endforelse
                    </div>
                </div>
            </aside>
        </div>
    </div>
</section>
<section class="uni-page pt-0">
    <div class="container">
        <div class="uni-layout">
            <main class="uni-stack">
                @include('public.partials.comment-section', ['type' => 'post', 'id' => $post->id, 'comments' => $comments ?? collect()])
                @include('public.partials.feedback-form', ['type' => 'post', 'id' => $post->id])
            </main>
            <aside class="uni-stack">
                @include('public.partials.share-buttons', ['title' => $post->title])
                @include('public.partials.apply-cta')
            </aside>
        </div>
    </div>
</section>
@endsection

@push('styles')
<style>
    .article-page{padding:70px 0 90px;background:linear-gradient(180deg,#fff,#f8fafc)}
    .article-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
    .article-main{background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:8px;box-shadow:0 20px 58px rgba(2,6,23,.08);padding:34px}
    .article-back{display:inline-flex;align-items:center;gap:8px;border-radius:999px;background:#eef6ff;color:#1d4ed8;font-weight:900;padding:9px 15px;margin-bottom:18px}
    .article-back:hover{text-decoration:none;background:#dbeafe}
    .article-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}.article-meta span{display:inline-flex;align-items:center;gap:7px;border-radius:999px;background:#f8fafc;border:1px solid rgba(15,23,42,.08);padding:7px 12px;color:#64748b;font-weight:800;font-size:13px}
    .article-main h2{font-size:clamp(34px,4.8vw,58px);font-weight:950;letter-spacing:-.035em;color:#10291f;margin:0 0 24px;line-height:1.08}
    .article-cover{width:100%;aspect-ratio:16/8.8;object-fit:cover;border-radius:8px;margin-bottom:28px;background:#e2e8f0}
    .article-cover.placeholder{display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:54px}
    .article-body{font-size:17px;line-height:1.9;color:#344054}.article-body h1,.article-body h2,.article-body h3{color:#153f2d;font-weight:900}.article-body img{max-width:100%;border-radius:8px}
    .article-sidebar{display:grid;gap:18px;position:sticky;top:100px}.article-box{background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:8px;box-shadow:0 18px 48px rgba(2,6,23,.07);padding:24px}
    .article-box.dark{background:linear-gradient(135deg,#153f2d,#174832);color:#fff}.article-box h3{font-size:19px;font-weight:950;color:#10291f;margin-bottom:16px}.article-box.dark h3{color:#fff}
    .article-box.dark a{display:flex;align-items:center;gap:10px;color:#fff;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.14);font-weight:850}.article-box.dark a:last-child{border-bottom:0}
    .related-list{display:grid;gap:10px}.related-list a{display:block;padding:13px;border-radius:8px;background:#f8fafc;color:#0f172a}.related-list a:hover{text-decoration:none;background:#fff;box-shadow:0 10px 24px rgba(2,6,23,.07)}.related-list span{display:block;font-weight:850}.related-list small{color:#64748b}
    @media(max-width:991px){.article-layout{grid-template-columns:1fr}.article-sidebar{position:static}.article-main{padding:24px}}
</style>
@endpush