@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" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
    <link rel="stylesheet" href="{{asset('css/cross_analysis/index.css')}}?v={{config("sns-line.version")}}">
    <style>
        [v-cloak] {
            display: none;
        }

        body {
            background-color: #F5F7FA;
        }

        #crossAnalysisList ::-webkit-scrollbar {
            width: 7px;
        }

        #crossAnalysisList ::-webkit-scrollbar-track {
            background: #fff;
            border-radius: 10px;
        }

        #crossAnalysisList ::-webkit-scrollbar-thumb {
            background: #DDDDDD;
            border-radius: 10px;
        }

        #crossAnalysisList {
            display: flex;
            flex-direction: column;
            height: calc(100vh - 125px);
        }
        #crossAnalysisList input[type=checkbox] {
            margin: 0;
        }

        #crossAnalysisList input[type=checkbox]:focus {
            outline: none;
            box-shadow: none;
        }

        #crossAnalysisList input[type=checkbox]:checked {
            background-image: none;
            background-color: #08bf5a;
        }

        #crossAnalysisList .relative {
            background-color: inherit;
        }

        #crossAnalysisList .relative.active {
            background-color: inherit !important;
        }

        #crossAnalysisList .relative.bg-\[\#F5F5F5\] {
            background-color: #F5F5F5;
        }

        #crossAnalysisList input[type='text']:focus {
            outline: none;
        }

        #crossAnalysisList #pagination .open>.dropdown-menu {
            display: flex;
            flex-direction: column;
        }

        #crossAnalysisList #pagination .active {
            background-color: white !important;
            border: 1px solid #5799DB;
        }

        #crossAnalysisList #pagination .active button {
            color: #5799DB;
        }

        #crossAnalysisList #pagination .dropdown-menu {
            min-width: 103px;
            top: -155px
        }

        .toastMessage::before {
            content: "";
            display: inline-block;
            width: 18px;
            height: 18px;
            background-image: url('/images/circle-check.svg');
            background-size: cover;
            margin-right: 3px;
        }
        .flex-0-auto {
            flex: 0 0 auto;
        }
        .flex-1-auto {
            flex: 1 1 auto;
        }
        .scrollable::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        .scrollable::-webkit-scrollbar-thumb {
            background: var(--line-color) 0% 0% no-repeat padding-box;
            border-radius: 4px;
        }
        .scrollable::-webkit-scrollbar-thumb:hover {
            background: #c7c1c1;
        }
        .scrollable {
            margin-right: -5px !important;
            padding-right: 5px !important;
        }
        .selected-item {
            background: #F4FBF2;
        }
        .tb-row:hover {
            background: #F4FBF2;
        }

        input::placeholder {
            color: #B4B4B4;
            font-size: 14px;
            font-weight: 300;
        }
    </style>
