@push('css')
    <style>
        .focus-none input[type='text']:focus {
            outline: none !important;
            box-shadow: none !important;
        }

        .tox-tinymce {
            border: 1px solid #E0E0E0 !important;
            border-radius: 5px !important;
        }

        .setting-option-radio label::before {
            border: 1px solid #DDDDDD;
        }
        .setting-option-radio input[type="radio"]:checked + label {
            font-weight: 300;
            color: #222222 !important;
        }

        #lp_setting_option .tox-tinymce {
            border: 1px solid #DDDDDD !important;
            border-radius: 10px !important;
        }

        [v-cloak] {
            display: none;
        }
    </style>
    <script src="{{asset('js/qr_code/qrcode.min.js')}}"></script>
@endpush
<div class="ml-[10px]" v-if="bot.plan_type == 2">
    @include('basic.qr_code.v2.components.upgrade_plan')
</div>
<div id="lp_setting_option" class="relative !bg-[#FFFFFF] w-[670px] px-[10px]" :class="bot.plan_type == 2 ? 'py-[10px]' : null" v-cloak>
    <div v-if="bot.plan_type == 2" class="absolute top-0 left-0 bg-[#22222233] w-full h-full z-50 rounded-[10px]"></div>
    <div class="relative text-[14px] font-[300] m-h-[140px] !rounded-[10px] !bg-white w-[650px]">
        <div :data-landing-id={{$id}} ref="settingOptionForm">
            {{ csrf_field() }}
            <div class="text-[16px] h-[21px] font-[600] text-[--text-color] mb-[6px] bg-[--gray3] h-[40px] pl-[15px] flex items-center rounded-[5px]">ブラウザページ設定</div>
            <div class="h-[19px] text-[--text-color] mb-[23px] ml-[15px]">QRコードアクションブラウザで読み込んだときに表示されるページの設定をします。</div>

            <div class="flex justify-between">
                <div>
                    <div class="flex items-center font-[600] pl-[12px] bg-[--gray3] rounded-[5px] mb-[15px] w-[300px] h-[30px] text-[#222222]">ロゴ画像</div>
                    <div class="flex justify-items-center items-center mb-[14px] ml-[15px]">
                        <div class="custom-radio mr-[20px] flex items-center setting-option-radio">
                            <input id="setting_logo_1" type="radio" name="setting_logo" v-model="option.setting_logo" :value="1" />
                            <label for="setting_logo_1" class="!flex justify-items-center items-center">
                                <img class="h-[21px]" src="/images/group_3402.png" alt="line_logo">
                            </label>
                        </div>
                    </div>
                    <div>
                        <div class="flex justify-items-center items-center mb-[14px] ml-[15px]">
                            <div class="custom-radio mr-[20px] setting-option-radio">
                                <input id="setting_logo_2" type="radio" name="setting_logo" v-model="option.setting_logo" :value="2" />
                                <label class="!text-[#222222] text-[14px]" for="setting_logo_2">表示しない</label>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="flex justify-items-center items-center ml-[15px]">
                            <div class="custom-radio mr-[20px] setting-option-radio">
                                <input id="setting_logo_3" type="radio" name="setting_logo" v-model="option.setting_logo" :value="3" />
                                <label class="!text-[#222222] text-[14px]" for="setting_logo_3">独自ロゴを利用</label>
                            </div>
                        </div>
                        <div class="ml-[25px]" v-if="option.setting_logo == 3">
                            <input type="file" name="logo" ref="fileInput" class="hidden" @change="previewImage" accept="image/*" />
                            <div v-if="option.path_logo" class="my-[15px]">
                                <img :src="option.path_logo ? (option.path_logo.includes('http') ? option.path_logo : '{{ env('URL_SERVER_MEDIA') }}' + option.path_logo) : ''" alt="Preview" class="w-48 h-auto rounded border" />
                            </div>
                            <button
                                    @click="$refs.fileInput.click()"
                                    type="button"
                                    class="font-[300] mr-[14px] mt-[5px]">
                                <span class="text-[--blue] underline">@{{ option.path_logo ? '変更' : 'アップロード' }}</span>
                            </button>
                            <button v-if="option.path_logo"
                                    type="button"
                                    @click="removeImage"
                                    class="font-[300]">
                                <span class="text-[--red] underline">削除</span>
                            </button>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="flex text-[#222222] items-center font-[600] pl-[12px] bg-[--gray3] rounded-[5px] mb-[15px] w-[300px] h-[30px]">QRコードカラー</div>
                    <div class="mb-[15px]">
                        <div id="qr-land"></div>
                    </div>
                    <div class="focus-none flex items-center relative border border-solid border-[#E0E0E0] rounded-[5px] px-[5px] !bg-white w-[100px] h-[33px]">
                        <div class="!w-[25px] h-[25px] cursor-pointer border border-solid border-[#E0E0E0] rounded-[3px]"
                             :class="'bg-[' + option.color_qr + ']'"
                             @click="chooseColor('color_qr')"
                        ></div>
                        <input type="color" id="color_qr"
                               class="invisible absolute w-[25px] h-[25px] z-[2]"
                               v-model="option.color_qr"
                               value="#000000">
                        <input class="preview-code-color !w-[65px]"
                               type="text" v-model="option.color_qr"
                               @change="changeColor"
                               v-validate="'required|format_color'"
                               name="color_qr"
                               :data-vv-as="'カラー'"
                               style="border: none; color: #222222; border-radius: 0; height: 27px !important; outline: none">
                    </div>
                </div>
            </div>

            <div class="mt-[23px]">
                <div class="flex text-[#222222] items-center h-[30px] font-[600] pl-[12px] bg-[--gray3] rounded-[5px] mb-[24px]">ブラウザページデザイン</div>
                <input type="hidden" name="type_design_qr" :value="option.type_design_qr">
                <div class="px-[7px] flex justify-between">
                    <div class="text-center">
                        <div class="font-[600] text-[16px] mb-[15px]"
                             :class="option.type_design_qr == 1 ? 'text-[--blue]' : 'text-[--gray1]'">ベーシック（テキストなし）</div>
                        <div class="rounded-[10px] border border-solid cursor-pointer relative !bg-white w-[300px] h-[187.5px]"
                             @click="setTypeDesignQR(1)"
                             :class="option.type_design_qr == 1 ? 'border-[--blue] border-[2px]' : 'border-[--gray4]'">
                            <img src="/images/setting_option_pc.svg" alt="img" class="bg-white rounded-[10px] w-full h-full object-cover">
                            <div class="absolute -top-[12px] -right-[12px] rounded-[50%] bg-[--blue] p-[3px] text-white"
                                 v-if="option.type_design_qr == 1">
                                <svg class="w-[20px] h-[20px]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 11.917 9.724 16.5 19 7.5"/>
                                </svg>

                            </div>
                        </div>
                    </div>
                    <div class="text-center">
                        <div class="font-[600] text-[16px] mb-[15px]"
                             :class="option.type_design_qr == 2 ? 'text-[--blue]' : 'text-[--gray1]'">スマホ（テキストなし）</div>
                        <div class="rounded-[10px] border border-solid cursor-pointer relative !bg-white w-[300px] h-[187.5px]"
                             @click="setTypeDesignQR(2)"
                             :class="option.type_design_qr == 2 ? 'border-[--blue] border-[2px]' : 'border-[--gray4]'">
                            <img src="/images/setting_option_2.svg" alt="img" class="bg-white rounded-[10px] w-full h-full object-cover">
                            <div class="absolute -top-[12px] -right-[12px] rounded-[50%] bg-[--blue] p-[3px] text-white"
                                 v-if="option.type_design_qr == 2">
                                <svg class="w-[20px] h-[20px]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 11.917 9.724 16.5 19 7.5"/>
                                </svg>

                            </div>
                        </div>
                    </div>
                </div>

                <div class="px-[7px] flex justify-between mt-[34px]">
                    <div class="text-center">
                        <div class="font-[600] text-[16px] mb-[15px]"
                             :class="option.type_design_qr == 3 ? 'text-[--blue]' : 'text-[--gray1]'">ベーシック（テキストあり）</div>
                        <div class="rounded-[10px] border border-solid cursor-pointer relative !bg-white w-[300px] h-[187.5px]"
                             @click="setTypeDesignQR(3)"
                             :class="option.type_design_qr == 3 ? 'border-[--blue] border-[2px]' : 'border-[--gray4]'">
                            <img src="/images/setting_option_3.svg" alt="img" class="bg-white rounded-[10px] w-full h-full object-cover">
                            <div class="absolute -top-[12px] -right-[12px] rounded-[50%] bg-[--blue] p-[3px] text-white"
                                 v-if="option.type_design_qr == 3">
                                <svg class="w-[20px] h-[20px]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 11.917 9.724 16.5 19 7.5"/>
                                </svg>

                            </div>
                        </div>
                    </div>
                    <div class="text-center">
                        <div class="font-[600] text-[16px] mb-[15px]"
                             :class="option.type_design_qr == 4 ? 'text-[--blue]' : 'text-[--gray1]'">スマホ（テキストあり）</div>
                        <div class="rounded-[10px] border border-solid cursor-pointer relative !bg-white w-[300px] h-[187.5px]"
                             @click="setTypeDesignQR(4)"
                             :class="option.type_design_qr == 4 ? 'border-[--blue] border-[2px]' : 'border-[--gray4]'">
                            <img src="/images/setting_option_4.svg" alt="img" class="bg-white rounded-[10px] w-full h-full object-cover">
                            <div class="absolute -top-[12px] -right-[12px] rounded-[50%] bg-[--blue] p-[3px] text-white"
                                 v-if="option.type_design_qr == 4">
                                <svg class="w-[20px] h-[20px]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 11.917 9.724 16.5 19 7.5"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-[35px] mb-[20px]" id="text-design-qr" v-if="bot.plan_type == 1" :class="option.type_design_qr == 3 || option.type_design_qr == 4 ? 'show' : 'hide'">
                <div class="flex text-[#222222] items-center h-[30px] font-[600] pl-[12px] bg-[--gray3] rounded-[5px] mb-[27px]">テキスト入力欄</div>
                <div>
                <textarea type="text" id="text_design_qr"
                          style="visibility: hidden; height: 0"
                          name="text_design_qr"
                          class="form-control rounded-[5px] !border-[--gray2]" v-model="option.text_design_qr"></textarea>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="d-flex justify-content-start align-items-center mt-[35px]">
    <button v-if="bot.plan_type == 1"
            @click="submitSettingOption()"
            class="btn-blue-hover text-[--blue] w-[120px] h-[40px] !rounded-[5px] !bg-white !border-2 !border-solid !border-[--blue] flex items-center justify-center mr-2">
        <span class="font-[600] text-[14px]">保存</span>
    </button>

    <button v-if="bot.plan_type == 2"
            class="btn-blue-hover text-[--blue] w-[120px] h-[40px] !rounded-[5px] !bg-white !border-2 !border-solid !border-[--blue] flex items-center justify-center mr-2" disabled>
        <span class="font-[600] text-[14px]">保存</span>
    </button>
    <div class="btn-redirect-index" @click="redirectPageIndex()">一覧に戻る</div>
</div>