@extends('layout.basic.main')
@push('css')
    <link rel="stylesheet" href="{{asset('/css/friendlist/style.css')}}">
    <style>
        .disabled {
            pointer-events: none;
            opacity: 0.6;
        }
        .category_active {
            background-color: #ccc !important;
        }
        .tem_choice ul > li{
            padding: 5px !important;
        }
        .template_list{
            display: none;
        }
    </style>
@endpush
@section('content')
    <article class="sub" style="font-size: 15px !important;">
        <section class="friendlist">
            <h2>友だちリスト</h2>
            <p>友だちリストの確認や検索、友だちの詳細情報を確認することが出来ます。</p>
            <div class="rightcontents">
                <form action="{{route('getFriendFollow',['date'=>$date])}}" method="get">
                    <input type="hidden" name="date" value="{{$date}}" id="date_request">

                    <input type="text" name="keyword" id="keyword" value="{{isset($keyword) ? $keyword : ''}}" placeholder="友だち名検索">
                    <select name="sort" id="line_user">
                        <option value="0">ソート</option>
                        <option value="1">登録(フォロー)の古い順</option>
                        <option value="2">登録(フォロー)の新しい順</option>
                        <option value="3">メッセージの新しい順</option>
                    </select>
                    <div class="btn">
                        <button type="submit" class="ylw" style="width: 100px;">検索</button>
                    </div>
                </form>
            </div>
            <form action="{{route('exportFriendListFollowCSV')}}" method="post">
                {{csrf_field()}}
                <table id="tableLineUser" v-cloak>
                    <tbody>
                    <tr>
                        <th class="checkth" style="width: 5%;"><input type="checkbox" id="checkAll" name="line_user"
                                                                      value="0"></th>
                        <th class="nameth" style="width: 15%;">イメージ</th>
                        <th class="nameth" style="width: 10%;">名前</th>
                        <th class="bunruith" style="width: 10%;">ステップ</th>
                        <th style="width: 50%;">受信メッセージ</th>
                    </tr>

                    @if(!empty($bot_line_users))
                        @foreach($bot_line_users as $key => $bot_line_user)
                            <tr class="dp_none">
                                <td style="width: 5%;">
                                    <input type="checkbox" id="line_user" name="line_user[]"
                                           value="{{$bot_line_user->l_id}}" class="checked_message">
                                </td>
                                <td style="width: 15%;">
                                    @if($bot_line_user->avatar_url)
                                        <img src="{{$bot_line_user->avatar_url}}" alt="" style="width: 150px;" onerror="this.onerror=null;this.src='/images/blank_avatar.png'">
                                    @else
                                        <img src="{{asset('images/blank_avatar.png')}}" alt="" style="width: 150px;">
                                    @endif
                                </td>
                                <td style="width: 10%;">
                                    <p class="name">
                                        <a href="{{url('basic/friendlist/my_page/'.$bot_line_user->line_user_id)}}">{{$bot_line_user->name}}</a>
                                    </p>
                                </td>
                                @foreach($bot_line_user->count as $key=> $value)
                                    @if($value !=0)
                                        <td style="width: 10%;">
                                            購読中
                                        </td>
                                    @else
                                        <td style="width: 10%;">
                                            停止中
                                        </td>
                                    @endif
                                @endforeach
                                <td style="width: 50%;">
                                    @if(($bot_line_user->content) != '')
                                        @if($bot_line_user->type == 'video')
                                            ビデオ
                                            <span>（{{$bot_line_user->created_at}}）</span>
                                        @elseif($bot_line_user->type == 'text')
                                            {{$bot_line_user->content}}
                                            <span>（{{$bot_line_user->created_at}}）</span>
                                        @elseif($bot_line_user->type == 'audio')
                                            音声
                                            <span>（{{$bot_line_user->created_at}}）</span>
                                        @elseif($bot_line_user->type == 'image')
                                            画像
                                            <span>（{{$bot_line_user->created_at}}）</span>
                                        @elseif($bot_line_user->type == 'sticker')
                                            スタンプ
                                            <span>（{{$bot_line_user->created_at}}）</span>
                                        @endif
                                    @else
                                        フォローされました
                                        <span> ({{$bot_line_user->followed_at}})</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    @endif

                    <tr v-for="item in items">
                        <td>
                            <input type="checkbox" name="line_user[]" :value="item.id">
                        </td>
                        <td>
                            <div v-if="item.avatar_url">
                                <img :src=item.avatar_url style="width: 150px;" onerror="this.onerror=null;this.src='/images/blank_avatar.png'">
                            </div>
                            <div v-else>
                                <img src="{{asset('images/blank_avatar.png')}}" style="width: 150px;">
                            </div>
                        </td>
                        <td>
                            <a :href="'/basic/friendlist/my_page/'+ item.id">@{{item.name}}</a>
                        </td>
                        <td>停止中</td>
                        <td v-if="item.content != '' ">
                            <ul>
                                <li v-if="(item.type == 'video')">ビデオ（@{{item.content}}）</li>
                                <li v-if="(item.type == 'image')">画像（@{{item.created_at}}）</li>
                                <li v-if="(item.type == 'sticker')">スタンプ（@{{item.created_at}}）</li>
                                <li v-if="(item.type == 'text')">@{{ item.content }}<span>（@{{item.created_at}}）</span>
                                </li>
                                <li v-if="(item.type == 'audio')">音声<span>（@{{item.created_at}}）</span></li>
                            </ul>
                        </td>
                        <td v-else>
                            フォローされました
                            <span> (@{{item.followed_at}})</span>
                        </td>
                    </tr>
                    </tbody>
                </table>
                {{ $bot_line_users->appends(['keyword' => $keyword])->links() }}
                <p class="hyouji">
                    <span class="total">{{$total_record}}</span>人中 {{ (($current_page-1)*$record_per_page)+1 }}
                    - {{ (($current_page)*$record_per_page) }}人目を表示中
                </p>
                <section class="allsousa">
                    <h3>友だち一括操作</h3>

                    <ul class="nav nav-pills">
                        <li class="active"><a data-toggle="pill" href="#menu1">テンプレート送信</a></li>
                        <li><a data-toggle="pill" href="#menu2">ステップ</a></li>
                        <li><a data-toggle="pill" href="#menu3">タグ</a></li>
                    </ul>

                    <div class="tab-content">
                        <div id="menu1" class="tab-pane fade in active">
                            <div class="tagdetail_left" id="abc" v-cloak>
                                <h4>テンプレートを送信</h4>
                                <div class="tem_choice">
                                    <ul style="height: 300px">
                                        <li class="template_group folder-close" role="button"
                                            data-toggle="collapse" aria-expanded="false" id="group_0"
                                            data-id="'group_'+ 0" v-on:click="showGroup(0)">
                                            <span class="glyphicon glyphicon-folder-collapse"></span>
                                            未分類
                                        </li>
                                        <li v-for="(category,index) in groups" class="template_group"
                                            role="button" v-bind:class="(category.id == group_open)?'active':'folder-close'"
                                            data-toggle="collapse" aria-expanded="false"
                                            :id="'group_'+category.id"
                                            :data-id="category.id" :data-name="category.name"
                                            v-bind:class="(category.id == group_open)?'category_active':'folder-close'"
                                            v-on:click="showGroup(category.id, 'first')">
                                            <span class="glyphicon glyphicon-folder-collapse"></span> @{{ category.name }}
                                        </li>
                                    </ul>
                                    <div class="choice_detail">
                                        <p class="nochoice">
                                            <input type="radio" name="select_template" data-name="選択しない"
                                                   v-on:click="showTemplate()" value="0"> 選択しない
                                        </p>
                                        <ul v-if="group_open == 0" style="height: 234px;overflow: scroll">
                                            <li v-for="(item,index) in items_default">
                                                <input type="radio" name="select_template" :data-name="item.name"
                                                       v-on:click="showTemplate()" :value="item.id" v-model="checked">@{{item.name}}
                                            </li>
                                        </ul>
                                        <ul v-if="items['templates'] != undefined && items['templates'].length>0 && group_open != 0" style="height: 234px;overflow: scroll">
                                            <li style="list-style: none" v-for="(item,index) in items['templates']"
                                                :id="'template_1_'+item.id" :data-id="item.id">
                                                <input type="radio" name="select_template" :data-name="item.name"
                                                       v-on:click="showTemplate()" :value="item.id" v-model="checked">@{{
                                                item.name }}
                                            </li>
                                        </ul>
                                        <ul v-if="items['templates'] != undefined && items['templates'].length == 0 && items_default.length == 0">
                                            分類を選択して下さい
                                        </ul>
                                    </div>
                                </div>
                                <p class="choice_submit">選択中：<span class="template_name">選択しない</span></p>
                                <div class="btn">
                                    <button type="button" class="send_template" :disabled="!checked" onclick="SendTemplate()">送信</button>
                                </div>
                            </div>
                        </div>
                        <div id="menu2" class="tab-pane fade">
                            <div class="tagdetail_right">
                                <div class="inner"><h4>ステップを購読</h4>
                                    <select name="scenario_id" id="scenario_id">
                                        <option hidden="hidden">変更しない</option>
                                        <option value="-1">変更しない</option>
                                        <option value="0">購読中止・予約キャンセル</option>
                                        @foreach($get_scenario as $scenario)
                                            <option value="{{$scenario->id}}">{{$scenario->name}}</option>
                                        @endforeach
                                    </select>
                                    <p><input type="radio" name="set_up_time" class="set_up_time" value="0">（新規）最初から/（再開）読んだところから
                                    </p>
                                    <p><input type="radio" name="set_up_time" class="set_up_time" value="1">
                                        途中から始める <input type="number" name="day" id="start_day" placeholder="0" value="0"
                                                       min="0">
                                        日目 <input name="time" type="text" id="start_time" value="00:00:00"
                                                  class="timepicker input-sm">
                                    </p>
                                </div>
                                <button type="button" class="setting_btn">ステップを変更</button>
                            </div>
                            <script src="/chat_files/jquery.min.js"></script>
                            <script src="/chat_files/bootstrap-timepicker.js"></script>
                            <script>
                                $(function () {
                                    $('.timepicker').timepicker({
                                        minuteStep: 1,
                                        template: 'dropdown',
                                        appendWidgetTo: 'body',
                                        showSeconds: true,
                                        minuteStep: 1,
                                        secondStep: 1,
                                        showMeridian: false

                                    });
                                });
                            </script>
                        </div>
                        <div id="menu3" class="tab-pane fade">
                            <div id="item_vuelist_tag_3">
                                <div class="tem_choice">
                                    <ul style="height: 300px;overflow: scroll">
                                        <li>
                                            <a class="collapsed collapse-opener" role="button" data-toggle="collapse"
                                               href="" aria-expanded="false" id="group_0" data-id="0">
                                                    <span v-on:click="showGroup(0)" class="display_category">
                                                        <span class="glyphicon glyphicon-folder-collapse"
                                                              style="margin-right: 10px"></span>未分類(@{{ count_default }})</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a v-for="(category,index) in sortedCategories"
                                               class="collapsed collapse-opener"
                                               data-toggle="collapse" href="" aria-expanded="false"
                                               :id="'third_group_'+category.id"
                                               :data-id="'third_'+category.id" :data-name="category.name"
                                               v-bind:class="(category.id == group_open && group_select =='third')?'category_active':'folder-close'"
                                               v-on:click="showGroup(category.id, 'third')">
                                                <i class="glyphicon glyphicon-folder-collapse"></i> @{{ category.name }}
                                            </a>
                                        </li>
                                    </ul>
                                    <div class="choice_detail" style="height: 300px;overflow: scroll">
                                        <p class="nochoice">
                                            <input type="radio" name="select_tag" data-name="タグを選択しない"
                                                   v-on:click="showTag()" value="0"> タグを選択しない
                                        </p>
                                        <ul v-if="group_open == 0">
                                            <li v-for="(item,index) in items_default">
                                                <input type="radio" name="select_tag" :data-name="item.name"
                                                       v-on:click="showTag()" :value="item.id" v-model="checked">@{{
                                                item.name }}
                                            </li>
                                        </ul>
                                        <ul v-bind:style="group_select =='third' ? 'display:block': 'display:none'"
                                            v-if="tag_items != undefined && tag_items.length > 0">
                                            <li v-for="(item,index) in tag_items" :id="'tag_'+item.id"
                                                :data-id="item.id">
                                                <input type="radio" name="select_tag" :value="item.id"
                                                       :data-name="item.name" id="tag_choose_name"
                                                       v-on:click="showTag()" v-model="checked">
                                                @{{ item.name }}
                                            </li>
                                        </ul>
                                        <ul v-if="tag_items != undefined && tag_items.length == 0 && items_default != undefined && items_default.length == 0">
                                            <li>
                                                分類を選択して下さい
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <p class="choice_submit">選択中：<span id="tag_name">タグを選択しない</span></p>
                                <div class="btngroup" style="width: 40%">
                                    <button type="button" :disabled="!checked" class="add_tag" onclick="addTag();">つける
                                    </button>
                                    <button type="button" :disabled="!checked" class="remove_tag"
                                            onclick="removeTag();">はずす
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="btngroup">
                        <div class="btn" style="width: 48%">
                            <button class="btn-export" type="submit">この検索条件でCSVエクスポート</button>
                        </div>
                        <div class="btn" style="width: 50%">
                            <a href="{{route('getImportCSV')}}" class="gry">CSVインポート</a>
                        </div>
                    </div>
                </section>
            </form>
        </section>
    </article>
