@extends(getTemplate().'.layouts.app')

@php
    $metaExtra = view('web.default.blog.partials.show_hero_meta', ['post' => $post])->render();
    $relatedPosts = collect($popularPosts)->filter(function ($p) use ($post) {
        if ((int) $p->id === (int) $post->id) {
            return false;
        }
        if (empty($post->category_id)) {
            return true;
        }
        return (int) $p->category_id === (int) $post->category_id;
    })->take(3);
    if ($relatedPosts->count() < 3) {
        $ids = $relatedPosts->pluck('id')->all();
        $fill = collect($popularPosts)->filter(function ($p) use ($post, $ids) {
            return (int) $p->id !== (int) $post->id && !in_array($p->id, $ids, true);
        })->take(3 - $relatedPosts->count());
        $relatedPosts = $relatedPosts->concat($fill)->values();
    }
@endphp

@section('content')
    @include('web.default.includes.premium.page_hero', [
        'variant' => 'gradient',
        'title' => $post->title,
        'extra' => $metaExtra,
    ])

    <section class="container mt-10 mt-md-40">
        <div class="row">
            <div class="col-12 col-lg-8">
                <article class="premium-article-wrap mt-20 mt-lg-30">
                    @if(!empty($post->image))
                        <div class="premium-article-featured">
                            @include('web.default.includes.premium.responsive_image', [
                                'src' => $post->image,
                                'alt' => $post->title,
                                'class' => 'img-cover',
                                'width' => 1200,
                                'height' => 675,
                                'loading' => 'eager',
                                'fetchpriority' => 'high',
                            ])
                        </div>
                    @endif

                    <div class="post-show premium-article-body mt-20">
                        {!! nl2br($post->content) !!}
                    </div>

                    @include('web.default.includes.premium.cta_strip', [
                        'title' => trans('footer.join_us_today'),
                        'text' => trans('site.newest_courses_subtitle'),
                        'primaryLabel' => trans('product.courses'),
                        'primaryUrl' => '/classes',
                        'secondaryLabel' => trans('home.blog'),
                        'secondaryUrl' => '/blog',
                        'class' => 'mt-40',
                    ])

                    @if(!empty($relatedPosts) && $relatedPosts->count())
                        @include('web.default.includes.premium.section_header', [
                            'title' => trans('site.related_articles'),
                            'subtitle' => null,
                            'eyebrow' => trans('home.blog'),
                            'align' => 'start',
                            'class' => 'mt-50',
                        ])
                        <div class="premium-related-grid mt-20 mb-40">
                            @foreach($relatedPosts as $rel)
                                @include('web.default.blog.grid-list', ['post' => $rel])
                            @endforeach
                        </div>
                    @endif

                    @if($post->enable_comment)
                        @include('web.default.includes.comments',[
                                'comments' => $post->comments,
                                'inputName' => 'blog_id',
                                'inputValue' => $post->id
                            ])
                    @endif
                </article>
            </div>
            <div class="col-12 col-lg-4">
                @if(!empty($post->author->full_name))
                    <div class="rounded-lg shadow-sm mt-20 mt-lg-30 p-20 course-teacher-card d-flex align-items-center flex-column premium-sidebar-panel">
                        <div class="teacher-avatar mt-5">
                            <img src="{{ $post->author->getAvatar(100) }}" class="img-cover" alt="{{ $post->author->full_name }}" width="100" height="100" loading="lazy" decoding="async">
                        </div>
                        <h3 class="mt-10 font-20 font-weight-bold text-secondary">{{ $post->author->full_name }}</h3>
                        <span class="mt-5 font-weight-500 font-14 text-gray">{{ $post->author->role->caption }}</span>

                        <div class="mt-25 d-flex align-items-center w-100">
                            <a href="/blog?author={{ $post->author->id }}" class="btn btn-sm btn-primary btn-block px-15">{{ trans('public.author_posts') }}</a>
                        </div>
                    </div>
                @endif

                @include('web.default.includes.premium.sidebar_panel', [
                    'title' => trans('categories.categories'),
                    'body' => view('web.default.blog.partials.sidebar_categories_body', ['blogCategories' => $blogCategories])->render(),
                ])

                @include('web.default.includes.premium.sidebar_panel', [
                    'title' => trans('site.recent_posts'),
                    'body' => view('web.default.blog.partials.sidebar_popular_body', ['popularPosts' => $popularPosts])->render(),
                ])
            </div>
        </div>
    </section>
@endsection

@push('scripts_bottom')
    <script>
        var webinarDemoLang = '{{ trans('webinars.webinar_demo') }}';
        var replyLang = '{{ trans('panel.reply') }}';
        var closeLang = '{{ trans('public.close') }}';
        var saveLang = '{{ trans('public.save') }}';
        var reportLang = '{{ trans('panel.report') }}';
        var reportSuccessLang = '{{ trans('panel.report_success') }}';
        var messageToReviewerLang = '{{ trans('public.message_to_reviewer') }}';
    </script>

    <script src="/assets/default/js/parts/comment.min.js"></script>
@endpush


@push('styles_top')
<style>
    .post-show p span {
        max-width:100% !important;

    }

    .post-show p span img{
        max-width:100% !important;
        height:auto;
    }
</style>
@endpush
