{% extends 'base_index.html' %}
{% block title %}Рабочий кабинет{% endblock %}
{% block content %}
	<style type="text/css">
		.functions{
			width: 700px;
			float: left;
		}
		.themes, .homes, .password-change, .open-diplom{
			width: 600px;
			height: auto;
			margin-left: 100px;
			border: 1px solid #000;
			margin-bottom: 5px;
		}
		.name{
			width: 600px;
			height: 60px;
			line-height: 60px;
			color: #0c0c0c;
			font-size: 24px;
			font-style: bold;
			text-align: center;
		}
		.input-block{
			width: 100%;
			height: 60px;
		}
		form{
			width: 450px;
			margin: auto;
		}
		input{
			float: right;
		}
		textarea{
			float: right;
			width: 200px;
			height: 300px;	
		}
		.submit{
			float: none;
			margin-left: 190px;
			margin-bottom: 20px;
			margin-top: 10px;
		}
		.responce{
			font-size: 16px;
			font-style: bold;
		}
		.courses{
			float: right;
		}
	</style>

	<div class="functions">
		<div class="themes">
			<div class="name">Открыть уроки</div>
			<form id='lessons'>
				<div class="input-block">
					<span>Введите id пользователя</span>
					<input type="text" class="id-user" name='user' required>
					<div id='output-user'></div>
				</div>
				<div class="input-block">
					<span>Введите id курса</span>
					<input type="text" class="id-course" name="course" required>
					<div class="output-course"></div>
				</div>
				<div class="input-block">
					<span>Открыть домашки</span>
					<input type="checkbox" id="open-homes" name="homes">
				</div>
				<div class="input-block">
					<span>Отдельные темы</span>
					<input type="text" id="themes" name="themes">
				</div>
				<div class="lresp responce"></div>
				<input type="submit" class='submit'>
			</form>
		</div>
		<div class="homes">
			<div class="name">Открыть домашки</div>
			<form id='homes'>
				<div class="input-block">
					<span>Введите id пользователя</span>
					<input type="text" class="id-user" name="user" required>
					<div id='output-user'></div>
				</div>
				<div class="input-block">
					<span>Введите id курса</span>
					<input type="text" class="id-course" name="course" required>
					<div class="output-course"></div>
				</div>
				<div class="input-block">
					<span>Отдельные темы</span>
					<input type="text" id="themes" name="themes">
				</div>
				<div class="hresp responce"></div>
				<input type="submit" class='submit'>
			</form>
		</div>
		<div class="password-change">
			<div class="name">Поменять пароль</div>
			<form id='pass'>
				<div class="input-block">
					<span>Введите id пользователя</span>
					<input type="text" name="user" class="id-user">
					<div id='output-user'></div>
				</div>
				<div class="input-block">
					<span>Введите новый пароль</span>
					<input type="text" name="pass">
				</div>
				<div class="presp responce"></div>
				<input type="submit" name="" class='submit'>
			</form>
		</div>
	</div>
	<div class="courses">
		{% for c in courses %}
			<div class="course">{{ c.id }}: {{ c.title }}</div>
		{% endfor %}
	</div>
	
	<script type="text/javascript">

		$('.id-user').on('focusout', function(){
			outblock = $(this).next()
			value = $(this).val()
			console.log(value)
			$.ajax({
				url: 'find_user/',
				type: 'GET',
				data: {'user': value },
				success: function(data){
					console.log(data)
					if (data == 0){
						$(outblock).html('Пользователь не найден') // передлать элемент
					}
					else {
						$(outblock).html(data)
					}
				}
			})
		})

		$('.id-course').on('focusout', function(){
			value = $(this).val()
			outblock = $(this).next()
			console.log(outblock)
			$.ajax({
				url: 'find_course/',
				type: 'GET',
				data: {'course': value},
				success: function(data){
					if (data == 0){
						$(outblock).html('Курс не найден')
					}
					else {
						$(outblock).html(data)
					}
				}
			})
		})

		$('#lessons').on('submit', function(event){
			event.preventDefault()
			data = $(this).serialize()
			console.log(data)
			$.ajax({
				url: 'open_lessons/',
				type: 'GET',
				data: data,
				success: function(data){
					console.log(data)
					if (data == '0'){
						$('.lresp').html('Не получается обработать данные')
					}
					if (data == '1'){
						$('.lresp').html('Ошибка в работе')
					}
					if (data == '2'){
						$('.lresp').html('Уроки открыты')
					}
				}
			})
		})
		$('#homes').on('submit', function(event){
			event.preventDefault()
			data = $(this).serialize()
			console.log(data)
			$.ajax({
				url: 'open_homes/',
				type: 'GET',
				data: data,
				success: function(data){
					console.log(data)
					if (data == 0){
						$('.hresp').html('Не получается обработать данные')
					}
					if (data == 1){
						$('.hresp').html('Ошибка в работе')
					}
					if (data == 2){
						$('.hresp').html('Домашки открыты')
					}
				}
			})
		})
		$('#pass').on('submit', function(event){
			event.preventDefault()
			data = $(this).serialize()
			console.log(data)
			$.ajax({
				url: 'change_pass/',
				type: 'GET',
				data: data,
				success: function(data){
					console.log(data)
					if (data == 0){
						$('.presp').html('Не получается обработать данные')
					}
					if (data == 1){
						$('.presp').html('Ошибка в работе')
					}
					if (data == 2){
						$('.presp').html('Пароль сменен')
					}

				}
			})
		})
	</script>

{% endblock %}