@extends('layouts.tienda')

@section('content')

        @if($destacados->count() > 0)
            <div class="intro-slider-container">
                <div class="intro-slider owl-carousel owl-simple owl-nav-inside" data-toggle="owl" 
                    data-owl-options='{
                        "nav": false,
                        "dots": true,
                        "loop": true,
                        "autoplay": true,
                        "autoplayTimeout": 5000,
                        "autoplayHoverPause": true,
                        "responsive": {
                                "992": {
                                 "nav": true
                                }
                            }
                        }'>
                    
                    
                    @foreach($destacados as $dest)
                    <div class="intro-slide" style="background-image: url({{ asset('/anuncios/banner/'.$dest->imagen) }});">
                        
                    </div>
                    @endforeach

                </div>
            </div>
        @endif    
            
        
        <div class="mb-4"></div>
        
        
        
        
        <!-- Slider Version PC -->
<div class="col-md-12">
    
        <div class="col-md-12 col-12">
            <a href="{{ route('tienda-externa-ver-categorias') }}">
                <h4 class="title text-center mb-2">Explora nuestras Categorías</h4>
            </a>
        </div>
        
    <div class="container">
        <div class="col-md-12 d-none d-sm-block">
            
            <div id="carouselExampleControls_categorias" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner">
                    @foreach($minimo_categ->chunk(4) as $chunk)
                    <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
                        <div class="row">
                            @foreach($chunk as $categoria)
                            <div class="col-md-3">
                                <a href="{{ route('tienda-externa-filtros', ['tipo' => 1, 'categoria' => $categoria->id, 'search' => '']) }}">
                                    <div class="cat-block shadow">
                                        <div class="card-body text-center">
                                            <img src="{{ asset('categoria/'.$categoria->imagen)}}" loading="lazy" style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover;">
                                            <h5 class="text-uppercase mt-2">{{ $categoria->titulo }}</h5>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>

            {{-- Controles --}}
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls_categorias" data-bs-slide="prev">
                <i class="fa-solid fa-chevron-left" style="color: #000;"></i>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls_categorias" data-bs-slide="next">
                <i class="fa-solid fa-chevron-right" style="color: #000;"></i>
            </button>
            </div>
        
        </div>
        
        
        <!-- Slider Version Teléfono -->
        <div class="col-md-12 col-12 d-block d-sm-none">
            <div id="carouselResponsive_categorias" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner">
                    @for($i=0; $i<$minimo_categ->count(); $i++)
                    <div class="carousel-item @if($i == 0) active @endif">
                        <div class="col-md-3 col-12">
                            
                            <a href="{{ route('tienda-externa-filtros', ['tipo' => 1, 'categoria' => $minimo_categ[$i]->id, 'search' => '']) }}">
                                <div class="cat-block shadow">
                                    <div class="card-body text-center">
                                        <img src="{{ asset('categoria/'.$minimo_categ[$i]->imagen)}}" loading="lazy" style="width: 120px; height: 120px; border-radius: 50%;">
                                        <h5 class="text-uppercase mt-2">{{ $minimo_categ[$i]->titulo }}</h5>
                                    </div>
                                </div>
                            </a>
                                    
                        </div>
                    </div>
                    @endfor
                </div>
                
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselResponsive_categorias" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true">
                            
                    </span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselResponsive_categorias" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true">
                           
                    </span>
                    <span class="visually-hidden">Next</span>
                </button>
                    
            </div>
        </div>    
        <!-- Slider Version Teléfono -->
    </div>    
</div>

        



<!--Iniciobanner-->
@if($anuncios_slider->isNotEmpty())
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h4 class="title text-center mt-3 mb-2">Ofertas del mes</h4>
            </div>

            @foreach($anuncios_slider as $sli)
                @php
                    // Determinamos la clase de columna según la posición (1,3,4,6 son pequeñas | 2,5 son grandes)
                    $colSize = in_array($loop->iteration, [2, 5]) ? 'col-lg-6' : 'col-lg-3';
                @endphp

                <div class="col-sm-6 {{ $colSize }}">
                    <div class="banner banner-overlay">
                        <a href="#">
                            <img src="{{ $sli->img }}" alt="Banner">
                        </a>
                        <div class="banner-content">
                            <h4 class="banner-subtitle text-white">{{ $sli->title }}</h4>
                            <h3 class="banner-title text-white">{{ $sli->text_anuncio }}</h3>
                            <a href="{{ route('tienda-externa-show', ['slug' => $sli->slug]) }}" class="banner-link">
                                Compra ahora <i class="fi fi-rr-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endif

<div class="mb-3"></div>
<!--Finalbanner-->
             

