{% extends '../_layouts/_main.twig' %}
{% block addition %}
	<link rel="stylesheet" href="/css/partials/userspace.css" type="text/css" media="all" />
{% endblock %}
{% block content %}
	<div class="cp-userspace">

		<h1>Статистика причин звонков</h1>

		<div class="cp-userspace-pane">

			<p>
				<a href="#modal-cp-callstats" data-toggle="modal">Попап обработки звонков 19770</a>
				<a href="#modal-callstat-success" data-toggle="modal">Результат обработки звонков 19770</a>
			</p>

			<div class="cp-callstats-summary">
				<table>
					<thead>
					<tr>
						<th><span class="js-table-sort">Причина <i class="js-table-sort-arr"></i></span></th>
						<th><span class="js-table-sort">Процент <i class="js-table-sort-arr"></i></span></th>
						<th><span class="js-table-sort">Всего <i class="js-table-sort-arr"></i></span></th>
					</tr>
					</thead>
					<tbody>
					<tr>
						<td data-sort="Сделал заказ">Сделал заказ</td>
						<td data-sort="29.4">29.4%</td>
						<td data-sort="749">749</td>
					</tr>
					<tr>
						<td data-sort="Заказ в процессе">Заказ в процессе</td>
						<td data-sort="23.5">23.5%</td>
						<td data-sort="598">598</td>
					</tr>
					<tr>
						<td data-sort="Запрос запчасти">Запрос запчасти</td>
						<td data-sort="13.5">13.5%</td>
						<td data-sort="344">344</td>
					</tr>
					<tr>
						<td data-sort="Где мой заказ">Где мой заказ</td>
						<td data-sort="10.6">10.6%</td>
						<td data-sort="270">270</td>
					</tr>
					<tr>
						<td data-sort="Товар не подошёл">Товар не подошёл</td>
						<td data-sort="8.2">8.2%</td>
						<td data-sort="209">209</td>
					</tr>
					<tr>
						<td data-sort="Проблема с оплатой">Проблема с оплатой</td>
						<td data-sort="4.7">4.7%</td>
						<td data-sort="120">120</td>
					</tr>
					<tr>
						<td data-sort="Вопросы по доставке">Вопросы по доставке</td>
						<td data-sort="3.8">3.8%</td>
						<td data-sort="97">97</td>
					</tr>
					<tr>
						<td data-sort="Вопросы связанные с оформлением заказа">Вопросы связанные с оформлением заказа</td>
						<td data-sort="3.1">3.1%</td>
						<td data-sort="79">79</td>
					</tr>
					<tr>
						<td data-sort="Вопросы по бухгалтерии">Вопросы по бухгалтерии</td>
						<td data-sort="2.4">2.4%</td>
						<td data-sort="61">61</td>
					</tr>
					<tr>
						<td data-sort="Другое">Другое</td>
						<td data-sort="0.8">0.8%</td>
						<td data-sort="20">20</td>
					</tr>
					</tbody>
					<tfoot>
					<tr>
						<td><strong>Итого</strong></td>
						<td><strong>100%</strong></td>
						<td><strong>2547</strong></td>
					</tr>
					</tfoot>
				</table>
				<div class="cp-callstats-summary__download">
					<span class="icobox size_16">
						<svg class="ico text-primary"><use xlink:href="/images/svg/main-sprite.svg#cloud"></use></svg>
						<a href="#"><strong>Скачать .csv</strong></a>
					</span>
				</div>
			</div>

			<div class="cp-callstats-filter">
				<div class="cp-callstats-filter__row">
					<div class="cp-callstats-filter__item">
						<div class="cp-callstats-filter-range">
							<div class="form-group">
								<div class="form-label">Период с</div>
								<div class="form-field">
									<div class="form-field__icon"><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 class="sep">&mdash;</div>
							<div class="form-group">
								<div class="form-label">По</div>
								<div class="form-field">
									<div class="form-field__icon"><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 class="cp-callstats-filter__item">
						<div class="form-group w-150">
							<div class="form-label">Причина:</div>
							<div class="form-field watcher" data-reset-text="Сбросить">
								<select class="form-control">
									<option value="">Все</option>
									<option value="1">Сделал заказ</option>
									<option value="2">Заказ в процессе</option>
									<option value="3">Запрос запчасти</option>
									<option value="4">Где мой заказ</option>
									<option value="5">Товар не подошёл</option>
									<option value="6">Проблема с оплатой</option>
									<option value="7">Вопросы по доставке</option>
									<option value="8">Вопросы связанные с оформлением заказа</option>
									<option value="9">Вопросы по бухгалтерии</option>
									<option value="10">Другое</option>
								</select>
							</div>
						</div>
					</div>
					<div class="cp-callstats-filter__item">
						<div class="cp-callstats-filter-range">
							<div class="form-group min-w-150">
								<div class="form-label">Админ:</div>
								<div class="form-field watcher" data-reset-text="Сбросить">
									<select class="form-control">
										<option value="">Все</option>
										<option value="1">John Doe</option>
										<option value="2">John Doe</option>
										<option value="3">John Doe</option>
									</select>
								</div>
							</div>
							<div class="sep"></div>
							<div class="form-group min-w-150">
								<div class="form-label">Страна:</div>
								<div class="form-field watcher" data-reset-text="Сбросить">
									<select class="form-control">
										<option value="">Все</option>
										<option value="1">Эстония</option>
										<option value="2">Финляндия</option>
										<option value="3">Латвия</option>
									</select>
								</div>
							</div>
						</div>
					</div>
					<div class="cp-callstats-filter__item cp-callstats-filter__search">
						<div class="form-group">
							<div class="form-field watcher" data-reset-text="Сбросить">
								<i class="fa fa-search"></i>
								<input type="text" class="form-control js-search-by-table" value="" placeholder="Найти в таблице" data-target="#callstats-table" />
							</div>
						</div>
					</div>
					<div class="cp-callstats-filter__item">
						<button class="btn btn-primary">Показать результаты</button>
					</div>
					{#<div class="cp-callstats-filter__item cp-callstats-filter__search">
						<div class="form-group">
							<div class="form-field">
								<input type="text" class="form-control" value="" placeholder="Найти в таблице" />
							</div>
							<div class="form-btn">
								<button class="btn btn-primary">Найти</button>
							</div>
						</div>
					</div>#}
				</div>
			</div>

			<div class="cp-callstats-table">
				<table id="callstats-table">
					<thead>
					<tr>
						<th>Запись звонка</th>
						<th><span class="js-table-sort">Клиент <i class="js-table-sort-arr"></i></span></th>
						<th><span class="js-table-sort">Номер телефона <i class="js-table-sort-arr"></i></span></th>
						<th><span class="js-table-sort">Когда звонил <i class="js-table-sort-arr"></i></span></th>
						<th><span class="js-table-sort">Доставка и оплата <i class="js-table-sort-arr"></i></span></th>
						<th><span class="js-table-sort">Причина <i class="js-table-sort-arr"></i></span></th>
					</tr>
					</thead>
					<tbody>
					<tr>
						<td>
							<figure>
								<audio controls src="http://testmode.ru/dominika_v2/media/gorizont.mp3" style="height: 32px;">
									Your browser does not support the <code>audio</code> element.
								</audio>
							</figure>
						</td>
						<td data-sort="Kuusik Katus OÜ"><a href="#">Kuusik Katus OÜ</a></td>
						<td data-sort="372 5685 3533">
							<div class="icobox size_16">
								<img class="ico flag" src="/images/flag/ee.png" alt="" />
								+372 5685 3533
							</div>
							<div class="pl-24 color-gray">#123456700</div>
						</td>
						<td data-sort="12.08.2021 12:34">12.08.2021 12:34</td>
						<td>
							Omniva
							<br />
							Mastercard
						</td>
						<td class="td-success" title="Сделал заказ; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus earum impedit, maxime odit possimus tempore ullam. Beatae cupiditate error fuga impedit neque nesciunt numquam recusandae sapiente similique voluptatum? Accusamus at, commodi consequuntur deserunt error est, expedita itaque laborum maxime minima neque nihil nisi nostrum quia quidem sapiente sint! Commodi in, necessitatibus praesentium provident soluta tempora!">
							<div class="ellipsis">
								Сделал заказ;
								<span class="text-light">Тормозные колодки для Тойоты. Тормозная колодка создаёт тормозное ускорение, за...</span>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<figure>
								<audio controls src="http://testmode.ru/dominika_v2/media/nabiraya_visoty.mp3" style="height: 32px;">
									Your browser does not support the <code>audio</code> element.
								</audio>
							</figure>
						</td>
						<td data-sort="Andres Sutt"><a href="#">Andres Sutt</a></td>
						<td data-sort="372 5685 3533">
							<div class="icobox size_16">
								<img class="ico flag" src="/images/flag/ee.png" alt="" />
								+372 5685 3533
							</div>
							<div class="pl-24 color-gray">#123456701</div>
						</td>
						<td data-sort="12.08.2021 12:34">12.08.2021 12:34</td>
						<td>
							Posti
							<br /><span class="text-danger">Не оплачено</span>
						</td>
						<td data-sort="Заказ в процессе">
							<div class="ellipsis">
								Заказ в процессе;
								<span class="text-light">Дооформлю к 14:00</span>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<figure>
								<audio controls src="http://testmode.ru/dominika_v2/media/okeany.mp3" style="height: 32px;">
									Your browser does not support the <code>audio</code> element.
								</audio>
							</figure>
						</td>
						<td data-sort="N.P TRANS"><a href="#">N.P TRANS</a></td>
						<td data-sort="358 20 1302718">
							<div class="icobox size_16">
								<img class="ico flag" src="/images/flag/no.png" alt="" />
								+358 20 1302718
							</div>
							<div class="pl-24 color-gray">#123456702</div>
						</td>
						<td data-sort="12.08.2021 12:34">12.08.2021 12:34</td>
						<td>
							Matkahuolto
							<br />Visa
						</td>
						<td data-sort="Запрос запчасти">
							<div class="ellipsis">
								Запрос запчасти;
								<span class="text-light">Спрашивают рычаги подвески на audi q6</span>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<figure>
								<audio controls src="http://testmode.ru/dominika_v2/media/puskaj.mp3" style="height: 32px;">
									Your browser does not support the <code>audio</code> element.
								</audio>
							</figure>
						</td>
						<td data-sort="Ceneral OÜ"><a href="#">Ceneral OÜ</a></td>
						<td data-sort="372 5685 3533">
							<div class="icobox size_16">
								<img class="ico flag" src="/images/flag/lv.png" alt="" />
								+372 5685 3533
							</div>
							<div class="pl-24 color-gray">#123456703</div>
						</td>
						<td data-sort="12.08.2021 12:34">12.08.2021 12:34</td>
						<td>
							Posti
							<br />Liisi
						</td>
						<td data-sort="Заказ в процессе">
							<div class="ellipsis">
								Заказ в процессе;
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<figure>
								<audio controls src="http://testmode.ru/dominika_v2/media/gorizont.mp3" style="height: 32px;">
									Your browser does not support the <code>audio</code> element.
								</audio>
							</figure>
						</td>
						<td data-sort="Kuusik Katus OÜ"><a href="#">Kuusik Katus OÜ</a></td>
						<td data-sort="372 5685 3533">
							<div class="icobox size_16">
								<img class="ico flag" src="/images/flag/ee.png" alt="" />
								+372 5685 3533
							</div>
							<div class="pl-24 color-gray">#123456704</div>
						</td>
						<td data-sort="12.08.2021 12:34">12.08.2021 12:34</td>
						<td>
							Omniva
							<br />
							Mastercard
						</td>
						<td class="td-success" title="Сделал заказ; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus earum impedit, maxime odit possimus tempore ullam. Beatae cupiditate error fuga impedit neque nesciunt numquam recusandae sapiente similique voluptatum? Accusamus at, commodi consequuntur deserunt error est, expedita itaque laborum maxime minima neque nihil nisi nostrum quia quidem sapiente sint! Commodi in, necessitatibus praesentium provident soluta tempora!">
							<div class="ellipsis">
								Сделал заказ;
								<span class="text-light">Тормозные колодки для Тойоты. Тормозная колодка создаёт тормозное ускорение, за...</span>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<figure>
								<audio controls src="http://testmode.ru/dominika_v2/media/nabiraya_visoty.mp3" style="height: 32px;">
									Your browser does not support the <code>audio</code> element.
								</audio>
							</figure>
						</td>
						<td data-sort="Andres Sutt"><a href="#">Andres Sutt</a></td>
						<td data-sort="372 5685 3533">
							<div class="icobox size_16">
								<img class="ico flag" src="/images/flag/ee.png" alt="" />
								+372 5685 3533
							</div>
							<div class="pl-24 color-gray">#123456705</div>
						</td>
						<td data-sort="12.08.2021 12:34">12.08.2021 12:34</td>
						<td>
							Posti
							<br />
							Mastercard
						</td>
						<td data-sort="Заказ в процессе">
							<div class="ellipsis">
								Заказ в процессе;
								<span class="text-light">Дооформлю к 14:00</span>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<figure>
								<audio controls src="http://testmode.ru/dominika_v2/media/okeany.mp3" style="height: 32px;">
									Your browser does not support the <code>audio</code> element.
								</audio>
							</figure>
						</td>
						<td data-sort="N.P TRANS"><a href="#">N.P TRANS</a></td>
						<td data-sort="358 20 1302718">
							<div class="icobox size_16">
								<img class="ico flag" src="/images/flag/no.png" alt="" />
								+358 20 1302718
							</div>
							<div class="pl-24 color-gray">#123456706</div>
						</td>
						<td data-sort="12.08.2021 12:34">12.08.2021 12:34</td>
						<td>
							Matkahuolto
							<br />Visa
						</td>
						<td data-sort="Запрос запчасти">
							<div class="ellipsis">
								Запрос запчасти;
								<span class="text-light">Спрашивают рычаги подвески на audi q6</span>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<figure>
								<audio controls src="http://testmode.ru/dominika_v2/media/puskaj.mp3" style="height: 32px;">
									Your browser does not support the <code>audio</code> element.
								</audio>
							</figure>
						</td>
						<td data-sort="Ceneral OÜ"><a href="#">Ceneral OÜ</a></td>
						<td data-sort="372 5685 3533">
							<div class="icobox size_16">
								<img class="ico flag" src="/images/flag/lv.png" alt="" />
								+372 5685 3533
							</div>
							<div class="pl-24 color-gray">#123456707</div>
						</td>
						<td data-sort="12.08.2021 12:34">12.08.2021 12:34</td>
						<td>
							Posti
							<br />Liisi
						</td>
						<td data-sort="Заказ в процессе">
							<div class="ellipsis">
								Заказ в процессе;
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<figure>
								<audio controls src="http://testmode.ru/dominika_v2/media/gorizont.mp3" style="height: 32px;">
									Your browser does not support the <code>audio</code> element.
								</audio>
							</figure>
						</td>
						<td data-sort="Kuusik Katus OÜ"><a href="#">Kuusik Katus OÜ</a></td>
						<td data-sort="372 5685 3533">
							<div class="icobox size_16">
								<img class="ico flag" src="/images/flag/ee.png" alt="" />
								+372 5685 3533
							</div>
							<div class="pl-24 color-gray">#123456708</div>
						</td>
						<td data-sort="12.08.2021 12:34">12.08.2021 12:34</td>
						<td>
							Omniva
							<br />
							Mastercard
						</td>
						<td class="td-success" title="Сделал заказ; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus earum impedit, maxime odit possimus tempore ullam. Beatae cupiditate error fuga impedit neque nesciunt numquam recusandae sapiente similique voluptatum? Accusamus at, commodi consequuntur deserunt error est, expedita itaque laborum maxime minima neque nihil nisi nostrum quia quidem sapiente sint! Commodi in, necessitatibus praesentium provident soluta tempora!">
							<div class="ellipsis">
								Сделал заказ;
								<span class="text-light">Тормозные колодки для Тойоты. Тормозная колодка создаёт тормозное ускорение, за...</span>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<figure>
								<audio controls src="http://testmode.ru/dominika_v2/media/nabiraya_visoty.mp3" style="height: 32px;">
									Your browser does not support the <code>audio</code> element.
								</audio>
							</figure>
						</td>
						<td data-sort="Andres Sutt"><a href="#">Andres Sutt</a></td>
						<td data-sort="372 5685 3533">
							<div class="icobox size_16">
								<img class="ico flag" src="/images/flag/ee.png" alt="" />
								+372 5685 3533
							</div>
							<div class="pl-24 color-gray">#123456709</div>
						</td>
						<td data-sort="12.08.2021 12:34">12.08.2021 12:34</td>
						<td>
							Posti
							<br />
							Mastercard
						</td>
						<td data-sort="Заказ в процессе">
							<div class="ellipsis">
								Заказ в процессе;
								<span class="text-light">Дооформлю к 14:00</span>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<figure>
								<audio controls src="http://testmode.ru/dominika_v2/media/okeany.mp3" style="height: 32px;">
									Your browser does not support the <code>audio</code> element.
								</audio>
							</figure>
						</td>
						<td data-sort="N.P TRANS"><a href="#">N.P TRANS</a></td>
						<td data-sort="358 20 1302718">
							<div class="icobox size_16">
								<img class="ico flag" src="/images/flag/no.png" alt="" />
								+358 20 1302718
							</div>
							<div class="pl-24 color-gray">#123456710</div>
						</td>
						<td data-sort="12.08.2021 12:34">12.08.2021 12:34</td>
						<td>
							Matkahuolto
							<br />Visa
						</td>
						<td data-sort="Запрос запчасти">
							<div class="ellipsis">
								Запрос запчасти;
								<span class="text-light">Спрашивают рычаги подвески на audi q6</span>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<figure>
								<audio controls src="http://testmode.ru/dominika_v2/media/puskaj.mp3" style="height: 32px;">
									Your browser does not support the <code>audio</code> element.
								</audio>
							</figure>
						</td>
						<td data-sort="Ceneral OÜ"><a href="#">Ceneral OÜ</a></td>
						<td data-sort="372 5685 3533">
							<div class="icobox size_16">
								<img class="ico flag" src="/images/flag/lv.png" alt="" />
								+372 5685 3533
							</div>
							<div class="pl-24 color-gray">#123456711</div>
						</td>
						<td data-sort="12.08.2021 12:34">12.08.2021 12:34</td>
						<td>
							Posti
							<br />Liisi
						</td>
						<td data-sort="Заказ в процессе">
							<div class="ellipsis">
								Заказ в процессе;
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<figure>
								<audio controls src="http://testmode.ru/dominika_v2/media/gorizont.mp3" style="height: 32px;">
									Your browser does not support the <code>audio</code> element.
								</audio>
							</figure>
						</td>
						<td data-sort="Kuusik Katus OÜ"><a href="#">Kuusik Katus OÜ</a></td>
						<td data-sort="372 5685 3533">
							<div class="icobox size_16">
								<img class="ico flag" src="/images/flag/ee.png" alt="" />
								+372 5685 3533
							</div>
							<div class="pl-24 color-gray">#123456712</div>
						</td>
						<td data-sort="12.08.2021 12:34">12.08.2021 12:34</td>
						<td>
							Omniva
							<br />
							Mastercard
						</td>
						<td class="td-success" title="Сделал заказ; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus earum impedit, maxime odit possimus tempore ullam. Beatae cupiditate error fuga impedit neque nesciunt numquam recusandae sapiente similique voluptatum? Accusamus at, commodi consequuntur deserunt error est, expedita itaque laborum maxime minima neque nihil nisi nostrum quia quidem sapiente sint! Commodi in, necessitatibus praesentium provident soluta tempora!">
							<div class="ellipsis">
								Сделал заказ;
								<span class="text-light">Тормозные колодки для Тойоты. Тормозная колодка создаёт тормозное ускорение, за...</span>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<figure>
								<audio controls src="http://testmode.ru/dominika_v2/media/nabiraya_visoty.mp3" style="height: 32px;">
									Your browser does not support the <code>audio</code> element.
								</audio>
							</figure>
						</td>
						<td data-sort="Andres Sutt"><a href="#">Andres Sutt</a></td>
						<td data-sort="372 5685 3533">
							<div class="icobox size_16">
								<img class="ico flag" src="/images/flag/ee.png" alt="" />
								+372 5685 3533
							</div>
							<div class="pl-24 color-gray">#123456713</div>
						</td>
						<td data-sort="12.08.2021 12:34">12.08.2021 12:34</td>
						<td>
							Posti
							<br />
							Mastercard
						</td>
						<td data-sort="Заказ в процессе">
							<div class="ellipsis">
								Заказ в процессе;
								<span class="text-light">Дооформлю к 14:00</span>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<figure>
								<audio controls src="http://testmode.ru/dominika_v2/media/okeany.mp3" style="height: 32px;">
									Your browser does not support the <code>audio</code> element.
								</audio>
							</figure>
						</td>
						<td data-sort="N.P TRANS"><a href="#">N.P TRANS</a></td>
						<td data-sort="358 20 1302718">
							<div class="icobox size_16">
								<img class="ico flag" src="/images/flag/no.png" alt="" />
								+358 20 1302718
							</div>
							<div class="pl-24 color-gray">#123456714</div>
						</td>
						<td data-sort="12.08.2021 12:34">12.08.2021 12:34</td>
						<td>
							Matkahuolto
							<br />Visa
						</td>
						<td data-sort="Запрос запчасти">
							<div class="ellipsis">
								Запрос запчасти;
								<span class="text-light">Спрашивают рычаги подвески на audi q6</span>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<figure>
								<audio controls src="http://testmode.ru/dominika_v2/media/puskaj.mp3" style="height: 32px;">
									Your browser does not support the <code>audio</code> element.
								</audio>
							</figure>
						</td>
						<td data-sort="Ceneral OÜ"><a href="#">Ceneral OÜ</a></td>
						<td data-sort="372 5685 3533">
							<div class="icobox size_16">
								<img class="ico flag" src="/images/flag/lv.png" alt="" />
								+372 5685 3533
							</div>
							<div class="pl-24 color-gray">#123456715</div>
						</td>
						<td data-sort="12.08.2021 12:34">12.08.2021 12:34</td>
						<td>
							Posti
							<br />Liisi
						</td>
						<td data-sort="Заказ в процессе">
							<div class="ellipsis">
								Заказ в процессе;
							</div>
						</td>
					</tr>
					<tr class="tr-nothing">
						<td colspan="6">
							<div class="text-center color-danger">Ничего не найдено</div>
						</td>
					</tr>
					</tbody>
				</table>
			</div>

		</div>

	</div>
{% endblock %}
{% block modals %}
	<div class="modal fade" id="modal-cp-callstats" tabindex="-1" role="dialog" aria-labelledby="modal-cp-callstats">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<a href="#" class="cross" data-dismiss="modal"></a>
				<div class="cp-callstats-modal">
					<div class="modal-header">
						<h2>Зачем звонил Клиент?</h2>
						<div class="cp-callstats-modal-data">
							<div class="cp-callstats-modal-data__person">
								<div class="lang"><img src="/images/flag/ru.png" alt="" /> .ee</div>
								<div class="person">Konstantin Voskoboinikov</div>
								<div class="phone">(+372 53467366)</div>
								<div class="date">18.08.21 09:21</div>
							</div>
							<div class="cp-callstats-modal-data__call">
								<figure>
									{#<figcaption>Label for audio:</figcaption>#}
									<audio controls src="http://testmode.ru/dominika_v2/media/ne_bolno.mp3" style="height: 32px;">
										Your browser does not support the <code>audio</code> element.
									</audio>
								</figure>
							</div>
						</div>
					</div>
					<div class="modal-body">

						<div class="cp-callstats-modal-reason">

							<ul class="reason-list">
								<li>
									<div class="reason-check">
										<label><input type="radio" name="rad-a" value="" />Я сделал заказ</label>
									</div>
									<div class="reason-inner">
										<ul class="reason-inner__list">
											<li>
												<div class="reason-check">
													<label>
														<input type="radio" name="rad-b" value="" />
														11:55 <strong>5 мин назад</strong> &mdash; <strong>Kuusik Katus OÜ</strong> (Toyota Corolla – рычаг, фара основная); Cargobus
														<a href="#" class="reason-link" target="_blank">#892739<svg><use xlink:href="/images/svg/main-sprite.svg#target-blank"></use></svg></a>
													</label>
												</div>
											</li>
											<li>
												<div class="reason-check">
													<label>
														<input type="radio" name="rad-b" value="" />
														11:01 <strong>54 мин назад</strong> &mdash; <strong>Andres Sutt</strong> (BMW 5-series – бампер, капот); DPD
														<a href="#" class="reason-link" target="_blank">#782321<svg><use xlink:href="/images/svg/main-sprite.svg#target-blank"></use></svg></a>
													</label>
												</div>
											</li>
											<li>
												<div class="reason-check">
													<label>
														<input type="radio" name="rad-b" value="" />
														10:23 <strong>1 час 32 мин назад</strong> &mdash; <strong>N.P TRANS</strong> 723822 (Mazda 6 – 2*тормозной диск); Posti
														<a href="#" class="reason-link" target="_blank">#782321<svg><use xlink:href="/images/svg/main-sprite.svg#target-blank"></use></svg></a>
													</label>
												</div>
											</li>
										</ul>
										<button class="btn btn-primary">OK</button>
									</div>
								</li>
								<li>
									<div class="reason-check">
										<label><input type="radio" name="rad-a" value="" />Скоро сделаю заказ</label>
									</div>
									<div class="reason-inner">
										<div class="both-cart-list">
											<div class="both-cart-list__head">
												<div class="both-cart-list__row">
													<div class="both-cart-list__col col-product">Товар</div>
													<div class="both-cart-list__col col-price">Цена за ед.</div>
													<div class="both-cart-list__col col-discount">Скидка</div>
													<div class="both-cart-list__col col-total">Сумма, eur</div>
												</div>
											</div>
											<div class="both-cart-list__body">
												<div class="both-cart-list__row">
													<div class="both-cart-list__col col-product">
														<div class="both-cart-list__item">
															<div class="image">
																<a href="#link-to-product">
																	<img src="http://tecdoc-new.alpics.info/pics/30/1457437001PH01WHCO0000.JPG" alt="" />
																</a>
															</div>
															<div class="body">
																<div class="title">
																	<a href="#">Oil Filter BOSCH 1 457 437 001 (code: AL11991813)</a>
																</div>
																<div class="description">Mercedes-Benz VITO (W639), 01.2003 - 10.2010</div>
															</div>
														</div>
													</div>
													<div class="both-cart-list__col col-price">
														<strong>68.00</strong>
													</div>
													<div class="both-cart-list__col col-discount">
														<s>68.00</s><i>-25%</i>
													</div>
													<div class="both-cart-list__col col-total">
														<strong>51.00</strong>
													</div>
												</div>
												<div class="both-cart-list__row">
													<div class="both-cart-list__col col-product">
														<div class="both-cart-list__item">
															<div class="image">
																<a href="#link-to-product">
																	<img src="https://pics3.alpics.info/pics/spares/small/893751.jpg" alt="" />
																</a>
															</div>
															<div class="body">
																<div class="title">
																	<a href="#">Air Filter MAPCO 60825 (code: AL893751)</a>
																</div>
																<div class="description">Mercedes-Benz VITO (W639), 01.2003 - 10.2010</div>
															</div>
														</div>
													</div>
													<div class="both-cart-list__col col-price">
														<strong>68.00</strong>
													</div>
													<div class="both-cart-list__col col-discount">
														<s>68.00</s><i>-25%</i>
													</div>
													<div class="both-cart-list__col col-total">
														<strong>51.00</strong>
													</div>
												</div>
												<div class="both-cart-list__row">
													<div class="both-cart-list__col col-product">
														<div class="both-cart-list__item">
															<div class="image">
																<a href="#link-to-product">
																	<img src="http://tecdoc-new.alpics.info/pics/462/K 9079C.JPG" alt="" />
																</a>
															</div>
															<div class="body">
																<div class="title">
																	<a href="#">Filter, interior air MFILTER K 9079C (code: AL11123027)</a>
																</div>
																<div class="description">Mercedes-Benz VITO (W639), 01.2003 - 10.2010</div>
															</div>
														</div>
													</div>
													<div class="both-cart-list__col col-price">
														<strong>68.00</strong>
													</div>
													<div class="both-cart-list__col col-discount">
														<s>68.00</s><i>-25%</i>
													</div>
													<div class="both-cart-list__col col-total">
														<strong>51.00</strong>
													</div>
												</div>
												<div class="both-cart-list__row">
													<div class="both-cart-list__col col-product">
														<div class="both-cart-list__item">
															<div class="image">
																<a href="#link-to-product">
																	<img src="http://tecdoc-new.alpics.info/pics/30/1457434437PH01WHCO0000.JPG" alt="" />
																</a>
															</div>
															<div class="body">
																<div class="title">
																	<a href="#">Fuel filter BOSCH 1 457 434 437 (code: AL11982488)</a>
																</div>
																<div class="description">Mercedes-Benz VITO (W639), 01.2003 - 10.2010</div>
															</div>
														</div>
													</div>
													<div class="both-cart-list__col col-price">
														<strong>68.00</strong>
													</div>
													<div class="both-cart-list__col col-discount">
														<s>68.00</s><i>-25%</i>
													</div>
													<div class="both-cart-list__col col-total">
														<strong>51.00</strong>
													</div>
												</div>
												<div class="both-cart-list__row">
													<div class="both-cart-list__col col-product">
														<div class="both-cart-list__item">
															<div class="image">
																<a href="#link-to-product">
																	<img src="https://pics3.alpics.info/pics/spares/small/154640.jpg" alt="" />
																</a>
															</div>
															<div class="body">
																<div class="title">
																	<a href="#">Floor mats REZAW-PLAST (code: AL154640)</a>
																</div>
																<div class="description">Mercedes-Benz VITO (W639), 01.2003 - 10.2010</div>
															</div>
														</div>
													</div>
													<div class="both-cart-list__col col-price">
														<strong>68.00</strong>
													</div>
													<div class="both-cart-list__col col-discount">
														<s>68.00</s><i>-25%</i>
													</div>
													<div class="both-cart-list__col col-total">
														<strong>51.00</strong>
													</div>
												</div>
											</div>
										</div>

										<div class="both-cart-total">
											Итого: <span>100.97</span>
										</div>

										<div class="both-cart-data">
											<dl>
												<dt>Контакты:</dt>
												<dd>Тел. +372 5692 2864</dd>
												<dd>Константин Воскобойников</dd>
											</dl>
											<dl>
												<dt>Доставка:</dt>
												<dd>Tondi 11, Tallinn, Estonia <strong>(Kuller)</strong> к: 27.12.2021</dd>
											</dl>
										</div>

										<button class="btn btn-primary">OK</button>
									</div>
								</li>
								<li>
									<div class="reason-check">
										<label><input type="radio" name="rad-a" value="" />Другие причины</label>
									</div>
									<div class="reason-inner">
										<ul class="reason-inner__list">
											<li>
												<div class="reason-check">
													<label><input type="radio" name="rad-b" value="" />1 Запрос запчасти</label>
												</div>
												<div class="reason-inner">
													<div class="form-group">
														<textarea class="form-control" cols="" rows="5" placeholder="Опишите подробнее"></textarea>
													</div>
													<div class="form-group">
														<button class="btn btn-primary">OK</button>
													</div>
												</div>
											</li>
											<li>
												<div class="reason-check">
													<label><input type="radio" name="rad-b" value="" />2 Где мой заказ</label>
												</div>
												<div class="reason-inner">
													<div class="form-group">
														<textarea class="form-control" cols="" rows="5" placeholder="Опишите подробнее"></textarea>
													</div>
													<div class="form-group">
														<button class="btn btn-primary">OK</button>
													</div>
												</div>
											</li>
											<li>
												<div class="reason-check">
													<label><input type="radio" name="rad-b" value="" />3 Товар не подошёл/как вернуть</label>
												</div>
												<div class="reason-inner">
													<div class="form-group">
														<textarea class="form-control" cols="" rows="5" placeholder="Опишите подробнее"></textarea>
													</div>
													<div class="form-group">
														<button class="btn btn-primary">OK</button>
													</div>
												</div>
											</li>
											<li>
												<div class="reason-check">
													<label><input type="radio" name="rad-b" value="" />4 Проблема с оплатой</label>
												</div>
												<div class="reason-inner">
													<div class="form-group">
														<textarea class="form-control" cols="" rows="5" placeholder="Опишите подробнее"></textarea>
													</div>
													<div class="form-group">
														<button class="btn btn-primary">OK</button>
													</div>
												</div>
											</li>
											<li>
												<div class="reason-check">
													<label><input type="radio" name="rad-b" value="" />5 Вопросы по доставке</label>
												</div>
												<div class="reason-inner">
													<div class="form-group">
														<textarea class="form-control" cols="" rows="5" placeholder="Опишите подробнее"></textarea>
													</div>
													<div class="form-group">
														<button class="btn btn-primary">OK</button>
													</div>
												</div>
											</li>
											<li>
												<div class="reason-check">
													<label><input type="radio" name="rad-b" value="" />6 Вопросы связанные с оформлением заказа</label>
												</div>
												<div class="reason-inner">
													<div class="form-group">
														<textarea class="form-control" cols="" rows="5" placeholder="Опишите подробнее"></textarea>
													</div>
													<div class="form-group">
														<button class="btn btn-primary">OK</button>
													</div>
												</div>
											</li>
											<li>
												<div class="reason-check">
													<label><input type="radio" name="rad-b" value="" />7 Вопросы по бухгалтерии</label>
												</div>
												<div class="reason-inner">
													<div class="form-group">
														<textarea class="form-control" cols="" rows="5" placeholder="Опишите подробнее"></textarea>
													</div>
													<div class="form-group">
														<button class="btn btn-primary">OK</button>
													</div>
												</div>
											</li>
											<li>
												<div class="reason-check">
													<label><input type="radio" name="rad-b" value="" />8 Другое</label>
												</div>
												<div class="reason-inner">
													<div class="reason-important">
														Обязательно к заполнению
													</div>
													<div class="form-group">
														<textarea class="form-control" cols="" rows="5" placeholder="Опишите подробнее"></textarea>
													</div>
													<div class="form-group">
														<button class="btn btn-primary">OK</button>
													</div>
												</div>
											</li>
										</ul>
									</div>
								</li>
							</ul>

						</div>

					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade middle" id="modal-callstat-success" tabindex="-1" role="dialog" aria-labelledby="modal-callstat-success">
		<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="both-modal-result">
						<div class="both-modal-result__icon success">
							<svg><use xlink:href="/images/svg/main-sprite.svg#success"></use></svg>
						</div>
						<div class="both-modal-result__title">Спасибо, звонок зафиксирован</div>
						<ul class="both-modal-result__buttons">
							<li>
								<a href="#" class="btn btn-primary" data-dismiss="modal">OK, закрыть окно</a>
							</li>
							<li>
								<a href="#" class="icobox size_16">
									<i class="ico fa fa-pencil"></i>
									Редактировать
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}