@extends('layout.admin.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="/chat_files/jquery-ui.min.css">
    <script src="https://cdn.jsdelivr.net/npm/vue2-datepicker@3.11.1/index.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue2-datepicker/locale/ja.js"></script>
    <link rel="stylesheet" href="/css/summary_message_send/style.css?v={{config("sns-line.version")}}">
@endpush
@section('content')
<article class="sub">
    <section class="container-fluid" id="summary-message" v-cloak>
        <div class="row">
            <div class="summary_header col-12">
                <h2 class="title-page">配信数サマリー</h2>
                <div class="summary-time">
                    @{{ dateNowDisplay }}エルメ配信数とLINE公式アカウント配信数（※1）
                </div>
            </div>
        </div>
        <div class="box_summary_content">
            <div class="box_summary_lme" style="background: #ffffff">
                <div class="text-center title_box">エルメ配信数</div>
                <div class="text-center plan_type"> @{{ isRealValue(initDataSummary) ? initDataSummary.data_send_count.contract_plan_text : '' }}</div>
                <div class="summary_message_free summary_message_not_free" v-if="isRealValue(initDataSummary) &&
                    initDataSummary.data_send_count.plan_type == 'free'">
                    <div class="number_message_free">
                        <span>0</span>
                        <div class="d-flex align-items-center">
                            <span>1,000</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div role="progressbar" aria-valuenow="0.1" aria-valuemin="0" aria-valuemax="100" class="progress-bar"
                             :style="{ width: isRealValue(initDataSummary) ? initDataSummary.data_send_count.percent_send_count + '%' : '0%' }"></div>
                    </div>
                    <div class="summary_message_standard">
                        <div class="number-message-title">配信済みメッセージ数 (※4)</div>
                        <div class="number-limit">
                            <span class="number-message">@{{ isRealValue(initDataSummary) ? initDataSummary.data_send_count.send_count : 0 }}</span>
                            <span>/ 1,000</span><i class="summary_question far fa-question"></i>
                            <div class="summary-note">
                                1,000通以上の配信は、エルメをスタンダードプランへアップグレードしてください。
                            </div>
                        </div>
                    </div>
                    <div class="title_foot">最終更新：リアルタイム</div>
                </div>
                <div class="summary_message_not_free" v-if="isRealValue(initDataSummary) &&
                    initDataSummary.data_send_count.plan_type == 'not_free'">
                    <div class="number_message_free">
                        <span>0</span>
                        <div class="summary_message_limit d-flex align-items-center">
                            無制限
                        </div>
                    </div>
                    <div class="progress">
                        <div role="progressbar" aria-valuenow="0.1" aria-valuemin="0" aria-valuemax="100" class="progress-bar"
                             style="width: 100%"></div>
                    </div>
                    <div class="summary_message_standard">
                        <div class="number-message-title">配信済みメッセージ数 (※4)</div>
                        <div class="number-limit">
                            <span class="number-message">@{{ isRealValue(initDataSummary) ? initDataSummary.data_send_count.send_count : 0 }}</span>
                            <span>/ 無制限</span>
                            <i class="summary_question far fa-question"></i>
                            <div class="summary-note">
                                エルメ配信数は無制限ですが、別途LINE公式アカウントの契約が必要になる場合があります。
                            </div>
                        </div>
                    </div>
                    <div class="title_foot">最終更新：リアルタイム</div>
                </div>
            </div>
            <div class="box_summary_line" style="background: #ffffff">
                <div class="text-center title_box">LINE公式アカウント配信数 (※2)</div>
                <div class="text-center plan_type">
                    <span v-if="initDataSummary.line_data_send_count.line_limit_send_origin >= 30000">スタンダード</span>
                    <span v-else-if="initDataSummary.line_data_send_count.line_limit_send_origin >= 5000 && initDataSummary.line_data_send_count.line_limit_send_origin < 30000">ライト</span>
                    <span v-else>コミュニケーション</span>
                    (※3)
                </div>
                <div class="summary_message_not_free summary_message_line">
                    <div class="number_message_free">
                        <span>0</span>
                        <div class="d-flex align-items-center">
                            <span>@{{ isRealValue(initDataSummary) ? initDataSummary.line_data_send_count.line_limit_send_count : 0 }}</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div role="progressbar" aria-valuenow="0.1" aria-valuemin="0" aria-valuemax="100" class="progress-bar"
                             :style="{ width: isRealValue(initDataSummary) ? initDataSummary.line_data_send_count.line_percent_send_count + '%' : '0%' }"></div>
                    </div>
                    <div class="summary_message_standard line_summary_message_standard">
                        <div class="number-message-title">配信済みメッセージ数 (※4)</div>
                        <div class="number-limit">
                            <span class="number-message">@{{ isRealValue(initDataSummary) ? initDataSummary.line_data_send_count.line_send_count : 0 }}</span>
                            <span>/ @{{ isRealValue(initDataSummary) ? initDataSummary.line_data_send_count.line_limit_send_count : 0 }}</span>
                            <i class="summary_question line_summary_question far fa-question"></i>
                            <div class="summary-note summary-note-line" v-html="isRealValue(initDataSummary) ? initDataSummary.line_data_send_count.line_text_limit_note : ''">
                            </div>
                        </div>
                    </div>
                    <div class="title_foot">最終更新：@{{ isRealValue(initDataSummary) ? initDataSummary.line_data_send_count.line_last_updated : '' }} 頃 (※3)</div>
                </div>
            </div>
        </div>
        <div class="box_summary_note">
            <div>
                <span>(※1) エルメ配信数とLINE公式アカウント配信数の違いは</span>
                <a target="_blank" href="https://www.youtube.com/watch?v=uu4a8SIrrPU">こちら</a>
            </div>
            <div>
                <span>(※2) LINE公式アカウントの日別配信数は</span>
                <a target="_blank" href="https://manager.line.biz/account/{{$lineId}}/insight/message">こちら</a>
            </div>
            <div>
                <span>(※3) 当日中の配信数・契約プランは、翌日深夜（正確な時間は公表されていません）に1日1回のみ更新されます。</span>
            </div>
            <div>
                <span>
                    (※4) 配信数のリセット日はエルメ・LINE公式アカウント共に毎月1日です。
                </span>
            </div>
        </div>
        <div class="box_summary_line_info">
            <div class="line_info_title">
                日別エルメ配信数
            </div>
            <div class="line_info">
                <span>LINE公式アカウントの日別配信数は</span>
                <a target="_blank" href="https://manager.line.biz/account/{{$lineId}}/insight/message">こちら</a>
            </div>
        </div>
        <div class="table_summary">
            <div class="header_filter">
                <div class="datetime_filter">
                    <div class="datetime-group">
                        <date-picker class="date-input" range-separator="  -  " v-model="ranDate" @change="filterData()" type="date" range
                                     placeholder="Select date range"
                                     :clearable="false"
                                      :lang="lang"></date-picker>
                        <button @click="filterDataMonthNow()" type="button" class="btn-datenow ml-3 font-weight-normal"
                                style="font-size: 14px; color: rgb(83, 86, 87); height: 40px;">
                            当月
                        </button>
                    </div>
                </div>
                <a @click="summaryMessageSendExport" class="btn-export btn btn-outline-secondary font-weight-normal btn-csv">CSV
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                        <g id="Icon_feather-download" data-name="Icon feather-download" transform="translate(-4 -4)">
                            <path id="Path_1" data-name="Path 1" d="M19.5,22.5v3.356a1.672,1.672,0,0,1-1.667,1.678H6.167A1.672,1.672,0,0,1,4.5,25.856V22.5"
                                  transform="translate(0 -8.034)" fill="none" stroke="#51595c" stroke-linecap="round" stroke-linejoin="round"
                                  stroke-width="1"></path>
                            <path id="Path_2" data-name="Path 2" d="M10.5,15l4.144,4.195L18.788,15" transform="translate(-2.644 -4.682)" fill="none"
                                  stroke="#51595c" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"></path>
                            <path id="Path_3" data-name="Path 3" d="M18,14.568V4.5" transform="translate(-6)" fill="none" stroke="#51595c"
                                  stroke-linecap="round"
                                  stroke-linejoin="round" stroke-width="1"></path>
                        </g>
                    </svg>
                </a>
            </div>
            <div class="box_mouseover" id="box_mouseover">1:1チャット、メッセージ配信以外のステップ配信やテスト送信などの合計数</div>
            <table class="table table-bordered border-0 table-summary" style="margin-bottom: 80px;">
                <thead>
                <tr class="tr-1" id="mouseover_tr1">
                    <th colspan="2" class="text-center border-0"></th>
                    <th class="text-center border-0">全体合計</th>
                    <th class="text-center border-0">1:1チャット</th>
                    <th class="text-center border-0">メッセージ配信</th>
                    <th class="text-center border-0">その他配信
                        <i class="fas fa-question-circle"
                           style="color: rgb(221, 221, 221); position: relative;"></i>
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr class="tr-2">
                    <td colspan="2" class="text-center">合計</td>
                    <td class="text-right">@{{ isRealValue(initDataSummary) ? initDataSummary.data_total.total_all : 0 }}</td>
                    <td class="text-right">@{{ isRealValue(initDataSummary) ? initDataSummary.data_total.total_all_chat11 : 0 }}</td>
                    <td class="text-right">@{{ isRealValue(initDataSummary) ? initDataSummary.data_total.total_all_chatBc : 0 }}</td>
                    <td class="text-right">@{{ isRealValue(initDataSummary) ? initDataSummary.data_total.total_all_chatOr : 0 }}</td>
                </tr>
                <tr v-for="(item, index) in initDataSummary ? initDataSummary.list : []" :key="index">
                    <td class="text-center">@{{ formatDateReverse(item.date_summary) }}</td>
                    <td class="text-center">@{{ item.day_of_week }}</td>
                    <td class="text-right">@{{ item.number_total }}</td>
                    <td class="text-right">@{{ item.number_message_send_chat11 }}</td>
                    <td class="text-right">@{{ item.number_message_send_broadcast }}</td>
                    <td class="text-right">@{{ item.number_message_send_other }}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </section>
</article>
@endsection
@push('script')
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="application/javascript" src="/js/summary_message/summary_message.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/vue2-datepicker@3.11.1/index.min.css" rel="stylesheet">
    <script>
        var lineId = '{{$lineId}}'
        $('#mouseover_tr1 > th').mouseover(function () {
            $('#box_mouseover').addClass('box_mouseover_style');
            $('.table-summary').css('margin-top','-55px')
        });

        $('#mouseover_tr1 > th').mouseout(function () {
            $('#box_mouseover').removeClass('box_mouseover_style');
            $('.table-summary').css('margin-top', '0')
        });
    </script>
@endpush