@extends('layout.admin_v2.main')

@section('title')
    ARPU
@endsection

@push('css')
    <link rel="stylesheet" href="/lme-ui/src/css/reset.css">
    <link rel="stylesheet" href="/lme-ui/src/css/base.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/lme-ui/src/css/date-picker/date-picker.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="/css/admin/apru.css?v={{config("sns-line.version")}}">
    <script src="/js/tailwind/browser@4.js"></script>
@endpush

@section('content')
    <div class="bg-[#F5F7FA] !p-[20px] flex flex-col gap-[20px] content-fit-vh" id="vue-element" v-cloak>
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-[24px]">
                <span class="text-[#222222] text-[18px] font-[600]">ARPU (有料ユーザー1人あたりの平均課金額)</span>
            </div>
        </div>
        <div class="main-panel flex flex-1 gap-[20px]" style="width: 550px">
            <div class="rounded-[10px] bg-[#FFFFFF] w-full min-w-0 p-[24px] flex flex-col gap-[24px]">
                <div class="year-filter-section">
                    <button type="button" class="year-nav-btn" @click="prevYear" aria-label="前年">
                        <svg fill="currentColor" width="12" height="12" viewBox="0 0 24 24" id="previous" data-name="Flat Color" xmlns="http://www.w3.org/2000/svg" class="icon flat-color">
                            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                            <g id="SVGRepo_iconCarrier">
                                <path id="primary" d="M17.45,2.11a1,1,0,0,0-1.05.09l-12,9a1,1,0,0,0,0,1.6l12,9a1,1,0,0,0,1.05.09A1,1,0,0,0,18,21V3A1,1,0,0,0,17.45,2.11Z" fill="currentColor"></path>
                            </g>
                        </svg>
                    </button>
                    <lme-date-picker
                        v-model="year_filter"
                        type="year"
                        format="YYYY年"
                        placeholder="年を選択"
                        size="lg"
                        :clearable="false"
                        width="150px"
                        @change="selectYear"
                    ></lme-date-picker>
                    <button type="button" class="year-nav-btn" @click="nextYear" aria-label="次年">
                        <svg fill="currentColor" width="12" height="12" viewBox="0 0 24 24" id="next" data-name="Flat Color" xmlns="http://www.w3.org/2000/svg" class="icon flat-color">
                            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                            <g id="SVGRepo_iconCarrier">
                                <path id="primary" d="M18.6,11.2l-12-9A1,1,0,0,0,5,3V21a1,1,0,0,0,.55.89,1,1,0,0,0,1-.09l12-9a1,1,0,0,0,0-1.6Z" fill="currentColor"></path>
                            </g>
                        </svg>
                    </button>
                </div>
                <div class="lme-payment-table-wrapper">
                    <table>
                        <thead>
                            <tr>
                                <th style="min-width: 120px">月</th>
                                <th style="min-width: 120px;background-color: #E0E0E0 !important;">ARPU</th>
                                <th style="min-width: 120px">有料ユーザー数</th>
                                <th style="min-width: 120px">売上合計</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="row in rows" :key="row.label">
                                <td>@{{ row.label }}</td>
                                <td>@{{ formatNumber(row.arpu) }}</td>
                                <td>@{{ formatNumber(row.paid_users) }}</td>
                                <td>@{{ formatNumber(row.total_revenue) }}</td>
                            </tr>
                            <tr v-if="loadError">
                                <td colspan="4" style="text-align:center;">
                                    <div class="flex flex-col items-center gap-[8px] py-[8px]">
                                        <span class="text-[#E02B2B]">データの取得に失敗しました</span>
                                        <button type="button" class="arpu-retry-btn" @click="fetchData">再試行</button>
                                    </div>
                                </td>
                            </tr>
                            <tr v-if="!rows.length && !loadError && !loading">
                                <td colspan="4" style="text-align:center;">データなし</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script src="/js/vue2.6.12/vue.js"></script>
    <script src="/lme-ui/src/js/date-picker/lme-date-picker.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/admin/ARPU/arpu.js?v={{config("sns-line.version")}}"></script>
@endpush