@extends('layout.basic.main')
@section('title', 'ステップ配信（一括プレビュー）')
@push('css')
    <link rel="stylesheet" href="/css/friendlist/scenario.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/plugins/timepicker/bootstrap-timepicker.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

    <link rel="stylesheet" href="/css/scenario/list-message.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">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
    <link rel="stylesheet" href="/css/scenario/modal-preview-template-step-preview.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/css/template_v2/modal/broadcast.css?v={{config('sns-line.version')}}">


    <style>
        .main {
            padding-bottom: 0;
        }


        .list-group-item {
            position: relative;
            display: block;
            padding: 10px 15px;
            margin-bottom: -1px;
            background-color: #fff;
            border: 1px solid #ddd;
        }

        #templateDetail .message {
            text-align: center;
            background: #F2F2F2;
            padding: 25px;
            margin: 10px;
        }

        #templateDetail .bg_preview_wap {
            width: 100%;
            margin: auto;
            background: #fff;
            word-break: break-word;
        }

        #templateDetail .text_preview {
            padding: 16px !important
        }

        #templateDetail .preview_video_wap {
            border-radius: 5px;
            width: 60%;
            margin-left: 20%;
            background: #fff;
            min-height: 250px;
            overflow-y: scroll;
            padding-bottom: 10px
        }

        #templateDetail .video_wap_preview {
            width: 100%
        }

        #templateDetail .preview_thumb img {
            width: 150px;
            max-height: 200px;
            float: left;
            padding-left: 10px
        }

        #templateDetail .message .question_wap {
            border-radius: 5px;
            width: 370px;
            margin-left: 25%;
            background: #fff
        }

        #templateDetail .question_title {
            border-bottom: 1px solid #ccc;
            padding: 10px !important;
            overflow: hidden;
            word-break: break-all
        }

        #templateDetail .answer_question {
            min-height: 40px;
            overflow: auto;
        }

        a {
            cursor: pointer;
        }

        .menu-title {
            color: #888888;
            font-weight: 300;
            font-size: 14px;
            margin-top: 15px;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
        }

        .title_page {
            color: #222222;
            font-size: 18px;
            font-weight: 600;
        }

        .a-link {
            color: #5799DB;
            text-decoration: underline;
            font-weight: 300;
            font-size: 14px;
            cursor: pointer;
        }

        .text-2-bold {
            color: #222222;
            font-weight: 600;
            font-size: 14px;
        }

        .tt-box-filter {
            align-items: baseline;
        }

        .tt-box-filter span {
            margin-left: 5px;
            margin-right: 18px;
        }

        .box-top {
            background: #F8F8F8 0% 0% no-repeat padding-box;
            /*border: 1px solid #DDDDDD;*/
            border-radius: 5px;
            width: 70%;
            padding: 3px 12px;
            margin-top: 8px;
        }

        .list-filter-option .checkbox-container {

            /*align-items: center;*/
            position: relative;
            cursor: pointer;
            /*margin-right: 5px;*/
            /*padding-left: 35px  ;*/
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background: #FFFFFF 0% 0% no-repeat padding-box;
            border: 1px solid #E0E0E0;
            border-radius: 5px;
            font-size: 13px;
            margin-top: 10px;
            margin-right: 10px;
        }

        .list-filter-option .checkbox-container input[type="checkbox"] {
            display: none;
        }


        .list-filter-option label.checkbox-container {
            cursor: pointer !important;
        }

        .list-filter-option label.checkbox-container.current-checked {
            background-color: #F4FBF2;
        }

        .list-filter-option .checkmark {
            position: relative;
            top: 1px;
            left: unset;
        }

        .list-filter-option .checkbox-container .checkmark {
            width: 20px;
            height: 20px;
            border-radius: 3px;
            background-color: #ffffff;
            border: 1px solid #DDDDDD;
            margin-right: 10px;
            cursor: pointer !important;

        }

        .list-filter-option .checkbox-container input[type="checkbox"]:checked + .option-container {
            border: 1px solid #EDF4FB !important;
            background: #EDF4FB;
            color: #5799DB;
            font-weight: 600;
            font-size: 14px;
        }

        .list-filter-option .checkbox-container input[type="checkbox"]:checked + .option-container .checkmark {
            background-color: #5799DB;
        }

        .list-filter-option .checkbox-container input[type="checkbox"]:checked + .option-container .tag-name {
            color: #5799DB;
        }

        .list-filter-option .checkbox-container .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        .list-filter-option .checkbox-container input:checked ~ .checkmark:after {
            display: block;
        }

        .list-filter-option .checkbox-container .checkmark:after {
            left: 9px;
            top: 5px;
            width: 5px;
            height: 10px;
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        .list-filter-option .option-container {
            display: flex;
            align-items: center;
            border-radius: 5px;
            border: 1px solid #F6F6F6 !important;
            padding: 2px 11px 3px 6px !important;
            cursor: pointer;
            color: #222222;
            font-size: 14px;
            font-weight: 300;
        }
        .list-filter-option .option-container span{
            font-size: 14px;
            font-weight: 300;
        }

        .list-filter-option .option-container:hover {
            background-color: #EDF4FB;
            border-color: #EDF4FB;
        }

        .list-filter-option input[type="checkbox"]:checked + .option-container {
            background-color: #EDF4FB;
        }
        .list-filter-option input[type="checkbox"]:checked + .option-container span{
            font-weight: 600;
        }

        /*.list-filter-option .option-container{*/
        /*    padding: 8px;*/
        /*    display: flex;*/
        /*    align-items: center;*/
        /*    border: 1px solid #DDDDDD;*/
        /*    border-radius: 5px;*/
        /*    cursor: pointer;*/

        /*}*/
        .list-filter-option .img-card {
            margin-top: 5px;
            width: 51px;
            height: 35px;
            margin-left: 4px;
        }

        .filter-option {
            display: flex;
            align-items: flex-end;
        }

        .filter-option input {
            border: 1px solid #DDDDDD;
            border-radius: 3px;
            width: 70px;
            color: #222222;
            font-weight: 300;
            font-size: 14px;
            height: 34px;
        }

        .filter-option select {
            border: 1px solid #DDDDDD;
            border-radius: 3px;
            width: 200px;
            color: #222222;
            cursor: pointer;
            font-weight: 300;
            font-size: 14px;
        }

        .filter-option option {
            color: #222222;
            font-weight: 300;
            font-size: 14px;
        }

        .filter-option .number_span {
            color: #222222;
            font-weight: 300;
            font-size: 14px;
            margin-left: 8px;
        }

        .filter-day {
            display: flex;
            align-items: flex-end;

        }

        .tt-filter-date {
            margin-top: 20px;
            margin-bottom: 5px;
        }

        .btn-open {
            background: #F8F8F8 ;
            border-radius: 5px 5px 0px 0px;
            color: #222222 !important;
            border: unset;
            margin-top: 20px;
            font-size: 14px;
            font-weight: 300;
        }
        .btn-open i{
            font-size: 18px;
            margin-right: 5px;
        }

        .show-filter {
            margin-top: 15px;
        }

        .step-message-info {
            display: flex;
        }

        .step-message-info .left-side {
            display: flex;
            background: #F8F8F8 !important;
        }

        .font-s14 {
            font-size: 14px !important;
        }

        .font-w3 {
            font-weight: 300 !important;
        }

        .step-message-info .left-side .dot-checkmark {
            border-radius: 50%;
            height: 40px;
            width: 40px;
            border: 2px solid #5699DB;
            position: relative;
        }

        .step-message-info .left-side .dot-checkmark::before {
            content: '';
            height: 26px;
            width: 26px;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #5699DB;
        }

        .step-message-info .left-side .end-line-checkmark {
            margin-bottom: 48px;
            flex: 0 0 auto;
            border-radius: 50%;
            background-color: #5699DB;
            height: 15px;
            width: 15px;
        }

        .step-message-info .right-side {
            background: #FFFFFF 0% 0% no-repeat padding-box;
            box-shadow: 0px 0px 6px #00000029;
            border-radius: 5px;
            margin-bottom: 30px;
            max-width: calc(100% - 206px);
        }

        .step-message-info .action-item-wp *:not(.open_filter_button, .open_filter_button span) {
            color: #222222;
        }

        .no-grow-shrink {
            flex: 0 0 auto;
        }

        .d-inline-block {
            display: inline-block !important;
        }

        .item_fill {
            border: 1px solid #DDDDDD;
            border-radius: 5px;
            width: 300px;
            background: white;
            margin-right: 12px;
        }

        .item_fill .name {
            background: #5799DB 0% 0% no-repeat padding-box;
            border-radius: 5px 5px 0px 0px;
            display: flex;
            height: 40px;
            align-items: center;
            color: white;
            padding: 9px;
            justify-content: space-between;
            font-size: 16px;
            font-weight: 600;
        }

        .item_fill .icon-fa-edit {
            cursor: pointer;
            color: #222222;
            padding: 1px 7px 5px 7px;
            background: white;
            border: 1px solid #DDDDDD;
            border-radius: 5px;
        }

        .item_fill .type-top {
            background: #F8F8F8 0% 0% no-repeat padding-box;
            border: 1px solid #DDDDDD;
            padding: 6px 6px 6px 9px;
            color: #222222;
            height: 38px;
            font-size: 14px;
            display: flex;
            align-items: center;
        }

        .box-list-step {
            box-shadow: 0px 0px 6px #00000029;
            border-radius: 5px;
            padding: 20px;
            padding-right: 10px;
            display: -webkit-box;
            overflow: auto;
            border: 1px solid #00000029;
        }

        .item_fill .tab-menu {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .item_fill .tab-menu .temp {
            color: #888888 !important;
            padding: 6px 6px 6px 2px;
            width: 93px;
            margin-left: 9px;
            cursor: pointer;
            font-weight: 300;
            font-size: 14px;
        }
        #modalPreviewItemStep .item_fill .tab-menu .temp.active {
            background: #FAFAFA !important;
        }

        .item_fill .tab-menu .temp.active {
            color: #5799DB !important;
            font-weight: 600;
            border-bottom: 2px solid #5799DB;
            background: #FFFFFF !important;
            font-size: 14px;
        }

        .item_fill .tab-menu a {
            margin-right: 9px;
        }

        .detail-temp-act {
            border-top: 1px solid #DDDDDD;
            border-radius: 0px 0px 5px 5px;
        }

        .detail-temp-act .template {
            color: #222222;
            font-weight: 300;
            font-size: 14px;
            padding: 15px;
            background: #FFFFFF;
        }

        .grow-shrink-both {
            flex: 1 1 auto;
        }

        .flex-column {
            flex-direction: column !important;
        }

        .time_blue {
            color: #5799DB;
            font-weight: 600;
            font-size: 16px;
        }

        .action-item-time {
            border: 1px solid #DDDDDD;
            border-radius: 4px;
            color: #222222;
            font-weight: 300;
            padding: 7px;
            font-size: 14px;
            margin-bottom: 9px;
            background: #FFFFFF;
        }

        .detail-temp-act .action {
            padding: 10px;
            display: none;
        }

        .text-long {
            width: 143px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .color-222222 {
            color: #222222;
        }

        .box-list-step::-webkit-scrollbar {
            height: 8px;
        }

        .box-list-step::-webkit-scrollbar-track {
            border-radius: 9px;
        }

        .box-list-step::-webkit-scrollbar-thumb {
            background: #DDDDDD;
            border-radius: 9px;
        }

        .show-2line {
            line-height: 1.5em;
            height: 52px;
            overflow: hidden;
            padding-right: 59px;
        }

        .all-filter-setting {
            position: relative;
        }

        .a-show-2line {
            position: absolute;
            right: 1px;
            bottom: 15px;
        }

        .md-list-filter {
            background: #F8F8F8 0% 0% no-repeat padding-box;
            border-radius: 5px;
            padding: 15px;
            display: grid;
            padding-right: 5px;
            max-height: 450px;
            overflow: auto;
        }
        #modalAllFilter .list-filter-option .checkbox-container input[type="checkbox"]:checked + .option-container{
            border-color: #5799DB !important;
            padding: 10px !important;
            padding-top: 8px !important;
            font-weight: 300;
            background: #EDF4FB ;
        }
        #modalAllFilter .list-filter-option .checkbox-container input[type="checkbox"]:checked + .option-container span{

            font-weight: 600;
        }
        #modalAllFilter .list-filter-option .option-container{
            border: 1px solid #FFFFFF !important;
            padding: 10px !important;
            padding-top: 8px !important;
            background: white;
        }
        #modalAllFilter .list-filter-option .checkbox-container{
            border: 1px solid #FFFFFF !important;
        }
        .modal-preview-filter-item{
            /*display: flex;*/
            /*flex-direction: column;*/
            position: fixed;
            top: 76px;
            right: -410px;
            /*right: 0px;*/
            width: 400px;
            background-color: #FFFFFF;
            height: calc(100% - 50px);
            z-index: 16;
            box-shadow: -5px 0px 6px #00000029;
            border-radius: 10px 0px 0px 0px;
            transition: right 0.3s;
            overflow: hidden;
            background: #FAFAFA;
        }
        .modal-preview-filter-item .item_fill{
            border: unset;
            border-radius: 5px;
            width: auto;
            background: white;
            margin-right: 0;
            background: #FAFAFA;
        }
        .icon-clock{
            height: 30px;
            width: 30px;
            z-index: 2;
            background-color: #5799DB;
            border-radius: 3px ;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #FFFFFF;
        }
        .time_at{
            color: #222222;
            font-weight: 300;
            font-size: 14px;
            margin-bottom: 10px;
        }
        .time_send{
            color: #222222;
            font-weight: 300 !important;
            font-size: 14px;
            border-bottom: 1px solid #DDDDDD;
            height: 30px;
            margin-left: 11px;
            width: 60%;

        }
        .time-send span{
            color: #222222;
            font-weight: 300 !important;
        }
        .btn-full-blue{
            background: #5799DB 0% 0% no-repeat padding-box;
            color: #FFFFFF !important;
            font-size: 16px;
            width: 400px;
            height: 50px;
            border: unset;
            border-radius: unset;
            position: fixed;
            bottom: 0;
        }
        #preview_scenario_message .frame-preview-action-step-message{
             padding: unset;
             border: none;
            max-height: unset;
        }
        .box-top-filter{
            z-index: 15;
            background-color: white;
            top: 77px;
            position: sticky;
            border-bottom: 1px solid rgb(224, 224, 224);
            padding-top: 9px;
            margin-left: -14px;
            padding-left: 16px;
            margin-right: -15px;
        }
        .boxListTime{
            background: #F8F8F8;
        }
