@extends('template')

@section('title', 'Proyecto')

@section('content')

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

<div class="container-full  pt60" >
	<div class="container redux p0">

        @php
            $imagenes = DB::select(DB::raw("SELECT * from imgs_proyecto where proyecto_id=".$proyecto -> id));
        @endphp
       
		<div class="col-xs-12 col-sm-6 col-md-6">
            
            <div class="slider-imgs">
			<div class="col-xs-12 img-post" style="background-image:url({{ asset($proyecto->image) }}); background-size: cover; background-position: center; height: 500px !important;"></div>

            @foreach($imagenes as $key => $img)
               <div class="col-xs-12 img-post" style="background-image:url({{ asset($img->image) }}); background-size: cover; background-position: center; height: 500px !important;"></div>
            @endforeach	
            </div>

            <img src="{{ asset("img/left.png") }}" alt="" class="slider-left-arrow slidehomeleft">
             <img src="{{ asset("img/left.png") }}" alt="" class="slider-right-arrow slidehomeright">


		</div>	

        <div class="col-xs-12 col-sm-6 col-md-6 p60 pl80 pr80">
            
            <div class="titleblog p0 mt50 mb5">{{ $proyecto -> name}}</div>
            <div class="" style="color: #C3C3C3">{{ $proyecto->location }}</div>
            

            <div class="descriptionblog  mt60 text-justify" style="line-height: 30px;">
                <div class="" style="color: #0AC4F3; font-weight: 500;">DESCRIPCÏÓN</div>
                {!! $proyecto -> description !!}
            </div>
        </div>

	</div>
</div>

<div class="container redux mt100">
    <div class="mt60 mb60 reltext-blue" style="color: #0AC4F3; font-size: 30px;">También te puede interesar</div>
</div>

<div class="container redux slider-proyectos">
    @include('partials/proyectos', [
    'proyectos' => $proyectos    
    ])             
</div>



<script>
    $('.slider-imgs').slick({    
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 3000,
        prevArrow: $('.slidehomeleft'),
        nextArrow: $('.slidehomeright'),        
        dots:false,
        dotsClass:"dotsBanner"       
    });
</script>

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


@stop