<div class="container">
    <!-- Slider Version PC (Muestra grupos de 4) -->
    <div class="d-none d-sm-block">
        <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
                @foreach($slider->chunk(4) as $chunk)
                    <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
                        <div class="row">
                            @foreach($chunk as $item)
                                <div class="col-md-3">
                                    <div class="card">
                                        <a class="text-center" href="{{ route('tienda-externa-show', ['slug' => $item->slug]) }}">
                                            <img class="card-img-top" src="{{ $item->img }}" alt="">
                                        </a>
                                        <div class="card-body">
                                            <div class="row colapse-row">
                                                <div class="col-md-7 col-12">
                                                    <h5 class="product-title text-truncate mb-0">{{ $item->title }}</h5>
                                                    @if($item->idcategoria)
                                                        <p class="text-category mb-0">{{ $item->categ->titulo }}</p>
                                                    @endif
                                                    <p class="card-text mb-0"><i class="fa fa-star text-azulclaro"></i> {{ $item->estrellas }}</p>
                                                </div>
                                                <div class="col-md-5 col-12 text-md-right">
                                                    <h5 class="product-title text-truncate">
                                                        {{ $moneda->mostrar_a_d ? $moneda->simbolo.' '.$item->precio_publico : $item->precio_publico.' '.$moneda->simbolo }}
                                                    </h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
            <!-- Controles PC -->
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
                <span class="carousel-control-prev-icon"><i class="fa-solid fa-chevron-left"></i></span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
                <span class="carousel-control-next-icon"><i class="fa-solid fa-chevron-right"></i></span>
            </button>
        </div>
    </div>

    <!-- Slider Version Teléfono (Muestra de 1 en 1) -->
    <div class="d-block d-sm-none">
        <div id="carouselResponsive_productos" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
                @foreach($slider as $item)
                    <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
                        <div class="card">
                            <a class="text-center" href="{{ route('tienda-externa-show', ['slug' => $item->slug]) }}">
                                <img class="card-img-top" src="{{ $item->img }}" alt="">
                            </a>
                            <div class="card-body">
                                <div class="row colapse-row">
                                    <div class="col-md-7 col-12">
                                        <h5 class="product-title text-truncate mb-0">{{ $item->title }}</h5>
                                        @if($item->idcategoria)
                                            <p class="text-category mb-0">{{ $item->categ->titulo }}</p>
                                        @endif
                                        <p class="card-text mb-0"><i class="fa fa-star text-azulclaro"></i> {{ $item->estrellas }}</p>
                                    </div>
                                    <div class="col-md-5 col-12 text-md-right">
                                        <h5 class="product-title text-truncate">
                                            {{ $moneda->mostrar_a_d ? $moneda->simbolo.' '.$item->precio_publico : $item->precio_publico.' '.$moneda->simbolo }}
                                        </h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

                    
                
   

            
            <!--bannersecundario-->
            <div class="container">
                <div class="row">
                    @foreach($anuncios_inferior as $superior_inf)
                    <div class="col-lg-6">
                        <div class="banner banner-overlay banner-overlay-light">
                            <a href="{{ $superior_inf->enlace }}" target="_blank">
                                <img src="{{ asset('/anuncios/banner/'.$superior_inf->imagen) }}" alt="Banner">
                            </a>

                            <div class="banner-content">
                                <h4 class="banner-subtitle d-none d-sm-block" style="color: {{ $superior_inf->color }};">{{ $superior_inf->titulo }}</h4>
                                <h3 class="banner-title" style="color: {{ $superior_inf->color }};">{{ $superior_inf->descripcion }}</h3>
                                <a href="{{ $superior_inf->enlace }}" target="_blank" class="banner-link banner-link-dark">Descubrelo ahora <i class="fi fi-rr-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
             <!--finalbannersecundario-->  
             
                <div class="mb-4"></div><!-- End .mb-2 -->
                   
             
                @if($vistos->count() > 0)
                <div class="col-md-12">
                    <div class="d-flex justify-content-center">
                        <div class="col-md-9 col-11">
                            
                            <div class="col-md-12">
                                <h2 class="title text-center mb-2">Los más vendido</h2>
                            </div> 
                            
                        <div class="row">    
                        
                        @foreach($vistos as $vist)
                            <div class="col-md-3 col-6">
                                
                                <div class="card">
                                    <a class="text-center" href="{{ route('tienda-externa-show', ['slug' => $vist->slug]) }}">
                                       <img class="card-img-top" src="{{ $vist->img }}" alt="">
                                    </a>
                                    <div class="card-body">
                                        <div class="row colapse-row">
                                            <div class="col-md-7 col-12">
                                               <h5 class="product-title text-truncate mb-0">{{ $vist->title }}</h5>  
                                               
                                               @if($vist->idcategoria != null)
                                               <p class="text-category mb-0">{{ $vist->categ->titulo }}</p>
                                               @endif
                                               
                                               <p class="card-text mb-0">
                                                   <p>
                                                       <i class="fa fa-star text-azulclaro"></i> {{ $vist->estrellas }}
                                                   </p>
                                               </p>
                                            </div>
                                    
                                            <div class="col-md-5 col-12 text-md-right">
                                                
                                                <h5 class="product-title text-truncate">
                                                    @if ($moneda->mostrar_a_d)
                                                      {{$moneda->simbolo}} {{ $vist->precio_publico }}
                                                    @else
                                                      {{ $vist->precio_publico }} {{$moneda->simbolo}}
                                                    @endif 
                                                </h5>
                                                
                                            </div>
                                            
                                        </div>
                                    </div>
                                </div>
                            </div> 
                        @endforeach
                        </div>
                    </div>
                </div>
            </div>
            @endif    
            
        <div class="mb-3"></div>   
                  
@endsection