@extends('layout.basic.main')
@if($typeData == 'broadcast')
    @section('title', '一斉配信（送信済み友だち）')
@else
    @section('title', 'ステップ配信（送信済み友だち）')
@endif
@push('css')
    <link rel="stylesheet" href="{{asset('/css/friendlist/style.css')}}">
    <style>
        .content_right_header{
            width: auto !important;
        }

        .box_count_message{
            margin-right: 15px !important;
        }
    </style>
@endpush
@section('content')
    <article class="">
        <section class="messagelistsetting">
            @if($typeData == 'broadcast')
                <h2 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0">配信された友だち</h2>
            @else
                @if($type == 0)
                    <h2 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0">購読友だち</h2>
                @else
                    <h2 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0">到達友だち</h2>
                @endif
            @endif
            <div id="container-table">

                <table id="List_Friend_user">
                    <tr class="success">
                        <th class="nameth" style="width: 15%;">イメージ</th>
                        <th class="nameth" style="width: 15%;">名前</th>
                        <th style="width: 50%;"></th>
                    </tr>
                    @foreach($data as $val)
                        @if(!empty($val))
                        <tr>
                            <td>
                                <img src="{{!empty($val->avatar_url) ? $val->avatar_url : '/images/blank_avatar.png'}}" onerror="this.onerror=null;this.src='/images/blank_avatar.png'" style="width: 75px;" alt="">
                            </td>
                            <td class="text-right">
                                <a href="basic/friendlist/my_page/{{$val->id}}">
                                    {{ $val->view_name ? $val->view_name : $val->name}}
                                </a>
                            </td>
                            <td></td>
                        </tr>
                        @endif
                    @endforeach
                </table>
            </div>
        </section>
        @if($type ==1 )
            <div style="float: right">
                <ul class="pagination">
                    @if($page <=3)
                        @for($i=1;$i<=$page ;$i++)
                            @if($currentPage == $i)
                                <li class="active"><span>{{$i}}</span></li>
                            @else
                                <li>
                                    <a href="{{route('scenarioController.getListFriendByScenarioId')}}?stepId={{$stepId}}&page={{$i}}&scenarioId={{$scenarioId}}">{{$i}}</a>
                                </li>
                            @endif
                        @endfor
                    @else
                        @if($page <= 10)
                            @for($i=1;$i<=$page ;$i++)
                                @if($i ==1 )
                                    <li class=""><span id="prew"><a href=""></a>«</span></li>@endif
                                @if($currentPage == $i)
                                    <li class="active"><span>{{$i}}</span></li>
                                @endif
                                @if($i != $currentPage)
                                    <li>
                                        <a href="{{route('scenarioController.getListFriendByScenarioId')}}?stepId={{$stepId}}&page={{$i}}&scenarioId={{$scenarioId}}">{{$i}}</a>
                                    </li>
                                @endif
                                @if($i == $page )
                                    <li><span id="next">»</span></li>  @endif
                            @endfor
                        @else
                            @for($i=1;$i<=$page ;$i++)
                                @if($i ==1 )
                                    <li class=""><span id="prew"><a href=""></a>«</span></li>
                                    @if($currentPage !=1 && $currentPage >3)
                                    <li class="disabled"><a>...</a></li> @endif
                                @endif
                                @if($currentPage == $i)
                                    <li class="active"><span>{{$i}}</span></li>
                                @endif
                                @if(  $i < $currentPage +3  &&  $i > $currentPage - 3 && $i !=$currentPage)
                                    <li>
                                        <a href="{{route('scenarioController.getListFriendByScenarioId')}}?stepId={{$stepId}}&page={{$i}}&scenarioId={{$scenarioId}}">{{$i}}</a>
                                    </li>
                                @endif
                                @if($i == $page )
                                    @if($currentPage !=$page &&$currentPage < $page -4)
                                        <li class="disabled"><a>...</a></li>
                                    @endif
                                    <li><span id="next">»</span></li>
                                @endif
                            @endfor
                        @endif
                    @endif
                </ul>
            </div>
        @endif
        @if($type == 0)
        <div style="float: right">
                <ul class="pagination">
                    @if($page <=3)
                        @for($i=1;$i<=$page ;$i++)
                            @if($currentPage == $i)
                                <li class="active"><span>{{$i}}</span></li>
                            @else
                                <li>
                                    <a href="{{route('scenarioController.getListFriendByScenarioId')}}?userCount={{$userCount}}&page={{$i}}&scenarioId={{$scenarioId}}">{{$i}}</a>
                                </li>
                            @endif
                        @endfor
                    @else
                        @if($page <= 10)
                            @for($i=1;$i<=$page ;$i++)
                                @if($i ==1 )
                                    <li class=""><span id="prew"><a href=""></a>«</span></li>@endif
                                @if($currentPage == $i)
                                    <li class="active"><span>{{$i}}</span></li>
                                @endif
                                @if($i != $currentPage)
                                    <li>
                                        <a href="{{route('scenarioController.getListFriendByScenarioId')}}?userCount={{$userCount}}&page={{$i}}&scenarioId={{$scenarioId}}">{{$i}}</a>
                                    </li>
                                @endif
                                @if($i == $page )
                                    <li><span id="next">»</span></li>  @endif
                            @endfor
                        @else
                            @for($i=1;$i<=$page ;$i++)
                                @if($i ==1 )
                                    <li class=""><span id="prew"><a href=""></a>«</span></li>
                                    @if($currentPage !=1 && $currentPage >3)
                                    <li class="disabled"><a>...</a></li> @endif
                                @endif
                                @if($currentPage == $i)
                                    <li class="active"><span>{{$i}}</span></li>
                                @endif
                                @if(  $i < $currentPage +3  &&  $i > $currentPage - 3 && $i !=$currentPage)
                                    <li>
                                        <a href="{{route('scenarioController.getListFriendByScenarioId')}}?userCount={{$userCount}}&page={{$i}}&scenarioId={{$scenarioId}}">{{$i}}</a>
                                    </li>
                                @endif
                                @if($i == $page )
                                    @if($currentPage !=$page &&$currentPage < $page -4)
                                        <li class="disabled"><a>...</a></li>
                                    @endif
                                    <li><span id="next">»</span></li>
                                @endif
                            @endfor
                        @endif
                    @endif
                </ul>
            </div>
        @endif
        @if($type == 3)
            <div style="float: right">
                <ul class="pagination">
                    @if($page <=3)
                        @for($i=1;$i<=$page ;$i++)
                            @if($currentPage == $i)
                                <li class="active"><span>{{$i}}</span></li>
                            @else
                                <li>
                                    <a href="{{route('scenarioController.getListFriendByScenarioId')}}?senderID={{$senderID}}&page={{$i}}">{{$i}}</a>
                                </li>
                            @endif
                        @endfor
                    @else
                        @if($page <= 10)
                            @for($i=1;$i<=$page ;$i++)
                                @if($i ==1 )
                                    <li class=""><span id="prew"><a href=""></a>«</span></li>      @endif
                                @if($currentPage == $i)
                                    <li class="active"><span>{{$i}}</span></li>
                                @endif
                                @if($i != $currentPage)
                                    <li>
                                        <a href="{{route('scenarioController.getListFriendByScenarioId')}}?senderID={{$senderID}}&page={{$i}}">{{$i}}</a>
                                    </li>
                                @endif
                                @if($i == $page )
                                    <li><span id="next">»</span></li>  @endif
                            @endfor
                        @else
                            @for($i=1;$i<=$page ;$i++)
                                @if($i ==1 )
                                    <li class=""><span id="prew"><a href=""></a>«</span></li>
                                    @if($currentPage !=1 && $currentPage >3))
                                    <li class="disabled"><a>...</a></li> @endif
                                @endif
                                @if($currentPage == $i)
                                    <li class="active"><span>{{$i}}</span></li>
                                @endif
                                @if(  $i < $currentPage +3  &&  $i > $currentPage - 3 && $i !=$currentPage)
                                    <li>
                                        <a href="{{route('scenarioController.getListFriendByScenarioId')}}?senderID={{$senderID}}&page={{$i}}">{{$i}}</a>
                                    </li>
                                @endif
                                @if($i == $page )
                                    @if($currentPage !=$page &&$currentPage < $page -4)
                                        <li class="disabled"><a>...</a></li>
                                    @endif
                                    <li><span id="next">»</span></li>
                                @endif
                            @endfor
                        @endif
                    @endif
                </ul>
            </div>
        @endif
    </article>
