@extends('layouts.public')

@section('content')
@php
/**
 * Modern single-post page (template-blend). Reuses the working logic of
 * blog-detail.php verbatim (comment render closure, comment flash extraction,
 * share url, comment form, prev/next nav, related posts) and swaps the chrome
 * for the .qm-blogm-* creative subheader + two-sidebar layout.
 *
 * @var array      $post         the post row (joined with category_name/slug, author_avatar)
 * @var array      $related      up to 3 related posts
 * @var array      $comments     threaded approved comments (parents w/ 'replies')
 * @var int        $commentCount total approved comments
 * @var array|null $prevPost     ['title','slug'] or null
 * @var array|null $nextPost     ['title','slug'] or null
 * @var array      $tags         real per-post tags: [['label'=>..,'url'=>..], ..]
 * @var int        $readMinutes  estimated reading time in minutes
 * @var array      $popularPosts 4 popular post rows (+ 'tags') for the left sidebar
 * @var array      $tagCloud     deduped [['label'=>..,'url'=>..], ..] for the left sidebar
 * @var array      $categories   {name, slug, post_count} for the left sidebar
 * @var array      $featuredRestaurants restaurant rows for the left sidebar
 * @var array|null $featured     most-viewed post for the right sidebar
 */
$tags        = $tags ?? [];
$readMinutes = (int) ($readMinutes ?? 1);

/** Render one comment block; replies are indented by the caller. */
$renderComment = static function ($c): void {   // array row or BlogComment model
    $when = !empty($c['created_at']) ? fmt_day($c['created_at']) : '';
@endphp
    <article class="qm-comment" id="comment-{{ (int) $c['id'] }}">
        <div class="qm-comment-avatar">{!! brandmark_html($c['avatar'] ?? null, (string) ($c['name'] ?? t('vendor.reservations.guest_fallback')), 'md') !!}</div>
        <div class="qm-comment-body">
            <header class="qm-comment-head">
                <span class="qm-comment-author">{{ $c['name'] }}</span>
                @if ($when !== '')<time class="qm-comment-date" datetime="{{ date('Y-m-d', strtotime((string) $c['created_at'])) }}">{{ $when }}</time>@endif
            </header>
            <p class="qm-comment-text">{!! nl2br(e($c['body'])) !!}</p>
            <button type="button" class="qm-comment-reply" data-reply-id="{{ (int) $c['id'] }}" data-reply-name="{{ $c['name'] }}">
                <i class="fas fa-reply" aria-hidden="true"></i> {{ t_raw('blog.reply_btn') }}
            </button>
        </div>
    </article>
    @php
};

// Consume the comment-specific flash here so it renders INLINE in the form card
// (not in the global top-of-page banner). getFlashes() in the layout will then
// not see these keys.
$commentOk  = \App\Support\Session::pullFlash('comment_ok');
$commentErr = \App\Support\Session::pullFlash('comment_err');

$shareUrl  = url('/blog/' . $post['slug']);
$activeCat = (string) ($post['category_slug'] ?? '');
$two       = $twoSidebars ?? true;   // admin: two sidebars (default) or one (right only)
@endphp
@partial('subheader', [
    'type'    => 'post',
    'title'   => $post['title'],
    'eyebrow' => t_raw('blog.eyebrow_from_kitchen'),
    'crumbs'  => [
        ['label' => t_raw('common.home'), 'url' => route('home')],
        ['label' => t_raw('footer.blog'), 'url' => route('blog')],
        ['label' => str_excerpt((string) $post['title'], 6)],
    ],
])

