@extends('layout.front.master')

@if(isset($category))
    @section('title', 'Blog - ' . $category->name . ' | ' . config('site.name'))
    @section('description', strip_tags(\Illuminate\Support\Str::limit($category->description ?? 'Explora nuestros artículos sobre ' . $category->name, 160)))
    @section('keywords', config('site.seo.keywords') . ', blog, noticias, ' . $category->name)

    {{-- Open Graph Meta Tags --}}
    @section('og_title', 'Blog - ' . $category->name . ' | ' . config('site.name'))
    @section('og_description', strip_tags(\Illuminate\Support\Str::limit($category->description ?? 'Explora nuestros artículos sobre ' . $category->name, 200)))
    @section('og_image', asset('cd-project/img/meta-tags/og-image.png'))
    @section('og_type', 'website')
    @section('og_url', url()->current())

    {{-- Twitter Card Meta Tags --}}
    @section('twitter_title', 'Blog - ' . $category->name . ' | ' . config('site.name'))
    @section('twitter_description', strip_tags(\Illuminate\Support\Str::limit($category->description ?? 'Explora nuestros artículos sobre ' . $category->name, 200)))
    @section('twitter_image', asset('cd-project/img/meta-tags/twitter-image.png'))
@else
    @section('title', 'Noticias y Blog | Constructora Gama S.A | Actualizaciones y Novedades')
    @section('description', 'Noticias, actualizaciones y artículos sobre construcción, infraestructura y proyectos de Constructora Gama S.A. Avances de obras, licitaciones, logros, prensa y todas las novedades. Más de 33 años construyendo en el NOA.')
    @section('keywords', config('site.seo.keywords') . ', blog, noticias, actualizaciones, construcción, avances obras, licitaciones, prensa, novedades')

    {{-- Open Graph Meta Tags --}}
    @section('og_title', 'Noticias y Blog | Constructora Gama S.A | Actualizaciones y Novedades')
    @section('og_description', 'Noticias, actualizaciones y artículos sobre construcción, infraestructura y proyectos de Constructora Gama S.A. Avances de obras, licitaciones, logros y prensa.')
    @section('og_image', asset('cd-project/img/meta-tags/og-image.png'))
    @section('og_type', 'website')
    @section('og_url', url()->current())

    {{-- Twitter Card Meta Tags --}}
    @section('twitter_title', 'Noticias y Blog | Constructora Gama S.A | Actualizaciones y Novedades')
    @section('twitter_description', 'Noticias, actualizaciones y artículos sobre construcción, infraestructura y proyectos. Avances de obras, licitaciones, logros y prensa.')
    @section('twitter_image', asset('cd-project/img/meta-tags/twitter-image.png'))
@endif
@section('content')

@php
    $moduleConfig = get_module_page_header_config('blog');
    $pageTitle = isset($category) ? $category->name : $moduleConfig['title'];
    $pageSubtitle = isset($category) ? ($category->description ?? $moduleConfig['subtitle']) : $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

