const cformBaseUrl = '/sokenpaint/cform';

var cformInnerHtml = '';
cformInnerHtml += '<div class="inner">';
cformInnerHtml += '<form action="' + cformBaseUrl + '/thanks_request.php" id="stepfm" name="stepfm" method="post" class="h-adr">';
cformInnerHtml += '<span class="p-country-name" style="display:none;">Japan</span>';
cformInnerHtml += '<div class="formttl"><img src="/sokenpaint/cform/img/form_ttl.png" alt="創建ペイントご相談・お問い合わせ" class="PC"><img src="/sokenpaint/cform/img/form_ttl_sp.png" alt="創建ペイントご相談・お問い合わせ" class="SP"></div>';
cformInnerHtml += '<div class="cformwrap">';
cformInnerHtml += '<div id="step1">';
cformInnerHtml += '<div class="stepttl">';
cformInnerHtml += '<ul class="stepnum">';
cformInnerHtml += '<li class="act"><span>01</span><i class="PC">ご希望メニューの<br>選択</i></li>';
cformInnerHtml += '<li><span>02</span><i class="PC">ご住所の入力</i></li>';
cformInnerHtml += '<li><span>03</span><i class="PC">お名前の入力</i></li>';
cformInnerHtml += '<li><span>04</span><i class="PC">ご連絡先の入力</i></li>';
cformInnerHtml += '</ul>';
cformInnerHtml += '</div>';
cformInnerHtml += '<div class="forminput">';
cformInnerHtml += '<dl>';
cformInnerHtml += '<dt>ご希望メニュー<span class="hissu">必須</span></dt>';
cformInnerHtml += '<dd>';
cformInnerHtml += '<div class="radioflex">';
cformInnerHtml += '<a href="/sokenpaint/estimate_simulation/" id="youbo1"><img src="/sokenpaint/cform/img/youbou1.png" alt="無料お見積りシミュレーション" class="PC"><img src="/sokenpaint/cform/img/youbou1_sp.png" alt="無料お見積りシミュレーション" class="SP"></a>';
cformInnerHtml += '<label><input type="radio" id="youbo2" name="ご要望" value="資料請求"><span><img src="/sokenpaint/cform/img/youbou2.png" alt="資料請求" class="PC"><img src="/sokenpaint/cform/img/youbou2_sp.png" alt="資料請求" class="SP"></span></label>';
cformInnerHtml += '<a href="/sokenpaint/myhome_simulation/" id="youbo3"><img src="/sokenpaint/cform/img/youbou3.png" alt="外壁塗装・屋根塗装カラーシミュレーション" class="PC"><img src="/sokenpaint/cform/img/youbou3_sp.png" alt="外壁塗装・屋根塗装カラーシミュレーション" class="SP"></a>';
cformInnerHtml += '<a href="https://www.k-skn.com/sokenpaint/mortgage-refinance/" id="youbo4"><img src="/sokenpaint/cform/img/youbou4.png" alt="住宅ローン借り換えで外壁塗装0円サービス" class="PC"><img src="/sokenpaint/cform/img/youbou4_sp.png" alt="住宅ローン借り換えで外壁塗装0円サービス" class="SP"></a>';
cformInnerHtml += '</div>';
cformInnerHtml += '</dd>';
cformInnerHtml += '</dl>';
cformInnerHtml += '<p class="pcenter">※選択された「ご希望メニュー」によって、<br class="SP">詳細情報ページへ遷移いたします。</p>';
cformInnerHtml += '</div>';
cformInnerHtml += '<div class="btnwrap">';
cformInnerHtml += '<div class="btn"><button type="button" class="stbtn stepbtn2">次へ進む</button></div>';
cformInnerHtml += '</div>';
cformInnerHtml += '</div>';
cformInnerHtml += '<div id="step2">';
cformInnerHtml += '<div class="stepttl">';
cformInnerHtml += '<ul class="stepnum">';
cformInnerHtml += '<li class="act"><span>01</span><i class="PC">ご希望メニューの<br>選択</i></li>';
cformInnerHtml += '<li class="act"><span>02</span><i class="PC">ご住所の入力</i></li>';
cformInnerHtml += '<li><span>03</span><i class="PC">お名前の入力</i></li>';
cformInnerHtml += '<li><span>04</span><i class="PC">ご連絡先の入力</i></li>';
cformInnerHtml += '</ul>';
cformInnerHtml += '</div>';
cformInnerHtml += '<div class="forminput">';
cformInnerHtml += '<dl class="flexdl">';
cformInnerHtml += '<dt>郵便番号<span>必須</span></dt>';
cformInnerHtml += '<dd><div class="inputbox yubinbox"><span class="yubin">〒</span><input type="tel" name="zip" value="" id="zip" class="p-postal-code" placeholder="例）5410047" maxlength="7"><span class="haifun">（ハイフン無し）</span><span class="error" id="error-zip">▲必須項目です</span></div></dd>';
cformInnerHtml += '<dt>ご住所<span class="hissu">必須</span></dt>';
cformInnerHtml += '<dd class="flexdd">';
cformInnerHtml += '<div class="inputbox">';
cformInnerHtml += '<select name="pref" id="select_prefecture" class="p-region">';
cformInnerHtml += '<option value="">都道府県</option>';
cformInnerHtml += '<option value="北海道">北海道</option>';
cformInnerHtml += '<option value="青森県">青森県</option>';
cformInnerHtml += '<option value="岩手県">岩手県</option>';
cformInnerHtml += '<option value="宮城県">宮城県</option>';
cformInnerHtml += '<option value="秋田県">秋田県</option>';
cformInnerHtml += '<option value="山形県">山形県</option>';
cformInnerHtml += '<option value="福島県">福島県</option>';
cformInnerHtml += '<option value="茨城県">茨城県</option>';
cformInnerHtml += '<option value="栃木県">栃木県</option>';
cformInnerHtml += '<option value="群馬県">群馬県</option>';
cformInnerHtml += '<option value="埼玉県">埼玉県</option>';
cformInnerHtml += '<option value="千葉県">千葉県</option>';
cformInnerHtml += '<option value="東京都">東京都</option>';
cformInnerHtml += '<option value="神奈川県">神奈川県</option>';
cformInnerHtml += '<option value="新潟県">新潟県</option>';
cformInnerHtml += '<option value="富山県">富山県</option>';
cformInnerHtml += '<option value="石川県">石川県</option>';
cformInnerHtml += '<option value="福井県">福井県</option>';
cformInnerHtml += '<option value="山梨県">山梨県</option>';
cformInnerHtml += '<option value="長野県">長野県</option>';
cformInnerHtml += '<option value="岐阜県">岐阜県</option>';
cformInnerHtml += '<option value="静岡県">静岡県</option>';
cformInnerHtml += '<option value="愛知県">愛知県</option>';
cformInnerHtml += '<option value="三重県">三重県</option>';
cformInnerHtml += '<option value="滋賀県">滋賀県</option>';
cformInnerHtml += '<option value="京都府">京都府</option>';
cformInnerHtml += '<option value="大阪府">大阪府</option>';
cformInnerHtml += '<option value="兵庫県">兵庫県</option>';
cformInnerHtml += '<option value="奈良県">奈良県</option>';
cformInnerHtml += '<option value="和歌山県">和歌山県</option>';
cformInnerHtml += '<option value="鳥取県">鳥取県</option>';
cformInnerHtml += '<option value="島根県">島根県</option>';
cformInnerHtml += '<option value="岡山県">岡山県</option>';
cformInnerHtml += '<option value="広島県">広島県</option>';
cformInnerHtml += '<option value="山口県">山口県</option>';
cformInnerHtml += '<option value="徳島県">徳島県</option>';
cformInnerHtml += '<option value="香川県">香川県</option>';
cformInnerHtml += '<option value="愛媛県">愛媛県</option>';
cformInnerHtml += '<option value="高知県">高知県</option>';
cformInnerHtml += '<option value="福岡県">福岡県</option>';
cformInnerHtml += '<option value="佐賀県">佐賀県</option>';
cformInnerHtml += '<option value="長崎県">長崎県</option>';
cformInnerHtml += '<option value="熊本県">熊本県</option>';
cformInnerHtml += '<option value="大分県">大分県</option>';
cformInnerHtml += '<option value="宮崎県">宮崎県</option>';
cformInnerHtml += '<option value="鹿児島県">鹿児島県</option>';
cformInnerHtml += '<option value="沖縄県">沖縄県</option>';
cformInnerHtml += '</select>';
cformInnerHtml += '<span class="error" id="error-pref">▲必須項目です</span>';
cformInnerHtml += '</div>';
cformInnerHtml += '<div class="inputbox">';
cformInnerHtml += '<input type="text" name="city" id="input_city" class="p-locality" placeholder="市区町村" maxlength="100">';
/*
cformInnerHtml += '<select name="city" id="select_city" class="">';
cformInnerHtml += '<option value="">市区町村</option>';
cformInnerHtml += '</select>';
*/
cformInnerHtml += '<span class="error" id="error-city">▲必須項目です</span>';
cformInnerHtml += '</div>';
cformInnerHtml += '<input type="text" name="address1" id="machiname" class=" p-street-address p-extended-address" placeholder="町名・番地" maxlength="100">';
cformInnerHtml += '<span class="error" id="error-address1">▲必須項目です</span>';
cformInnerHtml += '<input type="text" name="address2" placeholder="建物名（戸建ての場合は不要）" maxlength="100">';
cformInnerHtml += '<span id="er2"></span></dd>';
cformInnerHtml += '</dl>';
cformInnerHtml += '</div>';
cformInnerHtml += '<div class="btnwrap btnwrap2">';
cformInnerHtml += '<div class="bkbtn"><a href="#stepfm" class="backbtn1">戻る</a></div>';
cformInnerHtml += '<div class="btn"><button type="button" class="stbtn stepbtn3">次へ進む</button></div>';
cformInnerHtml += '</div>';
cformInnerHtml += '</div>';
cformInnerHtml += '<div id="step3">';
cformInnerHtml += '<div class="stepttl">';
cformInnerHtml += '<ul class="stepnum">';
cformInnerHtml += '<li class="act"><span>01</span><i class="PC">ご希望メニューの<br>選択</i></li>';
cformInnerHtml += '<li class="act"><span>02</span><i class="PC">ご住所の入力</i></li>';
cformInnerHtml += '<li class="act"><span>03</span><i class="PC">お名前の入力</i></li>';
cformInnerHtml += '<li><span>04</span><i class="PC">ご連絡先の入力</i></li>';
cformInnerHtml += '</ul>';
cformInnerHtml += '</div>';
cformInnerHtml += '<div class="forminput">';
cformInnerHtml += '<dl class="flexdl">';
cformInnerHtml += '<dt>お名前<span class="hissu">必須</span></dt>';
cformInnerHtml += '<dd><input type="text" name="name" id="sf-name" placeholder="例）鈴木太郎" maxlength="100"><span class="error" id="error-name">▲必須項目です</span></dd>';
cformInnerHtml += '<dt>ふりがな<span class="hissu">必須</span></dt>';
cformInnerHtml += '<dd><input type="text" name="kname" id="sf-kana" placeholder="例）すずきたろう"><span class="error" id="error-kname">▲必須項目です</span></dd>';
cformInnerHtml += '<dt>年齢<span class="nini">任意</span></dt>';
cformInnerHtml += '<dd><div class="inputbox"><select name="age" id="age"><option value=""></option>';
for (var age = 10; age <= 120; age++) {
    cformInnerHtml += '<option value="' + age + '">' + age + '</option>';
}
cformInnerHtml += '</select></div></dd>';
cformInnerHtml += '</dl>';
cformInnerHtml += '</div>';
cformInnerHtml += '<div class="btnwrap btnwrap2">';
cformInnerHtml += '<div class="bkbtn"><a href="#stepfm" class="backbtn2">戻る</a></div>';
cformInnerHtml += '<div class="btn"><button type="button" class="stbtn stepbtn4">次へ進む</button></div>';
cformInnerHtml += '</div>';
cformInnerHtml += '</div>';
cformInnerHtml += '<div id="step4">';
cformInnerHtml += '<div class="stepttl">';
cformInnerHtml += '<ul class="stepnum">';
cformInnerHtml += '<li class="act"><span>01</span><i class="PC">ご希望メニューの<br>選択</i></li>';
cformInnerHtml += '<li class="act"><span>02</span><i class="PC">ご住所の入力</i></li>';
cformInnerHtml += '<li class="act"><span>03</span><i class="PC">お名前の入力</i></li>';
cformInnerHtml += '<li class="act"><span>04</span><i class="PC">ご連絡先の入力</i></li>';
cformInnerHtml += '</ul>';
cformInnerHtml += '</div>';
cformInnerHtml += '</ul>';
cformInnerHtml += '<div class="forminput forminput2">';
cformInnerHtml += '<dl class="flexdl">';
cformInnerHtml += '<dt>メールアドレス<span class="hissu">必須</span></dt>';
cformInnerHtml += '<dd><input type="email" name="email" id="sf-email" placeholder="例）sample@kk-souken.co.jp"><span class="error" id="error-email">▲必須項目です</span></dd>';
cformInnerHtml += '<dt>電話番号<span class="hissu">必須</span></dt>';
cformInnerHtml += '<dd><input type="tel" name="tel" id="sf-tel" placeholder="例）08012345678"><span class="error" id="error-tel">▲必須項目です</span></dd>';
cformInnerHtml += '</dl>';
cformInnerHtml += '<div class="privacybox">個人情報の取り扱い・利用規約については<a href="https://www.k-skn.com/sokenpaint/privacy/" target="_blank">こちら</a>をご確認ください。<br>';
cformInnerHtml += '個人情報の取り扱い・利用規約に同意の上、送信をお願いいたします。</div>';
cformInnerHtml += '</div>';
cformInnerHtml += '<div class="btnwrap btnwrap2">';
cformInnerHtml += '<div class="bkbtn"><a href="#stepfm" class="backbtn3">戻る</a></div>';
cformInnerHtml += '<div class="btn"><button type="submit" class="stbtn" id="submit">送信する</button></div>';
cformInnerHtml += '</div>';
cformInnerHtml += '</div>';
cformInnerHtml += '</div>';
cformInnerHtml += '<input type="hidden" name="csrf" value="" />';
cformInnerHtml += '<input type="hidden" name="redirect_url" value="" />';
cformInnerHtml += '</form>';
cformInnerHtml += '</div>';
document.querySelector('div#cform').insertAdjacentHTML('beforeend', cformInnerHtml);

