@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="" style="font-size: 15px !important;">
        <section class="friendlist">
            <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">友だちリストの確認や検索、友だちの詳細情報を確認することが出来ます。</p>
            <div class="rightcontents">
                <form action="{{route('postResultSearch')}}" method="post">
                    {{csrf_field()}}
                    <input type="text" name="keyword" id="keyword" placeholder="友だち名検索">
                    <select name="sort" id="line_user">
                        <option value="0">ソート</option>
                        <option value="1">登録(フォロー)の古い順</option>
                        <option value="2">登録(フォロー)の新しい順</option>
                        <option value="3" onchange="sortTable()">メッセージの新しい順</option>
                    </select>
                    <div class="btn">
                        <button type="submit" class="ylw" style="width: 100px;">検索</button>
                    </div>
                </form>
            </div>
            <form action="{{route('exportCSV')}}" method="post">
                {{csrf_field()}}
                <table id="tableLineUser">
                    <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($get_bot_line_users))
                        @foreach($get_bot_line_users as $key => $bot_line_user)
                            <tr class="dp_none">
                                <td style="width: 5%;">
                                    <input type="checkbox" id="line_user" class="checked_message" name="line_user[]"
                                           value="{{$bot_line_user->l_id}}">
                                </td>
                                <td style="width: 15%;">
                                    @if($bot_line_user->avatar_url)
                                        <img src="{{$bot_line_user->avatar_url}}" onerror="this.onerror=null;this.src='/images/blank_avatar.png'" alt="" style="width: 150px;">
                                    @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) != '')
                                        {{$bot_line_user->new_msg}}
                                        (
                                        <time>{{$bot_line_user->created_at}}</time>）
                                    @else
                                        フォローされました
                                        ({{$bot_line_user->followed_at}})
                                    @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>
                <ul class="pagenavi">
                    @if ($current_page > 1 && $total_page > 1)
                        <li>
                            <a class="prev" href="{{url('basic/friendlist?page='.($current_page-1))}}">
                                <i class="glyphicon glyphicon-menu-left"></i>
                            </a>
                        </li>
                    @else
                        <li>
                            <a class="prev" href="{{url('basic/friendlist?page='.($current_page-1))}}" disabled="">
                                <i class="glyphicon glyphicon-menu-left"></i>
                            </a>
                        </li>
                    @endif

                    @for ($i = 1; $i <= $total_page; $i++)
                        @if ($i == $current_page)

                        @else
                            <li><a href="{{url('basic/friendlist?page='.$i)}}">{{$i}}</a></li>
                        @endif

                    @endfor

                    @if ($current_page < $total_page && $total_page > 1)
                        <li>
                            <a class="next" href="{{url('basic/friendlist?page='.($current_page+1))}}">
                                <i class="glyphicon glyphicon-menu-right"></i>
                            </a>
                        </li>
                    @else
                        <li>
                            <a class="next" href="{{url('basic/friendlist?page='.($current_page+1))}}">
                                <i class="glyphicon glyphicon-menu-right"></i>
                            </a>
                        </li>
                    @endif
                </ul>
                <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="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: 20%">
                                    <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="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
        <script src="{{asset('/js/friendlist/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');
                }
            })
        </script>
    @endpush
@endsection