@inject('menuService', 'App\Services\MenuService')
@extends('layout.admin_v2.main')

@section('title')
    Top
@endsection

@push('css')
    <link rel="stylesheet" href="/css/vue-toast/index.css">
    <link rel="stylesheet" href="/plugins/toastify/toastify.min.css">
    <link rel="stylesheet" href="/css/tippy/tippy.css">
    <link rel="stylesheet" href="/css/admin/top.css?v={{config("sns-line.version")}}">
    <script src="/js/tailwind/browser@4.js"></script>
@endpush

@section('content')
    <div id="vue-element" class="flex flex-col !p-[20px] gap-[75px] content-fit-vh" v-cloak>
        <div class="flex justify-center !mt-[75px]">
            <img class="w-[300px]" src="/admin_v2/logo_v2.png" alt="">
        </div>
        <div class="flex justify-center">
            <div class="admin-v2-search-wrapper search-focus relative !bg-[#FFFFFF]">
                <input class="top-search top-search-bottom-flat w-full text-center !pl-[20px] !pr-[40px]" type="text"
                       id="top-page-input-search"
                       :class="{ 'is-left': isFocus || keyword }"
                       v-model="keyword"
                       :placeholder="placeholder"
                       @focus="onFocus"
                       @blur="onBlur"
                       @keydown.enter="searchUser"
                @if(!$menuService->isAccessRouter('accountManagementFilter'))
                    disabled
                @endif
                >
                <div class="absolute top-[14px] right-[17px] text-[#888888] cursor-pointer" @if($menuService->isAccessRouter('accountManagementFilter')) @click="searchUser" @else style="cursor: not-allowed" @endif>
                    <svg width="20" height="20" viewBox="0 -0.5 25 25" 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 fill-rule="evenodd" clip-rule="evenodd" d="M5.5 11.1455C5.49956 8.21437 7.56975 5.69108 10.4445 5.11883C13.3193 4.54659 16.198 6.08477 17.32 8.79267C18.4421 11.5006 17.495 14.624 15.058 16.2528C12.621 17.8815 9.37287 17.562 7.3 15.4895C6.14763 14.3376 5.50014 12.775 5.5 11.1455Z"
                                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M15.989 15.4905L19.5 19.0015" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </g>
                    </svg>
                </div>

                <transition name="dropdown">
                    <div v-if="showDropdown" class="search-dropdown left-0 right-0 mt-0 bg-white z-50"> <!-- max-h-[400px] overflow-y-auto -->
                        <div v-for="(item,index) in login_history" :key="index" class="flex items-center gap-3 !px-[20px] !py-[10px]"
                             @mousedown.prevent="selectUser(item)">
                            <div class="flex items-center justify-between w-[100%]">
                                <div class="flex items-center gap-[10px] w-[100%]">
                                    <div class="tooltip-wrapper">
                                        <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-[#DDDDDD] 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>
                                        <span class="tooltip-content">ログイン</span>
                                    </div>

                                    <div class="flex flex-col text-[14px]">
                                        <div class="tooltip-wrapper w-fit">
                                            <span class="username font-[400] text-[#222222] hover:text-[#5799DB] hover:underline !cursor-pointer" @click="goToUserDetail(item)"><!-- truncate inline-block max-w-[320px] -->
                                                @{{item.username}}
                                            </span>
                                            <span class="tooltip-content">@{{ item.username }}</span>
                                        </div>
                                        <span class="font-[300] text-[#888888]">@{{item.email}}</span><!-- truncate inline-block max-w-[320px] -->
                                    </div>
                                </div>

                                <div class="w-[18px] h-[18px] bg-[#E0E0E0] hover:bg-[#E9E9E9] rounded-[50%] flex items-center justify-center text-[#FFFFFF] cursor-pointer"
                                     @click.stop="deleteHistory(item)">
                                    <svg width="12" height="12" 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="M20.7457 3.32851C20.3552 2.93798 19.722 2.93798 19.3315 3.32851L12.0371 10.6229L4.74275 3.32851C4.35223 2.93798 3.71906 2.93798 3.32854 3.32851C2.93801 3.71903 2.93801 4.3522 3.32854 4.74272L10.6229 12.0371L3.32856 19.3314C2.93803 19.722 2.93803 20.3551 3.32856 20.7457C3.71908 21.1362 4.35225 21.1362 4.74277 20.7457L12.0371 13.4513L19.3315 20.7457C19.722 21.1362 20.3552 21.1362 20.7457 20.7457C21.1362 20.3551 21.1362 19.722 20.7457 19.3315L13.4513 12.0371L20.7457 4.74272C21.1362 4.3522 21.1362 3.71903 20.7457 3.32851Z"
                                                  fill="currentColor"></path>
                                        </g>
                                    </svg>
                                </div>
                            </div>
                            <div v-if="false" class="flex items-center justify-between flex-1">
                                <div>
                                    <div class="flex items-center gap-[10px]" v-if="item.is_loa">
                                        <div class="flex justify-end w-[60px] !border-l-[1px] !border-l-solid !border-l-[#DDDDDD]">
                                            <div class="w-[30px] h-[30px] rounded-[50%] !border-[1px] !border-solid !border-[#DDDDDD]"></div>
                                        </div>
                                        <div class="flex flex-col text-[14px]">
                                            <div class="tooltip-wrapper">
                                                <span class="user-email font-[400] text-[#222222] truncate inline-block max-w-[320px] hover:text-[#5799DB] hover:underline !cursor-pointer">
                                                    @{{item.username}}
                                                </span>
                                                <span class="tooltip-content">@{{ item.username }}</span>
                                            </div>
                                            <span class="font-[300] text-[#888888] truncate inline-block max-w-[320px]">@{{item.email}}</span>
                                        </div>
                                    </div>
                                    <div class="flex items-center gap-[10px]" v-else>
                                        <div class="flex justify-end w-[100px] !border-l-[1px] !border-l-solid !border-l-[#DDDDDD]">
                                            <span class="font-[400] text-[#222222]">LOA未接続</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="w-[18px] h-[18px] bg-[#E0E0E0] hover:bg-[#E9E9E9] rounded-[50%] flex items-center justify-center text-[#FFFFFF] cursor-pointer"
                                     @click.stop="deleteHistory(item)">
                                    <svg width="12" height="12" 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="M20.7457 3.32851C20.3552 2.93798 19.722 2.93798 19.3315 3.32851L12.0371 10.6229L4.74275 3.32851C4.35223 2.93798 3.71906 2.93798 3.32854 3.32851C2.93801 3.71903 2.93801 4.3522 3.32854 4.74272L10.6229 12.0371L3.32856 19.3314C2.93803 19.722 2.93803 20.3551 3.32856 20.7457C3.71908 21.1362 4.35225 21.1362 4.74277 20.7457L12.0371 13.4513L19.3315 20.7457C19.722 21.1362 20.3552 21.1362 20.7457 20.7457C21.1362 20.3551 21.1362 19.722 20.7457 19.3315L13.4513 12.0371L20.7457 4.74272C21.1362 4.3522 21.1362 3.71903 20.7457 3.32851Z"
                                                  fill="currentColor"></path>
                                        </g>
                                    </svg>
                                </div>
                            </div>
                        </div>

                        <div v-if="login_history.length === 0" class="!py-[20px] text-center absolute">
                            <span class="invisible">該当するユーザーがありません</span>
                        </div>
                    </div>
                </transition>

                <!-- +クイックログインを登録 -->
            </div>


        </div>

        <div v-if="favorites.length === 0" class="text-center">
            <span @click="openCreateModal" class="text-[#5799DB] text-[16px] font-[300] underline cursor-pointer hover:text-[red]">+クイックログインを登録</span>
        </div>

        <!-- danh sách account -->
        <div class="account-list-wrapper flex flex-wrap gap-[20px]">
            <div v-for="(item,index) in favorites" class="account-list-item w-fit relative" :key="index" @click="loginUser(item)">
                <div class="tooltip-wrapper">
                    <div class="account-item w-[150px] h-[120px] !border-[1px] border-[#DDDDDD] !border-solid rounded-[10px]
                    flex flex-col items-center justify-start cursor-pointer hover:!border-[#08BF5A] hover:bg-[#F4FBF2]">
                        <div class="w-[40px] h-[40px] flex items-center justify-center rounded-[50%] my-[10px]">
                            @include("admin.user-avatar-default")
                        </div>
                        <span class="text-[#888888] text-[14px] font-[300] max-w-[120px] line-clamp-2 account-name" style="word-wrap: break-word;">@{{ item.username }}</span>
                    </div>
                    <span class="tooltip-content">@{{ item.username }}（@{{ item.email }}）にログイン</span>
                </div>
                <div @click.stop="toggleMenu(index)" class="absolute top-[0px] right-[0px] leading-[0px] !p-[10px] cursor-pointer">...</div>

                <transition name="popup">
                    <div v-if="activeMenuIndex === index" class="account-popup absolute left-1/2 -translate-x-1/2 bottom-full !mb-[10px] z-50">
                        <div class="popup-box">
                            <div class="popup-item" @click.stop="openCreateModal">新規追加</div>
                            <div class="popup-item" @click.stop="openSortModal">並べ替え・削除</div>
                        </div>
                    </div>
                </transition>
            </div>

            <div v-if="false" class="account-list-control w-fit" style="position: relative;">
                <div @click.stop="toggleMenu"
                        class="w-[150px] h-[120px] !border-[1px] !border-[#DDDDDD] !border-solid rounded-[10px] flex flex-col items-center justify-center gap-[10px] cursor-pointer">
                    <div class="w-[40px] h-[40px] !border-[1px] !border-[#DDDDDD] !border-solid rounded-[50%]"></div>
                    <span class="text-[#888888] text-[14px] font-[300] max-w-[120px] line-clamp-2">ユーザー名</span>
                </div>

                <transition name="popup">
                    <div v-if="showMenu" class="account-popup absolute left-1/2 -translate-x-1/2 bottom-full !mb-[10px] z-50">
                        <div class="popup-box">
                            <div class="popup-item" @click="openCreateModal">新規追加</div>
                            <div class="popup-item" @click="openSortModal">並べ替え・削除</div>
                        </div>
                    </div>
                </transition>
            </div>
        </div>

        <!-- modal add account favorite -->
        <transition name="modal">
            <div v-if="showAddAccountModal" class="modal-overlay"> <!-- @click.self="closeAddAccountModal" -->
                <div class="modal-box flex flex-col gap-[25px] !py-[26px] !px-[20px]">
                    <div class="flex items-center justify-between">
                        <span class="!font-[600] !text-[16px] text-[#222222]">クイックログイン 新規追加</span>
                        <button class="modal-close" @click="closeAddAccountModal">
                            <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-[10px]">
                            <div class="!font-[600] !text-[14px] text-[#222222]">追加したいアカウントを検索</div>
                            <div>
                                <div class="modal-search">
                                    <input @keydown.enter="searchAccount" v-model="searchAccountKeyword" class="!w-full !h-[40px] !p-[0_40px_0_14px] rounded-[5px] border-solid border-[1px] border-[#DDDDDD] outline-none" type="text" placeholder="ユーザー名・メールアドレス" />
                                    <span @click="searchAccount" class="search-icon cursor-pointer text-[#888888]">
                                        <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="#FFFFFF"></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="#FFFFFF"></rect>
                                                    </clipPath>
                                                </defs>
                                            </g>
                                        </svg>
                                    </span>
                                </div>
                                <div v-if="searchAccountError">
                                    <span class="!text-[13px] text-[red] font-[400]">@{{ searchAccountError }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="flex flex-col gap-[10px]" v-if="searchAccountResult.length > 0">
                            <div class="!font-[600] !text-[14px] text-[#222222]">検索結果</div>
                            <div class="rounded-[10px] !border-[1px] !border-[#DDDDDD] !border-solid !px-[12px] max-h-[350px] overflow-y-auto scroll-custom" @scroll="onSearchAccountScroll">
                                <div v-for="(item,index) in searchAccountResult" :key="index"
                                        class="result-item !py-[10px] flex items-center gap-[10px] !border-b-[1px] !border-b-[#DDDDDD] !border-solid">
                                    <div class="btn-add-wrapper !px-[10px]" data-tippy-content="追加する">
                                        <div @click="addAccount(item)" class="text-[#08BF5A] !border-[1px] !border-[#08BF5A] !border-solid rounded-[5px] w-[30px] h-[30px] flex items-center justify-center cursor-pointer hover:bg-[#08BF5A] hover:text-[#FFFFFF]">
                                            <svg width="16" height="16" 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="M13 3C13 2.44772 12.5523 2 12 2C11.4477 2 11 2.44772 11 3V11H3C2.44772 11 2 11.4477 2 12C2 12.5523 2.44772 13 3 13H11V21C11 21.5523 11.4477 22 12 22C12.5523 22 13 21.5523 13 21V13H21C21.5523 13 22 12.5523 22 12C22 11.4477 21.5523 11 21 11H13V3Z"
                                                          fill="currentColor"></path>
                                                </g>
                                            </svg>
                                        </div>
                                    </div>

                                    <div class="user-info-wrapper flex items-center gap-[10px]">
                                        <div class="w-[40px] h-[40px] flex items-center justify-center rounded-[50%]">
                                            @include("admin.user-avatar-default")
                                        </div>
                                        <div class="flex flex-col">
                                            <div class="font-[400] text-[14px] text-[#222222] max-w-[400px] truncate">@{{ item.username }}</div>
                                            <div class="font-[300] text-[14px] text-[#888888] max-w-[400px] truncate">@{{ item.email }}</div>
                                        </div>
                                    </div>
                                </div>
                                <div v-if="searchAccountLoading && searchAccountPage > 1" class="!py-[10px] text-center text-[13px] text-[#888888]">
                                    読み込み中...
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>

        <!-- modal sort account favorite -->
        <transition name="modal">
            <div v-if="showSortAccountModal" class="modal-overlay"> <!-- @click.self="closeSortAccountModal" -->
                <div class="modal-box flex flex-col gap-[25px] !py-[26px] !px-[30px]">
                    <div class="flex items-center justify-between !px-[10px]">
                        <span class="font-[600] text-[16px] text-[#222222]">並べ替え・削除</span>
                        <button class="modal-close" @click="closeSortAccountModal">
                            <span class="flex items-center justify-center w-[21px] h-[21px] hover:text-[#646464] rounded-[50%]">✕</span>
                        </button>
                    </div>
                    <div class="modal-body-v2">
                        <div class="sort-list-wrapper h-[333px] overflow-y-auto scroll-custom !pr-[10px]">
                            <draggable
                                    class="flex flex-col gap-[15px]"
                                    v-model="sortAccountData"
                                    handle=".cursor-move"
                                    item-key="id"
                                    animation="200"
                                    ghost-class="drag-ghost"
                                    chosen-class="drag-chosen"
                                    @end="onSortEnd">

                                <div v-for="item in sortAccountData" :key="item.id"
                                        class="sort-item flex items-center justify-between">
                                    <div class="text-[#888888] cursor-move">
                                        <svg width="36" height="36" viewBox="0 -0.5 25 25" 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="M6.5 11.75C6.08579 11.75 5.75 12.0858 5.75 12.5C5.75 12.9142 6.08579 13.25 6.5 13.25V11.75ZM18.5 13.25C18.9142 13.25 19.25 12.9142 19.25 12.5C19.25 12.0858 18.9142 11.75 18.5 11.75V13.25ZM6.5 15.75C6.08579 15.75 5.75 16.0858 5.75 16.5C5.75 16.9142 6.08579 17.25 6.5 17.25V15.75ZM18.5 17.25C18.9142 17.25 19.25 16.9142 19.25 16.5C19.25 16.0858 18.9142 15.75 18.5 15.75V17.25ZM6.5 7.75C6.08579 7.75 5.75 8.08579 5.75 8.5C5.75 8.91421 6.08579 9.25 6.5 9.25V7.75ZM18.5 9.25C18.9142 9.25 19.25 8.91421 19.25 8.5C19.25 8.08579 18.9142 7.75 18.5 7.75V9.25ZM6.5 13.25H18.5V11.75H6.5V13.25ZM6.5 17.25H18.5V15.75H6.5V17.25ZM6.5 9.25H18.5V7.75H6.5V9.25Z"
                                                      fill="currentColor"></path>
                                            </g>
                                        </svg>
                                    </div>
                                    <div class="!border-[1px] !border-[#DDDDDD] !border-solid rounded-[10px] w-[450px] !px-[16px] !py-[3px] flex items-center gap-[10px]">
                                        <div class="w-[40px] h-[40px] flex items-center justify-center rounded-[50%]">
                                            @include("admin.user-avatar-default")
                                        </div>
                                        <div class="flex flex-col">
                                            <span class="font-[400] text-[14px] text-[#222222] max-w-[400px] truncate">@{{ item.username }}</span>
                                            <span class="font-[400] text-[14px] text-[#888888] max-w-[400px] truncate">@{{ item.email }}</span>
                                        </div>
                                    </div>
                                    <div class="text-[#000000] cursor-pointer !p-[3px] hover:bg-[#E0E0E0] rounded-[50%]" @click="deleteFavorite(item)">
                                        <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">
                                                <path d="M18 6L17.1991 18.0129C17.129 19.065 17.0939 19.5911 16.8667 19.99C16.6666 20.3412 16.3648 20.6235 16.0011 20.7998C15.588 21 15.0607 21 14.0062 21H9.99377C8.93927 21 8.41202 21 7.99889 20.7998C7.63517 20.6235 7.33339 20.3412 7.13332 19.99C6.90607 19.5911 6.871 19.065 6.80086 18.0129L6 6M4 6H20M16 6L15.7294 5.18807C15.4671 4.40125 15.3359 4.00784 15.0927 3.71698C14.8779 3.46013 14.6021 3.26132 14.2905 3.13878C13.9376 3 13.523 3 12.6936 3H11.3064C10.477 3 10.0624 3 9.70951 3.13878C9.39792 3.26132 9.12208 3.46013 8.90729 3.71698C8.66405 4.00784 8.53292 4.40125 8.27064 5.18807L8 6"
                                                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                </path>
                                            </g>
                                        </svg>
                                    </div>
                                </div>

                            </draggable>
                        </div>
                    </div>
                    <div class="modal-footer-v2 flex justify-center">
                        <button @click="saveSort"
                                class="w-[200px] h-[40px] rounded-[5px] bg-[#08BF5A] !text-[#FFFFFF] flex items-center justify-center hover:bg-[#23814D]">保存</button>
                    </div>
                </div>
            </div>
        </transition>
    </div>
@endsection

@push('script')
    <script>
        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/sortable/Sortable.min.js"></script>
    <script src="/js/sortable/vuedraggable.umd.min.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/top_v2.js?v={{config("sns-line.version")}}"></script>
@endpush