@push('css')
    <style>
        /*#diagnostic_content select {*/
        /*    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z' fill='%23888888'/></svg>") !important;*/
        /*}*/
        #diagnostic_content span,
        #diagnostic_content p,
        #diagnostic_content div,
        #diagnostic_content select,
        #diagnostic_content input {
            color: #222222;
            font-size: 14px;
        }
    </style>
@endpush

<div v-if="item.selected == 1 && item.name == 'diagnostic_content'" id="diagnostic_content">
    <div class="w-full m-h-[200px] !rounded-[10px] !border-[1px] !border-solid !border-[#DDDDDD] !bg-[#FFFFFF]">
        <div class="b-i-header d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center justify-content-start">
                <div class="!text-[14px] !font-[600] !text-[#888888]"><i class="fas fa-clipboard-list-check mr-[10px]"></i>@{{ item.display_title }}</div>
            </div>
           <div class="d-flex justify-content-end">
               <div class="d-flex">
                   <div @click="changeRequired(index, 1)"
                        class="!cursor-pointer w-[60px] h-[30px] rounded-tl-[5px] rounded-bl-[5px] !border !border-solid !border-[#DDDDDD] d-flex justify-content-center !text-[14px]"
                        :class="item.rules == 1 ? '!bg-[#FDEBE9] !text-[#F44336] !font-[600]' : '!bg-[#ffffff] !font-[300] !text-[#E0E0E0]'">
                       必須
                   </div>
                   <div @click="changeRequired(index, 0)"
                        class="!cursor-pointer w-[60px] h-[30px] rounded-tr-[5px] rounded-br-[5px] !border !border-solid !border-[#DDDDDD] !border-l-0 d-flex justify-content-center !text-[14px]"
                        :class="item.rules == 0 ? '!bg-[#EDF4FB] !text-[#5799DB] !font-[600]' : '!bg-[#ffffff] !font-[300] !text-[#E0E0E0]'">
                       任意
                   </div>
               </div>
               @include('basic.form_answer.components.v3.copy_delete')
           </div>
        </div>
        <div class="p-[20px]">
            <div class="d-flex align-items-end">
                <span class="!text-[14px] !font-[300] !text-[#222222]">質問文</span>
                <span class="!text-[14px] !font-[300] !text-[#F44336]"><i
                            class="fas fa-asterisk color-red font-s9 ml-2"></i></span>
                <span class="!text-[12px] !font-[300] !text-[#888888] ml-auto">@{{ countText(item.title) }}/50</span>
            </div>
            <textarea v-model="item.title"
                      placeholder="質問内容を入力してください"
                      class="mt-[7px] !rounded-[3px] !border !border-solid !border-[#E6E6E6] h-[70px]"
                      v-validate="'required|max:50'"
                      :name="'title-dia-' + index"
                      data-vv-as="質問文"
            ></textarea>
            <p class="font-s14 font-w-bold color-red">@{{ errors.first('title-dia-' + index) }} </p>
            <a class="mt-[10px] !cursor-pointer !text-[#888888] !text-[12px] underline !font-[300]"
               @click="item.showDetailSetting = !item.showDetailSetting">
                詳細な設定
                <i class="fas fa-sort-up" style="position: relative; top: 4px" v-if="item.showDetailSetting"></i>
                <i class="fas fa-sort-down" style="position: relative; top: -2px" v-else></i>
            </a>
            <div style="display: grid; transition: grid-template-rows 0.5s ease-out;"
                 :style="{ 'grid-template-rows' : item.showDetailSetting ? '1fr' : '0fr' }">
                <div style="overflow: hidden; padding: 1px">
                    <div class="mt-[15px] d-flex align-items-end">
                        <span class="!text-[14px] !font-[300] !text-[#222222]">補足</span>
                        <span class="!text-[14px] !font-[300] !text-[#888888] ml-auto">@{{ countText(item.help) }}/200</span>
                    </div>
                    <textarea v-model="item.help"
                              class="mt-[7px] !rounded-[3px] !border !border-solid !border-[#E6E6E6] h-[70px]"
                              placeholder="補足情報を入力してください"
                              v-validate="'max:200'"
                              :name="'help-dia-' + index"
                              data-vv-as="補足"
                    ></textarea>
                    <p class="font-s14 font-w-bold color-red">@{{ errors.first('help-dia-' + index) }} </p>
                </div>
            </div>
        </div>
    </div>
    <div class="w-full m-h-[100px] !rounded-[10px] !border-[1px] !border-solid !border-[#DDDDDD] !bg-[#FFFFFF] mt-[15px]">
        <div class="b-i-header d-flex justify-content-between align-items-center">
            <div class="d-flex justify-content-start">
                <div class="!text-[14px] !font-[600] !text-[#888888] d-flex align-items-center"><i class="fas fa-list-alt text-[20px] mr-2"></i>回答情報の連携</div>
                <div class="box-tooltip ml-[20px]">
                    <i class="fas fa-question-circle !text-[14px] !text-[#888888]"></i>
                    <div class="tooltipp" style="left: -150px">
                        <p>質問の回答を友だち情報に記録することで</p>
                        <p class="mb-[10px]">絞り込みやメッセージ送信時の情報の呼び出しに利用できます。</p>
                        <p>回答を記録するための友だち情報は<a href="/basic/friend-information" target="_blank" class="underline text-[#5799DB]">友だち情報管理</a>より</p>
                        <p class="mb-[10px]">新規作成・編集ができます。</p>
                        <p>友だち情報を利用して回答内容をお客様に送信する方法は<a href="https://www.youtube.com/watch?v=UO5X0Yuzwuc" target="_blank" class="underline text-[#5799DB]">こちら</a></p>
                    </div>
                </div>
            </div>
            <select class="w-[100px] h-[30px] rounded-[3px] border border-solid border-[#E0E0E0] p-0 pl-[10px] ml-[40px] !text-left"
                    v-model="item.typeoption"
                    @change="changeTypeOptionDiagnostic"
            >
                <option value="radio">単一選択</option>
                <option value="checkbox">複数選択</option>
            </select>
        </div>
        <div class="p-[20px]">
            <div class="!text-[14px] !font-[300] !text-[#222222] b-i-title mb-2">友だち情報の選択</div>
            <div class="p-[10px]">
                <template v-if="item.typeoption == 'radio'">
                    <div class="custom-radio mb-2">
                        <input type="radio" id="friend-1" name="friend-1" value="1"
                               v-model="item.friend_info_type"
                               @change="changeFriendInfoType()"
                        >
                        <label for="friend-1" class="color-gray1">すでに作成済みの友だち情報に回答を記録</label>
                    </div>
                    <div class="custom-radio">
                        <input type="radio" id="friend-2" name="friend-2" value="2"
                               v-model="item.friend_info_type"
                               @change="changeFriendInfoType()"
                        >
                        <label for="friend-2" class="color-gray1">自動で友だち情報を生成して回答を連携</label>
                    </div>
                    <div v-if="item.friend_info_type == 1">
                        <div class="mt-[25px] d-flex align-items-center">
                            <span class="!text-[14px] !font-[300] !text-[#222222]">回答を連携する友だち情報を選択してください</span>
                            <div class="box-tooltip ml-[48px]">
                                <i class="fas fa-question-circle !text-[14px] !text-[#888888]"></i>
                                <div class="tooltipp" style="left: -150px; width: 300px">
                                    <p>すでに友だち情報が記録されている場合</p>
                                    <p>情報が上書きされますのでご注意下さい。</p>
                                </div>
                            </div>
                        </div>
                        <select class="w-[330px] h-[30px] rounded-[3px] border-[#E0E0E0] mt-[10px] text-center p-0 !text-[12px]"
                                @change="changeFriendInfo"
                                v-model="item.friend_info_id"
                                v-validate="'required_select'"
                                :name="'friend-info-id-dia-' + index"
                                data-vv-as="友だち情報"
                        >
                            <option value="0">選択してください</option>
                            <option v-for="info in friendInformationTypeSelect" :value="info.id">
                                @{{ info.title }}
                            </option>
                        </select>
                        <p class="font-s14 font-w-bold color-red">@{{ errors.first('friend-info-id-dia-' + index) }} </p>
                        <div class="mt-[12px] d-flex align-items-center">
                            <span class="!text-[12px] !font-[300] !text-[#888888]">選択できる友だち情報タイプ</span>
                            <div class="!text-[12px] !font-[600] !text-[#222222] w-[50px] h-[24px] d-flex justify-content-center ml-[32px] !rounded-[3px] !bg-[#F8F8F8]">
                                選択肢
                            </div>
                        </div>
                        <div class="checkbox flex align-items-center font-light mt-[12px]">
                            <label class="custom-checkbox-v3">
                                <input v-model="item.is_display_info_friend"
                                       type="checkbox" hidden="hidden"> <span></span>
                            </label>
                            <span class="!font-[400] !text-[14px] !text-[#222222]"
                                  :class="item.is_display_info_friend == 1 ? '!text-[#5799DB]' : ''">すでに情報が登録されている場合、初めから入力された状態にする</span>
                        </div>
                    </div>
                </template>
                <template v-if="item.typeoption == 'checkbox'">
                    <div class="flex items-center bg-[#F8F8F8] rounded-[3px] w-[470px] h-[30px] px-[10px]">
                        <i class="fas fa-info-circle text-[#888888] text-[15px] mr-[6px]"></i>
                        <span class="text-[14px]">複数選択の場合、友だち情報に回答を連携することはできません</span>
                    </div>
                </template>
            </div>
            <div class="mt-[15px]">
                <div class="!text-[14px] !font-[300] !text-[#222222] b-i-title mb-2">選択肢を入力してください（最大100個まで）</div>
                <div class="p-[10px]">
                    <div class="grid grid-cols-[230px_185px] gap-x-[40px] items-end">
                        <span class="text-[14px]">フォームに表示する選択肢</span>
                        <div class="text-[14px] text-center">
                            <p>加算するポイント</p>
                            <p>（マイナスも設定できます）</p>
                        </div>
                    </div>
                    <div class="sort-friendInfo-link">
                        <div v-for="(friendInfo, friendIdx) in item.selectable.items"
                             :key="friendInfo.idTmp"
                             :data-idx="friendInfo.idTmp"
                        >
                            <div class="grid grid-cols-[230px_230px] gap-x-[40px] items-center mt-[10px]">
                                <input type="text" :value="friendInfo.value"
                                       :disabled="friendInfo.disabled == 1 ? true : false"
                                       v-model="friendInfo.value"
                                       @blur="updateValueDiagnostic($event, friendInfo)"
                                       class="!w-[230px] h-[32px] rounded-[5px] border border-solid border-[#E0E0E0]"
                                       :class="friendInfo.disabled == 1 ? 'bg-[#F8F8F8]' : ''"
                                       v-validate="'required'"
                                       :name="'friendInfo_label_point_' + index_selected_page + '_' + index + '_' + friendIdx"
                                       data-vv-as="選択肢"
                                >
                                <div class="flex items-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20.425" height="33.099" viewBox="0 0 20.425 33.099"
                                         class="cursor-pointer"
                                         @click="minusPoint(friendIdx)"
                                    >
                                        <g id="Group_3531" data-name="Group 3531" transform="translate(-371.275 -667.451)">
                                            <g id="左" transform="translate(372 668)">
                                                <path id="caret-down-solid"
                                                      d="M13.74.937a3.2,3.2,0,0,1,4.528,0L31.063,13.732A3.206,3.206,0,0,1,28.794,19.2L3.2,19.189A3.206,3.206,0,0,1,.935,13.722L13.73.927Z"
                                                      transform="translate(0 32) rotate(-90)" fill="#5799db" stroke="#5799db"
                                                      stroke-width="1"/>
                                            </g>
                                            <line id="Line_520" data-name="Line 520" x2="8" transform="translate(379.5 683.5)"
                                                  fill="none" stroke="#fff" stroke-linecap="round" stroke-width="2"/>
                                        </g>
                                    </svg>
                                    <input type="number" v-model="friendInfo.point"
                                           class="!w-[80px] h-[32px] rounded-[5px] border border-solid border-[#E0E0E0] mx-[10px] text-[14px]">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="19.2" height="32" viewBox="0 0 20.425 33.099"
                                         class="mr-[25px] cursor-pointer"
                                         @click="plusPoint(friendIdx)"
                                    >
                                        <g id="Group_3530" data-name="Group 3530" transform="translate(-487.5 -667.451)">
                                            <g id="左" transform="translate(507.199 700) rotate(180)">
                                                <path id="caret-down-solid"
                                                      d="M13.74.937a3.2,3.2,0,0,1,4.528,0L31.063,13.732A3.206,3.206,0,0,1,28.794,19.2L3.2,19.189A3.206,3.206,0,0,1,.935,13.722L13.73.927Z"
                                                      transform="translate(0 32) rotate(-90)" fill="#5799db" stroke="#5799db"
                                                      stroke-width="1"/>
                                            </g>
                                            <line id="Line_521" data-name="Line 521" x2="8" transform="translate(499.5 684) rotate(180)"
                                                  fill="none" stroke="#fff" stroke-linecap="round" stroke-width="2"/>
                                            <line id="Line_522" data-name="Line 522" x2="8" transform="translate(495.5 680) rotate(90)"
                                                  fill="none" stroke="#fff" stroke-linecap="round" stroke-width="2"/>
                                        </g>
                                    </svg>
                                    <i v-if="item.selectable.items && item.selectable.items.length > 1 && item.friend_info_type == 2" class="fas fa-bars text-[#E0E0E0] text-[23px] mr-[10px] cursor-pointer"></i>
                                    <i v-if="item.selectable.items && item.selectable.items.length > 1 && item.friend_info_type == 2" class="fas fa-trash-alt text-[#E0E0E0] text-[23px] cursor-pointer"
                                       @click="removeItemsFriendInfo(friendIdx)"
                                    ></i>
                                </div>
                            </div>
                            <div class="grid grid-cols-[230px_230px]">
                                <p class="font-s14 font-w-bold color-red" v-show="errors.has('friendInfo_label_point_' + index_selected_page + '_' + index + '_' + friendIdx)">
                                    @{{ errors.first('friendInfo_label_point_' + index_selected_page + '_' + index + '_' + friendIdx) }}
                                </p>
                            </div>
                        </div>
                    </div>
                    <p class="mt-[20px]" v-if="item.friend_info_type == 1 && item.typeoption == 'radio' && item.friend_info_id != 0">
                        現在の作業を一時保存して、友だち情報の選択肢を編集する場合は<a
                                @click="saveFormAnswer(true)" class="underline text-[#5799DB] !cursor-pointer">こちら</a></p>
                    <button class="w-[130px] h-[32px] mt-[20px] text-[#5799DB] rounded-[5px] border border-solid border-[#5799DB] font-semibold"
                            v-if="item.friend_info_type == 2 || item.typeoption == 'checkbox'"
                            @click="addNewItemsFriendInfo"
                    >＋ 選択肢を追加
                    </button>
                </div>
            </div>
        </div>
    </div>


    <details class="mt-[25px]">
        <summary class="cursor-pointer list-none flex">
            <span class="text-[14px] underline text-[#888888] mr-[5px]">CSSクラス指定 </span>
            <i class="fas fa-sort-down text-[#888888]" style="position: relative; top: -2px"></i>
        </summary>
        <div class="details-content w-full rounded-[10px] border-2 border-solid border-[#E0E0E0] bg-[#FFFFFF] p-[25px] mt-[10px]">
            <p class="text-[14px] font-semibold">CSSクラス指定</p>
            <div class="mt-[15px]">
                <p>質問文</p>
                <input type="text" v-model="item.css_setting_class.title"
                       class="mt-[10px] !w-[330px] !h-[30px] !border-[#E0E0E0] rounded-[3px]">
            </div>
            <div class="mt-[15px]">
                <p>質問文補足</p>
                <input type="text" v-model="item.css_setting_class.help"
                       class="mt-[10px] !w-[330px] !h-[30px] !border-[#E0E0E0] rounded-[3px]">
            </div>
            <div class="mt-[15px]">
                <p v-if="item.typeoption == 'checkbox'">チェックボックス 選択肢</p>
                <p v-if="item.typeoption == 'radio' && item.friend_info_type == 1">ラジオボタン 選択肢</p>
                <p v-if="item.typeoption == 'radio' && item.friend_info_type == 2">ドロップダウン 選択肢</p>
                <input type="text" v-model="item.css_setting_class.options"
                       class="mt-[10px] !w-[330px] !h-[30px] !border-[#E0E0E0] rounded-[3px]">
            </div>
        </div>
    </details>
</div>