<section class="section section-height-auto bg-color-grey-scale-1 m-0 border-0 py-5">
    <div class="container container-xl-custom" style="padding-top: 5rem;">
        <div class="row">
            <div class="col-lg-8 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="300">
                <div class="blog-posts">
                    <div class="row">
                        @if ($posts->isEmpty())
                            {{-- Empty State - Improved Design --}}
                            <div class="col-12">
                                <div class="card border-0 shadow-modern rounded-lg appear-animation"
                                     data-appear-animation="fadeInUpShorterPlus"
                                     data-appear-animation-delay="300">
                                    <div class="card-body text-center py-5 px-4">
                                        {{-- Icon --}}
                                        <div class="overflow-hidden mb-3">
                                            <div class="appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="400">
                                                <i class="fas fa-newspaper text-primary" style="font-size: 4.5rem; opacity: 0.8;"></i>
                                            </div>
                                        </div>

                                        {{-- Title --}}
                                        <div class="overflow-hidden mb-3">
                                            <h3 class="font-weight-semibold text-color-dark mb-2 appear-animation"
                                                data-appear-animation="maskUp"
                                                data-appear-animation-delay="500"
                                                style="font-size: 1.75rem;">
                                                {{ __('blog_under_construction') }}
                                            </h3>
                                        </div>

                                        {{-- Description --}}
                                        <div class="overflow-hidden mb-4">
                                            <p class="text-color-grey mb-0 appear-animation"
                                               data-appear-animation="maskUp"
                                               data-appear-animation-delay="600"
                                               style="font-size: 1.05rem; line-height: 1.6; max-width: 600px; margin: 0 auto;">
                                                {!! __('blog_no_posts_message') !!}
                                            </p>
                                        </div>

                                        {{-- Action Buttons --}}
                                        <div class="overflow-hidden">
                                            <div class="d-flex flex-column flex-sm-row justify-content-center gap-3 appear-animation"
                                                 data-appear-animation="maskUp"
                                                 data-appear-animation-delay="700">
                                                <a href="{{ route('front.welcome') }}"
                                                   class="btn btn-primary btn-modern">
                                                    <i class="fas fa-home me-2"></i>Volver al Inicio
                                                </a>
                                                <a href="{{ route('front.contact') }}"
                                                   class="btn btn-outline-primary btn-modern">
                                                    <i class="fas fa-envelope me-2"></i>Contactar
                                                </a>
                                            </div>
                                        </div>

                                        {{-- Additional Info --}}
                                        <div class="overflow-hidden mt-4">
                                            <div class="appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="800">
                                                <p class="text-color-default text-2 mb-0" style="font-size: 0.9rem;">
                                                    <i class="fas fa-info-circle me-1"></i>
                                                    Estamos trabajando en contenido nuevo para ti
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @else
                            @foreach ($posts as $index => $post)
                                <div class="col-md-6 col-lg-6 mb-4 appear-animation"
                                     data-appear-animation="fadeInUpShorterPlus"
                                     data-appear-animation-delay="{{ 200 + ($index * 100) }}"
                                     data-plugin-animate-viewport="true">
                                    <article class="card border-0 shadow-modern blog-card h-100" itemscope itemtype="https://schema.org/BlogPosting">
                                        @php
                                            // Obtener demo activo para imagen por defecto
                                            $activeDemo = get_active_demo();
                                            $demoName = str_replace('demo-', '', $activeDemo);

                                            // Función para obtener imagen por defecto del demo
                                            $getDefaultPostImage = function() use ($demoName, $index) {
                                                // Rotar entre las imágenes disponibles del demo
                                                $imageNumber = ($index % 3) + 1;
                                                $demoBlogImage = "cd-project/img/demos/{$demoName}/blog/blog-thumb-{$imageNumber}.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
                                        <div class="card-img-top position-relative overflow-hidden blog-image-wrapper" style="height: 200px;">
                                            <a href="{{ route('blog.post', $post->slug) }}" class="text-decoration-none">
                                                <img src="{{ $postImage }}"
                                                     alt="{{ $post->title }}"
                                                     class="img-fluid w-100 h-100 blog-image"
                                                     style="object-fit: cover; transition: transform 0.4s ease;"
                                                     itemprop="image">
                                            </a>
                                        </div>
                                        <div class="card-body p-4 d-flex flex-column" style="position: relative; z-index: 2;">
                                            {{-- Category Badge and Date --}}
                                            <div class="mb-3">
                                                <p class="text-uppercase text-color-default text-1 mb-1 d-inline-block">
                                                    <time pubdate datetime="{{ $post->created_at->format('Y-m-d') }}" itemprop="datePublished">{{ $post->created_at->format('d M Y') }}</time>
                                                </p>
                                                @if($post->category)
                                                    <span class="opacity-3 d-inline-block px-2">|</span>
                                                    <a href="{{ route('blog.category', $post->category->slug) }}"
                                                       class="badge bg-color-grey-scale-2 text-color-dark me-1 mb-1 px-2 py-1 text-decoration-none blog-badge">
                                                        {{ $post->category->name }}
                                                    </a>
                                                @endif
                                            </div>

                                            <h5 class="card-title font-weight-bold text-color-dark mb-3 flex-grow-1" style="font-size: 1.15rem; line-height: 1.4; min-height: 3rem;" itemprop="headline">
                                                <a href="{{ route('blog.post', $post->slug) }}"
                                                   class="text-decoration-none text-color-dark hover-text-primary">
                                                    {{ $post->title }}
                                                </a>
                                            </h5>

                                            @if($post->description)
                                                <p class="text-color-grey mb-3 text-3" style="line-height: 1.6;" itemprop="description">
                                                    {{ Str::limit($post->description, 120, '...') }}
                                                </p>
                                            @endif

                                            <div class="mt-auto pt-3 border-top border-color-grey-scale-2">
                                                <a href="{{ route('blog.post', $post->slug) }}"
                                                   class="custom-view-more d-inline-flex align-items-center font-weight-medium text-color-dark text-decoration-none"
                                                   itemprop="url">
                                                    Ver Detalles
                                                    <i class="fas fa-arrow-right ms-2"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </article>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>

            <div class="col-lg-4 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="600">
                <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 border-color-grey-scale-2">
                        </div>

                        {{-- <div class="px-3 mt-4">
                            <h3 class="text-color-quaternary text-capitalize font-weight-bold text-5 m-0 mb-3">Comentarios Recientes</h3>
                            <div class="pb-2 mb-1">
                                @forelse($recentComments ?? [] as $comment)
                                    <a href="{{ route('blogPost', $comment->post->slug) }}" class="text-color-default text-2 mb-0 d-block text-decoration-none line-height-4">
                                        {{ $comment->user->name ?? 'Admin' }} en
                                        <strong class="text-color-dark text-hover-primary text-4">{{ Str::limit($comment->post->title, 20) }}</strong>
                                        <span class="text-uppercase text-1 d-block pt-1 pb-3">{{ $comment->created_at->format('d M Y') }}</span>
                                    </a>
                                @empty
                                    <p class="text-color-default text-2 mb-0">No hay comentarios 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-dark text-capitalize font-weight-bold text-5 m-0 mb-3">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 text-color-dark {{ !isset($category) ? 'active text-color-primary' : '' }}"
                                       href="{{ route('blog.index') }}">
                                        Ver Todas ({{ $posts->count() }})
                                    </a>
                                </li>
                                @foreach ($categories->sortBy('name') as $cat)
                                    @if(($cat->posts_count ?? 0) > 0)
                                        <li class="nav-item">
                                            <a class="nav-link bg-transparent border-0 text-color-dark {{ isset($category) && $category->id == $cat->id ? 'active text-color-primary' : '' }}"
                                               href="{{ route('blog.category', $cat->slug) }}">
                                                {{ $cat->name }} ({{ $cat->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;
    }
}

/* Blog Cards - Aligned with Services Style */
.blog-card {
    position: relative;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.08);
}

/* Animated top border on hover - Same as Services */
.blog-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-rgba-40), transparent);
    transition: left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
    pointer-events: none;
}

