@extends('layout.basic.main')
@section('title','友だちリスト（ブロックされた友だち ）')
@push('css')
    <link rel="stylesheet" href="{{ asset('/css/friendlist/style.css') }}?v={{ config('sns-line.version') }}">
    <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;
        }

        #funnel_editor th {
            background-color: #f5f5f5 !important;
            color: #737373 !important;
        }

        #newFunnelModal .input-sm {
            height: 40px;
            line-height: 34px;
        }

        .unique-col {
            text-align: left;
        }

        #detail-search {
            border: 2px solid #CCCCCC;
            height: auto;
            min-height: 50px;
            padding: 10px;
        }

        .orange {
            background-color: orange !important;
        }

        .btn.disabled {
            cursor: not-allowed !important;
        }

        #clearData.disabled {
            cursor: not-allowed;
        }

        .leftContents {
            margin: 20px 0 20px 0;
        }

        .box-date input{
            width: 190px !important;
        }

        #tableLineUser {
            border-collapse: collapse;
            border-spacing: 0;
            width: 100%;
            font-weight: bold;
            /*border: 1px solid #ddd;*/
        }

        #tableLineUser th {
            background-color: rgba(8, 191, 90, 1) !important;
            padding: 10px 0;
            border: none !important;
            vertical-align: middle !important;
            white-space: nowrap;
        }

        #tableLineUser td {
            border: none;
            border-bottom: 1px solid #F4F6F7 !important;
            padding: 5px 0px !important;
            font-weight: bold;
            white-space: nowrap;
        }

        #tableLineUser input[type='checkbox'] {
            display: none;
            margin: 0px;
        }

        #tableLineUser input[type='checkbox']+.friend-list-checkbox {
            border: 1px solid #C4C4C4;
            border-radius: 5px;
            width: 17px;
            height: 17px;
            background: white;
        }

        #tableLineUser input[type='checkbox']:checked+.friend-list-checkbox {
            background: #08BF5A;
        }

        table.thead-radius-border {
            border: none !important;
        }

        table.thead-radius-border>thead>th {
            border: none !important;
        }

        table.thead-radius-border,
        table.thead-radius-border>thead,
        table.thead-radius-border>thead>tr {
            background: transparent !important;
        }

        table.thead-radius-border>thead>tr>th:first-child {
            border-radius: 5px 0px 0px 5px;
        }

        table.thead-radius-border>thead>tr>th:last-child {
            border-radius: 0px 5px 5px 0px;
        }

        .line-user-action-pop-up {
            display: flex;
            position: fixed;
            bottom: -100%;
            left: 0px;
            z-index: 99;
            width: 100%;
            padding: 36px 0px 36px calc(16.6% + 15px);
            box-shadow: 0px -3px 10px #0000001A;
            transition: bottom 0.2s;
            background: #fff;
        }
        /* 一括削除パネルは position:fixed のため、ページ送りボタン（前へ/次へ）に重なる。
           選択はページをまたいで保持する仕様（#41069）になり、選択したままページを送る
           操作が前提になったので、パネル表示中は本文の下に余白を足してボタンを逃がす。
           パネルの高さ（上下 padding 36px + 2行のテキスト）より大きい値にしている。 */
        .friendlist.has-bulk-panel {
            padding-bottom: 180px;
        }
        .ic-cal-ip{
            position: absolute;
            left: 8px;
            top: 6px;
            color: #B9B9B9 !important;
        }
        .input-cal{
            padding-left: 30px !important;
            border-radius: 5px;
            height: 34px !important;
            width: 152px !important;
            outline: none;
            border-color: #B9B9B9 !important;
        }
        @media (min-width: 1366px){
            .col-lg-8 {
                width: 1000px;
                padding-left: 0px;
                padding-right: 0px;
            }
            #tableLineUser>thead>tr>th:first-child{
                width: 120px !important;
            }
        }
        @media (min-width: 1200px){
            .col-lg-8{
                width: 1000px;
                padding-left: 0px;
                padding-right: 0px;
            }
        }
    </style>
