<!DOCTYPE html>
<html lang="ja">

<head>
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<meta charset="utf-8">
	<title>はちまきBot設定画面</title>
	<style type="text/css">
		body {
			display: block;
			position: relative;
			margin: 0%;
			padding: 5vw 5vw 5vw 5vw;
			background: rgb(253, 245, 230);

			h1 {
				display: block;
				position: relative;
				margin: 0%;
				padding: 0%;
				text-align: center;
				font-size: 8vw;
			}

			.cont {
				display: block;
				position: relative;
				margin: 2% 0% 0% 0%;
				padding: 1% 2% 2% 2%;
				background: rgb(0, 255, 255);
				border-radius: 5vw 5vw 5vw 5vw;

				h2 {
					display: block;
					position: relative;
					margin: 0%;
					padding: 0%;
					text-align: center;
					font-size: 5vw;
				}

				/*内枠*/
				div {
					display: block;
					position: relative;
					margin: 0%;
					padding: 0%;
					background: rgb(253, 245, 230);
					border-radius: 0vw 0vw 5vw 5vw;

					/* 項目 */
					div {
						display: block;
						position: relative;
						margin: 0%;
						padding: 1% 0% 1% 8%;

						p {
							display: block;
							position: relative;
							margin: 0%;
							padding: 0%;
							text-align: left;
							font-size: 2.5vw;
							color: red;
						}

						input[type=checkbox] {
							display: none;
						}

						label {
							display: block;
							position: relative;
							margin: 0% 0% 0% 0%;
							padding: 0% 0% 0% 0%;
							font-size: 3.5vw;
						}

						label::before {
							position: absolute;
							margin: 0% 0% 0% 0%;
							padding: 0% 0% 0% 0%;
							width: 3.5vw;
							height: 3.5vw;
							top: 0.3vw;
							left: -5.5vw;
							content: '';
							background-color: #fff;
							border-color: rgb(128, 128, 128);
							border-style: solid;
							border-width: 0.4vw;
							border-radius: 50% 50% 50% 50%;
						}

						label::after {
							position: absolute;
							margin: 0% 0% 0% 0%;
							padding: 0% 0% 0% 0%;
							width: 2vw;
							height: 3.5vw;
							top: -1.3vw;
							left: -4.5vw;
							content: '';
							border-color: rgb(0, 0, 205);
							border-style: solid;
							border-width: 0vw 1vw 1vw 0vw;
							border-radius: 0%;
							transform: rotate(45deg);
							opacity: 0;
						}

						input[type=checkbox]:checked+label::before {
							border-color: #000000;
						}

						input[type=checkbox]:checked+label::after {
							opacity: 1;
						}

					}
				}

			}

			.submit {
				display: block;
				position: relative;
				margin: 4% 0% 0% 0%;
				padding: 0%;
				text-align: center;

				input[type=button] {
					display: none;
				}

				label {
					display: block;
					position: relative;
					margin: 0%;
					padding: 0%;
					left: 20%;
					width: 60%;
					height: 6vw;
					font-size: 4vw;
					background-color: rgb(0, 255, 255);
					border-style: solid;
					border-width: 0vw;
					border-radius: 5vw 5vw 5vw 5vw;
				}

				p {
					display: block;
					position: relative;
					margin: 0%;
					padding: 2% 0% 0% 0%;
					text-align: center;
					font-size: 3vw;
					color: red;
				}
			}

		}
	</style>
	<script>
		function weatherCheck(parent) {
			if (document.querySelector("#"+parent+"_weatherS").checked) {
				document.querySelector("#"+parent+"_weather_msg").innerHTML = "";
			} else {
				document.querySelector("#"+parent+"_weatherD").checked = false;
				document.querySelector("#"+parent+"_weather_msg").innerHTML = "天気概要を選択している場合のみ選択可";
			}
		}
		function trainCheck() {
			if (Array.from(document.querySelectorAll("#train > div > div")).some(el => el.querySelector("input").checked)) {
				document.querySelector("#train_msg").innerHTML = "";
			} else {
				Array.from(document.querySelectorAll("#train > div > div"))[0].querySelector("input").checked = true;
				document.querySelector("#train_msg").innerHTML = "最低1つは選択してください";
			}
		}
		function submitFunc() {
			document.querySelector("form.submit #submit").disabled = true;
			document.querySelector("form.submit label").style.backgroundColor = "rgb(95,158,160)";
			fetch(window.location.href, {
				method: "POST",
				headers: {
					"Content-Type": "application/json"
				},
				body: JSON.stringify(
					Array.from(document.querySelectorAll("form.cont")).reduce((pre, cur) => ({
						...pre,
						[cur.id]:
							Array.from((new FormData(cur)).entries()).reduce((pre, cur) => ({
								...pre,
								[cur[0]]: cur[1]
							}), {})
					}), {}))
			})
				.then(res => res.json())
				.then(res => {
					document.querySelector("body").innerHTML = "<h1 style='padding: 40vh 0vh 0vh 0vh;font-size:12vw'>送信完了</h1><h2 style='font-size:4vw;text-align: center;'>再度設定するには再読み込みしてください</h2>";
				})
				.catch(e => {
					document.querySelector("form.submit #error_msg").innerHTML = "送信に失敗しました  再読み込みしてやり直してください";
				});
		}
	</script>
