<%@ page contentType="text/html; charset=UTF-8"%><%@ include file="/WEB-INF/jspf/include/taglibs.jsp"%>

<div id="paramResult"></div>

<div style="margin: 10px auto;"><button class="btn btn-secondary" onclick="showBlock( 'parametersRoot', 'list', parametersQuery ); return false;">К списку...</button></div>			

<form id="dateParamForm">
<div class="tile">
	<div class="titleFont3 titleBottomLine">Редактор параметра</div>
	<div class="paramEditorTitle" style="margin-top: 2rem; margin-bottom: 1rem;">${pref.title}</div>

	<div class="flexRow" style="justify-content: center; align-items: flex-end;">
		<div class="paramDate" style="position: relative;">
			<c:set var="dValue"><c:choose><c:when test="${not empty paramValue}"><fmt:formatDate pattern="dd" value="${paramValue}" /></c:when><c:otherwise>ДД</c:otherwise></c:choose> </c:set>
			<div><input type="text" name="d" value="${dValue}" style="width: 1.4em;" maxlength="2" 
					onfocus="dateParamPopupHide(); document.getElementById('dButtons').style.display = 'flex'; return false;"></div>
			<div class="" id="dButtons" style="display: none; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-content: stretch; width: 20.5rem; position: absolute; top: 4rem; left: -3rem; z-index: 100; border-width: 1px; border-style: solid; border-radius: 10px; padding: 1rem; background-color: #fff;">
				<c:forEach var="item" begin="1" end="31"><fmt:formatNumber var="i" pattern="00" value="${item}" /><button style="font-size: 2rem; width: 16%;" onclick="return dateParamSet( this.form.d, '${i}' );">${i}</button></c:forEach>
			</div>
		</div>
		<div class="paramDatePoint">.</div>
		<div class="paramDate" style="position: relative;">
			<c:set var="mValue"><c:choose><c:when test="${not empty paramValue}"><fmt:formatDate pattern="MM" value="${paramValue}" /></c:when><c:otherwise>ММ</c:otherwise></c:choose> </c:set>
			<div><input type="text" name="m" value="${mValue}" style="width: 1.4em;" maxlength="2" onfocus="dateParamPopupHide(); document.getElementById('mButtons').style.display = 'flex'; return false;"></div>
			<div class="" id="mButtons" style="display: none; flex-wrap: wrap; flex-direction: row; align-content: center; width: 20.5rem; position: absolute; top: 4rem; left: -9rem; z-index: 100; border-width: 1px; border-style: solid; border-radius: 10px; padding: 1rem; background-color: #fff;">
				<c:forEach var="item" begin="1" end="12"><fmt:formatNumber var="i" pattern="00" value="${item}" /><button style="font-size: 2rem; width: 16%;" onclick="return dateParamSet( this.form.m, '${i}' );">${i}</button></c:forEach>
			</div>
		</div>
		<div class="paramDatePoint">.</div>
		<div class="paramDate" style="position: relative;">
			<c:set var="yValue"><c:choose><c:when test="${not empty paramValue}"><fmt:formatDate pattern="yyyy" value="${paramValue}" /></c:when><c:otherwise>ГГГГ</c:otherwise></c:choose> </c:set>
			<div><input type="text" name="y" value="${yValue}" style="width: 2.4em;" maxlength="4" onfocus="dateParamPopupHide(); document.getElementById('yButtons').style.display = 'block'; return false;"></div>
			<div id="yButtons" style="display: none; width: 23rem; position: absolute; top: 4rem; left: -14rem; z-index: 100; border-width: 1px; border-style: solid; border-radius: 10px; padding: 1rem; background-color: #fff;">
				<div style="display: flex; justify-content: space-between; padding: 1rem; border-width: 0; font-size: 1rem; padding: 0rem 0rem 1rem 0rem;">
					<div style="border-width: 0;"><button id="yButtonPrev" style="font-size: 1.5rem;" onclick="return showYearButtons( -1 );">${dateParamYear-24}-${dateParamYear}</button></div>
					<div style="border-width: 0;"><button id="yButtonNext" style="font-size: 1.5rem;" onclick="return showYearButtons( 1 );">${dateParamYear+26}-${dateParamYear+50}</button></div>
				</div>
				<div style="display: flex; flex-wrap: wrap; flex-direction: row; align-content: center; border-width: 0px;">
				<c:forEach var="item" begin="1" end="25"><fmt:formatNumber var="i" pattern="0000" value="${2000 + item}" /><button id="yButton_${item}" style="font-size: 1.5rem; width: 20%;" onclick="return dateParamYearSet( this.form.y, ${item} );">${i}</button></c:forEach>
				</div>
			</div>
		</div>
		<input type="hidden" name="command" value="update">
		<div onclick="dateParamModeSwitch( this.form )"><img id="modeImage" src="${pageContext.request.contextPath}/img/delete.png" title="Удалить дату" class="iconButton"></div>
	</div>

	<div style="margin: 20px 10px; text-align: right;">
		<button class="btn btn-primary" onclick="dateParamPopupHide(); showBlock( 'paramResult', 'update', { ...parametersQuery, command: this.form.command.value, paramId: ${pref.id}, paramValue: this.form.d.value + '.' + this.form.m.value + '.' + this.form.y.value } ); return false;">Применить</button>
		<button class="btn btn-outline-primary" style="margin-left: 20px;" onclick="dateParamPopupHide(); showBlock( 'parametersRoot', 'list', parametersQuery ); return false;">Отмена</button>
	</div>
</div>
</form>

<script>
var dataParamD = '${dValue}';
var dataParamM = '${mValue}';
var dataParamY = '${yValue}';
var dateParamYear = ${dateParamYear};

function dateParamModeSwitch()
{
	var form = document.getElementById('dateParamForm');
	var modeImage = document.getElementById('modeImage');
	if ( 'update' == form.command.value )
	{
		form.command.value = 'delete';
		modeImage.src = "${pageContext.request.contextPath}/img/edit.png"; 
		modeImage.title = "Редактировать дату";
		form.d.value = "XX";
		form.d.disabled = true;
		form.m.value = "XX";
		form.m.disabled = true;
		form.y.value = "XXXX";
		form.y.disabled = true;
	}
	else
	{
		form.command.value = 'update';
		modeImage.src = "${pageContext.request.contextPath}/img/delete.png"; 
		modeImage.title = "Удалить дату"; 
		form.d.value = dataParamD;
		form.d.disabled = false;
		form.m.value = dataParamM;
		form.m.disabled = false;
		form.y.value = dataParamY;
		form.y.disabled = false;
	}
}

function showYearButtons( dir )
{
	const step = 25;
	dateParamYear = dateParamYear + step * dir;
	document.getElementById('yButtonPrev').innerHTML = (dateParamYear - step + 1) + '-' + dateParamYear;
	document.getElementById('yButtonNext').innerHTML = (dateParamYear + step + 1) + '-' + (dateParamYear + 2 * step);
	for ( i = 1; i < 26; i++ )
	{
		document.getElementById('yButton_'+i).innerHTML = dateParamYear + i;
	}
	return false;
}

function dateParamPopupHide()
{
	document.getElementById('dButtons').style.display = 'none';
	document.getElementById('mButtons').style.display = 'none';
	document.getElementById('yButtons').style.display = 'none';
	return false;
}

function dateParamSet( f, v )
{
	f.value = v;
	return dateParamPopupHide();
}

function dateParamYearSet( f, v )
{
	f.value = dateParamYear + v;
	return dateParamPopupHide();
}

</script>