@extends('template')

@section('title', 'Producto')

@section('content')


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

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

	<div class="col-xs-12 col-sm-5 col-md-5">
		<div class="row">
			<div class="sli-imgs">
				<div class="col-xs-12 box-image">
					<img src="{{ asset($product ->imagen) }}">	
				</div>		
				@foreach ($imagenes as $element)
					<div class="col-xs-12 box-image">				
						<img src="{{asset($element->image)}}">
					</div>
				@endforeach
			</div>
		</div>

		<div class="row mt20">
			<div class="sli-imgs-mini">
				<div class="col-xs-12 box-img">
					<img src="{{ asset($product ->imagen) }}">	
				</div>		
				@foreach ($imagenes as $element)
					<div class="col-xs-12 box-img">				
						<img src="{{asset($element->image)}}">
					</div>
				@endforeach
			</div>
		</div>

		<script type="text/javascript">
			$('.sli-imgs').slick({
			slidesToShow: 1,
			slidesToScroll: 1,
			autoplay: true,
			autoplaySpeed: 2000,
			//prevArrow: $('.slidehomeleft'),
			//nextArrow: $('.slidehomeright'),
			prevArrow: null,
			nextArrow: null,
			dots:false,
			dotsClass:"dotsBanner",
			asNavFor: '.sli-imgs-mini'
			}); 
			$('.sli-imgs-mini').slick({
			slidesToShow: 4,
			slidesToScroll: 1,
			autoplay: true,
			autoplaySpeed: 2000,
			//prevArrow: $('.slidehomeleft'),
			//nextArrow: $('.slidehomeright'),
			prevArrow: null,
			nextArrow: null,
			dots:false,
			dotsClass:"dotsBanner",
			asNavFor: '.sli-imgs',
			focusOnSelect: true
			}); 
		</script>
	</div>

	<div class="col-xs-12 col-sm-7 col-md-7 box-detalle pl50 pr50">		
		<div class="name">
 			<h2>{{ $product->name}}</h2> 					
		</div>
		<div class="ref mt5">
 			{{ $product->subcategory[0]->name}}	
		</div>
		
		{{-- <div class="tap1 mt20 mb10">DESCRIPCIÓN</div> --}}
		<div class="detalle text-justify">
			{!! $product->descripcion !!}
		</div>	
		<div class="detalle">
			<a href="{{ asset($product->broshure) }}" download="{{ $product->name}}{{ $product->broshure}}" class=""><button class="btn_default-descargar"> <img src="{{asset('img/brochure.png')}}" class="mr10"> DESCARGAR BROCHURE</button></a>
			<a href="#formContacto" class=""><button class="btn_default-contactor ml20"><img src="{{asset('img/arrow-down-contact.png')}}" class="mr10">ESTOY INTERESADO</button></a>	
		</div>

		

	</div>

{{-- 	<div class="col-xs-12 col-sm-4 col-md-4 box-detalle pt50 pl50 pr50">	
		<div class="title-pedido mt10">
 			<h4><img src="{{asset('img/cesta.png')}}" class="mr15">REALIZAR PEDIDO</h4> 					
		</div>
		<div class="price mt30">			
			@if($product->offsale == 1)
			    <div>               
			        <del>${{ number_format($product->price, 0) }}</del><br>
			        ${{ number_format($product->price - ((($product->price * $product->porcentoffsale) / 100)), 0)  }}
			    </div>
			@else
			    <div>               
			        ${{ number_format($product->price, 0) }}
			    </div>
			@endif
		</div>
		<div class="mt30">
			<span class="text mr50">Peso</span>
			<input type="number" min="1" name="" value="1" id="product_cant">Kg<br>
			<span class="text mr20">Cantidad</span>
			<input type="number" min="1" name="" value="1" id="product_cant">
			<button class="btn_default mt40" style="width: 300px;" onclick="addto({{ $product -> id }})">+ AGREGAR</button>
			<br>
			<h3><img src="{{asset('img/moto-gris.png')}}" class="mr20">DOMICILOS GRATIS</h3>
			<span class="porcom">POR COMPRAS SUPERIORES A $35.000</span><br><br>
			<img src="{{asset('img/olagris.png')}}">
		</div>
	</div> --}}
	
</div>

<div class="container redux">
	<div class=" mb60 reltext-blue">Diseño y Apertura</div>
</div>

