{% extends '../_layouts/_main.twig' %}
{% block content %}
<div class="cp-awaiting-products">

	<div class="panel panel-tabs">
		<ul class="nav nav-tabs nav-tabs_a">
			<li class="active">
				<a href="awaiting.html">Awaiting products</a>
			</li>
			<li>
				<a href="delayed.html">Delayed products (32)</a>
			</li>
			<li>
				<a href="problem.html">Problem products</a>
			</li>
			<li>
				<span class="disabled">Performance</span>
			</li>
		</ul>
		<div class="panel-body cpap-order">
			<div class="cpap-order__info">
				<div class="title">
					<a href="#" class="number">Order: 2715345</a>
					<span class="icobox size_12">
						<svg class="ico"><use xlink:href="/images/svg/main-sprite.svg#i-paid"></use></svg>
						(paid)
					</span>
				</div>
				<table class="cpap-order__infoTable">
					<tr>
						<td><strong>Customer:</strong> Konstantin Voskoboinikov</td>
						<td><strong>Seller:</strong> Andrus Vaal</td>
					</tr>
					<tr>
						<td><strong>Phone:</strong> +37256392277</td>
						<td><strong>Current shipping date:</strong> 21.05.19 12:30</td>
					</tr>
				</table>
			</div>
			<ul class="cpap-order__controls">
				<li>
					<a href="#" class="discard icobox icobox_right size_12">
						<svg class="ico"><use xlink:href="/images/svg/main-sprite.svg#cross"></use></svg>
						Discard all changes and exit order view
					</a>
				</li>
				<li>
					<a href="#" class="apply icobox icobox_right size_12">
						<svg class="ico"><use xlink:href="/images/svg/main-sprite.svg#cloud"></use></svg>
						Apply all changes made to this order
					</a>
				</li>
			</ul>
		</div>
		<div class="panel-body">

			<div class="mb-4">
				<strong>Total awaiting products: 2830</strong>
			</div>

			<div class="scroller-x">
				<table class="cpap-table">
					<thead>
					<tr>
						<th>Order</th>
						<th>Admin</th>
						<th>Spare</th>
						<th>Delivery</th>
						<th>Product</th>
						<th>Supplier</th>
						<th>Code</th>
						<th>Item</th>
						<th class="text-right">w/o VAT</th>
						<th>Delivery Date</th>
						<th>Shipping Date</th>
						<th>&nbsp;</th>
						<th>&nbsp;</th>
						<th>&nbsp;</th>
					</tr>
					</thead>
					<tbody>
					<tr>
						<td class="text-nowrap">
							<div class="b-flag">
								<div class="b-flag__icon"><img src="/images/flag/ee.png" alt="" /></div>
								<span class="icobox icobox_right size_16">
									<svg class="ico color-primary"><use xlink:href="/images/svg/main-sprite.svg#i-paid"></use></svg>
									<a href="#">2715345</a>
								</span>
							</div>
						</td>
						<td>
							<span class="icobox size_16" title="Kiril Harvatin">
								<i class="ico"><img src="/images/temp/kh.png" alt="" /></i>
								KH
							</span>
						</td>
						<td><a href="#">AL211926135</a></td>
						<td>SmartPost Express</td>
						<td><span class="cpap-table__product-name text-shorter-tooltip"><span>Воздушный фильтр FILTRON</span></span></td>
						<td style="min-width: 120px;">FEBEST Europe Distribution</td>
						<td>AP149/1</td>
						<td><a href="#">U2246919</a></td>
						<td class="text-right text-nowrap">123.35 €</td>
						<td class="text-nowrap">
							<span class="icobox icobox_right size_12">
								<a href="#" class="ico color-black"><svg class="d-block" width="8" height="12"><use xlink:href="/images/svg/main-sprite.svg#i-pencil"></use></svg></a>
								17.05.10 08:10
							</span>
						</td>
						<td class="text-nowrap">21.05.10 12:45</td>
						<td class="td-link"><a href="#" class="color-green-light"><svg class="d-block" width="16" height="16"><use xlink:href="/images/svg/main-sprite.svg#i-change"></use></svg></a></td>
						<td class="td-link"><a href="#"><svg class="d-block" width="16" height="16"><use xlink:href="/images/svg/main-sprite.svg#i-help"></use></svg></a></td>
						<td class="td-link"><a href="#"><strong>2</strong></a></td>
					</tr>
					<tr>
						<td class="text-nowrap">
							<div class="b-flag">
								<div class="b-flag__icon"><img src="/images/flag/ee.png" alt="" /></div>
								<a href="#">2715777</a>
							</div>
						</td>
						<td>
							<span class="icobox size_16" title="Atillo Tamerlanovich">
								<i class="ico"><img src="/images/temp/at.png" alt="" /></i>
								AT
							</span>
						</td>
						<td><a href="#">AL21926139</a></td>
						<td>24Express</td>
						<td><span class="cpap-table__product-name text-shorter-tooltip"><span>Прокладка, головка цилиндра head cover VICTOR REINZ</span></span></td>
						<td style="min-width: 120px;">AD BALTIC</td>
						<td>AP149/1</td>
						<td><a href="#">U2246321</a></td>
						<td class="text-right text-nowrap">89.21 €</td>
						<td class="text-nowrap">
							<span class="icobox icobox_right size_12">
								<a href="#" class="ico color-black"><svg class="d-block" width="8" height="12"><use xlink:href="/images/svg/main-sprite.svg#i-pencil"></use></svg></a>
								17.05.10 08:10
							</span>
						</td>
						<td class="text-nowrap">&nbsp;</td>
						<td class="td-link">&nbsp;</td>
						<td class="td-link">&nbsp;</td>
						<td class="td-link"><a href="#"><strong>3</strong></a></td>
					</tr>
					<tr>
						<td class="text-nowrap">
							<div class="b-flag">
								<div class="b-flag__icon"><img src="/images/flag/ee.png" alt="" /></div>
								<a href="#">2715142</a>
							</div>
						</td>
						<td>
							<span class="icobox size_16" title="Kiril Harvatin">
								<i class="ico"><img src="/images/temp/kh.png" alt="" /></i>
								KH
							</span>
						</td>
						<td><a href="#">AL211926101</a></td>
						<td>Shop</td>
						<td><span class="cpap-table__product-name text-shorter-tooltip"><span>Дверь, кузов BLIC</span></span></td>
						<td style="min-width: 120px;">KOLCHUGA</td>
						<td>6015-00-2020135P</td>
						<td><a href="#">U2246792</a></td>
						<td class="text-right text-nowrap">26.56 €</td>
						<td class="td-active text-nowrap">
							<span class="icobox icobox_right size_12">
								<a href="#" class="ico color-black"><svg class="d-block" width="8" height="12"><use xlink:href="/images/svg/main-sprite.svg#i-pencil"></use></svg></a>
								21.06.10 11:45
							</span>
						</td>
						<td class="text-nowrap">27.06.10 14:00</td>
						<td class="td-link"><a href="#" class="color-green-light"><svg class="d-block" width="16" height="16"><use xlink:href="/images/svg/main-sprite.svg#i-change"></use></svg></a></td>
						<td class="td-link"><a href="#"><svg class="d-block" width="16" height="16"><use xlink:href="/images/svg/main-sprite.svg#i-help"></use></svg></a></td>
						<td class="td-link"><a href="#" class="color-gray"><strong>0</strong></a></td>
					</tr>
					<tr>
						<td class="td-active" colspan="14">
							<div class="cpap-table-date-changer">
								<a href="#" class="cls">Close <i class="fa fa-angle-up"></i></a>
								<div class="max-w-1200">
									<div class="row">
										<div class="col-xs-12 col-md-3">
											<div class="mb-4 fw-bold">1. New Delivery Date and Time</div>
											<div class="form-group max-w-300">
												<div class="form-field">
													<svg class="form-field__icon size_16" viewBox="0 0 37 40" xmlns="http://www.w3.org/2000/svg">
														<g transform="translate(-42.000000, -160.000000)">
															<path d="M44.7942855,196.510045 L51.0814287,196.510045 L51.0814287,190.222903 L44.7942855,190.222903 L44.7942855,196.510045 Z M52.4785708,196.510045 L59.4642851,196.510045 L59.4642851,190.222903 L52.4785708,190.222903 L52.4785708,196.510045 Z M44.7942855,188.82576 L51.0814287,188.82576 L51.0814287,181.840045 L44.7942855,181.840045 L44.7942855,188.82576 Z M52.4785708,188.82576 L59.4642851,188.82576 L59.4642851,181.840045 L52.4785708,181.840045 L52.4785708,188.82576 Z M44.7942855,180.442903 L51.0814287,180.442903 L51.0814287,174.15576 L44.7942855,174.15576 L44.7942855,180.442903 Z M60.8614284,196.510045 L67.8471427,196.510045 L67.8471427,190.222903 L60.8614284,190.222903 L60.8614284,196.510045 Z M52.4785708,180.442903 L59.4642851,180.442903 L59.4642851,174.15576 L52.4785708,174.15576 L52.4785708,180.442903 Z M69.2442848,196.510045 L75.531428,196.510045 L75.531428,190.222903 L69.2442848,190.222903 L69.2442848,196.510045 Z M60.8614284,188.82576 L67.8471427,188.82576 L67.8471427,181.840045 L60.8614284,181.840045 L60.8614284,188.82576 Z M53.1771431,169.964331 L53.1771431,163.677189 C53.1771431,163.487992 53.1080129,163.324264 52.9697537,163.186007 C52.8314958,163.047747 52.6677681,162.978617 52.4785708,162.978617 L51.0814287,162.978617 C50.8922313,162.978617 50.7285037,163.047747 50.5902458,163.186007 C50.4519866,163.324264 50.3828564,163.487992 50.3828564,163.677189 L50.3828564,169.964331 C50.3828564,170.153529 50.4519866,170.317256 50.5902458,170.455514 C50.7285037,170.593773 50.8922313,170.662904 51.0814287,170.662904 L52.4785708,170.662904 C52.6677681,170.662904 52.8314958,170.593773 52.9697537,170.455514 C53.1080129,170.317256 53.1771431,170.153529 53.1771431,169.964331 L53.1771431,169.964331 Z M69.2442848,188.82576 L75.531428,188.82576 L75.531428,181.840045 L69.2442848,181.840045 L69.2442848,188.82576 Z M60.8614284,180.442903 L67.8471427,180.442903 L67.8471427,174.15576 L60.8614284,174.15576 L60.8614284,180.442903 Z M69.2442848,180.442903 L75.531428,180.442903 L75.531428,174.15576 L69.2442848,174.15576 L69.2442848,180.442903 Z M69.9428558,169.964331 L69.9428558,163.677189 C69.9428558,163.487992 69.8737269,163.324264 69.7354677,163.186007 C69.5972085,163.047747 69.4334808,162.978617 69.2442848,162.978617 L67.8471427,162.978617 C67.6579454,162.978617 67.4942177,163.047747 67.3559585,163.186007 C67.2177006,163.324264 67.1485704,163.487992 67.1485704,163.677189 L67.1485704,169.964331 C67.1485704,170.153529 67.2177006,170.317256 67.3559585,170.455514 C67.4942177,170.593773 67.6579454,170.662904 67.8471427,170.662904 L69.2442848,170.662904 C69.4334808,170.662904 69.5972085,170.593773 69.7354677,170.455514 C69.8737269,170.317256 69.9428558,170.153529 69.9428558,169.964331 L69.9428558,169.964331 Z M78.3257135,168.567189 L78.3257135,196.510045 C78.3257135,197.266831 78.0491951,197.921741 77.4961596,198.474778 C76.943124,199.027813 76.2882135,199.304331 75.531428,199.304331 L44.7942855,199.304331 C44.0374999,199.304331 43.3825894,199.027813 42.8295539,198.474778 C42.2765184,197.921741 42,197.266831 42,196.510045 L42,168.567189 C42,167.810404 42.2765184,167.155492 42.8295539,166.602456 C43.3825894,166.049421 44.0374999,165.772904 44.7942855,165.772904 L47.5885709,165.772904 L47.5885709,163.677189 C47.5885709,162.716654 47.9305801,161.894376 48.6145985,161.210359 C49.2986156,160.526341 50.1208932,160.184332 51.0814287,160.184332 L52.4785708,160.184332 C53.4391063,160.184332 54.2613839,160.526341 54.945401,161.210359 C55.6294194,161.894376 55.9714286,162.716654 55.9714286,163.677189 L55.9714286,165.772904 L64.3542849,165.772904 L64.3542849,163.677189 C64.3542849,162.716654 64.6962941,161.894376 65.3803125,161.210359 C66.0643296,160.526341 66.8866059,160.184332 67.8471427,160.184332 L69.2442848,160.184332 C70.2048203,160.184332 71.0270979,160.526341 71.711115,161.210359 C72.3951334,161.894376 72.7371426,162.716654 72.7371426,163.677189 L72.7371426,165.772904 L75.531428,165.772904 C76.2882135,165.772904 76.943124,166.049421 77.4961596,166.602456 C78.0491951,167.155492 78.3257135,167.810404 78.3257135,168.567189 L78.3257135,168.567189 Z" fill="currentColor"></path>
														</g>
													</svg>
													<input class="form-control datepicker fw-bold" type="text" value="" data-datepicker-options="singleDatePicker: true; timePicker: true; timePicker24Hour: true;" data-validation="minDateNow" />
												</div>
												<div class="help-block hidden">Indicated date has already passed. Please select future date.</div>
											</div>
										</div><!--.col-->
										<div class="col-xs-12 col-md-4">
											<div class="mb-4 fw-bold">2. Reason</div>
											<ul class="list-unstyled list-unstyled-4 max-w-500">
												<li>
													<div class="form-group form-check">
														<label>
															<input type="radio" name="rad-1" />
															Supplier informed that product will arrive later
														</label>
													</div>
												</li>
												<li>
													<div class="form-group form-check">
														<label>
															<input type="radio" name="rad-1" />
															Other reason
														</label>
													</div>
													<div class="form-group form-group-hidden pl-20">
														<div class="mb-4"></div>
														<div class="form-label">Note (visible only for admins). Required*</div>
														<div class="form-field">
															<textarea class="form-control" cols="" rows="3"></textarea>
														</div>
														<div class="help-block hidden">The field is required</div>
													</div>
												</li>
											</ul>
										</div><!--.col-->
										<div class="col-xs-12 col-md-5">
											<div class="mb-4 fw-bold">3. Accept</div>
											<div class="panel panel-uniq">
												<div class="panel-body collapser in">
													<div class="collapser-caret collapser-link">
														<i class="fa fa-angle-down"></i>
													</div>
													<div class="mb-4 icobox size_16">
														<svg class="ico color-primary"><use xlink:href="/images/svg/main-sprite.svg#info"></use></svg>
														Changes will be applied
													</div>
													<div class="collapser-body">
														<div class="icobox size_16">
															<ul class="list-unstyled list-unstyled-4">
																<li>1. System will set to product new delivery date: <strong>21.10.2019 15:00</strong></li>
																<li>2. Product will receive log entry: New delivery date is set</li>
																<li>3. Order shipping date may be updated</li>
																<li>4. Customer may be notified about delayed delivery</li>
															</ul>
														</div>
													</div>
												</div>
											</div>
											<button class="btn btn-default">Save changes</button>
										</div><!--.col-->
									</div>
								</div>
							</div>
						</td>
					</tr>
					<tr>
						<td class="text-nowrap">
							<div class="b-flag">
								<div class="b-flag__icon"><img src="/images/flag/ee.png" alt="" /></div>
								<a href="#">2993177</a>
							</div>
						</td>
						<td>
							<span class="icobox size_16" title="Atillo Tamerlanovich">
								<i class="ico"><img src="/images/temp/at.png" alt="" /></i>
								AT
							</span>
						</td>
						<td><a href="#">AL211926135</a></td>
						<td>SmartPost Express</td>
						<td><span class="cpap-table__product-name text-shorter-tooltip"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt quaerat quia recusandae sint. Adipisci alias beatae, corporis natus numquam quasi repellat saepe sapiente vitae voluptas!</span></span></td>
						<td style="min-width: 120px;">AD BALTIC</td>
						<td>AP149/1</td>
						<td><a href="#">U2246321</a></td>
						<td class="text-right text-nowrap">2.13 €</td>
						<td class="text-nowrap">
							<span class="icobox icobox_right size_12">
								<a href="#" class="ico color-black"><svg class="d-block" width="8" height="12"><use xlink:href="/images/svg/main-sprite.svg#i-pencil"></use></svg></a>
								17.05.10 08:10
							</span>
						</td>
						<td class="text-nowrap">19.05.10 10:00</td>
						<td class="td-link"><a href="#" class="color-green-light"><svg class="d-block" width="16" height="16"><use xlink:href="/images/svg/main-sprite.svg#i-change"></use></svg></a></td>
						<td class="td-link"><a href="#"><svg class="d-block" width="16" height="16"><use xlink:href="/images/svg/main-sprite.svg#i-help"></use></svg></a></td>
						<td class="td-link"><a href="#"><strong>1</strong></a></td>
					</tr>
					</tbody>
				</table>
			</div>

		</div>
	</div>

</div>
<div class="content-separator onehalf-sm-up"></div>
{% endblock %}