@extends('layout.front.master')

@section('title', ($post->title ?? 'Post') . ' | ' . config('site.modules.blog.page_header.title', 'Blog'))
@section('description', Str::limit($post->description ?? strip_tags($post->content ?? ''), 160))

@section('content')

{{-- Dynamic Header --}}
@include('modules.blog.frontend.partials.dynamic-header')

<section class="section border-0 m-0 py-5" style="background-color: var(--secondary);">
    <div class="container container-xl-custom">
        <div class="row">
            {{-- Post Content --}}
            <div class="col-lg-8 order-lg-1">
                @php
                    $postImage = null;
                    if ($post->header) {
                        if (filter_var($post->header, FILTER_VALIDATE_URL)) {
                            $postImage = $post->header;
                        } elseif (file_exists(public_path($post->header))) {
                            $postImage = asset($post->header);
                        }
                    }
                @endphp

                <article class="blog-post-detail" itemscope itemtype="https://schema.org/BlogPosting">
                    {{-- Post Image --}}
                    @if($postImage)
                        <div class="mb-4 overflow-hidden rounded-0" style="border: 1px solid var(--primary-rgba-10);">
                            <img src="{{ $postImage }}" class="img-fluid w-100" alt="{{ $post->title }}" itemprop="image" style="border-radius: 0;">
                        </div>
                    @endif

                    {{-- Meta --}}
                    <div class="d-flex align-items-center mb-3 flex-wrap gap-2">
                        @if($post->category)
                            <span class="badge rounded-0 font-weight-semibold text-1 px-2 py-1" style="color: var(--primary); background-color: var(--primary-rgba-10); border: 1px solid var(--primary-rgba-20);">{{ $post->category->name }}</span>
                        @endif
                        <span class="text-2" style="color: var(--quaternary);">
                            <i class="far fa-calendar-alt me-1"></i>
                            <time datetime="{{ $post->created_at->format('Y-m-d') }}" itemprop="datePublished">{{ $post->created_at->format('d M Y') }}</time>
                        </span>
                        @if($post->user)
                            <span class="text-2" style="color: var(--quaternary);">
                                <i class="far fa-user me-1"></i>{{ $post->user->name ?? '' }}
                            </span>
                        @endif
                    </div>

                    {{-- Title --}}
                    <h1 class="font-weight-bold text-8 mb-4" style="color: var(--light);" itemprop="headline">{{ $post->title }}</h1>

                    {{-- Content --}}
                    <div class="blog-post-content text-3-5" style="color: var(--quaternary); line-height: 1.8;" itemprop="articleBody">
                        {!! $post->content !!}
                    </div>

                    {{-- Share --}}
                    <div class="mt-5 pt-4" style="border-top: 1px solid var(--primary-rgba-10);">
                        <div class="d-flex align-items-center justify-content-between flex-wrap">
                            <span class="text-3 font-weight-semibold" style="color: var(--light);">{{ __('Compartir') }}:</span>
                            <div class="d-flex gap-2">
                                <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(request()->url()) }}" target="_blank" rel="noopener" class="btn btn-sm rounded-circle d-flex align-items-center justify-content-center" style="width: 36px; height: 36px; background-color: var(--dark); border: 1px solid var(--primary-rgba-20); color: var(--primary);">
                                    <i class="fab fa-facebook-f"></i>
                                </a>
                                <a href="https://twitter.com/intent/tweet?url={{ urlencode(request()->url()) }}&text={{ urlencode($post->title) }}" target="_blank" rel="noopener" class="btn btn-sm rounded-circle d-flex align-items-center justify-content-center" style="width: 36px; height: 36px; background-color: var(--dark); border: 1px solid var(--primary-rgba-20); color: var(--primary);">
                                    <i class="fab fa-twitter"></i>
                                </a>
                                <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ urlencode(request()->url()) }}&title={{ urlencode($post->title) }}" target="_blank" rel="noopener" class="btn btn-sm rounded-circle d-flex align-items-center justify-content-center" style="width: 36px; height: 36px; background-color: var(--dark); border: 1px solid var(--primary-rgba-20); color: var(--primary);">
                                    <i class="fab fa-linkedin-in"></i>
                                </a>
                                @if(config('site.social_media.whatsapp.active'))
                                    <a href="https://wa.me/?text={{ urlencode($post->title . ' ' . request()->url()) }}" target="_blank" rel="noopener" class="btn btn-sm rounded-circle d-flex align-items-center justify-content-center" style="width: 36px; height: 36px; background-color: var(--dark); border: 1px solid var(--primary-rgba-20); color: var(--primary);">
                                        <i class="fab fa-whatsapp"></i>
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                </article>

                {{-- Back to blog --}}
                <div class="mt-4">
                    <a href="{{ route('blog.index') }}" class="btn btn-outline-primary rounded-0 font-weight-bold">
                        <i class="fas fa-arrow-left me-2"></i>{{ __('Volver al blog') }}
                    </a>
                </div>
            </div>

            {{-- Sidebar --}}
            <div class="col-lg-4 order-lg-2 mt-5 mt-lg-0">
                <div class="sticky-top" style="top: 6rem;">
                    <aside class="sidebar">
                        {{-- Categories --}}
                        <div class="p-4 mb-4 rounded-0" style="background-color: var(--dark); border: 1px solid var(--primary-rgba-10);">
                            <h3 class="text-capitalize font-weight-bold text-5 m-0 mb-3" style="color: var(--primary);">{{ __('Categorías') }}</h3>
                            <ul class="nav nav-list flex-column mt-2 mb-0">
                                <li class="nav-item">
                                    <a class="nav-link bg-transparent border-0" style="color: var(--light);" href="{{ route('blog.index') }}">
                                        {{ __('Ver Todas') }}
                                    </a>
                                </li>
                                @if(isset($categories))
                                    @foreach ($categories->sortBy('name') as $cat)
                                        @if(($cat->posts_count ?? 0) > 0)
                                            <li class="nav-item">
                                                <a class="nav-link bg-transparent border-0 {{ isset($post->category) && $post->category->id == $cat->id ? '' : '' }}"
                                                   style="color: {{ isset($post->category) && $post->category->id == $cat->id ? 'var(--primary)' : 'var(--light)' }};"
                                                   href="{{ route('blog.category', $cat->slug) }}">
                                                    {{ $cat->name }} ({{ $cat->posts_count }})
                                                </a>
                                            </li>
                                        @endif
                                    @endforeach
                                @endif
                            </ul>
                        </div>

                        {{-- Recent Posts --}}
                        @if(isset($recentPosts) && $recentPosts->count() > 0)
                            <div class="p-4 rounded-0" style="background-color: var(--dark); border: 1px solid var(--primary-rgba-10);">
                                <h3 class="text-capitalize font-weight-bold text-5 m-0 mb-3" style="color: var(--primary);">{{ __('Recientes') }}</h3>
                                @foreach($recentPosts->take(3) as $recent)
                                    <div class="mb-3 pb-3" style="border-bottom: 1px solid var(--primary-rgba-10);">
                                        <a href="{{ route('blog.post', $recent->slug) }}" class="text-decoration-none">
                                            <h6 class="font-weight-semibold mb-1" style="color: var(--light);">{{ Str::limit($recent->title, 50) }}</h6>
                                        </a>
                                        <span class="text-1" style="color: var(--quaternary);">{{ $recent->created_at->format('d M Y') }}</span>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </aside>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
/* Blog Post Content — respeta CSS variables del demo */
.blog-post-content h1,
.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4,
.blog-post-content h5,
.blog-post-content h6 {
    color: var(--light);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}
.blog-post-content p {
    margin-bottom: 1rem;
}
.blog-post-content a {
    color: var(--primary);
}
.blog-post-content ul, .blog-post-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}
.blog-post-content li {
    margin-bottom: 0.5rem;
}
.blog-post-content strong {
    color: var(--light);
}
.blog-post-content blockquote {
    border-left: 3px solid var(--primary);
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    background-color: var(--dark);
    border-radius: 0;
}
.blog-post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0;
    margin: 1rem 0;
}
</style>

@endsection