@extends('layouts.app_web')  <!-- Hereda el layout base -->
@section('head') 
    <link rel="stylesheet" href="{{asset('assets/css/posts.css')}}">
@endsection

@section('content')
<div id="sidebar-productos">
    <!-- Los productos aparecerán aquí de forma dinámica -->
</div>
<div id="wrapper" class="wrap overflow-hidden-x">
    @include('layouts.navigation_web')
    
    <article class="post type-post single-post py-4 lg:py-6 xl:py-9">
        <div class="container max-w-xl">
            
            <div class="post-header">
                <h1 class="h4 sm:h3 xl:h1">{{$post->titulo_principal}}</h1>

                <div class="panel vstack gap-4 md:gap-6 xl:gap-9 text-center">
                    <figure class="featured-image m-0">
                        <figure >
                            <img style="max-height: 300px" 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">
                        </figure>
                    </figure>
                </div>
            </div>
        </div>


        <div class="panel mt-4 lg:mt-6 xl:mt-9">
            <div class="container max-w-lg">
                <div class="post-content panel fs-6 md:fs-5" data-uc-lightbox="animation: scale">
                    <p>{{$post->resumen_corto}}</p>
                </div>
                <div class="post-conten">
                

                    {!! $post->contenido_post !!}
                </div>

                <div class="post-related panel border-top pt-2 mt-8 xl:mt-9">
                    <h4 class="h5 xl:h4 mb-5 xl:mb-6">Productos:</h4>
                    <div class="row child-cols-6 md:child-cols-3 gx-2 gy-4 sm:gx-3 sm:gy-6">
                        @foreach ($post->products as $producto)
                        <div>
                            <article class="post type-post panel vstack gap-2">
                                <figure class="featured-image m-0 ratio ratio-4x3 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_'.$producto->id."/".$producto->image) }}" data-src="{{ asset('imagenes/products/product_'.$producto->id."/".$producto->image) }}" alt="{{$producto->name}}" data-uc-img="loading: lazy">
                                    <a href="{{$producto->link}}" class="position-cover" data-caption="{{$producto->name}}"></a>
                                </figure>
                                <div class="post-header panel vstack gap-1">
                                    <h5 class="h6 md:h5 m-0">
                                        <a class="text-none" href="{{$producto->link}}">{{$producto->name}}</a>
                                    </h5>
                                    @php
                                        $numero = rand(70, 1000); // Genera un número aleatorio entre 101 y 999

                                        $vendidos = 200; // número fijo que tú defines manualmente
                                    @endphp

                                    <span>
                                        {{ $numero }} vendidos
                                        @if ($numero > $vendidos)
                                            🔥
                                        @endif
                                    </span>

                                </div>
                            </article>
                        </div>
                        @endforeach

                    </div>
                </div>
                <div class="post-related panel border-top pt-2 mt-8 xl:mt-9">
                    <h4 class="h5 xl:h4 mb-5 xl:mb-6">Galeria:</h4>
                    <div class="row child-cols-6 md:child-cols-3 gx-2 gy-4 sm:gx-3 sm:gy-6">
                        @foreach ($post->gallery as $gallery)
                        <div>
                            <article class="post type-post panel vstack gap-2">
                                @if ($gallery->type == "image")
                                    <figure class="featured-image m-0 ratio ratio-4x3 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/posts/post_'.$gallery->post_id."/".$gallery->image)}}" data-src="{{asset('imagenes/posts/post_'.$gallery->post_id."/".$gallery->image)}}" alt="{{$post->slug}}" data-uc-img="loading: lazy">
                                    </figure>
                                @else
                                    @php
                                        $videoUrl = $gallery->image; // Esto vendría de la base de datos
                                        $videoId = str_replace("https://youtu.be/", "", $videoUrl); 
                                    @endphp
                                    <iframe  class="featured-image m-0 ratio ratio-4x3 rounded uc-transition-toggle overflow-hidden bg-gray-25 dark:bg-gray-800"
                                        src="https://www.youtube.com/embed/{{$videoId}}"
                                        frameborder="0" 
                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                        allowfullscreen>
                                    </iframe>
                                @endif
                            
                                <div class="post-header panel vstack gap-1">
                                    <div class="post-date hstack gap-narrow fs-7 opacity-60">
                                        <span>{{ \Carbon\Carbon::parse($post->updated_at)->diffForHumans() }}</span>
                                    </div>
                                </div>
                            </article>
                        </div>
                        @endforeach
                 
                    </div>
                </div>
                {{-- <a href="blog-details-3.html#commont" class="btn h-56px w-100 mt-8 xl:mt-9 text-black dark:text-white bg-gray-25 dark:bg-opacity-10 hover:bg-gray-50 dark:hover:bg-gray-700">
                    <span>Be the first to write a comment.</span>
                </a> --}}
            </div>
        </div>
    </article>
