{{ header }}
<section class="container-fluid" id="return-form-info" data-info="{{ error_warning }}" data-order-id="{{ order_id }}" data-product-id="{{ product_id }}">
	{% if content_top %}
		{{ content_top }}
	{% endif %}
	{{breadcrumbs}}

	<div class="row">
		<div class="col-md-3 hidden-md-down">
			<div class="content-box js-fixed-on-top">
				{{ account }}
			</div>
		</div>
		<div class="col-xs">
			<div class="content-box">
				<div class="flex middle-xs">
					<a href="{{ back }}" class="padding-small text-x-large text-dark js-back-to-search">
						<i class="fas fa-angle-left" aria-hidden="true"></i>
					</a>
					<span class="heading-1">{{ text_new_devolution }}</span>
				</div>
				<form action="{{ action }}" method="post" enctype="multipart/form-data">
					<div class="top-margin-medium">
						<div class="js-container-search">
							<label class="field field-medium right-margin-small js-return-search" data-search="{{ url_search_order }}" style="max-width:480px;">
								<span class="field-label">{{ entry_order_id }}</span>
								<div class="field-entry-group">
									<div class="flex-grow-1">
										<input class="field-entry mask-int js-return-search-input {{ (error_order_id) ? 'border-error' : '' }}" id="order_id" type="text" name="order_id" value="{{ order_id }}" placeholder="{{ entry_order_id_placeholder }}" maxlength="96">
									</div>
									<div>
										<button type="button" class="btn-default btn-medium btn-medium-square js-return-search-button">
											<i class="fas fa-search"></i>
										</button>
									</div>
								</div>
								<div class="hidden js-order-not-found">
									<span class="text-error text-small text-left top-margin-x-small visible-block">
										{{ error_order_not_found }}
									</span>
								</div>
								<div class="hidden js-order-canceled">
									<span class="text-error text-small text-left top-margin-x-small visible-block">
										{{ error_order_canceled }}
									</span>
								</div>
							</label>
							{% if last_orders is defined and last_orders %}
								<div class="top-margin-medium">
									{% for order in last_orders %}
										<div class="paper padding-large top-margin-medium">
											<div class="row">
												<div class="col-xs-12 col-md-6">
													<div class="content-box flex">
														<div class="right-margin-small">
															{% for image in order.images %}
																<picture>
																	<source class="load-image" srcset="" data-src="{{ image.webp }}">
																	<img class="load-image" src="" data-src="{{ image.jpg }}" alt="{{ image.name }}">
																</picture>
															{% endfor %}
														</div>
														{% if order.products_count > 0 %}
															<div class="rel" style="width:80px;height:80px;">
																<span class="text-medium text-dark text-bold center-middle-absolute">+{{ order.products_count }}</span>
															</div>
														{% endif %}
													</div>
												</div>
												<div class="col-xs-12 col-md-6">
													<div class="content-box flex flex-row between-xs">
														<div>
															<span class="visible-block text-small text-gray bottom-margin-x-small">Pedido</span>
															<span class="visible-block text-medium text-dark text-bold">{{ order.order_id }}</span>
														</div>
														<div>
															<button type="button" class="btn-default btn-medium js-button-return-order" data-return-order-id="{{ order.order_id }}">
																<span>{{ text_button_return }}</span>
															</button>
														</div>
													</div>
												</div>
											</div>
										</div>
									{% endfor %}
								</div>
							{% endif %}
						</div>

						<div class="hidden js-container-return">
							<hr class="bottom-border-gray top-margin-x-large">
							<div class="js-container-products"></div>
							{{ (error_product_not_selected) ? '<span class="text-error text-small text-left vertical-margin-x-small visible-block">' ~ error_product_not_selected ~ '</span>' : '' }}
							{{ (error_quantity) ? '<span class="text-error text-small text-left vertical-margin-x-small visible-block">' ~ error_quantity ~ '</span>' : '' }}

							<span class="visible-block text-medium text-dark top-margin-large bottom-margin-small">{{ entry_opened }}</span>
							<label class="radio radio-medium radio-inline">
								<input class="radio-entry" type="radio" name="opened" value="1" {{ (opened) ? 'checked' : '' }}>
								<span class="radio-text">{{ text_yes }}</span>
							</label>
							<label class="radio radio-medium radio-inline">
								<input class="radio-entry" type="radio" name="opened" value="0" {{ (opened) ? '' : 'checked' }}>
								<span class="radio-text">{{ text_no }}</span>
							</label>

							<span class="visible-block text-medium text-dark top-margin-large bottom-margin-small">{{ entry_reason }}</span>
							{{ (error_reason) ? '<span class="text-error text-small text-left vertical-margin-x-small visible-block">' ~ error_reason ~ '</span>' : '' }}
							{% for return_reason in return_reasons %}
								<label class="radio radio-small">
									<input class="radio-entry" type="radio" name="return_reason_id" value="{{ return_reason.return_reason_id }}" {{ (return_reason_id == return_reason.return_reason_id) ? 'checked' : '' }}>
									<span class="radio-text">{{ return_reason.name }}</span>
								</label>
							{% endfor %}

							<label class="field field-medium top-margin-medium" style="max-width:480px;">
								<span class="field-label">{{ entry_fault_detail }}</span>
								<textarea class="field-entry" id="comment" type="text" name="comment" value="{{ comment }}" placeholder="{{ entry_fault_detail_placeholder }}" rows="6">{{ comment }}</textarea>
							</label>

							{% if google_captcha %}
								<div class="top-margin-medium">
									<div class="g-recaptcha" data-sitekey="{{ site_key }}"></div>
									{{ (error_google_captcha) ? '<span class="mdl-textfield__error">' ~ error_google_captcha ~ '</span>' : '' }}
								</div>
							{% else %}
								<label class="field field-medium top-margin-medium" style="max-width:480px;">
									<span class="field-label">
										<span class="required">*</span>
										{{ entry_captcha }}
									</span>
									<img src="index.php?route=account/return/captcha" alt=""/>
									<input class="field-entry {{ (error_captcha) ? 'border-error' : '' }}" id="captcha" type="text" name="captcha" value="{{ captcha }}" placeholder="{{ entry_captcha_placeholder }}" maxlength="96">
									{{ (error_captcha) ? '<span class="text-error text-small text-left top-margin-x-small visible-block">' ~ error_captcha ~ '</span>' : '' }}
								</label>
							{% endif %}

							{% if text_agree %}
								<label class="checkbox checkbox-medium top-margin-medium">
									<input class="checkbox-entry" type="checkbox" name="agree" value="1" {{ agree ? 'checked' : '' }}/>
									<span class="checkbox-text">{{ text_agree }}</span>
								</label>
							{% endif %}

							<div class="top-margin-x-large">
								<button type="submit" class="btn-default btn-large">
									<span>Enviar devolução</span>
								</button>
							</div>

						</div>
					</div>
				</form>
			</div>
		</div>
		{% if column_right %}
			<div class="col-md-3 hidden-md-down">
				{{ column_right }}
			</div>
		{% endif %}
	</div>

	{% if content_bottom %}
		{{ content_bottom }}
	{% endif %}
</section>
{{ footer }}


<script type="text/javascript">
	window.waitEvent('scripts_document', function () {
language.add({{ languageForJS|json_encode() }});
});
</script>
