@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 child-cols-12 lg:child-cols-6">
                    <div>
                        <div class="product-slider panel swiper-parent">
                            <figure>
                                <img class="uc-transition-scale-up uc-transition-opaque" style="height: 100%" 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="{{$product->link}}" class="position-cover" data-caption="Disney Toys"></a>
                            </figure>
                          
                        </div>
                    </div>
                    <div>
                        <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">{{$product->name}}</h1>
                            <div class="hstack justify-between items-center gap-2">
                                <div class="product-price hstack gap-1 fs-5 xl:fs-4">
                                    <span class="price-old text-line-through opacity-40">$89.00</span>
                                    <span class="price">$24.00</span>
                                </div>
                                <div class="product-rating hstack gap-1">
                                    <a href="{{$product->link}}" class="btn btn-sm lg:btn-md btn-primary md:max-w-150px flex-1">DETALLES</a>
                                </div>
                            </div>
                            <p class="product-desc fs-6 xl:fs-5 my-2">
                                {{$product->description}}
                            </p>
                            <a href="{{$product->link}}" class="btn btn-sm lg:btn-md btn-primary md:max-w-150px flex-1">COMPRAR</a>
                        </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">Productos que te pueden gustar</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 ($relatedProducts as $product)
                                <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/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="{{$product->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="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.product',$product->id)}}">{{$product->name}}</a></h5>
                                                {{-- <ul class="nav-x gap-0 text-gray-100 dark:text-gray-700" title="Average 5 out of 5">
                                                    <li><i class="icon fs-7 unicon-star-filled text-yellow"></i></li>
                                                    <li><i class="icon fs-7 unicon-star-filled text-yellow"></i></li>
                                                    <li><i class="icon fs-7 unicon-star-filled text-yellow"></i></li>
                                                    <li><i class="icon fs-7 unicon-star-filled text-yellow"></i></li>
                                                    <li><i class="icon fs-7 unicon-star-filled text-yellow"></i></li>
                                                </ul> --}}
                                                {{-- <div class="hstack justify-center gap-narrow fs-7"><span class="price-old text-line-through opacity-40"> $99.00 </span> <span class="price">$49.00</span></div> --}}
                                            </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