@extends('layout.basic.main')
@push('css')
    <link rel="stylesheet" href="/css/friendlist/style.css?v={{config("sns-line.version")}}">

    <style>
        .modal-content {
            display: block;
            padding: 0;
            position: inherit;
        }

        .taiou_gry {
            background-color: #00BFFF !important;
        }

        #item_vuelist {
            background-color: inherit;
        }

        .messagelist .btngroup {
            margin-top: 20px;
        }
    </style>
@endpush
@section('content')
    <article class="">
        <section class="messagelist" id="item_vuelist" v-cloak>
            <h2 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0">ステップ配信</h2>
            <p style="margin-bottom: 15px; font-size: 15px; color: #222222">登録しておいたメッセージを順番に自動で配信することができます。<br>
                1通目の登録直後にメッセージを設定することで「あいさつメッセージ」として活用が可能です。<br>
                条件によって配信対象を絞り込んだり、友だちの行動に合わせた配信などを設定することもできます。</p>
            <div class="btngroup">
                <div class="btn" style="padding: 0; margin-right: 5px"><a href="{{route('scenario.create')}}"><span class="glyphicon glyphicon-plus"></span> 新規登録</a></div>
                <div class="btn" style="padding: 0; margin-right: 5px"><a href="{{route('scenario.setting')}}"><span class="glyphicon glyphicon-cog"></span> ステップ配信設定</a></div>
                <div class="btn" style="padding: 0; margin-right: 5px"><button type="button" data-toggle="modal" data-target="#sorter_modal_v1" data-type="reaction" data-callback="item_sorted" class="btn btn-sm btn-default" style="color: black; margin-top: 5px;">並び替え</button></div>
            </div>
            <table>
                <tbody><tr>
                    <th style="width: 8%;"></th>
                    <th>ステップ名</th>
                    <th>状態</th>
                    <th>購読中</th>
                    <th>読了済</th>
                    <th>終了後</th>
                    <th style="width: 15%;">編集</th>
                </tr>
                <tr v-for="item in items">
                    <td><span class="btn"><a :href="'/basic/step-message/list-message/'+item.id" class="grn">表示</a></span></td>
                    <td>
                        @{{ item.name }}
                        <span class="taiou_gry" v-if="item.id == newScenarioId">【新規友だち】</span>
                        <span class="taiou_gry" v-else-if="item.id == oldScenarioId">【既存友だち】</span>
                    </td>
                    <td>
                        <span v-if="item.status == 0">配信中</span>
                        <span v-else>停止中</span>
                    </td>
                    <td>
                        <a :href="'/scenario-users?scenarioId='+item.id+'&userCount=start'"> @{{
                            item.scenario_lineusers_reading.length }}人</a>
                    </td>
                    <td>
                        <a :href="'/scenario-users?scenarioId='+item.id+'&userCount=stop'"> @{{
                            item.scenario_lineusers_ended.length }}人</a>
                    </td>
                    <td>
                        <span v-if="item.next_scenario1 != null">@{{ item.next_scenario1.name }}</span>
                        <br v-if="item.next_scenario1 != null"><span v-if="item.next_scenario2 != null">@{{ item.next_scenario2.name }}</span>
                        <br v-if="item.next_scenario2 != null"><span v-if="item.next_scenario3 != null">@{{ item.next_scenario3.name }}</span>
                        <br v-if="item.next_scenario3 != null"><span v-if="item.next_scenario4 != null">@{{ item.next_scenario4.name }}</span>
                        <br v-if="item.next_scenario4 != null"><span v-if="item.next_scenario5 != null">@{{ item.next_scenario5.name }}</span>
                    </td>
                    <td><span class="btn"><a :href="'/basic/scenario/'+item.id+'/edit'" class="yel">設定・削除・複製</a></span></td>
                </tr>
                </tbody>
            </table>

            <div class="modal fade" id="sorter_modal_v1" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div id="" class="modal-header"><span id="sorter_modal_v1">ステップ並び替</span>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div id="sorter_modal_body" class="modal-body modal-body-main">
                            <div class="panel-group">
                                <div>
                                    <span id="sort-list">
                                        {{--default--}}
                                        <div v-for="(item,index) in items"
                                             class="panel panel-default sortitem sortable-chosen sort_item"
                                             draggable="true" style="will-change: transform;" :data-id="item.id">
                                            <div class="panel-heading sort-panel-heading"
                                                 style="min-height: 100px">
                                                <div class="inner" style="width: 50%;float: left;">
                                                    <div class="message">
                                                        <p class="text-left temp_name">
                                                            <label :for="'itemcheck_'+item.id"
                                                                   style="display: block;">
                                                                    <span class="keyword_strong_sort">@{{ item.name }}</span>
                                                            </label>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div style="width: 50%;float: right">
                                                    <span v-on:click="onUpdate(undefined, index, 'bottom')"

                                                          class="pull-right sort-button sort-menu movedown" id="">
                                                        <i class="glyphicon glyphicon-arrow-down"></i>末尾
                                                    </span>

                                                    <span v-on:click="onUpdate(undefined, index, 'down')"
                                                          class="pull-right sort-button sort-menu movebottom" id="">
                                                        <i class="glyphicon glyphicon-menu-down"></i>下
                                                    </span>

                                                    <span v-on:click="onUpdate(undefined, index, 'up')"
                                                          class="pull-right sort-button sort-menu movetop" id="">
                                                        <i class="glyphicon glyphicon-menu-up"></i>上
                                                    </span>

                                                    <span v-on:click="onUpdate(undefined, index, 'top')"
                                                          class="pull-right sort-button sort-menu moveup" id="">
                                                        <i class="glyphicon glyphicon-arrow-up"></i>先頭
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </span>
                                    <input type="hidden" id="array_sort" value="">
                                    <input type="hidden" id="current_position" value="">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <span class="btn btn-danger pull-left">
                                <button type="button" class="close" data-dismiss="modal"
                                        style="color: #fff;font-size: 16px;opacity:unset !important;font-weight:normal !important;"
                                        v-on:click="cancelSorted">&times; キャンセル</button>
                            </span>
                            <span class="sorter_client_finishers">
                                <span data-dismiss="modal" class="btn btn-primary sorter-modal-finisher" v-on:click="sortedTemplate">この順番で決定する</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </article>
@endsection

@push('js')
    <script src="/js/scenario/index.js?v={{config("sns-line.version")}}"></script>
@endpush