@extends('layouts.public')

@section('content')
@php
/**
 * @var array      $post         the post row (joined with category_name/slug)
 * @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
 */
$tags                = $tags ?? [];
$readMinutes         = (int) ($readMinutes ?? 1);
$tagCloud            = $tagCloud            ?? [];
$featuredRestaurants = $featuredRestaurants ?? [];
$two                 = $twoSidebars ?? true;   // admin: two sidebars (default) or one (right only)

/** Render one comment block; $isReply indents it under its parent. */
$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']);
@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">
    <div class="container-fluid">
        <div class="row g-4">
            @if ($two)
            <div class="col-lg-3 order-2 order-lg-1">
                @partial('blog-sidebar', ['active' => (string) ($post['category_slug'] ?? ''), 'tagCloud' => $tagCloud, 'featuredRestaurants' => $featuredRestaurants, 'widgets' => ['popular', 'tags', 'categories', 'restaurants']])
            </div>
            @endif
            <div class="{{ $two ? 'col-lg-6 order-1 order-lg-2' : 'col-lg-8' }}">
                <article class="qm-card qm-article">
                    <img class="qm-article-hero" src="{{ media($post['featured_image'], 'assets/client/blog/shop-1.png') }}" alt="{{ $post['title'] }}">

                    @php // Meta vocabulary matches the archive card (author + date), with the category pill, for one consistent look.
@endphp
                    @php // Classic meta: category pill + author + date icons (matches the classic archive card).
@endphp
                    <div class="qm-article-meta">
                        @if (!empty($post['category_name']))
                            <a class="qm-blog-card-cat qm-blog-card-cat--inline" href="{{ url('/blog?cat=' . urlencode((string) $post['category_slug'])) }}">{{ $post['category_name'] }}</a>
                        @endif
                        <span><i class="fas fa-user" aria-hidden="true"></i> {!! ($post['author_name'] ?? '') !== '' ? e($post['author_name']) : t('blog.admin_fallback_name') !!}</span>
                        @if (!empty($post['published_at']))
                        <span><i class="fas fa-calendar-alt" aria-hidden="true"></i> <time datetime="{{ date('Y-m-d', strtotime((string) $post['published_at'])) }}">{!! fmt_day($post['published_at']) !!}</time></span>
                        @endif
                        <span><i class="far fa-clock" aria-hidden="true"></i> {{ t_raw('blog.min_read_suffix', [':n' => (int) $readMinutes]) }}</span>
                    </div>

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

                    <div class="qm-article-foot">
                        @if ($tags)
                        <div class="qm-tags-row" role="group" aria-label="{{ t_raw('blog.tags_aria') }}">
                            @foreach ($tags as $t)
                                <a class="qm-pill qm-pill-grey" 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
            </div>

            <div class="{{ $two ? 'col-lg-3 order-3' : 'col-lg-4' }}">@partial('blog-sidebar', ['active' => (string) ($post['category_slug'] ?? ''), 'tagCloud' => $tagCloud, 'featuredRestaurants' => $featuredRestaurants, 'widgets' => $two ? ['search', 'recent', 'newsletter'] : ['search', 'categories', 'tags', 'recent', 'popular', 'restaurants', 'newsletter']])</div>
        </div>

        @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-lg-4 col-md-6">
                <article class="qm-blog-card">
                    <a class="qm-blog-card-media" href="{!! url('/blog/' . e($r['slug'])) !!}" tabindex="-1" aria-hidden="true">
                        <img src="{{ media($r['featured_image'], 'assets/client/blog/shop-1.png') }}" alt="" width="406" height="239" loading="lazy">
                    </a>
                    <div class="qm-blog-card-body">
                        <h3 class="qm-blog-card-title"><a href="{!! url('/blog/' . e($r['slug'])) !!}">{{ $r['title'] }}</a></h3>
                        @if (!empty($r['published_at']))
                        <div class="qm-blog-card-meta">
                            <span><i class="fas fa-calendar-alt" aria-hidden="true"></i> <time datetime="{{ date('Y-m-d', strtotime((string) $r['published_at'])) }}">{!! fmt_day($r['published_at']) !!}</time></span>
                        </div>
                        @endif
                        <a class="qm-blog-card-more" href="{!! url('/blog/' . e($r['slug'])) !!}">{{ t_raw('blog.read_more') }} <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
                    </div>
                </article>
            </div>
            @endforeach
        </div>
        @endif
    </div>
</section>
@endsection