function show_privacypolicy_onclick() {
    const message_object = document.createElement("ol");
    message_object.style.color = "#4d5347";
    message_object.style.borderRadius = "4px";
    message_object.style.boxShadow = "0px 0px 2px 0px black inset";
    const message_array = [
        {
            "h3": "基本的な考え方",
            "div": "有限会社ESTEL（以下「当社」）は、電気工事・通信工事・その他当社の関わる業務の円滑な運営に必要な範囲での情報を収集しています。収集した情報は利用目的の範囲内で適切に取り扱います。"
        },
        {
            "h3": "利用目的",
            "div": "電気工事・通信工事・その他当社の関わる業務の為の手段として利用させていただきます。また、いただいたご意見等は、サービスの向上のため今後の業務運営の参考とさせていただきます。"
        },
        {
            "h3": "安全確保の措置",
            "div": "当社は、収集した情報の漏えい、滅失又はき損の防止その他収集した情報の適切な管理のために必要な措置を講じます。"
        },
        {
            "h3": "個人情報の第三者提供",
            "div": "当社は、個人情報保護法等の法令に定めのある場合を除き、個人情報をご本人の同意を得ることなく、第三者に提供いたしません。"
        },
        {
            "h3": "個人情報の保護期間",
            "div": "当社がお客様の個人情報を使用する期間は、サービスの終了時までとし、その後は当社にて破棄いたします。"
        },
        {
            "h3": "その他",
            "div": "当社では、以上のプライバシーポリシーを必要に応じて改定することがあります。"
        }
    ];

    for(let message_data of message_array) {
        let li = document.createElement("li");
        message_object.appendChild(li);
        let h3 = document.createElement("h3");
        li.appendChild(h3);
        let div = document.createElement("div");
        li.appendChild(div);
        h3.style.margin = "0px";
        h3.style.color = "#4d5347";
        div.style.color = "#4d5347";
        h3.innerText = message_data.h3;
        div.innerText = message_data.div;
    }

    display_message(
        message_type = "close_only",
        message_color = "#4d5347",
        message_title = "プライバシーポリシー",
        message_text = message_object,
        message_functions = {
            close_function: function() {}
        }
    );
}

function agree_checkbox_onchange() {
    const agree_checkbox = document.getElementById("agree_checkbox");
    const send_button = document.getElementById("send_button");
    if (agree_checkbox.checked) {
        send_button.style.backgroundColor = "#4d5347";
    } else {
        send_button.style.backgroundColor = "#888888";
    }
}

