@extends('frontend.main_master')

@section('title', ($blog->meta_title ?: $blog->title) . ' | ' . t('site-title'))
@section('meta_description', $blog->meta_description ?: \Illuminate\Support\Str::limit(strip_tags((string) $blog->content), 155))
@section('meta_keywords', $blog->meta_keywords ?: 'blog astrologia, carta natal')

@push('schema')
<x-seo.schema-article
    :headline="$blog->title"
    :description="$blog->meta_description ?: \Illuminate\Support\Str::limit(strip_tags((string) $blog->content), 160)"
    :image="!empty($blog->image) ? asset($blog->image) : asset('frontend/images/og-image.jpg')"
    :date-published="optional($blog->created_at)->toIso8601String()"
    :date-modified="optional($blog->updated_at)->toIso8601String()"
    :author-name="optional($blog->admin)->name ?: 'Astro Sabio'" />
<x-seo.schema-breadcrumb :items="[['name' => 'Inicio', 'url' => route('index')], ['name' => 'Blog', 'url' => route('blog.index')], ['name' => $blog->title, 'url' => url()->current()]]" />
@endpush

@push('styles')
<link rel="stylesheet" href="{{ asset('frontend/css/page-home.css') }}">
<link rel="stylesheet" href="{{ asset('frontend/css/blog-page.css') }}">
@endpush

@section('content')
<div class="blog-detail-page py-5">
    <div class="container">
        <nav class="mb-4" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">Inicio</a></li>
                <li class="breadcrumb-item"><a href="{{ route('blog.index') }}">Blog</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ $blog->title }}</li>
            </ol>
        </nav>

        <article class="blog-article">
            <header class="blog-article-header mb-4">
                <div class="blog-meta d-flex flex-wrap align-items-center gap-2 mb-3">
                    <span class="blog-date">{{ optional($blog->created_at)->translatedFormat('d M Y') }}</span>
                    @if ($blog->category)
                        <span class="blog-category">{{ $blog->category->name }}</span>
                    @endif
                </div>
                <h1 class="blog-article-title">{{ $blog->title }}</h1>
            </header>

            @if (!empty($blog->image))
                <div class="blog-article-cover mb-4">
                    <img src="{{ asset($blog->image) }}" alt="{{ $blog->title }}" class="blog-article-cover-image">
                </div>
            @endif

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

        @if ($relatedBlogs->count() > 0)
            <section class="related-blogs mt-5 pt-4">
                <h2 class="h4 mb-4">Otros Artículos Relacionados</h2>
                <div class="row g-4">
                    @foreach ($relatedBlogs as $related)
                        <div class="col-12 col-md-6 col-lg-4">
                            <article class="blog-card h-100">
                                <a href="{{ route('blog.show', $related) }}" class="blog-card-image-link" aria-label="{{ $related->title }}">
                                    @if (!empty($related->image))
                                        <img src="{{ asset($related->image) }}" alt="{{ $related->title }}" class="blog-card-image">
                                    @else
                                        <div class="blog-card-image blog-card-image-placeholder">Astro Sabio</div>
                                    @endif
                                </a>
                                <div class="blog-card-body">
                                    <h3 class="blog-card-title h6">
                                        <a href="{{ route('blog.show', $related) }}">{{ $related->title }}</a>
                                    </h3>
                                    <a href="{{ route('blog.show', $related) }}" class="blog-read-more">Leer Más</a>
                                </div>
                            </article>
                        </div>
                    @endforeach
                </div>
            </section>
        @endif
    </div>
</div>
@endsection