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

    <style>
        .category-selector {
            background: white;
        }

        .category-selector option {
            padding: 10px;
            font-size: 90%;
        }

        .modal-content {
            top: 100px !important;
        }

        .style-order-number {
            margin-top: 10px;
        }

        .flag-rich {
            background: #ffd60f;
            border-radius: 4px;
            width: 180px;
            /* display: flex; */
            /* justify-content: center; */
            padding: 2px 15px;
        }

        #item_vuelist {
            background-color: inherit;
        }
    </style>
@endpush
@section('content')
    <article class="">
        <input type="hidden" id="scenario_id" value="{{ $scenario->id }}">

        <section class="messagestep" id="item_vuelist" v-cloak>
            <h2 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0">
                【{{ $scenario->name }}】ステップ配信メッセージ</h2>
            <div class="btngroup">
                <div class="btn" style="padding: 0; margin: 0 5px 0 0"><a href="{{ route("stepMessage.create", $scenario->id) }}">新規メッセージ登録</a></div>
                <div class="btn" style="padding: 0; margin: 0 5px 0 0"><a data-target="con1" class="modal-open">テンプレートから追加</a></div>
            </div>
            <table>
                <tr>
                    <th width="8%" class=""><input type="checkbox" name="" value="" v-model="selectAll"></th>
                    <th width="23%" class="dayth">配信日程</th>
                    <th width="49%">本文</th>
                    <th width="5%" class="">到達人数</th>
                    <th width="5%" class=""></th>
                    <th width="5%" class=""></th>
                    <th width="5%" class=""></th>
                </tr>
                <tr v-for="(item, index) in items">
                    <td><input type="checkbox" name="check_item[]" :value="item.id" v-model="selected"></td>
                    <td>
                        @{{ item.start_date }}
                        <div class="style-order-number">@{{ item.order_number }}通目</div>
                    </td>
                    <td v-if="item.template.type == 'text'">
                        @{{item.template.content|shortContent}}
                        <div style="margin-top: 10px;text-align: left">
                            <span v-if="item.rich_menu_id" class="flag-rich">
                                <span v-if="item.rich_menu_id != -1">
                                @{{ item.rich_menu_name }}&nbsp;リッチメニュー
                                </span>
                                <span v-if="item.rich_menu_id == -1">
                                    リッチメニュー解除
                                </span>
                            </span>
                        </div>
                    </td>
                    <td v-else-if="item.template.type == 'image'">
                        <div class="media">
                            <div class="media-body vertical-align-middle" style="width: 50%">
                                <p><span class="taiou_gry">【画像】</span></p>
                                <div style="margin-top: 10px">
                                    <span v-if="item.rich_menu_id" class="flag-rich">
                                        <span v-if="item.rich_menu_id != -1">
                                            @{{ item.rich_menu_name }}&nbsp;リッチメニュー
                                        </span>
                                        <span v-if="item.rich_menu_id == -1">
                                            リッチメニュー解除
                                        </span>
                                    </span>
                                </div>
                            </div>
                            <div class="media-right">
                                <img :src="item.template.content" alt="template-img" style="max-width: 200px;">
                            </div>
                        </div>
                    </td>
                    <td v-else-if="item.template.type == 'stamp'">
                        <div class="media">
                            <div class="media-body vertical-align-middle" style="width: 50%">
                                <p><span class="taiou_gry">【スタンプ】</span></p>
                                <div style="margin-top: 10px">
                                     <span v-if="item.rich_menu_id" class="flag-rich">
                                        <span v-if="item.rich_menu_id != -1">
                                            @{{ item.rich_menu_name }}&nbsp;リッチメニュー
                                        </span>
                                        <span v-if="item.rich_menu_id == -1">
                                            リッチメニュー解除
                                        </span>
                                    </span>
                                </div>
                            </div>
                            <div class="media-right">
                                <img :src="'/images/sticker/'+item.template.content.split('_')[0]+'/'+item.template.content.split('_')[1]+'.png'"
                                     alt="template-img" style="max-width: 200px;">
                            </div>
                        </div>
                    </td>
                    <td v-else-if="item.template.type == 'question'">
                        <span class="taiou_gry">【質問】</span>
                        @{{item.template.content|shortContent}}
                        <div style="margin-top: 10px;text-align: left">
                             <span v-if="item.rich_menu_id" class="flag-rich">
                                 <span v-if="item.rich_menu_id != -1">
                                     @{{ item.rich_menu_name }}&nbsp;リッチメニュー
                                 </span>
                                 <span v-if="item.rich_menu_id == -1">
                                     リッチメニュー解除
                                 </span>
                             </span>
                        </div>
                    </td>
                    <td v-else-if="item.template.type == 'form'">
                        <span class="taiou_gry">カルーセル </span>【カルーセル】 @{{item.template.btn_template.text|shortContent}}
                        <div style="margin-top: 10px;text-align: left">
                             <span v-if="item.rich_menu_id" class="flag-rich">
                                 <span v-if="item.rich_menu_id != -1">
                                     @{{ item.rich_menu_name }}&nbsp;リッチメニュー
                                 </span>
                                 <span v-if="item.rich_menu_id == -1">
                                     リッチメニュー解除
                                 </span>
                             </span>
                        </div>
                    </td>
                    <td v-else-if="item.template.type == 'location'">
                        <span class="taiou_gry">【位置情報】</span>
                        @{{item.template.content|shortContent}}
                        <div style="margin-top: 10px;text-align: left">
                             <span v-if="item.rich_menu_id" class="flag-rich">
                                 <span v-if="item.rich_menu_id != -1">
                                     @{{ item.rich_menu_name }}&nbsp;リッチメニュー
                                 </span>
                                 <span v-if="item.rich_menu_id == -1">
                                     リッチメニュー解除
                                 </span>
                             </span>
                        </div>
                    </td>
                    <td v-else-if="item.template.type == 'introduction'">
                        <span class="taiou_gry">【紹介】</span>
                        (@{{item.template.introduction.friend_name|covertLineId}})
                        @{{item.template.content|shortContent10}}
                        <div style="margin-top: 10px;text-align: left">
                            <span v-if="item.rich_menu_id" class="flag-rich">
                                <span v-if="item.rich_menu_id != -1">
                                    @{{ item.rich_menu_name }}&nbsp;リッチメニュー
                                </span>
                                <span v-if="item.rich_menu_id == -1">
                                    リッチメニュー解除
                                </span>
                            </span>
                        </div>
                    </td>
                    <td v-else-if="item.template.type == 'video'">
                        <span class="taiou_gry">動画</span>【動画】
                        <div style="margin-top: 10px;text-align: left">
                             <span v-if="item.rich_menu_id" class="flag-rich">
                                 <span v-if="item.rich_menu_id != -1">
                                     @{{ item.rich_menu_name }}&nbsp;リッチメニュー
                                 </span>
                                 <span v-if="item.rich_menu_id == -1">
                                     リッチメニュー解除
                                 </span>
                             </span>
                        </div>
                    </td>
                    <td v-else-if="item.template.type == 'voice'">
                        <p class="text-left taiou_gry">【音声】</p>
                        <div style="margin-top: 10px;text-align: left">
                             <span v-if="item.rich_menu_id" class="flag-rich">
                                 <span v-if="item.rich_menu_id != -1">
                                     @{{ item.rich_menu_name }}&nbsp;リッチメニュー
                                 </span>
                                 <span v-if="item.rich_menu_id == -1">
                                     リッチメニュー解除
                                 </span>
                             </span>
                        </div>
                    </td>
                    <td v-else-if="item.template.type == 'group'">
                        <div  v-if="item.item_records.length > 0 ">
                            <span class="taiou_gry">メッセージパック</span> @{{item.item_records[0].name|shortContent}}
                        </div>
                    </td>
                    <td>
                        <a :href="'/scenario-users?scenarioId={{$scenarioId}}&stepId='+item.id+''"> @{{
                            item.conversation_count }}人</a>
                    </td>
                    <td>
                        <div class="btngroup">
                            <div class="btn">
                                <a :href="'/basic/step-message/edit/'+item.id" class="ylw"
                                   style="margin-bottom: 8px">編集</a>
{{--                                <a v-else :href="'/basic/scenario/pack-template/show/'+item.scenario_id+'/'+item.template_id" class="ylw"--}}
{{--                                   style="margin-bottom: 8px">編集</a>--}}

                                <a :href="'/basic/step-message/create/{{ $scenario->id }}?clone_id='+item.id+'&action=copy'">コピー</a>
                            </div>
                        </div>
                    </td>
                    <td>
                        <br>
                        <div class="btn" style=" line-height: 20px;">
                            <button class="btn btn-default" style="padding:3px; margin-bottom: 1px"
                                    v-on:click="viewMessageDetail(index)">プレビュー
                            </button>

                            <a v-on:click="sendStepMessageTemplate(item.id)" class="grn">テスト</a><br>
                        </div>
                    </td>

                    <td>
                        <div class="btn"><a v-on:click="deleteItem(item.id)" class="red">削除</a></div>
                    </td>
                </tr>
            </table>
            <p class="sakujyo">チェックしたメッセージを
                <a v-if="selected.length > 0" v-on:click="deleteSelectedItem()" class="btn btn-danger">削除</a>
                <a v-else disabled v-on:click="deleteSelectedItem()" class="btn btn-danger">削除</a>
            </p>

            <div id="custom-modal">
                <div id="con1" class="modal-content">
                    <div class="tagchoice">
                        <div class="tem_choice">
                            {{ Form::select('category_id', [0 => "未分類"] + $categories, Input::old('category_id'), ['size' => 4, 'class' => 'category-selector', 'id' => 'category_id', 'onchange' => 'selectCategory()']) }}

                            <div class="choice_detail" style="padding: 10px;">
                                <div id="template_container" style="height: 200px; overflow: scroll;"></div>
                            </div>
                        </div>
                        <p class="choice_submit">選択中：<span>@{{ selected_template }}</span></p>
                        <div class="row">
                            <a onclick="sendTemplate()" class="control-button btn btn-sm btn-primary"
                               style="float: right; margin-left: 30px;" disabled>テスト</a>
                            <a onclick="detailTemplate()" class="control-button btn btn-sm btn-default"
                               style="float: right;" disabled>プレビュー</a>

                        </div>
                    </div>
                    <div>
                        <a class="modal-close btn btn-sm btn-danger" id="hide_model_button" style="width: 30%"><span
                                    class="glyphicon glyphicon-remove"></span> 閉じる</a>
                        <a v-on:click="cloneTemplate()" class="control-button btn btn-sm btn-primary" disabled
                           style="width: 30%">コピーして編集</a>
                        <a v-on:click="createFromTemplate()" class="control-button btn btn-sm btn-success" disabled
                           style="width: 30%">ステップへ追加</a>
                    </div>
                </div>
            </div>

            @include('basic.step_message.preview_step')
            <div class="modal-overlay" style="display: none;"></div>

           </section>
        <span class="id_page" data-id="step-message-list"> </span>
        @include('layout.modal_test_list.modal_list_test')
    </article>

@endsection

@push('js')
<script src="/js/step_message/index.js?v={{config("sns-line.version")}}"></script>
<script type="application/javascript" src="/js/popup_send_test-message.js?v={{config("sns-line.version")}}"></script>

    <script>
        $(function () {
            $('.modal-open').click(function () {
                $('body').append('<div class="modal-overlay"></div>');
                $('.modal-overlay').fadeIn('slow');
                var modal = '#' + $(this).attr('data-target');
                modalResize();
                $(modal).fadeIn('slow');
                $('.modal-overlay, .modal-close').off().click(function () {
                    $(modal).fadeOut('slow');
                    $('.modal-overlay').fadeOut('slow', function () {
                        $('.modal-overlay').remove();
                    });
                });
                $(window).on('resize', function () {
                    modalResize();
                });

                function modalResize() {
                    var w = $(window).width();
                    var h = $(window).height();
                    var x = (w - $(modal).outerWidth(true)) / 2;
                    var y = (h - $(modal).outerHeight(true)) / 2;
                    $(modal).css({'left': x + 'px', 'top': y + 'px'});
                }
            });
        });
    </script>
@endpush