@extends('layout.basic.main')
@push('css')
    <link rel="stylesheet" href="/css/broadcast/style.css?v={{config("sns-line.version")}}">
    <style>
        .active {
            font-weight: 700;
        }

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

        .choice_submit {
            text-align: center;
            padding-top: 10px !important;
        }

        .btn-default {
            color: #333 !important;
            background-color: #fff !important;
            border: solid 1px #ccc !important;
        }

        .btn-default:hover, .btn-default:active {
            color: #333;
            background-color: #d4d4d4 !important;
            border-color: #8c8c8c !important;
        }
        a:hover{
            color: red !important;
        }
    </style>
@endpush
@section('content')
    <article class="" id="broadcast" v-cloak="">
        <section class="allsend">
            <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>
                タグやステップ等の絞り込みによりセグメント分け配信が可能です。</p>
            <div class="btngroup">
                <div class="btn"><a href="{!! route("broadcast.create") !!}">メッセージ配信</a></div>
                <div class="btn"><a data-target="con1" class="modal-open grn">テンプレート配信</a></div>
            </div>
            <h3>履歴</h3>
            <div class="rightcontents">
                <span>絞り込み</span>
                <select style="padding: 5px" v-model="filter_selected">
                    <option v-for="(item_filter, index) in filter" :value="item_filter.value"
                            :selected="item_filter.value == filter_selected">@{{ item_filter.name }}
                    </option>
                </select>
                <span class="btn" style="display: inline-block;"><a v-on:click="filterBroadcast()" class="ylw"
                                                                    style="padding: 8px 20px;">検索</a></span>
            </div>
            <table id="table_broadcast">
                <tr>
                    <th style="width: 5%;" class="bunruith">編集</th>
                    <th style="width: 15%;">宛先</th>
                    <th>内容</th>
                    <th style="width: 10%;" class="siteth text-center">送信日時</th>
                    <th style="width: 7%;" class="numth">配信数</th>
                    <th style="width: 7%;" class="bunruith text-center"></th>
                    <th style="width: 7%;" class="bunruith text-center"></th>
                </tr>
                <tr v-for="(item, index) in items" v-show="items.length > 0">
                    <td>
                        <div class="btn"><a :href="'/basic/message-send-all/copy/'+item.id">コピー</a></div>
                    </td>
                    <td v-html="item.destination" class="destination_display" style="text-align: left !important;"></td>
                    <td class="message" v-html="displayMessage(item)"></td>
                    <td style="text-align: center !important;">@{{ item.send_day }}<br>@{{ item.send_time }}</td>
                    <td style="text-align: center !important;" >
                        <a :href="'/scenario-users?senderID='+item.id" v-html="displayNumberSend(item.number_send)" style="text-decoration:underline; color: #00a0ea  "></a>
                    </td>
                    <td>
                        <button class="btn btn-default" style="padding:3px; margin-bottom: -3px"
                                v-on:click="viewMessageDetail(index)">プレビュー
                        </button>
                    </td>
                    <td>
                        <button v-if="item.status=='delivered'" class="btn btn-danger"
                                style="padding:3px 20px; margin-bottom: -3px; width: 100px"
                                v-on:click="deleteBroadCast(item.id, item.template_id, item.template_id_2, item.template_id_3)">削除
                        </button>
                        <button v-else class="btn btn-warning"
                                style="padding:3px 20px; margin-bottom: -3px;width: 100px"
                                v-on:click="cancelBroadCast(item.id, item.template_id, item.template_id_2, item.template_id_3)">キャンセル
                        </button>
                    </td>
                </tr>
                <tr v-show="items.length == 0">
                    <td colspan="7"> データがありません。</td>
                </tr>
            </table>
            <div class="btn" :disabled="next_page == 1"><a class="grn" v-on:click="nextPage(next_page)">次の20件へ</a></div>

            <div id="con1" class="modal-content">
                <h3>テンプレート選択</h3>
                <div class="tem_choice">
                    <ul>
                        <li id="gr_0" class="active open_gr" v-on:click="showGroup(0)">未分類</li>
                        @if(!empty($categories) && count($categories))
                            @foreach($categories as $category)
                                <li id="gr_{{$category->id}}" class="open_gr"
                                    v-on:click="showGroup({{$category->id}})">{{$category->name}}</li>
                            @endforeach
                        @endif
                    </ul>
                    <div class="choice_detail">
                        <div id="group_0" class="temp_folder">
                            @if(!empty($templates_default) && count($templates_default))
                                @foreach($templates_default as $template_default)
                                    <label for="temp_{{$template_default['id']}}">
                                        <p><input type="radio" id="temp_{{$template_default['id']}}" name="template_id"
                                                  value="{{$template_default['id']}}"
                                                  v-on:change="chooseTemplate('{{$template_default['id']}}')"> {{$template_default['name']}}
                                        </p>
                                    </label>
                                @endforeach
                            @endif
                        </div>
                        @if(!empty($templates) && count($templates))
                            @foreach($templates as $template)
                                <div id="group_{{$template['group_id']}}" style="display: none" class="temp_folder">
                                    @foreach($template['templates'] as $temp)
                                        <label for="temp_{{$temp['id']}}">
                                            <p><input type="radio" id="temp_{{$temp['id']}}" name="template_id"
                                                      value="{{$temp['id']}}"
                                                      v-on:change="chooseTemplate('{{$temp['id']}}')"> {{$temp['name']}}
                                            </p>
                                        </label>
                                    @endforeach
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
                <p class="choice_submit">選択中：選択しない</p>
                <div style="width: 70%; float: right">
                    <div class="btngroup">
                        <div class="btn"><a id="egg_idpreviewOpener" class="btn-default" v-on:click="previewTemplate()">プレビュー</a>
                        </div>
                        <div class="btn"><a v-on:click="sendForTest()">テスト</a></div>
                    </div>
                </div>
                <div class="btngroup">
                    <div class="btn"><a class="modal-close red"><i class="glyphicon glyphicon-remove"></i> 閉じる</a>
                    </div>
                    <div class="btn"><a v-on:click="createBroadcastUseTemplate()">コピーして編集</a></div>
                </div>

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

    </article>
    <span class="id_page" data-id="message-send-all"> </span>
    <div id="custom-modal">
        {{--items default--}}
        <div id="list-choose-test-modal" class="modal-content"
             style="left: 24%; top: 170.5px; display: none; overflow: auto; max-height: 665px">
            <span class="event-from-page" data-id="page"> </span>
            <div class="modal_message">
                <div class="inner">
                    <h2>設定済みテストアカウント</h2>
                    <table>
                        <thead>
                        <tr>
                            <th style="width: 10%;">配信</th>
                            <th>イメージ
                            </th>
                            <th>名前
                            </th>
                            <th style="width: 20%;"> </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-if="items_test.length > 0" v-for="(item, index) in items_test">
                            <td><input type="checkbox" name="check_item[]" :value="item.id" v-model="selectedTester"></td>
                            <td> <img :src="displayAvatar(item.avatar_url)" @error="setAltImg" alt="avt-img" class="img_responsive" style="max-width: 100px">
                            </td>
                            <td> @{{item.name}}</td>
                            <td>
                                <button class="btn btn-danger" v-on:click="removeTest(item.id)">削除</button>
                            </td>
                        </tr>

                        </tbody>
                    </table>
                    <div class="text-center">
                        <button class=" btn btn-success center" v-on:click="sendForTest()"
                        >テスト送信
                        </button>
                    </div>


                    <h2>テストアカウント追加</h2>
                    <div class="box-search">
                        <input type="text"
                               style="width: 50%; height: 35px;"
                               name="keyword"
                               id="keyword"
                               v-model="keyword"
                               placeholder="テストアカウント名">

                        <div class="btn">
                            <button type="button" v-on:click="searchLineUser()" class="btn btn-default" style="width: 100px; margin-bottom: 7px">検索
                            </button>
                        </div>
                    </div>


                    <table  v-if="items_line_uer_search.length > 0">
                        <thead>
                        <tr>
                            <th style="width: 20%;">配信</th>
                            <th>イメージ
                            </th>
                            <th>名前
                            </th>

                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item, index) in items_line_uer_search" >
                            <td>
                                <div class="btn" v-if="item.is_tester == 0">
                                    <button type="button" class="btn btn-success" style="width: 100px;" v-on:click="addTest(item.id)" >追加</button>
                                </div>
                                <div class="btn" v-else>
                                    <button type="button" class="btn btn-success" style="width: 100px;" disabled >追加済み</button>
                                </div>
                            </td>
                            <td> <img :src="displayAvatar(item.avatar_url)" @error="setAltImg" alt="avt-img" class="img_responsive" style="max-width: 100px">
                            </td>
                            <td> @{{item.name}}</td>

                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>
            <a class="btn btn-default pull-right model_close_preview" v-on:click="closeModal()"> <i class="glyphicon glyphicon-remove"></i> 閉じる</a>
        </div>
    </div>

{{--    @include('layout.modal_test_list.modal_list_test')--}}

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

    <script>
        var token = "{!! csrf_token() !!}";
        $(function () {
            var nav = $('#snav ul');
            var navTop = nav.offset().top;
            $('li', nav).hover(function () {
                    $('ul', this).stop().slideDown('fast');
                },
                function () {
                    $('ul', this).stop().slideUp('fast');
                });
        });

        $(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>
    <script type="application/javascript" src="/js/broadcast/index.js?v={{config("sns-line.version")}}"></script>

@endpush