{% 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>
				</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' : 'time'} %}
			</ul>
			<div class="panel-body">

				<div class="cp-21945-time-alerts">
					<div class="alert alert-danger d-inline-block">
						<div class="flex-row row-8">
							<div class="flex-col-auto">
								<svg width="16" height="16"><use xlink:href="/images/svg/main-sprite.svg#info"></use></svg>
							</div>
							<div class="flex-col">
								<strong>Данные не подтверждены</strong>
								<br />Ответственный за верность данных в таблице: <strong>Artur Trussov</strong>
							</div>
						</div>
					</div>

					<div class="alert alert-success d-inline-block">
						<div class="flex-row row-8">
							<div class="flex-col-auto">
								<svg width="16" height="16"><use xlink:href="/images/svg/main-sprite.svg#success"></use></svg>
							</div>
							<div class="flex-col">
								<strong>Данные подтверждены: 05.10.2023 15:34:20</strong>
								<br />Ответственный за верность данных в таблице: <strong>Artur Trussov</strong>
							</div>
						</div>
					</div>
				</div>

				<div class="cp-21945-time-table">
					<div class="max-w-950">
						<div class="mb-16 text-right">
							<button class="btn btn-success">Подтвердить верность данных в таблице</button>
						</div>
						<table class="table table-striped table-bordered">
							<thead class="thead-gray">
							<tr>
								<th>Период</th>
								<th>Продавец</th>
								<th class="text-right">Команда</th>
								<th class="text-right">Норм часы</th>
								<th class="text-right">План часы</th>
								<th class="text-right">Факт часы</th>
								<th class="text-right">Переработка</th>
								<th class="text-right"></th>
							</tr>
							</thead>
							<tbody>
							{% for i in 1..4 %}
							<tr>
								<td>2023-07</td>
								<td>Dmitri Zujev</td>
								<td class="text-right">Estonia</td>
								<td class="text-right">168.00</td>
								<td class="text-right bg-yellow --change-value" data-href="#" data-form="#tFormChange" data-default="100.00">100.00</td>
								<td class="text-right bg-yellow --change-value" data-href="#" data-form="#tFormChange" data-default="104.00">104.00</td>
								<td class="text-right">4.00</td>
								<td class="text-right"><a href="#" class="trash-link" title="Удалить продавца" onclick="return confirm('Удалить продавца и его часы из таблицы?')"><i class="fa fa-trash"></i></a></td>
							</tr>
							{% endfor %}
							</tbody>
						</table>
					</div>
				</div>

				<div class="cp-21945-time-add-user">
					<div class="mb-4">Добавить в таблицу</div>
					<div class="flex-row row-16">
						<div class="flex-col-auto min-w-250">
							<select class="form-control selectpicker" data-container="body" title="Выберите продавца">
								<optgroup label="Еstonia">
									<option value="1">Dmitri Zujev</option>
									<option value="2">Gert Paalberg</option>
								</optgroup>
								<optgroup label="Finland">
									<option value="3">Raiko Loor</option>
									<option value="4">Andrus Vaal</option>
								</optgroup>
							</select>
						</div>
						<div class="flex-col-auto"><button class="btn btn-default">Добавить</button></div>
					</div>
				</div>

				<h2>Лог страницы</h2>
				<div class="max-w-950">
					<table class="table table-striped table-bordered">
						<thead class="thead-gray">
						<tr>
							<th>Дата (свежие сверху)</th>
							<th>Админ</th>
							<th>Период</th>
							<th>Продавец</th>
							<th>Показатель / Действие</th>
							<th class="text-right">Старое значение</th>
							<th class="text-right">Новое значение</th>
							<th class="text-right">date_cron_processing</th>
						</tr>
						</thead>
						<tbody>
						{% for i in 1..2 %}
						<tr>
							<td>07.10.2023 10:50:43</td>
							<td>Artur Trussov</td>
							<td>2023-07</td>
							<td>Dmitri Zujev</td>
							<td>Добавление юзера</td>
							<td class="text-right">0</td>
							<td class="text-right">1</td>
							<td class="text-right">null</td>
						</tr>
						<tr>
							<td>06.10.2023 14:07:12</td>
							<td>System</td>
							<td>2023-07</td>
							<td>Ruslan Krutikov</td>
							<td>План часы</td>
							<td class="text-right">0</td>
							<td class="text-right">168</td>
							<td class="text-right">07.10.2023 10:50:43</td>
						</tr>
						{% endfor %}
						</tbody>
					</table>
				</div>

			</div>
		</div>
	</div>
	<template id="tFormChange">
		<form class="form-change-value" action="" method="">
			<div class="flex-row row-8 align-items-center justify-content-end">
				<div class="flex-col-auto">
					<i class="fa fa-rotate-left --close"></i>
				</div>
				<div class="flex-col-auto">
					<button type="submit" class="btn btn-primary --save">OK</button>
				</div>
				<div class="flex-col-auto">
					<input class="form-control text-right --value" type="text" value="" />
				</div>
			</div>
		</form>
	</template>
{% endblock %}
{% block footerJS %}
	{{ parent() }}
	<script>
		$(function(){
			$('.--change-value').on('click', function(){
				if($(this).is('.in')) return;
				var $p = $(this),
					defVal = $p.data('default'),
					route = $p.data('href'),
					$template = $($p.data('form')).html();
				$p.html($template);
				$p.addClass('in');
				$('.--value', $p).val(defVal).focus();
				$('.--close', $p).on('click', function(){
					$p.html(defVal);
					$p.removeClass('in');
					return false;
				});
				$('form', $p).on('submit', function(){
					var newVal = $('.--value', $p).val();

					//Need AJAX Send Data !!!

					$p.data('default', newVal);
					$p.html(newVal);
					$p.removeClass('in');
				});
				return false;
			});
		});
	</script>
{% endblock %}