@{
	ViewData["Title"] = "Создание карты";
}

<div class="text-center mb-2">
	<h2 class="display-4">Создание банковской карты</h2>
</div>
<form method="post">
	<div class="row mb-2">
		<div class="col-4">Номер счета:</div>
		<div class="col-8">
			<select id="accountId" name="accountId" class="form-control" asp-items="@(new SelectList( @ViewBag.Accounts, "Id", "AccountNumber"))"></select>
		</div>
	</div>
	<div class="row mb-2">
		<div class="col-4">Номер карты:</div>
		<div class="col-8">
			<input type="text" class="form-control" name="number" id="number" required />
		</div>
	</div>
	<div class="row mb-2">
		<div class="col-4">CVC:</div>
		<div class="col-8">
			<input type="text" class="form-control" name="cvc" id="cvc" required />
		</div>
	</div>
	<div class="row mb-2">
		<div class="col-4">Срок действия:</div>
		<div class="col-8">
			<input type="date" class="form-control" name="period" id="period" required />
		</div>
	</div>
	<div class="row mb-2 mt-2">
		<input type="submit" value="Создание" style="width: 100%" class="btn btn-warning" />
	</div>
</form>


<script>
	function createNum(len) {
		chrs = '0123456789';
		var str = '';
		for (var i = 0; i < len; i++) {
			var pos = Math.floor(Math.random() * chrs.length);
			str += chrs.substring(pos, pos + 1);
		}
		return str;
	}

	document.getElementById("number").value = createNum(16);
	document.getElementById("cvc").value = createNum(3);
	let year = new Date();
	year.setFullYear(year.getFullYear() + 5)
	document.getElementById("period").valueAsDate = new Date(year);
</script>