@extends('layout.front.master')

@if(isset($category))
    @section('title', 'Blog - ' . $category->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)
    @section('og_description', strip_tags(\Illuminate\Support\Str::limit($category->description ?? 'Explora nuestros artículos sobre ' . $category->name, 200)))
    @section('og_image', brand_og_image())
    @section('og_type', 'website')
    @section('og_url', url()->current())

    {{-- Twitter Card Meta Tags --}}
    @section('twitter_title', 'Blog - ' . $category->name)
    @section('twitter_description', strip_tags(\Illuminate\Support\Str::limit($category->description ?? 'Explora nuestros artículos sobre ' . $category->name, 200)))
    @section('twitter_image', brand_twitter_image())
@else
    @php
        $blogTitle = config('site.modules.blog.page_header.title', config('cd-system.modules.blog.name', __('Publicaciones')));
        $blogDescription = config('site.blog.sidebar_description', config('site.modules.blog.page_header.subtitle', __('Mantente informado con nuestros artículos y las últimas novedades.')));
    @endphp
    @section('title', $blogTitle)
    @section('description', $blogDescription)
    @section('keywords', config('site.seo.keywords') . ', blog, noticias, actualizaciones, artículos')

    {{-- Open Graph Meta Tags --}}
    @section('og_title', $blogTitle)
    @section('og_description', $blogDescription)
    @section('og_image', brand_og_image())
    @section('og_type', 'website')
    @section('og_url', url()->current())

    {{-- Twitter Card Meta Tags --}}
    @section('twitter_title', $blogTitle)
    @section('twitter_description', $blogDescription)
    @section('twitter_image', brand_twitter_image())
@endif
@section('content')

@php
    $activeDemo = get_active_demo();
@endphp

{{-- Dynamic Header — usa el partial del demo activo (registrado en dynamic-header.blade.php) --}}
@include('modules.blog.frontend.partials.dynamic-header')

@php
    $activeDemo = get_active_demo();
    $isProductLanding = ($activeDemo === 'demo-product-landing');
@endphp

