@extends('layout.admin_v2.main')

@section('title')
    ユーザーリスト
@endsection

@push('css')
    <link rel="stylesheet" href="/css/vue-toast/index.css">
    <link rel="stylesheet" href="/css/tippy/tippy.css">
    <link rel="stylesheet" href="/css/admin/account.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" type="text/css" href="/plugins/toastify/toastify.min.css">
    <script src="/js/tailwind/browser@4.js"></script>
@endpush
@section('content')
    <div class="bg-[#F5F7FA] !p-[20px] flex flex-col gap-[20px] content-fit-vh" id="vue-element" v-cloak>
        <div class="flex items-center gap-[20px]">
            <span class="text-[#222222] !text-[18px] font-[600]">検索結果</span>
            <span class="text-[#222222] !text-[14px] font-[400] whitespace-pre">@{{ keyword }}</span>
        </div>
        <div class="main-panel rounded-[20px] bg-[#FFFFFF] flex-1">
            <div v-if="keyword_searched && total_user === 0 && total_bot === 0" class="search-empty flex flex-col items-center justify-center gap-[20px] !px-[100px] h-[100%]">
                <div class="flex flex-col items-center justify-center gap-[20px]">
                    <svg id="Group_3240" data-name="Group 3240" xmlns="http://www.w3.org/2000/svg" width="120" height="77.779" viewBox="0 0 120 77.779">
                        <path id="Path_52" data-name="Path 52" d="M101.145,27.855H2.662A2.524,2.524,0,0,1,0,25.5V11.357A2.524,2.524,0,0,1,2.662,9h98.483Z" transform="translate(0 12.212)" fill="#f5f5f7"></path>
                        <path id="Path_53" data-name="Path 53" d="M52.248,42.284a5,5,0,0,1-8.525,3.509L27.5,29.571,34.571,22.5,50.793,38.723a4.947,4.947,0,0,1,1.454,3.561" transform="translate(48.897 30.531)" fill="#dce0e6"></path>
                        <path id="Path_54" data-name="Path 54" d="M34.785,18l7.761,7.761a2.359,2.359,0,0,1,0,3.333l-8.452,8.452a2.359,2.359,0,0,1-3.333,0L23,29.785Z" transform="translate(42.791 24.425)" fill="#dce0e6"></path>
                        <path id="Path_55" data-name="Path 55" d="M66.28,30.64A30.64,30.64,0,1,0,35.64,61.28,30.639,30.639,0,0,0,66.28,30.64" transform="translate(18.366)" fill="#dce0e6"></path>
                        <path id="Path_56" data-name="Path 56" d="M55.138,26.569A23.569,23.569,0,1,0,31.569,50.138,23.569,23.569,0,0,0,55.138,26.569" transform="translate(22.437 4.071)" fill="#fff"></path>
                        <path id="Path_57" data-name="Path 57" d="M54.5,9H38V27.855H54.5A2.358,2.358,0,0,0,56.855,25.5V11.357A2.358,2.358,0,0,0,54.5,9" transform="translate(63.145 12.212)" fill="#aeb8c2"></path>
                        <path id="Path_58" data-name="Path 58" d="M21.071,27.01A8.523,8.523,0,0,1,25.7,19.562a4.714,4.714,0,1,0-6.984-4.132,2.357,2.357,0,1,1-4.714,0,9.43,9.43,0,1,1,13.972,8.261,3.881,3.881,0,0,0-2.187,3.319,2.359,2.359,0,1,1-4.714,0" transform="translate(30.579 8.139)" fill="#dce0e6"></path>
                        <path id="Path_59" data-name="Path 59" d="M19.384,22.714a2.357,2.357,0,1,1,2.357-2.357,2.368,2.368,0,0,1-2.357,2.357" transform="translate(34.67 24.425)" fill="#dce0e6"></path>
                        <path id="Path_61" data-name="Path 61" d="M18.785,31.714H9.357a2.357,2.357,0,0,1,0-4.714h9.428a2.357,2.357,0,0,1,0,4.714" transform="translate(21.08 36.637)" fill="#f5f5f7"></path>
                        <path id="Path_62" data-name="Path 62" d="M18.785,35.714H9.357a2.357,2.357,0,0,1,0-4.714h9.428a2.357,2.357,0,0,1,0,4.714" transform="translate(21.08 42.065)" fill="#f5f5f7"></path>
                        <path id="Path_63" data-name="Path 63" d="M25.458,9.771l2.735-2.735A1.193,1.193,0,0,0,26.506,5.35L23.771,8.085,21.036,5.35A1.193,1.193,0,0,0,19.35,7.036l2.735,2.735L19.35,12.506a1.193,1.193,0,0,0,1.687,1.687l2.735-2.735,2.735,2.735a1.193,1.193,0,0,0,1.687-1.687Z" transform="translate(86.801 20.869)" fill="#dce0e6"></path>
                    </svg>
                    <span class="text-[#888888] !font-[500] !text-[16px]">検索結果がありません</span>
                </div>
                <div v-if="false" class="search-wrapper w-full relative !bg-[#FFFFFF]">
                    <input class="top-search w-full text-center !pl-[20px] !pr-[40px]" type="text"
                           :class="{ 'is-left': isFocus || keyword }"
                           v-model="keyword"
                           :placeholder="placeholder"
                           @focus="onFocus"
                           @blur="onBlur"
                           @keydown.enter="searchUser">
                    <div class="absolute top-[14px] right-[17px] text-[#888888] cursor-pointer" @click="searchUser">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                            <g id="SVGRepo_iconCarrier">
                                <g clip-path="url(#clip0_15_152)">
                                    <rect width="24" height="24" :fill="isFocus ? '#FFFFFF' : '#F8F8F8'"></rect>
                                    <circle cx="10.5" cy="10.5" r="6.5" stroke="currentColor" stroke-linejoin="round"></circle>
                                    <path d="M19.6464 20.3536C19.8417 20.5488 20.1583 20.5488 20.3536 20.3536C20.5488 20.1583 20.5488 19.8417 20.3536 19.6464L19.6464 20.3536ZM20.3536 19.6464L15.3536 14.6464L14.6464 15.3536L19.6464 20.3536L20.3536 19.6464Z" fill="currentColor"></path>
                                </g>
                                <defs>
                                    <clipPath id="clip0_15_152">
                                        <rect width="24" height="24" :fill="isFocus ? '#FFFFFF' : '#F8F8F8'"></rect>
                                    </clipPath>
                                </defs>
                            </g>
                        </svg>
                    </div>
                </div>
            </div>
            <div v-else class="h-[100%] !p-[20px] flex flex-col justify-between">
                <div class="flex flex-col gap-[20px]">
                    <div class="tab-control bg-[#F8F8F8] w-fit text-[#888888] text-[14px] font-[400] rounded-[6px] !px-[10px] !py-[6px]">
                        <span class="cursor-pointer inline-block min-w-[270px] text-center"
                              :class="tab_control === 1 ? 'tab-active' : ''" @click="changeTab(1)">
                            <span class="!text-[14px] font-[400]">ユーザー名・メールアドレス</span>
                            <span class="text-[#DDDDDD] !ml-[10px] !mr-[5px]">|</span>
                            <span v-if="total_user < 100" class="text-[#222222] text-[16px] font-[600]">@{{ total_user }}</span>
                            <span v-else class="text-[#222222] text-[16px] font-[600]">+99</span>
                        </span>
                        <span class="cursor-pointer inline-block min-w-[270px] text-center"
                              :class="tab_control === 2 ? 'tab-active' : ''" @click="changeTab(2)">
                            <span class="!text-[14px] font-[400]">LOA名・LINE ID・決済ID</span>
                            <span class="text-[#DDDDDD] !ml-[10px] !mr-[5px]">|</span>
                            <span v-if="total_bot < 100" class="text-[#222222] text-[16px] font-[600]">@{{ total_bot }}</span>
                            <span v-else class="text-[#222222] text-[16px] font-[600]">+99</span>
                        </span>
                    </div>
                    <div class="table-wrapper table-responsive relative scroll-custom" v-if="tab_control === 1">
                        <table class="table-custom-v2 last-child-sticky">
                            <thead>
                                <tr>
                                    <th scope="col" class="min-w-[160px]">アカウント登録日</th>
                                    <th scope="col" class="min-w-[160px]">最終操作日時</th>
                                    <th scope="col" class="min-w-[300px]">ユーザー</th>
                                    <th scope="col" class="min-w-[300px]">LINE公式アカウント</th>
                                    <th scope="col" class="min-w-[300px]">紹介者</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody v-if="data_basic.length > 0">
                                <tr v-for="(item,index) in data_basic" :key="index">
                                    <td>@{{ item.created_at_format }}</td>
                                    <td>@{{ item.last_time_action }}</td>
                                    <td>
                                        <div class="flex flex-col leading-[22px]">
                                            <a :href="item.url_user_detail" class="line-clamp-1 w-fit text-[#5799DB] !underline hover:!text-[#FF4D4F] cursor-pointer">
                                                @{{ item.username }}
                                            </a>
                                            <span data-tippy-content="クリックでテキストコピー"
                                                    class="line-clamp-1 w-fit text-[#888888] !font-[300] hover:text-[#222222] hover:underline cursor-pointer"
                                                  @click="copyToClipboard(item.email)">
                                                @{{ item.email }}
                                            </span>
                                        </div>
                                    </td>
                                    <td>
                                        <div v-if="item.total_bot == 1" class="flex items-center gap-[5px]">
                                            <div v-if="item.bot_image" class="table-avatar !border-solid !border-[1px] !border-[#DDDDDD] rounded-[50%] w-[30px] h-[30px] overflow-hidden">
                                                <img class="rounded-[50%] w-full h-full object-cover" :src="item.bot_image" alt="" @error="setErrorImg">
                                            </div>
                                            <div v-else class="w-[30px] h-[30px] flex items-center justify-center rounded-[50%]">
                                                @include("admin.user-avatar-default")
                                            </div>
                                            <div class="flex flex-col leading-[22px] flex-1">
                                                <a v-if="item.url_bot_detail" :href="item.url_bot_detail" class="line-clamp-1 w-fit text-[#5799DB] !underline hover:!text-[#FF4D4F] cursor-pointer">
                                                    @{{ item.view_name }}
                                                </a>
                                                <span v-else class="line-clamp-1 w-fit">
                                                    @{{ item.view_name }}
                                                </span>

                                                <span data-tippy-content="クリックでテキストコピー" class="text-[#888888] hover:text-[#222222] !font-[300] line-clamp-1 w-fit hover:underline cursor-pointer"
                                                      @click="copyToClipboard(item.line_id)">
                                                    @{{ item.line_id }}
                                                </span>
                                            </div>
                                        </div>
                                        <div v-else-if="item.total_bot > 0">
                                            <span class="text-[#5799DB] underline cursor-pointer" @click="openModal(item)">@{{ item.total_bot }}アカウント接続</span>
                                        </div>
                                        <div v-else>
                                            <span class="text-[#888888]">LOA未接続</span>
                                        </div>
                                    </td>
                                    <td>
                                        <div v-if="item.introducer_id" class="flex flex-col leading-[22px]">
                                            <a :href="item.introducer_url" class="line-clamp-1 w-fit text-[#5799DB] !underline hover:!text-[#FF4D4F] cursor-pointer">
                                                @{{ item.introducer_username }}
                                            </a>
                                            <span data-tippy-content="クリックでテキストコピー"
                                                  class="line-clamp-1 w-fit text-[#888888] !font-[300] hover:text-[#222222] hover:underline cursor-pointer"
                                                  @click="copyToClipboard(item.introducer_email)">
                                                @{{ item.introducer_email }}
                                            </span>
                                        </div>
                                        <div v-else>-</div>
                                    </td>
                                    <td>
                                        <div @click.stop="loginUser(item)"
                                             class="button-login w-[30px] h-[30px] flex items-center justify-center text-[#888888] rounded-[5px] !border-[1px] !border-solid !border-[#888888] hover:bg-[#08BF5A] hover:!border-[#08BF5A] hover:text-[#FFFFFF] cursor-pointer">
                                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                                <g id="SVGRepo_iconCarrier">
                                                    <path d="M15 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H15M11 16L15 12M15 12L11 8M15 12H3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                </g>
                                            </svg>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                            <tbody v-else>
                                <tr>
                                    <td class="!text-center no-before border-b-none" colspan="6">
                                        <div class="flex flex-col items-center justify-center gap-[20px] min-h-[250px]">
                                            <svg id="Group_3240" data-name="Group 3240" xmlns="http://www.w3.org/2000/svg" width="120" height="77.779" viewBox="0 0 120 77.779">
                                                <path id="Path_52" data-name="Path 52" d="M101.145,27.855H2.662A2.524,2.524,0,0,1,0,25.5V11.357A2.524,2.524,0,0,1,2.662,9h98.483Z" transform="translate(0 12.212)" fill="#f5f5f7"></path>
                                                <path id="Path_53" data-name="Path 53" d="M52.248,42.284a5,5,0,0,1-8.525,3.509L27.5,29.571,34.571,22.5,50.793,38.723a4.947,4.947,0,0,1,1.454,3.561" transform="translate(48.897 30.531)" fill="#dce0e6"></path>
                                                <path id="Path_54" data-name="Path 54" d="M34.785,18l7.761,7.761a2.359,2.359,0,0,1,0,3.333l-8.452,8.452a2.359,2.359,0,0,1-3.333,0L23,29.785Z" transform="translate(42.791 24.425)" fill="#dce0e6"></path>
                                                <path id="Path_55" data-name="Path 55" d="M66.28,30.64A30.64,30.64,0,1,0,35.64,61.28,30.639,30.639,0,0,0,66.28,30.64" transform="translate(18.366)" fill="#dce0e6"></path>
                                                <path id="Path_56" data-name="Path 56" d="M55.138,26.569A23.569,23.569,0,1,0,31.569,50.138,23.569,23.569,0,0,0,55.138,26.569" transform="translate(22.437 4.071)" fill="#fff"></path>
                                                <path id="Path_57" data-name="Path 57" d="M54.5,9H38V27.855H54.5A2.358,2.358,0,0,0,56.855,25.5V11.357A2.358,2.358,0,0,0,54.5,9" transform="translate(63.145 12.212)" fill="#aeb8c2"></path>
                                                <path id="Path_58" data-name="Path 58" d="M21.071,27.01A8.523,8.523,0,0,1,25.7,19.562a4.714,4.714,0,1,0-6.984-4.132,2.357,2.357,0,1,1-4.714,0,9.43,9.43,0,1,1,13.972,8.261,3.881,3.881,0,0,0-2.187,3.319,2.359,2.359,0,1,1-4.714,0" transform="translate(30.579 8.139)" fill="#dce0e6"></path>
                                                <path id="Path_59" data-name="Path 59" d="M19.384,22.714a2.357,2.357,0,1,1,2.357-2.357,2.368,2.368,0,0,1-2.357,2.357" transform="translate(34.67 24.425)" fill="#dce0e6"></path>
                                                <path id="Path_61" data-name="Path 61" d="M18.785,31.714H9.357a2.357,2.357,0,0,1,0-4.714h9.428a2.357,2.357,0,0,1,0,4.714" transform="translate(21.08 36.637)" fill="#f5f5f7"></path>
                                                <path id="Path_62" data-name="Path 62" d="M18.785,35.714H9.357a2.357,2.357,0,0,1,0-4.714h9.428a2.357,2.357,0,0,1,0,4.714" transform="translate(21.08 42.065)" fill="#f5f5f7"></path>
                                                <path id="Path_63" data-name="Path 63" d="M25.458,9.771l2.735-2.735A1.193,1.193,0,0,0,26.506,5.35L23.771,8.085,21.036,5.35A1.193,1.193,0,0,0,19.35,7.036l2.735,2.735L19.35,12.506a1.193,1.193,0,0,0,1.687,1.687l2.735-2.735,2.735,2.735a1.193,1.193,0,0,0,1.687-1.687Z" transform="translate(86.801 20.869)" fill="#dce0e6"></path>
                                            </svg>
                                            <span class="text-[#888888] !font-[500] !text-[16px]">検索結果がありません</span>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="table-wrapper table-responsive relative scroll-custom" v-if="tab_control === 2">
                        <table class="table-custom-v2 last-child-sticky">
                            <thead>
                                <tr>
                                    <th scope="col" class="min-w-[160px]">エルメ接続日</th>
                                    <th scope="col" class="min-w-[160px]">最終操作日時</th>
                                    <th scope="col" class="min-w-[300px]">LINE公式アカウント</th>
                                    <th scope="col" class="min-w-[160px]">操作権限</th>
                                    <th scope="col" class="min-w-[300px]">ユーザー</th>
                                    <th scope="col" class="min-w-[300px]">紹介者</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody v-if="data_basic.length > 0">
                                <tr v-for="(item,index) in data_basic" :key="index">
                                    <td>@{{ item.created_at_format }}</td>
                                    <td>@{{ item.last_time_action }}</td>
                                    <td>
                                        <div v-if="item.total_bot == 1" class="flex items-center gap-[5px]">
                                            <div v-if="item.bot_image" class="table-avatar !border-solid !border-[1px] !border-[#DDDDDD] rounded-[50%] w-[30px] h-[30px] overflow-hidden">
                                                <img class="rounded-[50%] w-full h-full object-cover" :src="item.bot_image" alt="" @error="setErrorImg">
                                            </div>
                                            <div v-else class="w-[30px] h-[30px] flex items-center justify-center rounded-[50%]">
                                                @include("admin.user-avatar-default")
                                            </div>
                                            <div class="flex flex-col leading-[22px] flex-1">
                                                <a v-if="item.url_bot_detail" :href="item.url_bot_detail" class="line-clamp-1 w-fit text-[#5799DB] !underline hover:!text-[#FF4D4F] cursor-pointer">
                                                    @{{ item.view_name }}
                                                </a>
                                                <span v-else class="line-clamp-1 w-fit">
                                                    @{{ item.view_name }}
                                                </span>
                                                <span data-tippy-content="クリックでテキストコピー" class="text-[#888888] hover:text-[#222222] !font-[300] line-clamp-1 w-fit hover:underline cursor-pointer"
                                                      @click="copyToClipboard(item.line_id)">
                                                    @{{ item.line_id }}
                                                </span>
                                            </div>
                                        </div>
                                        <div v-else-if="item.total_bot > 0">
                                            <span class="text-[#5799DB] underline cursor-pointer" @click="openModal(item)">@{{ item.total_bot }}アカウント接続</span>
                                        </div>
                                        <div v-else>
                                            <span class="text-[#888888]">LOA未接続</span>
                                        </div>
                                    </td>
                                    <td>主管理者</td>
                                    <td>
                                        <div class="flex flex-col leading-[22px]">
                                            <a :href="item.url_user_detail" class="line-clamp-1 w-fit text-[#5799DB] !underline hover:!text-[#FF4D4F] cursor-pointer">
                                                @{{ item.username }}
                                            </a>
                                            <span data-tippy-content="クリックでテキストコピー"
                                                  class="line-clamp-1 w-fit text-[#888888] !font-[300] hover:text-[#222222] hover:underline cursor-pointer"
                                                  @click="copyToClipboard(item.email)">
                                                @{{ item.email }}
                                            </span>
                                        </div>
                                    </td>
                                    <td>
                                        <div v-if="item.introducer_id" class="flex flex-col leading-[22px]">
                                            <a :href="item.introducer_url" class="line-clamp-1 w-fit text-[#5799DB] !underline hover:!text-[#FF4D4F] cursor-pointer">
                                                @{{ item.introducer_username }}
                                            </a>
                                            <span data-tippy-content="クリックでテキストコピー"
                                                  class="line-clamp-1 w-fit text-[#888888] !font-[300] hover:text-[#222222] hover:underline cursor-pointer"
                                                  @click="copyToClipboard(item.introducer_email)">
                                                @{{ item.introducer_email }}
                                            </span>
                                        </div>
                                        <div v-else>-</div>
                                    </td>
                                    <td>
                                        <div @click.stop="loginUser(item)"
                                             class="button-login w-[30px] h-[30px] flex items-center justify-center text-[#888888] rounded-[5px] !border-[1px] !border-solid !border-[#888888] hover:bg-[#08BF5A] hover:!border-[#08BF5A] hover:text-[#FFFFFF] cursor-pointer">
                                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                                <g id="SVGRepo_iconCarrier">
                                                    <path d="M15 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H15M11 16L15 12M15 12L11 8M15 12H3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                                </g>
                                            </svg>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                            <tbody v-else>
                                <tr>
                                    <td class="!text-center no-before border-b-none" colspan="6">
                                        <div class="flex flex-col items-center justify-center gap-[20px] min-h-[250px]">
                                            <svg id="Group_3240" data-name="Group 3240" xmlns="http://www.w3.org/2000/svg" width="120" height="77.779" viewBox="0 0 120 77.779">
                                                <path id="Path_52" data-name="Path 52" d="M101.145,27.855H2.662A2.524,2.524,0,0,1,0,25.5V11.357A2.524,2.524,0,0,1,2.662,9h98.483Z" transform="translate(0 12.212)" fill="#f5f5f7"></path>
                                                <path id="Path_53" data-name="Path 53" d="M52.248,42.284a5,5,0,0,1-8.525,3.509L27.5,29.571,34.571,22.5,50.793,38.723a4.947,4.947,0,0,1,1.454,3.561" transform="translate(48.897 30.531)" fill="#dce0e6"></path>
                                                <path id="Path_54" data-name="Path 54" d="M34.785,18l7.761,7.761a2.359,2.359,0,0,1,0,3.333l-8.452,8.452a2.359,2.359,0,0,1-3.333,0L23,29.785Z" transform="translate(42.791 24.425)" fill="#dce0e6"></path>
                                                <path id="Path_55" data-name="Path 55" d="M66.28,30.64A30.64,30.64,0,1,0,35.64,61.28,30.639,30.639,0,0,0,66.28,30.64" transform="translate(18.366)" fill="#dce0e6"></path>
                                                <path id="Path_56" data-name="Path 56" d="M55.138,26.569A23.569,23.569,0,1,0,31.569,50.138,23.569,23.569,0,0,0,55.138,26.569" transform="translate(22.437 4.071)" fill="#fff"></path>
                                                <path id="Path_57" data-name="Path 57" d="M54.5,9H38V27.855H54.5A2.358,2.358,0,0,0,56.855,25.5V11.357A2.358,2.358,0,0,0,54.5,9" transform="translate(63.145 12.212)" fill="#aeb8c2"></path>
                                                <path id="Path_58" data-name="Path 58" d="M21.071,27.01A8.523,8.523,0,0,1,25.7,19.562a4.714,4.714,0,1,0-6.984-4.132,2.357,2.357,0,1,1-4.714,0,9.43,9.43,0,1,1,13.972,8.261,3.881,3.881,0,0,0-2.187,3.319,2.359,2.359,0,1,1-4.714,0" transform="translate(30.579 8.139)" fill="#dce0e6"></path>
                                                <path id="Path_59" data-name="Path 59" d="M19.384,22.714a2.357,2.357,0,1,1,2.357-2.357,2.368,2.368,0,0,1-2.357,2.357" transform="translate(34.67 24.425)" fill="#dce0e6"></path>
                                                <path id="Path_61" data-name="Path 61" d="M18.785,31.714H9.357a2.357,2.357,0,0,1,0-4.714h9.428a2.357,2.357,0,0,1,0,4.714" transform="translate(21.08 36.637)" fill="#f5f5f7"></path>
                                                <path id="Path_62" data-name="Path 62" d="M18.785,35.714H9.357a2.357,2.357,0,0,1,0-4.714h9.428a2.357,2.357,0,0,1,0,4.714" transform="translate(21.08 42.065)" fill="#f5f5f7"></path>
                                                <path id="Path_63" data-name="Path 63" d="M25.458,9.771l2.735-2.735A1.193,1.193,0,0,0,26.506,5.35L23.771,8.085,21.036,5.35A1.193,1.193,0,0,0,19.35,7.036l2.735,2.735L19.35,12.506a1.193,1.193,0,0,0,1.687,1.687l2.735-2.735,2.735,2.735a1.193,1.193,0,0,0,1.687-1.687Z" transform="translate(86.801 20.869)" fill="#dce0e6"></path>
                                            </svg>
                                            <span class="text-[#888888] !font-[500] !text-[16px]">検索結果がありません</span>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <pagination :pagination="pagination"
                            @change-page="changePage"
                            @change-per-page="changePerPage">
                </pagination>
            </div>
        </div>

        <!-- modal detail -->
        <transition name="modal">
            <div v-if="showModalDetail" class="modal-overlay"> <!-- @click.self="closeModalDetail" -->
                <div class="modal-box flex flex-col gap-[25px] !py-[26px] !px-[20px]">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-[10px]">
                            <div @click.stop="loginUser(dataDetail)"
                                 class="button-login w-[30px] h-[30px] flex items-center justify-center text-[#888888] rounded-[5px] !border-[1px] !border-solid !border-[#888888] hover:bg-[#08BF5A] hover:!border-[#08BF5A] hover:text-[#FFFFFF] cursor-pointer">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                    <g id="SVGRepo_iconCarrier">
                                        <path d="M15 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H15M11 16L15 12M15 12L11 8M15 12H3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </g>
                                </svg>
                            </div>
                            <div class="flex flex-col gap-[5px]">
                                <a :href="dataDetail.url_user_detail" class="!text-[#5799DB] text-[14px] font-[400] !underline line-clamp-1 w-[400px] cursor-pointer">
                                    @{{ dataDetail.username }}
                                </a>
                                <span class="text-[#222222] text-[14px] font-[300] underline line-clamp-1 w-[400px]">@{{ dataDetail.email }}</span>
                            </div>
                        </div>
                        <button class="modal-close" @click="closeModalDetail">
                            <span class="flex items-center justify-center w-[25px] h-[25px] hover:text-[#646464] rounded-[50%]">✕</span>
                        </button>
                    </div>
                    <div class="modal-body-v2 flex flex-col gap-[30px]">
                        <div class="flex flex-col gap-[12px]">
                            <div>
                                <span class="text-[#222222] text-[16px] font-[600]">接続LINE公式アカウント</span>
                            </div>
                            <div class="!py-[20px] !border-solid !border-[#DDDDDD] !border-[1px] rounded-[10px]">
                                <div class="!px-[20px] flex flex-col max-h-[350px] overflow-y-auto scroll-custom" v-if="dataDetail.bots && dataDetail.bots.length > 0">
                                    <div class="detail-item !border-b-solid !border-b-[#DDDDDD] !border-b-[1px] !px-[20px] !py-[10px]" v-for="(item,index) in dataDetail.bots">
                                        <div class="flex items-center gap-[5px]">
                                            <div v-if="item.bot_image" class="table-avatar !border-solid !border-[1px] !border-[#DDDDDD] rounded-[50%] w-[30px] h-[30px] overflow-hidden">
                                                <img class="rounded-[50%] w-full h-full object-cover" :src="item.bot_image" alt="" @error="setErrorImg">
                                            </div>
                                            <div v-else class="w-[30px] h-[30px] flex items-center justify-center rounded-[50%]">
                                                @include("admin.user-avatar-default")
                                            </div>
                                            <div class="flex flex-col leading-[22px] flex-1">
                                                <a v-if="item.url_bot_detail" :href="item.url_bot_detail + '?keyword=' + keyword" class="line-clamp-1 w-fit text-[#5799DB] !underline hover:!text-[#FF4D4F] cursor-pointer">
                                                    @{{ item.view_name }}
                                                </a>
                                                <span v-else class="line-clamp-1 w-fit">
                                                    @{{ item.view_name }}
                                                </span>
                                                <span class="text-[#888888] text-[14px] font-[300] line-clamp-1 w-fit">
                                                    @{{ item.display_line_id }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
@endsection
@push('script')
    <script>
        var keyword = "{!! $keyword !!}";
        var domainCurrent = window.location.origin+'/';
        var urlLogin = "{{ env('DOMAIN_WEB_ADMIN') }}";
        if (domainCurrent == "{{ env('DOMAIN_WEB_ADMIN') }}"){
            urlLogin = "{{ env('URL_OUTSIDE_STEP') }}";
        }
        var admin_id = "{!! $adminId !!}";
    </script>
    <script src="/js/vue2.6.12/vue.js"></script>
    <script src="/js/tippy/popper.min.js"></script>
    <script src="/js/tippy/tippy-bundle.umd.min.js"></script>
    <script src="/js/admin/components/pagination.js"></script>
    <script src="/css/vue-toast/index.min.js"></script>
    <script src="/plugins/toastify/toastify-js.js"></script>
    <script src="/js/admin/base/base.js"></script>
    <script src="/js/admin/account/account.js?v={{config("sns-line.version")}}"></script>
@endpush