@extends('user.blog.layout')
@section('title', $post->meta_title ?? $post->title)

@section('meta')
@if($post->meta_description)
    <meta name="description" content="{{ $post->meta_description }}">
@endif
@if($post->meta_keywords)
    <meta name="keywords" content="{{ $post->meta_keywords }}">
@endif
@if($post->canonical_url)
    <link rel="canonical" href="{{ $post->canonical_url }}">
@else
    <link rel="canonical" href="{{ url($post->url) }}">
@endif
@if($post->noindex)
    <meta name="robots" content="noindex">
@endif
@if($post->nofollow)
    <meta name="robots" content="nofollow">
@endif

<!-- Open Graph -->
@if($post->og_title)
    <meta property="og:title" content="{{ $post->og_title }}">
@else
    <meta property="og:title" content="{{ $post->title }}">
@endif
@if($post->og_description)
    <meta property="og:description" content="{{ $post->og_description }}">
@elseif($post->excerpt)
    <meta property="og:description" content="{{ $post->excerpt }}">
@endif
@if($post->og_image)
    <meta property="og:image" content="{{ asset('storage/' . $post->og_image) }}">
@elseif($post->featured_image)
    <meta property="og:image" content="{{ asset('storage/' . $post->featured_image) }}">
@endif
<meta property="og:url" content="{{ url($post->url) }}">
<meta property="og:type" content="article">

<!-- Twitter Card -->
@if($post->twitter_title)
    <meta name="twitter:title" content="{{ $post->twitter_title }}">
@else
    <meta name="twitter:title" content="{{ $post->title }}">
@endif
@if($post->twitter_description)
    <meta name="twitter:description" content="{{ $post->twitter_description }}">
@elseif($post->excerpt)
    <meta name="twitter:description" content="{{ $post->excerpt }}">
@endif
@if($post->twitter_image)
    <meta name="twitter:image" content="{{ asset('storage/' . $post->twitter_image) }}">
@elseif($post->featured_image)
    <meta name="twitter:image" content="{{ asset('storage/' . $post->featured_image) }}">
@endif

<!-- Schema.org -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "{{ $post->schema_type }}",
  "headline": "{{ $post->title }}",
  "description": "{{ $post->excerpt ?? '' }}",
  "image": "{{ $post->featured_image ? asset('storage/' . $post->featured_image) : '' }}",
  "datePublished": "{{ $post->published_at->toAtomString() }}",
  "dateModified": "{{ $post->updated_at->toAtomString() }}",
  "author": {
    "@type": "Person",
    "name": "{{ $post->author->name ?? 'نامشخص' }}"
  },
  "publisher": {
    "@type": "Organization",
    "name": "{{ getSetting('app_name_farsi') ?? 'وبلاگ' }}"
  }
}
</script>
@endsection

@section('content')
<!-- Blog Header -->
<div class="blog-header">
    <div class="container">
        <nav aria-label="breadcrumb" class="mb-3">
            <ol class="breadcrumb" style="background: rgba(255,255,255,0.2); padding: 10px 15px; border-radius: 5px;">
                <li class="breadcrumb-item"><a href="{{ url('/') }}" class="text-white">خانه</a></li>
                <li class="breadcrumb-item"><a href="{{ route('blog.index') }}" class="text-white">وبلاگ</a></li>
                @if($post->categories->count() > 0)
                    <li class="breadcrumb-item"><a href="{{ route('blog.index', ['category' => $post->categories->first()->slug]) }}" class="text-white">{{ $post->categories->first()->name }}</a></li>
                @endif
                <li class="breadcrumb-item active text-white">{{ Str::limit($post->title, 30) }}</li>
            </ol>
        </nav>
    </div>
</div>

