<%@ tag pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ attribute name="returnProducts" required="true" type="java.util.List"%>
<%@ taglib prefix="details" tagdir="/WEB-INF/tags/desktop/showcaseproductdetail" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="product" tagdir="/WEB-INF/tags/desktop/product" %>
<%@ taglib prefix="formElement"	tagdir="/WEB-INF/tags/desktop/formElement"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="exchangeAndReturn" tagdir="/WEB-INF/tags/desktop/exchangeandreturn"%>


<section class="bordered-box exchange-and-return" id="devolution-process">

	<h3>Produtos que serão devolvidos</h3>

	<div class="row">

		<div class="col-6">
			<c:forEach items="${returnProducts}" var="returnEntry">
				<c:set var="originalProduct" value="${returnEntry.originalProduct}"/>
				<div class="exchange-row">
					<div class="exchange-arrow">
						<section class="exchange-item">
							<h4>${originalProduct.name}</h4>
							<exchangeAndReturn:image images="${originalProduct.previewImages}" format="store"/>
							<ul class="badge-list">
								<c:set  value="false" var="colorIsUsed"/>
								<c:forEach items="${originalProduct.baseOptions}" var="option">
									<c:forEach items="${option.selected.variantOptionQualifiers}" var="selectedOption">
										<c:if test="${selectedOption.name == 'Tamanho'}">
											<li>
													${selectedOption.name}: ${selectedOption.value}
											</li>
										</c:if>
										<c:if test="${selectedOption.name == 'Cor' && colorIsUsed == false}">
											<c:set value="true" var="colorIsUsed"/>
											<li>
													${selectedOption.name}:	${selectedOption.value}
											</li>
										</c:if>
									</c:forEach>
								</c:forEach>
								<li class="cor">
									Quantidade:	${returnEntry.quantity}
								</li>
							</ul>
						</section>
					</div>
				</div>
			</c:forEach>
		</div>

		<div class="col-6">
			<h4>Como desejo receber?</h4>
			<br />
			<c:if test="${fn:contains(devolutionOptions,'voucher')}">
				<p>
					<label>
						<input type="radio" name="devolutionProcessSelect" value="voucher"/>
						Desejo receber um voucher no valor dos produtos para usar em uma nova compra.
					</label>
				</p>
			</c:if>
			<c:if test="${fn:contains(devolutionOptions,'receiveCash')}">
				<p>
					<label>
						<input type="radio" name="devolutionProcessSelect" value="receiveCash"/>
						Desejo receber o valor total dos produtos em minha conta.
					</label>
				</p>
			</c:if>
			<c:if test="${fn:contains(devolutionOptions,'reverseCard')}">
				<p>
					<label>
						<input type="radio" name="devolutionProcessSelect" value="reverseCard"/>
						Desejo o extorno da compra em meu cartão.
					</label>
				</p>
			</c:if>
		</div>

	</div>
</section>

	<section class="bordered-box exchange-and-return hidden-xs-up" id="cash-return-form">

	<h3>Dados bancários</h3>

	<div class="row">
		<div class="col-12">
			<div class="form-group">
				<p>Somente números para os campos CPF/CPNJ, agência e conta corrente</p>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-12">
			<div class="form-group">
				<label><spring:theme code="exchangeAndReturnDevolutionProcessForm.bank"/></label>
				<form:input id="exchangeAndReturnDevolutionProcessForm.bank" path="bank" cssClass="form-control"/>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-12">
			<div class="form-group">
				<label><spring:theme code="exchangeAndReturnDevolutionProcessForm.name"/></label>
				<form:input id="exchangeAndReturnDevolutionProcessForm.name" path="name" cssClass="form-control"/>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-12">
			<div class="form-group">
				<label><spring:theme code="exchangeAndReturnDevolutionProcessForm.cpf"/></label>
				<form:input id="exchangeAndReturnDevolutionProcessForm.cpf" path="cpf" cssClass="form-control"/>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-md-6">
			<div class="form-group">
				<label><spring:theme code="exchangeAndReturnDevolutionProcessForm.agency"/></label>
				<form:input id="exchangeAndReturnDevolutionProcessForm.agency" path="agency" cssClass="form-control"/>
			</div>
		</div>
		<div class="col-md-6">
			<div class="form-group">
				<label><spring:theme code="exchangeAndReturnDevolutionProcessForm.agency"/></label>
				<form:input id="exchangeAndReturnDevolutionProcessForm.agency" path="checkingAccount" cssClass="form-control"/>
			</div>
		</div>
	</div>

</section>