@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="friendBlock">
            <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.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="item.link_my_page" style="font-weight: bold;">@{{ item.name }}</a>
                                    </div>
                                </td>
                                <td style="text-align:left !important;"
                                {{-- v-text="displayScenario(item.scenario_action)" --}}
                                >
                                    <span v-if="item.view_name" v-html="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="unblockLineUser(item.line_id)">
                                        <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>
                        </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="unblockLineUser()">
                    ブロック解除
                </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/block.js?v={{ config('sns-line.version') }}"></script>
    <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
@endpush