{% extends('index.html') %}

{% block css %}
<link type="text/css" rel="stylesheet" data-reinitializer-once="true" href="/css/list.css">
<link type="text/css" rel="stylesheet" data-reinitializer-once="true" href="/css/pages/tasks.css">
<link type="text/css" rel="stylesheet" data-reinitializer-once="true" href="/css/icons/user.css">
<link type="text/css" rel="stylesheet" data-reinitializer-once="true" href="/css/icons/user_add.css">
<link type="text/css" rel="stylesheet" data-reinitializer-once="true" href="/css/icons/work_alt.css">
<link type="text/css" rel="stylesheet" data-reinitializer-once="true" href="/css/icons/home.css">
<link type="text/css" rel="stylesheet" data-reinitializer-once="true" href="/css/icons/timer.css">
<link type="text/css" rel="stylesheet" data-reinitializer-once="true" href="/css/icons/shopping_cart.css">
<link type="text/css" rel="stylesheet" data-reinitializer-once="true" href="/css/icons/search.css">
<link type="text/css" rel="stylesheet" data-reinitializer-once="true" href="/css/icons/enter.css">
{% endblock %}

{% block body %}
<section id="tasks" class="panel medium list">
	<form id="actions" class="row menu separated" onsubmit="return false">
		<label for="actions">
			{% if account.type == 'administrator' or account.type == 'operator' or account.type == 'market' %}
			<button class="grass dense" onclick="tasks.create()">Создать</button>
			{% endif %}
			{% if account.type == 'administrator' or account.type == 'operator' %}
			<button class="sea" onclick="payments.workers()">Сотрудники</button>
			<button class="sea" onclick="payments.markets()">Магазины</button>
			{% endif %}
		</label>
	</form>
	<form id="filters" class="row menu stretched" onsubmit="return false">
		<label for="filters">
			<input class="snow" type="date" value="{{ from|date('Y-m-d') }}"
				onchange="this.setAttribute('value', this.value); tasks.filter('from', new Date(this.value) / 1000); tasks.reinit()"
				title="Временной промежуток и ..." />
			<input class="snow" type="date" value="{{ to is empty ? '' : to|date('Y-m-d') }}"
				onchange="this.setAttribute('value', this.value); tasks.filter('to', new Date(this.value) / 1000); tasks.reinit()"
				title="Временной промежуток и ..." />
			<div class="range small">
				<input id="rating" class="sand" type="range"
					value="{{ cookies.tasks_filter_rating ?? buffer.tasks.filters.rating ?? 0 }}" min="0" max="5" step="1"
					oninput="this.nextElementSibling.innerText = this.value; this.nextElementSibling.style.setProperty('--left', ((this.value / 5) * (this.offsetWidth - 24) + 12) + 'px');"
					onchange="tasks.filter('rating', this.value); tasks.reinit();" title="... и с данным минимальным рейтингом" />
				<i style="--left: 0;" class="value unselectable">{{ cookies.tasks_filter_rating ?? buffer.tasks.filters.rating
					?? 0 }}</i>
				<script>
				  document.getElementById('rating').oninput();
					document.addEventListener("DOMContentLoaded", function() {
					  // Initialization of input-event
				  	document.getElementById('rating').oninput();
				  });
				</script>
			</div>
			<button class="{{ confirmed ?? 'earth' }}" onclick="tasks.filter('confirmed', null, this); tasks.reinit()" {% if
				confirmed=='sand' %}title="... и подтверждённые" {% elseif confirmed=='river' %}title="... или подтверждённые"
				{% endif %}>Подтверждена</button>
			<button class="{{ waiting ?? 'earth' }}" onclick="tasks.filter('waiting', null, this); tasks.reinit()" {% if
				waiting=='sand' %}title="... и неподтверждённые" {% elseif waiting=='river' %}title="... или неподтверждённые"
				{% endif %}>Неподтверждена</button>
			{% if account.type == 'administrator' or account.type == 'operator' or account.type == 'market' %}
			<button class="{{ published ?? 'earth' }}" onclick="tasks.filter('published', null, this); tasks.reinit()" {% if
				published=='sand' %}title="... и опубликованные" {% elseif published=='river' %}title="... или" {% endif
				%}>Опубликована</button>
			<button class="{{ unpublished ?? 'earth' }}" onclick="tasks.filter('unpublished', null, this); tasks.reinit()" {%
				if unpublished=='sand' %}title="... и неопубликованные" {% elseif unpublished=='river'
				%}title="... или неопубликованные" {% endif %}>Неопубликована</button>
			{% endif %}
			<button class="{{ problematic ?? 'earth' }}" onclick="tasks.filter('problematic', null, this); tasks.reinit()" {%
				if problematic=='sand' %}title="... и проблемные" {% elseif problematic=='river' %}title="... или проблемные" {%
				endif %}>Проблемная</button>
			{% if account.type == 'administrator' or account.type == 'operator' %}
			<button class="{{ hided ?? 'earth' }}" onclick="tasks.filter('hided', null, this); tasks.reinit()" {% if
				hided=='sand' %}title="... и скрытые" {% elseif hided=='river' %}title="... или скрытые" {% endif
				%}>Скрыта</button>
			{% endif %}
			<button class="{{ completed ?? 'earth' }}" onclick="tasks.filter('completed', null, this); tasks.reinit()" {% if
				completed=='sand' %}title="... и завершённые" {% elseif completed=='river' %}title="... или завершённые" {%
				endif %}>Завершена</button>
		</label>
	</form>
	<search class="row menu wide stretched">
		<label class="solid">
			<i class="icon search"></i>
			<input id="search" type="search" name="search" class="snow merged right"
				onkeydown="if (event.keyCode === 13) this.nextElementSibling.click()"
				value="{{ cookies.tasks_filter_search ?? buffer.tasks.filters.search }}"
				placeholder="Глобальный поиск по задачам" />
			<button class="sea merged left" onclick="tasks.search(this.previousElementSibling, this)">Поиск</button>
		</label>
	</search>
	<div id="title" class="row unselectable">
		<span data-column="date" class="button">Дата</span>
		<span data-column="worker" class="button" title="Сотрудник"><i class="icon bold user"></i></span>
		<span data-column="name" class="button">ФИО</span>
		<span data-column="work" class="button">Работа</span>
		<span data-column="start" class="button" title="Начало"><i class="icon work alt"></i></span>
		<span data-column="end" class="button" title="Окончание"><i class="icon home"></i></span>
		<span data-column="hours" class="button" title="Время работы"><i class="icon timer"></i></span>
		<span data-column="market" class="button" title="Магазин"><i class="icon bold shopping cart"></i></span>
		<span data-column="address" class="button">Адрес</span>
		<span data-column="type" class="button">Тип</span>
		<span data-column="tax" class="button">ИНН</span>
		<span data-column="commentary" class="button">Комментарий</span>
		<span data-column="chat" class="button">Чат</span>
	</div>
