<template>
<div class="modal modal-default fade" id="application-form-modal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="initModal">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>お申込み〜ご契約までのながれ＜個人様用＞</h4>
            </div>

            <form method="post" :action="postUrl" class="form-horizontal" id="project-application-form">
            <input type="hidden" name="_method" value="POST">

            <div class="modal-body">
                <div class="row mb-2 fan-application-sheet -edit">
                    <h2>①　お申込・審査</h2>
                    <div class="entryarea">
                        ＜必要書類 ・ 確認事項＞
                        <ul>
                            <li class="form-group"
                                :class="checkBoxErrors(errors, 'application_sheet') ? 'has-error' : null"
                            >
                                <div class="item form-group">
                                    <label class="checkbox-inline">
                                        <input
                                            type="checkbox"
                                            value="済"
                                            :checked="isChecked('application_sheet', '済')"
                                            @change="updateCheckBoxValue($event, 'application_sheet')"
                                        > 申込書記入
                                    </label>
                                    <span class="help-block small" v-if="checkBoxErrors(errors, 'application_sheet')">
                                        <strong v-for="error in checkBoxErrors(errors, 'application_sheet')" v-text="error"></strong>
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="item form-group"
                                    :class="checkBoxErrors(errors, 'contractor_identification') ? 'has-error' : null"
                                >
                                    <label class="checkbox-inline">
                                        <input
                                            type="checkbox"
                                            value="済"
                                            :checked="isChecked('contractor_identification', '済')"
                                            @change="updateCheckBoxValue($event, 'contractor_identification')"
                                        > 身分証明書【
                                    </label>
                                </div>
                                <div class="item form-group"
                                    :class="checkBoxErrors(errors, 'contractor_identification_detail') ? 'has-error' : null"
                                >
                                    <label class="checkbox-inline">
                                        <input
                                            :disabled="isChecked('contractor_identification', '未回答')"
                                            type="checkbox"
                                            value="運転免許証(裏表)"
                                            :checked="isCheckedMultiple('contractor_identification_detail', '運転免許証(裏表)')"
                                            @change="updateCheckBoxValue($event, 'contractor_identification_detail')"
                                        >運転免許証(裏表)
                                    </label>
                                    <label class="checkbox-inline">
                                        <input
                                            :disabled="isChecked('contractor_identification', '未回答')"
                                            type="checkbox"
                                            value="保険証(裏表)"
                                            :checked="isCheckedMultiple('contractor_identification_detail', '保険証(裏表)')"
                                            @change="updateCheckBoxValue($event, 'contractor_identification_detail')"
                                        > 保険証(裏表)
                                    </label>
                                    <label class="checkbox-inline">
                                        <input
                                            :disabled="isChecked('contractor_identification', '未回答')"
                                            type="checkbox"
                                            value="パスポート"
                                            :checked="isCheckedMultiple('contractor_identification_detail', 'パスポート')"
                                            @change="updateCheckBoxValue($event, 'contractor_identification_detail')"
                                        > パスポート
                                    </label>
                                    <label class="checkbox-inline">
                                        <input
                                            :disabled="isChecked('contractor_identification', '未回答')"
                                            type="checkbox"
                                            value="その他"
                                            :checked="isCheckedMultiple('contractor_identification_detail', 'その他')"
                                            @change="updateCheckBoxValue($event, 'contractor_identification_detail')"
                                        > その他】
                                    </label>
                                    <span class="help-block small"
                                          v-if="checkBoxErrors(errors, 'contractor_identification')"
                                    >
                                        <strong v-for="error in checkBoxErrors(errors, 'contractor_identification')" v-text="error"></strong>
                                    </span>
                                    <span class="help-block small"
                                          v-if="checkBoxErrors(errors, 'contractor_identification_detail')"
                                    >
                                        <strong v-for="error in checkBoxErrors(errors, 'contractor_identification_detail')" v-text="error"></strong>
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="item form-group"
                                    :class="checkBoxErrors(errors, 'bicycle_parking') ? 'has-error' : null"
                                >
                                    <label class="radio-inline">駐輪場利用【</label>
                                    <label class="radio-inline">
                                        <input
                                            name="bicycle_parking"
                                            type="radio"
                                            value="未回答"
                                            :checked="isChecked('bicycle_parking', '未回答')"
                                            @change="updateValue($event, 'bicycle_parking')"
                                        > 未回答
                                    </label>
                                    <label class="radio-inline">
                                        <input
                                            name="bicycle_parking"
                                            type="radio"
                                            value="あり"
                                            :checked="isChecked('bicycle_parking', 'あり')"
                                            @change="updateValue($event, 'bicycle_parking')"
                                        > あり
                                    </label>
                                    <label class="radio-inline">
                                        <input
                                            name="bicycle_parking"
                                            type="radio"
                                            value="なし"
                                            :checked="isChecked('bicycle_parking', 'なし')"
                                            @change="updateValue($event, 'bicycle_parking')"
                                        > なし】
                                    </label>
                                    <span class="help-block small"
                                          v-if="checkBoxErrors(errors, 'bicycle_parking')"
                                    >
                                        <strong v-for="error in checkBoxErrors(errors, 'bicycle_parking')" v-text="error"></strong>
                                    </span>
                                </div>

                                <div class="item form-group"
                                    :class="checkBoxErrors(errors, 'soho_company_registration') ? 'has-error' : null"
                                >
                                    <label class="radio-inline">SOHOの場合【</label>
                                    <label class="radio-inline">
                                        <input
                                            name="soho_company_registration"
                                            type="radio"
                                            value="未回答"
                                            :checked="isChecked('soho_company_registration', '未回答')"
                                            @change="updateValue($event, 'soho_company_registration')"
                                        > 未回答
                                    </label>
                                    <label class="radio-inline">
                                        <input
                                            name="soho_company_registration"
                                            type="radio"
                                            value="登記あり"
                                            :checked="isChecked('soho_company_registration', '登記あり')"
                                            @change="updateValue($event, 'soho_company_registration')"
                                        > 登記あり
                                    </label>
                                    <label class="radio-inline">
                                        <input
                                            name="soho_company_registration"
                                            type="radio"
                                            value="登記なし"
                                            :checked="isChecked('soho_company_registration', '登記なし')"
                                            @change="updateValue($event, 'soho_company_registration')"
                                        > 登記なし】
                                    </label>
                                    <span class="help-block small"
                                          v-if="checkBoxErrors(errors, 'soho_company_registration')"
                                    >
                                        <strong v-for="error in checkBoxErrors(errors, 'soho_company_registration')" v-text="error"></strong>
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="item form-group"
                                    :class="checkBoxErrors(errors, 'child_resident') ? 'has-error' : null"
                                >
                                    <label class="radio-inline">お子様入居【</label>
                                    <label class="radio-inline">
                                        <input
                                            name="child_resident"
                                            type="radio"
                                            value="未回答"
                                            :checked="isChecked('child_resident', '未回答')"
                                            @change="updateValue($event, 'child_resident')"
                                        > 未回答
                                    </label>
                                    <label class="radio-inline">
                                        <input
                                            name="child_resident"
                                            type="radio"
                                            value="あり"
                                            :checked="isChecked('child_resident', 'あり')"
                                            @change="updateValue($event, 'child_resident')"
                                        > あり
                                    </label>
                                    <label class="radio-inline">
                                        <input
                                            name="child_resident"
                                            type="radio"
                                            value="なし"
                                            :checked="isChecked('child_resident', 'なし')"
                                            @change="updateValue($event, 'child_resident')"
                                        > なし】
                                    </label>
                                    <span class="help-block small"
                                          v-if="checkBoxErrors(errors, 'child_resident')"
                                    >
                                        <strong v-for="error in checkBoxErrors(errors, 'child_resident')" v-text="error"></strong>
                                    </span>
                                </div>

                                <div class="item form-group"
                                    :class="checkBoxErrors(errors, 'pet_resident') ? 'has-error' : null"
                                >
                                    <label class="radio-inline">ペット飼育【</label>
                                    <label class="radio-inline">
                                        <input
                                            name="pet_resident"
                                            type="radio"
                                            value="未回答"
                                            :checked="isChecked('pet_resident', '未回答')"
                                            @change="updateValue($event, 'pet_resident')"
                                        > 未回答
                                    </label>
                                    <label class="radio-inline">
                                        <input
                                            name="pet_resident"
                                            type="radio"
                                            value="あり"
                                            :checked="isChecked('pet_resident', 'あり')"
                                            @change="updateValue($event, 'pet_resident')"
                                        > あり
                                    </label>
                                    <label class="radio-inline">
                                        <input
                                            name="pet_resident"
                                            type="radio"
                                            value="なし"
                                            :checked="isChecked('pet_resident', 'なし')"
                                            @change="updateValue($event, 'pet_resident')"
                                        > なし】
                                    </label>
                                    <span class="help-block small"
                                          v-if="checkBoxErrors(errors, 'pet_resident')"
                                    >
                                        <strong v-for="error in checkBoxErrors(errors, 'pet_resident')" v-text="error"></strong>
                                    </span>
                                </div>

                                <div class="item form-group"
                                    :class="checkBoxErrors(errors, 'renewal_fee') ? 'has-error' : null"
                                >
                                    <label class="radio-inline">更新料【</label>
                                    <label class="radio-inline">
                                        <input
                                            name="renewal_fee"
                                            type="radio"
                                            value="未回答"
                                            :checked="isChecked('renewal_fee', '未回答')"
                                            @change="updateValue($event, 'renewal_fee')"
                                        > 未回答
                                    </label>
                                    <label class="radio-inline">
                                        <input
                                            name="renewal_fee"
                                            type="radio"
                                            value="1ヶ月"
                                            :checked="isChecked('renewal_fee', '1ヶ月')"
                                            @change="updateValue($event, 'renewal_fee')"
                                        > 1ヶ月
                                    </label>
                                    <label class="radio-inline">
                                        <input
                                            name="renewal_fee"
                                            type="radio"
                                            value="2ヶ月"
                                            :checked="isChecked('renewal_fee', '2ヶ月')"
                                            @change="updateValue($event, 'renewal_fee')"
                                        > 2ヶ月
                                    </label>
                                    <label class="radio-inline">
                                        <input
                                            name="renewal_fee"
                                            type="radio"
                                            value="その他"
                                            :checked="isChecked('renewal_fee', 'その他')"
                                            @change="updateValue($event, 'renewal_fee')"
                                        > その他】
                                    </label>
                                    <span class="help-block small"
                                          v-if="checkBoxErrors(errors, 'renewal_fee')"
                                    >
                                        <strong v-for="error in checkBoxErrors(errors, 'renewal_fee')" v-text="error"></strong>
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="item form-group"
                                    :class="checkBoxErrors(errors, 'deposit_amortization') ? 'has-error' : null"
                                >
                                    <label class="radio-inline">敷金償却【</label>
                                    <label class="radio-inline">
                                        <input
                                            name="deposit_amortization"
                                            type="radio"
                                            value="未回答"
                                            :checked="isChecked('deposit_amortization', '未回答')"
                                            @change="updateValue($event, 'deposit_amortization')"
                                        > 未回答
                                    </label>
                                    <label class="radio-inline">
                                        <input
                                            name="deposit_amortization"
                                            type="radio"
                                            value="あり"
                                            :checked="isChecked('deposit_amortization', 'あり')"
                                            @change="updateValue($event, 'deposit_amortization')"
                                        > あり
                                    </label>
                                    <label class="radio-inline">
                                        <input
                                            name="deposit_amortization"
                                            type="radio"
                                            value="なし"
                                            :checked="isChecked('deposit_amortization', 'なし')"
                                            @change="updateValue($event, 'deposit_amortization')"
                                        > なし】
                                    </label>
                                    <span class="help-block small"
                                          v-if="checkBoxErrors(errors, 'deposit_amortization')"
                                    >
                                        <strong v-for="error in checkBoxErrors(errors, 'deposit_amortization')" v-text="error"></strong>
                                    </span>
                                </div>

                                <div class="item form-group"
                                    :class="checkBoxErrors(errors, 'notice_of_cancellation') ? 'has-error' : null"
                                >
                                    <label class="radio-inline">解約予告</label>
                                    <label class="radio-inline">
                                        <input
                                            name="notice_of_cancellation"
                                            type="radio"
                                            value="未回答"
                                            :checked="isChecked('notice_of_cancellation', '未回答')"
                                            @change="updateValue($event, 'notice_of_cancellation')"
                                        > 未回答
                                    </label>
                                    <label class="radio-inline">
                                        <input
                                            name="notice_of_cancellation"
                                            type="radio"
                                            value="1ヶ月"
                                            :checked="isChecked('notice_of_cancellation', '1ヶ月')"
                                            @change="updateValue($event, 'notice_of_cancellation')"
                                        > 1ヶ月
                                    </label>
                                    <label class="radio-inline">
                                        <input
                                            name="notice_of_cancellation"
                                            type="radio"
                                            value="2ヶ月"
                                            :checked="isChecked('notice_of_cancellation', '2ヶ月')"
                                            @change="updateValue($event, 'notice_of_cancellation')"
                                        > 2ヶ月
                                    </label>
                                    <label class="radio-inline">
                                        <input
                                            name="notice_of_cancellation"
                                            type="radio"
                                            value="その他"
                                            :checked="isChecked('notice_of_cancellation', 'その他')"
                                            @change="updateValue($event, 'notice_of_cancellation')"
                                        > その他】
                                    </label>
                                    <span class="help-block small"
                                          v-if="checkBoxErrors(errors, 'notice_of_cancellation')"
                                    >
                                        <strong v-for="error in checkBoxErrors(errors, 'notice_of_cancellation')" v-text="error"></strong>
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="item form-group"
                                    :class="checkBoxErrors(errors, 'penalty') ? 'has-error' : null"
                                >
                                    <label class="radio-inline">短期解約違約金【</label>
                                    <label class="radio-inline">
                                        <input
                                            name="penalty"
                                            type="radio"
                                            value="未回答"
                                            :checked="isChecked('penalty', '未回答')"
                                            @change="updateValue($event, 'penalty')"
                                        > 未回答
                                    </label>
                                    <label class="radio-inline">
                                        <input
                                            name="penalty"
                                            type="radio"
                                            value="あり"
                                            :checked="isChecked('penalty', 'あり')"
                                            @change="updateValue($event, 'penalty')"
                                        > あり
                                    </label>
                                    <label class="radio-inline">
                                        <input
                                            name="penalty"
                                            type="radio"
                                            value="なし"
                                            :checked="isChecked('penalty', 'なし')"
                                            @change="updateValue($event, 'penalty')"
                                        > なし】
                                    </label>
                                    <span class="help-block small"
                                          v-if="checkBoxErrors(errors, 'penalty')"
                                    >
                                        <strong v-for="error in checkBoxErrors(errors, 'penalty')" v-text="error"></strong>
                                    </span>
                                </div>
                                <div class="item form-group -text"
                                    :class="checkBoxErrors(errors, 'penalty_detail') ? 'has-error' : null"
                                >
                                    <label for="penalty_detail" class="control-label col-sm-3">内容：</label>
                                    <div class="col-sm-9">
                                        <input
                                            name="penalty_detail" type="text" class="form-control"
                                            id="penalty_detail" placeholder="違約金内容"
                                            :readonly="isChecked('penalty', '未回答')"
                                            :value="applicationForm.penalty_detail"
                                            @input="updateValue($event, 'penalty_detail')"
                                        >
                                    </div>
                                    <span class="help-block small"
                                          v-if="checkBoxErrors(errors, 'penalty_detail')"
                                    >
                                        <strong v-for="error in checkBoxErrors(errors, 'penalty_detail')" v-text="error"></strong>
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="item form-group"
                                    :class="checkBoxErrors(errors, 'net_availability_investigation') ? 'has-error' : null"
                                >
                                    <label class="radio-inline">ネット環境調査【</label>
                                    <label class="radio-inline">
                                        <input
                                            name="net_availability_investigation"
                                            type="radio"
                                            value="未回答"
                                            :checked="isChecked('net_availability_investigation', '未回答')"
                                            @change="updateValue($event, 'net_availability_investigation')"
                                        > 未回答
                                    </label>
                                    <label class="radio-inline">
                                        <input
                                            name="net_availability_investigation"
                                            type="radio"
                                            value="要"
                                            :checked="isChecked('net_availability_investigation', '要')"
                                            @change="updateValue($event, 'net_availability_investigation')"
                                        > 要
                                    </label>
                                    <label class="radio-inline">
                                        <input
                                            name="net_availability_investigation"
                                            type="radio"
                                            value="不要"
                                            :checked="isChecked('net_availability_investigation', '不要')"
                                            @change="updateValue($event, 'net_availability_investigation')"
                                        > 不要】
                                    </label>
                                    <span class="help-block small"
                                          v-if="checkBoxErrors(errors, 'net_availability_investigation')"
                                    >
                                        <strong v-for="error in checkBoxErrors(errors, 'net_availability_investigation')" v-text="error"></strong>
                                    </span>
                                </div>
                                <div class="item">
                                    <p>※株式会社フリーコネクトよりご報告させていただきます</p>
                                    <p>電話番号：0120-993-353</p>
                                </div>
                            </li>
                            <li>
                                <div class="item form-group"
                                    :class="checkBoxErrors(errors, 'movers_guidance') ? 'has-error' : null"
                                >
                                    <label class="radio-inline">引越し業者のご紹介【</label>
                                    <label class="radio-inline">
                                        <input
                                            name="movers_guidance"
                                            type="radio"
                                            value="未回答"
                                            :checked="isChecked('movers_guidance', '未回答')"
                                            @change="updateValue($event, 'movers_guidance')"
                                        > 未回答
                                    </label>
                                    <label class="radio-inline">
                                        <input
                                            name="movers_guidance"
                                            type="radio"
                                            value="要"
                                            :checked="isChecked('movers_guidance', '要')"
                                            @change="updateValue($event, 'movers_guidance')"
                                        > 要
                                    </label>
                                    <label class="radio-inline">
                                        <input
                                            name="movers_guidance"
                                            type="radio"
                                            value="不要"
                                            :checked="isChecked('movers_guidance', '不要')"
                                            @change="updateValue($event, 'movers_guidance')"
                                        > 不要】
                                    </label>
                                    <span class="help-block small"
                                          v-if="checkBoxErrors(errors, 'movers_guidance')"
                                    >
                                        <strong v-for="error in checkBoxErrors(errors, 'movers_guidance')" v-text="error"></strong>
                                    </span>
                                </div>
                            </li>
                        </ul>
                        ＜追加でご提出いただくもの＞
                        <table class="entrytable mb-2">
                            <thead>
                                <tr>
                                    <td>＜契約者様＞</td>
                                    <td class="datecol">※ご提出期限</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="item form-group"
                                            :class="checkBoxErrors(errors, 'application_not_input') ? 'has-error' : null"
                                        >
                                            <label class="checkbox-inline">
                                                <input
                                                    type="checkbox"
                                                    value="済"
                                                    :checked="isChecked('application_not_input', '済')"
                                                    @change="updateCheckBoxValue($event, 'application_not_input')"
                                                > 申込未記入部分
                                            </label>
                                            <span class="help-block small" v-if="checkBoxErrors(errors, 'application_not_input')">
                                                <strong v-for="error in checkBoxErrors(errors, 'application_not_input')" v-text="error"></strong>
                                            </span>
                                        </div>
                                    </td>
                                    <td class="form-group"
                                        :class="checkBoxErrors(errors, 'application_not_input_limit') ? 'has-error' : null"
                                    >
                                        <div class="input-group date">
                                            <div class="input-group-addon">
                                                <i class="fa fa-calendar"></i>
                                            </div>
                                            <input
                                                autocomplete="off"
                                                type="text"
                                                name="application_not_input_limit"
                                                placeholder="ご提出期限"
                                                class="datepicker form-control"
                                                :value="applicationForm.application_not_input_limit"
                                                data-form_type="applicationForm"
                                                @input="updateValue($event, 'application_not_input_limit')"
                                                @change="updateValue($event, 'application_not_input_limit')"
                                             >
                                         </div>
                                         <span class="help-block small" v-if="checkBoxErrors(errors, 'application_not_input_limit')">
                                            <strong v-for="error in checkBoxErrors(errors, 'application_not_input_limit')" v-text="error"></strong>
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="item form-group"
                                            :class="checkBoxErrors(errors, 'contractor_proof_of_earnings') ? 'has-error' : null"
                                        >
                                            <label class="checkbox-inline">
                                                <input
                                                    type="checkbox"
                                                    value="済"
                                                    :checked="isChecked('contractor_proof_of_earnings', '済')"
                                                    @change="updateCheckBoxValue($event, 'contractor_proof_of_earnings')"
                                                > 所得証明書【
                                            </label>
                                            <span class="help-block small" v-if="checkBoxErrors(errors, 'contractor_proof_of_earnings')">
                                                <strong v-for="error in checkBoxErrors(errors, 'contractor_proof_of_earnings')" v-text="error"></strong>
                                            </span>
                                        </div>
                                        <div class="item form-group"
                                            :class="checkBoxErrors(errors, 'contractor_proof_of_earnings_detail') ? 'has-error' : null"
                                        >
                                            <label class="checkbox-inline">
                                                <input
                                                    :disabled="isChecked('contractor_proof_of_earnings', '未回答')"
                                                    type="checkbox"
                                                    value="確定申告書"
                                                    :checked="isCheckedMultiple('contractor_proof_of_earnings_detail', '確定申告書')"
                                                    @change="updateCheckBoxValue($event, 'contractor_proof_of_earnings_detail')"
                                                >確定申告書
                                            </label>
                                            <label class="checkbox-inline">
                                                <input
                                                    :disabled="isChecked('contractor_proof_of_earnings', '未回答')"
                                                    type="checkbox"
                                                    value="課税証明書"
                                                    :checked="isCheckedMultiple('contractor_proof_of_earnings_detail', '課税証明書')"
                                                    @change="updateCheckBoxValue($event, 'contractor_proof_of_earnings_detail')"
                                                >課税証明書
                                            </label>
                                            <label class="checkbox-inline">
                                                <input
                                                    :disabled="isChecked('contractor_proof_of_earnings', '未回答')"
                                                    type="checkbox"
                                                    value="源泉徴収票"
                                                    :checked="isCheckedMultiple('contractor_proof_of_earnings_detail', '源泉徴収票')"
                                                    @change="updateCheckBoxValue($event, 'contractor_proof_of_earnings_detail')"
                                                >源泉徴収票】
                                            </label>
                                            <span class="help-block small" v-if="checkBoxErrors(errors, 'contractor_proof_of_earnings_detail')">
                                                <strong v-for="error in checkBoxErrors(errors, 'contractor_proof_of_earnings_detail')" v-text="error"></strong>
                                            </span>
                                        </div>
                                    </td>
                                    <td class="form-group"
                                        :class="checkBoxErrors(errors, 'contractor_proof_of_earnings_limit') ? 'has-error' : null"
                                    >
                                        <div class="input-group date">
                                            <div class="input-group-addon">
                                                <i class="fa fa-calendar"></i>
                                            </div>
                                            <input
                                                autocomplete="off"
                                                type="text"
                                                name="contractor_proof_of_earnings_limit"
                                                placeholder="ご提出期限"
                                                class="datepicker form-control"
                                                :value="applicationForm.contractor_proof_of_earnings_limit"
                                                data-form_type="applicationForm"
                                                @input="updateValue($event, 'contractor_proof_of_earnings_limit')"
                                                @change="updateValue($event, 'contractor_proof_of_earnings_limit')"
                                             >
                                         </div>
                                         <span class="help-block small" v-if="checkBoxErrors(errors, 'contractor_proof_of_earnings_limit')">
                                            <strong v-for="error in checkBoxErrors(errors, 'contractor_proof_of_earnings_limit')" v-text="error"></strong>
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="item form-group"
                                            :class="checkBoxErrors(errors, 'contractor_agreement_notice') ? 'has-error' : null"
                                        >
                                            <label class="checkbox-inline">
                                                <input
                                                    type="checkbox"
                                                    value="済"
                                                    :checked="isChecked('contractor_agreement_notice', '済')"
                                                    @change="updateCheckBoxValue($event, 'contractor_agreement_notice')"
                                                > 内定通知書
                                            </label>
                                            <span class="help-block small" v-if="checkBoxErrors(errors, 'contractor_agreement_notice')">
                                                <strong v-for="error in checkBoxErrors(errors, 'contractor_agreement_notice')" v-text="error"></strong>
                                            </span>
                                        </div>
                                    </td>
                                    <td class="form-group"
                                        :class="checkBoxErrors(errors, 'contractor_agreement_notice_limit') ? 'has-error' : null"
                                    >
                                        <div class="input-group date">
                                            <div class="input-group-addon">
                                                <i class="fa fa-calendar"></i>
                                            </div>
                                            <input
                                                autocomplete="off"
                                                type="text"
                                                name="contractor_agreement_notice_limit"
                                                placeholder="ご提出期限"
                                                class="datepicker form-control"
                                                :value="applicationForm.contractor_agreement_notice_limit"
                                                data-form_type="applicationForm"
                                                @input="updateValue($event, 'contractor_agreement_notice_limit')"
                                                @change="updateValue($event, 'contractor_agreement_notice_limit')"
                                             >
                                         </div>
                                         <span class="help-block small" v-if="checkBoxErrors(errors, 'contractor_agreement_notice_limit')">
                                            <strong v-for="error in checkBoxErrors(errors, 'contractor_agreement_notice_limit')" v-text="error"></strong>
                                        </span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                        <table class="entrytable mb-2">
                            <thead>
                                <tr>
                                    <td>＜連帯保証人様＞</td>
                                    <td class="datecol">※ご提出期限</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="item form-group"
                                            :class="checkBoxErrors(errors, 'guarantor_identification') ? 'has-error' : null"
                                        >
                                            <label class="checkbox-inline">
                                                <input
                                                    type="checkbox"
                                                    value="済"
                                                    :checked="isChecked('guarantor_identification', '済')"
                                                    @change="updateCheckBoxValue($event, 'guarantor_identification')"
                                                > 身分証明書
                                            </label>
                                            <span class="help-block small" v-if="checkBoxErrors(errors, 'guarantor_identification')">
                                                <strong v-for="error in checkBoxErrors(errors, 'guarantor_identification')" v-text="error"></strong>
                                            </span>
                                        </div>
                                    </td>
                                    <td class="form-group"
                                        :class="checkBoxErrors(errors, 'guarantor_identification_limit') ? 'has-error' : null"
                                    >
                                        <div class="input-group date">
                                            <div class="input-group-addon">
                                                <i class="fa fa-calendar"></i>
                                            </div>
                                            <input
                                                autocomplete="off"
                                                type="text"
                                                name="guarantor_identification_limit"
                                                placeholder="ご提出期限"
                                                class="datepicker form-control"
                                                :value="applicationForm.guarantor_identification_limit"
                                                data-form_type="applicationForm"
                                                @input="updateValue($event, 'guarantor_identification_limit')"
                                                @change="updateValue($event, 'guarantor_identification_limit')"
                                             >
                                         </div>
                                         <span class="help-block small" v-if="checkBoxErrors(errors, 'guarantor_identification_limit')">
                                            <strong v-for="error in checkBoxErrors(errors, 'guarantor_identification_limit')" v-text="error"></strong>
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="item form-group"
                                            :class="checkBoxErrors(errors, 'guarantor_proof_of_earnings') ? 'has-error' : null"
                                        >
                                            <label class="checkbox-inline">
                                                <input
                                                    type="checkbox"
                                                    value="済"
                                                    :checked="isChecked('guarantor_proof_of_earnings', '済')"
                                                    @change="updateCheckBoxValue($event, 'guarantor_proof_of_earnings')"
                                                > 所得証明書【
                                            </label>
                                            <span class="help-block small" v-if="checkBoxErrors(errors, 'guarantor_proof_of_earnings')">
                                                <strong v-for="error in checkBoxErrors(errors, 'guarantor_proof_of_earnings')" v-text="error"></strong>
                                            </span>
                                        </div>
                                        <div class="item form-group"
                                            :class="checkBoxErrors(errors, 'guarantor_proof_of_earnings_detail') ? 'has-error' : null"
                                        >
                                            <label class="checkbox-inline">
                                                <input
                                                    :disabled="isChecked('guarantor_proof_of_earnings', '未回答')"
                                                    type="checkbox"
                                                    value="確定申告書"
                                                    :checked="isCheckedMultiple('guarantor_proof_of_earnings_detail', '確定申告書')"
                                                    @change="updateCheckBoxValue($event, 'guarantor_proof_of_earnings_detail')"
                                                >確定申告書
                                            </label>
                                            <label class="checkbox-inline">
                                                <input
                                                    :disabled="isChecked('guarantor_proof_of_earnings', '未回答')"
                                                    type="checkbox"
                                                    value="課税証明書"
                                                    :checked="isCheckedMultiple('guarantor_proof_of_earnings_detail', '課税証明書')"
                                                    @change="updateCheckBoxValue($event, 'guarantor_proof_of_earnings_detail')"
                                                >課税証明書
                                            </label>
                                            <label class="checkbox-inline">
                                                <input
                                                    :disabled="isChecked('guarantor_proof_of_earnings', '未回答')"
                                                    type="checkbox"
                                                    value="源泉徴収票"
                                                    :checked="isCheckedMultiple('guarantor_proof_of_earnings_detail', '源泉徴収票')"
                                                    @change="updateCheckBoxValue($event, 'guarantor_proof_of_earnings_detail')"
                                                >源泉徴収票】
                                            </label>
                                            <span class="help-block small" v-if="checkBoxErrors(errors, 'guarantor_proof_of_earnings_detail')">
                                                <strong v-for="error in checkBoxErrors(errors, 'guarantor_proof_of_earnings_detail')" v-text="error"></strong>
                                            </span>
                                        </div>
                                    </td>
                                    <td class="form-group"
                                        :class="checkBoxErrors(errors, 'guarantor_proof_of_earnings_limit') ? 'has-error' : null"
                                    >
                                        <div class="input-group date">
                                            <div class="input-group-addon">
                                                <i class="fa fa-calendar"></i>
                                            </div>
                                            <input
                                                autocomplete="off"
                                                type="text"
                                                name="guarantor_proof_of_earnings_limit"
                                                placeholder="ご提出期限"
                                                class="datepicker form-control"
                                                :value="applicationForm.guarantor_proof_of_earnings_limit"
                                                data-form_type="applicationForm"
                                                @input="updateValue($event, 'guarantor_proof_of_earnings_limit')"
                                                @change="updateValue($event, 'guarantor_proof_of_earnings_limit')"
                                             >
                                         </div>
                                         <span class="help-block small" v-if="checkBoxErrors(errors, 'guarantor_proof_of_earnings_limit')">
                                            <strong v-for="error in checkBoxErrors(errors, 'guarantor_proof_of_earnings_limit')" v-text="error"></strong>
                                        </span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>


                        <table class="entrytable mb-2">
                            <thead>
                                <tr>
                                    <td>＜入居者様＞</td>
                                    <td class="datecol">※ご提出期限</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="item form-group"
                                            :class="checkBoxErrors(errors, 'tenant_identification') ? 'has-error' : null"
                                        >
                                            <label class="checkbox-inline">
                                                <input
                                                    type="checkbox"
                                                    value="済"
                                                    :checked="isChecked('tenant_identification', '済')"
                                                    @change="updateCheckBoxValue($event, 'tenant_identification')"
                                                > 身分証明書
                                            </label>
                                            <span class="help-block small" v-if="checkBoxErrors(errors, 'tenant_identification')">
                                                <strong v-for="error in checkBoxErrors(errors, 'tenant_identification')" v-text="error"></strong>
                                            </span>
                                        </div>
                                    </td>
                                    <td class="form-group"
                                        :class="checkBoxErrors(errors, 'tenant_identification_limit') ? 'has-error' : null"
                                    >
                                        <div class="input-group date">
                                            <div class="input-group-addon">
                                                <i class="fa fa-calendar"></i>
                                            </div>
                                            <input
                                                autocomplete="off"
                                                type="text"
                                                name="tenant_identification_limit"
                                                placeholder="ご提出期限"
                                                class="datepicker form-control"
                                                :value="applicationForm.tenant_identification_limit"
                                                data-form_type="applicationForm"
                                                @input="updateValue($event, 'tenant_identification_limit')"
                                                @change="updateValue($event, 'tenant_identification_limit')"
                                             >
                                         </div>
                                         <span class="help-block small" v-if="checkBoxErrors(errors, 'tenant_identification_limit')">
                                            <strong v-for="error in checkBoxErrors(errors, 'tenant_identification_limit')" v-text="error"></strong>
                                        </span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>




                        ＜こちらへお送りください＞
                        <ul>
                            <li>
                                <div class="item form-group"
                                    :class="checkBoxErrors(errors, 'destination') ? 'has-error' : null"
                                >
                                    <label class="radio-inline">FAX番号【</label>
                                    <label class="radio-inline">
                                        <input
                                            name="destination"
                                            type="radio"
                                            value="未回答"
                                            :checked="isChecked('destination', '未回答')"
                                            @change="updateValue($event, 'destination')"
                                        > 未回答
                                    </label>
                                    <label class="radio-inline">
                                        <input
                                            name="destination"
                                            type="radio"
                                            value="FAX:03-5722-7510"
                                            :checked="isChecked('destination', 'FAX:03-5722-7510')"
                                            @change="updateValue($event, 'destination')"
                                        > FAX:03-5722-7510
                                    </label>
                                    <label class="radio-inline">
                                        <input
                                            name="destination"
                                            type="radio"
                                            value="FAX:03-5712-2452"
                                            :checked="isChecked('destination', 'FAX:03-5712-2452')"
                                            @change="updateValue($event, 'destination')"
                                        > FAX:03-5712-2452
                                    </label>
                                    <label class="radio-inline">
                                        <input
                                            name="destination"
                                            type="radio"
                                            value="メール"
                                            :checked="isChecked('destination', 'メール')"
                                            @change="updateValue($event, 'destination')"
                                        > メール】
                                    </label>
                                    <span class="help-block small"
                                          v-if="checkBoxErrors(errors, 'destination')"
                                    >
                                        <strong v-for="error in checkBoxErrors(errors, 'destination')" v-text="error"></strong>
                                    </span>
                                </div>
                            </li>
                        </ul>
                        ＜管理会社・保証会社から電話連絡が入る場合がありますのでご対応をお願いします＞
                        <ul>
                            <li>
                                <div class="item form-group"
                                    :class="checkBoxErrors(errors, 'tel_contact_confirm') ? 'has-error' : null"
                                >
                                    <label class="checkbox-inline">
                                        <input
                                            type="checkbox"
                                            value="本人確認"
                                            :checked="isCheckedMultiple('tel_contact_confirm', '本人確認')"
                                            @change="updateCheckBoxValue($event, 'tel_contact_confirm')"
                                        >本人確認
                                    </label>
                                    <label class="checkbox-inline">
                                        <input
                                            type="checkbox"
                                            value="連帯保証人確認"
                                            :checked="isCheckedMultiple('tel_contact_confirm', '連帯保証人確認')"
                                            @change="updateCheckBoxValue($event, 'tel_contact_confirm')"
                                        >連帯保証人確認
                                    </label>
                                    <label class="checkbox-inline">
                                        <input
                                            type="checkbox"
                                            value="緊急連絡先確認"
                                            :checked="isCheckedMultiple('tel_contact_confirm', '緊急連絡先確認')"
                                            @change="updateCheckBoxValue($event, 'tel_contact_confirm')"
                                        >緊急連絡先確認
                                    </label>
                                    <span class="help-block small" v-if="checkBoxErrors(errors, 'tel_contact_confirm')">
                                        <strong v-for="error in checkBoxErrors(errors, 'tel_contact_confirm')" v-text="error"></strong>
                                    </span>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <h2>③　審査完了</h2>
                    <div class="entryarea">
                        ＜ご契約金の明細をお送りいたします＞
                        <ul>
                            <li>
                                <div class="item form-group"
                                    :class="checkBoxErrors(errors, 'e_mail_confirm') ? 'has-error' : null"
                                >
                                    <label class="checkbox-inline">
                                        <input
                                            type="checkbox"
                                            value="済"
                                            :checked="isChecked('e_mail_confirm', '済')"
                                            @change="updateCheckBoxValue($event, 'e_mail_confirm')"
                                        > 明細を送るメールアドレス確認
                                    </label>
                                    <span class="help-block small" v-if="checkBoxErrors(errors, 'e_mail_confirm')">
                                        <strong v-for="error in checkBoxErrors(errors, 'e_mail_confirm')" v-text="error"></strong>
                                    </span>
                                </div>
                                <div class="item form-group">
                                    <p class="checkbox-inline">※原本はご契約時にお渡しいたします</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <h2>④　ご契約・お支払い</h2>
                    <div class="entryarea">
                        <ul>
                            <li>
                                <div class="item form-group"
                                    :class="checkBoxErrors(errors, 'contract_date') ? 'has-error' : null"
                                >
                                    <label for="contract_date" class="control-label col-sm-2">
                                        ご契約日時：
                                    </label>
                                    <div class="col-sm-3">
                                        <div class="input-group">
                                            <div class="input-group-addon">
                                                <i class="fa fa-calendar"></i>
                                            </div>
                                            <input
                                                autocomplete="off"
                                                type="text"
                                                name="contract_date"
                                                placeholder="ご契約日時"
                                                class="datepicker form-control"
                                                :value="applicationForm.contract_date"
                                                data-form_type="applicationForm"
                                                @input="updateValue($event, 'contract_date')"
                                                @change="updateValue($event, 'contract_date')"
                                             >
                                         </div>
                                     </div>
                                     <div class="col-sm-7">
                                        <p class="checkbox-inline">※所要時間1時間前後</p>
                                    </div>
                                     <span class="help-block small" v-if="checkBoxErrors(errors, 'contract_date')">
                                        <strong v-for="error in checkBoxErrors(errors, 'contract_date')" v-text="error"></strong>
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="item -row form-group"
                                     :class="checkBoxErrors(errors, 'contract_location') ? 'has-error' : null"
                                >
                                    <label for="contract_location" class="control-label col-sm-2">
                                        ご契約場所：
                                    </label>
                                    <div class="col-sm-5">
                                        <input
                                            name="contract_location" type="text" class="form-control"
                                            id="contract_location" placeholder="ご契約場所"
                                            :value="applicationForm.contract_location"
                                            @input="updateValue($event, 'contract_location')"
                                        >
                                    </div>
                                    <span class="help-block small"
                                          v-if="checkBoxErrors(errors, 'contract_location')"
                                    >
                                        <strong v-for="error in checkBoxErrors(errors, 'contract_location')" v-text="error"></strong>
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="item row">
                                    <div class="col-sm-2"></div>
                                    <div class="col-sm-10">
                                        <p>※ご契約日の前後でご契約金のお支払いをお願いいたします</p>
                                    </div>
                                </div>
                            </li>
                        </ul>


                        <ul>
                            ＜必要書類＞
                        </ul>
                        <table class="entrytable -inline mb-2">
                            <thead>
                                <tr>
                                    <td>＜契約者様＞</td>
                                </tr>
                            </thead>
                            <tbody class="form-group"
                                  :class="checkBoxErrors(errors, 'contractor_required_docs') ? 'has-error' : null"
                            >
                                <tr>
                                    <td>
                                        <label class="checkbox-inline">
                                            <input
                                                type="checkbox"
                                                value="身分証明書ファーストコピー"
                                                :checked="isCheckedMultiple('contractor_required_docs', '身分証明書ファーストコピー')"
                                                @change="updateCheckBoxValue($event, 'contractor_required_docs')"
                                            >身分証明書ファーストコピー
                                        </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label class="checkbox-inline">
                                            <input
                                                type="checkbox"
                                                value="現住所の住民票"
                                                :checked="isCheckedMultiple('contractor_required_docs', '現住所の住民票')"
                                                @change="updateCheckBoxValue($event, 'contractor_required_docs')"
                                            >現住所の住民票
                                        </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label class="checkbox-inline">
                                            <input
                                                type="checkbox"
                                                value="通帳/銀行届出印"
                                                :checked="isCheckedMultiple('contractor_required_docs', '通帳/銀行届出印')"
                                                @change="updateCheckBoxValue($event, 'contractor_required_docs')"
                                            >通帳/銀行届出印
                                        </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label class="checkbox-inline">印鑑【</label>
                                        <label class="checkbox-inline">
                                            <input
                                                type="checkbox"
                                                value="認印"
                                                :checked="isCheckedMultiple('contractor_required_docs', '認印')"
                                                @change="updateCheckBoxValue($event, 'contractor_required_docs')"
                                            >認印
                                        </label>
                                        <label class="checkbox-inline">
                                            <input
                                                type="checkbox"
                                                value="実印"
                                                :checked="isCheckedMultiple('contractor_required_docs', '実印')"
                                                @change="updateCheckBoxValue($event, 'contractor_required_docs')"
                                            >実印】
                                        </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label class="checkbox-inline">
                                            <input
                                                type="checkbox"
                                                value="印鑑証明書"
                                                :checked="isCheckedMultiple('contractor_required_docs', '印鑑証明書')"
                                                @change="updateCheckBoxValue($event, 'contractor_required_docs')"
                                            >印鑑証明書
                                        </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="help-block small"
                                              v-if="checkBoxErrors(errors, 'contractor_required_docs')"
                                        >
                                            <strong v-for="error in checkBoxErrors(errors, 'contractor_required_docs')" v-text="error"></strong>
                                        </span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <table class="entrytable -inline mb-2">
                            <thead>
                                <tr>
                                    <td>＜連帯保証人様＞</td>
                                </tr>
                            </thead>
                            <tbody class="form-group"
                                  :class="checkBoxErrors(errors, 'guarantor_required_docs') ? 'has-error' : null"
                            >
                                <tr>
                                    <td>
                                        <label class="checkbox-inline">
                                            <input
                                                type="checkbox"
                                                value="身分証明書ファーストコピー"
                                                :checked="isCheckedMultiple('guarantor_required_docs', '身分証明書ファーストコピー')"
                                                @change="updateCheckBoxValue($event, 'guarantor_required_docs')"
                                            >身分証明書ファーストコピー
                                        </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label class="checkbox-inline">
                                            <input
                                                type="checkbox"
                                                value="印鑑証明書"
                                                :checked="isCheckedMultiple('guarantor_required_docs', '印鑑証明書')"
                                                @change="updateCheckBoxValue($event, 'guarantor_required_docs')"
                                            >印鑑証明書
                                        </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label class="checkbox-inline">
                                            <input
                                                type="checkbox"
                                                value="連帯保証人承諾書"
                                                :checked="isCheckedMultiple('guarantor_required_docs', '連帯保証人承諾書')"
                                                @change="updateCheckBoxValue($event, 'guarantor_required_docs')"
                                            >連帯保証人承諾書
                                        </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label class="checkbox-inline">
                                            <input
                                                type="checkbox"
                                                value="所得証明書"
                                                :checked="isCheckedMultiple('guarantor_required_docs', '所得証明書')"
                                                @change="updateCheckBoxValue($event, 'guarantor_required_docs')"
                                            >所得証明書
                                        </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="help-block small"
                                              v-if="checkBoxErrors(errors, 'guarantor_required_docs')"
                                        >
                                            <strong v-for="error in checkBoxErrors(errors, 'guarantor_required_docs')" v-text="error"></strong>
                                        </span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <table class="entrytable -inline mb-2">
                            <thead>
                                <tr>
                                    <td>＜連帯保証人様＞</td>
                                </tr>
                            </thead>
                            <tbody class="form-group"
                                  :class="checkBoxErrors(errors, 'tenant_required_docs') ? 'has-error' : null"
                            >
                                <tr>
                                    <td>
                                        <label class="checkbox-inline">
                                            <input
                                                type="checkbox"
                                                value="住民票"
                                                :checked="isCheckedMultiple('tenant_required_docs', '住民票')"
                                                @change="updateCheckBoxValue($event, 'tenant_required_docs')"
                                            >住民票
                                        </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label class="checkbox-inline">
                                            <input
                                                type="checkbox"
                                                value="身分証明書ファーストコピー"
                                                :checked="isCheckedMultiple('tenant_required_docs', '身分証明書ファーストコピー')"
                                                @change="updateCheckBoxValue($event, 'tenant_required_docs')"
                                            >身分証明書ファーストコピー
                                        </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="help-block small"
                                              v-if="checkBoxErrors(errors, 'tenant_required_docs')"
                                        >
                                            <strong v-for="error in checkBoxErrors(errors, 'tenant_required_docs')" v-text="error"></strong>
                                        </span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <h2>⑥　鍵引渡し</h2>
                    <span>※印鑑をご持参下さい</span>
                    <div class="entryarea">
                        <ul>
                            <li>
                                <div class="item form-group"
                                    :class="checkBoxErrors(errors, 'delivery_date') ? 'has-error' : null"
                                >
                                    <label for="delivery_date" class="control-label col-sm-2">
                                        日時：
                                    </label>
                                    <div class="col-sm-3">
                                        <div class="input-group">
                                            <div class="input-group-addon">
                                                <i class="fa fa-calendar"></i>
                                            </div>
                                            <input
                                                autocomplete="off"
                                                type="text"
                                                name="delivery_date"
                                                placeholder="日時"
                                                class="datepicker form-control"
                                                :value="applicationForm.delivery_date"
                                                data-form_type="applicationForm"
                                                @input="updateValue($event, 'delivery_date')"
                                                @change="updateValue($event, 'delivery_date')"
                                             >
                                         </div>
                                     </div>
                                     <span class="help-block small" v-if="checkBoxErrors(errors, 'delivery_date')">
                                        <strong v-for="error in checkBoxErrors(errors, 'delivery_date')" v-text="error"></strong>
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="item -row form-group"
                                     :class="checkBoxErrors(errors, 'delivery_location') ? 'has-error' : null"
                                >
                                    <label for="delivery_location" class="control-label col-sm-2">
                                        場所：
                                    </label>
                                    <div class="col-sm-5">
                                        <input
                                            name="delivery_location" type="text" class="form-control"
                                            id="delivery_location" placeholder="ご契約場所"
                                            :value="applicationForm.delivery_location"
                                            @input="updateValue($event, 'delivery_location')"
                                        >
                                    </div>
                                    <span class="help-block small"
                                          v-if="checkBoxErrors(errors, 'delivery_location')"
                                    >
                                        <strong v-for="error in checkBoxErrors(errors, 'delivery_location')" v-text="error"></strong>
                                    </span>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <h2>　　確認事項</h2>
                    <div class="entryarea">
                        <ul>
                            <li class="mt-2">
                                <div class="col-sm-5 form-group"
                                    :class="checkBoxErrors(errors, 'check_task_1') ? 'has-error' : null"
                                >
                                    <input
                                        name="check_task_1" type="text" class="form-control"
                                        id="check_task_1" placeholder="確認事項1"
                                        :value="applicationForm.check_task_1"
                                        @input="updateValue($event, 'check_task_1')"
                                    >
                                    <span class="help-block small" v-if="checkBoxErrors(errors, 'check_task_1')">
                                        <strong v-for="error in checkBoxErrors(errors, 'check_task_1')" v-text="error"></strong>
                                    </span>
                                </div>
                                <div class="col-sm-5 form-group ml-2"
                                    :class="checkBoxErrors(errors, 'check_task_2') ? 'has-error' : null"
                                >
                                    <input
                                        name="check_task_2" type="text" class="form-control"
                                        id="check_task_2" placeholder="確認事項2"
                                        :value="applicationForm.check_task_2"
                                        @input="updateValue($event, 'check_task_2')"
                                    >
                                    <span class="help-block small" v-if="checkBoxErrors(errors, 'check_task_2')">
                                        <strong v-for="error in checkBoxErrors(errors, 'check_task_2')" v-text="error"></strong>
                                    </span>
                                </div>
                            </li>
                            <li class="mt-2">
                                <div class="col-sm-5 form-group"
                                    :class="checkBoxErrors(errors, 'check_task_3') ? 'has-error' : null"
                                >
                                    <input
                                        name="check_task_3" type="text" class="form-control"
                                        id="check_task_3" placeholder="確認事項3"
                                        :value="applicationForm.check_task_3"
                                        @input="updateValue($event, 'check_task_3')"
                                    >
                                    <span class="help-block small" v-if="checkBoxErrors(errors, 'check_task_3')">
                                        <strong v-for="error in checkBoxErrors(errors, 'check_task_3')" v-text="error"></strong>
                                    </span>
                                </div>
                                <div class="col-sm-5 form-group ml-2"
                                    :class="checkBoxErrors(errors, 'check_task_4') ? 'has-error' : null"
                                >
                                    <input
                                        name="check_task_4" type="text" class="form-control"
                                        id="check_task_4" placeholder="確認事項4"
                                        :value="applicationForm.check_task_4"
                                        @input="updateValue($event, 'check_task_4')"
                                    >
                                    <span class="help-block small" v-if="checkBoxErrors(errors, 'check_task_4')">
                                        <strong v-for="error in checkBoxErrors(errors, 'check_task_4')" v-text="error"></strong>
                                    </span>
                                </div>
                            </li>
                            <li class="mt-2">
                                <div class="col-sm-5 form-group"
                                    :class="checkBoxErrors(errors, 'check_task_5') ? 'has-error' : null"
                                >
                                    <input
                                        name="check_task_5" type="text" class="form-control"
                                        id="check_task_5" placeholder="確認事項5"
                                        :value="applicationForm.check_task_5"
                                        @input="updateValue($event, 'check_task_5')"
                                    >
                                    <span class="help-block small" v-if="checkBoxErrors(errors, 'check_task_5')">
                                        <strong v-for="error in checkBoxErrors(errors, 'check_task_5')" v-text="error"></strong>
                                    </span>
                                </div>
                                <div class="col-sm-5 form-group ml-2"
                                    :class="checkBoxErrors(errors, 'check_task_2') ? 'has-error' : null"
                                >
                                    <input
                                        name="check_task_6" type="text" class="form-control"
                                        id="check_task_6" placeholder="確認事項6"
                                        :value="applicationForm.check_task_6"
                                        @input="updateValue($event, 'check_task_6')"
                                    >
                                    <span class="help-block small" v-if="checkBoxErrors(errors, 'check_task_6')">
                                        <strong v-for="error in checkBoxErrors(errors, 'check_task_6')" v-text="error"></strong>
                                    </span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" @click="initModal">
                    <i class="fa fa-times-circle" aria-hidden="true"></i> 閉じる
                </button>
                <button type="button" class="btn btn-primary vue-disabled" @click="save">
                    <i class="fa fa-floppy-o" aria-hidden="true">保存</i>
                </button>
            </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</template>

