@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 ml-2">
	<div class="card-body">
		<!-- Container -->
		<div class="row">

			<!-- Column -->
			<div class="col-md-7 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
						@if(isset($product->cover))
						<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="#">
							<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-5 mb-4">

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

					<!--Card content-->
					<div class="card-body">
						<!--Title-->
						<span class="card-title text-primary h2 text-oswald">{{ $product->name }}</span>
						<hr>
						<span class="card-title text-primary text-oswald">SKU: <span class="badge badge-primary">{{ $product->sku }}</span> @if($product->reference) Referência: <span class="badge badge-primary">{{ $product->reference }}</span>@endif</span>
						<hr>
						<!--Text-->
						<p class="card-text">
							{!! $product->description !!}
							<hr>
							<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>
							<hr>
							{{-- @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">
									<ul class="list-group">
										@foreach($productAttributes as $productAttribute)
										@foreach($productAttribute->attributesValues as $value)
										@if($value->attribute->name === 'Cor')
										<li class="list-group-item">
											<input type="radio" name="productAttribute" class="custom-control-input" id="attribute-{{$productAttribute->id}}" value="{{$productAttribute->id}}" data-quantity="{{$productAttribute->quantity}}" required >
											<label class="custom-control-label pl-3" for="attribute-{{$productAttribute->id}}">
												<img src="/storage/{!! $productAttribute->cover_attribute !!}" alt="thumbnail" class="rounded float-left img-thumbnail" style="width: 80px">
												{{ ucwords($value->value) }}
											</label>
										</li>
										@endif
										@endforeach
										@endforeach
									</ul>
								</div><hr>
								@endif
								<input type="number"
								class="form-control col-sm-3 text-rigth"
								name="quantity"
								id="quantity"
								placeholder="1"
								value="{{ old('quantity', 1) }}" value="1" min="1" step="1" max="{{ intval($product->quantity) }}" aria-label="Adicionar ao carrinho" @if($product->quantity === '0') readonly @endif  />
								<input type="hidden" name="product" value="{{ $product->id }}" />
								<button type="submit" class="btn @if($product->quantity > 0) btn-primary @else disabled btn-warning @endif"><i class="fa fa-cart-plus"></i> @if($product->quantity > 0) Comprar @else Indisponível @endif
								</button>
							</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>
@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);
		});


		// 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