@extends('template')

@section('title', 'Curso')

@section('content')

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

<div class="container redux">
	<h5>SERVICIOS / {{ $product->nombre}}</h5>
</div>

<div class="container redux section-detalle-producto mt30">

	<div class="col-xs-12 col-sm-5 col-md-5 box-image p0"  style="background-image:url({{ asset($product->imagen) }});"></div>

	<div class="col-xs-12 col-sm-5 col-md-5 box-detalle pl50">		
		<div class="name mt20">
			{{ $product->nombre}}			
		</div>
		<div class="price mt20">			
			${{ number_format($product->precio, 0)  }}			
		</div>
		<div class="mt60">
			<ul class="nav nav-tabs">
			  <li id="taplink1" class="active clicked"><a onclick="showtap(1)">DESCRIPCION</a></li>
			  <li id="taplink2" class="clicked"><a onclick="showtap(2)">REQUISITOS</a></li>			  
			</ul>	
		</div>
		<div id="tap1" class="detalle mt20 text-justify">
			{!! $product->descripcion !!}
		</div>
		<div id="tap2" class="detalle mt20 text-justify">
			{!! $product->requisitos !!}
		</div>		
	</div>

	<div class="col-xs-12 col-sm-2 col-md-2">
		<img src="{{asset($product->icono)}}" style="width:50%; height: auto;">
		<span class="incluye">INCLUYE</span>
		<div class="mt30 text-center">
			{!! $product->incluye !!}
		</div>
		<div class="mt30 text-center">
			<input type="number" min="1" name="" value="1" id="product_cant" placeholder="Cantidad">
			<button class="btn_default pl20 pr20 mt30" onclick="addto({{ $product -> id }})">AGREGAR AL CARRITO</button>
		</div>
	</div>
</div>

<script>
	$("#tap2").hide();
	function showtap(id){
		if(id == 1){
			$("#tap2").hide();
			$("#tap1").show();
			$("#taplink2").removeClass("active");
			$("#taplink1").addClass("active");
		}else{
			$("#tap1").hide();
			$("#tap2").show();
			$("#taplink1").removeClass("active");
			$("#taplink2").addClass("active");
		}
	}
</script>

<div class="container redux">
	<div class="sectiontext mt60 mb60">Otros Cursos
		<div></div>
	</div>
</div>

<div class="container-full cursos-slider">
    <div class="container slider-cursos">
    	@include('partials/cursos', ['cursos' => $cursos])
 	</div> 	
 	<img src="{{ asset("img/left-arrow.png") }}" alt="" class="cursoslideleft">
 	<img src="{{ asset("img/left-arrow.png") }}" alt="" class="cursoslideright"> 
</div>  

<script>
    $('.slider-cursos').slick({
        slidesToShow: 4,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 4000,
        arrows: true,
        prevArrow: $('.cursoslideleft'),
        nextArrow: $('.cursoslideright'),
        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>

{{-- <div class="container">
	<div class="reltext mt60 mb60">PRODUCTOS RELACIONADOS
		<div></div>
	</div>
</div>

<div class="container product-list">
	@foreach($relacionados as $key => $product)
		{{$product-> name}}
	@endforeach --}}
	{{-- @include("productos/showproducts",['products' => $relacionados]) --}}
{{-- </div> --}}
{{-- @include("partials/descuentos",['descuentos' => $descuentos]) --}}

{{-- @include('home/categorias') --}}
	
@stop

@section('scripts')

@stop