</style>
@endpush
@section('content')
    <div class="row">
        <div class="col-md-12" style="    background: #F8F8F8;">
            <article class="">
                <input type="hidden" id="scenario_id" value="{{ $scenario->id }}">
                <section class="scenarioList" id="preview_scenario_message" v-cloak>
                    <div class="content-preview-page" style="">
                        <div class="box-top-filter" style="   ">
                            <div class="menu-title">
                                <span style="font-weight: 300"><span v-on:click="window.location.href ='/basic/step-message/scenario-message/' + scenario_id;" style="text-decoration: underline; font-weight: 300; cursor: pointer ">ステップ編集</span> > 一括プレビュー</span>
{{--                            <div class="title_page">一括プレビュー</div>--}}
                             <span v-on:click="window.location.href ='/basic/step-message/scenario-message/' + scenario_id;" style="margin-right:15px; text-decoration: underline; font-weight: 300; cursor: pointer ">
                                 <i class="far fa-level-down" style="rotate: 90deg;
                                                            font-weight: 300;
                                                            font-size: 14px;
                                                            margin-right: 4px;"></i> ステップ編集画面に戻る</span>
                            </div>

                            <div class="show-filter" v-show="is_show_filter == 1">
                                <div class="d-flex tt-box-filter ">
                                    <i class="fas fa-user text-2-bold"></i>
                                    <span class="text-2-bold" style="">表示対象</span>
{{--                                    <a class="a-link"  v-on:click="chooseAllFilter">全選択</a>--}}
                                    <div class="box-top">
                                        <div class="list-filter-option">
                                            <div class=" align-items-center">
                                                <div class="all-filter-setting">
                                                    <div class="show-2line">
                                                        <label   class="checkbox-container">
                                                            <input type="checkbox" value="-1" v-model="list_filter_selected"
                                                                   v-on:change="selectFilter">
                                                            <div class="option-container">
                                                                <span class="checkmark"></span>
                                                                <span style="margin-top: 3px;"> ステップ購読者全員</span>
                                                            </div>
                                                        </label>
                                                        <label  v-for="(filter, indexFilter) in list_filter" class="checkbox-container">
                                                            <input type="checkbox" :value="filter.id"  v-model="list_filter_selected" v-on:change="selectFilter">
                                                            <div class="option-container">
                                                                <span class="checkmark"></span>
                                                                <span style="margin-top: 3px;"> @{{ filter.name }}</span>
                                                            </div>
                                                        </label>

                                                    </div>
                                                    <a class="a-link a-show-2line"  v-on:click="showModalAllFilter">全て表示</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="filter-option">
                                    <div style="    display: flex;    align-items: baseline;">
                                        <div class="d-flex tt-box-filter tt-filter-date">
                                            <i class="far fa-calendar"></i>
                                            <span class="text-2-bold" style="">表示期間</span>
                                        </div>
                                        <div style="    position: relative;    cursor: pointer;">
                                            <select class="form-control" v-model="filter_time" v-on:change="selectOptionFitler">
                                                <option value="0">全て表示</option>
                                                <option value="1">1週目（開始~7日日）</option>
                                                <option value="2">2週目（8~14日目）</option>
                                                <option value="3">3週目（15~21日目）</option>
                                                <option value="4">4週目（22~28日目）</option>
                                                <option value="5">カスタム</option>
                                            </select>
                                            <i class="fas fa-caret-down incon_down"
                                               style="pointer-events: none; right: 10px; top: 50%; transform: translateY(-50%); font-size: 20px; position: absolute; color: #888888 !important;"></i>
                                        </div>

                                    </div>
                                    <div v-show="filter_time == 5" style="    display: flex;    align-items: baseline;">
                                        <div class="d-flex tt-box-filter tt-filter-date ">
                                            <span class="text-2-bold" style="margin-left: 25px;margin-right: 15px">ステップ開始から</span>
                                        </div>
                                        <div class="filter-day" style="   ">
                                            <input class="form-control" value=""
                                                   oninput="checkNumber(this);" min="0"
                                                   type="number" v-model="day_from">
                                            <span class="number_span">日</span>
                                            <span class="number_span"
                                                  style="padding-bottom: 10px;    margin-right: 8px;">-</span>
                                            <input class="form-control" value=""
                                                   oninput="checkNumber(this);" min="0"
                                                   type="number" v-model="day_to">
                                            <span class="number_span">日後</span>
                                        </div>
                                    </div>
                                    <button class="btn btn-sns-line btn_tmp_message" v-on:click="filterTimeStep" style="margin-left: 15px; font-weight: 300" type="button"> 表示</button>

                                </div>
                            </div>
                            <button class="btn btn-sns-line btn-open" v-show="is_show_filter == 0"
                                    v-on:click="is_show_filter = 1">
                                <i class="fas fa-caret-down "></i> 詳細設定
                            </button>
                            <button class="btn btn-sns-line btn-open" v-show="is_show_filter == 1"
                                    v-on:click="is_show_filter = 0">
                                <i class="fas fa-caret-up  "></i> 詳細設定
                            </button>
                        </div>

                        <div class="boxListTime"
                             :style="{ 'height' : (is_show_filter == 1 && list_step.length == 0) ? '63vh' : ((is_show_filter != 1 && list_step.length == 0) ? '79.5vh' : '' )} "
                        >
                            <div class="row justify-content-end" style="background: #F8F8F8;padding-left: 17px;margin-left: 0px; margin-right: 0px; ">
                                <div class="col-11"
                                     style="min-width: 930px;    padding-bottom: 50px; margin-left: 20px ;background: #F8F8F8;    padding-top: 42px;">
                                    <div v-if="list_step.length == 0" style="color: #222222; text-align: center">
                                        ステップ配信が作成されていません。
                                        <br>
                                        メッセージを追加すると表示されます。
                                    </div>
                                    <div class="row " v-if="list_step.length > 0" v-for="(timeGroup, idxTimeGroup) in list_step">
                                        <div class="col-11">
                                            <div class="step-message-info">
                                                <div class="left-side">
                                                    <div class="text-right"
                                                         style="margin-right: 14px; flex: 0 0 100px; min-width: 113px;">
                                                        <p class="mb-1 font-s14 font-w3 color-222222">
                                                            <template
                                                                    v-if="timeGroup.delay_type == 1"
                                                            >
                                                                ステップ開始直後
                                                            </template>
                                                            <template
                                                                    v-else-if="timeGroup.delay_type == 0"
                                                            >
                                                                @{{ timeGroup.start_day  }}日後
                                                            </template>
                                                            <template
                                                                    v-else
                                                            >
                                                                ステップ開始
                                                            </template>
                                                        </p>
                                                        <p class="time_blue">
                                                            <template
                                                                    v-if="timeGroup.delay_type == 1"
                                                            >
                                                            </template>
                                                            <template
                                                                    v-else-if="timeGroup.delay_type == 0"
                                                            >
                                                                @{{ timeGroup.start_time.split(':')[0] + ':' + timeGroup.start_time.split(':')[1] }}
                                                            </template>
                                                            <template
                                                                    v-else
                                                            >
                                                                @{{ timeGroup.start_minute }}時間@{{ timeGroup.start_second }}分後
                                                            </template>
                                                        </p>
                                                        {{--                                                <p class="time_blue">19:00</p>--}}

                                                    </div>
                                                    {{--                                            idxTimeGroup=@{{ idxTimeGroup }}=@{{ total_items }}--}}
                                                    <div class="no-grow-shrink d-flex flex-column align-items-center">
                                                        <div class="dot-checkmark no-grow-shrink"></div>
                                                        <div class="d-inline-block grow-shrink-both"
                                                             v-if="(idxTimeGroup +1) != total_items"
                                                             style="border-left: 2px solid #5799DB"></div> <!---->
                                                    </div>
                                                    <div style="border-top: 1px solid #707070; margin-top: 20px; min-width: 24px;"></div>

                                                </div>
                                                <div class="right-side">
                                                    <div class="box-list-step">
                                                        <div class="item_fill" v-if="timeGroup.steps && timeGroup.steps.length >0"
                                                             v-for="(step , indexStep) in timeGroup.steps">
                                                            <div class="name">
                                                                <div>
                                                                    <i class="fas fa-user"></i> @{{ step.filter_name }}
                                                                </div>
                                                                <div class="icon-fa-edit" v-on:click="showModalDetailStepTime(step,idxTimeGroup,indexStep)">
                                                                    <img src="/images/icon-edit.png" style="width: 16px" alt="">
                                                                </div>
                                                            </div>
                                                            <div class="type-top" v-if="step.name">
                                                                <i class="far fa-keyboard" style="    font-size: 20px; margin-right: 11px;"></i>  @{{ step.name }}
                                                            </div>
                                                            <div class="type-top" v-if="!step.name" style="color:#888888 ">
                                                                <i class="far fa-keyboard" style=" font-size: 20px; margin-right: 11px; color:#888888 "></i>   未設定
                                                            </div>
                                                            <div class="tab-menu">
                                                                <div style="display: flex">
                                                                    <div class="temp active" :id="'menuTemp_'+idxTimeGroup+'_'+indexStep" v-on:click="Choose('template',idxTimeGroup,indexStep)">メッセージ</div>
                                                                    <div class="temp"  :id="'menuAct_'+idxTimeGroup+'_'+indexStep" v-on:click="Choose('action',idxTimeGroup,indexStep)" >アクション</div>
                                                                </div>
                                                                <a class="a-link" :href="'/scenario-users?scenarioId='+scenario_id+'&stepId='+step.id" target="_blank">@{{ step.send_count }}</a>
                                                            </div>
                                                            <div class="detail-temp-act" style=" height: 250px; overflow: auto;">
                                                                <div class="template"  :id="'temp_content_'+idxTimeGroup+'_'+indexStep" >
                                                                    <div v-show="step.messages.length == 0" style="color: #222222;font-weight: 300;text-align: center">メッセージが登録されていません</div>
                                                                    <div v-show="step.messages.length > 0">
                                                                        <template
                                                                                v-for="(item, index) in step.messages">
                                                                            <template  v-if="item && item != null && index == 0">
                                                                                <template v-if="item.type == 'group'">
                                                                                    <template v-for="(itemChild, indexChild) in item.template_childs">
                                                                                        @include('basic.template_v2.common.modal.item-preview-child')
                                                                                    </template>
                                                                                </template>

                                                                                <template v-else
                                                                                >
                                                                                    @include('basic.template_v2.common.modal.item-preview')
                                                                                </template>
                                                                            </template>
                                                                        </template>
                                                                    </div>

                                                                </div>
                                                                <div class="action"  :id="'action_content_'+idxTimeGroup+'_'+indexStep">
                                                                    <div class="wrap_action">
                                                                        <div class="list_action">
                                                                            @include('basic.step_message.v2.preview-action-page-preview')
                                                                        </div>
                                                                        <div v-show="!step.action_id" class="text-center "
                                                                             style="color: #222222;font-size: 14px;font-weight: 300">
                                                                            エルメアクションが登録されていません
                                                                        </div>
                                                                    </div>
                                                                    {{--                                                            <div class="action-item-time">--}}
                                                                    {{--                                                                <div style="display: flex; justify-content: space-between; align-items: center;  margin-bottom: 5px;">--}}
                                                                    {{--                                                                    <div style="font-weight: 600">--}}
                                                                    {{--                                                                        テキスト--}}
                                                                    {{--                                                                    </div>--}}
                                                                    {{--                                                                    <a class="a-link">絞り込みあり</a>--}}
                                                                    {{--                                                                </div>--}}
                                                                    {{--                                                                <div style="display: flex; justify-content: space-between; align-items: center">--}}

                                                                    {{--                                                                    <div class="text-long">--}}
                                                                    {{--                                                                        管理名管理名管理名 管理名管理名管理名 管理名管理名管理名--}}
                                                                    {{--                                                                    </div>--}}
                                                                    {{--                                                                    <div>を⚪︎日目から再開</div>--}}
                                                                    {{--                                                                </div>--}}
                                                                    {{--                                                            </div>--}}
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div v-else>No data</div>
                                                    </div>

                                                </div>
                                            </div>

                                        </div>

                                    </div>

                                    <div class="row " v-if="total_items > list_step.length">
                                        <div class="col-11">
                                            <div class="step-message-info" style="align-items: center">
                                                <div class="left-side">
                                                    <div class="text-right"
                                                         style="margin-right: 25px; flex: 0 0 100px; min-width: 100px;">

                                                    </div>
                                                    <div class="no-grow-shrink d-flex flex-column align-items-center">
                                                        <div class="dot-checkmark no-grow-shrink"></div>
                                                    </div>
                                                    <div style="border-top: 1px solid #707070; margin-top: 20px; min-width: 24px;"></div>
                                                </div>
                                                <div class="">
                                                    <a class="a-link"
                                                       v-on:click="loadMoreTimes()"
                                                       style="font-size: 16px; margin-left: 10px">さらに20件表示</a>

                                                </div>
                                            </div>

                                        </div>

                                    </div>
                                </div>

                            </div>

                        </div>
{{--                        <div style="background: #FFFFFF ;box-shadow: 0px -2px 5px #0000001A; padding: 14px 20px;position: sticky;--}}
{{--                                    bottom: 0px;--}}
{{--                                    margin-left: -14px;--}}
{{--                                    margin-right: -14px;--}}
{{--                                ">--}}
{{--                            <button class="btn btn-sns-line btn-sns-line-outline-default"--}}
{{--                                    v-on:click="window.location.href ='/basic/step-message/scenario-message/' + scenario_id;"--}}
{{--                                    style="border: 1px solid #DDDDDD;border-radius: 3px; color: #222222 !important; height: 40px">--}}
{{--                               --}}
{{--                                <span style="font-weight: 300;font-size: 14px">ステップ編集画面に戻る</span>--}}
{{--                            </button>--}}

{{--                        </div>--}}
                    </div>
                    <div class="modal-preview-filter-item" id="modalPreviewItemStep">
                        <div class="item_fill">
                            <div style="padding: 17px">
                                <div class="time_at">
                                    <i class="far fa-history" style="margin-right: 5px"></i>  @{{ formatDate(itemStep.updated_at) }}
                                    <img src="/images/icons8-close-22.png" style="float: right; cursor: pointer" v-on:click="closeModalDetailStepTime">
                                </div>
                                <div class="d-flex align-item-center">
                                    <div class="icon-clock" style="">
                                        <img src="/images/icon-clock.png" style="width: 17px;">
                                    </div>
                                    <div class="time_send">
                                        <div style="padding-top: 3px" >
                                    <span style="font-weight: 300" v-if="itemStep.delay_type == 1">
                                        ステップ開始直後
                                    </span>
                                            <span style="font-weight: 300" v-else-if="itemStep.delay_type == 0">
                                        @{{ itemStep.start_day  }}日後   @{{ itemStep.start_time.split(':')[0] + ':' + itemStep.start_time.split(':')[1] }}
                                    </span>
                                            <span style="font-weight: 300" v-else>
                                        @{{ itemStep.start_minute }}時間@{{ itemStep.start_second }}分後
                                    </span>
                                        </div>

                                    </div>
                                </div>
                                <div class="d-flex align-item-center" style="margin-top: 11px">
                                    <div class="icon-clock" style="">
                                        <i class="fas fa-user"></i>
                                    </div>
                                    <div class="time_send">
                                        <div style="padding-top: 3px; font-weight: 300">@{{ itemStep.name ? itemStep.name : '未設定' }}</div>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-menu">
                                <div style="display: flex">
                                    <div class="temp active" id="md_menuTep" v-on:click="mdChooseTab('template')" style="font-size: 16px">メッセージ</div>
                                    <div class="temp" id="md_menuAct" v-on:click="mdChooseTab('action')" style="font-size: 16px">アクション</div>
                                </div>
                            </div>
                            <div class="detail-temp-act" >
                                <div class="template" id="md_temp_content" style="margin: 15px; border-radius: 5px">
                                    <div v-show="itemStep.messages && itemStep.messages.length == 0" style="color: #222222;font-weight: 300;text-align: center">メッセージが登録されていません</div>

                                    <div v-show="itemStep.messages && itemStep.messages.length > 0">
                                        <template
                                                v-for="(item, index) in itemStep.messages">
                                            <template  v-if="item && item != null">
                                                <template v-if="item.type == 'group'">
                                                    <template v-for="(itemChild, indexChild) in item.template_childs">
                                                        @include('basic.template_v2.common.modal.item-preview-child')
                                                    </template>
                                                </template>

                                                <template v-else
                                                >
                                                    @include('basic.template_v2.common.modal.item-preview')
                                                </template>
                                            </template>
                                        </template>
                                    </div>

                                </div>
                                <div class="action" id="md_action_content">
                                    <div class="wrap_action">
                                        <div class="list_action">
                                            @include('basic.step_message.v2.modal-preview-action-page-preview')
                                        </div>
                                        <div v-show="!itemStep.action_id" class="text-center "
                                             style="color: #222222;font-size: 14px;font-weight: 300;padding: 15px;
                                                            background: white;
                                                            margin: 4px;
                                                            border-radius: 5px;">
                                            エルメアクションが登録されていません
                                        </div>
                                    </div>


                                </div>


                            </div>
                        </div>
                        <button class="btn btn-sns-line btn-full-blue"
                                v-on:click="backEditStepTime(itemStep.filter_manager_id)">
                            メッセージを編集する
                        </button>
                    </div>

                    <div class="modal fade" id="modalAllFilter"
                         tabindex="-1" role="dialog"
                         data-backdrop="static"
                         data-keyboard="false"
                         aria-labelledby="chatSettingStatus">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header" style="border: none;">
                                    <button type="button" class="close" data-dismiss="modal"
                                            aria-hidden="true" style="opacity: 1;font-size: 27px">
                                        <i class="fas fa-times"></i></button>
                                    <h2 class="text-center " style="font-size: 20px; color: #222222; font-weight: bold"> 表示対象選択</h2>
                                </div>
                                <div class="modal-body" style="padding: 15px 110px;">
                                    <div class="md-list-filter list-filter-option">
                                        <label   class="checkbox-container">
                                            <input type="checkbox" value="-1"  v-model="list_filter_selected_md">
                                            <div class="option-container">
                                                <span class="checkmark"></span>
                                                <span>ステップ購読者全員</span>

                                            </div>
                                        </label>
                                        <label  v-for="(filter, indexFilter) in list_filter" class="checkbox-container">
                                            <input type="checkbox"
                                                   :value="filter.id"
                                                   v-model="list_filter_selected_md">
                                            <div class="option-container">
                                                <span class="checkmark"></span>
                                                <span>@{{ filter.name }}</span>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <button type="button" class="btn btn-sns-line btn_tmp_message" v-on:click="filterStep" style="margin-bottom: 30px;font-size: 16px; font-weight: 300; width: 250px; height: 40px ">選択した対象を表示</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </article>
        </div>
    </div>
    @include('layout.modal_setting.modal_select_action')
    @include('layout.modal_filter_v2')
@endsection
@push('js')
    <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
    <script src="/chat_files/bootstrap-timepicker.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

    <script src="/js/my_page/Sortable.min.js"></script>
    <script src="/js/my_page/vuedraggable.min.js"></script>
    <script>
        var scenarioObj = @json($scenario);
        var params = [];
        var basic_home_new = [];

        var list_status = null;
        list_status.forEach(function (item) {
            basic_home_new.push({
                k: item.id,
                text: item.name_status,
                bg: item.color,
                'class': 'default',
                show: !1,
                stt: 1,
                value: item.id
            });
        });

        var getScenario = null;
        var conversion = null;

    </script>

    <script src="/js/friendlist/modal_filter_v2.js?v={{config('sns-line.version')}}"></script>

    <script src="/js/scenario/preview_scenario_message.js?v={{config('sns-line.version')}}"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
    <script src="/js/template_v2/messages/modal/item-preview-template.js?v={{config('sns-line.version')}}"></script>

    <script src="/js/template_v2/messages/modal-preview-send-test.js?v={{config('sns-line.version')}}"></script>
@endpush