<div id="{{ Widget.Id }}" class="wd-product-additionals {{ Widget.WidgetClass }}{% if Widget.jshandler %} wd-widget-js{%endif%}" {% if Widget.jshandler %}data-widget-js='{ "handler": "{{ Widget.jshandler }}", "options": {{ Widget.jsoptions | json }} }'{%endif%}>
	<div class="container">
		<form action="{{ Urls.Shopping.Basket.AddProductWithServices }}" onsubmit="return false;" method="post">
			<input type="hidden" id="add-product-hash" name="AddProductToBasketRequestHash" value="">
            <input type="hidden" id="base-url" name="BaseUrl" value="{{ Urls.BaseUrl }}">
			
			<div class="breadcrumbs">
				{% comment %}
				{% browsing_breadcrumbs %}
				{% endcomment %}
				<h1>Agora que você já escolheu seu produto, saiba como protegê-lo por mais tempo.</h1>
				<span>A contratação de seguros é opcional</span>
			</div>
			
			<div class="col">
				{% product_line_medias(LazyLoad=true, SizeType="Small") with Product:ProductDetail %}
				<div class="media-body">
					<span>Nome do Produto:</span>
					<p class="product-title">{{ Model.SkuName }}</p>
					<p class="product-price">{{ Model.SkuPriceDescription | allowhtml }}</p>
				</div>
			</div>
			
			<div class="col">
			{% for productAdditional in ProductAdditionals %}
			{% assign productAddIdx = forloop.index0 %}
			<input type="hidden" name="Services[{{productAddIdx}}].ProductAdditionalID" value="{{ productAdditional.ProductAdditionalID }}">
			<div class="service-offer">
				<div class="service-wrapper">
					<div class="variations-wrapper" data-required="{{ productAdditional.IsRequired }}">
						{% for listItem in productAdditional.ProductAdditionalLists %}
							<div data-featured="{{ listItem.IsFeatured }}">
								<div class="form-check">
									<label>
										<input class="form-check-input" name="Services[{{productAddIdx}}].ProductAdditionalListID" type="radio" value="{{ listItem.ProductAdditionalListID }}">
										{{ listItem.Name }}
										<span class="variation-price">{{ listItem.Price | formatcurrency }}</span>
										
										
										{% comment %}
										<span>
										{% if listItem.IsFeatured %}
										<span>Recomendado</span>
										{% endif %}
										</span>
										{% endcomment %}
									</label>
									<div class="box" style="display:none;">
										teste
									</div>
								</div>
							</div>
						{% endfor %}
						
						{% unless productAdditional.IsRequired %}
						<div>
							<label class="form-check-label">
								<input class="form-check-input" value="0" name="Services[{{productAddIdx}}].ProductAdditionalListID" type="radio">
								Sem garantia estendida
							</label>
						</div>
						{% endunless %}
					</div>
				</div>
				<div class="service-description-text" style="display:none;">
					<div class="wd-header">
						<span class="wd-icon"></span>
						<div class="wd-title">{{ productAdditional.Name }}</div>
					</div>
					<div class="wd-content"> 
						{{ productAdditional.Description | allowhtml }}
						<br>
						{{ productAdditional.AcceptanceTerm.Text | allowhtml }}
					</div>
				</div>
			</div>
			{% endfor %}
			</div>
			
			<div class="col">
			</div>
			
			<hr>
			
			<div id="botao-continuar">
    			<button class="btn-primary" type="button">Continuar para o carrinho</button>
			</div>
		</form>
	</div>
</div>

<script>
	$('input[type=radio]').click(function() {
  		$(".box").toggle();
	});
</script>