<section class="qm-section qm-blogm-wrap">
    <div class="container-fluid">
        <div class="row g-4">
            @if ($two)
            <aside class="col-lg-3 order-2 order-lg-1" aria-label="{{ t_raw('blog.sidebar_aria') }}">
                <div class="qm-blogm-side is-sticky">
                    @partial('blog-modern-sidebar-left', [
                        'popularPosts'        => $popularPosts ?? [],
                        'tagCloud'            => $tagCloud ?? [],
                        'categories'          => $categories ?? [],
                        'featuredRestaurants' => $featuredRestaurants ?? [],
                        'activeCat'           => $activeCat,
                    ])
                </div>
            </aside>
            @endif

            <div class="{{ $two ? 'col-lg-6' : 'col-lg-8' }} order-1 order-lg-2">
                <article class="qm-blogm-article">
                    <img class="qm-blogm-hero" src="{{ media($post['featured_image'], 'assets/client/blog/shop-1.png') }}" alt="{{ $post['title'] }}">

                    <div class="qm-blogm-article-head">
                        @php // Title shown in the subheader h1; keep one visible title — the in-article heading is for assistive tech only.
@endphp
                        <h2 class="qm-blogm-article-title visually-hidden">{{ $post['title'] }}</h2>

                        @php // Author + date meta mirrors the archive card foot for one consistent look, plus the category badge.
@endphp
                        <div class="qm-blogm-article-meta">
                            <div class="qm-blogm-author">
                                <img class="qm-blogm-author-img" src="{{ avatar_src($post['author_avatar'] ?? null) }}" alt="" loading="lazy" width="38" height="38">
                                <span class="qm-blogm-author-text">
                                    <span class="qm-blogm-author-name">{!! ($post['author_name'] ?? '') !== '' ? e($post['author_name']) : t('blog.admin_fallback_name') !!}</span>
                                    @if (!empty($post['published_at']))
                                    <span class="qm-blogm-author-date"><time datetime="{{ date('Y-m-d', strtotime((string) $post['published_at'])) }}">{!! fmt_day($post['published_at']) !!}</time> &middot; {{ t_raw('blog.min_read_suffix', [':n' => (int) $readMinutes]) }}</span>
                                    @else
                                    <span class="qm-blogm-author-date">{{ t_raw('blog.min_read_suffix', [':n' => (int) $readMinutes]) }}</span>
                                    @endif
                                </span>
                            </div>
                            @if (!empty($post['category_name']))
                            <a class="qm-blogm-article-cat" href="{{ url('/blog?cat=' . urlencode((string) $post['category_slug'])) }}">{{ $post['category_name'] }}</a>
                            @endif
                        </div>
                    </div>

                    <div class="qm-article-body">{{ $post['body'] /* admin-authored, sanitized on save */ }}</div>

                    <div class="qm-article-foot">
                        @php $postTags = $tags;
@endphp
                        @if ($postTags)
                        <div class="qm-blogm-tags" role="group" aria-label="{{ t_raw('blog.tags_aria') }}">
                            @foreach ($postTags as $t)
                                <a class="qm-blogm-tag" href="{{ url($t['url']) }}">{{ $t['label'] }}</a>
                            @endforeach
                        </div>
                        @endif
                        <div class="qm-share-row" role="group" aria-label="{{ t_raw('blog.share_this_post_aria') }}">
                            <span class="qm-share-label">{{ t_raw('blog.share_label') }}</span>
                            <a class="qm-share-btn" href="mailto:?subject={{ rawurlencode((string) $post['title']) }}&amp;body={{ rawurlencode($shareUrl) }}" aria-label="{{ t_raw('blog.share_by_email_aria') }}"><i class="fas fa-envelope" aria-hidden="true"></i></a>
                            <a class="qm-share-btn" href="{{ $shareUrl }}" data-copy-link="{{ $shareUrl }}" aria-label="{{ t_raw('blog.copy_link_aria') }}"><i class="fas fa-link" aria-hidden="true"></i></a>
                            <a class="qm-share-btn" href="{{ $shareUrl }}#comments" aria-label="{{ t_raw('blog.jump_to_comments_aria') }}"><i class="fas fa-comment-dots" aria-hidden="true"></i></a>
                        </div>
                    </div>
                </article>

                <!-- Author bio -->
                <div class="qm-card qm-author-card">
                    <div class="qm-author-avatar"><img src="{{ avatar_src($post['author_avatar'] ?? null) }}" alt="" loading="lazy"></div>
                    <div class="qm-author-info">
                        <span class="qm-author-eyebrow">{{ t_raw('blog.written_by_eyebrow') }}</span>
                        <h2 class="qm-author-name">{!! ($post['author_name'] ?? '') !== '' ? e($post['author_name']) : t('blog.admin_fallback_name') !!}</h2>
                        <p class="qm-author-bio">{{ t_raw('blog.author_bio_text', [':site' => setting('site_name', 'QuickMunch')]) }}</p>
                    </div>
                </div>

                <!-- Comments -->
                <div class="qm-card qm-comments" id="comments">
                    <h2 class="qm-comments-title">{{ t_raw((int) $commentCount === 1 ? 'blog.comment_count_one' : 'blog.comment_count_many', [':n' => (int) $commentCount]) }}</h2>

                    @if ($comments)
                        <div class="qm-comment-list">
                            @foreach ($comments as $c)
                                @php $renderComment($c);
