@extends('site.layouts.site-layout')

@section('title', $post->seo_title ?: $post->title)

@section('seo')
@if($post->seo_description)
    <meta name="description" content="{{ $post->seo_description }}">
@elseif($post->excerpt)
    <meta name="description" content="{{ \Illuminate\Support\Str::limit(strip_tags($post->excerpt), 160) }}">
@endif
@if($post->seo_keywords)
    <meta name="keywords" content="{{ $post->seo_keywords }}">
@elseif($post->tags->isNotEmpty())
    <meta name="keywords" content="{{ $post->tags->pluck('name')->implode(', ') }}">
@endif
<meta property="og:type" content="article">
<meta property="og:title" content="{{ $post->seo_title ?: $post->title }}">
@if($post->featured_image)
    <meta property="og:image" content="{{ url('uploads/blog/posts/' . $post->featured_image) }}">
@endif
<link rel="canonical" href="{{ $post->url() }}">
@if($post->seo_schema)
    {!! $post->seo_schema !!}
@endif
@endsection

@section('styles')
<style>
/* article body typography */
.blog-post-content img,
.blog-post-content figure img { max-width: 100%; height: auto; border-radius: 10px; }
.blog-post-content figure { margin: 18px 0; text-align: center; }
.blog-post-content p { line-height: 2.1; font-size: 15.5px; color: #333; margin-bottom: 14px; text-align: justify; }
.blog-post-content h2, .blog-post-content h3, .blog-post-content h4 { margin-top: 28px; font-weight: 700; }
.blog-post-content blockquote { border-right: 4px solid var(--main-color-one); background: #fafafa; padding: 12px 18px; margin: 18px 0; }
.blog-post-content pre, .blog-post-content code { background: #0f172a; color: #e2e8f0; padding: 14px; border-radius: 8px; overflow: auto; }
.blog-post-content ul, .blog-post-content ol { line-height: 2.1; padding-inline-start: 24px; }
.blog-post-tags { padding-top: 16px; border-top: 1px dashed #e5e7eb; margin-top: 22px; }
.blog-post-tags a { display: inline-block; background: #f4f5f9; color: #555; padding: 6px 12px; border-radius: 30px; margin-inline-end: 6px; margin-bottom: 6px; font-size: 13px; text-decoration: none; }
.blog-post-tags a:hover { background: var(--main-color-one); color: #fff; }
.blog-share-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 14px; margin-top: 16px; border-top: 1px dashed #e5e7eb; }
.blog-share-row a { width: 34px; height: 34px; border-radius: 50%; background: #f4f5f9; color: #555; display: inline-flex; align-items: center; justify-content: center; transition: .2s; }
.blog-share-row a:hover { background: var(--main-color-one); color: #fff; }
</style>
@endsection

@section('content')

{{-- breadcrumb --}}
<div class="bread-crumb pt-3">
    <div class="container-fluid">
        <div class="content-box">
            <div class="container-fluid">
                <nav aria-label="breadcrumb" class="my-lg-0 my-2">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}" class="font-14 text-muted">خانه</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('blog.index') }}" class="font-14 text-muted">وبلاگ</a></li>
                        @if($category)
                            <li class="breadcrumb-item"><a href="{{ url('blog/' . $category->slug) }}" class="font-14 text-muted">{{ $category->name }}</a></li>
                        @endif
                        <li class="breadcrumb-item active main-color-one-color font-14" aria-current="page">{{ $post->title }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</div>

{{-- main content --}}
<div class="content">
    <div class="container-fluid">
        <div class="row gy-3">

            <div class="col-lg-9">
                <div class="content-box">
                    <div class="container-fluid">
                        <article class="blog-detail">

                            <div class="title-panel mb-2">
                                <h1 class="font-18">{{ $post->title }}</h1>
                            </div>

                            <div class="blog-post-title-items">
                                <div class="blog-post-title-item">
                                    <img src="{{ asset('theme/assets/image/user.png') }}" class="rounded-circle" alt="">
                                    <p class="text-muted">
                                        {{ trim(($post->author?->first_name ?? '') . ' ' . ($post->author?->last_name ?? '')) ?: 'مدیر' }}
                                    </p>
                                </div>
                                <div class="blog-post-title-item">
                                    <i class="bi bi-stopwatch"></i>
                                    <p class="text-muted">
                                        {{ \App\Support\Jalali::format($post->published_at ?: $post->created_at, 'j F Y') }}
                                    </p>
                                </div>
                                <div class="blog-post-title-item">
                                    <i class="bi bi-eye-fill"></i>
                                    <p class="text-muted">{{ number_format($post->views) }} بازدید</p>
                                </div>
                                @php
                                    $words = max(1, str_word_count(strip_tags((string) $post->content)));
                                    $readMin = max(1, (int) ceil($words / 200));
                                @endphp
                                <div class="blog-post-title-item">
                                    <i class="bi bi-clock"></i>
                                    <p class="text-muted">{{ $readMin }} دقیقه مطالعه</p>
                                </div>
                            </div>

                            @if($post->featured_image)
                                <figure class="image-center mt-3 mb-3">
                                    <img class="img-fluid rounded-3"
                                         src="{{ url('uploads/blog/posts/' . $post->featured_image) }}"
                                         alt="{{ $post->featured_image_alt ?: $post->title }}">
                                </figure>
                            @endif

                            @if($post->excerpt)
                                <div class="alert alert-light border mb-3">
                                    <strong>چکیده:</strong> {{ $post->excerpt }}
                                </div>
                            @endif

                            <div class="blog-post-content">
                                {!! $post->content !!}
                            </div>

                            @if($post->tags->isNotEmpty())
                                <div class="blog-post-tags">
                                    <strong class="ms-2">تگ‌ها:</strong>
                                    @foreach($post->tags as $tag)
                                        <a href="{{ url('blog/tags/' . $tag->slug) }}">#{{ $tag->name }}</a>
                                    @endforeach
                                </div>
                            @endif

                            <div class="blog-share-row">
                                <strong class="ms-2">اشتراک‌گذاری:</strong>
                                <a href="https://t.me/share/url?url={{ urlencode($post->url()) }}&text={{ urlencode($post->title) }}" target="_blank" rel="noopener" aria-label="تلگرام"><i class="bi bi-telegram"></i></a>
                                <a href="https://api.whatsapp.com/send?text={{ urlencode($post->title . ' ' . $post->url()) }}" target="_blank" rel="noopener" aria-label="واتساپ"><i class="bi bi-whatsapp"></i></a>
                                <a href="https://twitter.com/intent/tweet?url={{ urlencode($post->url()) }}&text={{ urlencode($post->title) }}" target="_blank" rel="noopener" aria-label="ایکس"><i class="bi bi-twitter-x"></i></a>
                                <a href="javascript:void(0)" onclick="navigator.clipboard.writeText('{{ $post->url() }}'); this.title='کپی شد';" aria-label="کپی لینک"><i class="bi bi-link-45deg"></i></a>
                            </div>

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

            <div class="col-lg-3">
                <div class="side-blog-detail position-sticky" style="top:16px;">

                    {{-- آخرین مطالب وبلاگ --}}
                    @if($sidebarLatest->isNotEmpty())
                    <div class="latest-posts">
                        <div class="content-box">
                            <div class="container-fluid">
                                <div class="title-panel mb-2">
                                    <h6 class="title">آخرین مطالب وبلاگ</h6>
                                </div>
                                <nav class="navbar">
                                    <ul class="navbar-nav w-100">
                                        @foreach($sidebarLatest as $sp)
                                            @php
                                                $spThumb = $sp->featured_image
                                                    ? url('uploads/blog/posts/' . $sp->featured_image)
                                                    : asset('theme/assets/image/blog-' . (($loop->index % 8) + 1) . '.jpg');
                                            @endphp
                                            <li class="nav-item">
                                                <a href="{{ $sp->url() }}" class="nav-link">
                                                    <div class="mini-blog-item">
                                                        <div class="image">
                                                            <img src="{{ $spThumb }}" class="img-fluid"
                                                                 alt="{{ $sp->featured_image_alt ?: $sp->title }}">
                                                        </div>
                                                        <div class="d-flex align-items-start desc flex-wrap flex-column justify-content-between">
                                                            <h5 class="title">{{ $sp->title }}</h5>
                                                            <div class="d-flex align-items-center">
                                                                <p class="text-muted mb-0">
                                                                    {{ \App\Support\Jalali::format($sp->published_at ?: $sp->created_at, 'j F Y') }}
                                                                </p>
                                                                <div class="text-end ms-2"><i class="bi bi-arrow-left main-color-one-color"></i></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                    @endif

                    {{-- داغ‌ترین مطلب امروز --}}
                    @if($hotPost)
                        @php
                            $hotThumb = $hotPost->featured_image
                                ? url('uploads/blog/posts/' . $hotPost->featured_image)
                                : asset('theme/assets/image/blog-1.jpg');
                        @endphp
                        <div class="sugget-pro-in-blog-post mt-3">
                            <div class="content-box">
                                <div class="container-fluid">
                                    <div class="title-panel mb-2">
                                        <h6 class="title">داغ‌ترین مطلب امروز</h6>
                                    </div>
                                    <div class="blog-news-item mt-4">
                                        <a href="{{ $hotPost->url() }}">
                                            <img src="{{ $hotThumb }}" alt="{{ $hotPost->featured_image_alt ?: $hotPost->title }}" class="img-fluid">
                                            <div class="desc">
                                                <h3 class="title">{{ $hotPost->title }}</h3>
                                                <div class="date">
                                                    <span class="text-date">{{ \App\Support\Jalali::format($hotPost->published_at ?: $hotPost->created_at, 'j F Y') }}</span>
                                                    <i class="bi bi-arrow-left"></i>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                    {{-- دسته‌بندی‌های وبلاگ --}}
                    @if($categories->isNotEmpty())
                    <div class="latest-posts mt-3">
                        <div class="content-box">
                            <div class="container-fluid">
                                <div class="title-panel mb-2">
                                    <h6 class="title">دسته‌بندی‌های وبلاگ</h6>
                                </div>
                                <div class="navbar-blog">
                                    <nav class="navbar">
                                        <ul class="navbar-nav w-100">
                                            @foreach($categories as $cat)
                                                <li class="nav-item {{ $category && $cat->id === $category->id ? 'mco-hover' : '' }}">
                                                    <a href="{{ url('blog/' . $cat->slug) }}" class="nav-link">
                                                        @if($cat->icon)
                                                            <i class="bi bi-{{ $cat->icon }} font-20 me-2"></i>
                                                        @else
                                                            <i class="bi bi-bookmark font-20 me-2"></i>
                                                        @endif
                                                        {{ $cat->name }}
                                                    </a>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif

                </div>
            </div>

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

{{-- مطالب مرتبط --}}
@if($related->isNotEmpty())
<div class="blog-slider site-slider site-slider-sm py-20">
    <div class="container-fluid">
        <div class="header-content mb-4 bg-white shadow-box rounded-3 p-3 d-flex align-items-center justify-content-between flex-wrap">
            <div class="title d-flex align-items-center">
                <img src="{{ asset('theme/assets/image/square.png') }}" alt="" class="img-fluid">
                <h5 class="font-16 ms-3">مطالب مرتبط <span class="main-color-one-color d-inline-block">وبلاگ</span></h5>
            </div>
            <div class="link">
                <a href="{{ $category ? url('blog/' . $category->slug) : route('blog.index') }}" class="border-animate fromCenter pb-1 fw-bold">
                    مشاهده همه
                    <i class="bi bi-chevron-double-left main-color-one-color"></i>
                </a>
            </div>
        </div>
    </div>

    <div class="parent">
        <div class="container-fluid">
            <div class="swiper product-slider-swiper">
                <div class="swiper-wrapper">
                    @foreach($related as $r)
                        <div class="swiper-slide">
                            @include('site.blog.partials._post-card', ['post' => $r])
                        </div>
                    @endforeach
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
    </div>
</div>
@endif

@endsection
