@extends('layout.basic.main')
@section('title', 'リマインド配信（リマインドメッセージ登録）')
@push('css')
    <link rel="stylesheet" href="{{asset('/css/friendlist/style.css')}}?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/event_step/create.css?{{config('sns-line.version')}}">
@endpush
@section('content')
    <div id="vue-App" v-cloak>
        <div class="es_top">
            <h2 style="font-size: 20px">リマインドメッセージ登録</h2>
            <div v-if="action == 'edit'">
                <div>
                <span style="vertical-align: middle;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22">
                      <g id="Icon_feather-clock" data-name="Icon feather-clock" transform="translate(-2 -2)">
                        <path id="Path_248" data-name="Path 248" d="M23,13A10,10,0,1,1,13,3,10,10,0,0,1,23,13Z"
                              fill="none" stroke="#7d9195" stroke-linecap="round" stroke-linejoin="round"
                              stroke-width="2"/>
                        <path id="Path_249" data-name="Path 249" d="M18,9v6.065l4.043,2.022"
                              transform="translate(-5.027 -2.029)" fill="none" stroke="#7d9195" stroke-linecap="round"
                              stroke-linejoin="round" stroke-width="2"/>
                      </g>
                    </svg>
                </span>
                    <span>@{{ event_step.created_at }}</span>
                </div>
                <div>
                <span style="vertical-align: middle;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20.035" viewBox="0 0 20 20.035">
                      <path id="Icon_material-update" data-name="Icon material-update"
                            d="M24.5,12.412H16.968l3.045-3.134A7.822,7.822,0,0,0,9.034,9.167a7.639,7.639,0,0,0,0,10.879,7.8,7.8,0,0,0,10.979,0,7.237,7.237,0,0,0,2.267-5.434H24.5A10.379,10.379,0,0,1,21.568,21.6a10.337,10.337,0,0,1-3.375,2.2,9.961,9.961,0,0,1-10.76-2.2A9.823,9.823,0,0,1,7.412,7.622a9.987,9.987,0,0,1,14.057,0L24.5,4.5Zm-9.445-2.356v4.723l3.889,2.311-.8,1.345L13.39,15.612V10.056Z"
                            transform="translate(-4.502 -4.5)" fill="#7d9195"/>
                    </svg>
                </span>
                    <span>@{{ event_step.updated_at }}</span>
                </div>
            </div>
        </div>
        <div class="es_setting_time">
            <h3>配信タイミング</h3>
            <div class="es_setting_time-type">
                <div class="es_setting_time-item">
                    <input type="radio" name="before_day" value="1" v-model="event_step.type_setting_time"
                           :disabled="action == 'edit'">
                    <span>リマインド開始直後</span>
                    <span class="text-danger" style="margin-left: 15px">@{{ error.max_event_step }}</span>
                </div>
                <div class="es_setting_time-item">
                    <input type="radio" name="before_day" value="2" v-model="event_step.type_setting_time"
                           :disabled="action == 'edit'">
                    <span>リマインド終了</span>
                    <div class="es_setting_item-time">
                        <div>
                            <input style="width: 60px;" type="number" class="form-control" min="0" max="180"
                                   v-model="event_step.day"
                                   :disabled="event_step.type_setting_time != 2">
                            <span class="es__text_right">日前の</span>
                        </div>
                        <div class="ml-5">
                            <input style="width: 130px;" type="time" class="form-control" placeholder="hours:minutes"
                                   v-model="event_step.time_send"
                                   :disabled="event_step.type_setting_time != 2">
                            <span class="es__text_right">に配信</span>
                        </div>
                    </div>
                    <div class="c_h_tooltip">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="15px"
                             style="fill: #7D9195;">
                            <path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 400c-18 0-32-14-32-32s13.1-32 32-32c17.1 0 32 14 32 32S273.1 400 256 400zM325.1 258L280 286V288c0 13-11 24-24 24S232 301 232 288V272c0-8 4-16 12-21l57-34C308 213 312 206 312 198C312 186 301.1 176 289.1 176h-51.1C225.1 176 216 186 216 198c0 13-11 24-24 24s-24-11-24-24C168 159 199 128 237.1 128h51.1C329 128 360 159 360 198C360 222 347 245 325.1 258z"/>
                        </svg>
                        <span class="c_h_tooltip-text">
                            <p>0日前を選択するとリマインド終了日当日に配信されます</p>
                        </span>
                    </div>
                </div>
                <div class="es_setting_time-item">
                    <input type="radio" name="before_day" value="3" v-model="event_step.type_setting_time"
                           :disabled="action == 'edit'">
                    <span>リマインド終了</span>
                    <div class="es_setting_item-time">
                        <div>
                            <input style="width: 60px;" type="number" class="form-control" v-model="event_step.hour"
                                   min="0" max="23"
                                   :disabled="event_step.type_setting_time != 3">
                            <span class="es__text_right" style="width: 42px;">時間</span>
                        </div>
                        <div class="ml-5">
                            <input style="width: 60px;" type="number" class="form-control" v-model="event_step.minute"
                                   min="0" max="59"
                                   :disabled="event_step.type_setting_time != 3">
                            <span class="es__text_right">分前に配信</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="es_setting_filter">
            <div style="display: flex; align-items: center">
                <h3>絞込み設定</h3>
                <button style="margin-left: 25px" type="button"
                        @click="openModalFilter"
                        class="btn btn-sns-line btn-sns-line-primary">設定
                </button>
            </div>
            <div class="es_setting_filter-result">
                <div class="row">
                    <div class="col-sm-2" style="width: 77px;padding-right: 0">
                        <span>対象人数</span>
                    </div>
                    <div class="col-sm-10" v-show="count_filter >= 0">
                        <span class="redirect_show_number_filter"
                              @click="showNumberFilter()">@{{ count_filter }}人</span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-2" style="width: 77px;padding-right: 0">
                        <span>対象条件</span>
                    </div>
                    <div class="col-sm-10">
                        <div id="preview_filter">
                            <div v-for="preview in list_preview_filter">@{{ preview }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="es_setting_message" v-if="action == 'edit'">
            <div class="row">
                <div class="col-sm-12 col-md-10 es__setting__list">
                    <div class="es_setting_message-title">
                        <div class="st_message-left">
                            <h3>メッセージ登録</h3>
                            <a style="margin-left: 30px" type="button" class="btn btn-sns-line btn-sns-line-primary"
{{--                               :href="`/basic/events/create-template/${event_step_id}`"--}}
                                    :href="'/basic/template-v2/add-template?template_group_id='+ event_step_id +'&action_type=event&event_id={{ $event_id }}&is_new=1'"
                            >メッセージ追加</a>
                            <button type="button" class="btn btn-sns-line btn-sns-line-primary"
                                    @click="confirmAddTemplateToStepMessage()">テンプレートから追加
                            </button>
                        </div>
                        <div v-if="template_child">
                            <button type="button" class="btn btn-sns-line btn-sns-line-secondary"
                                    @click="previewAllMessage(event_step_id, 'event_step')">プレビュー
                            </button>
                        </div>
                        <div v-else>
                            <button type="button" class="btn btn-sns-line btn-sns-line-secondary" disabled>プレビュー
                            </button>
                        </div>
                    </div>
                    <div>
                        <table class="table tbl_setting_action ">
                            <tbody>
                            <tr>
                                <th style="text-align: left!important;border-radius: 4px 0px 0px 4px;">メッセージ内容</th>
                                <th style="width: 220px;border-radius: 0px 4px 4px 0px;"></th>
                            </tr>
                            </tbody>
                            <tbody style="border-top: none;">
                            <tr v-for="(message, index) in template_child">
                                <td style="text-align: left!important;">
                                    <div style="display: flex; align-items: center">
                                        <div class="mk_item">
                                            <div>@{{ index+1 }}</div>
                                        </div>
                           
                                        <div class="col-sm-11"
                                             style="padding: 0;min-width: 200px; display: flex;align-items: center;">
                                            <span style="padding: 5px 15px !important;width: 95px" class="taiou_gry"
                                                  v-if="message.category_id >= 0">自動編集</span>
                                            <div v-if="message.type == 'text' && message.content" class="text-message"
                                                 style="padding-left: 8px">@{{ message.content|shortContent }}
                                            </div>
                                            <div v-if="message.type == 'image'" class="text-message h_main_preview_img">
                                                <span style="color: #5799DB; cursor: pointer"
                                                      onMouseOver="this.style.color='#ff0000'"
                                                      onMouseOut="this.style.color='#5799DB'">画像</span>
                                                <div class="h_preview_image">
                                                    <div>
                                                        <img :src="message.url_image" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                            <div v-if="message.type == 'stamp'" class="text-message"><span
                                                        class="taiou_gry">【スタンプ】</span></div>
                                            <div v-if="message.type == 'question' && message.content"
                                                 class="text-message" style="padding-left: 8px">
                                                @{{message.content|shortContent}}
                                            </div>
                                            <div v-if="message.type == 'form' && message.btn_template"
                                                 class="text-message"><span class="taiou_gry">【カルーセル】 </span>
                                                 <span v-if="message.type_button == 4 && message.flag_type_content_quick_reply == 1">@{{message.content|shortContent}}</span>
                                                 <span v-if="message.type_button != 4">@{{message.btn_template.text|shortContent}}</span>
                                            </div>
                                            <div v-if="message.type == 'location' && message.content"
                                                 class="text-message"><span class="taiou_gry">【位置情報】</span>
                                                @{{message.content|shortContent}}
                                            </div>
                                            <div v-if="message.type == 'introduction' && message.introduction"
                                                 class="text-message"><span class="taiou_gry">【紹介】</span>@{{message.introduction.friend_name}}
                                                @{{message.content|shortContent}}
                                            </div>
                                            <div v-if="message.type == 'video'" class="text-message"><span
                                                        class="taiou_gry">【動画】</span></div>
                                            <div v-if="message.type == 'voice'" class="text-message"><span
                                                        class="taiou_gry">【音声】</span></div>
                                            <div v-if="message.type == 'group'" class="text-message">
                                                <span class="taiou_gry">【メッセージパック】</span>
                                                <span>@{{ message.name|shortContent }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="td_action">
                                        <a
{{--                                                :href="`/basic/park-template/show/${message.id}?event_id=${event_id}&event_step_id=${event_step_id}`"--}}
                                           v-if="message.type == 'group'"
                                           v-on:click="redirectToPageEdit(message)"
                                           class="btn btn-sns-line btn-sns-line-secondary"
                                           style="padding: 6px 30px;margin-right: 10px;">編集
                                        </a>
                                        <a
{{--                                                :href="`/basic/events/edit-template/${event_step_id}/${message.id}`"--}}
{{--                                            :href="'/basic/template-v2/add-template?template_group_id='+ event_step_id +'&action_type=event&event_id={{ $event_id }}&template_child_id=' + message.id"--}}
                                            v-else
                                            v-on:click="redirectToPageEdit(message)"
                                           class="btn btn-sns-line btn-sns-line-secondary"
                                           style="padding: 6px 30px;margin-right: 10px;">編集
                                        </a>
                                        <i class="far fa-chevron-up hover-sort"
                                           @click="sortItem(undefined, index, 'up')"
                                           :class="{'not-allow': checkItemBelowIsQuickReply(index, 'up')}"
                                        ></i>
                                        <i class="far fa-chevron-down hover-sort"
                                           :class="{'not-allow': checkItemBelowIsQuickReply(index, 'down')}"
                                           @click="sortItem(undefined, index, 'down')"></i>
                                        <i class="fal fa-trash-alt hover-remove" @click="removeMessage(message.id)"
                                           style="font-size: 20px;"></i>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="es_setting_submit">
            <div>
                <button type="button" class="btn btn-sns-line btn-sns-line-success btn-sns-line-lg"
                        style="width: 160px;"
                        @click="startSubmitEventStep">保存
                </button>
            </div>
            <div style="margin-top: 15px;">
                <a href="{{ url()->previous() }}" class="btn btn-sns-line btn-sns-line-secondary btn-sns-line-lg"
                   style="width: 120px">戻る</a>
            </div>
        </div>


        <div class="modal fade" id="templateModal" tabindex="-1" role="dialog" aria-labelledby="templateModal">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content" style="border: none;  box-shadow: 0px 3px 6px #ccc; display: block;">
                    <div class="modal-header" style="border-bottom: none">
                        <button type="button" class="close" data-dismiss="modal"
                                aria-hidden="true" style="opacity: 1;font-size: 27px">
                            <i class="fas fa-times ic-close"></i></button>
                        <h2 class="text-center" style="font-weight: bold"> テンプレート選択</h2>

                    </div>
                    <div class="modal-body modal-body-tag-selector "
                         style="box-shadow: 0px 3px 10px #ccc;margin: 20px 50px;">
                        <div class="tag-selector" style="border: none">
                            <div class="row" id="single_template_idSelector">
                                <div class="col-sm-6 box_folder_tag "
                                     style="border-right: 3px solid #F6F6F6; height:50vh ;max-height: 50vh;overflow: auto; ">
                                    <div class="tag-group-list">
                                        <ul class="list-group listFolder">

                                            <li
                                                    :id="'template_0'"
                                                    v-on:click="template(0)"
                                                    :data-id="0"
                                                    :class="(0 != folder_id) ? ' non-active-folder' : 'active-folder'"
                                                    class="list-group-item visual-list-item">
                                                未分類
                                            </li>
                                            <li v-for="(category,key) in categories"

                                                :id="'template_'+category.id"
                                                v-on:click="template(category.id)"
                                                :data-id="category.id"
                                                :class="(category.id != folder_id) ? ' non-active-folder' : 'active-folder'"
                                                class="list-group-item visual-list-item">
                                                @{{ category.name }}

                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-sm-6 box_item_of_folder" style="max-height: 50vh;overflow: auto;">
                                    <div class="tag-list">
                                        <div class="text-center"
                                             v-show="templates_item!=null && templates_item.length == 0"
                                             style="margin: 5px; font-weight: bold">分類を選択して下さい
                                        </div>
                                        <ul class="list-group listItemInFolder" v-show="templates_item!=null">
                                            <li v-for="(template,key) in templates_item"
                                                class="list-group-item visual-list-item">
                                                <div class="checkbox"
                                                     v-bind:style="(template_id == key) ? 'background: #F4FBF2' : ''">
                                                    <label :for="'template_'+template.id">
                                                        <input type="radio" name="single_template_id"
                                                               :id="'template_'+template.id"
                                                               v-model="template_id"
                                                               :value="template.id"
                                                               data-tagname="template.name">@{{
                                                        template.name }}
                                                    </label>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="padding: 15px 50px 30px;">
                        <div class="col-xs-4">

                        </div>
                        <div class="col-xs-4">
                            <button type="button" v-on:click="acceptTemplateToStep()" :disabled="(template_id==null)"
                                    class="btn btn-block btn-primary" style=" width: 200px;text-align: center;
                                             font-size: 18px; outline: none;
                                             margin: 0 auto;background-color: #08BF5A; border-color: #08BF5A;
                                              font-weight: bold">決定
                            </button>
                        </div>
                        <div class="col-xs-1">

                        </div>
                        <div class="col-xs-3 text-right">
                            <button type="button" class="btn btn-block btn-danger" :disabled="(template_id==null)"
                                    v-on:click="viewTemplateDetail()"
                                    style="width:110px;float: right; border-color: #96ADB2; background-color: #96ADB2; font-weight: bold;font-size: 18px; outline: none"
                            >
                                プレビュー
                            </button>
                        </div>
                    </div>

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

        <div class="modal fade" id="templateDetail" v-show="item != null" tabindex="-1" role="dialog"
             aria-labelledby="templateModal1">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content" style="display: block;">

                    <div class="modal-header" style="border-bottom: none">
                        <button type="button" class="close" @click="hideTemplateDetail()"
                                aria-hidden="true" style="opacity: 1;font-size: 27px">
                            <i class="fas fa-times ic-close" style="padding: 2px 6px 3px 6px;"> </i></button>
                        <p style="font-size: 17px;font-weight: bold;">[@{{item.name}}] プレビュー</p>
                    </div>
                    <div class="modal_message" style="overflow: auto;max-height: 500px">
                        <div class="inner">
                            <div class="message" v-if="item.type == 'text'">
                                <div class="bg_preview_wap" style="margin: 0 auto !important; overflow: auto">
                                    <p class="text-left text_preview" style="white-space: pre-line; height: 200px;">
                                        @{{item.content}}</p>
                                </div>
                            </div>
                            <div class="message" v-if="item.type == 'image'">
                                <div class="preview_stamp bg_preview_wap">
                                    <img :src="item.content && item.content.startsWith('http') ? item.content : ( item.image_server ? item.image_server : '