var formName = "#contactForm";
let keyElms = document.createElement("input"); 
keyElms.setAttribute("name", "form_key");
keyElms.setAttribute("type", "hidden");
keyElms.setAttribute("value", "ac72be3eb139d6425131f20304bdd524");
document.querySelector(formName).appendChild(keyElms)

	// 読込 : GoogleReCAPCHA
	var tag = document.createElement('script');
	tag.src = "https://www.google.com/recaptcha/api.js?render=6Lc36DQpAAAAAOG6qF91rLPx8sQEpoFZejxAy6lM";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 確認画面の生成処理（モーダル）
function confirmGenerate(){
	// 画面の基本生成
	var Confirm = document.querySelector(formName).cloneNode(true);	// 既存フォームをクローン
	$(Confirm).find("input[type='hidden']").remove();				// 削除：非表示項目
	$(Confirm).find("button[type=submit]").remove();				// 削除：送信ボタン

	// SELECTの書換
	$(Confirm).find("select").each(function(){
		let thisName = $(this).attr("name");
		let orgin = $(formName).find('select[name="' + thisName + '"]')
		let val = orgin.val();
		$(this).replaceWith('<div class="inner" style="overflow-wrap:normal;">' + val + '</div>');
	});

	// 環境固有データの処理
	let radioArr = {};
	$(Confirm).find("input[type=radio]").each(function(){
		// 
		if(typeof radioArr[$(this).attr("name")] == "undefined"){
			radioArr[$(this).attr("name")]	= [];
		}

		// 
		if(this.checked){
			console.log($(this).val());
			radioArr[$(this).attr("name")].push($(this).val());
		}

		// 
		if($(Confirm).find('[name="' + $(this).attr("name") + '"]').length == 1){
			$(this).next("span").remove();
			$(this).closest(".inner").replaceWith('<div class="inner" style="overflow-wrap:normal;">' + radioArr[$(this).attr("name")].join(" / ") + '</div>');
		}else{
			$(this).next("span").remove();
			$(this).remove();
		}
	});
	for(tagName in radioArr){
		$(Confirm).find('[name="' + tagName + '"]').closest(".input.radio").replaceWith('<div class="inner" style="overflow-wrap:normal;">' + radioArr[tagName].join(" / ") + '</div>');
	}


	var checkval = "";
	var checkboxes = $(formName).find("[name='service[]']:checked");
	checkboxes.each(function() {
		checkval += $(this).val() + ", ";
	});
	checkval = checkval.slice(0, -2);
	$(Confirm).find("[name='service[]']").closest(".input.check").replaceWith('<div class="inner" style="overflow-wrap:normal;">' + checkval + '</div>');
	$(Confirm).find(".empty_space").remove();

	

	// 入力タグの値を固定文字に置き換え
	$(Confirm).find("input, textarea").replaceWith(function() {
		let thisName = $(this).attr("name");
		let orgin = $(formName).find('[name="' + thisName + '"]')
		let val = orgin.val();
		$(this).replaceWith('<div class="inner" style="overflow-wrap:normal;">' + val + '</div>')
	});

	// 結果の返却
	return "以下の内容で送信します。<br>よろしいでしょうか？" + '<form class="ex">' + ($(Confirm).html()) + "</form>";
}

$().ready(function() {
	$.validator.setDefaults({
		errorElement: "div",
		submitHandler: function() {
			var Confirm = confirmGenerate();

			Swal.fire({
				title: '送信前確認',
				html : Confirm,
				showCancelButton: true,
				confirmButtonText: '送信',
				cancelButtonText: '戻る',
				reverseButtons: true,
				width : '80%',
				showClass: {
					popup: 'animated  faster',
					// icon: 'animated heartBeat delay-1s'
				},
				hideClass: {
					popup: 'animated fadeOutUp faster',
					// icon: 'animated heartBeat delay-1s'
				},
			}).then((result) => {
				// 送信ボタンの検知
				if (result.isConfirmed) {
					
					// googleReCaptchaStart
					grecaptcha.ready(function() {
						grecaptcha.execute('6Lc36DQpAAAAAOG6qF91rLPx8sQEpoFZejxAy6lM', {action: 'submit'}).then(function(token) {
							// Add your logic to submit to your backend server here.
							var mailForm = document.querySelector(formName);
							var recaptchaToken = mailForm.querySelector('[name="recaptchaToken"]');
							if(!recaptchaToken){
								recaptchaToken = document.createElement("input");
								recaptchaToken.setAttribute("name", "recaptchaToken");
								recaptchaToken.setAttribute("type", "hidden");
								mailForm.appendChild(recaptchaToken);
							}
							recaptchaToken.value = token;
					
							// フォーム送信処理
							$.ajax({
								url : $(formName).attr('action'),
								type: $(formName).attr('method'),
								data: $(formName).serialize(),
							})
							.done(function(data) {	// 送信成功時の処理
								var result = JSON.parse(data)
								if(result.result){
									if(result.redirectURL){
										
										Swal.fire({
											icon: 'success',
											title: result.msg,
										}).then((res) => {
											location.href = result.redirectURL;
										});
										
									}else{
										Swal.fire({
											icon: 'success',
											title: result.msg,
										});
									}
								}else{
									Swal.fire({
										icon: 'error',
										title: result.msg,
									})
								}
							})
							.fail(function() {	// 送信失敗時の処理
								Swal.fire({
									icon: 'error',
									title: '送信失敗しました。',
								})
							});
					
						});
					});
					
				}
			})
		}
	});

	// validate the comment form when it is submitted
	// validate signup form on keyup and submit
	$(formName).validate({
    "rules" : {
        "service[]" : {
            "required" : true
        }, 
        "navigator" : {
            "required" : true
        }, 
        "name" : {
            "required" : true
        }, 
        "company" : {
            "required" : true
        }, 
        "position" : {
            "required" : true
        }, 
        "email" : {
            "required" : true, 
            "email" : true
        }, 
        "tel" : {
            "pattern" : /(^0\d{1,3}-\d{1,4}-\d{4}$|^0\d{9,10}$)/i
        }, 
        "address" : {
            "required" : true
        }
    }, 
    "messages" : {
        "service[]" : "興味のある商品を選択してください。", 
        "navigator" : "希望ナビゲーターを選択してください。", 
        "name" : "お名前は必須です。", 
        "company" : "会社名は必須です。", 
        "position" : "役職は必須です。", 
        "email" : {
            "required" : "メールアドレスは必須です。", 
            "email" : "メールアドレスが正しくありません。"
        }, 
        "tel" : {
            "required" : "電話番号は必須です。", 
            "pattern" : "電話番号の形式が正しくありません。"
        }, 
        "address" : "住所は必須です。"
    },
	"errorPlacement" :function(error,element){ 
		if (element.attr("name") == "service[]" ){ error.insertAfter(".serviceWrap .input"); }
		else if (element.attr("name") == "navigator" ){ error.insertAfter(".navigatorWrap .input"); }
		else { error.insertAfter(element); }
	}
});	
});