@extends('layout.basic.main')
@section('title','タグ管理 （一覧）')
@push('css')
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
    <link rel="stylesheet" href="/css/tag/style_v2.css?v={{config('sns-line.version')}}">
    <style>
        body {
            background: #F5F7FA;
        }
        .active {
            background-color: #fbda7b !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 !important;
        }
        .btn-cus-a{
            padding: 9px 27px;
            border: 0;
            border-radius: 4px;
            color: white;
            font-weight: bold;
            cursor: pointer;
        }
        .btn-new-group{
            background-color: #0ebeeb !important;
        }
        .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;
        }
        .tag_group.active{
            background-color: #f6f6f6 !important;
        }
        .list-i-fol{
            padding: unset;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: bold !important;
        }
        #nano-inner-group .tag_group {
            /*padding: 7px !important;*/
            /*border: 1px solid #F2F2F2 !important;*/
            border-radius: 5px;
            margin-bottom: 7px;
            height: 40px;
        }
        #nano-inner-group .tag_group:hover {
            background-color: #f6f6f6 !important;
        }
        .btn-info {
            display: block;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            padding: 5px 10px;
            font-size: 85%;
            background: #4A96B2;
            color: #fff;
            margin-top: 5px;
            border: 0
        }



        #nano-inner-group {
            background-color: #fff
        }

        #nano-inner-group .tag_group {
            /*padding: 5px;*/
            /*border-bottom: solid 1px #dedddd;*/
            margin-left: 2px;
        }
        .btn-group:hover .action-broadcast{
            opacity: 1;
            visibility: visible;
            z-index: 100;
            display: block !important;
        }
        .ic-menu{
            font-size: 25px;
            cursor: pointer
        }
        .focus-pointer {
            cursor: pointer;
            padding: 5px;
        }

        .focus-pointer:hover{
            background-color: #f6f6f6  !important; ;
        }
        .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;
        }
        .group_list i {
            color: rgba(137,143,144,1) !important;
            cursor: pointer;
        }
        #item_vuelist_tag .box-ic-sort i{
            line-height: 12px;
            color: rgba(137,143,144,1);
        }
        .box-ic-sort i{
            line-height: 15px;
            color: rgba(137,143,144,1);
            font-size: 24px;
        }
        .mt-item-fol{
            margin-top: 10px;
        }
        #item_vuelist_tag .btn-choise-folder {
            background: rgba(8,191,90,1);
            width: 140px;
            font-size: 18px !important;
            font-weight: bold;
            border-radius: 50px !important;
            margin-bottom: 25px;
            margin-top: 10px;
        }
        .tbl-tag th{
            padding: 9px;
            font-weight: bold;
            background-color: #08BF5A !important;
            border: none!important;
        }
        .btn{
            font-weight: bold;
        }
        thead tr th{
            padding: 10px !important;
            font-weight: bold;
            background-color: #08BF5A !important;
            border: 0;
        }
        table>tbody>tr>td{
            border: none !important;
            border-bottom: 1px solid #ddd !important;
        }
        .btn-choise-folder{
            background: rgba(8,191,90,1);
            width: 140px;
            font-size: 18px;
            font-weight: bold;
            border-radius: 50px;
            margin-bottom: 25px;
            margin-top: 10px;
        }
        .box-ic-sort i{
            line-height: 15px;
            color: rgba(137,143,144,1);
        }
        .mt-item-fol{
            margin-top: 10px;
        }
        .btn{
            font-weight: bold;
        }

        .btn-right-top{
            display: flex;
            align-items: center;
            float: right;
        }

        .box-ic .ic-menu{
            font-size: 25px;
            cursor: pointer
        }

        .box-ic .action-broadcast{
            min-width: 74px;
            left: -24px;
            top: 23px;
            text-align: center;
        }

        .box-ic:hover .action-broadcast{
            opacity: 1;
            visibility: visible;
            z-index: 100;
            display: block !important;
        }

        .preview-action_content p {
            background-color: #F2F2F2;
            text-align: left !important;
            border-radius: 5px;
            padding: 5px !important;
        }

        .preview-action_content p:not(:first-child) {
            margin-top: 5px;
        }
        .b-select{
            position: relative;
        }
        .b-select i {
            position: absolute;
            right: 9px;
            top: 7px;
            font-size: 22px;
        }
        .title-left {
            background: #7d9195;
            padding: 6px;
            color: white;
            border-radius: 4px;
            /*margin-left: 10px;*/
            text-align: center;
        }

        #item_vuelist_tag .display_tag a:focus {
            color: #337ab7;
        }

        #item_vuelist_tag .focus-pointer-item {
            cursor: pointer;
            padding: 5px;
        }

        #item_vuelist_tag .focus-pointer-item:hover {
            background-color: #f6f6f6 !important;
        }

        #item_vuelist_tag {
            font-weight: bold !important;
        }

        #item_vuelist_tag a {
            font-weight: bold !important;
        }
        table {
            border-collapse: unset !important;
        }

        .query.pagination>.active>a, .query.pagination > .active > a:hover, .query.pagination > .active > a:focus{
            background-color: #08BF5A !important;
            color: white !important;
            border-color: #08BF5A !important;
        }
        #modalAddTagCsv .box-border{
            border: 1px solid #F2F2F2;
            border-radius: 2px;
            padding: 15px;
            margin-left: 20px;
            margin-right: 20px;
        }
        #modalAddTagCsv .cus-file{
            background: #FFFFFF 0% 0% no-repeat padding-box;
            border: 2px dashed #8F9293;
            border-radius: 5px;
            width: 100%;
            padding: 12px;
            text-align: center;
            margin-top: 6px;
            color: #8F9293;
            font-weight: normal;
        }

        #modalAddTagCsv .cus-file input[type="file"] {
            display: none;
        }

        #modalAddTagCsv .cus-file:hover{
            /*opacity: 0.7;*/
        }
        #modalAddTagCsv .btn-upload{
            border: 1px solid rgb(224, 224, 224);
            border-radius: 3px;
            width: 120px;
            text-align: center;
            font-size: 12px;
            margin: 0 auto;
            font-weight: normal;
            padding: 7px;
            margin-bottom: 7px;
        }
       #item_vuelist_tag_v2 select {
            background-image: url(/images/down_2.png) !important;
            background: no-repeat calc(100% - 10px) center;
            background-size: 15px !important;
            padding-right: 15px;
        }
        .modal-filter-action {
            color: #5799DB;
            text-decoration: underline;
            font-weight: 300;
        }
        .box_remove{
            display: grid;
            min-width: 50px;
            text-align: center;
            color: gray;
        }
        .btn-back-md{
            background: #F8F8F8;
            border-color: #F8F8F8;
            margin-right: 20px;
            color: #222222 !important;
            width: 120px
        }
    </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="item_vuelist_tag_v2" v-cloak>
            <div class="header">
                <h2 style="font-size: 18px; font-weight: 600; color: #222222; border-bottom: 1px solid #DDDDDD; padding: 5px 0">タグ管理</h2>
                <p class="base-text" style="padding-top: 5px">様々なトリガーによって友だちにタグ付けを行い、タグごとに絞り込むことでセグメント配信などが可能となる機能です。</p>
{{--                <div style="margin-left: auto;">--}}
{{--                    <a style=" height: 36px; width: 160px; display: flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 300 !important;" href="https://lme.jp/manual/" target="_blank" class="btn btn-sns-line btn-sns-line-lg btn_manual">--}}
{{--                        <img src="/images/material-library-books.png" class="img-fluid" style="padding-right: 5px; height: 13px;">マニュアル--}}
{{--                    </a>--}}
{{--                </div>--}}
            </div>

            <div class="separate" style="display: flex; flex-direction: column; height: calc(100vh - 230px);">
                <div class="tag_separate" style="margin-top: 5px; display: flex; margin-bottom: 20px; flex: 1 1 auto; overflow: hidden;">
                    <div class="sidebar-left" v-show="show_menu_left == 1">
                        <div class="folder_action" style="display: flex; justify-content: space-between; margin-bottom: 15px">
                            <div class="popup" style="width: 50%;">
                                            <span @click="showModalCreateFolder()" style="display: inline-block">
                                                <button class="btn btn-sns-line btn-sns-line-outline-default btn_group_popup"  style="width: 110px; font-weight: 300; padding: 6px 0">
                                                    <i class="far fa-plus" style="color: #222222 !important; padding-right: 5px;"></i>フォルダ追加
                                                </button>
                                            </span>
                                <div class="popuptext" id="myPopup" :class="show_create_folder ? 'show' : ''">
                                    <span class="font-weight-bold">フォルダ名</span>
                                    <div style="padding: 7px 0; display: flex; align-items: flex-end">
                                        <input type="text" id="cat_txt" v-model="folder_name" style="width: 79%;height: 32px;padding-left: 3px;border: 1px solid #bbb;border-radius: 4px; font-weight: bold">
                                        <span style="font-size: 12px;margin-left: 2px;font-weight: bold">@{{ folder_name ? folder_name.length : 0 }}/15</span>
                                    </div>
                                    <div class="text-center" style="display: flex;align-items: center;justify-content: space-between;">
                                        <button class="btn btn-sns-line-success btn-sns-line" style="width: 82px;background: #08BF5A;" @click="createOrUpdateFolder()">決定</button>
                                        <button class="btn btn-sns-line-secondary btn-sns-line" style="padding: 6px;" @click="show_create_folder = false">キャンセル</button>
                                    </div>
                                </div>
                            </div>


                            <button
                                    @click="openModalSortFolder()"
                                    style="width: 110px; font-weight: 300 !important;"
                                    class="btn btn-sns-line btn-sns-line-outline-default btn_modal_sort" >
                                <i class="fa fa-arrows " style="color: #222222 !important; padding-right: 5px;"></i>並べ替え
                            </button>
                        </div>
                        <div class="scrollable" style="overflow-x: hidden; height: calc(-45px + 100%)">
                            <div class="nano-inner" id="nano-inner-group" style="margin-top: 0">
                                <div class="tag_group" id="group_0" data-id="0" style="padding: 10px 7px; border: none; cursor: pointer;" v-bind:class="(folder_active == 0)?'active':'folder-close'">
                                    <div @click="selectedFolder(0, $event)" class="display_category" style="margin-left: 1px;">
                                        <div class="list-i-fol">
                                            <div style="font-size: 14px; color: #222222; font-weight: 300;">未分類 (@{{ count_default }})</div>
                                            <div class="btn-group" style="padding: unset;">
                                                {{-- <i class="far fa-ellipsis-h ic-menu" ></i>--}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div v-for="(category, index) in categories" class="tag_group folder-item"
                                     :id="'group_'+category.id" :data-id="category.id" v-bind:class="(folder_active == category.id)?'active':'folder-close'"
                                     style="border: none; cursor: pointer;" @click="selectedFolder(category.id, $event)">
                                    <div class="display_category row" style="margin-left: 1px;">
                                        <div class="list-i-fol">
                                            <div style="font-size: 14px; color: #222222; font-weight: 300; display: flex" v-if="category.name">
                                                <span style="max-width: 170px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">@{{ category.name }}</span>(@{{ category.count }})
                                            </div>
                                            <div class="btn-group active" style="padding: unset;    background: unset !important; right: 20px" :style="(category.id == folder_active)?'display:block':'display:none'">
                                                <i class="far fa-ellipsis-v ic-menu"></i>
                                                <ul class="dropdown-menu action-broadcast" style="font-weight: 500; color: #222222;">
                                                    <li class="focus-pointer" @click.stop="showModalEditFolder(category.id, category.name)">
                                                        <div style="cursor: pointer;">
                                                            <i class="fal fa-edit"></i>
                                                            名称変更
                                                        </div>
                                                    </li>
                                                    <li class="focus-pointer" @click.stop="confirmDeleteFolder(category.id, index)">
                                                        <div style="cursor: pointer">
                                                            <i class="fal fa-trash-alt"></i>
                                                            フォルダ削除
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
{{--                    <div class="tag_temp_left_sm" v-if="show_menu_left == 0"></div>--}}
                    <div class="tag_temp_right">
                        <div class="box-btn-center">
                            <div>
                                <button type="button" @click="openModalCreateTag()" class="btn btn-sns-line btn-sns-line-primary btn_create_temp" style="width: 110px;">
                                    <i class="far fa-plus" style="color: #FFFFFF !important; padding-right: 5px;"></i>新規作成
                                </button>
                                <button type="button" @click="openModalAddTagCSV()" class="btn btn-sns-line btn-sns-line-primary btn_create_temp" style="background-color: #08BF5A; width: 125px;">
                                    <i class="far fa-plus" style="color: #FFFFFF !important; padding-right: 5px;"></i>CSV一括追加
                                </button>
                            </div>
                            <div class="d-flex align-items-center">
                                <button type="button" href="" id="btn_sort_event"
                                        style="color: #222222 !important;; font-weight: 300 !important; margin-right: 10px"
                                        @click="openModalSortTag()"
                                        class="btn btn-sns-line btn-sns-line-outline-default btn_sort_temp">
                                    <i class="fa fa-arrows " style="color: #222222 !important; padding-right: 5px;"></i>並べ替え
                                </button>
                                <div class="btn-right-top gr-search" style="position: relative;align-items: center;">
                                    <i class="far fa-search"
                                       @click="is_show_search = !is_show_search"
                                       style="color: #DDDDDD !important; font-size: 15px; width: 40px; height: 40px; display: flex;align-items: center; justify-content: center"></i>
                                    <input type="text" @keyup.enter="searchKeyword()" class="form-control search_for_temp" v-model="query.keyword"
                                           placeholder="タグを検索"
                                           v-if="is_show_search"
                                           style="padding: 0 35px 2px 0px;
                                                  height: 38px;
                                                  border: none;
                                                  box-shadow: none;
                                                  width: 250px;
                                                  font-size: 13px;">

                                    <img @click="clearSearch" v-show="query.keyword"
                                         style="width: 15px;
								     transform: translateY(-50%);
									top: 50%;
									right: 10px;
									position: absolute;
									cursor: pointer;
									width: 20px;"
                                         src="/images/icon-clear-search.png">
                                </div>
                            </div>
                        </div>
                        <div class="d-flex" style="justify-content: end">

                        </div>
                        <div class="table-responsive table-responsive-list-template" style="max-height: calc(-90px + 100%)">
                            <div>
                                <div class="wrap-scroll-table">
                                    <table id="table_list_tags" style="margin-top: 0">
                                        <thead style="border-radius: 5px; background: unset">
                                            <tr style="border-radius: 5px;">
                                                <th class="checkth" style="border-radius: 4px 0px 0px 4px;">
                                                    <label class="c-checkbox">
                                                        <input type="checkbox" name="" value="" v-model="selectAll">
                                                        <span class="checkmark"></span>
                                                    </label>
                                                </th>
                                                <th class="btnth" style="width: 230px">
                                                    <div style="display: flex;">
                                                        管理名
                                                        <div class="sort" style="display: grid; position: relative; bottom: 4px; margin-left: 5px">
                                                            <i class="fal fa-angle-up" @click="sort('name', 'ASC')" style="font-size: 12px; color: #222222; position: relative; top: 3px; font-weight: bold; cursor: pointer"></i>
                                                            <i class="fal fa-angle-down" @click="sort('name', 'DESC')" style="font-size: 12px; color: #222222; font-weight: bold; cursor: pointer"></i>
                                                        </div>
                                                    </div>
                                                </th>
                                                <th style="width: 170px; padding-left: 40px !important;">アクション設定</th>
                                                <th class="siteth" style="width: 170px; padding-left: 40px !important;">人数制限</th>
                                                <th class="siteth" style="padding-left: 40px !important; width: 150px">
                                                    <div style="display: flex;">
                                                        作成日
                                                        <div class="sort" style="display: grid; position: relative; bottom: 4px; margin-left: 5px">
                                                            <i class="fal fa-angle-up" @click="sort('created_at', 'ASC')" style="font-size: 12px; color: #222222; position: relative; top: 3px; font-weight: bold; cursor: pointer"></i>
                                                            <i class="fal fa-angle-down" @click="sort('created_at', 'DESC')" style="font-size: 12px; color: #222222; font-weight: bold; cursor: pointer"></i>
                                                        </div>
                                                    </div>
                                                </th>
                                                <th class="siteth" style="padding-left: 40px !important; padding-right: 20px !important; width: 150px">
                                                    <div style="display: flex;">
                                                        最終編集日
                                                        <div class="sort" style="display: grid; position: relative; bottom: 4px; margin-left: 5px">
                                                            <i class="fal fa-angle-up" @click="sort('updated_at', 'ASC')" style="font-size: 12px; color: #222222; position: relative; top: 3px; font-weight: bold; cursor: pointer"></i>
                                                            <i class="fal fa-angle-down" @click="sort('updated_at', 'DESC')" style="font-size: 12px; color: #222222; font-weight: bold; cursor: pointer"></i>
                                                        </div>
                                                    </div>
                                                </th>
                                                <th class="siteth" style="width:170px; border-radius: 0 4px 4px 0; text-align: center !important;">友だち数</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="(item, index) in tags">
                                            <td class="input_check" style="padding: 10px">
                                                <label class="c-checkbox" @click.stop>
                                                    <input type="checkbox" name="check_item[]" :value="item.id"
                                                           v-model="selected"
                                                    >
                                                    <span class="checkmark"></span>
                                                </label>
                                            </td>
                                            <td style="padding-left: 10px">
                                                <div class="text" @click="window.location.href = '/basic/tag/edit-tag/' + item.id">
                                                    <p class="full-text" v-if="item.name.length > 15">@{{ item.name }}</p>
                                                    <p class="trunc-text" style="font-weight: 600; font-size: 14px; color: #5799DB; cursor: pointer">@{{ truncText(item.name) }}</p>
                                                </div>
                                            </td>
                                            <td style="padding-left: 40px">
                                                <a href="#" class="modal-filter-action" @click="openModalFilter(item.action_id)" v-if="isAction(item)">アクション設定あり</a>
                                                <span v-else>アクション設定なし</span>
                                            </td>
                                            <td style="padding-left: 40px">
                                                <span v-if="item.is_limit">
                                                    <span v-if="item.limit <= item.count_user_tag" style="color: #F44336">@{{ item.count_user_tag + '/' + item.limit }} 人（上限到達）</span>
                                                    <span v-else>@{{ item.count_user_tag + '/' + item.limit }} 人</span>
                                                </span>
                                                <span v-else>人数制限なし</span>
                                            </td>
                                            <td style="padding-left: 40px">@{{ moment(item.created_at).format('YYYY/MM/DD') }}</td>
                                            <td style="padding-left: 40px; padding-right: 20px">@{{ item.updated_at ? moment(item.updated_at).format('YYYY/MM/DD') : moment(item.created_at).format('YYYY/MM/DD')}}</td>
                                            <td style="padding: 10px">
                                                 <div class="d-flex justify-content-between align-items-center">
                                                     <div class="display_tag" style="flex: 1 1 auto; text-align: right; margin-right: 10px;">
                                                         <span @click.stop="showFriendhasTag(item)" style="cursor: pointer">
                                                             <span>@{{ item.count_user_tag }}</span>
                                                             <span style="font-size: 10px">人</span>
                                                         </span>
                                                    </div>
                                                     <div class="d-flex align-items-center" style="flex: 0 0 auto;">
                                                         <div class="d-flex justify-content-center align-items-center show-tag" style="cursor: pointer" @click.stop="showFriendhasTag(item)">表示</div>
                                                         <div class="btn-group" style="padding: unset;">
                                                             <i class="far fa-ellipsis-h ic-menu" style="font-size: 20px; color: #E0E0E0; margin-left: 11px"></i>
                                                             <ul class="dropdown-menu action-broadcast" style=" min-width: 74px;  text-align: center;">
                                                                 <li class="focus-pointer-item" @click.stop="cloneTag(item.id)">
                                                                     <div style="font-weight: 300; color: #222222 !important;">
                                                                         <i class="far fa-copy"></i>
                                                                         コピー
                                                                     </div>
                                                                 </li>
                                                                 <li class="focus-pointer-item" @click.stop="deleteTags([item.id])">
                                                                     <div style="cursor: pointer; font-weight: 300; color: #222222 !important;">
                                                                         <i class="fal fa-trash-alt"></i>
                                                                         削除
                                                                     </div>
                                                                 </li>
                                                             </ul>
                                                         </div>
                                                     </div>
                                                 </div>
                                            </td>
                                        </tr>
                                        <tr v-if="tags.length == 0" class="non-data-row">
                                            <td colspan="7" style="border-left: none !important">タグが登録されていません</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="action_separate">
                    <div class="tag_action_left text-center" style="width: 250px;" v-if="show_menu_left == 1">
                        <a class="d-flex justify-content-center align-items-center" style="text-decoration: none; color: #222222; cursor: pointer; font-size: 14px; font-weight: 300;" @click="openTabContent(0)">
                            <i class="far fa-caret-square-left" style="color: #222222 !important; padding-right: 10px; font-size: 20px"></i>フォルダを非表示
                        </a>
                    </div>
                    <div class="" v-if="show_menu_left == 0">
                        <div class="tag_action_left_sm" style="font-weight: bold; color: #222222;" @click="openTabContent(1)">
                            <i class="far fa-caret-square-right" style="color: #666666 !important; cursor: pointer; font-size: 20px"></i>
                        </div>
                    </div>
                    <div class="tag_right tag_action_right">
                        <div class="text-center" style="line-height: 80px;">
                            <button class="btn btn-sns-line btn-sns-line-outline-default btn_folder_change" style="font-weight: 300; font-size: 14px"
                                    @click="showModalMoveTemplate()" :class="{'active': selected.length > 0}" :disabled="selected.length == 0">
                                <i class="fa fa-folder" style="padding-right: 5px; color: #888888"></i>一括フォルダ変更
                            </button>
                            <button class="btn btn-sns-line btn-sns-line-outline-default btn_bulk_delete" style="font-weight: 300; font-size: 14px"
                                    @click="deleteTags(selected)" :class="{'active': selected.length > 0}" :disabled="selected.length == 0">
                                <i class="fal fa-trash-alt" style="padding-right: 5px; color: #888888"></i>一括削除
                            </button>
                            <a style="font-weight: 300; font-size: 14px; text-decoration: underline; color: #222222; cursor: pointer; margin-left: 10px" href="{{ route('tags.removed') }}">削除したアイテム</a>
                        </div>
                        <div class="d-flex align-items-center">
                            <nav style="margin-right: 20px; padding-top: 5px;" class="text-center" v-if="query.pagination.total > query.pagination.per_page">
                                <ul class="pagination">
                                    <li v-if="query.pagination.current_page > 1">
                                        <a href="#" aria-label="Previous" @click.prevent="changePage(query.pagination.current_page - 1)" style="font-size: 14px;">
                                            <span aria-hidden="true" style="color:#08BF5A"><i class="fas fa-chevron-left" style="color: #DDDDDD !important;"></i></span>
                                        </a>
                                    </li>
                                    <li v-for="page in pagesNumber()" :class="{ 'active' : page == query.pagination.current_page }">
                                        <a href="#" @click.prevent="changePage(page)" style="font-size: 14px;">@{{ page }}</a>
                                    </li>
                                    <li v-if="query.pagination.current_page < query.pagination.last_page">
                                        <a href="#" aria-label="Next" @click.prevent="changePage(query.pagination.current_page + 1)" style="font-size: 14px;">
                                            <span aria-hidden="true" style="color:#08BF5A"><i class="fas fa-chevron-right" style="color: #DDDDDD !important;"></i></span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                            <div class="limit ml-4 select-container">
                                <div class="dropdown ml-4">
                                    <a class="btn btn-secondary dropdown-toggle d-flex align-items-center" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        @{{query.pagination.per_page}}/page<i class="fal fa-chevron-down" style="color:#E0E0E0 ; padding-right: 4px; position: absolute; right: 5px"></i>
                                    </a>
                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                        <a class="dropdown-item" href="#" @click.prevent="changeLimit(10)">10/page</a>
                                        <a class="dropdown-item" href="#" @click.prevent="changeLimit(20)">20/page</a>
                                        <a class="dropdown-item" href="#" @click.prevent="changeLimit(50)">50/page</a>
                                        <a class="dropdown-item" href="#" @click.prevent="changeLimit(100)">100/page</a>
                                    </div>
                                </div>
                            </div>
                        </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" style="padding-bottom: 0;">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" v-on:click="closeModalSortFolder()"
                                    style="opacity: 1;font-size: 27px; border-radius: 5px;">
                                <i class="fas fa-times" style="position: relative; bottom: 0px;"></i>
                            </button>
                        </div>
                        <div class="text-center" style="padding-bottom: 7px;">
                            <h2 class="text-center font-weight-bold" style="font-size: 20px; color: #222222;"> 【 フォルダ並べ替え 】</h2>
                        </div>
                        <div class="modal-body scroll-modal sort-folder" style="padding-bottom: 50px;">
                            <div class="row mt-item-fol box-action-sort" v-for="(item,index) in arrGroupSort" :data-id="item.id" :key="item.id">
                                <div class="col-sm-10 col-sm-offset-1  ">
                                    <div id="item_change_place" class="item_sort_place">
                                        <div class="items_names" style="margin-right: 20px">
                                            <i class="fa fa-bars item_icon"></i>
                                            <span>@{{item.name}}</span>
                                        </div>
                                        <div class="btn-group"
                                             @click.stop="toggleShowPopup($event)"
                                             style="padding: unset; margin: auto; margin-right: 0;">
                                            <i class="far fa-ellipsis-h ic-menu" style="font-size: 20px; position: relative;"></i>
                                            <ul class="dropdown-menu action-broadcast" id="action-broadcast-show"
                                                style=" min-width: 140px; left: -120px; top: -22px; text-align: center;"
                                            >
                                                <li class="focus-pointer-item">
                                                    <button class="focus_sort_item" v-on:click="onUpdateDefaultGroup(undefined, index, 'top')"
                                                            :disabled="index == 0" >
                                                        <i class="fa fa-sort-numeric-up" style="padding-right: 15px;"></i>一番上に移動
                                                    </button>
                                                </li>
                                                <li class="focus-pointer-item">
                                                    <button class="focus_sort_item" v-on:click="onUpdateDefaultGroup(undefined, index, 'bottom')"
                                                            :disabled="index == ( arrGroupSort.length - 1 )">
                                                        <i class="fa fa-sort-numeric-down" style="padding-right: 15px;"></i>一番下に移動
                                                    </button>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" id="array_sort_fol" value="">
                            <input type="hidden" id="current_position_fol" value="">
                        </div>
                        <div class="text-center" style="margin-bottom: 20px;">
                            <button type="button" class="btn btn-sns-line btn-sns-line-success btn_temp_create_modal" v-on:click="sortedFolder"
                                    style=" height: 40px; width: 140px; font-size: 14px;">変更を保存</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="modalSortTags" 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" style="padding-bottom: 0;">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" v-on:click="closeModalSortTags()"
                                    style="opacity: 1;font-size: 27px; border-radius: 5px;">
                                <i class="fas fa-times" style="position: relative; bottom: 0px;"></i>
                            </button>
                        </div>
                        <div class="text-center" style="padding-bottom: 7px;">
                            <h2 class="text-center font-weight-bold" style="font-size: 20px; color: #222222;">【 並べ替え 】</h2>
                        </div>
                        <div class="modal-body scroll-modal sort-tag" style="padding-bottom: 50px;">
                            <div class="row mt-item-fol box-action-sort" v-for="(item,index) in arrItemsSort" :data-id="item.id" :key="item.id">
                                <div class="col-sm-10 col-sm-offset-1  ">
                                    <div id="item_change_place" class="item_sort_place">
                                        <div class="items_names" style="margin-right: 20px">
                                            <i class="fa fa-bars item_icon"></i>
                                            <span>@{{item.name}}</span>
                                        </div>
                                        <div class="btn-group"
                                             style="padding: unset; margin: auto; margin-right: 0;">
                                            <i class="far fa-ellipsis-h ic-menu" style="font-size: 20px; position: relative;"></i>
                                            <ul class="dropdown-menu action-broadcast" id="action-broadcast-show"
                                                style=" min-width: 140px; left: -120px; top: -22px; text-align: center;"
                                            >
                                                <li class="focus-pointer-item">
                                                    <button class="focus_sort_item" v-on:click="onUpdateDefaultTag(undefined, index, 'top')"
                                                            :disabled="index == 0" >
                                                        <i class="fa fa-sort-numeric-up" style="padding-right: 15px;"></i>一番上に移動
                                                    </button>
                                                </li>
                                                <li class="focus-pointer-item">
                                                    <button class="focus_sort_item" v-on:click="onUpdateDefaultTag(undefined, index, 'bottom')"
                                                            :disabled="index == ( arrItemsSort.length - 1 )">
                                                        <i class="fa fa-sort-numeric-down" style="padding-right: 15px;"></i>一番下に移動
                                                    </button>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" id="array_sort_tag" value="">
                            <input type="hidden" id="current_position_tag" value="">
                        </div>
                        <div class="text-center" style="margin-bottom: 20px;">
                            <button type="button" class="btn btn-sns-line btn-sns-line-success btn_temp_create_modal" v-on:click="sortedTags"
                                    style=" height: 40px; width: 140px; font-size: 14px;">変更を保存</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="modalMoveFolder" 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" aria-hidden="true" style="opacity: 1;font-size: 27px; border-radius: 5px;">
                                <i class="fas fa-times" style="position: relative;"></i></button>
                            <h2 class="text-center font-weight-bold"> 【 一括フォルダ変更 】</h2>

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

                                </div>

                            </div>

                        </div>
                        <div class="text-center" style="margin: 15px 0; padding-bottom: 20px;">
                            <button type="button" class="btn btn-sns-line-success btn-sns-line" v-on:click="moveItems()" v-bind:class="(folder_active == 0 && selected == false) || (folder_active != 0 && selected == false)?'disabled':''">登録</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="modalCreateTags" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="chatSettingStatus" style="background: rgb(136 136 136 / 64%)">
                <div class="modal-dialog" role="document" style="top: 50%; transform: translateY(-50%) !important; margin-top: 0; width: 550px">
                    <div class="modal-content" style="min-height: 500px">
                        <div class="d-flex justify-content-between align-items-center" style="padding: 10px 25px">
                            <h2 style="font-size: 18px; line-height: 24px; font-weight: 600 !important; color: #222222">タグ新規作成</h2>
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px; border-radius: 5px;">
                                <i class="far fa-times"></i></button>
                        </div>
                        <div class="modal-body" style="display: flex;  flex-direction: column; padding: 15px 25px 20px 25px">
                            <div style="width: 400px;">
                                <div class="d-flex justify-content-start align-items-center" style="margin-bottom: 30px">
                                    <div style="font-size: 14px; line-height: 12px; color: #222222; font-weight: 600; width: 100px;">フォルダ</div>
                                    <div style="width: 250px">
                                        <div class="b-select">
                                            <select class="form-control font-weight-bold text-center" style="font-size: 12px; color: #222222; border: 1px solid #DDDDDD" v-model="folder_id">
                                                <option value="0">未分類</option>
                                                <option v-for="(category, index) in categories" :value="category.id">@{{ category.name }}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <div class="d-flex justify-content-start align-items-center" style="margin-bottom: 20px">
                                        <p style="font-size: 14px; font-weight: 600; color: #222222; width: 100px">タグ管理名</p>
                                        <p style="font-size: 14px; font-weight: 300; color: #222222">同時に20個までタグが作成できます</p>
                                    </div>
                                    <div class="box-input-tags scrollable">
                                        <div class="item" v-for="(tagItem, index) in newTags">
                                            <div class="d-flex justify-content-start align-items-center justify-content-between">
                                                <div class="d-flex align-items-center" style="flex: 0 0 350px; ">
                                                    <label for="" style="width: 20px; font-size: 14px; font-weight: 500">@{{ index + 1 }}</label>
                                                    <div class="">
                                                        <input type="text"
                                                               v-model.trim="tagItem.name"
                                                               v-validate="'required|max:50'"
                                                               :name="'tag-' + index"
                                                               data-vv-as="管理名"
                                                               placeholder="タグ管理名を入力してください"
                                                        >
                                                    </div>
                                                </div>
                                                <div class="box_remove" style="">
                                                    <span style="height: 22px" >
                                                        <i v-if="newTags.length > 1" @click="removeItemTag(index)" style=" cursor: pointer;" class="fas fa-times-circle"></i>
                                                    </span>
                                                    <span class="count-text" style="flex: 0 0 auto;">@{{ tagItem.name.length }}/50</span>
                                                </div>

                                            </div>
                                            <p class="error" v-if="errors.has('tag-' + index)">@{{ errors.first('tag-' + index) }}</p>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center" style="margin: 15px 0; padding: 0 25px 20px 25px">
                            <button class="btn-sns-line btn-sns-line-outline-default btn_group_popup add-tag"
                                    :class="{ 'cursor-not-allow' : newTags.length >= 20 }"
                                    @click="addTag()"><i class="far fa-plus" style="padding-right: 5px;"></i>タグを追加</button>
                            <button @click="createMultipleTags()" type="button" class="btn-save">保存</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="modalConfirmRemoveTags" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="chatSettingStatus" style="background: rgb(136 136 136 / 64%)">
                <div class="modal-dialog" role="document" style="top: 50%; transform: translateY(-50%) !important; margin-top: 0; width: 550px">
                    <div class="modal-content" style="border-radius: 10px">
                        <div class="d-flex justify-content-between align-items-center" style="padding: 15px 25px">
                            <h2 style="font-size: 18px; line-height: 24px; font-weight: 600 !important; color: #222222">
                                <i class="fal fa-exclamation-circle" style="color: #F44336; transform: rotate(180deg)"></i> データを削除してもよろしいですか？</h2>
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px; border-radius: 5px;">
                                <i class="far fa-times"></i></button>
                        </div>
                        <div class="modal-body" style=" padding: 0px 25px 20px 25px">
                            <div style="color: #222222; font-size: 14px">
                                削除したデータは「削除したアイテム」より90日間復元が可能です。<br>
                                削除する場合、友だちに登録されているこのアイテムに関する情報が<br>
                                全て削除されますのでご注意ください。
                            </div>
                        </div>
                        <div class="d-flex align-items-center " style="margin: 15px 0; padding: 0 25px 20px 25px;  justify-content: end;">
                            <button class="btn btn-sns-line btn-sns-line-outline-default btn-back-md" data-dismiss="modal"  type="button" style="border-radius: 5px; font-size: 14px" >キャンセル</button>
                            <button @click="deleteTagsAction()" type="button" class="btn btn-sns-line btn-sns-line-danger" style="width: 120px; border-radius: 5px; font-size: 14px">削除する</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="modalConfirmRemoveFolder" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="chatSettingStatus" style="background: rgb(136 136 136 / 64%)">
                <div class="modal-dialog" role="document" style="top: 50%; transform: translateY(-50%) !important; margin-top: 0; width: 550px">
                    <div class="modal-content" style="border-radius: 10px">
                        <div class="d-flex justify-content-between align-items-center" style="padding: 15px 25px">
                            <h2 style="font-size: 18px; line-height: 24px; font-weight: 600 !important; color: #222222">
                                <i class="fal fa-exclamation-circle" style="color: #F44336; transform: rotate(180deg)"></i> データを削除してもよろしいですか？</h2>
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px; border-radius: 5px;">
                                <i class="far fa-times"></i></button>
                        </div>
                        <div class="modal-body" style=" padding: 0px 25px 20px 25px">
                            <div style="color: #222222; font-size: 14px">
                                フォルダ内のアイテムは全て「未分類」フォルダに移行されます。
                            </div>
                        </div>
                        <div class="d-flex align-items-center " style="margin: 15px 0; padding: 0 25px 20px 25px;  justify-content: end;">
                            <button class="btn btn-sns-line btn-sns-line-outline-default btn-back-md" data-dismiss="modal" style="border-radius: 5px; font-size: 14px" type="button" >キャンセル</button>
                            <button @click="deleteFolder()" type="button" class="btn btn-sns-line btn-sns-line-danger" style="width: 120px; border-radius: 5px; font-size: 14px">削除する</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="modalAddTagCsv"
                 tabindex="-1" role="dialog"
                 data-backdrop="static"
                 data-keyboard="false"
                 aria-labelledby="chatSettingStatus">
                <div class="modal-dialog" role="document">
                    <div class="modal-content" style="max-height: 92vh;overflow: auto;">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
                                <span class="line-icon line-icon-close"><i class="fas fa-times" style="color:#7D9195; background-color: unset"></i></span>
                            </button>
                            <h2 class="text-center" style="font-weight: bold !important"> CSV一括追加</h2>

                        </div>
                        <div class="modal-body" style="padding-top: 0">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="box-border">
                                        <div>
                                            <span>① 編集用CSVをダウンロード</span>
                                            <button class="btn btn-sns-line btn-sns-line-primary "
                                                    v-on:click="exportCsvEdit"
                                                    style="font-size: 13px;padding: 8px 13px;margin-left: 32px;"> ダウンロード
                                                <i class="fas fa-arrow-to-bottom" style="color: white;
                                                    background: unset;
                                                    margin-left: 10px;"> </i></button>

                                        </div>
                                        <div style="background: #F8F8F8; padding: 15px; margin-top: 20px; font-size: 13px; font-weight: normal">
                                            ・インポートするCSVは必ず上記の編集用CSVを利用してください <br>
                                            ・編集用CSVの1行目は絶対に編集しないでください<br>
                                            ・タグ名が重複している場合は、登録されません<br>
                                            ・1度に追加できるタグ数は200個までです

                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="row" style="margin-top: 15px">
                                <div class="col-sm-12">
                                    <div class="box-border">
                                        <div>② タグを新規追加するフォルダを選択</div>
                                        <select class="form-control my_class text-center" style="border: 1px solid #E8E8E8; width: 50%; margin-top: 10px ;color: #8F9293"
                                                v-model="folder_active_csv">
                                            <option value="0">未分類</option>
                                            <option v-for="(category, index) in categories" :value="category.id">@{{ category.name }}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row" style="margin-top: 15px">
                                <div class="col-sm-12">
                                    <div class="box-border">
                                        <div>③ CSVアップロード</div>
                                        <label for="" class="cus-file" style="cursor: pointer" id="file_preview">
                                            <input type="file" name="file_csv"
                                                   id="media_client_dropinput"
                                                   ondragover="drag()"
                                                   v-on:change="openUploadFile(event)"
                                                   accept=".csv"
                                            >
                                            <div class="text-center" style="font-size: 13px; font-weight: normal ">ここにファイルをドロップ</div>
                                            <div style="font-size: 12px; margin: 7px;font-weight: normal">または</div>
                                            <div class="btn-upload" style="">
                                                PCから選択
                                            </div>
                                            <p id="name_file"></p>
                                        </label>

                                    </div>
                                </div>
                            </div>



                        </div>
                        <div class="text-center" style="margin-bottom: 30px">
                            <button type="button" v-on:click="saveAddTagCsv" style="padding: 12px 33px !important;" class="btn btn-sns-line btn-sns-line-success btn-sns-line-lg">アップロードしたデータを追加</button> <br>
                            <button type="button" class="btn btn-sns-line btn-sns-line-secondary"
                                    v-on:click="closeModalAddTag"
                                    style="background-color: #E0E0E0; color: #535657 !important; margin-top: 15px; width: 110px">戻る</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </article>
    <input type="hidden" id="folder_cookie"   value="{{$folderCookie}}" >
    @include('layout.modal_setting.modal_select_action')
    @include('layout.modal_filter_v2')
@endsection
@push('js')
    <script>
        route_add_item = "{!! route('addItemReply') !!}";
        bot_id = "{!! \Session::get('current_bot_id') !!}"
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#checkAll').change(function () {
                var checkboxes = $(this).closest('form').find(':checkbox');
                checkboxes.prop('checked', $(this).is(':checked'));
            })
        });
    </script>

    <script src="/js/form_answer/vee-validate.rc7.min.js"></script>
    <script src="/js/form_answer/vee-validate_ja.min.js"></script>
    <script src="/js/validate/config.js"></script>
    <script src="/js/tag/index_v2.js?v={{config('sns-line.version')}}"></script>
    <script>
        var params = [];
        var basic_home_new = [];
    </script>
    <script>
        @if($errors->any())
        alert('{{$errors->first()}}');
        @endif

        function saveSettingAction() {
            setting_action.saveAction();
        }
    </script>

    <script src="/js/friendlist/modal_filter_v2.js?v={{ config('sns-line.version') }}"></script>

@endpush