@endsection
@push('js')
    <script src="/js/basic_home/script.js?v={{config("sns-line.version")}}"></script>
    <script>
        var type = '{{$type}}';
        if (type == 3) {
            $('.pagination li #next ').unbind('click').on('click', function (e) {
                e.preventDefault();
                var page = {{$currentPage}} + 1;
                var senderID = {{$senderID}};
                window.location.href = "scenario-users?senderID=" + senderID + "&page=" + page;
            });
            $('.pagination li #prew').unbind('click').on('click', function (e) {
                e.preventDefault();
                var page = {{$currentPage}}-1;
                var senderID = {{$senderID}};
                window.location.href = "scenario-users?senderID=" + senderID + "&page=1";
            });
        }

        if (type == 1) {
            $('.pagination li #next ').unbind('click').on('click', function (e) {
                e.preventDefault();
                var page = {{$currentPage}}+1;
                var scenarioId = {{$scenarioId}};
                var step = {{$stepId}};
                window.location.href = "scenario-users?stepId=" + step + "&page=" + page + "&scenarioId=" + scenarioId;
            });
            $('.pagination li #prew').unbind('click').on('click', function (e) {
                e.preventDefault();
                var scenarioId = {{$scenarioId}};
                var senderID = {{$senderID}};
                window.location.href = "scenario-users?stepId=" + step + "&page=1&scenarioId=" + scenarioId;
            });
        }
    </script>
@endpush