@extends('layout.basic.main')
@section('title','リッチメニュー タップ回数詳細')
@push('css')
    <link rel="stylesheet" href="/css/menu_rich/new.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">

    <style>
        *{
            font-weight: bold;!important;
        }
        td {
            text-align: left;
        }

        thead tr th{
            padding: 10px 10px 10px 10px !important;
            font-weight: bold;
            background-color: #08BF5A !important;
            border: none!important;
        }
        table>tbody>tr>td{
            border-top: none !important;
            border-bottom: 1px solid #ddd;
            font-weight: bold;!important;
        }
        .input-cal{
            padding-left: 30px !important;
            border-radius: 5px;
            width: 190px !important;
            height: 35px !important;
        }
        .input-cal:focus{
            outline: none;
        }
        .ic-cal-ip{
            position: absolute;
            left: 8px;
            top: 6px;
            color: rgba(190,190,190,1);
        }

        .number {
            border: 1px solid;
            border-radius: 50%;
            font-size: 10px;
            padding: 2px 5px 3px 5px;
            font-weight: bold;
        }
        tbody tr:first-child td{
            background-color: #F4FBF2;
        }
        thead>tr>th:last-child {
            border-radius: 0 4px 4px 0;
            width: auto !important;
        }
    </style>

@endpush
@section('content')
    <article class="">
        <section class="taglist tmp" id="menuMenuDetailClick" v-cloak >

            <div class="row" >
                <div class="col-sm-12">
                    <div style="display: flex; align-items: baseline; justify-content: space-between">
                        <h2 style="font-size: 20px; font-weight: bold; padding: 10px 10px 10px 0">タップ回数詳細</h2>
                        <a href="/basic/rich-menu" style="font-size: 16px; font-weight: bold; text-decoration: underline"> < 前ページに戻る </a>
                    </div>
                    <p style="font-size: 16px">最終レイアウト設定日　@{{  formatDateTitle(richmenu.updated_at)}}（左記より前の日付のデータは表示されません）</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="canvas-wrapper"
                         :style="{position: 'relative', width: this.width_canvas + 'px', height: this.height_canvas + 'px', margin: '20px'}">
                        <canvas id="SrcCanvas"
                                :width="this.width_canvas + 'px'"
                                :height="this.height_canvas + 'px'"></canvas>
                        <img class="rich-image" id="richImage" src="{{asset('images/richmenu.jpg')}}"
                             alt="">
                    </div>
                </div>

            </div>
            <div class="row">
                <div class="col-md-12 "  style="    display: flex;
                                        align-items: baseline;
                                        justify-content: space-between;">
                    <div>友だちアクションのタップ回数は対象外となります。</div>
                    <div class="text-right" style="display: flex ; justify-content: end; align-items: flex-end" >
                        <span>表示期間</span>
                        <div  class="input-group box-date"  style="position: relative; margin: 0 10px ">
                            <input class="input-cal datepicker start_date"
                                   v-on:click="filterData"
                                   type="text"
                                   readonly="readonly"
                                   v-model="start_date"
                                   placeholder="">
                            <span class="ic-cal-ip"><i class="far fa-calendar"></i></span>
                        </div>
                        <span>から</span>
                        <div class="input-group box-date"  style="position: relative; margin-left: 10px">
                            <input class="input-cal datepicker end_date"
                                   v-on:click="filterData"
                                   type="text"
                                   readonly="readonly"
                                   v-model="end_date"
                                   placeholder="">
                            <span class="ic-cal-ip"><i class="far fa-calendar"></i></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th class="text-left" style=" border-radius: 4px 0 0 4px; width: 200px">年月日</th>
                            <th class="text-left" v-if="rich_menu_items.length > 0" style=" width: 100px"
                                v-for="(item,index) in rich_menu_items">
                                <span class="number">@{{ index+1 }}</span>
                            </th>

                        </tr>
                        </thead>
                        <tbody><!---->
                        <tr>
                            <td class="text-center">合計</td>
                            <td style="padding-left: 13px"
                                v-if="countTotal && countTotal.length > 0"
                                v-for="(val,i) in countTotal">
                              @{{ val }}
                            </td>
                        </tr>
                        <tr v-if="detailClick && detailClick.length > 0" v-for="(item,index) in detailClick" >
                            <td class="text-left" >
                                @{{formatDate(item.day)}}
                            </td>
                            <td style="padding-left: 13px"
                                v-for="(countItem, idx) in item.data">
                                @{{countItem}}
                            </td>

                        </tr>
                        <tr v-show="detailClick.length == 0">
                            <td colspan="9"> データがありません。</td>
                        </tr>
                        </tbody>
                    </table>
                </div>

            </div>

        </section>
    </article>
@endsection

@push('js')
    <script>
        var token = "{!! csrf_token() !!}";
        var richId = '{{ $richId }}';
        var start_date = `{{ $startDate }}`;
        var end_date = `{{ $endDate }}`;
    </script>
    <script src="/js/axios.min.js"></script>
    <script src="/chat_files/jquery-ui.min.js"></script>
    <script src="/plugins/vuejs/vue-resource@1.3.4.js"></script>
    <script src="/chat_files/bootstrap-timepicker.js"></script>
    <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
    <script src="/js/menu_rich/detail.js?v={{config("sns-line.version")}}"></script>
    <script>
        $(document).ready(function () {
            setTimeout(function () {
                $(".datepicker").datepicker({
                    dateFormat: 'yy-mm-dd',
                    language: 'ja',
                })},200);
        });
    </script>

@endpush