@extends('layout.basic.main')
@section('title', 'クロス分析（分析リスト）')
@push('css')
    <link rel="stylesheet" href="/css/conversion/style.css?v={{config("sns-line.version")}}" type="text/css">
    <style>
        .btn{
            font-weight: bold;
        }
        thead tr th{
            padding: 10px !important;
            font-weight: bold;
            background-color: #EFEFEF !important;
            color: #51595C;
            text-align: left;
            vertical-align: top !important;
        }
        .tbl-result>thead>tr>th , .tbl-result>tbody>tr>td{
            border: 1px solid #96ADB2 !important;
        }
        .tbl-result a{
            text-decoration: underline;
        }
        div, label, a, h2{
            font-weight: bold;
        }
        .div_filter{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 20px;
            margin-bottom: 15px;
        }
        .filter_left{
            display: flex;
            align-items: center;
        }
        .filter_left >*{
            margin-right: 10px;
        }
        .filter_right{
            display: flex;
            align-items: center;
        }
        .filter_right >*{
            margin-left: 10px;
        }
        .div_filter label{
            word-break: keep-all;
            font-size: 17px;
        }
        .tbl-result{
            table-layout: fixed;
            overflow-y: hidden;
        }
        .tbl-result tbody>tr:nth-child(odd)>td {
            background: #F8F8F8 !important;
        }
        /*.number{*/
        /*    border: 1px solid;*/
        /*    border-radius: 50%;*/
        /*    font-size: 10px;*/
        /*    padding: 0px 5px 3px 5px;*/
        /*}*/
        .txt_header{
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .number{
            font-family: Arial, "Open Sans", "Helvetica Neue", Helvetica, Verdana, Roboto, "游ゴシック", "Yu Gothic" , "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
            border: 1px solid;
            border-radius: 50%;
            font-size: 10px;
            width: 18px;
            height: 18px;
            /* padding: 0px 5px 3px 5px; */
            display: inline-block;
            text-align: center;
            line-height: 16px;
        }
        #preview_filter{
            background-color: #F6F6F6;
            margin-bottom: 15px;
            padding: 20px;
            border-radius: 5px;
            width: 70%;

        }
        .tbl-result thead>tr>th:hover{
            background-color: #96ADB2 !important;
            color: white;
        }
        .pagination a {
            border: 1px solid #ddd ;
            color: #51595C;
            float: left;
            padding:5px 14px;
            text-decoration: none;
            transition: background-color .3s;
            cursor: pointer;
        }

        .pagination a.active {
            background-color: #08BF5A !important;
            border-color:  #08BF5A !important;
            color: white;
        }

        .pagination a:hover:not(.active) {
            background-color: #ddd;
        }
        .pagination a:first-child, .pagination a:first-child {
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }
        .pagination a:last-child, .pagination a:last-child {
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
        }
        .header_top_tbl:hover .all_header{
            display: block;
        }
        .all_header{
            display: none;
            position: absolute;
            top: -32px;
            background-color: #EFEFEF ;
            padding: 10px;
            max-width: 350px;
            color: #51595C;
            border-radius: 4px;
            box-shadow: 0px 3px 6px #00000029;
        }
    </style>

