@extends('layout.basic.main')
@section('title','友だちリスト（非表示中の友だち）')
@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;
        }

        #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%;
            /*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;
        }
        .ic-cal-ip{
            position: absolute;
            left: 8px;
            top: 6px;
            color: rgba(190,190,190,1);
        }
        .input-cal{
            padding-left: 30px !important;
            border-radius: 5px;
            height: 34px !important;
            width: 152px !important;
            outline: none;
        }

        @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 class="" style="font-size: 15px !important; padding-left: calc(3.5% - 15px);">
        <section class="friendlist" id="friendHiden">
            <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; border-color: #B9B9B9;"
                                   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"
                                   style="border-color: #B9B9B9;"
                                   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">
                <button class="btn btn-primary" id="btnUnblock" v-on:click="unblockLineUser()">解除する
                </button>
            </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">
                    <table id="tableLineUser" class="thead-radius-border" v-cloak>
                        <thead>
                        <tr>
                            <th style="width: 120px !important; 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" :value="0"
                                               v-on:click="checkAll()">
                                        <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;">再表示</th>
                            <th style="width: 135px; text-align: left !important;">エルメ上から削除</th>

                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in listFriend">
                            <td style="text-align: center !important;">
                                <label>
                                    <input type="checkbox" name="line_user[]" :value="item.line_id" id="line_user"
                                           class="checked_line" v-on:click="checkLine(event)">
                                    <div class="friend-list-checkbox"></div>
                                </label>
                            </td>
                            <td style="text-align:left !important;">
                                    <span>
                                        @{{ moment(item.datetime_hide).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_id" style="font-weight: bold; text-decoration: underline; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">@{{ item.name }}</a>
                                </div>
                            </td>
                            <td style="text-align:left !important;"
                                    {{-- v-text="displayScenario(item.scenario_action)" --}}
                            >
                                    <span v-if="item.view_name">
                                        @{{item.view_name}}
                                    </span>
                                <span v-else>
                                        -
                                    </span>
                            </td>
                            <td style="text-align: center !important;">
                                <button class="btn btn-sns-line btn-sns-line-primary" type="button" style="width: 111px;"
                                        v-on:click="unHideLineUser(item.line_id,index)">
                                    <span>再表示</span>
                                </button>
                            </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_id)">
                                    <span>削除</span>
                                </button>
                            </td>
                            {{-- <td>
                                <ul v-if="item.msg_created_at != null">
                                    <li v-html="displayMsg(item.msg_type,item.new_msg,item.msg_created_at)"></li>
                                </ul>
                                <span v-else>
                                    フォローされました(<time>@{{ item.followed_at }}</time>)
                                </span>
                            </td> --}}
                        </tr>
                        <tr v-show="listFriend.length == 0">
                            <td colspan="6" class="text-center"> データがありません。</td>
                        </tr>
                        </tbody>
                    </table>

                </div>
            </div>
            <section class="line-user-action-pop-up">
                <div style="display: flex; flex-direction: column; justify-content: center; margin-right: 3.8%;">
                    <span style="font-size: 18px; font-weight: bold;">
                        一括友だち操作
                    </span>
                </div>
                <button class="btn btn-sns-line btn-sns-line-primary"
                        style="padding: 8px 0px; width: 120px; margin-right: 2%;"
                        v-on:click="unHiddenLineUsers()">
                    再表示
                </button>
                <button class="btn btn-sns-line btn-sns-line-danger"
                        style="padding: 8px 18px; width: 120px;"
                        v-on:click="deleteMulipleFriendListBlock">
                    削除
                </button>
            </section>
        </section>
    </article>

@endsection
@push('js')
    <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/common/config.js?v={{ config('sns-line.version') }}"></script>
    <script src="/js/friendlist/hiden.js?v={{ config('sns-line.version') }}"></script>
    <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
@endpush