@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/form_answer/index_v3.css?v={{config('sns-line.version')}}">
    <style>

        .list-user-quick-reply {
            display: flex;
            align-items: center;
        }

        .list-user-quick-reply .item img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: inline-block;
            object-fit: contain;
            margin-right: 10px;
        }
        .list-user-quick-reply .item .icon-send-now {
            display: none;
        }

        .list-user-quick-reply .item:hover .avatar{
            display: none;
            cursor: pointer;
        }

        .list-user-quick-reply .item:hover .icon-send-now{
            display: block;
            cursor: pointer;
        }

        .avt_name_popup {
            box-shadow: 0px 2px 4px #00000029;
            border-radius: 4px;
            font-weight: 500;
            font-size: 12px;
            position: absolute;
            background-color: white;
            z-index: 1000;
            padding: 10px;
            text-align: center;
            display: none;
            margin-top: -73px;
            right: 410px;
            color: #535657;
        }

        .avatar_popup:hover .avt_name_popup {
            display: block;
        }
        .active-label {
            color: #5799DB !important;
            font-weight: 600 !important;
        }
        .manage-name:focus {
            border: 1px solid #66AFE9 !important;
            box-shadow: unset !important;
        }
        .name_formanswer {
            display: block;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 280px;
        }
        .btn_ic_search{
            color: #888888 !important;
            position: relative;
            left: 1px;
            top:0px;
            font-size: 20px;
            border: 1px solid #DDDDDD;
            border-radius: 5px;
            width: 40px;
            height: 40px;
            cursor: pointer;
            margin-left: 11px;
            padding: 10px
        }
        .tooltip-gg{
            background: #FFFFFF 0% 0% no-repeat padding-box;
            box-shadow: 0px 3px 6px #00000029;
            border-radius: 10px;
            position: absolute;
            top: 19px;
            right: 44px;
            z-index: 999990;
            width: 180px;
            text-align: center;
            padding: 7px;
            display: none;
            font-size: 14px;
            font-weight: 400;
        }
        .btn-gg-hover:hover + .tooltip-gg{
            display: block;
        }
        .close_search_ic{
            width: 20px;
            transform: translateY(-50%);
            top: 29%;
            right: -337px;
            position: relative;
            cursor: pointer;
        }
        .tooltip-preview{
            background: #FFFFFF 0% 0% no-repeat padding-box;
            box-shadow: 0px 3px 6px #00000029;
            border-radius: 10px;
            width: 150px;
            color: #222222;
            position: absolute;
            top: -45px;
            right: 5px;
            font-size: 14px;
            padding: 9px;
            display: none;

        }
        .preview-hover:hover + .tooltip-preview{
            display: block;
        }
        .btn-url:hover + .preview-form-name {
            display: block !important;
        }
        .tooltip-preview-name, .preview-form-name{
            background: #FFFFFF 0% 0% no-repeat padding-box;
            box-shadow: 0px 3px 6px #00000029;
            border-radius: 10px;
            width: auto;
            color: #222222;
            position: absolute;
            top: -31px;
            font-size: 14px;
            left: -2px;
            padding: 5px 10px;
            display: none;
            z-index: 2;
        }
        .preview-hover-title:hover + .tooltip-preview-name{
            display: block;
        }

        #category_select {
            background-image: url(/images/down_2.png) !important;
            background-size: 15px;
        }
        .disabled{
            cursor: no-drop;
        }
        .hover-opacity-70:hover {
            opacity: .7;
        }

        .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="formanswer_management_v3" v-cloak>
        <div style="display: flex;align-items: center;justify-content: space-between;">
            <h2 style="font-size: 20px; color: #222222; font-weight: bold; padding: 10px 10px 10px 0">フォーム作成</h2>
        </div>

        <div class="separate" style="display: block;height: calc(100vh - 180px);">
            <div class="tag_separate" style="margin-top: 5px; display: flex;    height: calc(100vh - 210px);">
                <div class="tag_left tag_temp_left" v-show="show_tag_left == 1">
                    <div class="row">
                        <div class="col-md-12" style="padding-right: 0">
                            <div class="tab_folder  ">
                                <div class="folder_action" style="margin-top: 5px; margin-top: 29px; display: flex ">
                                    <div class="popup" style="width: 50%;">
                                        <span v-on:click="showHidePopupCreateFolder" style="width: 100%; display: inline-block">
                                            <button class="btn btn-sns-line btn-sns-line-outline-default btn_group_popup"  style="width: 100%; font-weight: 300">
                                                <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="createFolder()">決定</button>
                                                <button class="btn btn-sns-line-secondary btn-sns-line" style="padding: 6px;" @click="showHidePopupCreateFolder()">キャンセル</button>
                                            </div>
                                        </div>
                                    </div>


									<button
                                            @click="openModalSortFolder"
											style="width: 50%; margin-left: 7px; font-weight: 300"
											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>
                        </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; border: none; cursor: pointer;" v-bind:class="(folder_active == 0)?'active':'folder-close'">
                            <div @click="selectedFolder(0, $event)" class="display_category row" style="margin-left: 1px;">
                                <div class="col-md-11 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 sortedCategories" class="tag_group row" 
                          :id="'group_'+category.id" :data-id="category.id" v-bind:class="(category.id == folder_active)?'active':'folder-close'"
                          style="border: none; cursor: pointer;">
                            <div @click="selectedFolder(category.id, $event)" class="display_category row" style="margin-left: 1px;">
                                <div class="col-md-11 list-i-fol">
                                    <div style="font-size: 14px; color: #222222; font-weight: 300;" v-if="category.name">
                                    @{{ category.name }} (@{{ category.count }})
                                    </div>
                                    <div class="btn-group active" style="padding: unset;    background: unset !important;" :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="showHidePopupEditFolder(category.id, category.name)">
                                                <div style="cursor: pointer;">
                                                    <i class="fal fa-edit"></i>
													名称変更
                                                </div>
                                            </li>
                                            <li class="focus-pointer" @click="confirmDeleteFolder(category.id)">
                                                <div style="cursor: pointer">
                                                    <i class="fal fa-trash-alt"></i>
													フォルダ削除
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tag_temp_left_sm" v-if="show_tag_left == 0"></div>
                <div class="tag_right tag_temp_right">
                    <div class="box-btn-center">
                        <div>
                            <button type="button" @click="openModalCreateForm" class="btn btn-sns-line btn-sns-line-primary btn_create_temp">
                                <i class="far fa-plus" style="color: #FFFFFF !important; padding-right: 5px;"></i>新規作成
                            </button>
                            <button type="button" href="" id="btn_sort_event"
									style="color: #222222 !important;; font-weight: 300 !important;"
                                    @click="openModalSortItem"
                                    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>
                            <span style="color: #222222; font-size: 14px;" v-show="selected.length > 0">このフォルダ内の @{{ selected.length }} 件が選択されています</span>
                        </div>
                        <div class="btn-right-top" style="align-items: center;">
{{--                            @if(!empty($google_sheet_auth_url))--}}
                                <a v-show="!isShowSearch" class="btn-gg-hover" href="{{ route('form_answer.linkGoogle') }}">
                                    <button type="button" class="btn btn-sns-line btn-sns-line-outline-default btn_sort_temp " style="font-size: 12px; color: #222222 !important;">
                                        <img src="{{asset('images/google-sheet.png')}}" alt="" class="!inline-block !mr-[4px] !mt-[-3px]" width="20px">@if(!empty($google_sheet_auth_url))未連携 @else 連携済み @endif
                                    </button>
                                </a>
                            @if(empty($google_sheet_auth_url))
                                <div class="tooltip-gg">
                                    Googleスプレッドシート<br> 連携設定
                                </div>
                            @endif
                                <i v-show="!isShowSearch" v-on:click="showSearch" class="far fa-search btn_ic_search" style=""></i>
{{--                            @else--}}
{{--                                <a href="{{route('cancel.google.sheet', ['bot_id' => $bot->id])}}?unlink-google-sheet=true" style="background-color: white; border: 1px solid #F44336; color: #F44336 !important;" class="btn btn-sns-line btn-sns-line-danger">Google連携解除</a>--}}
{{--                            @endif--}}

                                <i v-show="isShowSearch" @click="closeSearch" class="far fa-search cursor-pointer" style="color: #888888 !important; position: relative;left: 47px;top:3px;font-size: 20px;"></i>
                                <img @click="clearSearch" v-show="isShowSearch "
                                 class="close_search_ic"
                                 src="/images/icon-clear-search.png">
                                <input v-show="isShowSearch"
                                       id="searchForm"
                                       type="text" @keyup.enter="searchByKeyword" class="form-control search_for_temp" v-model="keyword"
                                       placeholder="管理名を入力"
                                       style=" padding: 0;
                                  padding-left: 30px;
                                  padding-right: 35px;
                                  height: 40px;
                                  width: 350px;
                                  border: 1px solid #DDDDDD;
                                  box-shadow: none;
                                  font-size: 13px;">



                        </div>
                    </div>
                    <div class="table-responsive table-responsive-list-template">
                        <div>
                          <div class="wrap-scroll-table">
							  <table id="table_list_formanswer">
								  <thead style="border-radius: 5px; background: unset">
								    <tr style="border-radius: 5px;">
                                        <th class="checkth" style="border-radius: 5px 0px 0px 5px;">
										  <label class="c-checkbox">
											  <input type="checkbox" name="" value="" v-model="selectAll">
											  <span class="checkmark"></span>
										  </label>
									  </th>
									  <th class="btnth" style="width: 107px; color: #222222 !important; font-size: 14px !important; font-weight: 300; text-align: center !important;">公開状態</th>
									  <th
                                      @click="sortByField('name')"
											  style="width: 190px; color: #222222 !important; font-size: 14px !important; font-weight: 300; cursor: pointer;">
										  <div style="display: flex;">
                                                    管理名
											  <div style="display: grid; position: relative; bottom: 1px; margin-left: 5px">
												  <i class="fal fa-angle-up" style="font-size: 12px; color: #222222 !important; position: relative; top: 3px; font-weight: bold;"></i>
												  <i class="fal fa-angle-down" style="font-size: 12px; color: #222222 !important; font-weight: bold;"></i>
											  </div>
										  </div>
									  </th>
									  <th class="btnth" style="width:162px; color: #222222 !important; font-size: 14px !important; font-weight: 300;">配信用URL</th>
                                        <th class="siteth"
                                            @click="sortByField('form_type')"
                                            style="width: 120px; color: #222222 !important; font-size: 14px !important; font-weight: 300; cursor: pointer;">
                                            <div style="display: flex;">
                                                タイプ
                                                <div style="display: grid; position: relative; bottom: 1px; margin-left: 5px">
                                                    <i class="fal fa-angle-up" style="font-size: 12px; color: #222222 !important; position: relative; top: 3px; font-weight: bold;"></i>
                                                    <i class="fal fa-angle-down" style="font-size: 12px; color: #222222 !important; font-weight: bold;"></i>
                                                </div>
                                            </div>
                                        </th>
                                        <th class="siteth"
                                        @click="sortByField('created_at')"
										  style="width: 120px; color: #222222 !important; font-size: 14px !important; font-weight: 300; cursor: pointer;">
										  <div style="display: flex;">
                                                    作成日
											  <div style="display: grid; position: relative; bottom: 1px; margin-left: 5px">
												  <i class="fal fa-angle-up" style="font-size: 12px; color: #222222 !important; position: relative; top: 3px; font-weight: bold;"></i>
												  <i class="fal fa-angle-down" style="font-size: 12px; color: #222222 !important; font-weight: bold;"></i>
											  </div>
										  </div>
									  </th>
									  <th class="siteth"
                                        @click="sortByField('updated_at')"
										  style="width: 120px; color: #222222 !important; font-size: 14px !important; font-weight: 300; cursor: pointer;">
										  <div style="display: flex;">
                                                最終編集日
											  <div style="display: grid; position: relative; bottom: 1px; margin-left: 5px">
												  <i class="fal fa-angle-up" style="font-size: 12px; color: #222222 !important; position: relative; top: 3px; font-weight: bold;"></i>
												  <i class="fal fa-angle-down" style="font-size: 12px; color: #222222 !important; font-weight: bold;"></i>
											  </div>
										  </div>
									  </th>
									  <th class="btnth"
										  style="width: 185px;color: #222222 !important; font-size: 14px !important; font-weight: 300;"
									  >クイックテスト</th>

									  <th style="width: 350px; color: #222222 !important; border-radius: 0px 5px 5px 0px;
                                             padding-left: 20px; font-size: 14px !important; font-weight: 300;">回答情報</th>
								  </tr>
								  </thead>
								  <tbody>
                                    <tr v-if="items.length > 0" v-for="(item, index) in items" @click="openPageEdit(item.id, $event)">
									  <td class="input_check">
                                        <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 class="msg-text">
                                        <label class="switch" v-if="item.is_public == 1" :id="'statusRich'+index" @click.stop="">
                                            <input type="checkbox" hidden
                                                v-on:click="changePublicFormAnswer(item.id,0)">
                                            <span class="slider "></span>
                                        </label>
                                        <label class="switch" v-if="item.is_public == 0" :id="'statusRichOn'+index" @click.stop="">
                                            <input type="checkbox" hidden checked
                                                v-on:click="changePublicFormAnswer(item.id,1)">
                                            <span class="slider "></span>
                                        </label>
									  </td>

									  <td class="message msg-text text-left" @click="openPageEdit(item.id, $event)" >
                                          <div style="position: relative">
                                              <a class="name_formanswer preview-hover-title" style="text-decoration: none; font-size: 14px ;color: #222222; font-weight: 600">@{{ item.system_name ?? item.name |shortContent }}</a>
                                              <div class="tooltip-preview-name">@{{ item.system_name ?? item.name}}</div>
                                          </div>

									  </td>
									  <td class="message">
                                        <div class="text-center" style="display: flex;align-items: center;justify-content: flex-start ; position: relative">
                                            <button @click.stop="openModalURLLink('https://liff.line.me/{{$liff_id}}?unique_key='+item.unique_key+'&ts={{ time() }}')" class="btn btn-sns-line btn-sns-line-outline-default border-btn btn-url"
                                                    style="width: 100px; padding-left: 10px; padding-right: 10px; margin-left: 0; font-size: 14px">URLを表示</button>
                                            <div class="preview-form-name">@{{ item.name }}</div>
                                            <a class="preview-hover" :href="'/basic/form-answer/form-render/'+item.unique_key+'?mode=preview'" target="_blank" @click.stop="">
                                                <button class="btn btn-sns-line btn-sns-line-outline-default" style="width: 30px; height: 30px; padding: 4px 5px 4px 5px;box-shadow: 0px 1px 1px #0000001A; margin: 0 !important;