<div class="container">
    <div class="row">
        <!-- Main Content -->
        <div class="col-lg-9">
            <article class="article-content">
                {!! optimizedImage($post->featured_image, [
                    'alt' => $post->title,
                    'class' => 'card-img-top',
                    'lazy' => false,
                    'loading' => 'eager',
                    'style' => 'max-height: 500px; object-fit: cover; width:100%; height:auto;'
                ]) !!}
                <div class="card-body">
                    <h1>{{ $post->title }}</h1>
                    <div class="article-meta">
                        <div class="d-flex flex-wrap align-items-center gap-3">
                            <span>
                                <i class="bx bx-calendar me-1"></i> 
                                {{ \Morilog\Jalali\Jalalian::fromCarbon($post->published_at)->format('Y/m/d H:i') }}
                            </span>
                            <span>
                                <i class="bx bx-user me-1"></i> 
                                {{ $post->author->name ?? 'نامشخص' }}
                            </span>
                            <span>
                                <i class="bx bx-show me-1"></i> 
                                {{ number_format($post->unique_views_count) }} بازدید
                            </span>
                            @if($post->categories->count() > 0)
                                <span>
                                    <i class="bx bx-folder me-1"></i>
                                    @foreach($post->categories as $category)
                                        <a href="{{ route('blog.index', ['category' => $category->slug]) }}" class="text-decoration-none">{{ $category->name }}</a>@if(!$loop->last), @endif
                                    @endforeach
                                </span>
                            @endif
                        </div>
                    </div>
                    
                    <div class="post-content">
                        {!! $post->content_html !!}
                    </div>

                    @if($post->tags->count() > 0)
                        <div class="mt-4 pt-4 border-top">
                            <strong>برچسب‌ها:</strong>
                            <div class="mt-2">
                                @foreach($post->tags as $tag)
                                    <a href="{{ route('blog.index', ['tag' => $tag->slug]) }}" class="badge bg-secondary text-decoration-none me-1 mb-2">{{ $tag->name }}</a>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </article>

            <!-- Related Posts -->
            @if($relatedPosts->count() > 0)
                <div class="card mb-4" style="border: none; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); overflow: hidden;">
                    <div class="card-header" style="background: linear-gradient(135deg, #556ee6 0%, #4857d2 100%); color: white; border: none; padding: 1rem 1.25rem;">
                        <h5 class="mb-0"><i class="bx bx-link me-2"></i>مطالب مرتبط</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            @foreach($relatedPosts as $relatedPost)
                                <div class="col-md-6 mb-3">
                                    <a href="{{ route('blog.show', $relatedPost->slug) }}" class="text-decoration-none">
                                        <div class="d-flex">
                                            @if($relatedPost->featured_image)
                                                @php
                                                    $relImagePath = $relatedPost->featured_image;
                                                    $relBasePath = pathinfo($relImagePath, PATHINFO_DIRNAME) . '/' . pathinfo($relImagePath, PATHINFO_FILENAME);
                                                    $relExtension = pathinfo($relImagePath, PATHINFO_EXTENSION);
                                                    $relWebpPath = $relBasePath . '.webp';
                                                @endphp
                                                <picture>
                                                    @if(file_exists(public_path('storage/' . $relWebpPath)))
                                                        <source srcset="{{ asset('storage/' . $relWebpPath) }}" type="image/webp">
                                                    @endif
                                                    <source srcset="{{ asset('storage/' . $relImagePath) }}" type="image/{{ $relExtension === 'jpg' ? 'jpeg' : $relExtension }}">
                                                    <img src="{{ asset('storage/' . $relImagePath) }}" 
                                                         alt="{{ $relatedPost->title }}" 
                                                         style="width: 100px; height: 80px; object-fit: cover; border-radius: 5px;" 
                                                         class="me-3"
                                                         loading="lazy"
                                                         decoding="async"
                                                         width="100"
                                                         height="80">
                                                </picture>
                                            @endif
                                            <div>
                                                <h6 style="color: #333; font-size: 0.95rem;">{{ Str::limit($relatedPost->title, 50) }}</h6>
                                                <small class="text-muted">
                                                    {{ \Morilog\Jalali\Jalalian::fromCarbon($relatedPost->published_at)->format('Y/m/d') }}
                                                </small>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif

            <!-- Comments Section -->
            @if($commentsEnabled)
                <div class="card mb-4" style="border: none; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); overflow: hidden;">
                    <div class="card-header" style="background: linear-gradient(135deg, #556ee6 0%, #4857d2 100%); color: white; border: none; padding: 1rem 1.25rem;">
                        <h5 class="mb-0"><i class="bx bx-comment me-2"></i>نظرات ({{ $comments->count() }})</h5>
                    </div>
                    <div class="card-body">
                        @if($comments->count() > 0)
                            @foreach($comments as $comment)
                                @include('user.blog.partials.comment', ['comment' => $comment, 'depth' => 0, 'post' => $post])
                            @endforeach
                        @else
                            <p class="text-muted text-center py-3">هنوز نظری ثبت نشده است. اولین نظر را شما بگذارید!</p>
                        @endif

                        <div class="mt-4 pt-4 border-top">
                            <h6 class="mb-3">ارسال نظر</h6>
                            <form action="{{ route('blog.comments.store', $post->slug) }}" method="POST">
                                @csrf
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">نام</label>
                                        <input type="text" name="author_name" class="form-control" value="{{ auth()->user()->name ?? '' }}" required>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">ایمیل</label>
                                        <input type="email" name="author_email" class="form-control" value="{{ auth()->user()->email ?? '' }}" required>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">وب‌سایت (اختیاری)</label>
                                    <input type="url" name="author_website" class="form-control">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">نظر</label>
                                    <textarea name="content" class="form-control" rows="5" required></textarea>
                                </div>
                                <button type="submit" class="btn btn-primary">
                                    <i class="bx bx-send me-1"></i> ارسال نظر
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        <!-- Sidebar -->
        <div class="col-lg-3">
            <div class="blog-sidebar">
                <!-- Post Info -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="bx bx-info-circle me-2"></i>اطلاعات پست</h5>
                    </div>
                    <div class="card-body">
                        <p class="mb-2"><strong>نویسنده:</strong><br>{{ $post->author->name ?? 'نامشخص' }}</p>
                        <p class="mb-2"><strong>تاریخ انتشار:</strong><br>{{ \Morilog\Jalali\Jalalian::fromCarbon($post->published_at)->format('Y/m/d H:i') }}</p>
                        <p class="mb-0"><strong>بازدید:</strong><br>{{ number_format($post->unique_views_count) }}</p>
                    </div>
                </div>

                <!-- Categories -->
                @php
                    $allCategories = \App\BlogCategory::active()->get();
                @endphp
                @if($allCategories->count() > 0)
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="bx bx-folder me-2"></i>دسته‌بندی‌ها</h5>
                        </div>
                        <div class="card-body">
                            <ul class="list-unstyled mb-0">
                                @foreach($allCategories as $category)
                                    <li class="mb-2">
                                        <a href="{{ route('blog.index', ['category' => $category->slug]) }}" class="text-decoration-none d-flex justify-content-between align-items-center">
                                            <span>{{ $category->name }}</span>
                                            <span class="badge bg-light text-dark">{{ $category->publishedPosts->count() }}</span>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                @endif

                <!-- Recent Posts -->
                @php
                    $recentPosts = \App\BlogPost::published()
                        ->where('id', '!=', $post->id)
                        ->orderBy('published_at', 'desc')
                        ->limit(5)
                        ->get();
                @endphp
                @if($recentPosts->count() > 0)
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="bx bx-time me-2"></i>پست‌های اخیر</h5>
                        </div>
                        <div class="card-body">
                            <ul class="list-unstyled mb-0">
                                @foreach($recentPosts as $recentPost)
                                    <li class="mb-3 pb-3 border-bottom">
                                        <a href="{{ route('blog.show', $recentPost->slug) }}" class="text-decoration-none">
                                            <h6 class="mb-1" style="font-size: 0.9rem; color: #333;">{{ Str::limit($recentPost->title, 50) }}</h6>
                                            <small class="text-muted">
                                                {{ \Morilog\Jalali\Jalalian::fromCarbon($recentPost->published_at)->format('Y/m/d') }}
                                            </small>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Lazy load images (if any are added dynamically)
    if ('IntersectionObserver' in window) {
        const lazyImages = document.querySelectorAll('img[data-src]');
        const imageObserver = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    img.src = img.dataset.src;
                    img.removeAttribute('data-src');
                    img.classList.add('loaded');
                    imageObserver.unobserve(img);
                }
            });
        }, {
            rootMargin: '50px'
        });

        lazyImages.forEach(img => imageObserver.observe(img));
    } else {
        // Fallback for older browsers
        document.querySelectorAll('img[data-src]').forEach(img => {
            img.src = img.dataset.src;
            img.removeAttribute('data-src');
        });
    }
});
</script>
@endsection