@extends('layout.basic.main')
@push('css')
    <link rel="stylesheet" href="{{asset('/css/friendlist/style.css')}}?v={{config("sns-line.version")}}">
@endpush
@section('content')
    <article class="sub" style="font-size: 15px !important;">
        <section class="friendlist">
            <h2>友だちリスト</h2>
            <p>友だちリストの確認や検索、友だちの詳細情報を確認することが出来ます。</p>
            <input type="hidden" id="keyword" value="{{$keyword}}">
            <div class="rightcontents">
                <form action="{{route('postResultSearch')}}" method="post">
                    {{csrf_field()}}
                    <input type="text" name="keyword" value="{{$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('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: 25%;">イメージ</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" name="line_user[]" value="{{$bot_line_user->id}}">
                                </td>
                                <td style="width: 25%;">
                                    @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')
                                            ビデオ
                                            （<time>{{$bot_line_user->created_at}}</time>)
                                        @elseif($bot_line_user->type == 'text')
                                            {{$bot_line_user->content}}
                                            (<time>{{$bot_line_user->created_at}}</time>)
                                        @elseif($bot_line_user->type == 'audio')
                                            音声
                                            （<time>{{$bot_line_user->created_at}}</time>）
                                        @elseif($bot_line_user->type == 'image')
                                            画像
                                            (<time>{{$bot_line_user->created_at}}</time>)
                                        @elseif($bot_line_user->type == 'sticker')
                                            スタンプ
                                            (<time>{{$bot_line_user->created_at}}</time>）
                                        @endif
                                    @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')}}" alt="" 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>
                    @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>
                    @endif
                </ul>
                <p class="hyouji">
                    {{count($bot_line_users)}}人中 {{ (($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="item_vuelist_tag_2">
                                <h4>テンプレートを送信</h4>
                                <div class="tem_choice">
                                    <ul style="height: 300px">
                                        <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>
                                                        未分類
                                                    </span>
                                            </a>
                                        </li>
                                        <li>
                                            <a v-for="(category,index) in groups" class="collapsed collapse-opener"
                                               role="button"
                                               data-toggle="collapse" href="" aria-expanded="false"
                                               :id="'group_'+category.id"
                                               :data-id="category.id" :data-name="category.name"
                                               v-bind:class="(category.id == group_open && group_select =='first')?'active':'folder-close'"
                                               v-on:click="showGroup(category.id, 'first')">
                                                <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_template" data-name="選択しない"
                                                   v-on:click="showTemplate()" value="0"> 選択しない
                                        </p>
                                        <ul v-if="group_open == 0">
                                            <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">@{{item.name}}
                                            </li>
                                        </ul>
                                        <ul v-if="items['templates'] != undefined && items['templates'].length>0 && group_open != 0">
                                            <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">@{{
                                                item.name }}
                                            </li>
                                        </ul>
                                        <ul v-if="items['templates'] != undefined && items['templates'].length==0 && items_default != undefined && items_default.length==0">
                                            分類を選択して下さい
                                        </ul>
                                    </div>
                                </div>
                                <p class="choice_submit">選択中：<span class="second_template_name">選択しない</span></p>
                                <div class="btn"><a href="">テスト</a></div>
                                <div class="btn"><button class="send-template">送信</button></div>
                            </div>
                        </div>
                        <div id="menu2" class="tab-pane fade">
                            <div class="tagdetail_right">
                                <div class="inner"><h4>ステップを購読</h4> <select name="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" value="0">（新規）最初から/（再開）読んだところから</p>
                                    <p><input type="radio" name="set_up_time" value="1">
                                        途中から始める <input type="number" name="day" placeholder="0" min="0">
                                        日目 <input name="time" type="text" value="00:00:00" class="timepicker input-sm">
                                    </p>
                                </div>
                                <p>
                                    <input type="checkbox" name="check-scenario" value=""> 2回目以降も各動作を実行する
                                </p>
                                <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">
                            <h3>Menu 3</h3>
                            <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
                                explicabo.</p>
                        </div>
                    </div>

                    <div class="btngroup">
                        <div class="btn">
                            <button class="btn-export" type="submit">この検索条件でCSVエクスポート</button>
                        </div>
                        <div class="btn" style="width: 300px">
                            <a href="{{route('getImportCSV')}}" class="gry">CSVインポート</a>
                        </div>
                    </div>
                </section>
            </form>
        </section>
    </article>
    @push('js')
        <script src="{{asset('/js/friendlist/script.js')}}?v={{config("sns-line.version")}}"></script>
        <script src="{{asset('/js/tag/edit.js')}}?v={{config("sns-line.version")}}"></script>
    @endpush
@endsection