@push('js')
    <script src="/plugins/vuejs/vue-resource@1.3.4.js"></script>
    <script src="/js/basic_home/script.js?v={{config("sns-line.version")}}"></script>
    <script>
        $(document).ready(function () {
            var total = parseInt($('.total').text());
            if (total <= 50) {
                $('.prev').addClass('disabled');
                $('.next').addClass('disabled');
            } else {
                $('.pre').removeClass('disabled');
                $('.next').removeClass('disabled');
            }
        })

        var app = new Vue({
            el: '#abc',
            data: {
                groups: [],
                items: [],
                tag_items: [],
                group_select: '',
                items_default: [],
                selected: [],
                group_open: '',
                count_default: 0,
                checked: !1
            },
            created: function () {
                this.initData()
            },
            computed: {
                sortedCategories: function () {
                    return this.groups;
                }
            },
            methods: {
                initData: function (b) {
                    var a = this;
                    $.ajax({
                        url: '/ajax/get-list-group-template-friendlist',
                        type: 'POST',
                        data: b
                    }).done(function (b, c, d) {
                        if (b.status == 0) return alert(b.msg), !1;
                        a.items = [], a.groups = [], a.tag_items = [], Vue.nextTick(function () {
                            a.groups = b.groups, a.items = b.items, a.tag_items = b.tag_items, a.items_default = b.items_default, a.count_default = b.count_default, a.group_open = b.group_open
                        })
                    }).fail(function (a, b, c) {
                    }).always(function (a, b) {
                    })
                }, showGroup: function (a, c) {
                    self = this;
                    var b = {};
                    obj = $('#group_' + a), self.group_select = c, b.group_id = a, b.action = 'showGroup', a != localStorage.getItem('group_id') && (self.initData(b), localStorage.setItem('group_id', a))
                }, showTemplate: function () {
                    obj = event.target, $('.template_name').html($(obj).attr('data-name'))
                }
            }
        });

        var app3 = new Vue({
            el: '#item_vuelist_tag_3',
            data: {
                groups: [],
                tag_items: [],
                group_select: '',
                items_default: [],
                selected: [],
                group_open: '',
                count_default: 0,
                checked: !1
            },
            created: function () {
                this.initData()
            },
            watch: {
                groups: function (a) {
                }
            },
            computed: {
                sortedCategories: function () {
                    return this.groups;
                }
            },
            methods: {
                initData: function (b) {
                    var a = this;
                    $.ajax({url: '/ajax/get-list-group-tag', type: 'POST', data: b}).done(function (b, c, d) {
                        if (b.status == 0) return alert(b.msg), !1;
                        a.items = [], a.groups = [], a.tag_items = [], Vue.nextTick(function () {
                            a.groups = b.groups, a.tag_items = b.tag_items, a.items_default = b.items_default, a.count_default = b.count_default, a.group_open = b.group_open
                        })
                    }).fail(function (a, b, c) {
                    }).always(function (a, b) {
                    })
                }, showGroup: function (a, d) {
                    var c = this;
                    var b = {};
                    obj = '#group_' + a, c.group_select = d, b.group_id = a, b.action = 'showGroup', a != localStorage.getItem('group_id') && (c.initData(b), localStorage.setItem('group_id', a))
                }, showTag: function () {
                    obj = event.target, $('#tag_name').html($(obj).attr('data-name'))
                }
            }
        });
    </script>
@endpush
@endsection