</head>

<body>
	<h1>はちまきBot設定画面</h1>
	<form class="cont" id="skd_d">
		<h2>予定通知の内容（日）</h2>
		<div>
			<div>
				<input type="checkbox" id="d_weatherS" name="weatherS" checked="true" value="1"
					onclick="weatherCheck('d')">
				<label for="d_weatherS">天気 概要(天気のみ)</label>
			</div>
			<div>
				<input type="checkbox" id="d_weatherD" name="weatherD" checked="true" value="1"
					onclick="weatherCheck('d')">
				<label for="d_weatherD">天気 詳細(降水確率+気温)</label>
				<p id="d_weather_msg"></p>
			</div>
			<div>
				<input type="checkbox" id="d_event" name="event" checked="true" value="1">
				<label for="d_event">行事予定</label>
			</div>
			<div>
				<input type="checkbox" id="d_cafe" name="cafe" checked="true" value="1">
				<label for="d_cafe">カフェの営業状況</label>
			</div>
			<div>
				<input type="checkbox" id="d_sdRoom" name="sdRoom" checked="true" value="1">
				<label for="d_sdRoom">自習室の開放状況</label>
			</div>
			<div>
				<input type="checkbox" id="d_anime" name="anime" checked="true" value="1">
				<label for="d_anime">アニメ(シートに記入しておく必要あり)</label>
			</div>
		</div>
	</form>
	<form class="cont" id="skd_w">
		<h2>予定通知の内容（週）</h2>
		<div>
			<div>
				<input type="checkbox" id="w_weatherS" name="weatherS" checked="true" value="1"
					onclick="weatherCheck('w')">
				<label for="w_weatherS">天気 概要(天気のみ)</label>
			</div>
			<div>
				<input type="checkbox" id="w_weatherD" name="weatherD" checked="true" value="1"
					onclick="weatherCheck('w')">
				<label for="w_weatherD">天気 詳細(降水確率+気温)</label>
				<p id="w_weather_msg"></p>
			</div>
			<div>
				<input type="checkbox" id="w_event" name="event" checked="true" value="1">
				<label for="w_event">行事予定</label>
			</div>
			<div>
				<input type="checkbox" id="w_cafe" name="cafe" checked="true" value="1">
				<label for="w_cafe">カフェの営業状況</label>
			</div>
			<div>
				<input type="checkbox" id="w_sdRoom" name="sdRoom" checked="true" value="1">
				<label for="w_sdRoom">自習室の開放状況</label>
			</div>
			<div>
				<input type="checkbox" id="w_anime" name="anime" checked="true" value="1">
				<label for="w_anime">アニメ(シートに記入しておく必要あり)</label>
			</div>
		</div>
	</form>
	<form class="cont" id="train">
		<h2>次の電車</h2>
		<div>
			<div>
				<input type="checkbox" id="電車A" name="train" checked="true" value="電車A" onclick="trainCheck()">
				<label for="電車A">電車A</label>
			</div>
			<div>
				<input type="checkbox" id="電車B" name="train" checked="true" value="電車B" onclick="trainCheck()">
				<label for="電車B">電車B</label>
				<p id="train_msg"></p>
			</div>
		</div>
	</form>
	<form class="submit">
		<input type="button" id="submit" onclick="submitFunc()">
		<label for="submit">変更を適用する</label>
		<p id="error_msg"></p>
	</form>
</body>

</html>