@extends('layout.front.master')

@section('title', ($post->title ?? 'Post') . ' | Noticias y Blog | ' . config('site.name'))
@section('description', strip_tags(\Illuminate\Support\Str::limit($post->description ?? 'Lee el artículo completo en el blog de Constructora Gama S.A. Noticias sobre construcción, infraestructura y proyectos en el NOA.', 160)))
@section('keywords', config('site.seo.keywords') . ', blog, noticias, ' . strtolower($post->title ?? '') . ', artículo construcción, Constructora Gama')

{{-- Determinar imagen del post (con fallback a imagen por defecto del demo) --}}
@php
    // Obtener demo activo
    $activeDemo = get_active_demo();
    $demoName = str_replace('demo-', '', $activeDemo);

    // Función para obtener imagen por defecto del demo
    $getDefaultPostImage = function() use ($demoName) {
        // Intentar usar imagen del demo activo
        $demoBlogImage = "cd-project/img/demos/{$demoName}/blog/blog-thumb-1.jpg";
        $demoGenericImage = "cd-project/img/demos/{$demoName}/generic/generic-1.jpg";

        if (file_exists(public_path($demoBlogImage))) {
            return asset($demoBlogImage);
        } elseif (file_exists(public_path($demoGenericImage))) {
            return asset($demoGenericImage);
        } else {
            // Fallback a imagen genérica del sistema
            return asset('cd-project/img/meta-tags/og-image.png');
        }
    };

    // Determinar imagen del post
    $postImage = null;
    if ($post->header) {
        $headerPath = filter_var($post->header, FILTER_VALIDATE_URL) ? $post->header : $post->header;
        // Verificar si la imagen existe (si no es URL externa)
        if (filter_var($post->header, FILTER_VALIDATE_URL)) {
            $postImage = $headerPath;
        } elseif (file_exists(public_path($headerPath))) {
            $postImage = asset($headerPath);
        } else {
            // Si la imagen no existe, usar fallback
            $postImage = $getDefaultPostImage();
        }
    } else {
        // Si no hay header, usar imagen por defecto
        $postImage = $getDefaultPostImage();
    }
@endphp

{{-- Open Graph Meta Tags --}}
@section('og_title', ($post->title ?? 'Post') . ' | Noticias y Blog | ' . config('site.name'))
@section('og_description', strip_tags(\Illuminate\Support\Str::limit($post->description ?? 'Lee el artículo completo en el blog de Constructora Gama S.A. Noticias sobre construcción, infraestructura y proyectos en el NOA.', 200)))
@section('og_image', $postImage)
@section('og_type', 'article')
@section('og_url', url()->current())

{{-- Twitter Card Meta Tags --}}
@section('twitter_title', ($post->title ?? 'Post') . ' | Noticias y Blog | ' . config('site.name'))
@section('twitter_description', strip_tags(\Illuminate\Support\Str::limit($post->description ?? 'Lee el artículo completo en el blog de Constructora Gama S.A. Noticias sobre construcción, infraestructura y proyectos.', 200)))
@section('twitter_image', $postImage)
@section('content')

@php
    $moduleConfig = get_module_page_header_config('blog');
    $pageTitle = $post->title ?? $moduleConfig['title'];
    $pageSubtitle = $post->description ? \Illuminate\Support\Str::limit(strip_tags($post->description), 100) : $moduleConfig['subtitle'];
    $breadcrumbs = get_module_breadcrumbs('blog', $pageTitle);
@endphp

@if(should_use_modern_page_header('blog'))
    {{-- Modern Page Header (x-page-header) --}}
    <x-page-header
        :title="$pageTitle"
        :subtitle="$pageSubtitle"
        :icon="$moduleConfig['icon']"
        :breadcrumbs="$breadcrumbs"
        background="primary" />
@else
    {{-- Classic Page Header para demo-construction --}}
    @if(view()->exists('modules.blog.frontend.partials.dynamic-header'))
        @include('modules.blog.frontend.partials.dynamic-header')
    @endif
    {{-- Si no existe el header clásico, no mostrar nada --}}
@endif

