@extends('frontend::layouts.master')

@section('title')
    <title>{{ $blog->getSeoMeta('title') ?? $blog->title }}</title>
    <meta name="title" content="{{ $blog->getSeoMeta('title') ?? $blog->title }}">
    <meta name="description" content="{{ $blog->getSeoMeta('description') ?? $blog->excerpt }}">
    <meta name="keyword" content="{{ $blog->getSeoMeta('keywords') ?? '' }}">
@endsection


@section('content')
    <!-- main-area -->
    <main class="fix">

        <x-frontend::breadcrumb>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">{{ __('frontend::messages.Home') }}</a></li>
                <li class="breadcrumb-item"><a href="{{ route('blogs') }}">{{ __('frontend::messages.Blogs') }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">
                    {{ $blog?->title }}
                </li>
            </ol>
        </x-frontend::breadcrumb>

        <!-- blog-details-area -->
        <section class="blog-details-area pt-60 pb-60">
            <div class="container">
                <div class="author-inner-wrap blog-inner-wrap">
                    <div class="row justify-content-center">
                        <div class="col-70 order-0 order-xl-2">
                            <div class="blog-details-wrap">
                                <div class="blog-details-content">
                                    <div class="blog-details-content-top">

                                        @if ($blog?->categories && $blog?->categories->count() > 0)
                                            <div class="d-flex flex-wrap gap-3">
                                                @foreach ($blog?->categories as $category)
                                                    <a href="{{ route('blogs', ['category_id' => $category?->id]) }}"
                                                        class="post-tag">
                                                        {{ $category?->name }}
                                                    </a>
                                                @endforeach
                                            </div>
                                        @endif

                                        <h2 class="title">
                                            {{ $blog?->title }}
                                        </h2>

                                        <div class="bd-content-inner">
                                            <div class="blog-post-meta">
                                                <ul class="list-wrap">

                                                    <li><i class="flaticon-user"></i>
                                                        by
                                                        <a href="{{ route('blog.author', $blog?->author_id) }}">
                                                            {{ $blog?->author?->name }}
                                                        </a>
                                                    </li>

                                                    <li><i class="flaticon-calendar"></i>
                                                        {{ $blog?->created_at?->format('d M Y') }} </li>

                                                    <li><i class="flaticon-chat"></i>
                                                        <a href="{{ url('blog/' . $blog->slug . '#comments') }}">
                                                            {{ $blog->total_comment }}
                                                            {{ $blog->total_comment > 1 ? __('frontend::messages.Comments') : __('frontend::messages.Comment') }}
                                                        </a>
                                                    </li>

                                                    @if ($blog?->getMeta('reading_time'))
                                                        <li><i
                                                                class="flaticon-history"></i>{{ $blog?->getMeta('reading_time') }}
                                                        </li>
                                                    @endif
                                                </ul>
                                            </div>
                                            <div class="blog-details-social">
                                                <ul class="list-wrap">
                                                    <li>
                                                        <a target="_blank"
                                                            href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(route('blog.detail', $blog->slug)) }}&t={{ urlencode($blog?->title) }}">
                                                            <i class="fab fa-facebook-f"></i>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a target="_blank"
                                                            href="https://x.com/share?text={{ urlencode($blog?->title) }}&url={{ urlencode(route('blog.detail', $blog->slug)) }}">
                                                            <i class="fab fa-twitter"></i>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a target="_blank"
                                                            href="https://www.instagram.com/?url={{ urlencode(route('blog.detail', $blog->slug)) }}">
                                                            <i class="fab fa-instagram"></i>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a target="_blank"
                                                            href="https://www.linkedin.com/shareArticle?mini=true&url={{ urlencode(route('blog.detail', $blog->slug)) }}&title={{ urlencode($blog->title) }}">
                                                            <i class="fab fa-linkedin-in"></i>
                                                        </a>
                                                    </li>
                                                </ul>

                                            </div>
                                        </div>
                                    </div>

                                    <div class="blog-details-thumb video-thumb">
                                        <img src="{{ getContentMediaWithFallback($blog, 'featured') ?: asset('backend/assets/img/blog/default.png') }}"
                                            alt="{{ $blog?->title }}">
                                        @if ($blog->getMeta('is_video_blog') == 1 && $blog->getMeta('video_url'))
                                            <a href="{{ $blog->getMeta('video_url') }}" class="play-btn popup-video">
                                                <i class="fas fa-play"></i>
                                            </a>
                                        @endif
                                    </div>

                                    <div class="blog-content">
                                        <div class="first-info mb-5">{!! $blog?->excerpt !!}</div>
                                        <div>{!! $blog?->content !!}</div>
                                    </div>

                                    <div class="blog-details-bottom">
                                        <div class="row">
                                            <div class="col-lg-6">
                                                @if ($blog->tags->isNotEmpty())
                                                    <div class="post-tags">
                                                        <h5 class="title">{{ __('frontend::messages.Tags') }}:</h5>
                                                        <ul class="list-wrap">
                                                            @foreach ($blog->tags as $tag)
                                                                <li>
                                                                    <a href="{{ route('blogs', ['tag_id' => $tag->id]) }}">
                                                                        {{ $tag?->name }}
                                                                    </a>
                                                                </li>
                                                            @endforeach
                                                        </ul>
                                                    </div>
                                                @endif
                                            </div>

                                            <div class="col-lg-6">
                                                <div class="post-share">
                                                    <h5 class="title">{{ __('frontend::messages.Share') }}:</h5>
                                                    <ul class="list-wrap">
                                                        <li><a
                                                                href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(route('blog.detail', $blog->slug)) }}&t={{ urlencode($blog?->title) }}"><i
                                                                    class="fab fa-facebook-f"></i></a></li>
                                                        <li><a
                                                                href="https://x.com/share?text={{ urlencode($blog?->title) }}&url={{ urlencode(route('blog.detail', $blog->slug)) }}"><i
                                                                    class="fab fa-twitter"></i></a></li>
                                                        <li><a
                                                                href="https://www.instagram.com/?url={{ urlencode(route('blog.detail', $blog->slug)) }}"><i
                                                                    class="fab
                                                                fa-instagram"></i></a>
                                                        </li>
                                                        <li><a
                                                                href="https://www.linkedin.com/shareArticle?mini=true&url={{ urlencode(route('blog.detail', $blog->slug)) }}&title={{ urlencode($blog->title) }}"><i
                                                                    class="fab fa-linkedin-in"></i></a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @include('frontend::blog.include.blog_author_info')
                                @include('frontend::blog.include.prev_next_post')
                                @include('frontend::blog.include.blog_comment_list')
                                @include('frontend::blog.include.blog_comment_submit')
                            </div>
                        </div>
                        <div class="col-30">
                            @include('frontend::blog.include.blog_sidebar')
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- blog-details-area-end -->

    </main>
    <!-- main-area-end -->
@endsection

@push('style')
    <style>
        .blog-avatar-img img {
            width: 115px;
            height: 115px;
        }
    </style>
@endpush

@push('script')
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
@endpush