---

<!DOCTYPE html>
	<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>

	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
	<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
	<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
	<%@ taglib prefix="s" uri="http://www.springframework.org/tags" %>
	<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

	<%@ page session="true" language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

	<html lang="ru">

	<jsp:include page="head.jsp"/>

	<body>

	<script type="text/javascript" src="<c:url value='/js/${version}/queryAction.js'/>"></script>
	<script type="text/javascript" src="<c:url value='/js/${version}/queryTable.js'/>"></script>
	<script type="text/javascript">

			$(function () {
					//Лукап для типов счетов
					$("#accountType").select2({
							placeholder: "Вид счета для начисления ИД",
							allowClear: true,
							minimumInputLength: 0,
							id: function (e) {
									return e.id;
							},
							ajax: {
									url: "queryModel?queryModelCode=3xP2Z5SI",
									dataType: 'json',
									data: function (term, page) {
											return {
													term: term,
													maxResults: 10
											};
									},
									results: function (data, page) {
											return {
													results: data.list
											};
									}
							},
							formatResult: formatResult,
							formatSelection: formatSelection,
							escapeMarkup: function (m) {
									return m;
							},
							initSelection: function (element, callback) {
									var id = $(element).val();
									$.ajax("queryModel?queryModelCode=UKX8qvpa", {
											dataType: "json",
											data: {
													id: id
											}
									}).done(function (data) {
											callback(data);
									});
							}

					}).on("change", function (e) {
							$("#investmentRevenueAccountTypeId").attr("value", e.val);
					});

					function formatResult(data) {
							return '<div>' + data.name + '</div>';
					}

					function formatSelection(data) {
							return data.name;
					}


					//Лукап для групп счетов
					$("#accountTypeGroup").select2({
							placeholder: "Наименование группы счетов",
							allowClear: true,
							minimumInputLength: 0,
							id: function (e) {
									return e.id;
							},
							ajax: {
									url: "queryModel?queryModelCode=CHGYKQIO",
									dataType: 'json',
									data: function (term, page) {
											return {
													term: term,
													maxResults: 10
											};
									},
									results: function (data, page) {
											return {
													results: data.list
											};
									}
							},
							formatResult: formatGroupResult,
							formatSelection: formatGroupSelection,
							escapeMarkup: function (m) {
									return m;
							},
							initSelection: function (element, callback) {
									var id = $(element).val();
									$.ajax("queryModel?queryModelCode=ooOKjrbd", {
											dataType: "json",
											data: {
													id: id
											}
									}).done(function (data) {
											callback(data);
									});
							}

					}).on("change", function (e) {
							$("#accountTypeGroupId").attr("value", e.val);
					});


					function formatGroupResult(data) {
							return '<div>' + data.name + '</div>';
					}

					function formatGroupSelection(data) {
							return data.name;
					}

				function setCalcInvestmentRevenue(type) {
					switch (type) {
						case true: {
							$('#accountType').select2('enable');
						}
							break;
						case false: {
							$('#accountType').select2('disable');
							$("#accountType").select2("val", "");
							$("#investmentRevenueAccountTypeId").val("");
						}
							break;
					}
				}


				$( "[name='calcInvestmentRevenue']" ).change(function() {
					setCalcInvestmentRevenue($( this ).prop('checked'))
				});


					// Таблица видов групп счетов с мнемониками
					var accountTypeGroupTable = new QueryTable("account_type_group", {
							onRowSelect: function (data, index) {
									accountTypeTable.reload();
							},
							onRowDeselect: function (data, index) {
									accountTypeTable.reload();
							},
							drawCallback: function (settings) {
									accountTypeTable.reload();
							}
					});

					// Таблица видов счетов с мнемониками
					var accountTypeTable = new QueryTable("account_type", {

							initComplete: function (queryAction) {
									accountTypeTable.addActionButton("changeButton", "Изменить", changeAccountTypeTable, "btn-primary", true);
							},
							onRowSelect: function (data, index) {
							}
					}, selected);

					//Сохранение изменений	счетов
					var saveAction = new QueryAction("ROSvyskY", {
							initComplete: function (queryAction) {
									saveAction.enable();
							},
							actionComplete: function (data) {
									$("#changeFormModal").modal('hide');
									accountTypeTable.reload();
							}

					}, getData);

					function getData() {
							var data = {};

							$("#changeForm").serializeArray().map(function (x) {
									data[x.name] = x.value;
							});
							data.calcInvestmentRevenue = $('#calcInvestmentRevenue').prop('checked'); 
							return data;
					}

					//FUNCTIONS


					function changeAccountTypeTable() {
							var data = accountTypeTable.data();

							setCalcInvestmentRevenue(data.calcInvestmentRevenueId);

							$("#accountTypeGroup").select2("val", data.accountTypeGroupId);
							$("#accountType").select2("val", data.investmentRevenueAccountTypeId);
							$("#investmentRevenueAccountTypeId").val(data.investmentRevenueAccountTypeId);
							$('#calcInvestmentRevenue').prop('checked',(data.calcInvestmentRevenueId == 'true'));
							$("#accountTypeGroupId").val(data.accountTypeGroupId);
							$("#accountTypeId").val(data.id);
							$("#accountName").val(data.name);
							$("#shortName").val(data.shortName);

							$("#changeFormModal").modal('show');
					}
					// <-- Наконечный по задаче 4593
					// Модернизировал функцию для вывода мнемоников без групп
					// Добавил переключатель
					// <--
					let isGroup = true;
					function selected() {
							var data = accountTypeGroupTable.data();
							if (isGroup) {
								return {
									accountTypeGroupId: (data ? data.id : -1),
									isGroup: 1
								}	
							} else {
								return {
									isGroup: 0
								}
							}							
					}
					// Показываем все мнемоники без групп по нажатию на чекбокс
					let groupTable = document.getElementById("account_type_group");
					let checkBox = document.getElementById("grpChkbx");
					
					checkBox.addEventListener("click", () => {
						console.warn(accountTypeTable);
						if (checkBox.checked) {
							groupTable.style.display = "none";
							isGroup = false;
							accountTypeTable.reload();
						}	else {
							groupTable.style.display = "block";
							isGroup = true;
							accountTypeTable.reload();
						}
					})
					
					
			});


	</script>

	<jsp:include page="header.jsp"/>
	<jsp:include page="navbar.jsp"/>

		<div id="changeFormModal" class="modal fade" tabindex="-1"
				 role="dialog" data-backdrop="static" aria-labelledby="changeFormModal" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span>
							<span
										class="sr-only"><s:message code="dialog.close"/></span></button>
						<h4 class="modal-title">Параметры вида счета</h4>
					</div>
					<div class="modal-body">
						<form id="changeForm" class="form-vertical" role="form">

							<input type="hidden" name="accountTypeId" id="accountTypeId">
							<input type="hidden" name="investmentRevenueAccountTypeId" id="investmentRevenueAccountTypeId">
							<input type="hidden" name="accountTypeGroupId" id="accountTypeGroupId">

							<div class="form-group">
								<label class="control-label" for="accountTypeGroup">Наименование группы счетов</label>
								<div id="accountTypeGroup" class="form-control"></div>
							</div>

							<div class="form-group">
								<label for="accountName">Наименование</label>
								<input type="text" class="form-control" maxlength="250"
											 id="accountName" name="accountName">
							</div>

							<div class="form-group">
								<input type="checkbox" id="calcInvestmentRevenue" name="calcInvestmentRevenue">
								<label for="calcInvestmentRevenue">Можно начислять ИД</label>
							</div>

							<div class="form-group">
								<label class="control-label" for="accountType">Вид счета начисления ИД</label>
								<div id="accountType" class="form-control"></div>
							</div>

							<div class="form-group">
								<label for="shortName">Краткое наименование для выписки</label>
								<input type="text" class="form-control" maxlength="100"
											 id="shortName" name="shortName">
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<jsp:include page="queryAction.jsp">
							<jsp:param name="queryActionCode" value="ROSvyskY"/>
						</jsp:include>
						<button class="btn btn-default" type="button" data-dismiss="modal">
							<s:message code="button.cancel"/></button>
					</div>

				</div>
			</div>
		</div>
	<%--changeAccountFormModal--%>

	<div class="container" id="mainContainer">
			<div class="page-header">
					<h1>Виды финансовых счетов</h1>
			</div>

			<div class="container-fluid">
					<div class="row row-main">
							<jsp:include page="sidebar.jsp"/>
							<div class="col-sm-10">
									<tags:breadcrumbs path='https://portal.futurenpf.ru/knowledgebase/category/29285/'/>
									<label>
										<input type="checkbox" id="grpChkbx"/>
										Показать без группировки
									</label>
									<div class="row" id="account_type_group">
											<div class="col-sm-12">
												
													<jsp:include page="queryTable.jsp">
															<jsp:param name="queryTableCode" value="account_type_group"/>
													</jsp:include>
											</div>
									</div>
									<hr>
									<div class="row">
											<div class="col-sm-12">
													<jsp:include page="queryTable.jsp">
															<jsp:param name="queryTableCode" value="account_type"/>
															<jsp:param name="queryTableStyle" value="width: 1800px;"/>
													</jsp:include>
											</div>
									</div>
							</div>
					</div>
			</div>

	</div>

	<jsp:include page="footer.jsp"/>

	</body>
	</html>