@if($isProductLanding)
    {{-- Product Landing Style --}}
    <section class="section bg-light border-0 m-0 py-5">
        <div class="container">
            <!-- Encabezado de la sección -->
            <div class="row mb-5">
                <div class="col-lg-6">
                    <div class="overflow-hidden mb-1">
                        <span class="d-block text-color-dark custom-letter-spacing-1 text-3-5 opacity-5 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="200">{{ __('ARTÍCULOS') }}</span>
                    </div>
                    <h2 class="text-color-dark font-weight-bold ls-0 text-9 mb-3 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="400">{{ __('Últimos') }} <span class="text-color-primary">{{ __('Posts') }}</span></h2>
                </div>
                <div class="col-lg-6">
                    <p class="text-4 text-color-dark opacity-7 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="600">
                        {{ config('site.blog.sidebar_description', __('Mantente informado con nuestros artículos y las últimas novedades.')) }}
                    </p>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-8">
                    @if ($posts->isEmpty())
                        <div class="text-center py-5">
                            <div class="overflow-hidden mb-2">
                                <h2 class="font-weight-normal text-10 ls-1 mb-0 appear-animation" data-appear-animation="maskUp" style="animation-delay: 100ms;">
                                    <strong class="font-weight-extra-bold text-color-dark">{{ __('blog_under_construction') }}</strong>
                                </h2>
                            </div>
                            <div class="overflow-hidden mb-1">
                                <p class="lead mb-0 appear-animation text-color-dark" data-appear-animation="maskUp" data-appear-animation-delay="200" style="animation-delay: 200ms;">
                                    {!! __('blog_no_posts_message') !!}
                                </p>
                            </div>
                        </div>
                    @else
                        <div class="row">
                            @foreach ($posts as $post)
                                <div class="col-lg-6 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ 200 + ($loop->index * 100) }}">
                                    <article class="post">
                                        <div class="card rounded-0 border-0 bg-transparent box-shadow-10 box-shadow-1 box-shadow-1-hover anim-hover-translate-top-10px transition-3ms h-100">
                                            <div class="p-relative rounded-0 overflow-hidden">
                                                @php
                                                    $postImage = null;
                                                    if ($post->header) {
                                                        $headerPath = filter_var($post->header, FILTER_VALIDATE_URL) ? $post->header : $post->header;
                                                        if (filter_var($post->header, FILTER_VALIDATE_URL)) {
                                                            $postImage = $headerPath;
                                                        } elseif (file_exists(public_path($headerPath))) {
                                                            $postImage = asset($headerPath);
                                                        } else {
                                                            $postImage = asset('cd-project/img/blog/' . (($loop->index % 2) + 1) . '.jpg');
                                                        }
                                                    } else {
                                                        $postImage = asset('cd-project/img/blog/' . (($loop->index % 2) + 1) . '.jpg');
                                                    }
                                                @endphp
                                                @if($postImage)
                                                    <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>
                                                    <a href="{{ route('blog.post', $post->slug) }}" class="text-decoration-none">
                                                        <img class="card-img-top" src="{{ $postImage }}" loading="lazy" alt="{{ $post->title }}">
                                                    </a>
                                                @endif
                                                <div class="card-body bg-light p-4">
                                                    @if($post->category)
                                                        <span class="badge badge-dark badge-sm rounded-0 text-uppercase me-1 mb-2">{{ $post->category->name }}</span>
                                                    @endif
                                                    <h4 class="my-2">
                                                        <a href="{{ route('blog.post', $post->slug) }}" class="text-decoration-none text-dark text-color-hover-primary font-weight-bold text-4">
                                                            {{ $post->title }}
                                                        </a>
                                                    </h4>
                                                    @php
                                                        $desc = $post->description ?? '';
                                                        $excerptText = trim($desc) !== '' ? Str::limit($desc, 120)
                                                            : (trim($post->excerpt ?? '') !== '' ? Str::limit($post->excerpt, 120)
                                                            : Str::limit(strip_tags($post->getAttribute('content') ?? ''), 120));
                                                        $excerptText = trim($excerptText) !== '' ? $excerptText : __('Leer artículo completo');
                                                    @endphp
                                                    <p class="card-text text-color-dark mb-1">{{ $excerptText }}</p>
                                                    <a href="{{ route('blog.post', $post->slug) }}" class="read-more text-color-primary font-weight-semibold text-2">
                                                        {{ __('Leer Más') }} <i class="fas fa-angle-right position-relative top-1 ms-1"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </article>
                                </div>
                            @endforeach
                        </div>
                        @include('modules.blog.frontend.partials.pagination', ['paginator' => $posts])
                    @endif
                </div>

                <div class="col-lg-4 pt-4 pt-lg-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="800">
                    <aside class="sidebar">
                        <!-- Sobre el Blog -->
                        <div class="card border-0 bg-dark box-shadow-10 box-shadow-1 box-shadow-1-hover anim-hover-translate-top-10px transition-3ms mb-4">
                            <div class="card-body p-4">
                                <h3 class="text-color-primary text-capitalize font-weight-bold text-5 m-0 mb-3">{{ __('Sobre el Blog') }}</h3>
                                <p class="text-color-light opacity-7 m-0">{{ config('site.blog.sidebar_description', __('Mantente informado con nuestros artículos y las últimas novedades.')) }}</p>
                            </div>
                        </div>

                        <!-- Categorías -->
                        <div class="card border-0 bg-dark box-shadow-10 box-shadow-1 box-shadow-1-hover anim-hover-translate-top-10px transition-3ms">
                            <div class="card-body p-4">
                                <h3 class="text-color-primary 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">
                                    <li class="nav-item mb-2">
                                        <a class="nav-link bg-transparent border-0 text-color-light text-color-hover-primary {{ !isset($category) ? 'active' : '' }}" href="{{ route('blog.index') }}">
                                            <i class="fas fa-list me-2"></i>{{ __('Ver Todas') }} ({{ $posts->total() }})
                                        </a>
                                    </li>
                                    @foreach ($categories->sortBy('name') as $cat)
                                        @if(($cat->posts_count ?? 0) > 0)
                                            <li class="nav-item mb-2">
                                                <a class="nav-link bg-transparent border-0 text-color-light text-color-hover-primary {{ isset($category) && $category->id == $cat->id ? 'active' : '' }}"
                                                   href="{{ route('blog.category', $cat->slug) }}">
                                                    <i class="fas fa-folder me-2"></i>{{ $cat->name }} ({{ $cat->posts_count }})
                                                </a>
                                            </li>
                                        @endif
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </aside>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Call to Action -->
<section class="call-to-action with-borders button-centered bg-primary">
    <div class="container">
        <div class="col-12">
            <div class="call-to-action-content">
                <h3 class="text-color-light">{{ __('¿Quieres') }} <strong class="font-weight-extra-bold">{{ __('escribir') }}</strong> {{ __('para nuestro blog?') }}</h3>
                <p class="mb-0 text-color-light opacity-7">{{ __('Comparte tu experiencia y conocimiento con nuestra comunidad') }}</p>
            </div>
        </div>
        <div class="col-12">
            <div class="call-to-action-btn">
                <a href="{{ route('front.contact') }}" class="btn btn-modern text-2 btn-light">{{ __('¡Contactanos!') }}</a>
            </div>
        </div>
    </div>
</section>
@else
    {{-- Default Style (All Demos with Sidebar) --}}
    <section id="blog-content" class="section section-height-auto m-0 border-0 py-5" style="background-color: var(--secondary);">
        <div class="container container-xl-custom">
            <div class="row">
                <div class="col-lg-8 order-lg-1 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="300">
                    <div class="blog-posts">
                        <div class="row">
                        @if ($posts->isEmpty())
                            <div class="col-12 text-center py-5">
                                <div class="mb-3">
                                    <i class="fas fa-newspaper text-primary" style="font-size: 3rem; opacity: 0.5;"></i>
                                </div>
                                <h3 class="font-weight-bold mb-2" style="color: var(--light);">{{ __('Próximamente') }}</h3>
                                <p style="color: var(--quaternary);">{{ __('Estamos preparando contenido. Volvé pronto.') }}</p>
                                <a href="{{ url('/') }}" class="btn btn-primary rounded-0 font-weight-bold">{{ __('Volver al inicio') }}</a>
                            </div>
                        @else
                            @foreach ($posts as $index => $post)
                                @php
                                    $postImage = null;
                                    if ($post->header) {
                                        $postImage = filter_var($post->header, FILTER_VALIDATE_URL) ? $post->header : asset($post->header);
                                    }
                                @endphp
                                <div class="col-12 col-md-6 col-lg-6 appear-animation"
                                     data-appear-animation="fadeInUpShorter"
                                     data-appear-animation-delay="{{ 200 + ($index * 100) }}">
                                    <article class="blog-card rounded-0 h-100 anim-hover-translate-top-10px transition-3ms" style="background-color: var(--dark); border: 1px solid var(--primary-rgba-10); transition: box-shadow 0.3s ease, transform 0.3s ease;" itemscope itemtype="https://schema.org/BlogPosting">
                                        @if($postImage)
                                            <div class="card-img-top" style="background-image: url('{{ $postImage }}'); background-size: cover; background-position: center; height: 200px; border-radius: 0;"></div>
                                        @else
                                            <div class="card-img-top d-flex align-items-center justify-content-center" style="background: linear-gradient(135deg, var(--dark) 0%, var(--secondary) 100%); height: 200px; border-radius: 0;">
                                                <i class="fas fa-newspaper text-6" style="color: var(--primary); opacity: 0.3;"></i>
                                            </div>
                                        @endif
                                        <div class="card-body p-4 d-flex flex-column">
                                            <div class="d-flex align-items-center mb-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 ms-auto" style="color: var(--quaternary);">{{ $post->created_at->format('d M Y') }}</span>
                                            </div>
                                            <h4 class="card-title mb-2 font-weight-bold flex-grow-1" style="color: var(--light); font-size: 1.1rem; line-height: 1.4;">
                                                <a href="{{ route('blog.post', $post->slug) }}" class="text-decoration-none" style="color: var(--light);">
                                                    {{ $post->title }}
                                                </a>
                                            </h4>
                                            @if($post->description)
                                                <p class="text-3 mb-3" style="color: var(--quaternary); line-height: 1.6;">{{ Str::limit($post->description, 100, '...') }}</p>
                                            @endif
                                            <div class="mt-auto">
                                                <a href="{{ route('blog.post', $post->slug) }}" class="btn btn-outline-primary btn-sm rounded-0">{{ __('Leer más') }}</a>
                                            </div>
                                        </div>
                                    </article>
                                </div>
                            @endforeach
                        @endif
                        @include('modules.blog.frontend.partials.pagination', ['paginator' => $posts])
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 order-lg-2 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="600">
                    <div class="sticky-top blog-sidebar-sticky">
                        <aside class="sidebar">
                            <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);">{{ __('Sobre el Blog') }}</h3>
                                <p class="m-0" style="color: var(--quaternary);">{{ config('site.blog.sidebar_description', __('Mantente informado con nuestros artículos y las últimas novedades.')) }}</p>
                            </div>

                            <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);">{{ __('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 {{ !isset($category) ? 'active' : '' }}"
                                           style="color: {{ !isset($category) ? 'var(--primary)' : 'var(--light)' }};"
                                           href="{{ route('blog.index') }}">
                                            {{ __('Ver Todas') }} ({{ $posts->total() }})
                                        </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 {{ isset($category) && $category->id == $cat->id ? 'active' : '' }}"
                                                   style="color: {{ isset($category) && $category->id == $cat->id ? 'var(--primary)' : 'var(--light)' }};"
                                                   href="{{ route('blog.category', $cat->slug) }}">
                                                    {{ $cat->name }} ({{ $cat->posts_count }})
                                                </a>
                                            </li>
                                        @endif
                                    @endforeach
                                </ul>
                            </div>
                        </aside>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endif

@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 Grid Fixes */
.blog-posts .row {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.blog-posts .row > [class*="col-"] {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
}

/* 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);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 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;
}

.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;
}

/* Ensure cards maintain equal height */
.blog-card .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-card .card-body > *:last-child {
    margin-top: auto;
}

/* Grid alignment fixes */
@media (min-width: 768px) {
    .blog-posts .row > [class*="col-md-6"] {
        width: 50%;
        max-width: 50%;
    }
}

@media (min-width: 992px) {
    .blog-posts .row > [class*="col-lg-6"] {
        width: 50%;
        max-width: 50%;
    }
    
    /* Ensure sidebar stays on the right */
    .row > .col-lg-8.order-lg-1 {
        order: 1;
    }
    
    .row > .col-lg-4.order-lg-2 {
        order: 2;
    }
}

/* Ensure scroll-to-top button is visible on blog page */
.scroll-to-top {
    position: fixed !important;
    bottom: 100px !important;
    right: 30px !important;
    z-index: 99999 !important;
    display: flex !important;
}

.scroll-to-top.visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}
</style>

@section('scripts')
<script>
    $(document).ready(function() {
        // Ensure scroll-to-top button works on blog page
        const $scrollButton = $('.scroll-to-top');
        if ($scrollButton.length > 0) {
            // Manually handle scroll event for blog page
            let isScrolling = false;
            $(window).on('scroll', function() {
                if (!isScrolling) {
                    isScrolling = true;
                    setTimeout(function() {
                        if ($(window).scrollTop() > 150) {
                            $scrollButton.addClass('visible');
                        } else {
                            $scrollButton.removeClass('visible');
                        }
                        isScrolling = false;
                    }, 10);
                }
            });
            
            // Handle click
            $scrollButton.on('click', function(e) {
                e.preventDefault();
                $('html, body').animate({
                    scrollTop: 0
                }, 1000, 'easeOutBack');
                return false;
            });
            
            // Check initial scroll position
            if ($(window).scrollTop() > 150) {
                $scrollButton.addClass('visible');
            }
        }
    });
</script>
@endsection