@push('css')
    <style>
        #out-param-step-1 input {
            padding-left: 13px;
        }

        #ex_setting_out_params .i-tooltip {
            cursor: pointer;
        }

        #ex_setting_out_params .i-tooltip:hover > .hide {
            display: block !important;
        }
    </style>
@endpush
<div id="ex_setting_out_params" class="title-page text-[14px] w-[630px] min-h-[273px]">
    <div class="h-[40px] font-[600] text-[16px] text-[#222222] bg-[#F8F8F8] px-[15px] rounded-[5px] flex items-center">
        <div>パラメーターエクスポート</div>
    </div>

    <div class="px-[15px] mb-[20px]">
        <div class="my-[15px] text-[#222222]">
            パラメーターを利用して、QRコード（URL）読み込み時に下記の情報を外部システムにインポートすることができます。
        </div>
        <div class="flex">
            <div class="flex items-center justify-center border border-solid cursor-pointer rounded-l-[5px] h-[30px] w-[100px] !border-r-0"
                 @click="setIsOnCallback(0)"
                 :class="externalLink.is_on_callback == 0 ? 'font-[600] border-[--blue] bg-[--blue] text-white' : 'text-[--gray2] border-[#DDDDDD]'">利用しない</div>
            <div class="flex items-center justify-center border border-solid cursor-pointer rounded-r-[5px] h-[30px] w-[100px] !border-l-0"
                 @click="setIsOnCallback(1)"
                 :class="externalLink.is_on_callback == 1 ? 'font-[600] border-[--blue] bg-[--blue] text-white' : 'text-[--gray2] border-[#DDDDDD]'">利用する</div>
        </div>
    </div>

    <div v-if="externalLink.is_on_callback == 1">
        <div class="title-page text-[14px] w-[630px]" id="out-param-step-1">
            <div class="h-[30px] font-[600] text-[14px] text-[#222222] bg-[#F8F8F8] px-[15px] rounded-[5px] flex items-center">
                Step1　コールバックURLの設定
            </div>
            <div class="font-[300] mt-[19px] mb-[10px] ml-[15px]">
                外部システムが発行するコールバックURLを設定して下さい。
            </div>
            <div class="ml-[15px] mb-[28px]">
                <input type="text" class="!w-[400px] !h-[40px] !border !border-[--gray2] !rounded-[5px]" v-model="externalLink.url_connect_qrcode_outside" placeholder="https://example.com" name="url_connect_qrcode_outside" v-validate="'url'">
                <p class="font-s12 font-w-normal color-red">@{{ errors.first('url_connect_qrcode_outside') }} </p>
            </div>
        </div>

        <div class="title-page text-[14px] w-[630px]" id="out-param-step-1">
            <div class="h-[30px] font-[600] text-[14px] text-[#222222] bg-[#F8F8F8] px-[15px] rounded-[5px] flex items-center">
                Step2　パラメーター一覧
            </div>


            <div class="mb-[30px] mt-[28px]">
                <div class="flex text-[#222222]">
                    <div class="w-[227px] mr-[23px]">
                        <p class="font-[600] text-center">パラメーター名</p>
                        <hr class="my-[12px]">
                        <div class="w-[227px] h-[40px] border border-solid border-[#E0E0E0] rounded-[5px] px-[15px] flex items-center justify-content-between mb-[15px]">
                            <div>line_id</div>
                            <div @click="copyParam('line_id')"
                                 class="bg-[#F8F8F8] rounded-[50%] w-[25px] h-[25px] flex items-center justify-center text-[#888888] cursor-pointer">
                                <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24">
                                    <path stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M14 4v3a1 1 0 0 1-1 1h-3m4 10v1a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h2m11-3v10a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1V7.87a1 1 0 0 1 .24-.65l2.46-2.87a1 1 0 0 1 .76-.35H18a1 1 0 0 1 1 1Z"/>
                                </svg>
                            </div>
                        </div>

                        <div class="w-[227px] h-[40px] border border-solid border-[#E0E0E0] rounded-[5px] px-[15px] flex items-center justify-content-between mb-[15px]">
                            <div>friend_type</div>
                            <div @click="copyParam('friend_type')"
                                 class="bg-[#F8F8F8] rounded-[50%] w-[25px] h-[25px] flex items-center justify-center text-[#888888] cursor-pointer">
                                <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24">
                                    <path stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M14 4v3a1 1 0 0 1-1 1h-3m4 10v1a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h2m11-3v10a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1V7.87a1 1 0 0 1 .24-.65l2.46-2.87a1 1 0 0 1 .76-.35H18a1 1 0 0 1 1 1Z"/>
                                </svg>
                            </div>
                        </div>

                        <div class="w-[227px] h-[40px] border border-solid border-[#E0E0E0] rounded-[5px] px-[15px] flex items-center justify-content-between mb-[15px]">
                            <div>friend_name</div>
                            <div @click="copyParam('friend_name')"
                                 class="bg-[#F8F8F8] rounded-[50%] w-[25px] h-[25px] flex items-center justify-center text-[#888888] cursor-pointer">
                                <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24">
                                    <path stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M14 4v3a1 1 0 0 1-1 1h-3m4 10v1a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h2m11-3v10a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1V7.87a1 1 0 0 1 .24-.65l2.46-2.87a1 1 0 0 1 .76-.35H18a1 1 0 0 1 1 1Z"/>
                                </svg>
                            </div>
                        </div>

                        <div class="w-[227px] h-[40px] border border-solid border-[#E0E0E0] rounded-[5px] px-[15px] flex items-center justify-content-between mb-[15px]">
                            <div>mail</div>
                            <div @click="copyParam('mail')"
                                 class="bg-[#F8F8F8] rounded-[50%] w-[25px] h-[25px] flex items-center justify-center text-[#888888] cursor-pointer">
                                <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24">
                                    <path stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M14 4v3a1 1 0 0 1-1 1h-3m4 10v1a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h2m11-3v10a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1V7.87a1 1 0 0 1 .24-.65l2.46-2.87a1 1 0 0 1 .76-.35H18a1 1 0 0 1 1 1Z"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="w-[400px]">
                        <p class="font-[600] text-center">エクスポート情報</p>
                        <hr class="my-[12px]">
                        <div class="w-full h-[40px] bg-[#F8F8F8] rounded-[5px] px-[15px] py-[10px] mb-[15px]">
                            <div>LINE ID</div>
                        </div>


                        <div class="flex items-center w-full h-[40px] bg-[#F8F8F8] rounded-[5px] px-[15px] py-[10px] mb-[15px]">
                            <div>友だち追加情報</div>
                            <div class="i-tooltip !bg-[#F8F8F8]">
                                <i class="ml-[13px] fal fa-info-circle"></i>

                                <div class="hide absolute top-[-130px] left-[-4px] w-[250px] h-[120px] p-[12px] bg-[#FFFFFF] rounded-[6px] shadow-[0px_0px_10px_#00000033] z-[999]">
                                    <p class="font-[500] text-[#1F1F1F]">友だち追加情報</p>
                                    <div class="text-[#888888] ml-[5px]" style="line-height: 19px">
                                        新規友だち：new <br>
                                        既存友だち：old <br>
                                        ブロック解除友だち：block <br>
                                        と表示されます。
                                    </div>

                                    <svg class="h-6 w-6 text-[#FFFFFF]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                                        <path fill-rule="evenodd" d="M18.425 10.271C19.499 8.967 18.57 7 16.88 7H7.12c-1.69 0-2.618 1.967-1.544 3.271l4.881 5.927a2 2 0 0 0 3.088 0l4.88-5.927Z" clip-rule="evenodd"/>
                                    </svg>
                                </div>
                            </div>
                        </div>


                        <div class="w-full h-[40px] bg-[#F8F8F8] rounded-[5px] px-[15px] py-[10px] mb-[15px]">
                            <div>LINE登録名</div>
                        </div>


                        <div class="flex items-center w-full h-[40px] bg-[#F8F8F8] rounded-[5px] px-[15px] py-[10px] mb-[15px]">
                            <div>メールアドレス</div>
                            <div class="i-tooltip relative !bg-[#F8F8F8]">
                                <i class="ml-[13px] fal fa-info-circle"></i>

                                <div class="hide absolute top-[-110px] left-[-4px] w-[250px] h-[100px] p-[12px] bg-[#FFFFFF] rounded-[6px] shadow-[0px_0px_10px_#00000033] z-[999]">
                                    <p class="font-[500] text-[#1F1F1F]">メールアドレス</p>
                                    <div class="text-[#888888] ml-[5px]" style="line-height: 19px">
                                        ユーザー側が事前にメールアドレ<br>
                                        スを登録している場合のみ、情報<br>
                                        がエクスポートされます。
                                    </div>

                                    <svg class="h-6 w-6 text-[#FFFFFF]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                                        <path fill-rule="evenodd" d="M18.425 10.271C19.499 8.967 18.57 7 16.88 7H7.12c-1.69 0-2.618 1.967-1.544 3.271l4.881 5.927a2 2 0 0 0 3.088 0l4.88-5.927Z" clip-rule="evenodd"/>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="d-flex justify-content-start align-items-center mt-[27px]">
    <button @click="submitExternalSettingForm()"
            class="btn-blue-hover text-[--blue] w-[120px] h-[40px] flex items-center justify-center rounded-[5px]
                bg-white border-[2px] border-[#5799DB] mr-[20px]">
        <span class="font-[600] text-[14px]">保存</span>
    </button>
    <div class="btn-redirect-index" @click="redirectPageIndex()">一覧に戻る</div>
</div>