@extends('layouts.tienda')

@section('content')

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    
                    <h3 class="text-black">Recomendados</h3>
                    
                    <div class="row">
                    @foreach($productos as $rec)
                        <div class="col-sm-4 col-md-4 col-xl-3 col-lg-3">
                            <div class="card">
                                <img class="img-fluid" src="{{$rec->guid}}" alt="">
                                    <div class="card-body">
                                        <h5 class="card-title text-center text-truncate">{{$rec->post_title}}</h5>
                                        <p class="card-text text-center">
                                            @if($rec->pinged > 0)
                                        	    @for($i=1; $i<=$rec->pinged; $i++)
                                        	  	    <i class="fa fa-star text-warning"></i>
                                        	    @endfor
                                            @endif 
                                        </p>
                                        <h3 class="card-text text-center text-success">
                                           @if ($moneda->mostrar_a_d)
                                              {{$moneda->simbolo}} {{$rec->meta_value}}
                                           @else
                                              {{$rec->meta_value}} {{$moneda->simbolo}}
                                           @endif 
                                        </h3>    
                                        <div class="ofuscar">
                                            {!! $rec->post_content!!}
                                        </div>
                                    </div>
                                    
                                    <p class="card-text d-inline">
                                        <small class="text-muted">
                                        	 <a class="btn btn-info btn-block text-white" data-toggle="modal" data-target="#carrito" onclick="simple('{{$rec->ID}}','{{$rec->post_title}}','{{$rec->meta_value}}','{{$rec->guid}}')">Añadir al carrito</a>
                                        </small>
                                    </p>
                                    
                            </div>
                        </div>
                    @endforeach
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</div>    


@include('tienda.store.modal.simple')


@endsection

@push('script')
<script type="text/javascript">
	
    function simple(id, titulo, precio, img){
        
        $('.cantidad').empty()
        $('.image').empty();
        
        var image = new Image();

        var src = img;
        image.src = src;
        image.style.width = '100%';
        image.style.height = 'auto';

        $('.image').append(image);
        
        //variables
        $('.idproducto').val(id);  
        $('.modal-multiple').text(titulo);
        $('.title-product').text(titulo);
        $('.precio').val(precio);
        $('.preciovisual').val(precio+' {{$moneda->simbolo}}');
        $('.precio-product').text(precio+'{{$moneda->simbolo}}');
        
        $('.total').text('Total: '+ precio +' {{$moneda->simbolo}}');
    }
    
    
    function totalCompra(cantidad){
        
        var precio = $('.precio').val(); 
        var total = parseFloat((parseFloat(precio) * parseFloat(cantidad))).toFixed(2);
        
        $('.total').text('Total: '+ total +' {{$moneda->simbolo}}');
    }
    
</script>
@endpush