{% extends '../_layouts/_main.twig' %}
{% block content %}
	<div class="section-profile">
		<div class="section-profile-row">
			<div class="section-profile-side">

				<div class="res-list-group">
					<div class="res-list-group__head">
						<button class="btn btn-block btn-default">
							<span class="js-val">
								<span class="icobox size_24">
									<svg class="ico"><use xlink:href="/images/svg/main-sprite.svg#i-nothing"></use></svg>
									<span class="pl-4">Заявки на возврат</span>
								</span>
							</span>
							<i class="fa fa-caret-down"></i>
						</button>
					</div>
					<div class="res-list-group__body">
						<ul>
							<li>
								<a href="#" class="res-list-group__item">
									<span class="icobox size_16">
										<svg class="ico"><use xlink:href="/images/svg/main-sprite.svg#order-2"></use></svg>
										<span class="pl-4">Мои заказы (1536)</span>
									</span>
								</a>
							</li>
							<li>
								<a href="#" class="res-list-group__item">
									<span class="icobox size_16">
										<svg class="ico"><use xlink:href="/images/svg/main-sprite.svg#user-2"></use></svg>
										<span class="pl-4">Мои данные</span>
									</span>
								</a>
								<ul class="submenu">
									<li>
										<a href="#" class="res-list-group__item">
											<span class="icobox size_16">
												<span class="pl-4">Персональные данные</span>
											</span>
										</a>
									</li>
									<li>
										<a href="#" class="res-list-group__item">
											<span class="icobox size_16">
												<span class="pl-4">Данные фирмы</span>
											</span>
										</a>
									</li>
									<li>
										<a href="#" class="res-list-group__item">
											<span class="icobox size_16">
												<span class="pl-4">Контактные данные</span>
											</span>
										</a>
									</li>
									<li>
										<a href="#" class="res-list-group__item">
											<span class="icobox size_16">
												<span class="pl-4">Адреса доставки</span>
											</span>
										</a>
									</li>
									<li>
										<a href="#" class="res-list-group__item">
											<span class="icobox size_16">
												<span class="pl-4">Банковские данные</span>
											</span>
										</a>
									</li>
									<li>
										<a href="#" class="res-list-group__item">
											<span class="icobox size_16">
												<span class="pl-4">Прочие данные</span>
											</span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#" class="res-list-group__item">
									<span class="icobox size_16">
										<svg class="ico"><use xlink:href="/images/svg/main-sprite.svg#mapmarker-track"></use></svg>
										<span class="pl-4">Отследить заказ (2)</span>
									</span>
								</a>
							</li>
							<li class="current">
								<a href="#" class="res-list-group__item">
									<span class="icobox size_16">
										<svg class="ico"><use xlink:href="/images/svg/main-sprite.svg#i-nothing"></use></svg>
										<span class="pl-4">Заявки на возврат</span>
									</span>
								</a>
							</li>
						</ul>
					</div>
				</div><!--res-list-group-->

			</div><!--side-->
			<div class="section-profile-content">

				<h3>Заявки на возврат</h3>

				<div class="mb-24">
					Здесь Вы можете увидеть все оформленные заявки на возврат.
					<br />Всего необработанных заявок: 4
				</div>

				<div class="scroller-x">
					{% set statuses = {
						0 : {
							"label" : "Необработана",
							"style" : "color-gray"
						},
						1 : {
							"label" : "На экспертизе",
							"style" : "color-violet-dark"
						},
						2 : {
							"label" : "Одобрена",
							"style" : "color-green-light"
						},
						3 : {
							"label" : "Отклонена",
							"style" : "color-red"
						}
					} %}
					{% set returnRequests = [
						{
							"id" : "0000001",
							"orderId" : "3104923",
							"date" : "14.04.2020",
							"status" : 1,
							"products" : [{
								"label" : "Воздушный фильтр",
								"reason" : "После установки выявлен изъян"
							}],
						},{
							"id" : "0000002",
							"orderId" : "8794323",
							"date" : "14.04.2020",
							"status" : 0,
							"products" : [{
								"label" : "Крышка, заливная горловина",
								"reason" : "Возврат 14 дней"
							},{
								"label" : "Шланг, воздухоотвод крышки коллектора",
								"reason" : "Сломанный товар"
							}],
						},{
							"id" : "0000003",
							"orderId" : "5906435",
							"date" : "14.04.2020",
							"status" : 3,
							"products" : [{
								"label" : "Пылезащитный комплект, амортизатора",
								"reason" : "Не тот товар / не подошел"
							}],
						},{
							"id" : "0000004",
							"orderId" : "54643232",
							"date" : "14.04.2020",
							"status" : 2,
							"products" : [{
								"label" : "Шланг, воздухоотвод крышки коллектора",
								"reason" : "Сломанный товар"
							}],
						},{
							"id" : "0000005",
							"orderId" : "43511223",
							"date" : "14.04.2020",
							"status" : 1,
							"products" : [{
								"label" : "Пылезащитный комплект, амортизатора",
								"reason" : "Не тот товар / не подошел"
							},{
								"label" : "Шланг, воздухоотвод крышки коллектора",
								"reason" : "Возврат 14 дней"
							}],
						}
					] %}
					<table class="table table-sm table-orders">
						<thead>
						<tr>
							<th>Заявка</th>
							<th>Заказ</th>
							{#<th class="text-right text-nowrap">Дата заявки</th>#}
							<th class="text-nowrap">Товары в заявке</th>
							<th>Статус</th>
							<th style="width: 1px;">&nbsp;</th>
						</tr>
						</thead>
						<tbody>
						{% for tr in returnRequests %}
							<tr>
								<td>
									<strong>{{ tr.id }}</strong>
									<div class="color-gray-40">{{ tr.date }}</div>
								</td>
								<td><a href="03.createRequest.html">{{ tr.orderId }}</a></td>
								{#<td class="text-right">{{ tr.date }}</td>#}
								<td>
									<ul class="list-unstyled list-unstyled-4">
									{% for product in tr.products %}
										<li>
											<div class="color-blue">{{ product.label }}</div>
											<i class="fs-12 color-gray-50">{{ product.reason }}</i>
										</li>
									{% endfor %}
									</ul>
								</td>
								<td>
									<div class="text-nowrap">
										<i class="fa fa-circle mr-6 {{ statuses[tr.status].style }}"></i>
										{{ statuses[tr.status].label }}
									</div>
								</td>
								<td>
									<div class="text-nowrap">
										<a href="04.fillRequest.html" class="btn btn-sm btn-primary" title="Смотреть"><i class="fa fa-eye"></i></a>
										<a href="#" class="btn btn-sm btn-danger" title="Удалить" onclick="return confirm('Внимание! Вы уверены что хотите удалить заявку? Восстановить заявку будет невозможно')"><i class="fa fa-trash"></i></a>
									</div>
								</td>
							</tr>
						{% endfor %}
						</tbody>
					</table>
				</div>

				<div class="mb-32"></div>

				<div class="nav-pager">
					<ul class="navs">
						<li class="move"><a href="#"><i class="fa fa-angle-double-left"></i> Назад</a></li>
						<li><a href="#">1</a></li>
						<li><a href="#">2</a></li>
						<li><span>...</span></li>
						<li><a href="#">14</a></li>
						<li><a href="#">15</a></li>
						<li class="current"><a href="#">16</a></li>
						<li><a href="#">17</a></li>
						<li><a href="#">18</a></li>
						<li><span>...</span></li>
						<li><a href="#">29</a></li>
						<li><a href="#">30</a></li>
						<li class="move"><a href="#">Вперёд <i class="fa fa-angle-double-right"></i></a></li>
					</ul>
					<div class="pagers">
						Показать на странице:
						<div class="dropup">
							<a href="#" data-toggle="dropdown" id="dropdownMenu1">20 <i class="fa fa-angle-down"></i></a>
							<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
								<li><a href="#">20</a></li>
								<li><a href="#">50</a></li>
								<li><a href="#">100</a></li>
							</ul>
						</div>
					</div>
				</div>

			</div><!--content-->
			<div class="clearfix"></div>
		</div><!--row-->
	</div><!--.section-profile-->

	<div class="content-separator clearfix"></div>
{% endblock %}