//ボタンでSTEP切り替え、エラーがある場合は切り替えない
(function($) {
    $(window).on("load", function() {
        if (window.matchMedia('(max-width: 768px)').matches) {
            var pos = $('#stepfm').offset().top + 10; //idの上部の距離を取得
        } else {
            var pos = $('#stepfm').offset().top - 150; //idの上部の距離を取得
        }
        $('.backbtn1').click(function() {
            $('#step1').css('display', 'block');
            $('#step2').css('display', 'none');
            $('#step3').css('display', 'none');
            $('#step4').css('display', 'none');
        });
        $('.backbtn2').click(function() {
            $('#step2').css('display', 'block');
            $('#step1').css('display', 'none');
            $('#step3').css('display', 'none');
            $('#step4').css('display', 'none');
        });
        $('.backbtn3').click(function() {
            $('#step3').css('display', 'block');
            $('#step1').css('display', 'none');
            $('#step2').css('display', 'none');
            $('#step4').css('display', 'none');
        });

        $('.stepbtn2').click(function() {
            $('#step2').css('display', 'block');
            $('#step1').css('display', 'none');
            $('#step3').css('display', 'none');
            $('#step4').css('display', 'none');
            $('body,html').animate({ scrollTop: pos }, 0);
        });
        $('.stepbtn3').click(function() {
            $('#step3').css('display', 'block');
            $('#step1').css('display', 'none');
            $('#step2').css('display', 'none');
            $('#step4').css('display', 'none');
            $('body,html').animate({ scrollTop: pos }, 0);
        });
        $('.stepbtn4').click(function() {
            $('#step4').css('display', 'block');
            $('#step1').css('display', 'none');
            $('#step2').css('display', 'none');
            $('#step3').css('display', 'none');
            $('body,html').animate({ scrollTop: pos }, 0);
        });

        $('div#cform span.error').hide();

        $('select[name="pref').on('change', function() {
/*
            var $form = $('select[name="city"]');
            $form.empty();
            $form.append($('<option />').val('').text('市区町村'));
            $.ajax({
                url: cformBaseUrl + '/get_cities.php',
                type: 'get',
                cache: false,
                async: false,
                data: {
                    pref: $(this).val()
                },
                dataType: 'json'
            }).done(function(json) {
                if (json.data.cities.length > 0) {
                    for (var index = 0; index < json.data.cities.length; index++) {
                        var city = json.data.cities[index];
                        $form.append($('<option />').val(city.name).text(city.name));
                    }
                }
            });
*/
        });

        $('input[name="zip"]').on('blur', function() {
            checkZip(true);
        });
        $('select[name="pref"]').on('blur', function() {
            checkPref(true);
        });
        $('input[name="city"]').on('blur', function() {
            checkCity(true);
        });
        $('input[name="address1"]').on('blur', function() {
            checkAddress1(true);
        });
        $('input[name="name"]').on('blur', function() {
            checkName(true);
        });
        $('input[name="kname"]').on('blur', function() {
            checkKname(true);
        });
        $('select[name="age"]').on('blur', function() {
            checkAge(true);
        });
        $('input[name="email"]').on('blur', function() {
            checkEmail(true);
        });
        $('input[name="tel"]').on('blur', function() {
            checkTel(true);
        });
        $('input[name="email"]').on('blur', function() {
            checkEmail(true);
        });
        $('input[name="tel"]').on('blur', function() {
            checkTel(true);
        });
        $('button.stepbtn2').prop('disabled', true);
        $('button.stepbtn3').prop('disabled', true);
        $('button.stepbtn4').prop('disabled', true);
        $('button#submit').prop('disabled', true);
        $('input#youbo2').click(function(){
            $('button.stepbtn2').addClass('act');
            $('button.stepbtn2').prop('disabled', false);
        });
        $('input[name="zip"],select[name="pref"],input[name="city"],input[name="address1"]').on('blur', function() {
            if (checkZip() && checkPref() && checkCity() && checkAddress1()) {
                $('button.stepbtn3').addClass('act');
                $('button.stepbtn3').prop('disabled', false);
            } else {
                $('button.stepbtn3').removeClass('act');
                $('button.stepbtn3').prop('disabled', true);
            }
        });
        $('input[name="name"],input[name="kname"],select[name="age"]').on('blur', function() {
            if (checkName() && checkKname() && checkAge()) {
                $('button.stepbtn4').addClass('act');
                $('button.stepbtn4').prop('disabled', false);
            } else {
                $('button.stepbtn4').removeClass('act');
                $('button.stepbtn4').prop('disabled', true);
            }
        });
        $('input[name="email"],input[name="tel"]').on('blur', function() {
            if (checkEmail() && checkTel()) {
                $('button#submit').addClass('act');
                $('button#submit').prop('disabled', false);
            } else {
                $('button#submit').removeClass('act');
                $('button#submit').prop('disabled', true);
            }
        });
        $('form[name="stepfm"]').on('submit', function() {
            if (!checkZip() || !checkPref() || !checkCity() || !checkAddress1() || !checkName() || !checkKname() || !checkAge() || !checkEmail() || !checkTel()) {
                alert('未入力の項目があります。');
                return false;
            }
            $('input[name="redirect_url"]').val(location.href);
            $.ajax({
                url: cformBaseUrl + '/get_csrf.php',
                type: 'get',
                cache: false,
                async: false,
                dataType: 'json'
            }).done(function(json) {
                if (json.data.csrf != undefined) {
                    $('input[name="csrf"]').val(json.data.csrf);
                }
            });
            return true;
        });
    });
})(jQuery);