</div>

@section('scripts')

    @if(session('mensaje'))
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                Swal.fire({
                    icon: "{{ session('type') }}", // success, error, warning, info
                    title: "{{ session('title') }}",
                    text: "{{ session('mensaje') }}",
                    confirmButtonText: "¡Vamos allá!",
                });
            });
        </script>
    @endif

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Aquí tienes los productos de la base de datos pasados desde Blade a JavaScript
            const productos = @json($post->products);

            // Función para crear los productos
            function crearProducto(producto) {
                const productoDiv = document.createElement('div');
                productoDiv.classList.add('producto');
                productoDiv.classList.add('animate__animated');
                productoDiv.classList.add('animate__fadeInRight'); // Animación de entrada a la derecha

                productoDiv.innerHTML = `
                    <div class="producto-contenedor">
                        <!-- Usando la imagen del producto -->
                        <img src="{{ asset('imagenes/products/product_') }}${producto.id}/${producto.image}" alt="${producto.name}" class="producto-imagen">
                        
                        <div class="producto-info">
                            <!-- Nombre del producto -->
                            <h4>${producto.name}</h4>
                            <!-- Enlace para ver más del producto -->
                            <a href="${producto.link}" class="comprar-btn">Ver producto</a>
                        </div>

                        <!-- X en la esquina para cerrar -->
                        <span class="cerrar-x">×</span>
                    </div>
                `;

                // Añadir el producto al contenedor
                const contenedor = document.getElementById('sidebar-productos');
                if (contenedor) {
                    contenedor.appendChild(productoDiv);
                }

                // Asignar el evento de cierre al botón de cerrar
                const cerrarBtns = productoDiv.querySelectorAll('.cerrar-x');
                cerrarBtns.forEach(btn => {
                    btn.addEventListener('click', function() {
                        cerrarProducto(btn); // Llamada a la función cerrarProducto
                    });
                });
            }

            // Función para cerrar el producto (eliminarlo)
            function cerrarProducto(elemento) {
                const productoDiv = elemento.closest('.producto'); // Encuentra el contenedor del producto
                if (productoDiv) {
                    productoDiv.remove(); // Elimina el producto
                }
            }

            // Mostrar el primer producto después de 4 segundos
            function mostrarPrimerProducto() {
                if (productos.length > 0) {
                    crearProducto(productos[0]); // Muestra el primer producto
                    setTimeout(mostrarProductosSiguientes, 7000); // Esperar 7 segundos para el siguiente producto
                }
            }

            // Función para mostrar los siguientes productos después de 7 segundos entre cada uno
            let index = 1; // Comenzamos con el segundo producto
            function mostrarProductosSiguientes() {
                if (index < productos.length) {
                    crearProducto(productos[index]);
                    index++;
                    setTimeout(mostrarProductosSiguientes, 7000); // Espera 7 segundos antes de mostrar el siguiente
                } else {
                    // Cuando todos los productos hayan sido mostrados, reiniciar el ciclo después de 40 segundos
                    setTimeout(reiniciarCiclo, 40000); // 40 segundos de espera para reiniciar
                }
            }

            // Función para reiniciar el ciclo de productos sin retraso para el primer producto
            function reiniciarCiclo() {
                index = 0; // Reiniciar el índice para empezar desde el primer producto
                mostrarProductosSiguientes(); // Comienza inmediatamente después de 40 segundos, sin retraso adicional
            }

            // Iniciar mostrando el primer producto con 4 segundos de retraso
            setTimeout(mostrarPrimerProducto, 4000);
        });

    </script>
@endsection
@endsection