@endpush
@section('content')
    <article class="">

        <section class="taglist tmp" id="crossAnalysisResult" v-cloak>
            <div class="row">
                <div class="col-sm-12">
                    <h2 style="font-size: 20px;font-weight: bold; padding: 10px 10px 10px 0">[{{$crossName}}]分析リスト</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="div_filter" style="">
                        <div class="filter_left">

                            <label >履歴</label>
                            <select class="form-control my_class" style="width: 230px; padding-right: 28px" v-model="filter_date">
                                <option v-if="listDateOption.length > 0" v-for="(item,index) in listDateOption" :value="item.value">@{{ item.text }}</option>
                            </select>
                            <button class="btn btn-sns-line btn-sns-line-sm btn-sns-line-dark" v-on:click="filterHistory" type="button">変更</button>
                            <button class="btn btn-sns-line btn-sns-line-warning" v-on:click="reAnalysis()" type="button"><i class="far fa-redo"></i> 最新情報に更新</button>
                            <button class="btn btn-sns-line btn-sns-line-primary" type="button" v-on:click="exportCsv">CSVダウンロード <i class="fas fa-arrow-alt-to-bottom"></i></button>
                        </div>
                        <div class="filter_right" style="   ">
                            <label >並び順</label>
                            <select class="form-control my_class" v-model="order_col" style="width: 136px; padding-right: 28px">
                                <option value="0">全体</option>
                                <option v-if="crossAnalysis && crossAnalysis.filter_by == 3" value="-1">友だち登録日</option>
                                <option v-if="headerList.length > 0" v-for="(header, index) in headerListOption" :value="(index + 1)">
                                   @{{getTextOption(index)}}
                                </option>
                            </select>
                            <select class="form-control my_class" v-model="order" style="width: 100px">
                                <option value="desc">降順</option>
                                <option value="asc">昇順</option>
                            </select>

                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <label style="font-size: 18px; margin-top: 20px">分析対象絞込み</label>
                    <div id="preview_filter" style=" margin-top: 10px" >
                        <span>対象人数 : @{{ count_filter }}人</span> <br>
                        <div style="display: flex">
                            <div>
                                <span style="  word-break: keep-all;width: 93px; display: block;">対象条件 :</span>
                            </div>
                            <div>
                                <div v-if="list_preview_filter.length > 0"
                                     v-for="(preview, index) in list_preview_filter" style="font-weight: bold">
                                    @{{ preview }}
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <table class="table table-bordered tbl-result">
                        <thead>
                        <tr>
                            <th scope="col" style="background-color: #7D9195 !important;vertical-align: middle !important; color: white;min-width: 106px;">
{{--                                基準軸 <br>--}}
                                <span  class="txt_header" >@{{ titleFirst }}</span>
{{--                                <br>--}}
{{--                                見込み度合い--}}
                            </th>
                            <th scope="col" style="background-color:#96ADB2 !important;text-align: center; color: white; vertical-align: middle !important; min-width: 70px;">全体</th>

                            <th scope="col" class="header_top_tbl" v-if="headerList.length > 0" v-for="(header,index) in headerList">
                                <div class="all_header">
                                     <span  class=""  v-for="(h,i) in header">
                                   @{{ h }}<br>
                                </span>
                                </div>
                                <span class="number">@{{ index +1 }}</span><br>
                                <span  class="txt_header"  v-for="(h,i) in header">
                                   @{{ h }}<br>
                                </span>
                            </th>

                        </tr>
                        </thead>
                        <tbody>
                        <tr v-if="items.length > 0" v-for="(item, idx) in itemsP">
                            <td class="text-left" ><span class="txt_header">@{{item.title_r}}</span></td>
                            <td v-if="item.row && item.row.length > 0" v-for="(row,i) in item.row">
                                <span v-if="row.total > 0">
                                    <a style="cursor: pointer" v-on:click="showAccountDetail(row,idx,i)">@{{ row.total }}</a>
                                </span>
                                <span v-else>@{{ row.total }}</span>
                            </td>
                        </tr>

                        </tbody>
                    </table>
                    <div class="text-center">
                        <a style="float: left" href="/basic/cross-analysis" class="btn btn-sns-line btn-sns-line-dark">戻る</a>
                        <div class="pagination" style="margin: 0">
                            <div style="margin-bottom: 10px">
                                全@{{pagination.total}}件中　@{{pagination.from +1}}~@{{(pagination.to >= pagination.total) ? pagination.total : pagination.to }}件を表示中
                            </div>
                            <div v-if="pagination.last_page > 1">
                                <a  v-if="pagination.current_page > 1"
                                   v-on:click="nextPageC(page -1)" style="padding: 5px 11px;" >
                                    <i class="far fa-arrow-left"  style="color:#08BF5A;"></i></a>
                                <a  v-for="(p, index) in pageList" v-on:click="nextPageC(p)"
                                    :class="{active: p == page}">@{{p}}</a>
                                <a  v-on:click="nextPageC(page+1)" style="padding: 5px 11px;" v-if="!(page == pagination.last_page || pagination.last_page == 1)">
                                    <i class="far fa-arrow-right"  style="color:#08BF5A;"></i></a>
                            </div>

                        </div>
{{--                        <button class="btn btn-sns-line btn-sns-line-success" :disabled="page == pagination.last_page || pagination.last_page == 1"--}}
{{--                                v-on:click="nextPageC(page+1)"> 次の@{{per_page}}件へ</button>--}}

                    </div>

                </div>
            </div>

        </section>

    </article>
@endsection
@push('js')
    <script>
        var token = "{!! csrf_token() !!}";
        var crossId = '{{ $crossId }}';
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></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/cross_analysis/result.js?v={{config("sns-line.version")}}"></script>
@endpush