@extends('layouts.app')

@section('title', $blogPost->meta_title)
@section('meta_description', $blogPost->meta_description)
@section('canonical', route('blog.show', $blogPost->slug))
@section('og_type', 'article')
@section('og_image', asset($blogPost->cover_image ?? 'theme/image/dummy-img-1920x1280.jpg'))

@push('structured-data')
    <script type="application/ld+json">
        {!! json_encode([
            '@context' => 'https://schema.org',
            '@type' => 'BreadcrumbList',
            'itemListElement' => [
                [
                    '@type' => 'ListItem',
                    'position' => 1,
                    'name' => 'خانه',
                    'item' => route('home'),
                ],
                [
                    '@type' => 'ListItem',
                    'position' => 2,
                    'name' => 'بلاگ',
                    'item' => route('blog.index'),
                ],
                [
                    '@type' => 'ListItem',
                    'position' => 3,
                    'name' => $blogPost->title,
                    'item' => route('blog.show', $blogPost->slug),
                ],
            ],
        ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT) !!}
    </script>
    <script type="application/ld+json">
        {!! json_encode([
            '@context' => 'https://schema.org',
            '@type' => 'Article',
            'headline' => $blogPost->title,
            'description' => $blogPost->meta_description,
            'image' => [asset($blogPost->cover_image ?? 'theme/image/dummy-img-1920x1280.jpg')],
            'author' => [
                '@type' => 'Organization',
                'name' => $blogPost->author_name,
            ],
            'publisher' => [
                '@type' => 'Organization',
                'name' => 'گلد آرا',
                'logo' => [
                    '@type' => 'ImageObject',
                    'url' => asset('assets/images/logo.webp'),
                ],
            ],
            'datePublished' => optional($blogPost->published_at)->toIso8601String(),
            'dateModified' => optional($blogPost->updated_at)->toIso8601String(),
            'mainEntityOfPage' => route('blog.show', $blogPost->slug),
        ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT) !!}
    </script>
@endpush

@push('styles')
    <style>
        .page-hero.blog-detail-hero {
            background-image: url('{{ asset('theme/image/bg-hero.png') }}');
            background-position: bottom;
            min-height: 70vh;
        }
        .blog-detail-shell {
            background: linear-gradient(180deg, rgba(245,249,255,.88) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 100%);
        }
        .article-cover {
            border-radius: 32px;
            overflow: hidden;
            border: 1px solid rgba(38,125,255,.12);
            box-shadow: 0 26px 70px -48px rgba(38,125,255,.22);
        }
        .article-cover img {
            width: 100%;
            aspect-ratio: 16 / 8;
            object-fit: cover;
        }
        .article-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr);
            gap: 2rem;
            align-items: start;
        }
        .article-content {
            background: rgba(255,255,255,.96);
            border-radius: 32px;
            border: 1px solid rgba(38,125,255,.12);
            box-shadow: 0 26px 70px -50px rgba(38,125,255,.18);
            padding: clamp(1.5rem, 3vw, 2.3rem);
        }
        .article-content h2 {
            margin-top: 2rem;
            margin-bottom: 1rem;
            font-size: clamp(1.35rem, 2.3vw, 1.8rem);
        }
        .article-content p,
        .article-content li {
            line-height: 2;
            color: var(--text-color);
        }
        .article-content ul {
            padding-right: 1.2rem;
        }
        .article-sidebar {
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
            position: sticky;
            top: 110px;
        }
        .article-side-card,
        .related-post-card {
            background: rgba(255,255,255,.96);
            border-radius: 28px;
            border: 1px solid rgba(38,125,255,.12);
            box-shadow: 0 26px 70px -50px rgba(38,125,255,.18);
            padding: 1.4rem;
        }
        .article-meta-list {
            display: grid;
            gap: .9rem;
            margin-top: 1rem;
        }
        .article-meta-list span {
            display: inline-flex;
            align-items: center;
            gap: .6rem;
            color: var(--text-color-2);
        }
        .article-cta {
            display: flex;
            flex-wrap: wrap;
            gap: .75rem;
            margin-top: 1.5rem;
        }
        .related-post-card + .related-post-card {
            margin-top: 1rem;
        }
        .related-post-card h3 {
            font-size: 1.05rem;
        }
        @media (max-width: 991px) {
            .article-layout {
                grid-template-columns: 1fr;
            }
            .article-sidebar {
                position: static;
            }
        }
    </style>
@endpush

@section('content')
    <section class="section page-hero blog-detail-hero bg-attach-cover">
        <div class="r-container d-flex flex-column gap-3 align-items-center justify-content-center h-100">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb scrollanimation animated fadeInUp adr-5">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">خانه</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('blog.index') }}">بلاگ</a></li>
                    <li class="breadcrumb-item active text-white" aria-current="page">{{ $blogPost->title }}</li>
                </ol>
            </nav>
            <span class="sub-heading">{{ $blogPost->category }}</span>
            <h1 class="text-center">{{ $blogPost->title }}</h1>
            <p class="text-center" style="max-width: 720px;">{{ $blogPost->excerpt }}</p>
        </div>
    </section>

    <section class="section blog-detail-shell">
        <div class="r-container d-flex flex-column gap-4">
            <div class="article-cover">
                <img src="{{ asset($blogPost->cover_image ?? 'theme/image/dummy-img-1920x1280.jpg') }}" alt="{{ $blogPost->title }}">
            </div>

            <div class="article-layout">
                <article class="article-content">
                    {!! $blogPost->content !!}

                    <div class="article-cta">
                        <a href="{{ route('contact') }}#consult-form" class="btn btn-accent d-flex flex-row gap-2">
                            <span>درخواست مشاوره</span>
                            <i class="rtmicon rtmicon-arrow-up-right"></i>
                        </a>
                        <a href="{{ route('blog.index') }}" class="btn btn-accent line d-flex flex-row gap-2">
                            <span>بازگشت به بلاگ</span>
                            <i class="rtmicon rtmicon-arrow-up-right"></i>
                        </a>
                    </div>
                </article>

                <aside class="article-sidebar">
                    <div class="article-side-card">
                        <span class="sub-heading">اطلاعات مقاله</span>
                        <div class="article-meta-list">
                            <span><i class="rtmicon rtmicon-calendar"></i>{{ $blogPost->formatted_published_date }}</span>
                            <span><i class="rtmicon rtmicon-clock"></i>{{ $blogPost->reading_time }} دقیقه مطالعه</span>
                            <span><i class="rtmicon rtmicon-user-group"></i>{{ $blogPost->author_name }}</span>
                        </div>
                    </div>

                    @if ($relatedPosts->isNotEmpty())
                        <div class="article-side-card">
                            <span class="sub-heading">مطالب مرتبط</span>
                            <div class="mt-3">
                                @foreach ($relatedPosts as $relatedPost)
                                    <div class="related-post-card">
                                        <span class="blog-meta-chip mb-3">{{ $relatedPost->category }}</span>
                                        <h3 class="m-0 mb-2">
                                            <a href="{{ route('blog.show', $relatedPost->slug) }}" class="text-decoration-none text-color">{{ $relatedPost->title }}</a>
                                        </h3>
                                        <p class="mb-3">{{ $relatedPost->excerpt }}</p>
                                        <a href="{{ route('blog.show', $relatedPost->slug) }}" class="btn btn-accent line d-flex flex-row gap-2 w-max-content">
                                            <span>مطالعه بیشتر</span>
                                            <i class="rtmicon rtmicon-arrow-up-right"></i>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </aside>
            </div>
        </div>
    </section>
@endsection