@extends('layout.basic.main')
@section('title','友だち情報管理（一覧）')

@push('css')
    <link rel="stylesheet" href="/css/friendlist/style_info.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">

    <style>
        #table_list_template tr th{
            padding: 9px;
            font-weight: bold;
            background-color: #08BF5A !important;
            border: none!important;
        }
        .tmp td .btn {
            width: 80%;
        }
       .cl_default tbody>tr>td{
            padding: 12px 8px!important;
        }
        .tab_folder{
            padding: 13px 4px;
            font-size: 18px;
            display: flex;
            align-items: baseline;
            justify-content: space-between;
        }
        .btn-group:hover .action-broadcast{
            opacity: 1;
            visibility: visible;
            z-index: 100;
            display: block !important;
        }
        .displayAdd{
            opacity: 1;
            visibility: visible;
            z-index: 100;
            display: block;
        }
        .tag_group.active{
            background-color: #f6f6f6 !important;
        }
        .modal-content input[type="submit"], .tag_right .btngroup .tag_right_search input[type="submit"] {
            width: 30%;
            background: #eee;
            border: 1px solid #eee;
            padding: 5px 10px;
            display: inline-block;
            height: 40px;
        }

        .modal-content input[type="text"], .tag_right .btngroup .tag_right_search input[type="text"] {
            width: 70%;
            height: 40px;
        }

        .btn-new-group{
            background-color: #0ebeeb !important;
        }

        .list-i-fol{
            padding: unset;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .fade {
            transform: unset !important;
            animation: unset !important;
        }
        .fade.in {
            transform: unset !important;
            animation: unset !important;
        }
        .modal-content {
            -webkit-animation-name: unset !important;
            -webkit-animation-duration: 0.6s;
            animation-name: unset !important; ;
            animation-duration: unset !important;
        }
        .modal.fade .modal-dialog {
            -webkit-transition: unset !important;
            transition: unset !important;
            -webkit-transform:unset !important;
            -ms-transform: unset !important;
            -o-transform: unset !important;
            transform: unset !important;
        }
        .modal-header{
            border-bottom: unset !important;
        }
        #remove_templates:hover{
            /*background-color: #ff0200 !important;*/
        }

        .popup {
            position: relative;
            display: inline-block;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* The actual popup */
        .popup .popuptext {
            visibility: hidden;
            width: 233px;
            background-color: white;
            color: black;
            border-radius: 6px;
            border: 1px solid #ddd;
            padding: 10px;
            position: absolute;
            z-index: 9999;
            font-size: 14px;
            top: 125%;
            right: -159%;
            margin-left: -80px;
            box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
        }
        .popup .show {
            visibility: visible;
        }
        .btn-cus-a{
            padding: 9px 27px;
            border: 0;
            border-radius: 4px;
            color: white;
            font-weight: bold;
            cursor: pointer;
        }
        .btn-cus-a:hover{
            color: #FFFFFF;
        }
        .col-btn-primary{
            background-color: rgb(87, 153, 219);
            ;
        }
        .box-btn-center{
            display: flex;
            align-items: baseline;
            justify-content: space-between;
        }
        .btn-right-top{
            display: flex;
            align-items: baseline;
        }
        tbody>tr:first-child>td{
            border-top: none !important;
        }
        div,a{
            font-weight: bold;
        }


    </style>
@endpush
@section('content')
    <article class="">
        <div id="loading_overlay" class="loading-overlay text-center" style="display: none">
            <i class="glyphicon glyphicon-refresh spin"></i>
        </div>
        <section class="taglist tmp" id="information_friend" v-cloak>
            <div style="display: flex;align-items: center;justify-content: space-between;">
                <h2 style="font-size: 20px; color: #51595c; font-weight: bold; padding: 10px 10px 10px 0">友だち情報管理</h2>
            </div>

            <p style="margin-bottom: 15px; font-size: 15px; color: #51595c">友だち情報のページや1:1チャットに表示させる情報を追加で登録することができます。</p>
            <div class="tag_separate">
                <div class="tag_left">
                    <div class="row">
                        <div class="col-md-12" style="padding-right: 0">
                            <div class="tab_folder  " >
                                <span style="font-weight: bold">フォルダ</span>
                                <div>
                                    <div class="popup">

                                        <svg v-on:click="showAddGroupPopup" xmlns="http://www.w3.org/2000/svg"
                                             viewBox="0 0 512 512" style="width: 20px; fill: rgba(137,143,144,1) !important;position: absolute;right: 7px;top: -18px;"><path d="M232 344V280H168C154.7 280 144 269.3 144 256C144 242.7 154.7 232 168 232H232V168C232 154.7 242.7 144 256 144C269.3 144 280 154.7 280 168V232H344C357.3 232 368 242.7 368 256C368 269.3 357.3 280 344 280H280V344C280 357.3 269.3 368 256 368C242.7 368 232 357.3 232 344zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z"/></svg>
                                        <div class="popuptext" id="myPopup">
                                            <span>フォルダ名</span>
                                            <div style="padding: 7px 0; display: flex; align-items: flex-end">
                                                    <input type="text" id="cat_txt" v-model="name_group"
                                                           style="width: 79%;height: 32px;padding-left: 3px;border: 1px solid #bbb;border-radius: 4px">
                                                 <span style="font-size: 12px;margin-left: 2px;">@{{ countTex(name_group) }}/15</span>
                                            </div>
                                            <div class="text-center" style="display: flex;align-items: center;justify-content: space-between;">
                                                <button class="btn btn-sns-line btn-sns-line-success btn-sns-line-sm"
                                                        style="width: 82px;background: #08BF5A;"
                                                        v-on:click="addGroup()">決定</button>
                                                 <button  class="btn btn-sns-line btn-sns-line-dark btn-sns-line-sm"
                                                          style="background-color: rgb(125, 145, 149);color: white;"
                                                         v-on:click="closeAddPopup">キャンセル</button>

                                            </div>

                                        </div>
                                    </div>
                                    <i class="fas fa-sort-amount-down-alt"  data-toggle='modal'
                                       data-target='#modalSortFolder' v-on:click="showModalSortFolder()"></i>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="nano-inner" id="nano-inner-group" style="margin-top: 0">
                        <div class="tag_group row"
                             id="group_0"
                             data-id="0"
                             style="padding: 10px 7px"
                             v-bind:class="(group_open == 0)?'active':'folder-close'">
                            <div v-on:click="showGroup(0)" class="display_category row" style="margin-left: 1px;">
                                <div class="col-md-11 list-i-fol" >
                                    <div>未分類 (@{{ count_default }})</div>
                                    <div class="btn-group"  style="padding: unset;">
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="tag_group row"
                             id="group_-1"
                             data-id="-1"
                             style="padding: 10px 7px"
                             v-bind:class="(group_open == -1)?'active':'folder-close'">
                            <div v-on:click="showGroup(-1)" class="display_category row" style="margin-left: 1px;">
                                <div class="col-md-11 list-i-fol" >
                                    <div>基本情報 (4)</div>
                                    <div class="btn-group"  style="padding: unset;">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tag_group row"
                             id="group_-1"
                             data-id="-1"
                             style="padding: 10px 7px"
                             v-bind:class="(group_open == -2)?'active':'folder-close'">
                            <div v-on:click="showGroup(-2)" class="display_category row" style="margin-left: 1px;">
                                <div class="col-md-11 list-i-fol" >
                                    <div>国内住所（5）</div>
                                    <div class="btn-group"  style="padding: unset;">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-for="(category, index) in sortedCategories" class="tag_group row"
                             :id="'group_'+category.id"
                             :data-id="category.id"
                             v-bind:class="(category.id == group_open)?'active':'folder-close'">
                            <div v-on:click="showGroup(category.id)" class="display_category  row" style="margin-left: 1px;">
                                <div class="col-md-11 list-i-fol" >
                                    <div>
                                        @{{ category.name }} (@{{ category.count }})
                                    </div>
                                    <div class="btn-group" style="padding: unset;" :style="(category.id == group_open)?'display:block':'display:none'">
                                        <i class="far fa-ellipsis-h ic-menu" ></i>
                                        <ul class="dropdown-menu action-broadcast"
                                            style="min-width: 113px;left: -89px;top: 0px;">
                                            <li class="focus-pointer" v-on:click="editGroup(category)">
                                                <div style="cursor: pointer">
                                                    フォルダ名変更
                                                </div>
                                            </li>
                                            <li class="focus-pointer" v-on:click="deleteGroup(category.id)">
                                                <div style="cursor: pointer">
                                                    フォルダ削除
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                             </div>
                        </div>
                    </div>
                </div>

                <div class="tag_right" style="margin-top: 20px">
                    <div class="box-btn-center">
                        <div class="">
                            <a v-on:click="showCreateInfo()"  class="w-btn btn-cus-a col-btn-primary"  style="background-color:rgba(87,153,219,1) ; "target="_self"> 新規作成</a>
                        </div>
                        <div class="btn-right-top">
                            <div  >
                                <a v-if="group_open == -1"
                                   style="background-color: rgba(125,145,149,1); color: white; cursor: no-drop"
                                   class="w-btn btn-cus-a btn-sort">並べ替え</a>
                                <a v-else href="" style="background-color: rgba(125,145,149,1); color: white;"
                                   data-toggle="modal" data-target="#modalSortItem"
                                   v-on:click="showModalSortItems()"
                                   data-type="tag" data-id="" data-callback="tag_sorted"
                                   class="w-btn btn-cus-a btn-sort">並べ替え</a>
                            </div>

                            <div>
                                <a v-if="(group_open == 0 && selected == false) || (group_open != 0 && selected == false)"
                                    class="w-btn btn-cus-a btn-sort"
                                    style="background-color: rgb(176, 194, 198);color: white;
                                    cursor: no-drop;
                                     margin-top: 1px;margin-left: 15px;margin-right: 15px; padding: 9px"
                                 > 一括フォルダ変更
                                </a>
                                <a v-else  class="w-btn btn-cus-a btn-sort"
                                    style="background-color: #5799DB;color: white; margin-top: 1px;margin-left: 15px;margin-right: 15px; padding: 9px"
                                    data-toggle='modal'
                                    data-target='#modalMoveFolder'
                                > 一括フォルダ変更
                                </a>
                            </div>
                            <div>
                                <a v-if="(group_open == 0 && selected == false) || (group_open != 0 && selected == false)"
                                   class="w-btn btn-cus-a btn-sort"
                                   style="background-color: rgb(176, 194, 198);color: white;
                                    cursor: no-drop;"
                                > 一括削除
                                </a>
                                <a v-else  class="w-btn btn-cus-a btn-sort"
                                   style="background-color: #F44336;color: white; "
                                   v-on:click="deleteItemsInfo()"
                                > 一括削除
                                </a>
                            </div>
                        </div>
                    </div>
                    <table id="table_list_template" class="table" v-bind:class="group_open == -1 ? 'cl_default':''">
                        <tr style="height: 40px">
                            <th class="checkth" style="width: 41px">
                                <input v-if="group_open != -1 && group_open != -2"  type="checkbox" name="" value="" v-model="selectAll">
                            </th>
                            <th class="text-left" style="width: 20%">作成日</th>
                            <th  class="text-left" style="width: 30%">管理名</th>
                            <th class="text-left" >情報タイプ</th>
                            <th  style="min-width: 10%">回答人数</th>
                            <th style="width: 10%"></th>

                        </tr>
                        <tbody style="border-top: none">
                            <tr v-if="items.length > 0" v-for="(item, index) in items" >
                                <td style="width: 41px">
                                    <input v-if="group_open != -1 && group_open != -2"   type="checkbox" name="check_item[]" :value="item.id" v-model="selected"></td>
                                <td class="text-left"  >
                                    @{{formatDate(item.created_at)}}
                                </td>
                                <td class="text-left">
                                    <a :href="'/basic/friend-information/'+item.id"> @{{item.title}}</a>
                                </td>
                                <td class="text-left" style="width: 200px"> @{{formatDataType(item.type_data)}}</td>
                                <td>
                                    <a :href="'/basic/friend-information/item/'+item.id">@{{item.total_user_has_value}}人</a>
                                </td>
                                <td>
                                    <div class="btn-group" style="padding: unset;">
                                        <i class="far fa-ellipsis-h ic-menu" v-if="group_open != -1 && group_open != -2"></i>
                                        <ul class="dropdown-menu action-broadcast"
                                            style=" min-width: 74px;left: -24px;top: 23px;text-align: center;">
                                            <li class="focus-pointer-item" v-on:click="copyInfo(item.id)">
                                                <div style="cursor: pointer" >
                                                    コピー
                                                </div>
                                            </li>
                                            <li class="focus-pointer-item" v-on:click="deleteItem(item.id)" >
                                                <div style="cursor: pointer;color: #F44336;">
                                                    削除
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            <tr v-if="group_open == 0 && items.length == 0"><td colspan="12">データがありません。</td></tr>
                         </tbody>
                    </table>
                </div>
            </div>
            <div class="modal fade" id="modalSortItem"
                 tabindex="-1" role="dialog"
                 data-backdrop="static"
                 data-keyboard="false"
                 aria-labelledby="modalSortItem">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"
                                    aria-hidden="true" style="opacity: 1;font-size: 27px"
                                    v-on:click="closeModalSortItems()"
                            >
                                <i class="fas fa-times" style="color: rgba(125,145,149,1) !important;"></i></button>
                            <h2 class="text-center"> 【 並べ替え 】</h2>

                        </div>
                        <div class="modal-body scroll-modal">
                            <div class="row mt-item-fol" v-for="(item,index) in arrItemsSort" :data-id="item.id">
                                <div class="col-sm-9 col-sm-offset-1  ">
                                    <div style="padding: 8px; border: 1px solid rgba(205,214,221,1); border-radius: 4px">@{{item.title}}</div>
                                </div>
                                <div class="col-sm-1">
                                    <div class="box-ic-sort">
                                        <i class="far fa-chevron-up "  v-on:click="onUpdate(undefined, index, 'up')"></i>
                                        <i class="far fa-chevron-down " v-on:click="onUpdate(undefined, index, 'down')"></i>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" id="array_sort" value="">
                            <input type="hidden" id="current_position" value="">
                        </div>
                        <div class="text-center">
                            <button type="button" class="btn btn-success btn-choise-folder" v-on:click="sortedItemInfor">保存</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="modalSortFolder"
                 tabindex="-1" role="dialog"
                 data-backdrop="static"
                 data-keyboard="false"
                 aria-labelledby="chatSettingStatus">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"
                                    v-on:click="closeModalSortFolder()" aria-hidden="true" style="opacity: 1;font-size: 27px">
                                <i class="fas fa-times" style="color: rgba(125,145,149,1) !important;"></i></button>
                            <h2 class="text-center"> 【 フォルダ並べ替え 】</h2>

                        </div>
                        <div class="modal-body scroll-modal">
                            <div class="row mt-item-fol" v-for="(item,index) in arrGroupSort" :data-id="item.id">
                                <div class="col-sm-9 col-sm-offset-1  ">
                                    <div style="padding: 8px; border: 1px solid rgba(205,214,221,1); border-radius: 4px">@{{item.name}}</div>
                                </div>
                                <div class="col-sm-1">
                                    <div class="box-ic-sort" >
                                        <i class="far fa-chevron-up"  v-on:click="onUpdateDefaultGroup(undefined, index, 'up')"></i>
                                        <i class="far fa-chevron-down " v-on:click="onUpdateDefaultGroup(undefined, index, 'down')"></i>
                                    </div>

                                </div>
                            </div>
                            <input type="hidden" id="array_sort_fol" value="">
                            <input type="hidden" id="current_position_fol" value="">
                        </div>
                        <div class="text-center">
                            <button type="button" class="btn btn-success btn-choise-folder" v-on:click="sortedFolder">保存</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="modalMoveFolder"
                 tabindex="-1" role="dialog"
                 aria-labelledby="chatSettingStatus">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
                                <i class="fas fa-times" style="color: rgba(125,145,149,1) !important;"></i></button>
                            <h2 class="text-center"> 【 一括フォルダ変更 】</h2>

                        </div>
                        <div class="modal-body">
                            <div class="row " >
                                <div class="col-sm-2 col-sm-offset-1 title-left">
                                    移行先選択
                                </div>
                                <div class="col-sm-8">
                                    <div class="b-select">
                                        <select class="form-control" v-model="folder_move_id">
                                            <option value="0">未分類</option>
                                            <option v-for="(category, index) in sortedCategories" :value="category.id">@{{ category.name }}</option>
                                        </select>
                                        <i class="fal fa-angle-down"></i>
                                    </div>

                                </div>

                            </div>

                        </div>
                        <div class="text-center">
                            <button type="button" class="btn btn-success btn-choise-folder"
                                    v-on:click="moveItems()"
                                    v-bind:class="(group_open == 0 && selected == false) || (group_open != 0 && selected == false)?'disabled':''"
                            >登録</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <input type="hidden" id="folder_cookie"  value="{{$folderCookie}}">
    </article>
@endsection
@push('js')
    <script>
        var token = "{!! csrf_token() !!}";
        var group_id = '{{ $folderCookie }}';
    </script>

    <script type="application/javascript" src="/js/infor_friend/index.js?v={{config("sns-line.version")}}"></script>

@endpush