{{-- POST CONTENT --}}
<section class="section border-0 my-0">
    <div class="container container-xl-custom py-0" >
        <div class="row" style="padding-top: 5rem;">
            {{-- CONTENIDO PRINCIPAL --}}
            <div class="col-lg-8 order-lg-1">
                            <article class="post post-large blog-single-post border-0 m-0 p-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
                                <div class="card rounded-3 border-0 bg-transparent box-shadow-10 box-shadow-1">
                                    <div class="p-relative rounded-3 overflow-hidden">
                                        <div class="post-date p-absolute top-20 left-20">
                                            <span class="day py-1 text-4 font-weight-bold text-primary">{{ $post->created_at->format('d') }}</span>
                                            <span class="month bg-primary">{{ $post->created_at->format('M') }}</span>
                                        </div>
                                        <div class="post-image">
                                            <img src="{{ $postImage }}"
                                                class="card-img-top border-radius-0"
                                                alt="{{ $post->title }}" />
                                        </div>
                                    </div>
                                    <div class="card-body bg-light p-4">
                                        <div class="post-meta mb-3">
                                            <span class="badge badge-dark badge-sm rounded-pill text-uppercase me-2">{{ $post->category->name ?? 'General' }}</span>
                                            <span class="text-color-default text-uppercase text-1">
                                                <time pubdate datetime="{{ $post->created_at->format('Y-m-d') }}">{{ $post->created_at->format('d M Y') }}</time>
                                                <span class="opacity-3 d-inline-block px-2">|</span>
                                                {{ $post->comments_count ?? 0 }} Comentarios
                                                <span class="opacity-3 d-inline-block px-2">|</span>
                                                {{ $post->user->name ?? 'Admin' }}
                                            </span>
                                        </div>
                                        <h1 class="card-title alternative-font-4 font-weight-semibold text-6 mb-4 text-color-dark">
                                            {{ $post->title }}
                                        </h1>
                                        <div class="post-content">
                                            @if($post->content)
                                                {!! $post->content !!}
                                            @else
                                                <div class="alert alert-warning">
                                                    <p><strong>Contenido no disponible</strong></p>
                                                    <p>Este post no tiene contenido disponible en este momento.</p>
                                                    <p><strong>Descripción:</strong> {{ $post->description ?? 'Sin descripción' }}</p>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                {{-- SHARE SECTION --}}
                                <div class="mt-4 p-4 bg-light rounded-3">
                                    <p class="text-center mb-3 font-weight-semibold text-4">{{ __('Share post on') }}...</p>
                                    <script src="https://apps.elfsight.com/p/platform.js" defer></script>
                                    <div class="elfsight-app-944fd22e-11a0-4f61-a628-49ed86e428ef"></div>
                                </div>
                            </article>
            </div>

            {{-- SIDEBAR --}}
            <div class="col-lg-4 order-lg-2 pt-4 pt-lg-0">
                <div class="sticky-top blog-sidebar-sticky">
                    <aside class="sidebar">
                        <div class="px-3 mb-4">
                            <h3 class="text-color-dark text-capitalize font-weight-bold text-5 m-0 mb-3">{{ __('blog_sidebar_title') }}</h3>
                            <p class="text-color-grey m-0">{{ __('blog_sidebar_extra') }}</p>
                        </div>
                        <div class="py-1 clearfix">
                            <hr class="my-2">
                        </div>
                        <div class="px-3 mt-4">
                            <h3 class="text-color-quaternary text-capitalize font-weight-bold text-5 m-0 mb-3">Posts Recientes</h3>
                            <div class="pb-2 mb-1">
                                @forelse($recentPosts ?? [] as $recentPost)
                                    <a href="{{ route('blog.post', $recentPost->slug) }}" class="text-color-default text-uppercase text-1 mb-0 d-block text-decoration-none">
                                        {{ $recentPost->created_at->format('d M Y') }}
                                    </a>
                                    <a href="{{ route('blog.post', $recentPost->slug) }}" class="text-color-dark text-hover-primary font-weight-bold text-3 d-block pb-3 line-height-4">{{ $recentPost->title }}</a>
                                @empty
                                    <p class="text-color-default text-2 mb-0">No hay posts recientes</p>
                                @endforelse
                            </div>
                        </div>
                        <div class="py-1 clearfix">
                            <hr class="my-2">
                        </div>
                        <div class="px-3 mt-4">
                            <h3 class="text-color-quaternary text-capitalize font-weight-bold text-5 m-0">Categorías</h3>
                            <ul class="nav nav-list flex-column mt-2 mb-0 p-relative right-9">
                                <li class="nav-item">
                                    <a class="nav-link bg-transparent border-0" href="{{ route('blog.index') }}">
                                        Ver Todas
                                    </a>
                                </li>
                                @foreach ($categories ?? [] as $category)
                                    @if(($category->posts_count ?? 0) > 0)
                                        <li class="nav-item">
                                            <a class="nav-link bg-transparent border-0" href="{{ route('blog.category', $category->slug) }}">
                                                {{ $category->name }} ({{ $category->posts_count }})
                                            </a>
                                        </li>
                                    @endif
                                @endforeach
                            </ul>
                        </div>
                    </aside>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

<style>
/* Sticky Sidebar for Blog */
@media (min-width: 992px) {
    .blog-sidebar-sticky {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 6rem !important;
        z-index: 10;
        align-self: flex-start;
        margin-top: 1rem;
    }
}

@media (max-width: 991.98px) {
    .blog-sidebar-sticky {
        position: relative !important;
        top: auto !important;
        margin-top: 0 !important;
    }
}
</style>