{% extends '../_layouts/_main.twig' %}
{% block content %}
	<div class="cp-21945">
		<h1>Бонусная продавцов</h1>

		<form class="mb-24" action="" method="get">
			<div class="flex-row row-24 align-items-end">
				<div class="flex-col-auto">
					<div class="form-group max-w-200">
						<div class="form-label">Выбери период:</div>
						<div class="form-field">
							<select class="form-control min-w-150">
								<option value="">---</option>
								<option value="2023-10">2023-10</option>
								<option value="2023-9">2023-9</option>
								<option value="2023-8">2023-8</option>
								<option value="2023-7">2023-7</option>
								<option value="2023-6">2023-6</option>
								<option value="2023-5">2023-5</option>
								<option value="2023-4">2023-4</option>
								<option value="2023-3">2023-3</option>
								<option value="2023-2">2023-2</option>
								<option value="2023-1">2023-1</option>
								<option value="2022-12">2022-12</option>
								<option value="2022-11">2022-11</option>
								<option value="2022-10">2022-10</option>
								<option value="2022-9">2022-9</option>
								<option value="2022-8">2022-8</option>
								<option value="2022-7">2022-7</option>
								<option value="2022-6">2022-6</option>
								<option value="2022-5">2022-5</option>
								<option value="2022-4">2022-4</option>
								<option value="2022-3">2022-3</option>
								<option value="2022-2">2022-2</option>
								<option value="2022-1">2022-1</option>
							</select>
						</div>
						{#<div class="form-field watcher">
							<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" name="period" value="01.09.2023 - 20.09.2023" data-datepicker-options="format: D.MM.Y;" />
						</div>#}
					</div>
				</div>
				<div class="flex-col-auto">
					<button class="btn btn-primary" type="submit">Показать</button>
				</div>
			</div>
		</form>

		<div class="panel panel-tabs">
			<ul class="nav nav-tabs nav-tabs_b nav-tabs-responsive">
				{% include '_parts/_nav-tabs.twig' with {'activeTab' : 'money'} %}
			</ul>
			<div class="panel-body">

				<div class="panel panel-gray" style="max-width: 900px;">
					<div class="panel-body">
						<h6>Период: 01.06.2023 - 08.06.2023</h6>
						Кол-во твоих заказов выше среднего на <span class="color-green">193</span> заказа.
						Средняя маржа на один заказ ниже среднего на <span class="color-danger">17.32 €</span>.
						Причиной этого могут быть кредитные счета, которых сделано больше среднего по команде на <span class="color-danger">754.63 €</span>.
						Также причиной могут быть скидки, которых сделано меньше среднего на <span class="color-green">1,672.88 €</span>.
						В итоге твоя маржа не дотягивает до среднего по команде на <span class="color-danger">2,810.21 €</span>.
					</div>
				</div>

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

				<div class="cp-21945-money-total">
					<ul class="tiles">
						<li>
							<div class="tile">
								<div class="tile__head">Моя зарплата</div>
								<div class="tile__body">
									<div class="tile__money">2,321.01 €</div>
									<div class="mb-16">
										Мой потенциал: <span class="label square label-warning">4,718.29 €</span>
									</div>
									<table class="tile__table table-highlight">
										<tr>
											<td><a href="#">Базовая зарплата:</a></td>
											<td class="text-nowrap">263.00 €</td>
										</tr>
										<tr>
											<td><a href="#">Основные бонусы:</a></td>
											<td class="text-nowrap">1,135.92 €</td>
										</tr>
										<tr>
											<td><a href="#">Дополнительные бонусы:</a></td>
											<td class="text-nowrap">258.95 €</td>
										</tr>
										<tr>
											<td><a href="#">Обслуживание:</a></td>
											<td class="text-nowrap">663.15 €</td>
										</tr>
									</table>
								</div>
							</div>
						</li>
						<li>
							<div class="tile">
								<div class="tile__head">Моя маржа за период</div>
								<div class="tile__body">
									<div class="tile__money">1,921 €</div>
									<table class="tile__table table-highlight sm">
										<tr>
											<td>Сам сделал маржи:</td>
											<td class="text-nowrap">1,291 €</td>
										</tr>
										<tr>
											<td>Админы сделали маржи:</td>
											<td class="text-nowrap">610 €</td>
										</tr>
										<tr>
											<td>Договорные клиенты сделали маржи:</td>
											<td class="text-nowrap">20 €</td>
										</tr>
									</table>
									<div class="tile__progress">
										<div class="progress_mark" style="left: 50%;">
											<div class="top">1,699 €</div>
											<div class="bottom">Plan1 <br />Выживание</div>
										</div>
										<div class="progress_mark" style="left: 90%;">
											<div class="top">5,880 €</div>
											<div class="bottom">Plan2 <br />Развитие</div>
										</div>
										<img src="/images/icons/crown.png" alt="" style="position:absolute; top: 13px; right: 0; display: block; width: 16px;" />
										<div class="progress">
											<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
										</div>
									</div>
								</div>
								<div class="tile__footer">Бонуса заработано: <strong>508.77 €</strong></div>
							</div>
						</li>
						<li>
							<div class="tile">
								<div class="tile__head">Маржа команды за период</div>
								<div class="tile__body">
									<div class="tile__money">26,332 €</div>
									<table class="tile__table table-highlight sm">
										<tr>
											<td>Команда сделала маржи:</td>
											<td class="text-nowrap">24,182 €</td>
										</tr>
										<tr>
											<td>Админы сделали маржи:</td>
											<td class="text-nowrap">1429 €</td>
										</tr>
										<tr>
											<td>Договорные клиенты сделали маржи:</td>
											<td class="text-nowrap">721 €</td>
										</tr>
									</table>
									<div class="tile__progress">
										<div class="progress_mark" style="left: 100%;">
											<div class="top">29,400 €</div>
											<div class="bottom">Plan3 <br />Командный</div>
										</div>
										<div class="progress">
											<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>
										</div>
									</div>
								</div>
								<div class="tile__footer">Бонуса заработано: <strong>0.00 €</strong></div>
							</div>
						</li>
						<li>
							<div class="tile">
								<div class="tile__head">Мое обслуживание</div>
								<div class="tile__body">
									<div class="tile__money">98.00%</div>
									<table class="tile__table table-highlight sm">
										<tr>
											<td>Всего отзывов получено:</td>
											<td class="text-nowrap">36</td>
										</tr>
										<tr>
											<td>Кол-во отзывов выше цели:</td>
											<td class="text-nowrap">32</td>
										</tr>
										<tr>
											<td>Кол-во отзывов ниже цели:</td>
											<td class="text-nowrap">4</td>
										</tr>
									</table>
									<div class="tile__progress">
										<div class="progress_mark" style="left: 97%;">
											<div class="top">97.00 %</div>
											<div class="bottom">Цель <br />по обслуживанию</div>
										</div>
										<div class="progress">
											<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="97" aria-valuemin="0" aria-valuemax="100" style="width: 97%;"></div>
										</div>
									</div>
								</div>
								<div class="tile__footer">Бонуса заработано: <strong>663.15 €</strong></div>
							</div>
						</li>
					</ul>
				</div>

				{% include '_parts/_money-info.twig' %}

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

				<h2>Моя команда: Estonia</h2>
				<ul class="mb-24 list-unstyled">
					<li><label><input type="radio" name="showResult" checked /> Показать результаты за 08.06.2023 (сегодня)</label></li>
					<li><label><input type="radio" name="showResult" /> Показать результаты за 01.06.2023 - 08.06.2023 (период)</label></li>
				</ul>
				<div class="mb-8">
					<span class="label label-info">*Сложение всех Plan2 (Развитие) дает в сумме Plan3 (Командный)</span>
				</div>
				<div class="flex-row">
					<div class="mb-24 flex-col-12 flex-col-md-7">
						<table class="cp-21945-table">
							<thead>
							<tr>
								<th>Продавец</th>
								<th>Место</th>
								<th>Маржа</th>
								<th>Plan2 (Развитие)</th>
								<th>Разница</th>
								<th>Вклад в план, %</th>
							</tr>
							</thead>
							<tbody>
							{% set tableDataA = [
								{
									"userId" : 1,
									"userName" : "Dmitri Zujev",
									"place" : 1,
									"margin" : 1921,
									"plan2" : 5880
								},{
									"userId" : 2,
									"userName" : "Gert Paalberg",
									"place" : 2,
									"margin" : 6780,
									"plan2" : 5880
								},{
									"userId" : 3,
									"userName" : "Mark Potasenkov",
									"place" : 3,
									"margin" : 2270,
									"plan2" : 5880
								},{
									"userId" : 4,
									"userName" : "Artjom Ivanov",
									"place" : 4,
									"margin" : 3540,
									"plan2" : 5880
								},{
									"userId" : 5,
									"userName" : "Alex Paalberg",
									"place" : 5,
									"margin" : 3210,
									"plan2" : 5880
								}
							] %}
							{% set totalMargin = 0 %}
							{% set totalPlan = 0 %}
							{% for tr in tableDataA %}
								<tr data-user-id="{{ tr.userId }}" data-ajax="/dev/ajax/21945/{{ tr.userId }}.php">
									<td>{{ tr.userName }}</td>
									<td>{{ tr.place }}</td>
									<td>{{ tr.margin|number_format(2) }} €</td>
									<td>{{ tr.plan2|number_format(2) }} €</td>
									<td><span class="color-{{ (tr.margin > tr.plan2) ? 'green' : 'danger' }}">{{ (tr.margin - tr.plan2)|number_format(2) }} €</span></td>
									<td>{{ ((tr.margin / tr.plan2)*100)|number_format(2) }}%</td>
								</tr>
								{% set totalMargin = totalMargin + tr.margin %}
								{% set totalPlan = totalPlan + tr.plan2 %}
							{% endfor %}
							</tbody>
							<tfoot>
							<tr class="color-gray">
								<th>Среднее на команду</th>
								<th></th>
								<th>{{ (totalMargin/tableDataA|length)|number_format(2) }} €</th>
								<th>{{ (totalPlan/tableDataA|length)|number_format(2) }} €</th>
								<th>{{ ((totalMargin/tableDataA|length) - (totalPlan/tableDataA|length))|number_format(2) }} €</th>
								<th>{{ (((totalMargin/tableDataA|length) / (totalPlan/tableDataA|length))*100)|number_format(2) }}%</th>
							</tr>
							<tr>
								<th>Всего на команду</th>
								<th></th>
								<th>{{ totalMargin|number_format(2) }} €</th>
								<th>{{ totalPlan|number_format(2) }} €</th>
								<th>{{ (totalMargin - totalPlan)|number_format(2) }} €</th>
								<th>{{ ((totalMargin / totalPlan)*100)|number_format(2) }}%</th>
							</tr>
							</tfoot>
						</table>
					</div>
					<div class="mb-24 flex-col-12 flex-col-md-5">
						<h5>Дополнительные показатели</h5>
						<div class="cp-21945-content-additionally">
							{#<table class="cp-21945-table table-highlight">
								<thead>
								<tr>
									<th>Показатель</th>
									<th>Dmitri Zujev</th>
									<th>Среднее</th>
									<th>Разница</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td>Писем отвечено</td>
									<td>4</td>
									<td>23</td>
									<td><span class="color-danger">-19</span></td>
								</tr>
								<tr>
									<td>Звонков отвечено</td>
									<td>119</td>
									<td>83</td>
									<td><span class="color-green">+36</span></td>
								</tr>
								<tr>
									<td>Перезвонил за 15минут</td>
									<td>61</td>
									<td>120</td>
									<td><span class="color-danger">-59</span></td>
								</tr>
								<tr>
									<td>Перезвонил после 15минут</td>
									<td>30</td>
									<td>5</td>
									<td><span class="color-green">+25</span></td>
								</tr>
								<tr>
									<td>Заказов выдано</td>
									<td>182</td>
									<td>213</td>
									<td><span class="color-danger">-31</span></td>
								</tr>
								</tbody>
							</table>#}
						</div>
					</div>
				</div>

				<div class="flex-row">
					<div class="mb-24 flex-col-12 flex-col-md-7">
						<table class="cp-21945-table">
							<thead>
							<tr>
								<th>Продавец</th>
								<th>Заказы</th>
								<th>Оборот</th>
								<th>Потери</th>
								<th>Маржа</th>
								<th>Маржа, %</th>
								<th>Средний заказ</th>
							</tr>
							</thead>
							<tbody>
							{% set tableDataB = [
								{
									"userId" : 1,
									"userName" : "Dmitri Zujev",
									"ordersCount" : 382,
									"turnover" : 26095.51,
									"losses" : 21750.41
								},{
									"userId" : 2,
									"userName" : "Gert Paalberg",
									"ordersCount" : 247,
									"turnover" : 24095.51,
									"losses" : 18750
								},{
									"userId" : 3,
									"userName" : "Mark Potasenkov",
									"ordersCount" : 332,
									"turnover" : 27040,
									"losses" : 1850.5
								},{
									"userId" : 4,
									"userName" : "Artjom Ivanov",
									"ordersCount" : 145,
									"turnover" : 14070.7,
									"losses" : 2175
								},{
									"userId" : 5,
									"userName" : "Alex Paalberg",
									"ordersCount" : 321,
									"turnover" : 22305,
									"losses" : 2150
								}
							] %}
							{% set totalOrders = 0 %}
							{% set totalTurnover = 0 %}
							{% set totalLosses = 0 %}
							{% for tr in tableDataB %}
								<tr data-user-id="{{ tr.userId }}" data-ajax="/dev/ajax/21945/{{ tr.userId }}.php">
									<td>{{ tr.userName }}</td>
									<td>{{ tr.ordersCount }}</td>
									<td>{{ tr.turnover|number_format(2) }} €</td>
									<td>-{{ tr.losses|number_format(2) }} €</td>
									<td>{{ (tr.turnover - tr.losses)|number_format(2) }} €</td>
									<td>{{ (((tr.turnover - tr.losses) / tr.turnover)*100)|number_format(2) }}</td>
									<td>{{ (tr.turnover / tr.ordersCount)|number_format(2) }} €</td>
								</tr>
								{% set totalOrders = totalOrders + tr.ordersCount %}
								{% set totalTurnover = totalTurnover + tr.turnover %}
								{% set totalLosses = totalLosses + tr.losses %}
							{% endfor %}
							</tbody>
							<tfoot>
							<tr class="color-gray">
								<th>Среднее на команду</th>
								<th>{{ totalOrders / tableDataB|length }}</th>
								<th>{{ (totalTurnover / tableDataB|length)|number_format(2) }} €</th>
								<th>-{{ (totalLosses / tableDataB|length)|number_format(2) }} €</th>
								<th>{{ ((totalTurnover / tableDataB|length) - (totalLosses / tableDataB|length))|number_format(2) }} €</th>
								<th>{{ (((totalTurnover - totalLosses) / totalTurnover) * 100)|number_format(2) }} %</th>
								<th>{{ (totalTurnover / totalOrders)|number_format(2) }} €</th>
							</tr>
							<tr>
								<th>Всего на команду</th>
								<th>{{ totalOrders }}</th>
								<th>{{ totalTurnover|number_format(2) }} €</th>
								<th>-{{ totalLosses|number_format(2) }} €</th>
								<th>{{ (totalTurnover - totalLosses)|number_format(2) }} €</th>
								<th>{{ (((totalTurnover - totalLosses) / totalTurnover) * 100)|number_format(2) }} %</th>
								<th>{{ (totalTurnover / totalOrders)|number_format(2) }} €</th>
							</tr>
							</tfoot>
						</table>
					</div>
					<div class="mb-24 flex-col-12 flex-col-md-5">
						<h5>Потери</h5>
						<div class="cp-21945-content-losses">
							{#<table class="cp-21945-table table-highlight">
								<thead>
								<tr>
									<th>Тип потери</th>
									<th>Dmitri Zujev</th>
									<th>Среднее</th>
									<th>Разница</th>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td>Потери продавца</td>
									<td>-6,081.75 €</td>
									<td>-7,000.00 €</td>
									<td><span class="color-green">+918.25 €</span></td>
								</tr>
								<tr>
									<td>Кредитные счета</td>
									<td>-3,754.63 €</td>
									<td>-3,000.00 €</td>
									<td><span class="color-danger">-754.63 €</span></td>
								</tr>
								<tr>
									<td>Скидки</td>
									<td>-2,327.12 €</td>
									<td>-4,000.00 €</td>
									<td><span class="color-green">+1,672.88 €</span></td>
								</tr>
								<tr>
									<td>Закупка и отчисления</td>
									<td>-15,668.66 €</td>
									<td>-20,000.00 €</td>
									<td><span class="color-green">+4,331.34 €</span></td>
								</tr>
								</tbody>
							</table>#}
						</div>
					</div>
				</div>

				<br />

				<h2><span class="label label-warning square">Dmitri Zujev</span></h2>
				<div class="mb-24">
					<img src="https://cdn.bcs-express.ru/article-image/202210" alt="" style="display: block; max-width: 100%;" />
				</div>

				<form action="" method="">
					<div class="mb-24 flex-row row-16 align-items-end">
						<div class="flex-col-auto">
							<div class="form-group">
								<div class="form-label">Сортировка 1</div>
								<div class="form-field">
									<select class="form-control">
										<option value="">...</option>
										<option value="">Заказ</option>
										<option value="">Клиент</option>
										<option value="">Оборот</option>
										<option value="">Маржа</option>
									</select>
								</div>
							</div>
						</div>
						<div class="flex-col-auto">
							<div class="form-group">
								<div class="form-label">Сортировка 2</div>
								<div class="form-field">
									<select class="form-control">
										<option value="">...</option>
										<option value="">Заказ</option>
										<option value="">Клиент</option>
										<option value="">Оборот</option>
										<option value="">Маржа</option>
									</select>
								</div>
							</div>
						</div>
						<div class="flex-col-auto">
							<div class="form-group">
								<div class="form-label">Статус</div>
								<div class="form-field">
									<select class="form-control">
										<option value="">Все</option>
										<option value="">Оплачен</option>
										<option value="">Счёт отправлен</option>
									</select>
								</div>
							</div>
						</div>
						<div class="flex-col-auto">
							<div class="form-group">
								<div class="form-label">Тип документа</div>
								<div class="form-field">
									<select class="form-control">
										<option value="">Все</option>
										<option value="">Счёт</option>
										<option value="">Кредитный счёт</option>
									</select>
								</div>
							</div>
						</div>
					</div>
					<ul class="mb-24 list-inline">
						<li><label><input type="radio" name="sort" value="" /> A-Z</label></li>
						<li><label><input type="radio" name="sort" value="" /> Z-A</label></li>
						<li><label><input type="radio" name="sort" value="" /> A-Z</label></li>
						<li><label><input type="radio" name="sort" value="" /> Z-A</label></li>
					</ul>

					<br />

					<h4>Заказы</h4>
					<div class="max-w-500">
						<table class="cp-21945-table table-highlight">
							<thead>
							<tr>
								<th>Заказ</th>
								<th class="text-left">Клиент</th>
								<th>Оборот</th>
								<th>Маржа</th>
							</tr>
							</thead>
							<tbody>
							{% for i in 1..10 %}
								<tr>
									<td><a href="#">4749622</a></td>
									<td class="text-left">Denis Korolkevich</td>
									<td>162.44 €</td>
									<td>162.44 €</td>
								</tr>
							{% endfor %}
							</tbody>
						</table>
					</div>

				</form>
			</div>
		</div>
	</div>
{% endblock %}
{% block footerJS %}
	{{ parent() }}
	<script>
		$(function(){
			$('.cp-21945-table .table-link').on('click', function(){
				var tr = $(this),
					id = tr.data('href'),
					$table = tr.closest('.cp-21945-table');
				if( !$(id).length ) return;
				var tabContent = $(id).closest('.tab-content');
				$('.table-link.active', $table).removeClass('active');
				$('.tab-pane.active', tabContent).removeClass('active');
				$(this).addClass('active');
				$(id).addClass('active');
			});
			if( !$('.cp-21945-table tr[data-ajax].active').length ){
				$('.cp-21945-table tr[data-ajax]').first().addClass('active');
			}

			loadData($('.cp-21945-table tr[data-ajax].active').first());
			$('.cp-21945-table tr[data-ajax]').on('click', function(){
				loadData($(this));
			});

			function loadData(tr){
				var route = tr.data('ajax');
				var id = tr.data('user-id');
				somethingLoading($('.cp-21945-content-additionally'));
				somethingLoading($('.cp-21945-content-losses'));
				$.ajax({
					method: "POST",
					url: route,
					cache : false,
				}).done(function(response){
					$('.cp-21945-table tr[data-ajax].active').removeClass('active');
					$('.cp-21945-table tr[data-user-id="'+id+'"]').addClass('active');

					$('.cp-21945-content-additionally').html(response.additionally);
					$('.cp-21945-content-losses').html(response.losses);
				}).fail(function(jqXHR, textStatus){
					globalNotifyAdd('Something went wrong. Please try again later', 'alert-danger timer');
				}).always(function(){
					somethingLoaded($('.cp-21945-content-additionally'));
					somethingLoaded($('.cp-21945-content-losses'));
				});
			}
		});
	</script>
{% endblock %}