@endpush
@section('content')
    <article style="padding-left: calc(3.5% - 15px);">
        <section class="friendlist" id="friendBlock" v-cloak
            :class="{ 'has-bulk-panel': listLine.length > 0 }">
            <div class="row" style="padding-right: 4%;">
                <div class="col-xs-12 col-md-11 col-lg-8" style="display: flex; justify-content: space-between; align-items: center; margin-top: 30px; margin-bottom: 20px;">
                    <h2 style="font-size: 20px; color: #51595C; font-weight: bold; padding: 10px 10px 10px 0;">
                        ブロックされた友だち
                    </h2>
                    <div style="display: flex; align-items: baseline;" class="font-weight-bold" >
                        <span style="margin-right: 10px;">表示期間</span>
                        <div class="input-group box-date"  style="position: relative">
                            <input class="input-cal datepicker start_date"
                                   type="text"
                                   style="margin-left: 5px; margin-right: 5px;"
                                   readonly="readonly"
                                   v-model="start_date"
                                   {{--                                                                   :value="(item.data.type == 3 && item.data.action == 2) ? item.data.content : ''"--}}
                                   placeholder="">
                            <span class="ic-cal-ip" style=" left: 13px;"><i class="far fa-calendar"></i></span>
                        </div>
                        <span style="margin-right: 10px; margin-left: 8px;">から</span>
                        <div class="input-group box-date"  style="position: relative; margin-left: 15px">
                            <input class="input-cal datepicker end_date"
                                   type="text"
                                   readonly="readonly"
                                   v-model="end_date"
                                   {{--                                                                   :value="(item.data.type == 3 && item.data.action == 2) ? item.data.content : ''"--}}
                                   placeholder="">
                            <span class="ic-cal-ip"><i class="far fa-calendar"></i></span>
                        </div>
                    </div>
                </div>
            </div>
            {{-- <div class="leftContents">

            </div> --}}
            {{-- <new-component v-bind:title="post.title" v-on:enlarge-text="onEnlargeText"></new-component> --}}
            <div class="row" style="padding-right: 4%;">
                <div class="col-xs-12 col-md-11 col-lg-8">
                    {{-- 選択の内訳（#41076）。選択はページをまたいで保持されるので（#41069/#41094）、
                         「画面で見えているチェック」と「削除される人」が別物になり得る。
                         ページ分と他ページ分を分けて出し、他ページ分は名前まで確認・解除できるようにする。 --}}
                    <div id="selectSummary" v-if="listLine.length > 0"
                        style="margin-bottom: 10px; padding: 10px 15px; border-radius: 5px; background: #F4F8F6; border: 1px solid #CDE3D6; font-size: 14px; color: #51595C;">
                        <div>
                            このページの友だち <b>@{{ pageCheckedRowCount }}</b> 人が選択されています。
                            <span v-if="selectedOtherPageCount > 0">
                                他のページで選択中の <b>@{{ selectedOtherPageCount }}</b> 人を含め、
                                合計 <b>@{{ listLine.length }}</b> 人が削除対象です。
                            </span>
                        </div>
                        <div style="margin-top: 6px;">
                            <a href="javascript:void(0)" style="text-decoration: underline;"
                                v-on:click="toggleSelectedList">
                                <span v-if="showSelectedList">削除対象の友だちを隠す</span>
                                <span v-else>削除対象の友だち（@{{ listLine.length }} 人）を表示</span>
                            </a>
                        </div>
                        <ul v-if="showSelectedList"
                            style="margin: 8px 0 0; padding: 8px 0 0 0; list-style: none; max-height: 200px; overflow-y: auto; border-top: 1px solid #CDE3D6;">
                            <li v-for="friend in selectedFriends" :key="friend.id"
                                style="padding: 3px 0; display: flex; align-items: center;">
                                <span style="flex: 1;">
                                    @{{ friend.name }}
                                    <span style="color: #8A9499;">（ID: @{{ friend.id }}@{{ friend.onThisPage ? '' : '・他のページ' }}）</span>
                                </span>
                                <a href="javascript:void(0)" style="text-decoration: underline; margin-left: 10px;"
                                    v-on:click="unselectFriend(friend.id)">選択を外す</a>
                            </li>
                        </ul>
                    </div>
                    <table id="tableLineUser" class="thead-radius-border" v-cloak>
                        <thead>
                            {{--                        <th class="checkth" style="width: 5%;"> --}}
                            {{--                            <input type="checkbox" id="checkAll" v-on:click="checkAll()" name="line_user" :value="0"> --}}
                            {{--                        </th> --}}
                            <tr>
                                <th style="padding-left: 15px;">
                                    <div style="display: flex;">
                                        <div
                                            style="display: flex; flex-direction: column; justify-content:end; padding-right: 10px;">
                                            <span>全選択</span>
                                        </div>
                                        <label style="display: flex; flex-direction: column; justify-content: end;">
                                            <input type="checkbox" id="checkAll" name="line_user"
                                                :checked="isCheckedAll" :disabled="selectableIds.length === 0"
                                                v-on:change="checkAll($event)">
                                            <div class="friend-list-checkbox"></div>
                                        </label>
                                    </div>
                                </th>
                                <th style="width: 25%; text-align: left !important;">ブロックされた日時</th>
                                <th style="width: 17%; text-align: left !important;">LINE登録名</th>
                                <th style="width: auto; text-align: left !important;">システム表示名</th>
                                <th style="width: 135px; text-align: left !important;">エルメ上から削除</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{-- key は conversation.id（一覧の主キー）。line_user_id は leftJoin で null に
                                 なり得るため key に使うと行が重複し、1行のチェックで複数行がチェック状態になる --}}
                            <tr v-for="(item,index) in listFriend" :key="item.id">
                                <td style="text-align: center;">
                                    <label>
                                        <input type="checkbox" name="line_user[]" :value="item.line_user_id"
                                            :id="'line_user_' + item.id"
                                            :disabled="!isSelectable(item)"
                                            class="checked_line" style="margin-right: 0" v-model="listLine">
                                        <div class="friend-list-checkbox"></div>
                                    </label>
                                </td>
                                <td style="text-align:left !important;">
                                    <span>
                                        @{{ moment(item.blocked_at).format("YYYY/MM/DD HH:mm:ss") }}
                                    </span>
                                </td>
                                <td style="text-algin:left !important;">
                                    <div style="display: flex;align-items: center;">
                                        <img :src="displayAvatar(item.avatar_url)"
                                            @error="setAltImg" alt=""
                                            style="height: 30px; width:auto; border-radius: 50%; margin-right: 10px">
                                        <a
                                           :href="'/basic/friendlist/my_page/' + item.line_user_id"
                                            style="text-decoration: underline; cursor: pointer; font-weight: bold">@{{ item.name }}</a>
                                    </div>
                                </td>
                                {{-- <td >
                                <p class="name">
                                    <a :href="item.link_my_page">@{{ item.name }}</a>
                                </p>
                            </td> --}}
                                <td style="text-align:left !important;">
                                    <span v-if="item.view_name" v-html="item.view_name">
                                    </span>
                                    <span v-else>
                                        -
                                    </span>
                                </td>
                                <td style="text-align: left !important;">
                                    <button class="btn btn-sns-line btn-sns-line-danger" type="button" style="width: 111px;"
                                        v-on:click="deleteItem(item.line_user_id)">
                                        <span>削除</span>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div>
                <button class="btn btn-sns-line btn-sns-line-success" v-if="current_page > 1"
                    @click="getFriendListBlock(current_page - 1)">前へ</button>
                <button class="btn btn-sns-line btn-sns-line-success" v-if="current_page < last_page"
                    @click="getFriendListBlock(current_page + 1)">次へ</button>
            </div>
            <section class="line-user-action-pop-up"
                :style="{ bottom: listLine.length > 0 ? '0px' : '-100%' }">
                <div style="display: flex; flex-direction: column; justify-content: center; margin-right: 3.8%;">
                    <span style="font-size: 18px; font-weight: bold;">
                        一括友だち削除
                    </span>
                    <span style="font-size: 14px; font-weight: bold; color: #51595C;">
                        選択中 @{{ listLine.length }} 人
                        {{-- 選択はページをまたいで保持される。パネルの人数と画面のチェック数が
                             食い違って見えないよう、ページ分と他ページ分の内訳を必ず出す（#41076） --}}
                        <span style="font-weight: normal;">
                            （このページ @{{ pageCheckedRowCount }} 人
                            <span v-if="selectedOtherPageCount > 0">／他のページ @{{ selectedOtherPageCount }} 人</span>）
                        </span>
                    </span>
                </div>
                <button class="btn btn-sns-line btn-sns-line-danger"
                    style="padding: 8px 18px; width: 111px;"
                    :disabled="listLine.length === 0"
                    v-on:click="deleteMulipleFriendListUserBlock">
                    <span>削除</span>
                </button>
                <button class="btn btn-sns-line btn-sns-line-success"
                    style="padding: 8px 18px; margin-left: 10px;"
                    v-if="listLine.length > 0"
                    v-on:click="clearSelection">
                    <span>選択を解除</span>
                </button>
            </section>
        </section>
    </article>
    
@endsection
@push('js')
    <script src="/chat_files/jquery-ui.min.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="/plugins/vuejs/vue-resource@1.3.4.js"></script>
    <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
    <script src="/js/common/config.js?v={{ config('sns-line.version') }}"></script>
        <script src="/js/friendlist/user_block.js?v={{ config('sns-line.version') }}"></script>
    <script>
        $(document).ready(function () {
            setTimeout(function () {
                $(".datepicker").datepicker({
                    dateFormat: 'yy-mm-dd',
                    language: 'ja',
                })},200);
        });
    </script>
@endpush