</section>
<script data-reinitializer-once="true">
	if (typeof window.tasks_main_initialized === 'undefined') {
	  // Не выполнялся скрипт

	  document.addEventListener('tasks.initialized', (e) => {
      // Инициализированы задачи

			// Инициализация допустимой страницы для выполнения
			e.detail.tasks.page = 'tasks';

			// Инициализация страниц
			e.detail.tasks.init();

			// Блокировка от повторного выполнения
			window.tasks_main_initialized = true;
		});
	}
</script>
<script data-reinitializer-once="true">
	if (typeof window.tasks_scroll_initialized === 'undefined') {
		// Не выполнялся скрипт

		window.onscroll = function(e) {
			// Инициализация чтения новых задач при достижения конца страницы

			if (core.page === 'tasks') {
				// Инициализирована требуемая для выполнения страница
						
				if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) tasks.read();
			}
		};

		// Блокировка от повторного выполнения
		window.tasks_scroll_initialized = true;
	}
</script>
{% endblock %}

{% block js %}
<script type="text/javascript" data-reinitializer-once="true" src="/js/imask-7.1.0-alpha.js" defer></script>
<script type="text/javascript" src="/js/tasks.js" defer></script>
<script type="text/javascript" src="/js/workers.js" defer></script>
<script type="text/javascript" src="/js/markets.js" defer></script>
<script type="text/javascript" src="/js/chat.js" defer></script>
<script type="text/javascript" src="/js/payments.js" defer></script>
{% endblock %}