function checkZip(isViewError = false) {
    var $error = $('span#error-zip');
    if (isViewError) {
        $error.html('');
        $error.hide();
    }
    var errorMessage = '';
    var $form = $('input[name="zip"]');
    if ($form.val() == '') {
        errorMessage = '▲必須項目です';
    } else if (!$form.val().match(/^\d+$/) && !$form.val().match(/^[０１２３４５６７８９]+$/)) {
        errorMessage = '▲数字で入力してください';
    }
    if (errorMessage == '') {
        return true;
    }
    if (isViewError) {
        $error.html(errorMessage);
        $error.show();
    }
    return false;
}
function checkPref(isViewError = false) {
    var $error = $('span#error-pref');
    if (isViewError) {
        $error.html('');
        $error.hide();
    }
    var errorMessage = '';
    var $form = $('select[name="pref"]');
    if ($form.val() == '') {
        errorMessage = '▲必須項目です';
    }
    if (errorMessage == '') {
        return true;
    }
    if (isViewError) {
        $error.html(errorMessage);
        $error.show();
    }
    return false;
}
function checkCity(isViewError = false) {
    var $error = $('span#error-city');
    if (isViewError) {
        $error.html('');
        $error.hide();
    }
    var errorMessage = '';
    var $form = $('input[name="city"]');
    if ($form.val() == '') {
        errorMessage = '▲必須項目です';
    }
    if (errorMessage == '') {
        return true;
    }
    if (isViewError) {
        $error.html(errorMessage);
        $error.show();
    }
    return false;
}
function checkAddress1(isViewError = false) {
    var $error = $('span#error-address1');
    if (isViewError) {
        $error.html('');
        $error.hide();
    }
    var errorMessage = '';
    var $form = $('input[name="address1"]');
    if ($form.val() == '') {
        errorMessage = '▲必須項目です';
    }
    if (errorMessage == '') {
        return true;
    }
    if (isViewError) {
        $error.html(errorMessage);
        $error.show();
    }
    return false;
}
function checkName(isViewError = false) {
    var $error = $('span#error-name');
    if (isViewError) {
        $error.html('');
        $error.hide();
    }
    var errorMessage = '';
    var $form = $('input[name="name"]');
    if ($form.val() == '') {
        errorMessage = '▲必須項目です';
    }
    if (errorMessage == '') {
        return true;
    }
    if (isViewError) {
        $error.html(errorMessage);
        $error.show();
    }
    return false;
}
function checkAge(isViewError = false) {
    return true;
}
function checkKname(isViewError = false) {
    var $error = $('span#error-kname');
    if (isViewError) {
        $error.html('');
        $error.hide();
    }
    var errorMessage = '';
    var $form = $('input[name="kname"]');
    if ($form.val() == '') {
        errorMessage = '▲必須項目です';
    }
    if (errorMessage == '') {
        return true;
    }
    if (isViewError) {
        $error.html(errorMessage);
        $error.show();
    }
    return false;
}
function checkEmail(isViewError = false) {
    var $error = $('span#error-email');
    if (isViewError) {
        $error.html('');
        $error.hide();
    }
    var errorMessage = '';
    var $form = $('input[name="email"]');
    if ($form.val() == '') {
        errorMessage = '▲必須項目です';
    } else if (!$form.val().match(/^[a-zA-Z0-9\"\._\?\+\/-]+\@(\[?)[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/)) {
        errorMessage = '▲不正なアドレスです';
    }
    if (errorMessage == '') {
        return true;
    }
    if (isViewError) {
        $error.html(errorMessage);
        $error.show();
    }
    return false;
}
function checkTel(isViewError = false) {
    var $error = $('span#error-tel');
    if (isViewError) {
        $error.html('');
        $error.hide();
    }
    var errorMessage = '';
    var $form = $('input[name="tel"]');
    if ($form.val() == '') {
        errorMessage = '▲必須項目です';
    } else if (!$form.val().match(/^\d+$/) && !$form.val().match(/^[０１２３４５６７８９]+$/)) {
        errorMessage = '▲数字で入力してください';
    }
    if (errorMessage == '') {
        return true;
    }
    if (isViewError) {
        $error.html(errorMessage);
        $error.show();
    }
    return false;
}