@endphp
                                @if (!empty($c['replies']))
                                    <div class="qm-comment-replies">
                                        @foreach ($c['replies'] as $reply)
                                            @php $renderComment($reply);
@endphp
                                        @endforeach
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    @else
                        <p class="qm-comments-empty">{{ t_raw('blog.no_comments_yet') }}</p>
                    @endif
                </div>

                <!-- Comment form -->
                <div class="qm-card qm-comment-form" id="comment-form">
                    <h2 class="qm-comments-title">{{ t_raw('blog.leave_a_reply') }}</h2>

                    @if ($commentOk !== '')
                    <div class="qm-form-status qm-form-status--ok" id="qm-comment-status" data-status="ok" role="status" aria-live="polite">
                        <i class="fas fa-check-circle" aria-hidden="true"></i> {{ $commentOk }}
                    </div>
                    @elseif ($commentErr !== '')
                    <div class="qm-form-status qm-form-status--err" id="qm-comment-status" data-status="error" role="alert">
                        <i class="fas fa-exclamation-circle" aria-hidden="true"></i> {{ $commentErr }}
                    </div>
                    @endif

                    <p class="qm-replying-to" id="qm-replying-to" hidden>
                        {!! t_raw('blog.replying_to_prefix', [':name' => '<strong id="qm-replying-name"></strong>']) !!}
                        <button type="button" class="qm-cancel-reply" id="qm-cancel-reply">{{ t_raw('common.cancel') }}</button>
                    </p>
                    <form method="post" action="{!! url('/blog/' . e($post['slug']) . '/comment') !!}" novalidate>
                        @csrf
                        <input type="hidden" name="parent_id" id="qm-parent-id" value="">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label" for="qm-name">{{ t_raw('blog.full_name_label') }} <span class="qm-req-mark" aria-hidden="true">*</span></label>
                                <input type="text" class="form-control" id="qm-name" name="name" value="{{ old('name') }}" required maxlength="120" autocomplete="name" placeholder="{{ t_raw('blog.full_name_label') }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label" for="qm-email">{{ t_raw('blog.email_address_label') }} <span class="text-muted">{{ t_raw('common.optional') }}</span></label>
                                <input type="email" class="form-control" id="qm-email" name="email" value="{{ old('email') }}" maxlength="190" autocomplete="email" placeholder="{{ t_raw('blog.email_address_label') }}" aria-describedby="qm-email-help">
                            </div>
                            <div class="col-12">
                                <label class="form-label" for="qm-body">{{ t_raw('blog.your_comment_label') }} <span class="qm-req-mark" aria-hidden="true">*</span></label>
                                <textarea class="form-control" id="qm-body" name="body" rows="6" required placeholder="{{ t_raw('blog.your_comment_label') }}">{{ old('body') }}</textarea>
                            </div>
                            <div class="col-12">
                                <p class="qm-form-note" id="qm-email-help">{{ t_raw('blog.comment_privacy_note') }}</p>
                                <div class="d-flex justify-content-end"><button type="submit" class="qm-btn">{{ t_raw('blog.post_comment_btn') }}</button></div>
                            </div>
                        </div>
                    </form>
                </div>

                <!-- Prev / next -->
                @if ($prevPost || $nextPost)
                <nav class="qm-post-nav" aria-label="{{ t_raw('blog.post_navigation_aria') }}">
                    @if ($prevPost)
                        <a class="qm-post-nav-link qm-post-nav-prev" href="{!! url('/blog/' . e($prevPost['slug'])) !!}">
                            <span class="qm-post-nav-dir"><i class="fas fa-arrow-left" aria-hidden="true"></i> {{ t_raw('common.previous') }}</span>
                            <span class="qm-post-nav-title">{{ $prevPost['title'] }}</span>
                        </a>
                    @else<span></span>@endif
                    @if ($nextPost)
                        <a class="qm-post-nav-link qm-post-nav-next" href="{!! url('/blog/' . e($nextPost['slug'])) !!}">
                            <span class="qm-post-nav-dir">{{ t_raw('blog.next_label') }} <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
                            <span class="qm-post-nav-title">{{ $nextPost['title'] }}</span>
                        </a>
                    @endif
                </nav>
                @endif

                <!-- Related posts (modern card treatment — matches the modern archive cards) -->
                @if ($related)
                <h2 class="qm-section-title mt-5">{{ t_raw('blog.related_posts_title') }}</h2>
                <div class="row g-4">
                    @foreach ($related as $r)
                    <div class="col-md-6" data-reveal>
                        <article class="qm-blogm-card">
                            <a class="qm-blogm-card-media" href="{!! url('/blog/' . e($r['slug'])) !!}" tabindex="-1" aria-hidden="true">
                                <img src="{{ media($r['featured_image'], 'assets/client/blog/blog-1.png') }}" alt="" width="426" height="266" loading="lazy">
                            </a>
                            <div class="qm-blogm-card-body">
                                <h3 class="qm-blogm-card-title"><a href="{!! url('/blog/' . e($r['slug'])) !!}">{{ $r['title'] }}</a></h3>
                                @if (!empty($r['excerpt']))
                                <p class="qm-blogm-card-excerpt">{{ str_excerpt((string) $r['excerpt'], 18) }}</p>
                                @endif
                                <div class="qm-blogm-card-foot">
                                    <span class="qm-blogm-author">
                                        <img class="qm-blogm-author-img" src="{{ avatar_src($r['author_avatar'] ?? null) }}" alt="" width="38" height="38" loading="lazy">
                                        <span class="qm-blogm-author-text">
                                            <span class="qm-blogm-author-name">{!! ($r['author_name'] ?? '') !== '' ? e($r['author_name']) : t('blog.admin_fallback_name') !!}</span>
                                            @if (!empty($r['published_at']))
                                            <span class="qm-blogm-author-date"><time datetime="{{ date('Y-m-d', strtotime((string) $r['published_at'])) }}">{!! fmt_day($r['published_at']) !!}</time></span>
                                            @endif
                                        </span>
                                    </span>
                                    <a class="qm-blogm-more" href="{!! url('/blog/' . e($r['slug'])) !!}">{{ t_raw('blog.read_more') }} <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
                                </div>
                            </div>
                        </article>
                    </div>
                    @endforeach
                </div>
                @endif
            </div>

            <aside class="{{ $two ? 'col-lg-3' : 'col-lg-4' }} order-3" aria-label="{{ t_raw('blog.more_from_blog_aria') }}">
                <div class="qm-blogm-side is-sticky">
                    @partial('blog-modern-sidebar-right', [
                        'featured'  => $featured ?? null,
                        'activeCat' => $activeCat,
                        'searchTerm' => '',
                    ])
                </div>
            </aside>
        </div>
    </div>
</section>
@endsection