<script>

import { mapState } from 'vuex'
import _ from 'lodash'

export default {
    computed: {
        postUrl() {
            return '/'+ this.pageName + '/' + this.project.id + '/' + 'save-application';
        },
        ...mapState([
            'pageName',
            'project',
        ]),
        ...mapState('applicationInfo', [
            'applicationForm',
        ]),
        ...mapState('modal', [
            'errors'
        ]),
    },
    created() {
        /*----------------------*
          jQueryライブラリの初期化
         *----------------------*/
        let self = this;
        $(function () {
            // select2は、store/project.jsで実施

            // Date picker
            if(typeof $('.datepicker').datepicker == "function") {
                $('.datepicker').datepicker({
                    format: 'yyyy-mm-dd',
                    todayHighlight: true,
                    language: 'ja',
                    autoclose: true,
                }).on({
                    changeDate : function($event){self.updateValue($event, $event.target.name)}
                });
            }
            // モーダルが閉じられた
            $('#application-form-modal').on('hidden.bs.modal', function (e) {
                self.$store.dispatch('applicationInfo/hideApplicationModal');
                self.$store.commit('modal/clearErrors');
            });
        });
    },
    methods: {
        checkBoxErrors(errors, key) {
            var keyArray = _.map(errors, function(value, key, errors) {
                return key;
            });
            for (var i = keyArray.length - 1; i >= 0; i--) {
                if (keyArray[i].indexOf(".") == -1 && keyArray[i] == key) {
                    return errors[keyArray[i]];
                }else if (keyArray[i].substring(0,keyArray[i].indexOf(".")) == key) {
                    return errors[keyArray[i]];
                }
            }
            return false;
        },
        initModal() {
            this.$store.dispatch('applicationInfo/hideApplicationModal');
            this.$store.commit('modal/clearErrors');
        },
        updateValue(e, key_name) {
            this.$store.commit('applicationInfo/updateValue', { value:e.target.value, key_name });
        },
        updateCheckBoxValue(e, key_name) {
            // 現在のチェック状態
            let checkStates = this.applicationForm[key_name];
            if(e.target.checked){
                checkStates = checkStates.indexOf('未回答') >=0 ? [] : checkStates;
                checkStates.push(e.target.value);
            } else {
                checkStates = checkStates.filter(function(v){
                    return v != e.target.value;
                });
            }
            if(checkStates.length === 0) {
                checkStates = ['未回答']
            }
            this.$store.commit('applicationInfo/updateValue', { value:checkStates, key_name });
        },
        save() {
            let self = this;

            self.$store.commit('modal/clearErrors');

            let data = self.applicationForm;

            this.$root.ajax('post', self.postUrl, data, function(res) {
                //申込みの流れを更新
                self.$root.setToVuexStore(res.set_to_vuex_store);
                self.$store.dispatch('applicationInfo/hideApplicationModal');
                self.$store.dispatch('toast/showingToast', {
                    type: 'success',
                    title: '保存完了',
                    messages: [ '申し込みの流れを保存しました。'],
                });
            });
        },
        g(obj, keys, defaultVal) {
            return this.$root.getWithObj(obj, keys, defaultVal);
        },
        isChecked(key, value) {
            return this.g(this.applicationForm, [key]) == value;
        },
        isCheckedMultiple(key, value) {
            return this.g(this.applicationForm ,[key],[]).indexOf(value) >=0;
        }
    }
}
</script>