@extends('layout.basic.main')
@section('title','リッチメニュー（タップ回数詳細）')
@push('css')
    <link rel="stylesheet" href="/_assets/commons/css/breadcrumbs.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="/_assets/commons/css/pagination.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="/_assets/commons/css/lme_custom.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="{{asset('css/form_answer/common-v3.css')}}?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/menu_rich/v2/detail.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="/css/menu_rich/v2/detail_27.css?v={{config("sns-line.version")}}" type="text/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="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@latest/dist/plugins/monthSelect/style.css">
    <link rel="stylesheet" href="/_assets/commons/css/calendar_control.css?v={{config("sns-line.version")}}" type="text/css">

    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr@latest/dist/plugins/monthSelect/index.js"></script>
@endpush
@section('content')
    <div class="" id="detail-rich-menu" v-cloak>
        <div class="d-flex flex-column" style="height: 100%">
            <div class="head mb-4">
                <nav class="breadcrumb breadcrumb01">
                    <ul>
                        <li><a href="/basic/rich-menu">TOP</a></li>
                        <li>タップ回数詳細</li>
                    </ul>
                </nav>
                <div class="page-title">
                    @{{ richMenu.name }}
                </div>
            </div>
            <div class="content mb-4">
                <span class="tooltipp download-single" style="padding: 5px 16px; left: 440px; right: unset">CSVダウンロード</span>
                <div class="i-tooltip tooltip-info statistic-tooltip">
                    <p class="title">表示期間</p>
                    <p class="info">最終レイアウト設定日より前の日付</p>
                    <p class="info">のデータは表示されません。</p>
                </div>
                <div class="i-tooltip tooltip-info get-all-tooltip">
                    <p class="info">全期間表示の場合、1度もタップされていな</p>
                    <p class="info">い日はリスト上には表示されません。</p>
                </div>
                <div class="rich-menu mb-4">
                    <div class="canvas-wrapper"
                         :style="{position: 'relative', width: this.width_canvas + 'px', height: this.height_canvas + 'px', margin: '20px'}">
                        <canvas id="SrcCanvas" style="position: absolute; top: 0; left: 0"
                                :width="this.width_canvas + 'px'"
                                :height="this.height_canvas + 'px'"></canvas>
                        <img class="rich-image" id="richImage" style="position: absolute; top: 0; left: 0; opacity: .5;" src="{{ asset('images/richmenu.jpg') }}"
                             alt="">
                    </div>
                </div>
                <div class="gr-data">
                    <div class="data-statistic" v-if="richMenu.step_active == 4">
                        <div class="filter mb-3">
                            <div class="d-flex justify-content-between">
                                <div class="d-flex justify-content-start align-items-center">
                                    <div class="range-picker d-flex justify-content-start align-items-center">
                                        <div class="date date04 mr-2">
                                            <div class="date-box" style="padding: 0">
                                                <input type="text" name="datepicker" id="js-datepicker04" placeholder="開始日 → 終了日" autocomplete="off" style="width: 355px; cursor: pointer">
                                                <button class="clear-btn" >
                                                    <i class="far fa-times-circle"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="btn-get-all hover" @click="getAll()" @mousemove="showTooltipStatistic($event, '.get-all-tooltip', 105)" @mouseleave="hideTooltipHover('.get-all-tooltip')">全期間</div>
                                    </div>
                                    <div v-if="richMenu.rich_menu_id" class="d-flex justify-content-center c-tooltip-container hover" @mousemove="showTooltipHover($event, '.download-single', 'flex')" @mouseleave="hideTooltipHover('.download-single')">
                                        <div class="btn-download" @click="downloadCsv()">
                                            <svg id="download-outlined" class="icon-download" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                                <rect width="16" height="16" opacity="0"/>
                                                <path 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)"/>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-start align-items-center ml-2">
                                        <span style="font-size: 16px; margin-right: 20px">最終レイアウト設定日</span>　<span style="font-weight: 400; font-size: 16px"> @{{ formatDate(richMenu.layout_updated, 'YYYY/MM/DD') }}</span>
                                        <div class="statistic-tooltip-container" @mousemove="showTooltipStatistic($event, '.statistic-tooltip')" @mouseleave="hideTooltipHover('.statistic-tooltip')">
                                            <svg style="margin-top: 5px;" id="info-circle-outlined" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                                <rect id="矩形" width="16" height="16" fill="#1f1f1f" opacity="0"/>
                                                <path id="形状" d="M7,14a7,7,0,1,1,7-7A7.008,7.008,0,0,1,7,14ZM7,1.187A5.813,5.813,0,1,0,12.812,7,5.82,5.82,0,0,0,7,1.187Z" transform="translate(1 1)" fill="#1f1f1f"/>
                                                <path id="形状-2" data-name="形状" d="M1.125,7H.375A.125.125,0,0,1,.25,6.875V2.625A.125.125,0,0,1,.375,2.5h.75a.125.125,0,0,1,.125.125v4.25A.127.127,0,0,1,1.125,7ZM.75,1.5A.75.75,0,1,1,1.5.75.751.751,0,0,1,.75,1.5Z" transform="translate(7.25 4.5)" fill="#1f1f1f"/>
                                            </svg>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="f-title mt-2">
                                <i class="far fa-info-circle color-red"></i>
                                「友だちアクション」「LINE URLスキーム」のみが設定されているエリアのタップ回数はカウント対象外となります。
                            </div>
                        </div>
                        <div class="tbr-data scrollable">
                            <div class="tbr-row tbr-heading">
                                <div class="tbr-col">
                                    年月日
                                    <img @click="sort('day')" style="width: 14px; margin-left: 10px; cursor: pointer" src="/images/sort.png" alt="">
                                </div>
                                <div class="tbr-col" v-for="item in cols_number">@{{  item }}</div>
                            </div>
                            <div style="position: relative">
{{--                                <div class="skin"--}}
{{--                                     :style="{--}}
{{--                                        width: (20 - countTotal.length) * 100  + 'px',--}}
{{--                                        height: (detailClick.length + 1) * 50 + 'px',--}}
{{--                                        left: (countTotal.length * 100 + 140) + 'px'--}}
{{--                                    }"--}}
{{--                                ></div>--}}
                                <div class="tbr-row total">
                                    <div class="tbr-col font-w-bold">合計</div>
                                    <div class="tbr-col" v-for="index in cols_number" style="font-weight: 300 !important;">@{{ formatNumber(countTotal[index - 1]) }}</div>
                                </div>
                                <div class="tbr-row" v-for="detail in detailClick">
                                    <div class="tbr-col">@{{ formatDate(detail.day, 'YYYY.MM.DD(ddd)') }}</div>
                                    <div class="tbr-col" v-for="index in cols_number">@{{  detail.data ? formatNumber(detail.data[index - 1]) : '' }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="data-statistic" style="height: 500px" v-else>
                        <div class="d-flex justify-content-center align-items-center" style="height: 100%;">
                            <div class="d-flex justify-content-center align-items-center flex-column">
                                <div class="container-img mb-4">
                                    <img src="/images/group_4483.svg" alt="empty">
                                </div>
                                <div class="line-text" style="font-size: 16px; font-weight: 400; color: #8C8C8C">タップエリアが設定されていないため計測ができません。</div>
                            </div>
                        </div>
                    </div>
                    <div class="foot" :style="richMenu.step_active != 4 ? 'justify-content: center' : ''">
                        <div class="btn-back hover" @click="window.location.href = '/basic/rich-menu'">戻る</div>
                        <pagination v-if="richMenu.step_active == 4" :pagination="pagination" @change_page="changePage" @change_limit="changeLimit"></pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        var start_date = '{{ $startDate }}';
        var end_date = '{{ $endDate }}';
        var richId = '{{ $richId }}';
        var richMenu = @json($richMenu);
    </script>
    <script src="/_assets/commons/js/datetime.js?v={{config("sns-line.version")}}"></script>
    <script src="/_assets/commons/js/pagination.js?v={{config("sns-line.version")}}"></script>
    <script src="/_assets/commons/js/lme.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/menu_rich/v2/detail.js?v={{config("sns-line.version")}}"></script>
@endpush