@endpush
@section('content')
    <div id="crossAnalysisList" class="text-[#222222] text-[14px] font-[300] my-[21px] mx-[21px]" v-cloak>
        <div v-if="isFreePlan" class="flex items-center justify-content-between px-[21px] py-[13px] rounded-[10px] shadow-[0px_1px_2px_#00000029]" style="background-image: linear-gradient(to right, #10CFD6, #1DE275);">
            <div class="h-[35px]">
                <div class="font-[600] text-[#FFFFFF] mt-[-5px]">
                    有料プランに<a :href="'/admin/bot-add?upgrade_bot_id=' + botHashId" target="_blank" class="focus:text-[16px] focus:font-[600] text-[#FEFE00] focus:text-[#FEFE00] hover:text-[#FEFE00] text-[16px] underline hover:underline font-[600] hover:opacity-80">アップグレード</a>すると、クロス分析を<span class="text-[#FEFE00] text-[16px]">無制限</span>に作成できます。
                </div>
                <div class="font-[400] text-[12px] text-[#FFFFFF]">
                    フリープランの作成上限は2つまでです。
                </div>
            </div>
            <div class="h-[35px]">
                <a :href="'/admin/bot-add?upgrade_bot_id=' + botHashId" target="_blank"
                   class="focus:text-[16px] focus:font-[600] bg-[#fff] rounded-[5px] w-[200px] h-[35px] flex items-center justify-center text-[#10CFD6] focus:text-[#10CFD6] hover:text-[#10CFD6] text-[16px] font-[600] hover:opacity-80 focus:no-underline">
                    <i class="fas fa-sparkles mr-[7px] shrink-0"></i> アップグレード
                </a>
            </div>
        </div>
        <div class="px-[21px] rounded-[10px] my-[17px] flex-0-auto">
            <div class="font-[600] text-[18px]">クロス分析</div>
        </div>

        <div class="flex flex-1-auto overflow-hidden">
            <div class="w-[250px] bg-[#FFFFFF] mr-[20px] px-[10px] py-[19px] rounded-[10px] flex-0-auto" v-if="showLeftMenuFolder">
                {{-- left menu folder --}}
                <div class="flex text-[12px]">
                    <div class="relative">
                        <button class="w-[110px] h-[40px] border border-solid border-[#DDDDDD] rounded-[5px] flex items-center justify-center mr-[10px] hover:opacity-70"
                                @click="showAddGroupPopup">
                            <i class="mr-[3px] fal fa-plus"></i>
                            フォルダ追加
                        </button>
                        <div class="hide p-[10px] absolute left-0 top-[45px] w-[233px] bg-[#FFF] border border-solid border-[#DDD] rounded-[5px] shadow-md z-[300]"
                             id="myPopup">
                            <span class="font-[700]">フォルダ名</span>
                            <div class="flex my-[7px] items-center">
                                <input class="border border-solid border-[#BBB] rounded-[5px]" maxlength="15"
                                       type="text" id="cat_txt" v-model="name_group">
                                <span class="font-[700] text-[12px] ml-[3px]">@{{ countTex(name_group) }}/15</span>
                            </div>
                            <div class="flex justify-content-between">
                                <button class="text-[15px] font-[700] w-[82px] py-[7px] rounded-[5px] bg-[#08bf5a] text-[#FFF] hover:opacity-70"
                                        @click="addGroupV2()">決定
                                </button>
                                <button class="text-[15px] font-[700] p-[7px] rounded-[5px] bg-[#96adb2] text-[#FFF] hover:opacity-70"
                                        @click="closeAddPopup">キャンセル
                                </button>

                            </div>
                        </div>
                    </div>
                    <button class="w-[110px] h-[40px] border border-solid border-[#DDDDDD] rounded-[5px] flex items-center justify-center hover:opacity-70"
                            @click="showModalSortFolder()" data-toggle='modal'
                            data-target='#modalSortFolder'>
                        <i class="mr-[4px] fal fa-arrows"></i>
                        並べ替え
                    </button>
                </div>
                <div class="mt-[14px] scrollable" style="height: calc(100% - 60px); overflow-y: auto; overflow-x: hidden">
                    <div class="tag_left">
                        <input type="hidden" class="active" :data-id="group_open">
                    </div>
                    <div class="w-[230px] h-[40px] rounded-[5px] flex items-center px-[14px] cursor-pointer hover:bg-[#F5F5F5]"
                         :class="(group_open == 0) ? 'bg-[#F5F5F5]' : null" @click="showGroup(0)">
                        未分類 (@{{ count_default }})
                    </div>
                    <div class="relative rounded-[5px]"
                         v-for="(category, index) in sortedCategories"
                         :id="'group_'+category.id"
                         :data-id="category.id"
                         @click="showGroup(category.id)">
                        <div class="w-[230px] h-[40px] rounded-[5px] flex items-center justify-content-between px-[14px] cursor-pointer mt-[10px] hover:bg-[#F5F5F5]"
                             :class="(category.id == group_open) ? 'bg-[#F5F5F5]' : null">
                            <div>
                                @{{ category.name }} (@{{ category.count }})
                            </div>
                            <div class="btn-group px-[10px] mr-[-10px] z-[100]" v-if="category.id == group_open" style="position: relative">
                                <i class="far fa-ellipsis-v ic-menu"></i>
                                <ul class="dropdown-menu action-broadcast !top-[20px] !left-[-132px] !absolute"
                                    :class="{ 'last-sub-menu': index == sortedCategories.length - 1 }"
                                    style="font-weight: 500; color: #222222; margin-top: 0">
                                    <li class="focus-pointer px-[10px]" @click="showEditFolder(index)">
                                        <div style="cursor: pointer;">
                                            <i class="fal fa-edit"></i>
                                            名称変更
                                        </div>
                                    </li>
                                    <li class="focus-pointer px-[10px]" @click="deleteGroup(category.id)">
                                        <div style="cursor: pointer">
                                            <i class="fal fa-trash-alt"></i>
                                            フォルダ削除
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="w-[1014px] hide"></div>
            <div class="d-flex flex-column bg-[#FFFFFF] px-[27px] py-[19px] rounded-[10px] flex-1-auto">
                {{-- cross analysis list --}}
                <div class="flex justify-content-between items-center">
                    <div class="flex">
                        <button v-on:click="showCreateItem()"
                                class="w-[110px] h-[40px] rounded-[5px] flex items-center justify-center mr-[10px] text-[#FFFFFF] bg-[#5799DB] hover:opacity-70">
                            <i class="mr-[3px] fal fa-plus"></i>
                            新規作成
                        </button>
                        <button class="w-[110px] h-[40px] border border-solid border-[#DDDDDD] rounded-[5px] flex items-center justify-center hover:opacity-70"
{{--                                data-toggle='modal'--}}
{{--                                data-target='#modalSortItem'--}}
                                data-type="tag" data-id="" data-callback="tag_sorted"
                                v-on:click="showModalSortItemsV2()">
                            <i class="mr-[4px] fal fa-arrows"></i>
                            並べ替え
                        </button>
                    </div>
                    <div class="btn-right-top gr-search"
                         style="position: relative;align-items: center; background: #ffffff">
                        <i class="far fa-search"
                           @click="is_show_search = !is_show_search"
                           style="color: #888888 !important; font-size: 20px; width: 40px; height: 40px; display: flex;align-items: center; justify-content: center"></i>
                        <input type="text" @keyup.enter="searchHandler()" class="form-control search_for_temp"
                               v-model="input_search_keyword"
                               placeholder="管理名を入力"
                               style="padding: 0 35px 2px 0px;
                                                  height: 38px;
                                                  border: none;
                                                  box-shadow: none;
                                                  width: 310px;
                                                  font-size: 13px;
                                                  transition: 0.4s;
                                                  color: #222222"
                               :class="{ 'hide-search': is_show_search == 0 }"
                        >

                        <img @click="clearSearch" v-if="input_search_keyword && is_show_search"
                             style="width: 15px;
                                            transform: translateY(-50%);
                                            top: 50%;
                                            right: 10px;
                                            position: absolute;
                                            cursor: pointer;
                                            width: 20px;"
                             src="/images/icon-clear-search.png">
                    </div>
                </div>

                <div class="mt-[18px] overflow-auto" style="height: calc(100% - 60px)">
                    <div class="h-[40px] flex items-center bg-[#F5F5F5] rounded-[5px] sticky top-0 z-[5]">
                        <div class="w-[48px] flex items-center justify-center">
                            <input type="checkbox" name="" value="" v-model="selectAll"
                                   class="w-[15px] h-[15px] border border-solid border-[#DDDDDD] rounded-[3px] cursor-pointer bg-[#FFF]">
                        </div>
                        <div class="flex flex-1-auto items-center">
                            <span class="mr-[4px]">管理名</span>
                            <div class="flex flex-col cursor-pointer" @click="sortItems('name')">
                                <i class="fal fa-angle-up font-[600]"></i>
                                <i class="fal fa-angle-down mt-[-5px] font-[600]"></i>
                            </div>
                        </div>

                        <div class="flex w-[135px] items-center">
                            <span class="mr-[4px]">作成日</span>
                            <div class="flex flex-col cursor-pointer" @click="sortItems('created_at')">
                                <i class="fal fa-angle-up font-[600]"></i>
                                <i class="fal fa-angle-down mt-[-5px] font-[600]"></i>
                            </div>
                        </div>

                        <div class="flex w-[127px] items-center">
                            <span class="mr-[4px]">最終条件設定日</span>
                            <div class="flex flex-col cursor-pointer" @click="sortItems('last_time_save')">
                                <i class="fal fa-angle-up font-[600]"></i>
                                <i class="fal fa-angle-down mt-[-5px] font-[600]"></i>
                            </div>
                        </div>

                        <div class="flex justify-center w-[184px] text-center">
                            <span class="pr-[30px]">分析リスト</span>
                        </div>
                    </div>
                    <div style="height: calc(100% - 45px);">
                        <div class="h-[60px] flex items-center border-b-[1px] border-solid border-[#DDDDDD] cursor-pointer tb-row"
                             v-for="(item,index) in items"
                             :class="{ 'selected-item': selected.includes(item.id) }"
                             @click="window.location.href = '/basic/cross-analysis/edit/'+item.id"
                        >
                            <div class="w-[48px] flex items-center justify-center shrink-0">
                                <input class="m-0 w-[15px] h-[15px] border border-solid border-[#DDDDDD] rounded-[3px] cursor-pointer bg-[#FFF]"
                                       type="checkbox" :id="'checkbox_'+item.id" name="check_item[]" :value="item.id"
                                       @click.stop
                                       v-model="selected">
                            </div>
                            <div class="flex flex-1-auto pr-[10px]">
                                <a class="font-[600] focus:font-[600] focus:no-underline hover:text-[#222222] hover:opacity-70 line-clamp-1">
                                    @{{ item.name }}
                                </a>
                            </div>

                            <div class="shrink-0 w-[135px]">
                                @{{formatDate(item.created_at)}}
                            </div>

                            <div class="shrink-0 w-[127px]">
                                @{{formatDate(item.last_time_save)}}
                            </div>

                            <div class="flex justify-center w-[154px] font-[600] text-[12px] shrink-0">
                                <a class="w-[120px] h-[35px] border border-solid border-[#08BF5A] rounded-[3px] flex items-center justify-center text-[#08BF5A] hover:text-[#fff] hover:bg-[#08BF5A] focus:text-[12px] focus:text-[#fff] focus:bg-[#08BF5A] focus:no-underline font-[600] focus:font-[600]"
                                   :href="'/basic/cross-analysis/result-cross/'+item.id">
                                    <i class="far fa-list mt-[2px]"></i>
                                    リストを表示
                                </a>
                            </div>
                            <div class="more text-[#E0E0E0] mr-[10px]" style="padding: unset; position: relative">
                                <i class="far fa-ellipsis-h ic-menu" style="font-size: 20px;"></i>
                                <ul class="dropdown-menu" :class="{ 'last-menu-qr': index == items.length - 1 }"
                                    style="min-width: 100px; top:-10px; left: -100px;">
                                    <li class="focus-pointer-item">
                                        <div style="font-weight: 300; color: rgb(34, 34, 34) !important; padding: 7px 10px"
                                             @click.stop="copyItem(item.id)">
                                            <i class="far fa-copy"></i>
                                            コピー
                                        </div>
                                    </li>
                                    <li class="focus-pointer-item">
                                        <div style="cursor: pointer; font-weight: 300; color: rgb(34, 34, 34) !important; padding: 7px 10px"
                                             @click.stop="deleteItem(item.id)">
                                            <i class="fal fa-trash-alt"></i>
                                            削除
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>


                        {{-- list empty --}}
                        <div v-if="items.length <= 0" class="flex items-center justify-center w-full h-full">
                            <div class="text-center">
                                <div class="flex justify-center" style="margin-bottom: 26px">
                                    <img src="/images/group_4483.svg" alt="" />
                                </div>
                                <div class="mb-[17px]" style="color: #8C8C8C; font-weight: 400; font-size: 18px">まだデータがありません</div>
                                <div style="margin-bottom: 9px; font-size: 15px">
                                    <button class="hover:opacity-70" v-on:click="showCreateItem()" style="color: #5799DB; text-decoration: underline; font-weight: 300">新規作成</button>
                                    <span style="color: #B7B7B7">するとここにデータが表示されます</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="flex mt-[20px] flex-0-auto">
            <div class="flex-0-auto h-[70px] bg-[#FFFFFF] rounded-[10px] mr-[20px] flex items-center justify-center px-[15px]" :class="showLeftMenuFolder ? 'w-[250px]' : null">
                <div class="text-[#888888] border border-solid border-[#DDDDDD] rounded-[4px] w-[20px] h-[20px] flex items-center justify-center mr-[4px] mt-[2px] cursor-pointer hover:opacity-70"
                     @click="toggleLeftMenuFolder">
                    <i class="fas" :class="showLeftMenuFolder ? 'fa-caret-left' : 'fa-caret-right'"></i>
                </div>
                <span v-if="showLeftMenuFolder" @click="toggleLeftMenuFolder" class="cursor-pointer">フォルダを非表示</span>
            </div>
            <div class="flex-1-auto h-[70px] bg-[#FFFFFF] rounded-[10px] py-[15px] px-[27px] flex items-center justify-content-between">
                <div>
                    <button class="btn btn-sns-line btn-sns-line-outline-default btn_folder_change px-[10px]"
                            :disabled="selected == false" data-toggle='modal'
                            :style="selected == false ? '' : 'background-color: #589adc; color: #fff !important'"
                            data-target='#modalMoveFolder'>
                        <i class="fas fa-folder"></i>
                        一括フォルダ変更
                    </button>
                    <button class="btn btn-sns-line btn-sns-line-outline-default btn_bulk_delete"
                            :style="selected == false ? '' : 'background-color: #f44236; color: #fff !important'"
                            :disabled="selected == false" @click="selected ? deleteItemsInfo() : null">
                        <i class="fal fa-trash-alt"></i>
                        一括削除
                    </button>
                    <a href="{{ route('crossAnalysis.removed') }}" class="href-remove ml-[14px] underline hover:text-[#222] hover:underline hover:opacity-70">削除したアイテム</a>
                </div>

                <div>
                    @include('basic.cross_analysis.v2.components.pagination')
                </div>
            </div>
        </div>
        <input type="hidden" id="folder_cookie"  value="{{$folderCookie}}">

        @include('basic.cross_analysis.v2.modal.sort_folder')
        @include('basic.cross_analysis.v2.modal.move_folder')
        @include('basic.cross_analysis.v2.modal.sort_cross')
        @include('basic.cross_analysis.v2.modal.create')
        @include('basic.cross_analysis.v2.modal.noti_device')
    </div>
@endsection

@push('js')
    <script>
        var token = "{!! csrf_token() !!}";
        var group_id = '{{ $folderCookie }}';
        var botHashId = '{{ $botHashId }}';
        var isFreePlan = '{{ $isFreePlan }}';
    </script>
    <script src="/js/form_answer/vee-validate.rc7.min.js"></script>
    <script src="/js/form_answer/vee-validate_ja.min.js"></script>
    <script src="/js/tailwindcss.js"></script>
    <script src="/chat_files/clipboard.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
    <script src="/js/cross_analysis/v2/pagination.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/cross_analysis/v2/index.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/cross_analysis/index.js?v={{config("sns-line.version")}}"></script>
@endpush