@extends('layouts.app_web')  <!-- Hereda el layout base -->
@section('content')
<div id="wrapper" class="wrap overflow-hidden-x">
    @include('layouts.navigation_web')

    <div class="section py-3 sm:py-6 lg:py-9">
        <div class="container max-w-xl">
            <div class="panel vstack gap-3 sm:gap-6 lg:gap-9">
                <header class="page-header vstack justify-center items-center text-center max-w-500px mx-auto">
                    <h1 class="h4 lg:h1">{{$navigation}}</h1>
                    <p class="fs-6 lg:fs-5 opacity-60">Descubre nuestra selección de productos exclusivos y encuentra justo lo que necesitas. ¡Explora y compra ahora!</p>
                </header>
                <div class="vstack sm:hstack justify-between items-center gap-2 sm:gap-4">
                    <div class="panel text-center sm:text-start">
                        <span class="fs-6 m-0 opacity-60">Mostrando {{count($products)}} productos.</span>
                    </div>
                    <div>
                        <form method="GET" action="{{ route('home.searchproducts') }}">

                        <div class="hstack gap-1 fs-6">
                            <span>Filtrar:</span>
                            <input type="text" name="search" class="form-control form-control-xs fs-6 w-150px " placeholder="Buscar..." value="{{ request('search') }}">
                            <button type="submit" class="btn btn-xs sm:btn-sm lg:btn-md btn-alt-dark text-nowrap w-100 dark:hover:bg-gray-500" name="update_cart" value="Update cart">🔍</button>
                        </div>
                    </form>

                    </div>
                </div>
              
                
                <div class="row g-4 xl:g-8">
                    
                    <div class="col">
                        <div class="panel text-center">
                            
                            
                            <div class="row child-cols-12 sm:child-cols-6 lg:child-cols-4 xl:child-cols-3 col-match gy-4 xl:gy-6 gx-2 sm:gx-4">
                                @foreach ($products as $product)
                                <div>
                                    <article class="post type-post panel vstack gap-2">
                                        <div class="post-image panel overflow-hidden">
                                            <figure class="featured-image m-0 ratio ratio-16x9 rounded 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/products/product_'.$product->id."/".$product->image) }}" data-src="{{ asset('imagenes/products/product_'.$product->id."/".$product->image) }}" alt="{{$product->name}}" data-uc-img="loading: lazy">
                                                <a href="{{route('home.product', $product->id)}}" class="position-cover" data-caption="The Rise of AI-Powered Personal Assistants: How They Manage"></a>
                                            </figure>
                                            {{-- ESTO LO USAMOS EN LOS POSTS  --}}
                                            {{-- <div class="post-category hstack gap-narrow position-absolute top-0 start-0 m-1 fs-7 fw-bold h-24px px-1 rounded-1 shadow-xs bg-white text-primary">
                                                <a class="text-none" href="blog-category.html">Gadgets</a>
                                            </div> --}}
                                            <div class="position-absolute top-0 end-0 w-150px h-150px rounded-top-end bg-gradient-45 from-transparent via-transparent to-black opacity-50"></div>
                                            <span class="cstack position-absolute top-0 end-0 fs-6 w-40px h-40px text-white">
                                                {{-- <i class="icon-narrow unicon-play-filled-alt"></i> --}}
                                            </span>
                                        </div>
                                        <div class="post-header panel vstack gap-1 lg:gap-2">
                                            <h3 class="post-title h6 sm:h5 m-0 text-truncate-2 m-0">
                                                <a class="text-none" href="{{route('home.product', $product->id)}}">{{$product->name}}</a>
                                            </h3>
                                            <div>
                                                <div class="post-meta panel hstack justify-center fs-7 fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex">
                                                    <div class="meta">
                                                        <div class="hstack gap-2">
                                                            {{-- <div>
                                                                <div class="post-author hstack gap-1">
                                                                    <a href="https://html.themewant.com/news5/demo-three/page-author.html" data-uc-tooltip="David Peterson"><img src="../assets/images/avatars/01.png" alt="David Peterson" class="w-24px h-24px rounded-circle"></a>
                                                                    <a href="https://html.themewant.com/news5/demo-three/page-author.html" class="text-black dark:text-white text-none fw-bold">David Peterson</a>
                                                                </div>
                                                            </div> --}}
                                                            <div>
                                                                <div class="post-date hstack gap-narrow">
                                                                    <span>Publicaciones asociadas</span>
                                                                </div>
                                                            </div>
                                                            <div>
                                                                <a href="{{route('home.posts')}}" class="post-comments text-none hstack gap-narrow">
                                                                    <i class="icon-narrow unicon-chat"></i>
                                                                    <span>{{count($product->posts)}}</span>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="actions">
                                                        <div class="hstack gap-1"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </article>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

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