@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/conversion/style.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="{{asset('css/cross_analysis/create.css')}}?v={{config("sns-line.version")}}">

    <style>
        #crossAnalysisResult .relative {
            background-color: inherit;
        }

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

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

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

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

        #crossAnalysisResult .active button {
            color: #5799DB;
        }

        #crossAnalysisResult .dropdown-menu {
            min-width: 97px;
        }
    </style>
@endpush
@section('content')
    <div id="crossAnalysisResult" class="text-[#222222] text-[14px] font-[300] pr-[10px]" v-cloak>
        {{-- header--}}
        <div class="w-full max-w-[1250px] bg-[#FFFFFF] px-[21px] rounded-[10px] flex items-center justify-content-between py-[19px] mt-[18px]">
            <div>
                <div class="text-[#888888] flex items-center">
                    <a href="{{ route('index.crossAnalysis') }}" class="hover:text-[#888888] hover:opacity-70">
                        TOP
                    </a>
                    <div class="ml-[15px]">> 分析リスト</div>
                </div>

                <div class="text-[#222] text-[18px] font-[600]">
                    分析リスト
                </div>
            </div>
            <div class="flex">
                <div class="ml-[20px]">
                    <div class="text-[#222] text-[14px] font-[300]">管理名</div>
                    <div class="text-[#222] text-[14px] font-[300] w-[300px] h-[35px] bg-[#F8F8F8] border border-solid border-[#DDDDDD] rounded-[5px] flex items-center px-[8px] mt-[9px]">
                        <div class="w-full truncate overflow-hidden">
                            {{ $crossName }}
                        </div>
                    </div>
                </div>
                <div class="ml-[20px]">
                    <div class="text-[#222] text-[14px] font-[300]">フォルダ</div>
                    <div class="text-[#222] text-[14px] font-[300] w-[300px] h-[35px] bg-[#F8F8F8] border border-solid border-[#DDDDDD] rounded-[5px] flex items-center px-[8px] mt-[9px]">
                        <div class="w-full truncate overflow-hidden">
                            {{ $groupName }}
                        </div>
                    </div>
                </div>
            </div>
        </div>


        {{-- section table data--}}
        <div class="min-w-[1000px] max-w-[100%] inline-block bg-[#FFFFFF] rounded-[10px] mt-[30px] p-0">
            {{--action tools bar--}}
            <div class="px-[25px] pt-[19px] flex items-center">
                <div class="group" style="position: relative">
                    <select class="w-[240px] h-[40px] rounded-[5px] border border-solid border-[#E0E0E0] cursor-pointer text-[14px] font-[400]"
                            v-on:change="filterHistory()"
                            v-model="filter_date">
                        <option v-if="listDateOption.length > 0" v-for="(item,index) in listDateOption" :value="item.value" class="text-[14px] font-[400]">
                            @{{ item.text }}
                        </option>
                    </select>
                    <div class="i-tooltip w-[80px] h-[28px] top-[-35px] left-[75px] group-hover:flex items-center justify-center shadow-[0px_5px_10px_#00000033]">
                        更新履歴
                    </div>

                </div>
                <div class="group" style="position: relative">
                    <button class="w-[100px] font-[600] h-[40px] rounded-[5px] border border-solid border-[#5799DB] bg-[#5799DB] text-[#FFFFFF] flex items-center justify-center ml-[10px] hover:opacity-70"
                            v-on:click="exportCsv">
                        CSV
                        <svg id="download-outlined" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                             viewBox="0 0 16 16">
                            <rect id="矩形" width="16" height="16" fill="#FFFFFF" opacity="0"></rect>
                            <path id="形状"
                                  d="M11.188,11H.5a.5.5,0,0,1-.5-.5V7.406a.125.125,0,0,1,.125-.125h.938a.125.125,0,0,1,.124.125V9.813H10.5V7.406a.125.125,0,0,1,.125-.125h.937a.125.125,0,0,1,.125.125V10.5A.5.5,0,0,1,11.188,11ZM5.844,7.876a.123.123,0,0,1-.1-.048L4,5.612a.123.123,0,0,1-.014-.131.125.125,0,0,1,.113-.071H5.249V.125A.125.125,0,0,1,5.373,0h.938a.125.125,0,0,1,.125.125V5.413H7.593a.125.125,0,0,1,.113.071.123.123,0,0,1-.014.131L5.942,7.828A.123.123,0,0,1,5.844,7.876Z"
                                  transform="translate(2.156 2.5)" fill="#FFFFFF"></path>
                        </svg>
                    </button>
                    <div class="i-tooltip w-[136px] h-[28px] top-[-35px] left-[-8px] group-hover:flex items-center justify-center shadow-[0px_5px_10px_#00000033]">
                        CSVダウンロード
                    </div>
                </div>
                <div class="flex items-center bg-[#F8F8F8] ml-[10px]">
                    <div style="position: relative" class="group">
                        <button class="w-[40px] h-[40px] bg-[#F8F8F8] text-[#000000] rounded-l-[5px]"
                                v-on:click="reAnalysis()">
                            <i class="text-[#1F1F1F] far fa-redo-alt"></i>
                        </button>
                        <div class="i-tooltip w-[130px] h-[28px] top-[-30px] left-[-45px] group-hover:flex items-center justify-center shadow-[0px_5px_10px_#00000033]">
                            最新情報に更新
                        </div>
                    </div>
                    <div class="h-[15px] w-[1px] bg-[#DDDDDD]"></div>
                    <div class="h-[15px] w-[1px] bg-[#DDDDDD]"></div>
                    <div style="position: relative" class="group">
                        <button class="w-[40px] h-[40px] bg-[#F8F8F8] text-[#000000] rounded-r-[5px]"
                                v-on:click="cr_show_modal_right = !cr_show_modal_right">
                            <i class="text-[#1F1F1F] far fa-filter"></i>
                        </button>
                        <div class="i-tooltip w-[130px] h-[28px] top-[-30px] left-[-45px] group-hover:flex items-center justify-center shadow-[0px_5px_10px_#00000033]">
                            絞り込み条件一覧
                        </div>
                    </div>
                </div>
                <div class="flex items-center mr-[25px] mr-[70px]">
                    <div class="w-[108px] h-[30px] bg-[#F8F8F8] rounded-[5px] ml-[13px] flex items-center justify-content-center">分析対象人数</div>
                    <div>
                        <span class="ml-[13px]" v-if="count_filter == 0">〇︎ 人</span>
                        <div class="ml-[13px]" v-if="count_filter > 0">
                            <button class="underline text-[#5799DB] text-[16px] font-[600] hover:opacity-70" v-on:click="showNumberFilter()">@{{ count_filter }}</button>︎ 人
                        </div>
                    </div>
                </div>
            </div>


            {{-- table data --}}
            <div class="mt-[18px] relative mx-[25px]" id="result_table_data" style="opacity: 0">
                <div class="mt-[18px] min-h-[280px] overflow-x-auto overflow-y-auto scrollable" style="max-height: calc(100vh - 350px);">
                    {{-- header table--}}
                    <div class="flex items-stretch sticky top-0 z-30 bg-white" style="width: max-content">
                        <div class="shrink-0 z-40 sticky left-0 w-[300px] font-[600] text-[14px] text-[#222222] bg-[#F8F8F8] flex items-center justify-center border-solid border-[#CCC] border min-h-[40px]"
                             style="border-top:1px solid #CCC;">
                            @{{ titleFirst }}
                            <i v-if="filter_by == 3" class="far fa-sort-alt ml-[4px] cursor-pointer" v-on:click="reverseDate()"></i>
                        </div>
                        <div class="shrink-0 z-35 sticky left-[300px] w-[100px] font-[600] text-[14px] text-[#222222] bg-[#F8F8F8] flex items-center justify-center border-solid border-[#CCC] border border-l-0 min-h-[40px]"
                             style="border-top: 1px solid #CCC">
                            対象人数 <i class="far fa-sort-alt ml-[4px] cursor-pointer" v-on:click="sortArray(0, 'total')"></i>
                        </div>

                        {{-- condition columns--}}
                        <div class="bg-[#E0E0E0] data-column-head" v-if="headerList.length > 0" v-for="(header,index) in headerList">
                            <div class="max-w-[361px] h-[40px] font-[400] text-[#888888] px-[20px] border-r border-b border-solid border-[#CCC]" style="border-top:1px solid #CCC">
                                <div class="flex justify-content-center items-center h-full max-w-[361px]">
                                    <div class="shrink-0 bg-[#888888] text-[12px] font-[600] text-[#fff] rounded-[5px] w-[20px] h-[20px] pt-[1px] text-center">
                                        @{{ index + 1 }}
                                    </div>
                                    <div class="ml-[10px] text-[#222222] text-[14px] font-[400] mr-[20px] overflow-hidden truncate">
                                        @{{ header }}
                                    </div>
                                </div>
                            </div>
                            <div class="flex">
                                <div class="h-[40px] bg-[#F8F8F8] text-[#222222] text-[12px] font-[400] flex items-center justify-center"
                                     style="border-bottom: 1px solid #CCCCCC"
                                     v-if="count_display_column > 1"
                                     :style="[isShowBotBlock() || isShowFriendActive() || isShowBotFriendBlock() ? {'border-right': '1px dashed #CCC', 'width': '90px'} : {'border-right': '1px solid #CCC', 'width': '180px'}]"
                                >
                                    合計 <i class="far fa-sort-alt ml-[4px] cursor-pointer" v-on:click="sortArray(index + 1, 'total')"></i>
                                </div>
                                <div v-if="isShowFriendActive() || count_display_column == 0"
                                     class="h-[40px] bg-[#F8F8F8] text-[#222222] text-[12px] font-[400] flex items-center justify-center"
                                     style="border-bottom: 1px solid #CCCCCC"
                                     :style="[
                                        isShowBotBlock() || isShowBotFriendBlock() ? {'border-right': '1px dashed #CCC'} : {'border-right': '1px solid #CCC'},
                                        count_display_column <= 1 ? {'width': '180px'} : {'width': '90px'}
                                     ]">
                                    有効 <i class="far fa-sort-alt ml-[4px] cursor-pointer" v-on:click="sortArray(index + 1, 'active_friend')"></i>
                                </div>
                                <div v-if="isShowBotBlock()"
                                     class="h-[40px] bg-[#F8F8F8] text-[#222222] text-[12px] font-[400] flex items-center justify-center"
                                     style="border-bottom: 1px solid #CCCCCC"
                                     :style="[
                                         isShowBotFriendBlock() ? {'border-right': '1px dashed #CCC'} : {'border-right': '1px solid #CCC'},
                                         count_display_column <= 1 ? {'width': '180px'} : {'width': '90px'}
                                     ]">
                                    ブロック <i class="far fa-sort-alt ml-[4px] cursor-pointer" v-on:click="sortArray(index + 1, 'friend_block')"></i>
                                </div>
                                <div v-if="isShowBotFriendBlock()"
                                     class="h-[40px] bg-[#F8F8F8] text-[#222222] text-[12px] font-[400] flex items-center justify-center"
                                     :style="[
                                         count_display_column <= 1 ? {'width': '180px'} : {'width': '90px'}
                                     ]"
                                     style="border-bottom: 1px solid #CCCCCC; border-right: 1px solid #CCC">
                                    被ブロック <i class="far fa-sort-alt ml-[4px] cursor-pointer" v-on:click="sortArray(index + 1, 'bot_block_friend')"></i>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- data rows --}}
                    <div style="position: relative; width: fit-content">
                        <div class="flex data-row" v-if="items.length > 0" v-for="(item, idx) in itemsP">
                            <div class="shrink-0 sticky z-10 left-0 truncate w-[300px] font-[300] text-[14px] bg-[#FFFFFF] text-[#222222] flex items-center justify-center
                                 border-solid border-[#CCCCCC] border border-t-0"
                                 style="border-right: 1px solid #CCC;"
                                 :style="[itemsP.length - 1 == idx ? {'border-bottom': '1px solid #CCCCCC'} : {'border-bottom': '1px dashed #CCCCCC'}]"
                                 :title="item.title_r">
                                <div class="text-left w-full overflow-hidden truncate px-[10px]">
                                    @{{item?.title_r}}
                                </div>
                            </div>
                            <template v-if="item.row && item.row.length > 0" v-for="(row,i) in item.row">
                                <div v-if="i == 0"
                                     class="shrink-0 sticky z-5 left-[300px] w-[100px] font-[300] text-[14px] bg-[#FFFFFF] text-[#222222] flex items-center justify-center
                                      border-solid border-[#CCCCCC] border border-l-0 border-t-0"
                                      style="border-right: 1px solid #CCC;"
                                     :style="[itemsP.length - 1 == idx ? {'border-bottom': '1px solid #CCCCCC'} : {'border-bottom': '1px dashed #CCCCCC'}]">
                                    <div v-if="getTotalColumn(row) > 0">
                                        <a style="cursor: pointer" class="text-[#5799DB] underline" v-on:click="showAccountDetailV2(row,idx,i, row?.cross_item_line_user, 'total')">@{{ getTotalColumn(row) }}</a>
                                    </div>
                                    <div v-else>0</div>
                                </div>
                                <div v-if="i != 0" class="flex">
                                    <div class="h-[40px] text-[#222222] text-[14px] font-[400] flex items-center justify-center"
                                         style="border-bottom: 1px dashed #CCCCCC;"
                                         v-if="count_display_column > 1"
                                         :style="[
                                            isShowBotBlock() || isShowFriendActive() || isShowBotFriendBlock() ? {'border-right': '1px dashed #CCC', 'width': '90px'} : {'border-right': '1px solid #CCC', 'width': '180px'},
                                            itemsP.length - 1 == idx ? {'border-bottom': '1px solid #CCCCCC'} : {'border-bottom': '1px dashed #CCCCCC'}
                                         ]">
                                        <div v-if="getTotalColumn(row) > 0">
                                            <a style="cursor: pointer" class="text-[#5799DB] underline" v-on:click="showAccountDetailV2(row,idx,i, row?.cross_item_line_user, 'total')">@{{ getTotalColumn(row) }}</a>
                                        </div>
                                        <div v-else>@{{ getTotalColumn(row) }}</div>
                                    </div>
                                    <div v-if="isShowFriendActive() || count_display_column == 0"
                                         class="h-[40px] text-[#222222] text-[14px] font-[400] flex items-center justify-center"
                                         style="border-bottom: 1px dashed #CCCCCC;"
                                         :style="[
                                            isShowBotBlock() || isShowBotFriendBlock() ? {'border-right': '1px dashed #CCC'} : {'border-right': '1px solid #CCC'},
                                            itemsP.length - 1 == idx ? {'border-bottom': '1px solid #CCCCCC'} : {'border-bottom': '1px dashed #CCCCCC'},
                                            count_display_column <= 1 ? {'width': '180px'} : {'width': '90px'}
                                         ]">
                                         <div v-if="cr_is_old_item">
                                            <div v-if="row?.total > 0">
                                                 <a style="cursor: pointer" class="text-[#5799DB] underline" v-on:click="showAccountDetailV2(row,idx,i, row?.cross_item_line_user, 'active_friend')">@{{ row?.total }}</a>
                                             </div>
                                             <div v-else>
                                                 @{{ row?.total ?? '0' }}
                                             </div>
                                         </div>
                                         <div v-else>
                                             <div v-if="row?.active_friend > 0">
                                                 <a style="cursor: pointer" class="text-[#5799DB] underline" v-on:click="showAccountDetailV2(row,idx,i, row?.cross_item_line_user, 'active_friend')">@{{ row?.active_friend }}</a>
                                             </div>
                                             <div v-else>
                                                 @{{ row?.active_friend ?? '0' }}
                                             </div>
                                         </div>
                                    </div>
                                    <div v-if="isShowBotBlock()"
                                         class="h-[40px] text-[#222222] text-[14px] font-[400] flex items-center justify-center"
                                         style="border-bottom: 1px dashed #CCCCCC;"
                                         :style="[
                                            isShowBotFriendBlock() ? {'border-right': '1px dashed #CCC'} : {'border-right': '1px solid #CCC'},
                                            itemsP.length - 1 == idx ? {'border-bottom': '1px solid #CCCCCC'} : {'border-bottom': '1px dashed #CCCCCC'},
                                            count_display_column <= 1 ? {'width': '180px'} : {'width': '90px'}
                                         ]">
                                        <div v-if="row?.bot_block_friend > 0">
                                            <a style="cursor: pointer" class="text-[#5799DB] underline" v-on:click="showAccountDetailV2(row,idx,i, row?.cross_item_line_user, 'bot_block_friend')">@{{ row?.bot_block_friend }}</a>
                                        </div>
                                        <div v-else>
                                            @{{ row?.bot_block_friend ?? '0' }}
                                        </div>
                                    </div>
                                    <div v-if="isShowBotFriendBlock()"
                                         class="h-[40px] text-[#222222] text-[14px] font-[400] flex items-center justify-center"
                                        style="border-right: 1px solid #CCC;border-bottom: 1px dashed #CCCCCC;"
                                        :style="[
                                            itemsP.length - 1 == idx ? {'border-bottom': '1px solid #CCCCCC'} : {'border-bottom': '1px dashed #CCCCCC'},
                                            count_display_column <= 1 ? {'width': '180px'} : {'width': '90px'}
                                        ]">

                                        <div v-if="row?.friend_block > 0">
                                            <a style="cursor: pointer" class="text-[#5799DB] underline" v-on:click="showAccountDetailV2(row,idx,i, row?.cross_item_line_user, 'friend_block')">@{{ row?.friend_block }}</a>
                                        </div>
                                        <div v-else>
                                            @{{ row?.friend_block ?? '0' }}
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>

            <div class="h-[70px] rounded-[10px] bg-[#FFFFFF] mt-[16px] px-[22px] py-[15px]">
                <div class="flex justify-content-between items-center">
                    <div class="flex">
                        <a href="{{ route('editCrossAnalysis', $crossId) }}"
                           class="w-[180px] h-[40px] border border-solid border-[#5799DB] rounded-[5px] flex items-center justify-center text-[#5799DB] hover:text-[#5799DB] hover:opacity-70 mr-[15px]">
                            <i class="far fa-edit mr-[10px]"></i>
                            分析リストを編集
                        </a>

                        <a href="{{ route('index.crossAnalysis') }}"
                           class="w-[110px] h-[40px] border border-solid border-[#DDDDDD] rounded-[5px] flex items-center justify-center hover:text-[#222] hover:opacity-70">戻る</a>
                    </div>

                    @include('basic.cross_analysis.v2.components.pagination')
                </div>
            </div>
        </div>
        @include('basic.cross_analysis.v2.modal.list_filter')
        @include('basic.cross_analysis.v2.modal.loading')
    </div>
@endsection
@push('js')
    <script>
        var token = "{!! csrf_token() !!}";
        var crossId = '{{ $crossId }}';
        var countFilter = '{{ $countFilter }}';
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <script src="/js/cross_analysis/v2/pagination.js?v={{config("sns-line.version")}}"></script>
    <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
    <script src="/js/vue-paginate.js"></script>
    <script src="/plugins/vuejs/vue-resource@1.3.4.js"></script>
    <script src="/js/tailwindcss.js"></script>
    <script src="/js/form_answer/vee-validate.rc7.min.js"></script>
    <script type="application/javascript"
            src="/js/infor_friend/components/list_friend.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/cross_analysis/v2/result.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/cross_analysis/result.js?v={{config("sns-line.version")}}"></script>
@endpush