@extends('template')

@section('title', 'Blog')

@section('content')

<div class="mt100"></div>

<div class="container-full  pt60" >
	<div class="container redux p0">
       {{--  <div class="col-xs-12 p0">
            RECETAS / {{ $blog -> nombre}}
        </div> --}}

        

		<div class="col-xs-12 col-sm-8 col-md-8 p0">
            <div class="col-xs-8">
                <div class="titleblog p0 mt40 mb30">{{ $blog -> name}}</div>
            </div>
            <div class="col-xs-4 text-right">
                <div class="dateblog p0 mt15" style="color: #6BD5E7;"><strong>{{ Carbon\Carbon::parse($blog->fecha)->format('d M, Y') }}</strong></div>
            </div>
			<div class="col-xs-12 img-post" style="background-image:url({{ asset($blog->image) }}); background-size: cover; background-position: center;"></div>
			<div class="col-xs-12 p0">
				<div class="descriptionblog p0 mt10 text-justify">
					{!! $blog -> description !!}
				</div>
			</div>
		</div>	

		<div class="col-xs-12 col-sm-4 col-md-4 slider-blogs-detalle">
           {{--  <div class="col-xs-12">
                <img src="{{asset('img/ingredientes.png')}}" alt=""><br><br>
                {!! $blog -> ingredientes !!}
            </div> --}}
            <div class="col-xs-12 ">
                <h4 style="color: black;">Mas noticias</h4><br>
{{--                 <div class="slider-blogs">
                    @include("partials/bloglist",['blogs' => $blogs])  
                </div> --}}
                <div class="col-xs-12 slider-blogs slider-blogs-detalle">
                    @foreach($blogs as $key => $blog)
                        
                        <div class="col-xs-12 col-sm-6 col-md-3 mb60">
                            <a href="{{ url("blog") }}/{{ $blog -> id }} ">                           
                            <div class="col-xs-12  p0 pt10 pb10" >
                                {{ $blog -> fecha }}           
                            </div>
                            <div class="col-xs-12 p0 title mb20">
                                {!! $blog -> name !!}           
                            </div>  
                            {{-- <img src="{{asset('img/go-blog.png')}}"> --}}
                            </a>  
                        </div>
                        
                    @endforeach
                </div>
            </div>
			
		</div>

	</div>
</div>



<script>
    $('.slider-blogs').slick({
    	vertical: true,
        slidesToShow: 4,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 3000,
        //prevArrow: $('.slidehomeleft'),
        //nextArrow: $('.slidehomeright'),
        prevArrow: null,
        nextArrow: null,
        dots:false,
        dotsClass:"dotsBanner",
        responsive: [{
            breakpoint: 1200,
            settings: {
            	vertical: true,
                slidesToShow: 1,
                slidesToScroll: 2
            }
        }, {
            breakpoint: 1024,
            settings: {
            	vertical: true,
                slidesToShow: 1,
                slidesToScroll: 1
            }
        }, {
            breakpoint: 768,
            settings: {
            	vertical: false,
                slidesToShow: 1,
                slidesToScroll: 1
            }
        }, {
            breakpoint: 480,
            settings: {
            	vertical: false,
                slidesToShow: 1,
                slidesToScroll: 1
            }
        }
        ]
    });
</script>


@stop