border: 1px solid #DDDDDD;">
                                                    <i class="far fa-caret-circle-right" style="font-size: 18px; color: #222222 !important;"></i>
                                                </button>
                                            </a>
                                            <div class="tooltip-preview">フォームプレビュー</div>
                                        </div>
									  </td>
                                        <td class="message msg-text text-left">
                                            @{{ item.form_type == 1 ? 'シンプル' : '分岐' }}
                                        </td>
									  <td class="message msg-text text-left" style="">
                                       @{{ formatDate(item.created_at) }}
									  </td>
									  <td class="message msg-text text-left">
                                        @{{ formatDate(item.updated_at) }}
									  </td>
									  <td class="message msg-text text-left">
                                          <div class="list-user-quick-reply" v-if="$refs['modal-preview-send-test'].list_user_quick_reply.length > 0">
                                              <div class="item avatar_popup"
                                                   v-for="(itemQuickReply, indexQuickReply) in $refs['modal-preview-send-test'].list_user_quick_reply"
                                                   @click.stop="sendQuickReply([itemQuickReply.id], item.id)"
                                              >
                                                  <img class="avatar" :src="displayAvatar(itemQuickReply.avatar_url)" @error="setAltImg" alt="">
                                                  <img class="icon-send-now" src="/images/icon-send-now.png" alt="">
                                                  <div class="avt_name_popup">@{{itemQuickReply.name}} にテスト送信する</div>
                                              </div>
                                          </div>

                                          <div class="not-user-quick"
                                               v-if="$refs['modal-preview-send-test'].list_user_quick_reply.length == 0"
                                               @click.stop="viewPreview('https://liff.line.me/{{$liff_id}}?unique_key='+item.unique_key+'&ts={{ time() }}', item.id)"
                                          >
                                              クイックテスト未登録
                                          </div>
									  </td>
									  <td >
										  <div class="justify-content-between" style="display: flex; align-items:center;">
                                            <div style="font-size: 14px; color: #222222 ; width: 68px;margin-right: 5px;text-align: right">@{{ item.viewer }}<span style="font-size: 10px">人</span></div>
                                            <div style="width: 250px" class="d-flex justify-content-end align-items-center">
                                                <a :href="'/basic/form-answer/v3/result/'+item.id" v-bind:class="item.viewer == 0 ? 'disabled': '0'" @click.stop="">
                                                    <button class="btn btn-sns-line btn-sns-line-outline-default" style="margin: 0 5px !important;box-shadow: 0px 1px 1px #0000000D;border: 1px solid #E0E0E0;border-radius: 3px;width: 40px; height: 25px; padding: 2px 4px 2px 4px; color: #222222 !important;font-size: 12px; font-weight: 300">表示</button>
                                                </a>
                                                @if($bot->google_sheet_access_token)
                                                <div v-if="item.google_sheet_id != null" class="icon-google-sheet" style="display: inline">
                                                    <a class="download_google_sheet" :href="'https://docs.google.com/spreadsheets/d/'+item.google_sheet_id" target="_blank" @click.stop="">
                                                        <button class="btn btn-sns-line btn-sns-line-outline-default" style="margin: 0 5px !important;width: 35px; height: 35px;padding: 0 5px;
                                                      border: 1px solid #E0E0E0;">
                                                            <img src="{{asset('images/google-sheet.png')}}" alt="" style="    width: 20px !important;
                                                    max-width: initial;
                                                    margin: 0 auto;">
                                                        </button>
                                                    </a>
                                                </div>
                                                @endif
                                                <a v-if="item.viewer == 0 "  class="download_csv disabled"  style="margin-top: 0;" @click.stop="">
                                                    <button class="btn btn-sns-line btn-sns-line-outline-default disabled"  style="margin: 0 5px !important;width: 80px; height: 35px;box-shadow: 0px 1px 1px #0000000D;border: 1px solid #E0E0E0; color: #222222 !important; font-size: 12px; font-weight: 300;border-radius: 3px;">
                                                        <i class="fas fa-arrow-alt-to-bottom" style="margin-right: 5px; color: #888888"></i>CSV</button>
                                                </a>
                                                <a v-if="item.viewer > 0 " :href="'/ajax/download-answer/'+item.id" class="download_csv"  style="margin-top: 0;" @click.stop="">
                                                    <button class="btn btn-sns-line btn-sns-line-outline-default" style="margin: 0 5px !important;width: 80px; height: 35px;box-shadow: 0px 1px 1px #0000000D;border: 1px solid #E0E0E0; color: #222222 !important; font-size: 12px; font-weight: 300;border-radius: 3px;">
                                                        <i class="fas fa-arrow-alt-to-bottom" style="margin-right: 5px; color: #888888"></i>CSV</button>
                                                </a>
                                                <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">
                                                            <div @if($flagNewFreePlan== 0 || ( $flagNewFreePlan==1 && $formAnswerNumber < 3)) @click.stop="openModalCopyForm(item)" @else onclick="showAlertNewFreePlan()" @endif style="font-weight: 500; color: #222222 !important;">
                                                                <i class="far fa-copy"></i>
                                                                コピー
                                                            </div>
                                                        </li>
                                                        <li class="focus-pointer-item" v-on:click.stop="confirmDeleteForm(item.id)">
                                                            <div style="cursor: pointer; font-weight: 500; color: #222222 !important;">
                                                                <i class="fal fa-trash-alt"></i>
                                                                削除
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
										  </div>
									  </td>
                                    </tr>
                                    <tr v-if="items.length == 0">
                                        <td colspan="8" style="color: #222222">フォームが登録されていません。</td>
                                    </tr>
								  </tbody>
							  </table>
						  </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="action_separate">
                <div class="tag_left tag_action_left text-center" v-if="show_tag_left == 1">
                    <a style="font-weight: bold; color: #222222; cursor: pointer; font-size: 14px; font-weight: 300;" v-on:click="openTabContent(0)">
                        <i class="far fa-caret-square-left" style="color: #888888 !important; padding-right: 10px;"></i>フォルダを非表示
                    </a>
                </div>
                <div class="tag_action_left_sm" v-if="show_tag_left == 0">
                    <a style="font-weight: bold; color: #535657;" v-on:click="openTabContent(1)">
                        <i class="far fa-caret-square-right" style="color: #666666 !important;"></i>
                    </a>
                </div>
                <div class="tag_right tag_action_right">
                    <div class="text-center action_page_left" >
                        <button class="btn btn-sns-line btn-sns-line-outline-default btn_folder_change" style="color: #888888; 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;"></i>一括フォルダ変更
                        </button>
                        <button class="btn btn-sns-line btn-sns-line-outline-default btn_bulk_delete" style="font-weight: 300"
                        @click="confirmDeleteListForm()" :class="{active: selected.length > 0}" :disabled="selected.length == 0">
                            <i class="fal fa-trash-alt" style="padding-right: 5px;"></i>一括削除
                        </button>
                        <a style="font-weight: 300; font-size: 14px; text-decoration: underline; color: #222222; cursor: pointer;" href="{{ route('form_answer.result.removed') }}">削除したフォーム</a>
                    </div>
                    <nav style="margin-left: auto; padding-top: 5px;" 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)" 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" v-bind:class="[ page == isActived ? 'active' : '']">
                                <a href="#" @click.prevent="changePage(page)" style="font-size: 14px;">@{{ page }}</a>
                            </li>
                            <li v-if="pagination.current_page < pagination.last_page">
                                <a href="#" aria-label="Next" @click.prevent="changePage(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>
            </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">
                                        <i class="fa fa-bars item_icon"></i>@{{item.name}} 
                                    </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="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 sortedCategories" :value="category.id">@{{ category.name }}</option>
                                    </select>
                                    <i class="fal fa-angle-down"></i>
                                </div>

                            </div>

                        </div>

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

        @include('basic.form_answer.modal.modal_url_link')
        @include('basic.form_answer.modal.modal_create_form')
        @include('basic.form_answer.modal.modal_sort_form')
        @include('basic.form_answer.modal.modal_copy_form')
        @include('basic.form_answer.modal.modal_confirm_remove_form')
        <modal-preview-send-test ref="modal-preview-send-test"></modal-preview-send-test>
    </section>
    @include('basic.template_v2.common.modal.modal-preview-send-test')
</article>
<input type="hidden" id="folder_select" @if(!empty($folderId)) value="{{ $folderId }}" @endif>
@include('basic.form_answer.modal.google_sheet_warning')
@endsection
@push('js')
<script>
    var list_folder = @json($list_folder);
    var flagNewFreePlan = '{{ $flagNewFreePlan }}';
</script>
<script src="/js/tailwindcss.js"></script>
<script src="https://cdn.jsdelivr.net/npm/he@1.2.0/he.min.js"></script>
<script src="/js/form_answer/index_v3.js?v={{config('sns-line.version')}}"></script>
{{--<script type="application/javascript" src="/js/popup_send_test-message.js?v={{config('sns-line.version')}}"></script>--}}
<script>
    function showAlertNewFreePlan() {
        alert('現在のプランは利用できない機能です。アップグレードが必要になります。');
    }
</script>
@endpush