@extends('layout.admin_v2.main')
@push('css')
    <link rel="stylesheet" href="/css/component-base/reset.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/css/component-base/base.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/css/component-base/date-picker/date-picker.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/_assets/modules/supper_admin/css/monthly_bill.css?v={{config('sns-line.version')}}">
@endpush

@section('content')
<div id="monthly-bill-app" class="monthly-bill-page" v-cloak>

    {{-- ===== HEADER ===== --}}
    <div class="bill-header-row">
        <div class="page-title">月次決済</div>

        {{-- Year navigation --}}
        <div class="year-nav">
            <button class="nav-arrow" @click="prevYear">
                {{-- lme-arrow (mũi tên xuống) xoay 90° → chỉ sang trái --}}
                <span class="lme-arrow nav-arrow__icon nav-arrow__icon--prev">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13.1312 5H2.86873C2.56092 5 2.38904 5.325 2.57967 5.54688L7.71092 11.4969C7.85779 11.6672 8.1406 11.6672 8.28904 11.4969L13.4203 5.54688C13.6109 5.325 13.439 5 13.1312 5Z"
                              fill="currentColor"/>
                    </svg>
                </span>
            </button>
            <div class="year-display-wrap">
                <lme-date-picker
                    :key="pickerKey"
                    type="year"
                    :value="String(currentYear)"
                    {{-- Chặn năm ngoài khoảng NGAY trong picker: gõ tay năm ngoài [min,max]
                         thì onInputBlur tự trả input về giá trị cũ và KHÔNG emit change,
                         nên không phải ép sync lại input bằng cách re-key (Redmine #40229). --}}
                    :min-date="String(minYear)"
                    :max-date="String(maxYear)"
                    :clearable="false"
                    placeholder="年を選択"
                    size="lg"
                    width="150px"
                    @change="onYearChange"
                ></lme-date-picker>
            </div>
            <button class="nav-arrow" @click="nextYear">
                {{-- lme-arrow (mũi tên xuống) xoay -90° → chỉ sang phải --}}
                <span class="lme-arrow nav-arrow__icon nav-arrow__icon--next">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13.1312 5H2.86873C2.56092 5 2.38904 5.325 2.57967 5.54688L7.71092 11.4969C7.85779 11.6672 8.1406 11.6672 8.28904 11.4969L13.4203 5.54688C13.6109 5.325 13.439 5 13.1312 5Z"
                              fill="currentColor"/>
                    </svg>
                </span>
            </button>
        </div>

        {{-- Segmented tab (Ant Design style) --}}
        <div class="bill-segmented">
            <div class="bill-segmented__item" v-for="tab in tabOptions" :key="tab.value"
                 :class="{ 'active': activeTab === tab.value }"
                 @click="setTab(tab.value)">
                @{{ tab.text }}
            </div>
        </div>
    </div>

    {{-- ===== STATS CONTAINER (All tab only) ===== --}}
    <div class="bill-stats-container" v-if="activeTab === 'all'">

        {{-- 3 thẻ KPI tỷ lệ — CÙNG 1 template, data thật từ API (computed kpiCards).
             Không có dữ liệu → % hiển thị「-」+ bar trung tính (không vẽ số giả). --}}
        <div class="bill-stat-card" v-for="card in kpiCards" :key="card.label">
            <div class="bill-stat-card__label">@{{ card.label }}</div>
            <div class="bill-stat-card__ratio-row">
                <span class="bill-stat-card__prefix">@{{ card.leftLabel }}</span>
                <span class="bill-stat-card__value">：@{{ card.leftPct }}<span class="pct" v-if="card.hasData">%</span></span>
                <span class="bill-stat-card__sep"></span>
                <span class="bill-stat-card__prefix bill-stat-card__prefix--blue">@{{ card.rightLabel }}</span>
                <span class="bill-stat-card__value">：@{{ card.rightPct }}<span class="pct" v-if="card.hasData">%</span></span>
            </div>
            <div class="bill-progress-bar" :class="{ 'bill-progress-bar--empty': !card.hasData }">
                <div class="bill-progress-bar__fill bill-progress-bar__fill--gray" :style="{ flex: card.leftFlex }"></div>
                <div class="bill-progress-bar__fill bill-progress-bar__fill--blue" :style="{ flex: card.rightFlex }"></div>
            </div>
            <div>
                <div class="bill-stat-legend">
                    <span class="bill-legend-dot bill-legend-dot--gray"></span>
                    @{{ card.leftLabel }}：@{{ card.leftAmount }}（@{{ card.leftCount }}件）
                </div>
                <div class="bill-stat-legend">
                    <span class="bill-legend-dot bill-legend-dot--blue"></span>
                    @{{ card.rightLabel }}：@{{ card.rightAmount }}（@{{ card.rightCount }}件）
                </div>
            </div>
        </div>

    </div>

    {{-- ===== TABLE (per tab) ===== --}}
    <div v-if="activeTab === 'all'">
        @include('supper_admin.components.monthly_bill.tab_all')
    </div>
    <div v-if="activeTab === 'standard'">
        @include('supper_admin.components.monthly_bill.tab_standard')
    </div>
    <div v-if="activeTab === 'pro'">
        @include('supper_admin.components.monthly_bill.tab_pro')
    </div>

</div>
@endsection

@push('script')
    <script src="/js/media/vue.min.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/component-base/date-picker/lme-date-picker.js?v={{config('sns-line.version')}}"></script>
    <script src="/_assets/modules/supper_admin/js/monthly_bill.js?v={{config('sns-line.version')}}"></script>
@endpush