@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.css?v={{config('sns-line.version')}}">
    <style>
        .active {
            background-color: #fbda7b !important;
        }
        .tab_folder{
            padding-bottom: 14px;
            margin-top: 4px;
            font-size: 18px;
            display: flex;
            align-items: baseline;
            justify-content: space-between;
        }

        .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: 4px;
            margin-bottom: 7px;
        }
        #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;
        }

        .pagination>.active>a, .pagination > .active > a:hover, .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;
        }
    </style>
@endpush
@section('content')
    <div class="container-fluid">
        <div class="row" id="item_vuelist_tag" v-cloak>
            <div id="loading_overlay" class="loading-overlay text-center" style="display: none">
                <i class="glyphicon glyphicon-refresh spin"></i>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="row">
                    <div class="row">
                        <div class="col-sm-12">
                            <h2 style="font-size: 20px; color: #222222; font-weight: bold !important; padding: 10px 10px 30px 0">タグ管理 </h2>
                            <div id="item_vuelist" v-cloak style="background-color: #FFFFFF">
                                <div class="group_list" style="padding-right: 17px;width: 20%">
{{--                                    <div class="group_list_head">--}}
{{--                                        <div class="add_group btn btn-sm btn-success">--}}
{{--                                            <i class="glyphicon glyphicon-plus"></i> 新しいフォルダー--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
                                    <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>--}}
                                                {{--                                        <i class="fa-regular fa-circle-plus"  ></i>--}}
                                                <i class="fas fa-plus-circle hover-icon-action" style="font-weight: 400;font-size: 21px" v-on:click="showAddGroupPopup"></i>
                                                <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-success btn-sm"
                                                                style="width: 82px;background: #08BF5A;"
                                                                v-on:click="addGroup()">決定</button>
                                                        <button class="btn btn-secondary btn-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 hover-icon-action"  data-toggle='modal'
                                               data-target='#modalSortFolder' v-on:click="showModalSortFolder()"></i>
                                        </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;">
                                                        {{--                                        <i class="far fa-ellipsis-h ic-menu" ></i>--}}
                                                    </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: 20px;">
                                                            <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>
                                <form id="form-list-tag" action="{{route('deleteTag')}}" method="post">
                                    {{csrf_field()}}
                                    <div class="primary_list" style="width: 80%;margin-left: 20%;border-bottom: unset">
                                        <div class="primary_list_head" style="background-color: #FFFFFF !important;">
                                            <div class="btn_wrapper" style="width: 100%">
                                                <a href="{{route('addTag')}}" style="font-weight: bold !important">
                                                    <button type="button" class="btn btn-sns-line btn-sns-line-primary" style="min-width: 120px;background-color:rgba(87,153,219,1); border-color:rgba(87,153,219,1); min-height: 42px;" ><span>新規作成</span>
                                                    </button>
                                                </a>
                                                <button type="button"  class="btn btn-sns-line btn-sns-line-success"
                                                    style="min-width: 120px; min-height: 41px;"
                                                        v-on:click="showModalAddTagCsv"
                                                         data-toggle='modal'
                                                         data-target='#modalAddTagCsv'>
                                                    CSV一括追加
                                                </button>

                                                <div class="btn-right-top">
                                                    <div>
                                                        <button type="button" data-toggle="modal" data-target="#myModal"
                                                                data-type="tag" data-id="" data-callback="tag_sorted"
                                                                class="btn btn-sns-line btn-sns-line-dark btn-sort" style="min-width: 120px;background-color: rgba(125,145,149,1); color: white; outline: none; min-height: 42px">
                                                            並べ替え
                                                        </button>

                                                    </div>

                                                    <div style="margin-left: 10px">
                                                        <button type="button"
                                                        v-if="(group_open == 0 && selected == false) || (group_open != 0 && selected == false)"
                                                        class="btn btn-sns-line btn-sns-line-secondary btn-move-folder" disabled
                                                        style="min-width: 120px;padding-right: 15px; padding-left: 15px; min-height: 42px;"
                                                        > 一括フォルダ変更
                                                        </button>
                                                        <button type="button" v-else  class="btn btn-sns-line btn-sns-line-primary"
                                                        data-toggle='modal' style="min-width: 120px;padding-right: 15px; padding-left: 15px; min-height: 42px"
                                                        data-target='#modalMoveFolder'
                                                        > 一括フォルダ変更
                                                        </button>
                                                    </div>
                                                    <div style="margin-left: 10px">
                                                        <button v-if="selected.length > 0"
                                                                class="btn btn-sns-line btn-sns-line-danger"
                                                                style="min-width: 120px;padding-right: 15px; padding-left: 15px; min-height: 42px"
                                                                onclick="return window.confirm('削除しますが、宜しいですか？');"
                                                                type="submit">
                                                            一括削除
                                                        </button>
                                                        <button type="button" v-else
                                                        class="btn btn-sns-line btn-sns-line-secondary" style="min-width: 120px;padding-right: 15px; padding-left: 15px; min-height: 42px" disabled
                                                        > 一括削除
                                                        </button>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                        <div class="vuelist-nanowrapper">
                                            <div class="nano has-scrollbar" style="height: unset; overflow: unset;">
                                                <div tabindex="0" style="right: -17px;">
                                                    <div class="nano-inner">
                                                        <table border="1" style="margin-bottom: 0px;">
                                                            <thead>
                                                            <tr>
                                                                <th style="min-width: 44px;width: 6%;padding: 2px 10px !important;color: #fff !important; border-radius: 5px 0 0 5px">
                                                                    <input v-if="group_open == 0" type="checkbox"
                                                                           v-model="selectAllDefault" style="margin-right: 0px">
                                                                    <input v-else type="checkbox"  style="margin-right: 0px" v-model="selectAll">
                                                                </th>
                                                                <th style="min-width: 120px;width: 8%;color: #fff !important; text-align: left !important; padding-left: 15px !important;">
                                                                    作成日
                                                                </th>
                                                                <th style="color: #fff !important;width: 28%; text-align: left !important;min-width: 100px;"><span style="margin-left: 8px">タグ名</span></th>
                                                                <th style="min-width: 100px;width: 28%;color: #fff !important; text-align: left !important; padding-left: 22px !important;">
                                                                    アクション
                                                                </th>
                                                                <th style="min-width: 60px;width: 6%"></th>
                                                                <th style="min-width: 120px;width: 8%"></th>
                                                                <th style="min-width: 80px;width: 8%;color: #fff !important;">
                                                                    友だち数
                                                                </th>
                                                                <th style="border-radius: 0 5px 5px 0; min-width: 70px;width: 8%"></th>

                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            
                                                            <tr v-if="group_open == 0 && items_default.length > 0"
                                                                :class="'tag_'+item.id"
                                                                v-for="(item, index) in items_default"
                                                                :data-id="item.id">
                                                                <td>
                                                                    <input type="checkbox" name="item_checks[]"
                                                                           :id="'itemcheck_'+item.id"
                                                                           :value="item.id"
                                                                           v-model="selected" style="margin-right: 0px">
                                                                </td>
                                                                <td style="text-align: left !important">
                                                                    @{{ time(item.created_at) }}
                                                                </td>
                                                                <td style="text-align: left !important;padding-left: 20px !important;">
                                                                    <span v-on:click="showTag(item.id)" class="display_tag"><a :href="'tag/edit-tag/'+item.id" style="font-weight: bold !important;text-decoration: underline;">@{{ item.name }}</a>
                                                                    </span>
                                                                    <span :class="'edit_tag_'+item.id" class="hidden">
                                                                        <input type="text" :class="'rename_tag_'+item.id" style="width: 90%;height: 25px;"
                                                                                       :value="item.name" autofocus>
                                                                        <input type="button" class="btn btn-default" value="決定 " style="width: 5%;margin-left:5px;padding:1px; min-width: 40px"
                                                                                       v-on:click="renameTag(item.id)" onclick="location.reload()">
                                                                    </span>
                                                                </td>
                                                                <td style="text-align: left !important">
                                                                    <p class="over-text" v-if="item.setting_actions.length > 0">
                                                                        <span v-if="item.setting_actions[0].type == 'tag'">【タグ】
                                                                        <span v-for="(itemTag, indexTag) in item.setting_actions[0].list_tags">@{{ indexTag == 0 ? '' : ',' }}@{{ itemTag.name }}</span>を<span v-if="item.setting_actions[0].data.action == 1">つける</span><span v-else>はずす</span>
                                                                        </span>

                                                                        <span v-else-if="item.setting_actions[0].type == 'scenario'">【ステップ】<span v-if="item.setting_actions[0].data.action != 1">@{{ item.setting_actions[0].data.scenario_name }}</span>
                                                                        <span v-else>購読停止・予約キャンセル</span>
                                                                        </span>
                                                                        <span v-else-if="item.setting_actions[0].type == 'template'">【テンプレート】
                                                                        <span>@{{ item.setting_actions[0].data.template_name }}</span>
                                                                        </span>
                                                                        <span v-else-if="item.setting_actions[0].type == 'text'" >【テキスト】
                                                                        <span>@{{ item.setting_actions[0].data.content }}</span>
                                                                        </span>
                                                                        <span v-else-if="item.setting_actions[0].type == 'richmenu'">【リッチメニュー】
                                                                        <span v-if="item.setting_actions[0].data.action != 1">@{{ item.setting_actions[0].data.richmenu_name }} 表示</span>
                                                                        <span v-else>表示を停止</span>
                                                                        </span>
                                                                        <span v-else-if="item.setting_actions[0].type == 'remind'">【リマインド】
                                                                        <span>@{{ item.setting_actions[0].data.remind_name }}</span>
                                                                        </span>
                                                                        <span v-else-if="item.setting_actions[0].type == 'bookmark'">
                                                                            <span class="action-title">【ブックマーク】</span>
                                                                            <span v-if="item.setting_actions[0].data.action == 1">ブックマークする</span>
                                                                            <span v-else>ブックマークを外す</span>
                                                                        </span>
                                                                        <span v-else-if="item.setting_actions[0].type == 'block'">
                                                                            <span class="action-title">【ブロック・非表示】</span>
                                                                            <span v-if="item.setting_actions[0].data.action == 1">ブロックする</span>
                                                                            <span v-if="item.setting_actions[0].data.action == 2">ブロック解除</span>
                                                                            <span v-if="item.setting_actions[0].data.action == 3">表示</span>
                                                                            <span v-if="item.setting_actions[0].data.action == 4">非表示</span>
                                                                        </span>
                                                                        <span v-else-if="item.setting_actions[0].type == 'compliant_status'">
                                                                            <span class="action-title">【対応ステータス】</span>
                                                                            <span v-if="item.setting_actions[0].data.action == 1">@{{ item.setting_actions[0].data.content }}をつける</span>
                                                                            <span v-else> ステータスを外す</span>
                                                                        </span>

                                                                        <span v-else-if="item.setting_actions[0].type == 'friend_info'">【友だち情報】
                                                                            <span>@{{ item.setting_actions[0].data.name }}</span>
                                                                            <span v-if="item.setting_actions[0].data.type != 6">
                                                                                <span v-if="item.setting_actions[0].data.action == 1"> 登録情報を削除</span>
                                                                                <span v-else> @{{ item.setting_actions[0].data.content }}</span>
                                                                            </span>
                                                                            <span v-else>
                                                                                <span v-if="item.setting_actions[0].data.action == 0"> 登録情報を削除</span>
                                                                                <span v-else> @{{ item.setting_actions[0].data.content }}</span>
                                                                            </span>
                                                                        </span>
                                                                    </p>
                                                                </td>
                                                                <td :style="item.setting_actions.length > 1 ? 'min-width:50px' : ''" style="padding: 0 !important;">
                                                                    <span v-if="item.setting_actions.length > 1">
                                                                        他<span>@{{ (item.setting_actions.length - 1) }}</span>件
                                                                    </span>
                                                                </td>
                                                                <td>
                                                                    <button v-if="item.setting_actions.length > 0" type="button" style="min-height: 42px;margin-bottom: 0" class="btn btn-sns-line btn-sns-line-secondary" v-on:click="previewAction(item.id)">プレビュー</button>
                                                                </td>
                                                                <td>
                                                                    <span v-on:click="showFriendhasTag(item)" class="display_tag"
                                                                    >
                                                                        <a style="font-weight: bold !important;text-decoration: underline;cursor: pointer;">
                                                                            @{{ item.count_user_tag }}
                                                                        </a>
                                                                    </span>
                                                                </td>
                                                                <td>
                                                                    <div class="btn-group box-ic" style="padding: unset;">
                                                                        <i class="far fa-ellipsis-h ic-menu"></i>
                                                                        <ul class="dropdown-menu action-broadcast">
                                                                            <li class="focus-pointer-item">
                                                                                <a :href="'tag/copy-tag/'+item.id" style="cursor: pointer; padding: 0 !important; font-weight: bold !important">
                                                                                    コピー
                                                                                </a>
                                                                            </li>
                                                                            <li class="focus-pointer-item" v-on:click="removeTag(item.id)" type="submit">
                                                                                <div style="cursor: pointer;color: #F44336;">
                                                                                    削除
                                                                                </div>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </td>
                                                            </tr>

                                                            <tr v-if="group_open != 0 && tag_items.length > 0"
                                                                v-for="(item,index) in tag_items"
                                                                :class="'tag_'+item.id"
                                                                :data-id="item.id">
                                                                <td >
                                                                    <input type="checkbox" name="item_checks[]" :id="'itemcheck_'+item.id" :value="item.id" v-model="selected" style="margin-right: 0px">
                                                                </td>
                                                                <td style="text-align: left !important">
                                                                    @{{ time(item.created_at) }}
                                                                </td>
                                                                <td style="text-align: left !important">
                                                                    <span v-on:click="showTag(item.id)" class="display_tag" style="margin-left: 5px"><a :href="'tag/edit-tag/'+item.id" style="font-weight: bold !important;text-decoration: underline">@{{ item.name }}</a>
                                                                    </span>
                                                                    <span :class="'edit_tag_'+item.id" class="hidden">
                                                                        <input type="text" :class="'rename_tag_'+item.id" style="width: 90%;height: 25px;"
                                                                               :value="item.name" autofocus>
                                                                        <input type="button" class="btn btn-default" value="決定 " style="width: 5%;margin-left:5px;padding:1px; min-width: 40px"
                                                                               v-on:click="renameTag(item.id)">
                                                                    </span>
                                                                </td>
                                                                <td style="text-align: left !important;white-space: nowrap; width: 400px; overflow: hidden;text-overflow: ellipsis;">
                                                                    <p class="over-text" v-if="item.setting_actions.length > 0">
                                                                        <span v-if="item.setting_actions[0].type == 'tag'">【タグ】
                                                                        <span v-for="(itemTag, indexTag) in item.setting_actions[0].list_tags">@{{ indexTag == 0 ? '' : ',' }}@{{ itemTag.name }}</span>を<span v-if="item.setting_actions[0].data.action == 1">つける</span><span v-else>はずす</span>
                                                                        </span>

                                                                        <span v-else-if="item.setting_actions[0].type == 'scenario'">【ステップ】<span v-if="item.setting_actions[0].data.action != 1">@{{ item.setting_actions[0].data.scenario_name }}</span>
                                                                        <span v-else>購読停止・予約キャンセル</span>
                                                                        </span>
                                                                        <span v-else-if="item.setting_actions[0].type == 'template'">【テンプレート】
                                                                        <span>@{{ item.setting_actions[0].data.template_name }}</span>
                                                                        </span>
                                                                        <span v-else-if="item.setting_actions[0].type == 'text'">【テキスト】
                                                                        <span>@{{ item.setting_actions[0].data.content }}</span>
                                                                        </span>
                                                                        <span v-else-if="item.setting_actions[0].type == 'richmenu'">【リッチメニュー】
                                                                        <span v-if="item.setting_actions[0].data.action != 1" v-text="shortContent(item.setting_actions[0].data.richmenu_name) + '表示'"></span>
                                                                        <span v-else>表示を停止</span>
                                                                        </span>
                                                                        <span v-else-if="item.setting_actions[0].type == 'remind'">【リマインド】
                                                                        <span>@{{ item.setting_actions[0].data.remind_name }}</span>
                                                                        </span>
                                                                        <span v-else-if="item.setting_actions[0].type == 'bookmark'">
                                                                            <span class="action-title">【ブックマーク】</span>
                                                                            <span v-if="item.setting_actions[0].data.action == 1">ブックマークする</span>
                                                                            <span v-else>ブックマークを外す</span>
                                                                        </span>
                                                                        <span v-else-if="item.setting_actions[0].type == 'block'">
                                                                            <span class="action-title">【ブロック・非表示】</span>
                                                                            <span v-if="item.setting_actions[0].data.action == 1">ブロックする</span>
                                                                            <span v-if="item.setting_actions[0].data.action == 2">ブロック解除</span>
                                                                            <span v-if="item.setting_actions[0].data.action == 3">表示</span>
                                                                            <span v-if="item.setting_actions[0].data.action == 4">非表示</span>
                                                                        </span>
                                                                        <span v-else-if="item.setting_actions[0].type == 'compliant_status'">
                                                                            <span class="action-title">【対応ステータス】</span>
                                                                            <span v-if="item.setting_actions[0].data.action == 1">@{{ item.setting_actions[0].data.content }}をつける</span>
                                                                            <span v-else> ステータスを外す</span>
                                                                        </span>

                                                                        <span v-else-if="item.setting_actions[0].type == 'friend_info'">【友だち情報】
                                                                            <span>@{{ item.setting_actions[0].data.name }}</span>
                                                                            <span v-if="item.setting_actions[0].data.type != 6">
                                                                                <span v-if="item.setting_actions[0].data.action == 1"> 登録情報を削除</span>
                                                                                <span v-else> @{{ item.setting_actions[0].data.content }}</span>
                                                                            </span>
                                                                            <span v-else>
                                                                                <span v-if="item.setting_actions[0].data.action == 0"> 登録情報を削除</span>
                                                                                <span v-else> @{{ item.setting_actions[0].data.content }}</span>
                                                                            </span>
                                                                        </span>
                                                                        
                                                                    </p>
                                                                </td>
                                                                <td :style="item.setting_actions.length > 1 ? 'min-width:50px' : ''" style="padding: 0 !important;">
                                                                    <span v-if="item.setting_actions.length > 1">
                                                                        他<span>@{{ (item.setting_actions.length - 1) }}</span>件
                                                                    </span>
                                                                </td>
                                                                <td>
                                                                    <button v-if="item.setting_actions.length > 0" type="button" style="min-height: 42px;margin-bottom: 0px" class="btn btn-sns-line btn-sns-line-secondary" v-on:click="previewAction(item.id)">プレビュー</button>
                                                                </td>
                                                                <td>
                                                                    <span v-on:click="showFriendhasTag(item)" class="display_tag">
                                                                        <a style="font-weight: bold !important;text-decoration: underline;cursor: pointer">
                                                                            @{{ item.count_user_tag }}
                                                                        </a>
                                                                    </span>
                                                                </td>
                                                                <td>
                                                                    <div class="btn-group box-ic" style="padding: unset;">
                                                                        <i class="far fa-ellipsis-h ic-menu"></i>
                                                                        <ul class="dropdown-menu action-broadcast">
                                                                            <li class="focus-pointer-item">
                                                                                <a :href="'tag/copy-tag/'+item.id" style="cursor: pointer; padding: 0 !important; font-weight: bold !important">
                                                                                    コピー
                                                                                </a>
                                                                            </li>
                                                                            <li class="focus-pointer-item" v-on:click="removeTag(item.id)">
                                                                                <div style="cursor: pointer;color: #F44336;">
                                                                                    削除
                                                                                </div>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Pagination -->
                                            <nav sty class="text-center" v-if="pagination.total > pagination.per_page">
                                                <ul class="pagination">
                                                    <li v-if="pagination.current_page > 1">
                                                        <a href="#" aria-label="Previous"
                                                        @click.prevent="changePage(pagination.current_page - 1)">
                                                            <span aria-hidden="true" style="color:#08BF5A"><i class="fas fa-arrow-left"></i></span>
                                                        </a>
                                                    </li>
                                                    <li v-for="page in pagesNumber" v-bind:class="[ page == isActived ? 'active' : '']">
                                                        <a href="#" @click.prevent="changePage(page)">@{{ page }}</a>
                                                    </li>
                                                    <li v-if="pagination.current_page < pagination.last_page">
                                                        <a href="#" aria-label="Next" @click.prevent="changePage(pagination.current_page + 1)">
                                                            <span aria-hidden="true" style="color:#08BF5A"><i class="fas fa-arrow-right"></i></span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </nav>
                                        </div>
                                    </div>
                                </form>

                                <span id="modalCaller" data-type="egg" type="button" data-toggle="modal"
                                      data-target="#messageModal" style="display: none;">
                                </span>
                            </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 hover-icon-action" style="color: rgba(125,145,149,1);padding: 5px 10px;border-radius: 4px"></i></button>
                                            <h2 class="text-center" style="font-weight: bold !important"> 【 フォルダ並べ替え 】</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="myModal" role="dialog">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div id="" 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 hover-icon-action" style="color: rgba(125,145,149,1);padding: 5px 10px;border-radius: 4px"></i></button>
                                            <h2 class="text-center" style="font-weight: bold !important"> 【 並べ替え 】</h2>


                                        </div>
                                        <div id="sorter_modal_body " class="modal-body modal-body-main scroll-modal">
                                            <div v-if="group_open != 0"
                                                 class="row mt-item-fol" v-for="(item,index) in tag_items_sort" :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="onUpdate(undefined, index, 'up')"></i>
                                                        <i class="far fa-chevron-down " v-on:click="onUpdate(undefined, index, 'down')"></i>
                                                    </div>
                                                </div>
                                            </div>
                                            <div v-if="group_open == 0"
                                                 class="row mt-item-fol" v-for="(item,index) in items_default_sort" :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="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" data-save="update" class="btn btn-success btn-choise-folder" v-on:click="sortedTemplate">保存</button>
                                        </div>

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

                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-overlay" style="display: none;"></div>

            <div class="modal fade" id="preview-action" tabindex="-1" role="dialog" aria-labelledby="preview-action" style="margin: 60px auto;">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" style="color: rgba(125,145,149,1);" data-dismiss="modal" aria-hidden="true">
                                <i class="fas fa-times hover-icon-action" style="color: rgba(125,145,149,1);padding: 5px 10px;border-radius: 4px"></i></button>
                            <h2 class="text-center" style="font-weight: bold !important">アクション詳細</h2>
                        </div>
                        <div class="modal-body">
                            <div class="row" style="padding: 30px;">
                                <div class="col-sm-12 preview-action_content">

                                </div>
                            </div>
                            <div class="text-center">
                                <button type="button" class="btn btn-sns-line btn-sns-line-secondary" data-dismiss="modal" style="padding: 6px 40px;">戻る</button>
                                <button type="button" class="btn btn-sns-line btn-sns-line-primary" style="margin-left: 10px;padding: 6px 40px;font-weight: bold !important" v-on:click="openSettingAction(action_current_id)">編集</button>
                            </div>
                        </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 hover-icon-action" style="color: rgba(125,145,149,1);padding: 5px 10px;border-radius: 4px"></i></button>
                            <h2 class="text-center" style="font-weight: bold !important"> 【 一括フォルダ変更 】</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>
            <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_add_id">
                                            <option value="0">未分類</option>
                                            <option v-for="(category, index) in sortedCategories" :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>
        </div>
    </div>
    @include('layout.modal_setting.modal_select_action')
    @include('layout.modal_filter_v2')
    <input type="hidden" id="folder_cookie"   value="{{$folderCookie}}" >
@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/tag/vue-sortable.js"></script>

    <script src="/js/plugins/bootbox.min.js"></script>

    <script src="/js/tag/index.js?v={{config('sns-line.version')}}"></script>
    <script>
        var params = [];
        var basic_home_new = [];
    </script>
    <script src="/js/friendlist/modal_filter_v2.js?v={{ config('sns-line.version') }}"></script>
    <script>
        @if($errors->any())
            alert('{{$errors->first()}}');
        @endif
    </script>
@endpush