@extends('Vistas_cliente.breadcump')

@section('nombre_pagina', 'Tienda')
    
@section('contenido_con')
    
    <!--Inicio area tienda-->
    <div class="shop_area shop_fullwidth mb-60">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    
                    <!--Inicio Barra herramientas de tienda-->
                    
                    <div class="shop_toolbar_wrapper">
                        <div class="shop_toolbar_btn">

                            <button data-role="grid_3" type="button" class=" btn-grid-3" data-bs-toggle="tooltip"
                                title="3"></button>

                            <button data-role="grid_4" type="button" class="active btn-grid-4" data-bs-toggle="tooltip"
                                title="4"></button>

                            <button data-role="grid_list" type="button" class="btn-list" data-bs-toggle="tooltip"
                                title="List"></button>
                        </div>
                        
                        <div class="page_amount">
                            <p>Mostrando resultados</p>
                        </div>
                    </div>
                    <!--Fin Barra herramientas de tienda-->
                    
                    <div class="row shop_wrapper grid_4">
                        @foreach ($lista_jabones as $item)
                            <div class="col-lg-3 col-md-4 col-sm-6 col-12 ">
                                
                                <div class="single_product">
                                    
                                    <div class="product_thumb">
                                        <a class="primary_img" href="{{ route('landing.show', $item->id_jabon) }}"><img
                                                src="{{$item->img}}" alt=""></a>
                                    </div>

                                    <div class="product_content grid_content">
                                        <h4 class="product_name"><a href="{{ route('landing.show', $item->id_jabon) }}">{{$item->nombre}}</a>
                                        </h4>
                                        
                                        <div class="price_box">
                                            <span class="current_price">₡{{number_format($item->precio_base,2)}}</span>
                                        </div>
                                        
                                        <div class="add_to_cart"> <a href="javascript:void(0);"
                                            onclick="addToCart({{ $item->id_jabon }}, '{{ $item->nombre }}', {{ $item->precio_base }}, '', '{{ $item->img }}', 1 )">+
                                            Añadir al carrito</a>
                                    </div>

                                    </div>

                                    <div class="product_content list_content">
                                        <h4 class="product_name"><a href="{{ route('landing.show', $item->id_jabon) }}">{{$item->nombre}}</a>
                                        </h4>
                                        
                                        <div class="price_box">
                                            <span class="current_price">₡{{number_format($item->precio_base,2)}}</span>
                                        </div>

                                        <div class="product_desc">
                                            <p>{{$item->descripcion}}</p>
                                        </div>

                                        <div class="list_action_wrapper">
                                            <div class="list_cart_btn">
                                                <a href="javascript:void(0);"
                                                onclick="addToCart({{ $item->id_jabon }}, '{{ $item->nombre }}', {{ $item->precio_base }}, '','{{ $item->img }}', 1)">+
                                                Añadir al carrito</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    
                    
                    <!--Paginación de productos-->
                    <div class="shop_toolbar t_bottom">
                        <div class="pagination">
                            <ul>
                                <li class="current">1</li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li class="next"><a href="#">next</a></li>
                                <li><a href="#">>></a></li>
                            </ul>
                        </div>
                    </div>
                    <!--FIN Paginación de productos-->
                    
                    
                </div>
            </div>
        </div>
    </div>
    <!--Fin area de tienda-->

    
@endsection