{% extends '../_layouts/_main.twig' %}
{% block content %}
	<div class="panel panel-tabs">
		<ul class="nav nav-tabs nav-tabs_b">
			<li class="active">
				<span>Необработанные заявки по VIN (54)</span>
			</li>
			<li>
				<a href="processed.html">Обработанные</a>
			</li>
		</ul>
		<div class="panel-body">

			<div class="cp-vinRequest">
				<div class="flex-row row-16 cp-vinRequest-filter">
					{#<div class="filter__search">
						<form class="form-group">
							<div class="form-field">
								<input class="form-control" type="text" value="" />
							</div>
							<div class="form-btn">
								<button class="btn btn-primary" type="submit">Найти</button>
							</div>
						</form>
					</div>#}
					<div class="flex-col-auto">
						<div class="filter__duration">
							<div class="form-group">
								<div class="form-label">Период получения заявки</div>
								<div class="form-field-line">
									<div class="form-field">
										<div class="form-field__icon js-datepicker-ico"><i class="fa fa-calendar fs-16 color-gray"></i></div>
										<input class="form-control datepicker" type="text" value="" data-datepicker-options="singleDatePicker: true; format: D.MM.Y;" />
									</div>
									<div class="form-field-separate">&mdash;</div>
									<div class="form-field">
										<div class="form-field__icon js-datepicker-ico"><i class="fa fa-calendar fs-16 color-gray"></i></div>
										<input class="form-control datepicker" type="text" value="" data-datepicker-options="singleDatePicker: true; format: D.MM.Y;" />
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="flex-col-auto ml-auto"></div>
					{#<div class="flex-col-auto">
						<div class="filter__column">
							<div class="form-group">
								<div class="form-label">Показать колонки</div>
								<div class="form-field">
									<select class="form-control selectpicker" data-container="body" multiple title="Выберите...">
										<option selected>Создан</option>
										<option selected>Клиент</option>
										<option>Цена</option>
										<option selected>Страна</option>
										<option>Запчасти</option>
										<option>Статус</option>
									</select>
								</div>
							</div>
						</div>
					</div>#}
					<div class="flex-col-auto">
						<div class="form-group min-w-275">
							<div class="form-label">Сортировать по</div>
							<div class="form-field">
								<select class="form-control selectpicker" data-container="body">
									<option selected>Отправка заказа ↓</option>
									<option>Отправка заказа ↑</option>
									<option>Заявка обработана ↓</option>
									<option>Заявка обработана ↑</option>
								</select>
							</div>
						</div>
					</div>
				</div>
				<div class="cp-vinRequest-table">
					<table class="table-requests">
						<thead>
						<tr>
							<th>Отправка заказа</th>
							<th>Заявка в ожидании</th>
							<th>Заказ, Клиент</th>
							<th class="text-right text-nowrap">Цена, eur</th>
							<th>Страна</th>
							<th>Запчасти</th>
							<th><span title="Ждём ответа Клиента"><svg width="20" height="20" viewBox="0 0 19 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 0C8.04 0 9.6 1.51667 9.6 3.5C9.6 5.48333 8.04 7 6 7C3.96 7 2.4 5.48333 2.4 3.5C2.4 1.51667 3.96 0 6 0ZM6 14C3.5 14 1.3 12.7963 0 11.037C0 9.18518 4 7.95 6 7.95C8 7.95 12 9.18518 12 11.037C10.7 12.7963 8.5 14 6 14Z" fill="currentColor" /><path d="M13 2.44922H14.5879C14.623 1.78711 15.0684 1.35938 15.7422 1.35938C16.4102 1.35938 16.8555 1.76367 16.8555 2.32031C16.8555 2.87695 16.627 3.16406 15.8711 3.61523C15.0625 4.08984 14.7402 4.61719 14.8164 5.53711L14.8281 5.87695H16.3809V5.56641C16.3809 4.99219 16.5977 4.70508 17.377 4.25391C18.2031 3.76758 18.6309 3.15234 18.6309 2.26758C18.6309 0.931641 17.5234 0 15.8477 0C14.0488 0 13.0293 1.00781 13 2.44922ZM15.625 8.67773C16.1582 8.67773 16.5859 8.27344 16.5859 7.75781C16.5859 7.24219 16.1582 6.83789 15.625 6.83789C15.0977 6.83789 14.6699 7.24219 14.6699 7.75781C14.6699 8.27344 15.0977 8.67773 15.625 8.67773Z" fill="currentColor" /></svg></span></th>
							<th>Обработать заказ</th>
						</tr>
						</thead>
						{% set requestList = [{
							'id'            : 1,
							'order'         : '33267904',
							'client'        : 'MONOTEX',
							'price'         : '24.59',
							'country'       : {
								'iso'       : 'ee',
								'label'     : 'Estonia'
							},
							'spareParts'    : 'Защитная плёнка; Рамка номерного знака',
							'status'        : 1,
							'params' : {}
						},{
							'id'            : 2,
							'order'         : '33267905',
							'client'        : '358445251117',
							'price'         : '112.35',
							'country'       : {
								'iso'       : 'fi',
								'label'     : 'Finland'
							},
							'spareParts'    : 'Крыло TONG YANG; Крыло; Амортизатор капота/багажника EU',
							'status'        : 0,
							'params' : {
								'hasError' : true
							}
						},{
							'id'            : 3,
							'order'         : '34590348',
							'client'        : 'Marek Ots',
							'price'         : '24.59',
							'country'       : {
								'iso'       : 'ee',
								'label'     : 'Estonia'
							},
							'spareParts'    : 'Датчик, частота вращения колеса TRISCAN 8180 11252; Генератор LUCAS ELECTRICAL LRA03683',
							'status'        : 1,
							'params' : {}
						},{
							'id'            : 4,
							'order'         : '52511173',
							'client'        : 'PAINT SYSTEM ÕU',
							'price'         : '112.35',
							'country'       : {
								'iso'       : 'fi',
								'label'     : 'Finland'
							},
							'spareParts'    : 'Крыло TONG YANG; Крыло; Амортизатор капота/багажника EU 	',
							'status'        : 0,
							'params' : {}
						},{
							'id'            : 5,
							'order'         : '79043326',
							'client'        : 'RAUNO',
							'price'         : '24.59',
							'country'       : {
								'iso'       : 'ee',
								'label'     : 'Estonia'
							},
							'spareParts'    : 'Защитная плёнка; Рамка номерного знака',
							'status'        : 1,
							'params' : {}
						},{
							'id'            : 6,
							'order'         : '26332679',
							'client'        : 'Lazar',
							'price'         : '112.35',
							'country'       : {
								'iso'       : 'fi',
								'label'     : 'Finland'
							},
							'spareParts'    : 'Защитная плёнка; Рамка номерного знака',
							'status'        : 0,
							'params' : {}
						},{
							'id'            : 7,
							'order'         : '33267904',
							'client'        : 'MONOTEX',
							'price'         : '24.59',
							'country'       : {
								'iso'       : 'ee',
								'label'     : 'Estonia'
							},
							'spareParts'    : 'Крыло TONG YANG; Крыло; Амортизатор капота/багажника EU',
							'status'        : 1,
							'params' : {}
						},{
							'id'            : 8,
							'order'         : '33267905',
							'client'        : '358445251117',
							'price'         : '112.35',
							'country'       : {
								'iso'       : 'fi',
								'label'     : 'Finland'
							},
							'spareParts'    : 'Датчик, частота вращения колеса TRISCAN 8180 11252; Генератор LUCAS ELECTRICAL LRA03683',
							'status'        : 0,
							'params' : {}
						},{
							'id'            : 9,
							'order'         : '33267904',
							'client'        : 'MONOTEX',
							'price'         : '24.59',
							'country'       : {
								'iso'       : 'ee',
								'label'     : 'Estonia'
							},
							'spareParts'    : 'Крыло TONG YANG; Крыло; Амортизатор капота/багажника EU 	',
							'status'        : 1,
							'params' : {}
						},{
							'id'            : 10,
							'order'         : '33267905',
							'client'        : '358445251117',
							'price'         : '112.35',
							'country'       : {
								'iso'       : 'fi',
								'label'     : 'Finland'
							},
							'spareParts'    : 'Крыло TONG YANG; Крыло; Амортизатор капота/багажника EU 	',
							'status'        : 0,
							'params' : {}
						}] %}
						{% for item in requestList %}
						<tbody class="--modifiable --modifiable_fix{% if loop.index == 2 %} in{% endif %}">
							<tr>
								<td>
									<div class="text-nowrap">
										<div class="color-danger">-4d 18h 18m</div>
										<div class="color-gray">13.04.21 13:44</div>
									</div>
								</td>
								<td>
									<div class="text-nowrap">
										30d 18h 18m
										<div class="color-gray">13.04.21 13:44</div>
									</div>
								</td>
								<td><a href="#">{{ item.order }}</a>, {{ item.client }}</td>
								<td class="text-right">{{ item.price }}</td>
								<td>
									<span class="icobox size_16 pl-24">
										<i class="ico"><img class="center flag-shadow" src="/images/flag/{{ item.country.iso }}.png" alt="" /></i>
										{{ item.country.label }}
									</span>
								</td>
								<td>{{ item.spareParts }}</td>
								<td>
									{% if item.status %}
									<span title="Ждём ответа Клиента"><svg class="color-danger" width="20" height="20" viewBox="0 0 19 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 0C8.04 0 9.6 1.51667 9.6 3.5C9.6 5.48333 8.04 7 6 7C3.96 7 2.4 5.48333 2.4 3.5C2.4 1.51667 3.96 0 6 0ZM6 14C3.5 14 1.3 12.7963 0 11.037C0 9.18518 4 7.95 6 7.95C8 7.95 12 9.18518 12 11.037C10.7 12.7963 8.5 14 6 14Z" fill="currentColor" /><path d="M13 2.44922H14.5879C14.623 1.78711 15.0684 1.35938 15.7422 1.35938C16.4102 1.35938 16.8555 1.76367 16.8555 2.32031C16.8555 2.87695 16.627 3.16406 15.8711 3.61523C15.0625 4.08984 14.7402 4.61719 14.8164 5.53711L14.8281 5.87695H16.3809V5.56641C16.3809 4.99219 16.5977 4.70508 17.377 4.25391C18.2031 3.76758 18.6309 3.15234 18.6309 2.26758C18.6309 0.931641 17.5234 0 15.8477 0C14.0488 0 13.0293 1.00781 13 2.44922ZM15.625 8.67773C16.1582 8.67773 16.5859 8.27344 16.5859 7.75781C16.5859 7.24219 16.1582 6.83789 15.625 6.83789C15.0977 6.83789 14.6699 7.24219 14.6699 7.75781C14.6699 8.27344 15.0977 8.67773 15.625 8.67773Z" fill="currentColor" /></svg></span>
									{% endif %}
								</td>
								<td>
									<a href="#" class="btn btn-primary visible-on --modifiable-toggle"><strong>Обработать</strong></a>
									<a href="#" class="trash-link visible-off --modifiable-toggle">Закрыть <i class="closer inline size_12"></i></a>
								</td>
							</tr>
							<tr class="tr-hide">
								<td class="table-requests-form" colspan="8">
									{% include '_parts/_unprocessed-spares.twig' with {'id' : item.id, 'params' : item.params} %}
								</td>
							</tr>
						</tbody>
						{% endfor %}
					</table>
				</div>
			</div>

		</div>
	</div>
{% endblock %}
{% block modals %}
	<div class="modal fade in middle flying" id="modal-info" tabindex="-1" role="dialog" aria-labelledby="modal-info">
		<div class="modal-dialog modal-md" role="document">
			<div class="modal-content">
				<a href="#" class="cross" data-dismiss="modal"></a>
				<div class="modal-body">
					<div class="text-center">
						<div class="mb-20">
							<svg width="48" height="48" class="color-green-light"><use xlink:href="/images/svg/main-sprite.svg#success"></use></svg>
						</div>
						<div class="mb-40 lh-2">
							<strong>Клиент оповещён</strong>
							<br />Отправлено письмо на email: <strong>example@gmail.com</strong>
							<br />Заявка перемещена в «Обработанные»
						</div>
						<a href="#" class="btn btn-primary" data-dismiss="modal">OK, закрыть окно</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="modal-mail-preview" tabindex="-1" role="dialog" aria-labelledby="modal-mail-preview">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<a href="#" class="cross" data-dismiss="modal"></a>
				<div class="modal-body">

					{% include '../../mail/vin-checker.twig' %}

				</div>
			</div>
		</div>
	</div>
{% endblock %}
{% block addition %}
	<script>
		$(function(){
			$('.cp-vinRequest-message .--message-save').on('click', function(){
				$(this).closest('.--modifiable').removeClass('in');
				globalNotifyAdd('Изменения сохранены', 'alert-success timer');
			});
		});
	</script>
{% endblock %}