<div class="container redux product-list">
	@foreach ($aperturas as $element)
		<div class="item-apartura text-center">
			<img src="{{asset($element->image)}}">	
		</div>
	@endforeach
</div>

<script>
	$( document ).ready(function() {
		$('.product-list').slick({
		slidesToShow: 5,
		slidesToScroll: 1,
		autoplay: true,
		autoplaySpeed: 2000,
		//prevArrow: $('.slidehomeleft'),
		//nextArrow: $('.slidehomeright'),
		prevArrow: null,
		nextArrow: null,
		dots:false,
		dotsClass:"dotsBanner",
		}); 

	});
</script>

@php
	if($product->caracteristicas == "si"){
@endphp
	
	<div class="row">
	<div class="container-full pt0  box-caracteristicas">

		<div class="col-xs-2 caract">
			<div class="col-xs-4 text-center">
				<img src="{{asset('img/icon5.png')}}">	
			</div>
			<div class="col-xs-8">
				<strong>Ancho del perfil</strong><br>
				{{$product->ancho}}
			</div>
		</div>

		<div class="col-xs-2 caract">
			<div class="col-xs-4 text-center">
				<img src="{{asset('img/icon6.png')}}">	
			</div>
			<div class="col-xs-8">
				<strong>Ancho del perfil</strong><br>
				{{$product->profundidad}}
			</div>
		</div>

		<div class="col-xs-2 caract">
			<div class="col-xs-4 text-center">
				<img src="{{asset('img/icon7.png')}}">	
			</div>
			<div class="col-xs-8">
				<strong>Ancho del perfil</strong><br>
				{{$product->espesor}}
			</div>
		</div>

		<div class="col-xs-2 caract">
			<div class="col-xs-4 text-center">
				<img src="{{asset('img/icon8.png')}}">	
			</div>
			<div class="col-xs-8">
				<strong>Ancho del perfil</strong><br>
				{{$product->capacidad}}
			</div>
		</div>

		<div class="col-xs-2 caract">
			<div class="col-xs-4 text-center">
				<img src="{{asset('img/icon9.png')}}">	
			</div>
			<div class="col-xs-8">
				<strong>Ancho del perfil</strong><br>
				{{$product->accesorios}}
			</div>
		</div>

	</div>
	</div>		
							

@php
	}
@endphp
	


<div class="container-full pt60 pb60" style="background-color:#F4F4F4; ">
	<div class="container redux">	
		<div class="col-md-12 pt15 form-contact-producto">

			<div class="col-md-4 text">			
				<div class="text-form-title">
					¿Está interesado en nuestros productos?
				</div>
				Déjanos tus datos y nos contactaremos contigo.
			</div>

			<form id="formContacto" method="post"> 
	        <p>Por favor, tómese el tiempo necesario para llenar el siguiente formulario, usando el mayor detalle posible. <br> Nos pondremos en contacto con usted lo antes posible. Gracias!</p>
			<div class="col-md-4">	
				<br>	
				<input type="" name="nombre" placeholder="Nombre completo" required>
				<input type="email" name="email" id="emaildat" placeholder="Correo electrónico" required> 
				<input type="" name="telefono" placeholder="Telefono" required>
			</div>
			<div class="col-md-4 pt20">
				<textarea rows="5" placeholder="Mensaje" name="mensaje"></textarea required>
				<div class="text-right">
				<buttom type="submit" class="btn_default-form" onclick="event.preventDefault(); sendcontacto();">ENVIAR <img src="{{asset('img/arrow-right.png')}}" class="ml10"></buttom>
				</div>
				
			</div>
			</form>



		</div>
	</div>
</div>

<div class="container redux mt100">
	<div class="mt60 mb60 reltext-produc">Productos relacionados</div>
</div>

<div class="container-full cursos-slider">
    <div class="container-full slider-productos">
        @include('partials/productos', [
        'products' => $relacionados   
        ])
    </div>
</div>   

<script>
    $('.slider-productos').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>
	
@stop

@section('scripts')
<script>
	$( document ).ready(function() {
		$('.product-list').slick({
		slidesToShow: 4,
		slidesToScroll: 1,
		autoplay: true,
		autoplaySpeed: 2000,
		//prevArrow: $('.slidehomeleft'),
		//nextArrow: $('.slidehomeright'),
		prevArrow: null,
		nextArrow: null,
		dots:false,
		dotsClass:"dotsBanner",
		}); 

	});

	


    </script>
@stop