@extends('layouts.blog')

@section('meta_title', $post->effective_meta_title)
@section('meta_description', $post->effective_meta_description)
@section('meta_keywords', $post->meta_keywords)
@section('canonical_url', $post->effective_canonical_url)
@section('og_type', 'article')
@if($post->featured_image_url)
@section('featured_image', $post->featured_image_url)
@endif

@push('schema')
<script type="application/ld+json">
{!! $post->schema_json !!}
</script>
@endpush

@section('content')
{{-- Breadcrumb --}}
<nav aria-label="breadcrumb" class="blog-breadcrumb">
    <ol class="breadcrumb mb-0">
        @foreach($post->breadcrumb_path as $crumb)
            @if($crumb['url'])
                <li class="breadcrumb-item"><a href="{{ $crumb['url'] }}">{{ $crumb['label'] }}</a></li>
            @else
                <li class="breadcrumb-item active">{{ Str::limit($crumb['label'], 50) }}</li>
            @endif
        @endforeach
    </ol>
</nav>

<div class="row">
    {{-- Main Content --}}
    <div class="col-lg-8">
        <div class="post-content">
            <h1>{{ $post->title }}</h1>
            
            <div class="post-meta d-flex flex-wrap gap-3">
                <span><i class="ti ti-user me-1"></i>{{ $post->author?->name ?? 'Admin' }}</span>
                <span><i class="ti ti-calendar me-1"></i>{{ $post->published_at->format('d M Y') }}</span>
                <span><i class="ti ti-clock me-1"></i>{{ $post->reading_time }} min read</span>
                <span><i class="ti ti-eye me-1"></i>{{ number_format($post->views_count) }} views</span>
                @if($post->category)
                    <a href="{{ $post->category->url }}" class="text-decoration-none">
                        <span class="badge bg-primary">{{ $post->category->name }}</span>
                    </a>
                @endif
            </div>

            @if($post->featured_image_url)
                <img src="{{ $post->featured_image_url }}" alt="{{ $post->title }}" class="featured-img">
            @endif

            <article>
                {!! $post->full_content !!}
            </article>

            {{-- Tags --}}
            @if($post->tags->count() > 0)
                <div class="mt-4 pt-4 border-top">
                    <strong><i class="ti ti-tags me-2"></i>Tags:</strong>
                    @foreach($post->tags as $tag)
                        <a href="{{ $tag->url }}" class="badge bg-secondary text-decoration-none me-1">{{ $tag->name }}</a>
                    @endforeach
                </div>
            @endif

            {{-- Share Buttons --}}
            <div class="mt-4 pt-4 border-top">
                <strong><i class="ti ti-share me-2"></i>Share:</strong>
                <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode($post->url) }}" target="_blank" class="btn btn-sm btn-primary me-1">
                    <i class="ti ti-brand-facebook"></i>
                </a>
                <a href="https://twitter.com/intent/tweet?url={{ urlencode($post->url) }}&text={{ urlencode($post->title) }}" target="_blank" class="btn btn-sm btn-info me-1">
                    <i class="ti ti-brand-twitter"></i>
                </a>
                <a href="https://wa.me/?text={{ urlencode($post->title . ' ' . $post->url) }}" target="_blank" class="btn btn-sm btn-success me-1">
                    <i class="ti ti-brand-whatsapp"></i>
                </a>
                <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ urlencode($post->url) }}&title={{ urlencode($post->title) }}" target="_blank" class="btn btn-sm btn-secondary">
                    <i class="ti ti-brand-linkedin"></i>
                </a>
            </div>
        </div>

        {{-- Related Posts --}}
        @if(isset($relatedPosts) && $relatedPosts->count() > 0)
            <div class="mt-4">
                <h4 class="mb-3">Related Posts</h4>
                <div class="row">
                    @foreach($relatedPosts as $related)
                        <div class="col-md-6 mb-3">
                            <div class="post-card h-100">
                                @if($related->featured_image_url)
                                    <img src="{{ $related->featured_image_url }}" alt="{{ $related->title }}" loading="lazy">
                                @endif
                                <div class="card-body">
                                    <h3><a href="{{ $related->url }}">{{ $related->title }}</a></h3>
                                    <div class="meta">
                                        <i class="ti ti-calendar me-1"></i>{{ $related->published_at->format('d M Y') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
    </div>

    {{-- Sidebar --}}
    <div class="col-lg-4">
        {{-- Popular Posts --}}
        <div class="sidebar-widget">
            <h4><i class="ti ti-flame me-2"></i>Popular Posts</h4>
            @foreach($popularPosts as $popular)
                <div class="popular-post">
                    @if($popular->featured_image_url)
                        <img src="{{ $popular->featured_image_url }}" alt="{{ $popular->title }}">
                    @else
                        <img src="https://via.placeholder.com/60x60?text=No" alt="{{ $popular->title }}">
                    @endif
                    <div>
                        <h5><a href="{{ $popular->url }}">{{ Str::limit($popular->title, 50) }}</a></h5>
                        <small class="text-muted">{{ number_format($popular->views_count) }} views</small>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Tags --}}
        <div class="sidebar-widget">
            <h4><i class="ti ti-tags me-2"></i>Popular Tags</h4>
            <div class="tag-cloud">
                @foreach($popularTags as $tag)
                    <a href="{{ $tag->url }}">{{ $tag->name }}</a>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection