@extends('layouts.app_web')  <!-- Hereda el layout base -->
@section('content')
<div id="wrapper" class="wrap overflow-hidden-x">
    @include('layouts.navigation_web')
    <article class="product type-product single product-single py-2 lg:py-6 xl:py-8">
        <div class="container max-w-xl">
            <div class="product-header panel">
                <div class="row align-items-center">
                    <!-- Imagen (derecha dentro de su columna) -->
                    <div class="col-lg-6 text-center">
                        <div class="product-slider panel swiper-parent">
                            <figure style="height: 250px; with:250px">
                                <img class="uc-transition-scale-up uc-transition-opaque"
                                    style="height: 100%"
                                    src="{{ asset('imagenes/categories/category_'.$category->id.'/'.$category->image) }}"
                                    data-src="{{ asset('imagenes/categories/category_'.$category->id.'/'.$category->image) }}"
                                    alt="{{$category->name}}"
                                    data-uc-img="loading: lazy">
                            </figure>
                        </div>
                    </div>
                    <!-- Texto (izquierda) -->
                    <div class="col-lg-6 text-center">
                        <br><br>
                        <div class="product-details panel vstack gap-1 xl:gap-2 max-w-500px mx-auto"
                            data-uc-sticky="bottom: true; offset: 40;">
                            <h1 class="product-title h3 xl:h1 m-0">{{$category->name}}</h1>
                            <p>{{$category->description}}</p>
                        </div>
                    </div>
                </div>
            </div>
            

            <!-- Products Related -->
            <div class="featured-products-panel panel pt-4 lg:pt-8 mt-4 border-top border-gray-100 dark:border-gray-800">
                <header class="panel hstack justify-center gap-2 text-center">
                    <h3 class="h5 lg:h4">Articulos interesantes</h3>
                </header>
                <div class="panel swiper-parent mt-4 md:mt-6">

                    <!-- Swiper init -->
                    <div class="swiper" data-uc-swiper="items: 2; gap: 8; dots: .swiper-pagination; disable-class: d-none;" data-uc-swiper-s="items: 3; gap: 16;" data-uc-swiper-m="items: 4; gap: 24;" data-uc-swiper-l="items: 5; gap: 32;">
                        <div class="swiper-wrapper">
                            @foreach ($category->posts->take(30) as $post)
                                <div class="swiper-slide">
                                    <article class="product type-product panel">
                                        <div class="vstack gap-2">
                                            <div class="panel">
                                                <figure class="featured-image m-0 ratio ratio-1x1 uc-transition-toggle overflow-hidden bg-gray-25 dark:bg-gray-800">
                                                    <img class="media-cover image uc-transition-scale-up uc-transition-opaque" src="{{ asset('imagenes/posts/post_'.$post->id."/".$post->imagen_principal) }}" data-src="{{ asset('imagenes/posts/post_'.$post->id."/".$post->imagen_principal) }}" alt="{{$post->slug}}" data-uc-img="loading: lazy">
                                                    <a href="{{route('home.post',$post->slug)}}" class="position-cover" data-caption="{{$post->name}}"></a>
                                                </figure>
                                                {{-- <span class="position-absolute top-0 start-0 m-1 fs-7 ft-secondary lh-sm h-16px px-narrow rounded bg-yellow-400 text-dark">51%</span> --}}
                                            </div>
                                            <div class="post-header panel vstack justify-between gap-1">
                                                <div class="post-meta panel hstack justify-start gap-1 fs-7 ft-tertiary fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex z-1">
                                                    <div class="d-none md:d-block">
                                                        <div class="post-date hstack gap-narrow">
                                                            <span>{{ \Carbon\Carbon::parse($post->updated_at)->diffForHumans() }}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <h3 class="post-title h6 lg:h5 m-0 text-truncate-2">
                                                    <a class="text-none hover:text-primary duration-150" href="{{route('home.post',$post->slug)}}">{{$post->titulo_principal}}</a>
                                                </h3>
                                            </div>
                                            {{-- <div class="content vstack items-center gap-1 fs-6 text-center xl:mt-1">
                                                <h5 class="h6 lg:h5 m-0"><a class="text-none" href="{{route('home.post',$post->slug)}}">{{$post->titulo_principal}}</a></h5>
                                            </div> --}}
                                        </div>
                                    </article>
                                </div>
                            @endforeach
                        </div>
                    </div>


                    <!-- Add Arrows -->
                    <div class="swiper-nav swiper-next btn btn-xs md:btn-md w-32px md:w-48px h-32px md:h-48px bg-white text-gray-900 dark:bg-gray-700 dark:text-white rounded-circle shadow-xs position-absolute top-50 start-100 translate-middle-x mt-n9 md:mt-n10 z-1">
                        <i class="unicon-chevron-right icon-1 md:icon-2"></i>
                    </div>
                    <div class="swiper-nav swiper-prev btn btn-xs md:btn-md w-32px md:w-48px h-32px md:h-48px bg-white text-gray-900 dark:bg-gray-700 dark:text-white rounded-circle shadow-xs position-absolute top-50 start-0 translate-middle-x mt-n9 md:mt-n10 z-1">
                        <i class="unicon-chevron-left icon-1 md:icon-2"></i>
                    </div>
                </div>
            </div>
        </div>
    </article>

<!-- Newsletter -->
</div>
@endsection