@section('css')
<style>
	#lightbox .modal-content {
		display: inline-block;
		text-align: center;
	}

	#lightbox .close {
		opacity: 1;
		color: rgb(255, 255, 255);
		background-color: rgb(25, 25, 25);
		padding: 5px 8px;
		border-radius: 30px;
		border: 2px solid rgb(255, 255, 255);
		position: absolute;
		top: -15px;
		right: -55px;

		z-index:1032;
	}
	.imagem{
		position:relative;
	}
	.imagem-mascara {
		width:400px; /* largura da imagem máscara */
		height:400px; /* altura da imagem máscara */
		position:absolute;
		top:0;
		left:0;
		background:url('storage/img/promocao_2.png') 0 0 no-repeat; /* imagem máscara */
	}
</style>
@endsection
<div class="card">
	<div class="card-header">
		{{ $product->name }} -
		<span class="mb-1">
			@foreach ($product->categories as $key => $categoria)
			<a href="category/{{ $categoria->slug }}">
				<span class="badge badge-primary mr-1">{{ strtoupper($categoria->name) }}</span>
			</a>
			@endforeach
		</span>

	</div>
	<div class="card-body">
		<!-- Container -->
		<div class="row">

			<!-- Column -->
			<div class="col-md-8 mb-4 d-flex align-items-stretch">

				<!--Card-->
				<div class="card">
					<!--Card image-->
					<figure class="imagem product-cover-wrap z-depth-1 " id="produto" style="cursor: zoom-in;">
						@if ($product->sale_price && ($product->sale_price_ini < date("Y-m-d")) && ($product->sale_price_fim >= date("Y-m-d")))
						<div class="imagem-mascara"></div>
						@endif
						@php
							$exists = \Storage::disk('public')->exists($product->cover);
						@endphp
						@if($exists)
						<img id="main-image" class="product-cover rounded img-fluid w-100"
						src="{{ asset("storage/$product->cover") }}?w=400&h400"
						data-zoom="{{ asset("storage/$product->cover") }}?w=600&h=400">
						@else
						<img id="main-image" class="product-cover" src="https://placehold.it/300x300"
						data-zoom="{{ asset("storage/$product->cover") }}?w=600" alt="{{ $product->name }}">
						@endif
						<a href="{{ url('/'.$product->slug) }}">
							<div class="mask rgba-white-slight"></div>
						</a>
					</figure>

					<!--Card content-->
					<div class="card-body">
						<!--Text-->
						<div class="col-md-6 mb-4">
							<ul id="thumbnails" class="d-flex align-items-stretch list-unstyled">
								@if(isset($images) && !$images->isEmpty())
								@foreach($images as $image)
								<li >
									<a href="" data-toggle="modal" data-target="#lightbox" style="cursor: zoom-in;">
										@if(isset($product->cover) && ($images->count() > 1))
										<img class="rounded img-thumbnail z-depth-1 img-responsive"
										src="{{ asset("storage/$image->src") }}"
										alt="{{ $product->name }}" style="max-width: 200px;" />
										@endif
									</a>
								</li>
								@endforeach
								@endif
							</ul>
						</div>
					</div>

				</div>
				<!--/.Card-->

			</div>
			<!-- Column -->

			<!-- Column -->
			<div class="col-md-4 mb-4">

				<!--Card-->
				<div class="card">

					<!--Card content-->
					<div class="card-body">
						<!--Title-->
						<span class="card-title red-text h2 text-oswald">{{ $product->name }}</span>
						<hr>
						<!--Text-->
						<p class="card-text">
							{!! nl2br($product->description) !!}
							<hr>
							@if($product->reference)
									<p>
										Referência  <span class="badge badge-primary">{{ $product->reference }}
										</span>
										<hr>
									</p>
								@endif
							<span class="h4 font-weight-bold title-principal">
								@if(!is_null($product->attributes->where('default', 1)->first()))
								@if(!is_null($product->attributes->where('default', 1)->first()->sale_price))
								{{ number_format($product->attributes->where('default', 1)->first()->sale_price, 2, ',', '.') }}
								<img src="{{ asset('storage/img/placa-de-promocao.png') }}" alt="Promoção" style="max-width: 250px;">
								@else
								{{ number_format($product->attributes->where('default', 1)->first()->price, 2, ',', '.') }}
								@endif
								@else
								@if ($product->sale_price && ($product->sale_price_ini < date("Y-m-d")) && ($product->sale_price_fim >= date("Y-m-d")))
								<img src="{{ asset('storage/img/placa-de-promocao.png') }}" alt="Promoção" style="max-width: 250px;"><p><span class="font-italic" style="text-decoration: line-through; color:red;opacity:0.65; -moz-opacity: 0.65; filter: alpha(opacity=65);">{{ config('cart.currency_symbol') }} {{ number_format($product->price, 2, ',', '.') }}</span> {{ config('cart.currency_symbol') }} {{ number_format($product->sale_price, 2, ',', '.') }}</p>
								@else
								<span class="">{{ config('cart.currency_symbol') }} {{ number_format($product->price, 2, ',', '.') }}</span>
								@endif
								@endif
							</span>
							@include('layouts.errors-and-messages')
							<form action="{{ route('cart.store') }}" class="form-inline" method="post">
								{{ csrf_field() }}
								@if(isset($productAttributes) && !$productAttributes->isEmpty())
								<div class="form-group">
									<label for="productAttribute">Escolha a variação</label> <br />
									<select name="productAttribute" id="productAttribute" class="form-control select2">
										@foreach($productAttributes as $productAttribute)
										<option value="{{ $productAttribute->id }}">
											@foreach($productAttribute->attributesValues as $value)
											{{ $value->attribute->name }} : {{ ucwords($value->value) }}
											@endforeach
											@if(!is_null($productAttribute->price))
											( {{ config('cart.currency_symbol') }} {{ $productAttribute->price }})
											@endif
										</option>
										@endforeach
									</select>
								</div>
								@endif
								<hr>
								@if($product->quantity > 0)
									<input type="number"
										class="form-control col-sm-3 text-rigth"
										name="quantity"
										id="quantity"
										placeholder="Quantidade"
										value="{{ old('quantity', 1) }}"
										min="1"
										step="1"
										max="{{$product->quantity}}"
									/>
										<input type="hidden" name="product" value="{{ $product->id }}" />

											<button type="submit" class="btn btn-danger"><i class="fa fa-cart-plus"></i> Comprar</button>
										@else
											<button type="button" class="btn btn-opera btn-rounded btn-md btn-block" disabled>Indisponível</button>
										@endif
									</form>
								</p>

							</div>

						</div>
						<!--/.Card-->
						<!-- Modal Light Box -->
						<div id="lightbox" class="modal fade pt-5" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-body">
										<img src="" alt="" />
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- Column -->

				</div>
				<!-- Container -->
			</div>
			<div class="col-md-12">
				@include('front.products.product-slide')
			</div>
		</div>
		@section('js')
		<script type="text/javascript">
			$(document).ready(function () {
				var $lightbox = $('#lightbox')
				/**/
				$('[data-target="#lightbox"]').on('click', function(event) {
					var $img = $(this).find('img'),
					src = $img.attr('src'),
					alt = $img.attr('alt'),
					css = {
						'max-width': 600,
						'max-height': 600
					};

					$lightbox.find('.close').addClass('hidden')
					$lightbox.find('img').attr('src', src)
					$lightbox.find('img').attr('alt', alt)
					$lightbox.find('img').css(css)
					$lightbox.find('.modal-dialog').attr('style','max-width: 650px; max-height: 650px; width: 650px; height: 650px;')
					$lightbox.find('.modal-content').attr('style','max-width: 650px; max-height: 650px; width: 650px; height: 650px;')
					$lightbox.find('.modal-body').attr('style','max-width: 650px; max-height: 650px; width: 650px; height: 650px;')
				});

				$lightbox.on('shown.bs.modal', function (e) {
					var $img = $lightbox.find('img');

					$lightbox.find('.modal-dialog').css({'width': $img.width()});
					$lightbox.find('.close').removeClass('hidden');
				});
				/**/
				var productPane = document.querySelector('.product-cover');
				var paneContainer = document.querySelector('.product-cover-wrap');

				new Drift(productPane, {
					paneContainer: paneContainer,
					inlinePane: false
				});

				$('#myCarousel').carousel({
					interval: 5000
				});

				$('#carousel-text').html($('#slide-content-0').html());

				//Handles the carousel thumbnails
				$('[id^=carousel-selector-]').click( function(){
					var id_selector = $(this).attr("id");
					var id = id_selector.substr(id_selector.length-1);
					var id = parseInt(id);
					$('#myCarousel').carousel(id);
				});

				$('#quantity').on('change', function() {
					if($(this).val() > $(this).attr('max')) {
						$(this).val($(this).attr('max'))
					}
				})

				// When the carousel slides, auto update the text
				$('#myCarousel').on('slid', function (e) {
					var id = $('.item.active').data('slide-number');
					$('#carousel-text').html($('#slide-content-'+id).html());
				});

				$('.adicionaAssociado').on('click', function(){
					let product = $(this).data('produto')
					$.ajax({
						type: "GET",
						url: 'cart-add',
						data: {product : product, quantity: 1, associa: true},
						dataType: "json",
						success: function (msg) {
							if (msg) {
								let cartQdte = $('.cart-number').html()
								$('.cart-number').html(parseInt(cartQdte) + 1)
								$('#modalProduto .modal-body').html('Item adicionado ao carrinho!')
								$('#modalProduto .modal-footer').html('<a href="cart" class="btn btn-success">Ver Carrinho</a> <button type="button" class="btn btn-primary" data-dismiss="modal"> Fechar</button>')
								$('#modalProduto').modal('show');
							}
						},
					});
				})
			});
		</script>
		@endsection