async function send_button_onclick() {

    const client_name = document.getElementById("client_name");
    const company_name = document.getElementById("company_name");
    const client_email = document.getElementById("client_email");
    const client_message = document.getElementById("client_message");
    const agree_checkbox = document.getElementById("agree_checkbox");

    if (agree_checkbox.checked === false) {
        return;
    }

    if (!client_name.value) {
        display_message(
            message_type = "close_only",
            message_color = "#d9341d",
            message_title = "送信できません",
            message_text = "お名前が入力されてません",
            message_functions = {
                close_function: function() {
                    client_name.focus();
                }
            }
        );
        return;
    }

    const email_regex = /^[a-zA-Z0-9._+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    if (email_regex.test(client_email.value) === false) {
        display_message(
            message_type = "close_only",
            message_color = "#d9341d",
            message_title = "送信できません",
            message_text = "メールアドレスが正しくありません",
            message_functions = {
                close_function: function() {
                    client_email.focus();
                }
            }
        );
        return;
    }

    if (!client_message.value) {
        display_message(
            message_type = "close_only",
            message_color = "#d9341d",
            message_title = "送信できません",
            message_text = "お問い合わせ内容が入力されてません",
            message_functions = {
                close_function: function() {
                    client_name.focus();
                }
            }
        );
        return;
    }

    if (agree_checkbox.checked === false) {
        display_message(
            message_type = "close_only",
            message_color = "#d9341d",
            message_title = "送信できません",
            message_text = "個人情報のお取り扱い等について同意いただかないと、送信できません",
            message_functions = {
                close_function: function() {
                    client_name.focus();
                }
            }
        );
        return;
    }

    display_wait("送信中");

    const fetch_url = "https://www.es-tel.com/electric/contact/app";
    const fetch_body = new FormData();
    fetch_body.append("client_name", client_name.value);
    fetch_body.append("company_name", company_name.value);
    fetch_body.append("client_email", client_email.value);
    fetch_body.append("client_message", client_message.value);
    const response_data = await post_data(fetch_url, fetch_body);

    hide_wait();

    if (response_data.error) {
        display_message(
            message_type = "close_only",
            message_color = "#d9341d",
            message_title = "送信に失敗しました",
            message_text = String(response_data.error_message),
            message_functions = {
                close_function: function() {
                    client_name.focus();
                }
            }
        );
        return;
    }

    if (typeof response_data.obj.client_name === 'undefined') {
        display_message(
            message_type = "close_only",
            message_color = "#d9341d",
            message_title = "送信に失敗しました",
            message_text = "undefined",
            message_functions = {
                close_function: function() {
                    client_name.focus();
                }
            }
        );
        return;
    }

    display_message(
        message_type = "close_only",
        message_color = "#4d5347",
        message_title = "送信完了",
        message_text =
        "以下の内容で送信しました\n\n" +
        "お名前とフリガナ\n" + response_data.obj.client_name + "\n\n" +
        "会社名とフリガナ(法人の方のみ)\n" + response_data.obj.company_name + "\n\n" +
        "メールアドレス\n" + response_data.obj.client_email + "\n\n" +
        "お問い合わせ内容\n" + response_data.obj.client_message,
        message_functions = {
            close_function: function() {}
        }
    );

}

async function post_data(fetch_url, fetch_body) {
    const controller = new AbortController();
    setTimeout(function() {
        controller.abort();
    }, 10000);
    let response_data = {};
    try {
        const fetch_response = await fetch(fetch_url, {
            method: "POST",
            body: fetch_body,
            signal: controller.signal
        });
        if (!fetch_response.ok) {
            let error_message = "通信エラーが発生しました\nhttp status:" + fetch_response.status;
            const error_response_obj = await fetch_response.json();
            if (error_response_obj.error) {
                error_message += "\n" + error_response_obj.error_message;
            }
            throw new Error(error_message);
        }
        const fetch_response_obj = await fetch_response.json();
        if (fetch_response_obj.error) {
            throw new Error(fetch_response_obj.error_message);
        }
        response_data.obj = fetch_response_obj;
    } catch (e) {
        response_data.error = true;
        if (e.name === "AbortError") {
            response_data.error_message = "タイムアウトしました";
        } else if (e.name === "SyntaxError") {
            response_data.error_message = "データ取得失敗";
        } else {
            response_data.error_message = e;
        }
    } finally {
        return response_data;
    }
}

async function hash(algo, data) {
    const encoder = new TextEncoder();
    const data_byte = encoder.encode(data);
    const hash = await crypto.subtle.digest(algo, data_byte);
    return hash;
}

function hide_wait() {
    const wait_area = document.getElementById("wait_area");
    wait_area.remove();
}


function display_wait(wait_message) {
    const wait_area = document.createElement("div");
    wait_area.id = "wait_area";
    wait_area.style.position = "fixed";
    wait_area.style.width = "100%";
    wait_area.style.height = "100%";
    wait_area.style.top = "0px";
    wait_area.style.left = "0px";
    wait_area.style.backgroundColor = "rgba(0, 0, 0, 0.8)";
    wait_area.style.zIndex = 100;
    wait_area.style.display = "flex";
    wait_area.style.flexDirection = "column";
    wait_area.style.justifyContent = "center";
    wait_area.style.alignItems = "center";
    document.body.appendChild(wait_area);

    const wait_message_area = document.createElement("div");
    wait_message_area.style.color = "white";
    wait_message_area.style.margin = "8px";
    wait_message_area.innerText = wait_message;
    wait_area.appendChild(wait_message_area);

    const center_area = document.createElement("div");
    center_area.style.position = "relative";
    center_area.style.width = "60px";
    center_area.style.height = "60px";
    center_area.style.borderRadius = "34px";
    center_area.style.backgroundColor = "transparent";
    center_area.style.border = "solid 2px white";
    center_area.animate(
        {
            transform: ["rotate(0deg)","rotate(360deg)"]
        },
        {
            iterations: Infinity,
            easing: "linear",
            duration: 2000
        }
    );
    wait_area.appendChild(center_area);
    
    const wait_cube = document.createElement("div");
    wait_cube.style.position = "absolute";
    wait_cube.style.top = "10px";
    wait_cube.style.left = "28px";
    wait_cube.style.width = "4px";
    wait_cube.style.height = "20px";
    wait_cube.style.borderRadius = "2px";
    wait_cube.style.backgroundColor = "white";
    center_area.appendChild(wait_cube);
}

function display_message(message_type, message_color, message_title, message_text, message_functions) {
    const black_shadow = document.createElement("div");
    black_shadow.style.position = "fixed";
    black_shadow.style.width = "100%";
    black_shadow.style.height = "100%";
    black_shadow.style.top = "0px";
    black_shadow.style.left = "0px";
    black_shadow.style.backgroundColor = "rgba(0, 0, 0, 0.8)";
    black_shadow.style.zIndex = 100;
    black_shadow.style.display = "flex";
    black_shadow.style.justifyContent = "center";
    black_shadow.style.alignItems = "center";
    document.body.appendChild(black_shadow);
    document.body.style.overflow = "hidden";

    const white_area = document.createElement("div");
    white_area.style.width = "calc(100% - 16px)";
    white_area.style.maxWidth = "480px";
    white_area.style.backgroundColor = "white";
    white_area.style.borderRadius = "8px 8px 4px 4px";
    white_area.style.display = "flex";
    white_area.style.justifyContent = "center";
    white_area.style.flexWrap = "wrap";
    white_area.addEventListener("click", function(event) {
        event.stopPropagation();
    });
    black_shadow.appendChild(white_area);
    
    const title_area = document.createElement("div");
    title_area.style.padding = "8px";
    title_area.style.width = "calc(100% - 16px)";
    title_area.style.backgroundColor = message_color;
    title_area.style.color = "white";
    title_area.style.borderRadius = "4px 4px 0px 0px";
    title_area.innerText = message_title;
    white_area.appendChild(title_area);

    const message_area = document.createElement("div");
    message_area.style.padding = "8px";
    message_area.style.width = "calc(100% - 16px)";
    message_area.style.maxHeight = "calc(100vh - 200px)";
    message_area.style.overflow = "auto";
    if(typeof message_text === "string") {
        console.log(message_text);
        message_area.innerText = message_text;
    }
    if(typeof message_text === "object") {
        message_area.appendChild(message_text);
    }
    white_area.appendChild(message_area);

    if(message_type === "close_only") {
        const close_button = document.createElement("button");
        close_button.style.padding = "8px";
        close_button.style.margin = "8px";
        close_button.style.width = "100px";
        close_button.style.fontSize = "medium";
        close_button.style.backgroundColor = message_color;
        close_button.style.color = "white";
        close_button.style.border = "none";
        close_button.style.borderRadius = "4px";
        close_button.style.boxShadow = "0px 0px 2px 0px black";
        close_button.style.cursor = "pointer";
        close_button.innerText = "閉じる";
        close_button.addEventListener("click", function() {
            black_shadow.remove();
            document.body.style.overflow = "auto";
            message_functions.close_function();
        });
        white_area.appendChild(close_button);
    }
}