@extends('layout.basic.main')
@section('title',empty($id)?'ポップアップ（作成）':'ポップアップ（編集）')

@push('css')
    <link rel="stylesheet" href="/css/popup/detail.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
@endpush
@section('content')
    <article class="">
        <div id="loading_overlay" class="loading-overlay text-center" style="display: none">
            <i class="glyphicon glyphicon-refresh spin"></i>
        </div>
        <div id="popup-detail" v-cloak>
            <h2>ポップアップ登録</h2>
            <div class="popup__app">
                <div class="popup__top">
                    <div class="col-md-4">
                        <div class="popup__title">
                            <span class="ml-10">管理名</span>
                        </div>
                        <div class="popup__setting">
                            <div class="popup__control">
                                <div style="display: flex; align-items: end">
                                    <input type="text" class="form-control" maxlength="20" v-model="setting.name">
                                    <span class="market__lenght ml-5"><span>@{{ countCharacters(setting.name) }}</span><span>/20文字</span></span>
                                </div>
                                <span class="text-danger">@{{ error.name }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="popup__title">
                            <span class="ml-10">フォルダ</span>
                        </div>
                        <div class="popup__setting">
                            <div class="popup__control">
                                <select class="form-control" v-model="setting.category_id">
                                    <option value="0">未分類</option>
                                    <option v-for="category in list.categories" :value="category.id">@{{ category.name }}</option>
                                </select>
                                <span class="market__lenght ml-5"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="popup__basic col-md-12 mt-10">
                    <div class="popup__tab">
                        <button type="button" class="btn tab__item" :class="isClassActiveTab(1)" @click="setTabActive(1)">表示設定</button>
                        <button type="button" class="btn tab__item" :class="isClassActiveTab(2)" @click="setTabActive(2)">詳細設定</button>
                    </div>
                    <div class="popup__tab__setting" v-if="checkTabActive(1)">
                        <div class="popup__title">
                            <span class="ml-10">表示タイプ選択</span>
                            <span class="text__msg__blockview">※保存後の表示タイプの変更はできません</span>
                        </div>
                        <div class="popup__setting_item">
                            <span class="col-md-1" style="width: 173px">表示タイプ</span>
                            <div class="w-40" style="display: flex; flex-direction: column; min-width: 0;">
                                <select class="form-control" v-model="setting.view" :disabled="event == 'edit'">
                                    <option v-for="view in list.view" :value="view.type">@{{ view.desc }}</option>
                                </select>
                                {{-- [#38761] Chú thích khi chọn 離脱時表示型 (close_page): thao tác chặn nút Back đã bị bỏ theo chính sách Google 2026-07 --}}
                                <span class="text__msg__blockview" style="margin-left: 0; margin-top: 5px; word-break: break-word;" v-if="checkViewSetting('close_page')">※2026年7月よりGoogleの仕様変更によりブラウザバック時のポップアップ表示は非対応となりました。</span>
                            </div>
                        </div>
                        <div class="popup__setting_item popup__setting_view" v-if="checkViewSetting('after_open_page')">
                            <span class="col-md-1" style="margin-top: 12px;width: 173px">表示条件</span>
                            <div style="display: flex;flex-direction: column;">
                                <div class="after_open_page">
                                    <span class="fz-13">ページ表示から</span>
                                    <input type="number" class="form-control ml-10" style="width: 90px" min="1" v-model="setting.after_open_page">
                                    <span class="ml-10 fz-13">秒経過でポップアップ表示</span>
                                </div>
                                <span class="text-danger" style="margin-top: 5px;">@{{ error.after_open_page }}</span>
                            </div>
                        </div>
                        <div class="popup__setting_item popup__setting_view" v-if="checkViewSetting('location')">
                            <span class="col-md-1" style="margin-top: 12px;width: 173px">表示条件</span>
                            <div style="display: flex;flex-direction: column;">
                                <div class="after_open_page">
                                    <span class="mk__text__end">ページ表示が</span>
                                    <input type="number" class="form-control ml-10" style="width: 90px" min="1" v-model="setting.location.seconds">
                                    <span class="ml-10 mk__text__end">秒</span>
                                    <select class="form-control ml-10" v-model="setting.location.type" style="width: 80px">
                                        <option v-for="location in list.location_type" :value="location.type">@{{ location.desc }}</option>
                                    </select>
                                    <span class="ml-10 mk__text__end">で</span>
                                </div>
                                <span class="text-danger" style="margin-top: 5px;">@{{ error.location }}</span>
                            </div>
                        </div>

                        <div class="popup__title">
                            <span class="ml-10">表示内容</span>
                        </div>

                        <div class="popup__setting_item popup__setting_item_text" style="align-items: start;">
                            <span class="mt-5" style="width: 100px;">画像</span>
                            <div>
                                <div class="c_h_file">
                                    <div class="c_h_file-preview" v-if="getPreviewImage()" style="display:none;">
                                        <img :src="getPreviewImage()" alt="image" />
                                    </div>
                                    <div class="c_h_file-upload">
                                        <label for="url_image" class="c_h_custom-file-upload">
                                            <span>アップロード</span>
                                        </label>
                                        <input id="url_image" ref="fileInput" type="file" @input="pickFile()">
                                    </div>
                                    <div class="c_h_file-remove" @click="setPreviewImage()" style="display: none">
                                        <span>リセット</span>
                                    </div>
                                    <div class="mk__text__end ml-5">
                                        <span>推奨サイズ 1,000px×1,000px</span>
                                    </div>
                                </div>
                                <span class="text-danger">@{{ error.image }}</span>
                            </div>
                        </div>

                        <div class="popup__setting_item popup__setting_item_text">
                            <div class="setting__is_show_text" style="display: flex;">
                                <input type="checkbox" v-model="setting.is_show_text">
                                <span class="ml-5">テキスト</span>
                            </div>
                            <div class="setting__text_color">
                                <span class="mk__text__end">文字色</span>
                                <label for="setting_text_color" class="setting_color_picker"
                                       :style="bindStyleBoxPicker(setting.text_color)"></label>
                                <input id="setting_text_color" type="color" class="ml-5 picker__color" v-model="setting.text_color">
                            </div>
                            <div class="setting__background_color">
                                <span class="mk__text__end">背景色</span>
                                <label for="setting_background_color" class="setting_color_picker"
                                       :style="bindStyleBoxPicker(setting.background_color)"></label>
                                <input id="setting_background_color" type="color" class="ml-5 picker__color" v-model="setting.background_color">
                            </div>
                        </div>
                        <div class="popup__setting_item popup__setting_item_text popup__setting_item_text_content w-30 md-w-40" v-if="getIsShowText()">
                            <textarea class="form-control" v-model="setting.text" rows="4" maxlength="200"></textarea>
                            <span class="mk__text__end"><span>@{{ countCharacters(setting.text) }}</span>/200</span>
                            <span class="text-danger" style="width: 100%; margin-top: -15px">@{{ error.text }}</span>
                        </div>
                        <div class="popup__setting_item popup__setting_item_text">
                            <span style="width: 100px">矢印アイコン</span>
                            <input type="checkbox" v-model="setting.is_show_icon">
                        </div>

                        <div class="popup__title">
                            <span class="ml-10">クリック・タップ時遷移先設定</span>
                        </div>

                        <div class="popup__setting_item">
                            <span class="col-md-1" style="width: 150px">遷移先</span>
                            <div class="setting_end_point_user_click">
                                <div class="setting_end_point_user_click_item">
                                    <input type="radio" value="not_only"
                                           v-model="setting.is_setting_end_point_user_click"
                                           name="is_setting_end_point_user_click">
                                    <span class="ml-5">なし</span>
                                </div>
                                <div class="setting_end_point_user_click_item">
                                    <input type="radio" value="url" v-model="setting.is_setting_end_point_user_click"
                                           name="is_setting_end_point_user_click">
                                    <span class="ml-5">指定URL</span>
                                </div>
                                <div class="setting_end_point_user_click_item">
                                    <input type="radio" value="qr_code"
                                           v-model="setting.is_setting_end_point_user_click"
                                           name="is_setting_end_point_user_click">
                                    <span class="ml-5">QRコードアクション連携</span>
                                </div>
                            </div>
                        </div>

                        <div class="popup__setting_item" v-if="checkEndPointSettingUserClick('url')"
                             style="padding-bottom: 5px!important;">
                            <span class="col-md-1" style="width: 150px;">遷移先URL</span>
                            <input type="text" class="form-control setting_end_point_item"
                                   v-model="setting.url_end_point">
                        </div>
                        <span class="text-danger" style="margin-left: 150px;"
                              v-if="checkEndPointSettingUserClick('url') && error.url">@{{ error.url }}</span>
                        <div class="popup__setting_item" v-if="checkEndPointSettingUserClick('qr_code')">
                            <span class="col-md-1" style="width: 150px;">QRコードアクション選択</span>
                            <select class="form-control setting_end_point_item" v-model="setting.landing_id_end_point">
                                <option v-for="landing in list.landing" :value="landing.id">@{{ landing.name }}</option>
                            </select>
                        </div>
                        <span class="text-danger" style="margin-left: 150px;"
                              v-if="checkEndPointSettingUserClick('qr_code') && error.qr_code">@{{ error.qr_code }}</span>

                    </div>
                    <div class="popup__tab__setting" v-if="checkTabActive(2)">
                        <div class="popup__title">
                            <span class="ml-10">カウントダウンタイマー</span>
                        </div>
                        <div class="popup__setting_item popup__setting_item_count_down">
                            <div class="setting_end_point_user_click_item">
                                <input type="radio" :value="0" v-model="setting.is_use_count_down_timer" name="is_use_count_down_timer">
                                <span class="ml-5">利用しない</span>
                            </div>
                            <div class="setting_end_point_user_click_item">
                                <input type="radio" :value="1" v-model="setting.is_use_count_down_timer" name="is_use_count_down_timer">
                                <span class="ml-5">利用する</span>
                            </div>
                        </div>
                        <div class="popup__setting_item popup__setting_item_count_down popup__setting_item_count_down_text" v-if="checkIsUseCountDownTimer()">
                            <div>
                                <span>テキスト</span>
                            </div>
                            <div class="setting__text_color" style="margin-left: 40px;">
                                <span class="mk__text__end">文字色</span>
                                <label for="setting_text_color_count_down" class="setting_color_picker"
                                       :style="bindStyleBoxPicker(setting.text_color_count_down)"></label>
                                <input id="setting_text_color_count_down" type="color" class="ml-5 picker__color" v-model="setting.text_color_count_down">
                            </div>
                            <div class="setting__background_color">
                                <span class="mk__text__end">背景色</span>
                                <label for="setting_background_color_count_down" class="setting_color_picker"
                                       :style="bindStyleBoxPicker(setting.background_color_count_down)"></label>
                                <input id="setting_background_color_count_down" type="color" class="ml-5 picker__color" v-model="setting.background_color_count_down">
                            </div>
                        </div>
                        <div class="popup__setting_item popup__setting_item_text popup__setting_item_text_content w-30" v-if="checkIsUseCountDownTimer()">
                            <textarea class="form-control" v-model="setting.text_count_down" rows="4" maxlength="50"></textarea>
                            <span class="mk__text__end"><span>@{{ countCharacters(setting.text_count_down) }}</span>/50</span>
                            <span class="text-danger">@{{ error.text_count_down }}</span>
                        </div>

                        <div class="popup__setting_item popup__setting_item_text" v-if="checkIsUseCountDownTimer()">
                            <span style="width: 100px">表示期限</span>
                            <div class="setting_end_point_user_click">
                                <div class="setting_end_point_user_click_item">
                                    <input type="radio" :value="'display_popup_a_day'" v-model="setting.type_view_count_down" name="type_view_count_down">
                                    <span class="ml-5 time__item_first">当日日付終了まで</span>
                                </div>
                                <div class="setting_end_point_user_click_item">
                                    <input type="radio" :value="'display_popup_date_time'" v-model="setting.type_view_count_down" name="type_view_count_down">
                                    <span class="ml-5 time__item_last">日時指定</span>
                                </div>
                                <div class="setting_end_point_user_click_item">
                                    <input type="radio" :value="'display_popup_duration'" v-model="setting.type_view_count_down" name="type_view_count_down">
                                    <span class="ml-5">経過時間指定</span>
                                </div>
                            </div>
                        </div>

                        <div class="popup__setting_item popup__setting_item_text" v-if="checkTypeViewCountDown('display_popup_date_time')" style="align-items: end;">
                            <span style="width: 100px"></span>
                            <input type="date" class="form-control display_popup_date_time" v-model="setting.display_popup_date_time.date">
                            <input type="time" class="form-control display_popup_date_time ml-10" v-model="setting.display_popup_date_time.time">
                            <span class="mk__text__end ml-5">に終了</span>
                        </div>
                        <div class="popup__setting_item popup__setting_item_text" v-if="checkTypeViewCountDown('display_popup_duration')" style="align-items: end;">
                            <span style="width: 100px"></span>
                            <input type="number" class="form-control display_popup_duration" v-model="setting.display_popup_duration.hour" min="0">
                            <span class="mk__text__end ml-5">時間</span>
                            <input type="number" class="form-control display_popup_duration ml-10" v-model="setting.display_popup_duration.minute" min="0">
                            <span class="mk__text__end ml-5">分で終了</span>
                        </div>
                        <div v-if="checkTypeViewCountDown('display_popup_duration') && error.duration">
                            <span class="text-danger" style="margin-left: 115px">@{{ error.duration }}</span>
                        </div>

                        <div class="popup__setting_item popup__setting_item_text" v-if="checkIsUseCountDownTimer()">
                            <span style="width: 100px">表示設定</span>
                            <div class="setting_end_point_user_click">
                                <div class="setting_end_point_user_click_item">
                                    <input type="radio" :value="'millisecond'" v-model="setting.unit_count_down" name="unit_count_down">
                                    <span class="ml-5 time__item_first">0.01秒単位まで</span>
                                </div>
                                <div class="setting_end_point_user_click_item">
                                    <input type="radio" :value="'second'" v-model="setting.unit_count_down" name="unit_count_down">
                                    <span class="ml-5 time__item_last" style="width: 80px;">秒単位まで</span>
                                </div>
                                <div class="setting_end_point_user_click_item">
                                    <input type="radio" :value="'minute'" v-model="setting.unit_count_down" name="unit_count_down">
                                    <span class="ml-5">分単位まで</span>
                                </div>
                            </div>
                        </div>
                        <div class="popup__setting_item popup__setting_item_text" v-if="checkIsUseCountDownTimer()">
                            <input type="checkbox" v-model="setting.after_count_down_display_popup">
                            <span class="ml-5">カウントダウン終了後もポップアップを表示する</span>
                        </div>

                        <div class="popup__title">
                            <span class="ml-10">端末別表示</span>
                            <span class="text__msg__blockview">※端末の画面サイズによっては設定が適用されない場合があります</span>
                        </div>

                        <div class="popup__setting_item popup__setting_item_text">
                            <input type="checkbox" v-model="setting.smart_phone_display_popup">
                            <span class="ml-5">スマートフォン</span>
                        </div>
                        <div class="popup__setting_item popup__setting_item_text">
                            <input type="checkbox" v-model="setting.tablet_display_popup">
                            <span class="ml-5">タブレット</span>
                        </div>
                        <div class="popup__setting_item popup__setting_item_text">
                            <input type="checkbox" v-model="setting.pc_display_popup">
                            <span class="ml-5">PC</span>
                        </div>

                        <div class="popup__title">
                            <span class="ml-10">表示回数</span>
                            <span class="text__msg__blockview">※ユーザーがCookie削除を行なった場合、設定が適用されません</span>
                        </div>

                        <div class="popup__setting_item popup__setting_item_text">
                            <input type="radio" value="unlimited" v-model="setting.impressions" name="impressions">
                            <span class="ml-5">何度でも表示する</span>
                        </div>

                        <div class="popup__setting_item popup__setting_item_text">
                            <input type="radio" value="once" v-model="setting.impressions" name="impressions">
                            <span class="ml-5">1人1回のみ</span>
                        </div>

                        <div class="popup__setting_item popup__setting_item_text">
                            <input type="radio" value="count_day_later" v-model="setting.impressions" name="impressions">
                            <span class="ml-5">1度表示したら</span>
                            <input type="number" min="1" style="margin-left: 20px; width: 70px" class="form-control"
                                   v-model="setting.count_day_later"
                                   :readonly="setting.impressions !== 'count_day_later'">
                            <span class="ml-5">日間は表示しない</span>
                        </div>
                        <div v-if="setting.impressions == 'count_day_later'">
                            <span class="text-danger" style="margin-left: 155px">@{{ error.count_day_later }}</span>
                        </div>
                    </div>
                </div>
                <div class="text-center" style="margin-top: 45px">
                    <button class="btn btn__submit" type="button" @click="showMessageCheckBot()"
                            v-if="check_plan == 'plan_free' && event == 'create'">登録
                    </button>
                    <button class="btn btn__submit" type="button" @click="startSettingPopup()" v-else>登録</button>
                </div>
                <div class="text-center mt-10 text-danger" style="display: flex;justify-content: center;">
                    <div style="text-align: left;">
                        <p>登録完了後、一覧ページより埋め込みコードを取得して</p>
                        <p>ポップアップを表示させたいページに貼り付けて下さい。</p>
                    </div>
                </div>
                <div class="popup__preview">
                    <p>プレビュー</p>
                    <div class="preview__content text-center">
                        <img src="/images/preview-popup.png" height="100%">
                        <div class="preview__main">
                            <div class="preview__header">
                                <span class="line-icon line-icon-close" style="float: right;">
                                    <i class="fas fa-times" style="color: #FFFFFF"></i>
                                </span>
                            </div>
                            <div class="preview__body">
                                <div class="preview__count_down" :style="setStyleCountDown()" v-if="setting.is_use_count_down_timer">
                                    <div class="preview__text_count_down">
                                        <span v-html="setting.text_count_down"></span>
                                    </div>
                                    <div class="preview__data_count_down">
                                        <span id="countdown_time"></span>
                                    </div>
                                </div>
                                <span v-if="setting.url_end_point_click">
                                    <a :href="setting.url_end_point_click" :target="setting.setting_end_point_user_click_target">
                                    <img :src="setting.url_image" alt="">
                                </a>
                                </span>
                                <span v-else>
                                    <img :src="setting.url_image" alt="">
                                </span>
                                <div class="preview__setting_text" :style="{backgroundColor: setting.background_color}" v-if="setting.is_show_text || setting.is_show_icon">
                                    <div class="preview__content_text">
                                        <span v-if="setting.is_show_text">
                                            <span v-if="setting.url_end_point_click">
                                                <a :href="setting.url_end_point_click" :target="setting.setting_end_point_user_click_target">
                                                    <span v-html="setting.text" :style="setStyleTextPreview()"></span>
                                                </a>
                                            </span>
                                            <span v-else>
                                                <span v-html="setting.text" :style="setStyleTextPreview()"></span>
                                            </span>
                                        </span>
                                    </div>
                                    <div class="preview__content_icon" v-if="setting.is_show_icon">
                                        <span v-if="setting.url_end_point_click">
                                            <a :href="setting.url_end_point_click" :target="setting.setting_end_point_user_click_target">
                                                <svg xmlns="http://www.w3.org/2000/svg" style="width: 25px; height: 25px" width="29.25" height="29.25" viewBox="0 0 29.25 29.25">
                                                    <g id="Icon_ionic-ios-arrow-dropright" data-name="Icon ionic-ios-arrow-dropright" transform="translate(-3.375 -3.375)">
                                                        <path id="Path_806" data-name="Path 806" d="M14.815,10.378a1.362,1.362,0,0,1,1.92,0l6.708,6.729a1.356,1.356,0,0,1,.042,1.87l-6.609,6.63a1.355,1.355,0,1,1-1.92-1.912l5.618-5.7-5.759-5.7A1.341,1.341,0,0,1,14.815,10.378Z" fill="#96adb2"/>
                                                        <path id="Path_807" data-name="Path 807" d="M3.375,18A14.625,14.625,0,1,0,18,3.375,14.623,14.623,0,0,0,3.375,18Zm2.25,0A12.37,12.37,0,0,1,26.747,9.253,12.37,12.37,0,1,1,9.253,26.747,12.269,12.269,0,0,1,5.625,18Z" fill="#96adb2"/>
                                                    </g>
                                                </svg>
                                            </a>
                                        </span>
                                        <span v-else>
                                            <svg xmlns="http://www.w3.org/2000/svg" style="width: 25px; height: 25px" width="29.25" height="29.25" viewBox="0 0 29.25 29.25">
                                                    <g id="Icon_ionic-ios-arrow-dropright" data-name="Icon ionic-ios-arrow-dropright" transform="translate(-3.375 -3.375)">
                                                        <path id="Path_806" data-name="Path 806" d="M14.815,10.378a1.362,1.362,0,0,1,1.92,0l6.708,6.729a1.356,1.356,0,0,1,.042,1.87l-6.609,6.63a1.355,1.355,0,1,1-1.92-1.912l5.618-5.7-5.759-5.7A1.341,1.341,0,0,1,14.815,10.378Z" fill="#96adb2"/>
                                                        <path id="Path_807" data-name="Path 807" d="M3.375,18A14.625,14.625,0,1,0,18,3.375,14.623,14.623,0,0,0,3.375,18Zm2.25,0A12.37,12.37,0,0,1,26.747,9.253,12.37,12.37,0,1,1,9.253,26.747,12.269,12.269,0,0,1,5.625,18Z" fill="#96adb2"/>
                                                    </g>
                                                </svg>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="preview__footer" v-if="setting.plan_type == 2">
                                <a href="https://lme.jp/pop">Powered by L Message</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </article>
@endsection
@push('js')
    <script src="/js/booking_manager/message.js"></script>
    <script type="text/javascript">
        const bot_id = '{{ $bot_id }}';
        const kind = '{{ $kind }}';
        const action = '{{ $action }}';
        const id = '{{ $id }}'
        const category_id = '{{ $category_id }}'
        const url_detail = '{{ route('popup.create_or_update', $category_id) }}'
        const text_default_color = '#F44336'
        const text_default_color_footer = '#000000'
        const background_default_color = '#FFFFFF'
        const display_popup_a_day = new Date().getTime();
        const popup_list = '{{ route('popup.index') }}';
        //route
        const ajax = {
            init: '{{ route('popup.init_popup_detail') }}',
            popup: {
                create: '{{ route('popup.folder.create') }}',
                sort: '{{ route('popup.folder.sort') }}',
                delete: '{{ route('popup.folder.delete') }}',
                save_tab_view: '{{ route('popup.save_tab_view') }}',
                save_tab_count_down: '{{ route('popup.save_tab_count_down') }}',
            }
        }



    </script>


    <script src="/js/popup/detail.js?v={{config("sns-line.version")}}"></script>
@endpush