@extends('layouts.user_type.guest')
@section('header_title', $blog->meta?->meta_title ?: $blog->title)
@section('seo_description', \App\Support\Seo::description($blog->meta?->meta_description ?: $blog->short_description))
@section('seo_image', $blog->banner ? url($blog->banner->file_path) : '')
@section('canonical', localized_route('blog.single', $blog->public_key))
@section('og_type', 'article')

@push('extra_css')
    <style>
        .blog-single-shell {
            padding: 120px 0 70px;
            color: var(--text);
        }

        .blog-single-head {
            display: grid;
            gap: 18px;
            margin-bottom: 26px;
        }

        .blog-single-head__image {
            width: 100%;
            aspect-ratio: 16 / 8;
            border-radius: 8px;
            overflow: hidden;
            background: var(--bg_darker);
        }

        .blog-single-head__image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .blog-single-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            color: #9fb0cc;
            font-size: 14px;
        }

        .blog-single-title {
            font-size: 36px;
            line-height: 1.7;
            font-weight: 900;
            margin: 0;
        }

        .blog-single-excerpt {
            color: #9fb0cc;
            line-height: 2.1;
            font-size: 16px;
            margin: 0;
        }

        .blog-article {
            background: var(--bg2);
            border: 1px solid rgba(255, 255, 255, .08);
            border-radius: 8px;
            padding: 28px;
        }

        .blog-article__content {
            color: var(--text);
            line-height: 2.25;
            font-size: 16px;
        }

        .blog-article__content p {
            margin-bottom: 18px;
        }

        .blog-article__content img {
            max-width: 100%;
            border-radius: 8px;
            margin: 18px 0;
        }

        .blog-article__tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 24px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, .08);
        }

        .blog-article__tags a {
            color: #fff;
            background: rgba(73, 88, 165, .18);
            border: 1px solid rgba(73, 88, 165, .45);
            border-radius: 8px;
            padding: 8px 11px;
        }

        .blog-related {
            margin-top: 24px;
        }

        .blog-related h2 {
            font-size: 22px;
            font-weight: 900;
            margin-bottom: 16px;
        }

        .blog-related-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 14px;
        }

        .blog-related-card {
            display: block;
            overflow: hidden;
            border-radius: 8px;
            background: var(--bg2);
            border: 1px solid rgba(255, 255, 255, .08);
            color: var(--text);
        }

        .blog-related-card img {
            width: 100%;
            aspect-ratio: 16 / 9;
            object-fit: cover;
        }

        .blog-related-card span {
            display: block;
            padding: 12px;
            line-height: 1.8;
            font-weight: 800;
        }

        @media (max-width: 991px) {
            .blog-related-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 576px) {
            .blog-single-title {
                font-size: 26px;
            }

            .blog-article {
                padding: 18px;
            }
        }
    </style>
@endpush

@section('content')
    @php
        use App\Helpers\xDate;

        $fallbackImage = url('assets/images/logo.png');
        $image = $blog->banner ? url($blog->banner->file_path) : $fallbackImage;
        $date = $blog->publish_time ?: $blog->created_at;
        $dateLabel = $date ? xDate::dateFa('~ j F Y', $date->timestamp) : '';
        $authorName = trim(($blog->author?->fname ?? '') . ' ' . ($blog->author?->lname ?? '')) ?: __('مدیر سایت');
    @endphp

    <main class="blog-single-shell">
        <div class="container">
            <div class="row g-4">
                <div class="col-lg-8">
                    <article>
                        <header class="blog-single-head">
                            <div class="blog-single-head__image">
                                <img src="{{ $image }}" alt="{{ $blog->title }}">
                            </div>
                            <div class="blog-single-meta">
                    <span><i class="far fa-folder"></i> {{ $blog->category?->localized_title ?? __('عمومی') }}</span>
                                @if($dateLabel)
                                    <span><i class="far fa-calendar"></i> {{ $dateLabel }}</span>
                                @endif
                                <span><i class="far fa-user"></i> {{ $authorName }}</span>
                            </div>
                            <h1 class="blog-single-title">{{ $blog->title }}</h1>
                            @if($blog->short_description)
                                <p class="blog-single-excerpt">{{ $blog->short_description }}</p>
                            @endif
                        </header>

                        <div class="blog-article">
                            <div class="blog-article__content">
                                @if($blog->body?->body)
                                    {!! $blog->body->body !!}
                                @elseif($blog->short_description)
                                    {!! nl2br(e($blog->short_description)) !!}
                                @else
                    <p>{{ __('محتوایی برای این مقاله ثبت نشده است.') }}</p>
                                @endif
                            </div>

                            @if($blog->tags->isNotEmpty())
                                <div class="blog-article__tags">
                                    @foreach($blog->tags as $tag)
                                        <a href="{{ localized_route('blog.index', ['tag' => $tag->id]) }}">{{ $tag->tag }}</a>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    </article>

                    @if($relatedBlogs->isNotEmpty())
                        <section class="blog-related">
                <h2>{{ __('مقاله های مرتبط') }}</h2>
                            <div class="blog-related-grid">
                                @foreach($relatedBlogs as $relatedBlog)
                                    @php($relatedImage = $relatedBlog->banner ? url($relatedBlog->banner->file_path) : $fallbackImage)
                                    <a class="blog-related-card" href="{{ localized_route('blog.single', ['nic_name' => $relatedBlog->public_key]) }}">
                                        <img src="{{ $relatedImage }}" alt="{{ $relatedBlog->title }}">
                                        <span>{{ $relatedBlog->title }}</span>
                                    </a>
                                @endforeach
                            </div>
                        </section>
                    @endif
                </div>

                <div class="col-lg-4">
                    @include('blog._sidebar')
                </div>
            </div>
        </div>
    </main>
@endsection