.blog-card:hover::before {
    left: 100%;
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 50px rgba(0,0,0,0.15) !important;
    border-color: var(--primary-rgba-20);
}

.blog-image-wrapper {
    overflow: hidden;
}

.blog-image {
    transition: transform 0.4s ease;
}

.blog-card:hover .blog-image {
    transform: scale(1.08);
}

.blog-badge {
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
    border: 1px solid #e9ecef;
}

.blog-badge:hover {
    background-color: var(--primary-rgba-10) !important;
    border-color: var(--primary-rgba-30);
    transform: translateY(-1px);
}

.hover-text-primary:hover {
    color: var(--primary) !important;
    transition: color 0.3s ease;
}

.custom-view-more {
    transition: all 0.3s ease;
}

.custom-view-more:hover {
    gap: 0.5rem;
    color: var(--primary) !important;
}

.custom-view-more i {
    transition: transform 0.3s ease;
}

.custom-view-more:hover i {
    transform: translateX(3px);
    color: var(--primary);
}

/* Empty State Styles */
.blog-posts .card.shadow-modern {
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.blog-posts .card.shadow-modern:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
}

.blog-posts .fa-newspaper {
    animation: pulse 2s ease-in-out infinite;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

.blog-posts .btn-modern {
    transition: all 0.3s ease;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
}

.blog-posts .btn-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.blog-posts .btn-outline-primary.btn-modern:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
</style>