@extends('layout.admin_v2.main')

@push('css')
    <link rel="stylesheet" href="/lme-ui/src/css/reset.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/base.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/button/button.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/segmented/segmented.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/icon/icon.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/date-picker/date-picker.css?v={{config('sns-line.version')}}">

    <style>
        #monthlyPaymentPage {
            padding: 24px;
            color: #1F1F1F;
            font-size: 14px;
            font-weight: 400;
            background: #F5F7FA;
        }
        #monthlyPaymentPage [v-cloak] { display: none !important; }

        #monthlyPaymentPage .page-title {
            font-size: 18px;
            font-weight: 600;
            color: #222222;
            margin-right: 16px;
        }

        #monthlyPaymentPage .toolbar {
            display: flex;
            align-items: center;
            justify-content: start;
            gap: 16px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }
        .scrollable::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        .scrollable::-webkit-scrollbar-thumb {
            background: #DDDDDD 0% 0% no-repeat padding-box;
            border-radius: 4px;
        }
        .scrollable::-webkit-scrollbar-thumb:hover {
            background: #c7c1c1;
        }
        #monthlyPaymentPage .toolbar-left {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        #monthlyPaymentPage .month-picker-wrap {
            width: 160px;
        }

        /* Stats row */
        #monthlyPaymentPage .stats-row {
            display: flex;
            gap: 16px;
            margin-bottom: 16px;
            flex-wrap: wrap;
            align-items: stretch;
            background: #FFFFFF;
            border-radius: 10px;
            min-width: 850px;
            height: 210px;
            padding: 16px;
        }

        #monthlyPaymentPage .stat-card {
            flex: 1 1 0;
            min-width: 260px;
            background: #FFFFFF;
            border: 1px solid #EAEAEA;
            border-radius: 8px;
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            font-weight: 400;
            font-size: 13px;
            color: #1F1F1F;
        }

        #monthlyPaymentPage .stat-card .stat-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 20px;
            font-weight: 600;
            color: #222222;
        }

        #monthlyPaymentPage .stat-card .stat-label {
            font-size: 14px;
            font-weight: 400;
            color: #222222;
        }

        #monthlyPaymentPage .stat-card .stat-value {

        }

        #monthlyPaymentPage .ratio-bar {
            position: relative;
            height: 24px;
            border-radius: 999px;
            background: #EBEBEB;
            overflow: hidden;
        }
        #monthlyPaymentPage .ratio-bar-fill {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            background: #5799DB;
            transition: width .25s;
        }

        #monthlyPaymentPage .stat-detail {
            display: flex;
            flex-direction: column;
            font-size: 14px;
            color: #222222;
            font-weight: 400;
            gap: 8px;
        }
        #monthlyPaymentPage .stat-detail .dot {
            display: inline-block;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            margin-right: 6px;
            vertical-align: middle;
        }
        #monthlyPaymentPage .stat-detail .dot.gray { background: #EBEBEB; }
        #monthlyPaymentPage .stat-detail .dot.blue { background: #5799DB; }

        /* Grid table (div-based) */
        #monthlyPaymentPage .mp-grid-wrap {
            background: #FFFFFF;
            border: 1px solid #EAEAEA;
            border-radius: 8px;
            overflow: hidden;
        }
        #monthlyPaymentPage .mp-grid-scroll {
            overflow: auto;
            max-height: calc(100vh - 205px);
        }
        #monthlyPaymentPage .mp-grid-scroll.table-tab-all {
            max-height: calc(100vh - 380px);
        }
        /* Inner block sized to the grid template so horizontal scroll works */
        #monthlyPaymentPage .mp-grid {
            display: block;
            min-width: max-content;
            font-size: 12px;
            font-weight: 400;
            color: #1F1F1F;
        }

        /* 17 columns: date + 4 全体売上 + 3 新規 + 3 更新 + 2 アップグレード + 2 従量課金 + 1 解約 */
        #monthlyPaymentPage .mp-row.tab-all {
            display: grid;
            grid-template-columns:
                120px
                110px 90px 110px 110px
                90px 110px 110px
                90px 110px 110px
                90px 110px
                90px 110px
                90px;
        }
        /* All-tab top section — single grid: 2 header rows + 平均 summary row.
           MRR累積 cell spans header-row-2 + summary-row (rows 2-3) as one tall cell. */
        #monthlyPaymentPage .mp-top-all {
            display: grid;
            grid-template-columns:
                120px
                110px 90px 110px 110px
                90px 110px 110px
                90px 110px 110px
                90px 110px
                90px 110px
                90px;
            grid-template-rows: 38px 38px 38px;
            position: sticky;
            top: 0;
            z-index: 5;
        }
        #monthlyPaymentPage .mp-top-all .mp-cell {
            font-weight: 500;
            text-align: center;
            justify-content: center;
            border-bottom: 1px solid #EAEAEA;
        }
        /* Date col spans both header rows (NOT summary row) */
        #monthlyPaymentPage .mp-top-all .hd-date {
            grid-column: 1;
            grid-row: 1 / 3;
            background: #F8F8F8;
            position: sticky;
            left: 0;
            z-index: 6;
        }
        /* Row-1 group titles (span N cols) */
        #monthlyPaymentPage .mp-top-all .gh-total   { grid-column: 2 / 6;  grid-row: 1; }
        #monthlyPaymentPage .mp-top-all .gh-new     { grid-column: 6 / 9;  grid-row: 1; }
        #monthlyPaymentPage .mp-top-all .gh-update  { grid-column: 9 / 12; grid-row: 1; }
        #monthlyPaymentPage .mp-top-all .gh-upgrade { grid-column: 12 / 14; grid-row: 1; }
        #monthlyPaymentPage .mp-top-all .gh-usage   { grid-column: 14 / 16; grid-row: 1; }
        #monthlyPaymentPage .mp-top-all .gh-cancel  { grid-column: 16;     grid-row: 1; }
        /* Row-2 leaf headers */
        #monthlyPaymentPage .mp-top-all .hd-leaf { grid-row: 2; }
        /* MRR累積 — merged cell spanning header-row-2 + summary-row */
        #monthlyPaymentPage .mp-top-all .mrr-merged {
            grid-column: 2;
            grid-row: 2 / 4;
            background: #F8F8F8;
            border-bottom: none;
            color: #1F1F1F;
        }
        /* Row-3 平均 summary cells */
        #monthlyPaymentPage .mp-top-all .sum-date {
            grid-column: 1;
            grid-row: 3;
            background: #F8F8F8;
            position: sticky;
            left: 0;
            z-index: 6;
            justify-content: flex-start;
            padding: 10px 12px;
        }
        #monthlyPaymentPage .mp-top-all .sum-cell {
            grid-row: 3;
            font-weight: 300;
            background: #ffffff;
        }
        /* Standard tab: 19 cols = date + 4 standard全体 + 7 月払い (3+3+1) + 7 年間 (3+3+1) */
        #monthlyPaymentPage .mp-row.tab-std {
            display: grid;
            grid-template-columns:
                120px
                110px 90px 110px 110px
                90px 110px 110px
                90px 110px 110px
                90px
                90px 110px 110px
                90px 110px 110px
                90px;
        }
        /* Pro tab: 27 cols = date + 4 pro全体 + 11 月払い (3+3+2+2+1) + 11 年間 (3+3+2+2+1) */
        #monthlyPaymentPage .mp-row.tab-pro {
            display: grid;
            grid-template-columns:
                120px
                110px 90px 110px 110px
                90px 110px 110px
                90px 110px 110px
                90px 110px
                90px 110px
                90px
                90px 110px 110px
                90px 110px 110px
                90px 110px
                90px 110px
                90px;
        }
        /* Standard top section — 3 header rows + 平均 summary in ONE grid.
           MRR累積 spans rows 2-4 (header-row-2 + header-row-3 + summary). */
        #monthlyPaymentPage .mp-top-std {
            display: grid;
            grid-template-columns:
                120px
                110px 90px 110px 110px
                90px 110px 110px
                90px 110px 110px
                90px
                90px 110px 110px
                90px 110px 110px
                90px;
            grid-template-rows: 38px 38px 38px 38px;
            position: sticky;
            top: 0;
            z-index: 5;
        }

        /* Pro top section — same 3+1 row structure as Standard, but 27 cols
           (extra Ｓ→Ｐアップグレード + max friend sub-groups in each of 月払い + 年間). */
        #monthlyPaymentPage .mp-top-pro {
            display: grid;
            grid-template-columns:
                120px
                110px 90px 110px 110px
                90px 110px 110px
                90px 110px 110px
                90px 110px
                90px 110px
                90px
                90px 110px 110px
                90px 110px 110px
                90px 110px
                90px 110px
                90px;
            grid-template-rows: 38px 38px 38px 38px;
            position: sticky;
            top: 0;
            z-index: 5;
        }
        #monthlyPaymentPage .mp-top-pro .mp-cell {
            font-weight: 500;
            text-align: center;
            justify-content: center;
            border-bottom: 1px solid #EAEAEA;
        }

        /* Date col spans 3 header rows */
        #monthlyPaymentPage .mp-top-pro .hd-date {
            grid-column: 1;
            grid-row: 1 / 4;
            background: #F8F8F8;
            position: sticky;
            left: 0;
            z-index: 6;
        }

        /* プロ全体 group title — spans rows 1-2 (taller), cols 2..5 */
        #monthlyPaymentPage .mp-top-pro .hd-pro-total {
            grid-column: 2 / 6;
            grid-row: 1 / 3;
        }
        #monthlyPaymentPage .mp-top-pro .hd-pro-leaf {
            grid-row: 3;
        }

        /* MRR累積 — spans last 2 rows (header-row-3 + summary-row), col 2 */
        #monthlyPaymentPage .mp-top-pro .mrr-merged {
            grid-column: 2;
            grid-row: 3 / 5;
            background: #F8F8F8;
            border-bottom: none;
            font-weight: 600;
            color: #1F1F1F;
        }

        /* 月払い group — row 1, cols 6..16 (11 cols) */
        #monthlyPaymentPage .mp-top-pro .hd-monthly-grp {
            grid-column: 6 / 17;
            grid-row: 1;
        }
        /* sub-groups under 月払い — row 2 */
        #monthlyPaymentPage .mp-top-pro .hd-mon-new   { grid-column: 6 / 9;   grid-row: 2; }
        #monthlyPaymentPage .mp-top-pro .hd-mon-upd   { grid-column: 9 / 12;  grid-row: 2; }
        #monthlyPaymentPage .mp-top-pro .hd-mon-upg   { grid-column: 12 / 14; grid-row: 2; }
        #monthlyPaymentPage .mp-top-pro .hd-mon-mxf   { grid-column: 14 / 16; grid-row: 2; }
        #monthlyPaymentPage .mp-top-pro .hd-mon-cnl   { grid-column: 16;      grid-row: 2; }

        /* 年間一括払い group — row 1, cols 17..27 (11 cols) */
        #monthlyPaymentPage .mp-top-pro .hd-yearly-grp {
            grid-column: 17 / 28;
            grid-row: 1;
        }
        #monthlyPaymentPage .mp-top-pro .hd-yr-new   { grid-column: 17 / 20; grid-row: 2; }
        #monthlyPaymentPage .mp-top-pro .hd-yr-upd   { grid-column: 20 / 23; grid-row: 2; }
        #monthlyPaymentPage .mp-top-pro .hd-yr-upg   { grid-column: 23 / 25; grid-row: 2; }
        #monthlyPaymentPage .mp-top-pro .hd-yr-mxf   { grid-column: 25 / 27; grid-row: 2; }
        #monthlyPaymentPage .mp-top-pro .hd-yr-cnl   { grid-column: 27;      grid-row: 2; }

        /* Leaf row 3 cells flow into row 3 auto-slots */
        #monthlyPaymentPage .mp-top-pro .hd-leaf { grid-row: 3; }

        /* Row 4 平均 summary cells */
        #monthlyPaymentPage .mp-top-pro .sum-date {
            grid-column: 1;
            grid-row: 4;
            background: #F8F8F8;
            position: sticky;
            left: 0;
            z-index: 6;
            justify-content: flex-start;
            padding: 10px 12px;
        }
        #monthlyPaymentPage .mp-top-pro .sum-cell {
            grid-row: 4;
            font-weight: 300;
            background: #ffffff;
        }

        /* Group tints for Pro tab */
        #monthlyPaymentPage .mp-top-pro .grp-monthly { background: #F8F8F8; }
        #monthlyPaymentPage .mp-top-pro .grp-yearly  { background: #F8F8F8; }
        #monthlyPaymentPage .mp-top-pro .grp-total   { background: #F8F8F8; }
        #monthlyPaymentPage .mp-top-pro .grp-new     { background: #EDF4FB; }
        #monthlyPaymentPage .mp-top-pro .grp-update  { background: #F4FBF2; }
        #monthlyPaymentPage .mp-top-pro .grp-upgrade { background: #FEF5E4; }
        #monthlyPaymentPage .mp-top-pro .grp-mxfriend{ background: #FEF5E4; }
        #monthlyPaymentPage .mp-top-pro .grp-cancel  { background: #FDEBE9; }

        #monthlyPaymentPage .mp-top-pro .hd-mon-new.hd-mon-new.grp-new, #monthlyPaymentPage .mp-top-pro .hd-yr-new.grp-new { color: #5799DB; }
        #monthlyPaymentPage .mp-top-pro .hd-mon-upd.grp-update, #monthlyPaymentPage .mp-top-pro .hd-yr-upd.grp-update { color: #08BF5A; }
        #monthlyPaymentPage .mp-top-pro .hd-mon-upg.grp-upgrade, #monthlyPaymentPage .mp-top-pro .hd-yr-upg.grp-upgrade { color: #FEA600; }
        #monthlyPaymentPage .mp-top-pro .hd-mon-mxf.grp-mxfriend, #monthlyPaymentPage .mp-top-pro .hd-yr-mxf.grp-mxfriend { color: #FEA600; }
        #monthlyPaymentPage .mp-top-pro .hd-mon-cnl.grp-cancel, #monthlyPaymentPage .mp-top-pro .hd-yr-cnl.grp-cancel { color: #F44336; }

        /* Header row 1 (group titles) — sticky */
        #monthlyPaymentPage .mp-row-group {
            position: sticky;
            top: 0;
            z-index: 3;
        }
        #monthlyPaymentPage .mp-row-group .mp-cell {
            font-weight: 600;
            text-align: center;
            justify-content: center;
            border-bottom: 1px solid #EAEAEA;
        }

        /* Header row 2 (sub titles) — sticky below row 1 */
        #monthlyPaymentPage .mp-row-sub {
            position: sticky;
            top: 38px;
            z-index: 3;
        }
        #monthlyPaymentPage .mp-row-sub .mp-cell {
            font-weight: 600;
            text-align: center;
            justify-content: center;
            border-bottom: 1px solid #EAEAEA;
        }

        /* Group color tints — applied to HEADER cells only.
           Body/summary rows stay neutral white. */
        #monthlyPaymentPage .mp-top-all .grp-total   { background: #F8F8F8; }
        #monthlyPaymentPage .mp-top-all .grp-new     { background: #EDF4FB; }
        #monthlyPaymentPage .mp-top-all .grp-update  { background: #F4FBF2; }
        #monthlyPaymentPage .mp-top-all .grp-upgrade { background: #FEF5E4; }
        #monthlyPaymentPage .mp-top-all .grp-usage   { background: #FEF5E4; }
        #monthlyPaymentPage .mp-top-all .grp-cancel  { background: #FDEBE9; }


        #monthlyPaymentPage .mp-top-all .gh-new.grp-new { color: #5799DB; }
        #monthlyPaymentPage .mp-top-all .gh-update.grp-update  { color: #08BF5A; }
        #monthlyPaymentPage .mp-top-all .gh-upgrade.grp-upgrade { color: #FEA600; }
        #monthlyPaymentPage .mp-top-all .gh-usage.grp-usage   { color: #FEA600; }
        #monthlyPaymentPage .mp-top-all .gh-cancel.grp-cancel  { color: #F44336; }

        /* MRR累積 bridge — visually merge the header cell with the 平均 row's MRR cell
           so the MRR累計 (cumulative) value appears as one tall yellow cell. */
        #monthlyPaymentPage .mp-top-all .mrr-bridge,
        #monthlyPaymentPage .mp-top-std .mrr-bridge {
            background: #FFF8E7;
            border-bottom: none;
            color: #1F1F1F;
        }
        #monthlyPaymentPage .mp-row-summary .mp-cell.mrr-bridge {
            background: #FFF8E7;
            border-top: none;
        }

        #monthlyPaymentPage .mp-cell {
            padding: 10px 8px;
            border-right: 1px solid #EAEAEA;
            border-bottom: 1px solid #F0F0F0;
            text-align: right;
            white-space: nowrap;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            min-height: 38px;
            box-sizing: border-box;
            font-weight: 300;
            color: #222222;
            font-size: 14px;
        }
        #monthlyPaymentPage .mp-cell:last-child { border-right: none; }

        /* Date column — sticky left, left aligned */
        #monthlyPaymentPage .mp-cell.col-date {
            justify-content: flex-start;
            text-align: left;
            background: #FAFBFC;
            position: sticky;
            left: 0;
            z-index: 2;
        }
        #monthlyPaymentPage .mp-row-group .mp-cell.col-date,
        #monthlyPaymentPage .mp-row-sub .mp-cell.col-date {
            z-index: 4;
        }
        /* Date column spans both header rows visually via an absolutely-positioned
           label that extends down into the row-2 placeholder area. */
        #monthlyPaymentPage .mp-row-group .mp-cell.col-date,
        #monthlyPaymentPage .mp-row-sub   .mp-cell.col-date {
            background: #E6ECF2;
            padding: 0;
            overflow: visible;
        }
        #monthlyPaymentPage .col-date-label {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 76px; /* span 2 header rows (row-group 38px + row-sub 38px) */
            display: flex;
            align-items: center;
            justify-content: center;
            background: #E6ECF2;
            border-right: 1px solid #EAEAEA;
            border-bottom: 1px solid #EAEAEA;
            font-weight: 600;
            font-size: 12px;
            color: #1F1F1F;
            z-index: 1;
            box-sizing: border-box;
        }
        /* Row-1 col-date cell must allow the absolute label to overflow downward */
        #monthlyPaymentPage .mp-row-group .mp-cell.col-date {
            position: sticky;
            left: 0;
            z-index: 4;
            min-height: 38px;
        }
        /* Row-2 placeholder — same background fills the area when scrolling. */
        #monthlyPaymentPage .mp-row-sub .mp-cell.col-date {
            border-bottom: 1px solid #EAEAEA;
        }

        /* Row hover for body rows */
        #monthlyPaymentPage .mp-row.mp-row-data:hover .mp-cell {
            background: #FAFCFE;
        }
        #monthlyPaymentPage .mp-row.mp-row-data:hover .mp-cell.col-date {
            background: #F0F4F8;
        }

        /* 合計 total row — pinned at the bottom of each tab's data rows */
        #monthlyPaymentPage .mp-row.mp-row-total .mp-cell {
            background: #fff;
            font-weight: 300;
            font-size: 14px;
            color: #222222;
        }
        #monthlyPaymentPage .mp-row.mp-row-total .mp-cell.col-date {
            background: #F0F0F0;
            font-weight: 600;
            font-size: 14px;
            color: #222222;
        }

        /* Standard tab header — grid placements */
        #monthlyPaymentPage .mp-top-std .mp-cell {
            font-weight: 600;
            text-align: center;
            justify-content: center;
            border-bottom: 1px solid #EAEAEA;
        }
        /* Date column (col 1) — spans all 3 header rows */
        #monthlyPaymentPage .mp-top-std .hd-date {
            grid-column: 1;
            grid-row: 1 / 4;
            background: #F8F8F8;
            position: sticky;
            left: 0;
            z-index: 6;
            justify-content: center;
            padding: 10px 8px;
            font-weight: 500;
        }

        /* Date col spans header rows only (rows 1-3), NOT summary row */
        #monthlyPaymentPage .mp-top-std .hd-date {
            grid-row: 1 / 4;
        }

        /* スタンダード全体 group title — spans rows 1-2 (taller group title), cols 2..5 */
        #monthlyPaymentPage .mp-top-std .hd-std-total {
            grid-column: 2 / 6;
            grid-row: 1 / 3;
        }
        /* Its 3 other leaf cells (件数/売上/比) — row 3 only (single row) */
        #monthlyPaymentPage .mp-top-std .hd-std-leaf {
            grid-row: 3;
        }
        /* MRR累積 — merged cell spans last 2 rows: header-row-3 + summary-row (rows 3-4),
           skipping the first 2 header rows occupied by スタンダード全体 group title above. */
        #monthlyPaymentPage .mp-top-std .mrr-merged {
            grid-column: 2;
            grid-row: 3 / 5;
            background: #F8F8F8;
            border-bottom: none;
            font-weight: 600;
            color: #1F1F1F;
        }
        /* Row-4 平均 summary cells (Standard tab) */
        #monthlyPaymentPage .mp-top-std .sum-date {
            grid-column: 1;
            grid-row: 4;
            background: #F8F8F8;
            position: sticky;
            left: 0;
            z-index: 6;
            justify-content: flex-start;
            padding: 10px 12px;
        }
        #monthlyPaymentPage .mp-top-std .sum-cell {
            grid-row: 4;
            font-weight: 300;
            background: #ffffff;
        }

        /* 月払い group — row 1, cols 6..12 (7 cols) */
        #monthlyPaymentPage .mp-top-std .hd-monthly-grp {
            grid-column: 6 / 13;
            grid-row: 1;
        }
        /* sub-groups under 月払い — row 2 */
        #monthlyPaymentPage .mp-top-std .hd-mon-new { grid-column: 6 / 9;  grid-row: 2; }
        #monthlyPaymentPage .mp-top-std .hd-mon-upd { grid-column: 9 / 12; grid-row: 2; }
        #monthlyPaymentPage .mp-top-std .hd-mon-cnl { grid-column: 12;     grid-row: 2; }

        /* 年間一括払い group — row 1, cols 13..19 (7 cols) */
        #monthlyPaymentPage .mp-top-std .hd-yearly-grp {
            grid-column: 13 / 20;
            grid-row: 1;
        }
        #monthlyPaymentPage .mp-top-std .hd-yr-new { grid-column: 13 / 16; grid-row: 2; }
        #monthlyPaymentPage .mp-top-std .hd-yr-upd { grid-column: 16 / 19; grid-row: 2; }
        #monthlyPaymentPage .mp-top-std .hd-yr-cnl { grid-column: 19;      grid-row: 2; }

        /* Leaf row 3 cells (auto-flow into remaining slots in row 3) */
        #monthlyPaymentPage .mp-top-std .hd-leaf {
            grid-row: 3;
        }

        /* Additional group tints for Standard tab */
        #monthlyPaymentPage .mp-top-std .grp-monthly { background: #F8F8F8; }
        #monthlyPaymentPage .mp-top-std .grp-yearly  { background: #F8F8F8; }
        #monthlyPaymentPage .mp-top-std .grp-total   { background: #F8F8F8; }
        #monthlyPaymentPage .mp-top-std .grp-new     { background: #EDF4FB; }
        #monthlyPaymentPage .mp-top-std .grp-update  { background: #F4FBF2; }
        #monthlyPaymentPage .mp-top-std .grp-cancel  { background: #FDEBE9; }

        /* Additional group tints for Standard tab */
        #monthlyPaymentPage .mp-top-std .hd-mon-new.grp-new, #monthlyPaymentPage .mp-top-std .hd-yr-new.grp-new { color: #5799DB }
        #monthlyPaymentPage .mp-top-std .hd-mon-upd.grp-update, #monthlyPaymentPage .mp-top-std .hd-yr-upd.grp-update  { color: #08BF5A; }
        #monthlyPaymentPage .mp-top-std .hd-mon-cnl.grp-cancel, #monthlyPaymentPage .mp-top-std .hd-yr-cnl.grp-cancel  { color: #F44336; }

        /* Grouped header cells span multiple columns (All tab) */
        #monthlyPaymentPage .gh-total    { grid-column: span 4; }
        #monthlyPaymentPage .gh-new      { grid-column: span 3; }
        #monthlyPaymentPage .gh-update   { grid-column: span 3; }
        #monthlyPaymentPage .gh-upgrade  { grid-column: span 2; }
        #monthlyPaymentPage .gh-usage    { grid-column: span 2; }
        #monthlyPaymentPage .gh-cancel   { grid-column: span 1; }

        /* Summary row */
        #monthlyPaymentPage .mp-row-summary .mp-cell {
            background: #FFF8E7;
            font-weight: 600;
        }
        #monthlyPaymentPage .mp-row-summary .mp-cell.col-date {
            background: #FFF3D6;
        }

        #monthlyPaymentPage .delta-up { color: #52C41A; font-weight: 500; }
        #monthlyPaymentPage .delta-down { color: #FF4D4F; font-weight: 500; }
        /*#monthlyPaymentPage .muted { color: #B0B7BA; }*/
        .stat-detail-item {
            display: flex;
            align-items: center;
        }
        .lme-segmented-item {
            color: #888888;
        }
        .lme-segmented-item.lme-segmented-item-active {
            color: #222222;
        }
        .plan {
            display: flex;
            align-items: center;
            justify-content: start;
            gap: 8px;
        }
        .plan .circle {
            width: 14px;
            height: 14px;
            border-radius: 50%;
        }
        .plan-standard .circle { background: #FEA600; }
        .plan-pro .circle { background: #F44336; }

    </style>
@endpush

@section('content')
<div id="monthlyPaymentPage" v-cloak>
    <div class="toolbar">
        <div class="toolbar-left">
            <div class="page-title">月次決済</div>
            <lme-button-flat type="primary" size="md" icon @click="prevMonth">
                <lme-icon file_name="caret-left-filled" color="#888888"></lme-icon>
            </lme-button-flat>

            <div class="month-picker-wrap">
                <lme-date-picker
                    v-model="selectedMonth"
                    type="month"
                    format="YYYY年MM月"
                    size="md"
                    placeholder="月を選択"
                    @input="onMonthChange"
                ></lme-date-picker>
            </div>

            <lme-button-flat type="primary" size="md" icon @click="nextMonth">
                <lme-icon file_name="caret-right-filled" color="#888888"></lme-icon>
            </lme-button-flat>
        </div>

        <div class="toolbar-right">
            <lme-segmented v-model="activeTab" :options="tabOptions" :height="34" @change="onTabChange"></lme-segmented>
        </div>
    </div>

    <div class="stats-row" v-if="activeTab === 'all'">
        {{-- 新規 / 既存 比率 --}}
        <div class="stat-card">
            <div class="stat-row">
                <span class="stat-label">新規／既存 比率</span>
            </div>
            <div class="stat-row">
                <span><span style="color: #888888">既</span><span class="stat-value">： @{{ stats.existingRatio }}%</span></span>
                <span><span style="color: #5799DB">新</span><span class="stat-value">：@{{ stats.newRatio }}%</span></span>
            </div>
            <div class="ratio-bar">
                <div class="ratio-bar-fill" :style="{ width: stats.newRatio + '%' }"></div>
            </div>
            <div class="stat-detail">
                <span class="stat-detail-item"><span class="dot gray"></span>既：¥@{{ formatNumber(stats.existingAmount) }}（@{{ stats.existingCount }}件）</span>
                <span class="stat-detail-item"><span class="dot blue"></span>新：¥@{{ formatNumber(stats.newAmount) }}（@{{ stats.newCount }}件）</span>
            </div>
        </div>

        {{-- スタンダード / プロ 比率 --}}
        <div class="stat-card">
            <div class="stat-row">
                <span class="stat-label">スタンダード／プロ 比率</span>
            </div>
            <div class="stat-row">
                <span><span style="color: #888888">S</span><span class="stat-value">： @{{ stats.standardRatio }}%</span></span>
                <span><span style="color: #5799DB">P</span><span class="stat-value">： @{{ stats.proRatio }}%</span></span>
            </div>
            <div class="ratio-bar">
                <div class="ratio-bar-fill" :style="{ width: stats.proRatio + '%' }"></div>
            </div>
            <div class="stat-detail">
                <span class="stat-detail-item"><span class="dot gray"></span>S：¥@{{ formatNumber(stats.standardAmount) }}（@{{ stats.standardCount }}件）</span>
                <span class="stat-detail-item"><span class="dot blue"></span>P：¥@{{ formatNumber(stats.proAmount) }}（@{{ stats.proCount }}件）</span>
            </div>
        </div>

        {{-- 月 / 年 払い 比率 --}}
        <div class="stat-card">
            <div class="stat-row">
                <span class="stat-label">月／年払い 比率</span>
            </div>
            <div class="stat-row">
                <span><span style="color: #888888">月</span><span class="stat-value">： @{{ stats.monthlyRatio }}%</span></span>
                <span><span style="color: #5799DB">年</span><span class="stat-value">： @{{ stats.yearlyRatio }}%</span></span>
            </div>
            <div class="ratio-bar">
                <div class="ratio-bar-fill" :style="{ width: stats.yearlyRatio + '%' }"></div>
            </div>
            <div class="stat-detail">
                <span class="stat-detail-item"><span class="dot gray"></span>月：¥@{{ formatNumber(stats.monthlyAmount) }}（@{{ stats.monthlyCount }}件）</span>
                <span class="stat-detail-item"><span class="dot blue"></span>年：¥@{{ formatNumber(stats.yearlyAmount) }}（@{{ stats.yearlyCount }}件）</span>
            </div>
        </div>
    </div>

    <div class="mp-grid-wrap">
        <div class="mp-grid-scroll scrollable" :class="'table-tab-' + activeTab">
            <div class="mp-grid" role="table" aria-label="月次決済一覧">
            {{-- ============================================================ --}}
            {{-- TAB: 全体数値 (all) — 17 columns, 2 header rows               --}}
            {{-- ============================================================ --}}
            <template v-if="activeTab === 'all'">
                {{-- Top section: 2 header rows + 平均 summary row in ONE grid so MRR累積 cell
                     can natively span header-row-2 + summary-row as a single merged cell. --}}
                <div class="mp-top-all" role="rowgroup">
                    {{-- Row 1: group titles + date (date spans row 1-2) --}}
                    <div class="mp-cell hd-date" role="columnheader">日付</div>
                    <div class="mp-cell gh-total grp-total" role="columnheader">全体売上</div>
                    <div class="mp-cell gh-new grp-new" role="columnheader">新規</div>
                    <div class="mp-cell gh-update grp-update" role="columnheader">更新</div>
                    <div class="mp-cell gh-upgrade grp-upgrade" role="columnheader">Ｓ→Ｐアップグレード 日割り</div>
                    <div class="mp-cell gh-usage grp-usage" role="columnheader">従量課金</div>
                    <div class="mp-cell gh-cancel grp-cancel" role="columnheader">解約</div>

                    {{-- Row 2: leaf headers. MRR累積 is merged across rows 2-3. --}}
                    <div class="mp-cell mrr-merged">MRR累積</div>
                    <div class="mp-cell hd-leaf grp-total">決済件数</div>
                    <div class="mp-cell hd-leaf grp-total">日次売上</div>
                    <div class="mp-cell hd-leaf grp-total">30日平均比</div>

                    <div class="mp-cell hd-leaf grp-new">決済件数</div>
                    <div class="mp-cell hd-leaf grp-new">決済額</div>
                    <div class="mp-cell hd-leaf grp-new">30日平均比</div>

                    <div class="mp-cell hd-leaf grp-update">決済件数</div>
                    <div class="mp-cell hd-leaf grp-update">決済額</div>
                    <div class="mp-cell hd-leaf grp-update">30日平均比</div>

                    <div class="mp-cell hd-leaf grp-upgrade">決済件数</div>
                    <div class="mp-cell hd-leaf grp-upgrade">決済額</div>

                    <div class="mp-cell hd-leaf grp-usage">決済件数</div>
                    <div class="mp-cell hd-leaf grp-usage">決済額</div>

                    <div class="mp-cell hd-leaf grp-cancel">件数</div>

                    {{-- Row 3: 平均 summary. Col 2 is occupied by mrr-merged, skipped here. --}}
                    <div class="mp-cell sum-date">平均</div>
                    <div class="mp-cell sum-cell">@{{ formatCount(summary.totalCount) }}</div>
                    <div class="mp-cell sum-cell">¥@{{ formatNumber(summary.dailyAvg) }}</div>
                    <div class="mp-cell sum-cell"><span :class="deltaClass(summary.delta30)">@{{ formatDelta(summary.delta30) }}</span></div>

                    <div class="mp-cell sum-cell">@{{ formatCount(summary.newCount) }}</div>
                    <div class="mp-cell sum-cell">¥@{{ formatNumber(summary.newAmount) }}</div>
                    <div class="mp-cell sum-cell"><span :class="deltaClass(summary.newDelta)">@{{ formatDelta(summary.newDelta) }}</span></div>

                    <div class="mp-cell sum-cell">@{{ formatCount(summary.updateCount) }}</div>
                    <div class="mp-cell sum-cell">¥@{{ formatNumber(summary.updateAmount) }}</div>
                    <div class="mp-cell sum-cell"><span :class="deltaClass(summary.updateDelta)">@{{ formatDelta(summary.updateDelta) }}</span></div>

                    <div class="mp-cell sum-cell">@{{ formatCount(summary.upgradeCount) }}</div>
                    <div class="mp-cell sum-cell">¥@{{ formatNumber(summary.upgradeAmount) }}</div>

                    <div class="mp-cell sum-cell">@{{ formatCount(summary.usageCount) }}</div>
                    <div class="mp-cell sum-cell">¥@{{ formatNumber(summary.usageAmount) }}</div>

                    <div class="mp-cell sum-cell">@{{ formatCount(summary.cancelCount) }}</div>
                </div>

                {{-- Data rows --}}
                <div class="mp-row tab-all mp-row-data" role="row" v-for="row in rows" :key="row.date">
                    <div class="mp-cell col-date">@{{ row.date }}</div>
                    <div class="mp-cell grp-total">@{{ formatMrr(row.mrrTotal) }}</div>
                    <div class="mp-cell grp-total"><span :class="{ muted: !row.totalCount }">@{{ row.totalCount || '-' }}</span></div>
                    <div class="mp-cell grp-total">@{{ formatAmount(row.dailyAmount) }}</div>
                    <div class="mp-cell grp-total"><span :class="deltaClass(row.delta30)">@{{ formatDelta(row.delta30) }}</span></div>

                    <div class="mp-cell grp-new"><span :class="{ muted: !row.newCount }">@{{ row.newCount || '-' }}</span></div>
                    <div class="mp-cell grp-new"><span :class="{ muted: !row.newAmount }">@{{ formatAmount(row.newAmount) }}</span></div>
                    <div class="mp-cell grp-new"><span :class="deltaClass(row.newDelta)">@{{ formatDelta(row.newDelta) }}</span></div>

                    <div class="mp-cell grp-update"><span :class="{ muted: !row.updateCount }">@{{ row.updateCount || '-' }}</span></div>
                    <div class="mp-cell grp-update"><span :class="{ muted: !row.updateAmount }">@{{ formatAmount(row.updateAmount) }}</span></div>
                    <div class="mp-cell grp-update"><span :class="deltaClass(row.updateDelta)">@{{ formatDelta(row.updateDelta) }}</span></div>

                    <div class="mp-cell grp-upgrade"><span :class="{ muted: !row.upgradeCount }">@{{ row.upgradeCount || '-' }}</span></div>
                    <div class="mp-cell grp-upgrade"><span :class="{ muted: !row.upgradeAmount }">@{{ formatAmount(row.upgradeAmount) }}</span></div>

                    <div class="mp-cell grp-usage"><span :class="{ muted: !row.usageCount }">@{{ row.usageCount || '-' }}</span></div>
                    <div class="mp-cell grp-usage"><span :class="{ muted: !row.usageAmount }">@{{ formatAmount(row.usageAmount) }}</span></div>

                    <div class="mp-cell grp-cancel"><span :class="{ muted: !row.cancelCount }">@{{ row.cancelCount || '-' }}</span></div>
                </div>

                {{-- Tổng row --}}
                <div class="mp-row tab-all mp-row-total" role="row">
                    <div class="mp-cell col-date">合計</div>
                    <div class="mp-cell grp-total">@{{ formatMrr(total.mrrTotal) }}</div>
                    <div class="mp-cell grp-total">@{{ formatCount(total.totalCount) }}</div>
                    <div class="mp-cell grp-total">¥@{{ formatNumber(total.dailyAvg) }}</div>
                    <div class="mp-cell grp-total">-</div>

                    <div class="mp-cell grp-new">@{{ formatCount(total.newCount) }}</div>
                    <div class="mp-cell grp-new">¥@{{ formatNumber(total.newAmount) }}</div>
                    <div class="mp-cell grp-new">-</div>

                    <div class="mp-cell grp-update">@{{ formatCount(total.updateCount) }}</div>
                    <div class="mp-cell grp-update">¥@{{ formatNumber(total.updateAmount) }}</div>
                    <div class="mp-cell grp-update">-</div>

                    <div class="mp-cell grp-upgrade">@{{ formatCount(total.upgradeCount) }}</div>
                    <div class="mp-cell grp-upgrade">¥@{{ formatNumber(total.upgradeAmount) }}</div>

                    <div class="mp-cell grp-usage">@{{ formatCount(total.usageCount) }}</div>
                    <div class="mp-cell grp-usage">¥@{{ formatNumber(total.usageAmount) }}</div>

                    <div class="mp-cell grp-cancel">@{{ formatCount(total.cancelCount) }}</div>
                </div>
            </template>

            {{-- ============================================================ --}}
            {{-- TAB: スタンダード (standard) — 19 cols, 3 header rows + summary --}}
            {{-- ============================================================ --}}
            <template v-else-if="activeTab === 'standard'">
                {{-- Header — single grid for asymmetric row/col spans --}}
                <div class="mp-top-std" role="rowgroup">
                    {{-- Date — spans all 3 header rows, sticky left --}}
                    <div class="mp-cell col-date hd-date" role="columnheader">日付</div>

                    {{-- スタンダード全体 — group title spans 4 cols at row 1 (incl. MRR累積) --}}
                    <div class="mp-cell hd-std-total grp-total" role="columnheader">
                        <span class="plan plan-standard"><span class="circle"></span>スタンダード全体</span>
                    </div>
                    {{-- MRR累積 spans header-rows 2-3 + summary row (one merged cell) --}}
                    <div class="mp-cell mrr-merged" role="columnheader">MRR累積</div>
                    {{-- 3 other leaf titles under スタンダード全体 — each spans rows 2-3 --}}
                    <div class="mp-cell hd-std-leaf grp-total" role="columnheader">決済件数</div>
                    <div class="mp-cell hd-std-leaf grp-total" role="columnheader">日次売上</div>
                    <div class="mp-cell hd-std-leaf grp-total" role="columnheader">30日平均比</div>

                    {{-- 月払い — group at row 1, sub-groups at row 2, leaves at row 3 --}}
                    <div class="mp-cell hd-monthly-grp grp-monthly" role="columnheader">月払い</div>
                    <div class="mp-cell hd-mon-new grp-new" role="columnheader">新規</div>
                    <div class="mp-cell hd-mon-upd grp-update" role="columnheader">更新</div>
                    <div class="mp-cell hd-mon-cnl grp-cancel" role="columnheader">解約</div>
                    <div class="mp-cell hd-leaf grp-new">決済件数</div>
                    <div class="mp-cell hd-leaf grp-new">決済額</div>
                    <div class="mp-cell hd-leaf grp-new">30日平均比</div>
                    <div class="mp-cell hd-leaf grp-update">決済件数</div>
                    <div class="mp-cell hd-leaf grp-update">決済額</div>
                    <div class="mp-cell hd-leaf grp-update">30日平均比</div>
                    <div class="mp-cell hd-leaf grp-cancel">件数</div>

                    {{-- 年間一括払い --}}
                    <div class="mp-cell hd-yearly-grp grp-yearly" role="columnheader">年間一括払い</div>
                    <div class="mp-cell hd-yr-new grp-new" role="columnheader">新規</div>
                    <div class="mp-cell hd-yr-upd grp-update" role="columnheader">更新</div>
                    <div class="mp-cell hd-yr-cnl grp-cancel" role="columnheader">解約</div>
                    <div class="mp-cell hd-leaf grp-new">決済件数</div>
                    <div class="mp-cell hd-leaf grp-new">決済額</div>
                    <div class="mp-cell hd-leaf grp-new">30日平均比</div>
                    <div class="mp-cell hd-leaf grp-update">決済件数</div>
                    <div class="mp-cell hd-leaf grp-update">決済額</div>
                    <div class="mp-cell hd-leaf grp-update">30日平均比</div>
                    <div class="mp-cell hd-leaf grp-cancel">件数</div>

                    {{-- Row 4: 平均 summary. Col 2 is occupied by mrr-merged (spans rows 2-4). --}}
                    <div class="mp-cell sum-date">平均</div>
                    <div class="mp-cell sum-cell">@{{ formatCount(stdSummary.totalCount) }}</div>
                    <div class="mp-cell sum-cell">¥@{{ formatNumber(stdSummary.dailyAvg) }}</div>
                    <div class="mp-cell sum-cell"><span :class="deltaClass(stdSummary.delta30)">@{{ formatDelta(stdSummary.delta30) }}</span></div>

                    <div class="mp-cell sum-cell">@{{ formatCount(stdSummary.monNewCount) }}</div>
                    <div class="mp-cell sum-cell">¥@{{ formatNumber(stdSummary.monNewAmount) }}</div>
                    <div class="mp-cell sum-cell"><span :class="deltaClass(stdSummary.monNewDelta)">@{{ formatDelta(stdSummary.monNewDelta) }}</span></div>
                    <div class="mp-cell sum-cell">@{{ formatCount(stdSummary.monUpdCount) }}</div>
                    <div class="mp-cell sum-cell">¥@{{ formatNumber(stdSummary.monUpdAmount) }}</div>
                    <div class="mp-cell sum-cell"><span :class="deltaClass(stdSummary.monUpdDelta)">@{{ formatDelta(stdSummary.monUpdDelta) }}</span></div>
                    <div class="mp-cell sum-cell">@{{ formatCount(stdSummary.monCnlCount) }}</div>

                    <div class="mp-cell sum-cell">@{{ formatCount(stdSummary.yrNewCount) }}</div>
                    <div class="mp-cell sum-cell">¥@{{ formatNumber(stdSummary.yrNewAmount) }}</div>
                    <div class="mp-cell sum-cell"><span :class="deltaClass(stdSummary.yrNewDelta)">@{{ formatDelta(stdSummary.yrNewDelta) }}</span></div>
                    <div class="mp-cell sum-cell">@{{ formatCount(stdSummary.yrUpdCount) }}</div>
                    <div class="mp-cell sum-cell">¥@{{ formatNumber(stdSummary.yrUpdAmount) }}</div>
                    <div class="mp-cell sum-cell"><span :class="deltaClass(stdSummary.yrUpdDelta)">@{{ formatDelta(stdSummary.yrUpdDelta) }}</span></div>
                    <div class="mp-cell sum-cell">@{{ formatCount(stdSummary.yrCnlCount) }}</div>
                </div>

                {{-- Data rows --}}
                <div class="mp-row tab-std mp-row-data" role="row" v-for="row in stdRows" :key="row.date">
                    <div class="mp-cell col-date">@{{ row.date }}</div>
                    <div class="mp-cell">@{{ formatMrr(row.mrrTotal) }}</div>
                    <div class="mp-cell"><span :class="{ muted: !row.totalCount }">@{{ row.totalCount || '-' }}</span></div>
                    <div class="mp-cell">@{{ formatAmount(row.dailyAmount) }}</div>
                    <div class="mp-cell"><span :class="deltaClass(row.delta30)">@{{ formatDelta(row.delta30) }}</span></div>

                    <div class="mp-cell"><span :class="{ muted: !row.monNewCount }">@{{ row.monNewCount || '-' }}</span></div>
                    <div class="mp-cell"><span :class="{ muted: !row.monNewAmount }">@{{ formatAmount(row.monNewAmount) }}</span></div>
                    <div class="mp-cell"><span :class="deltaClass(row.monNewDelta)">@{{ formatDelta(row.monNewDelta) }}</span></div>
                    <div class="mp-cell"><span :class="{ muted: !row.monUpdCount }">@{{ row.monUpdCount || '-' }}</span></div>
                    <div class="mp-cell"><span :class="{ muted: !row.monUpdAmount }">@{{ formatAmount(row.monUpdAmount) }}</span></div>
                    <div class="mp-cell"><span :class="deltaClass(row.monUpdDelta)">@{{ formatDelta(row.monUpdDelta) }}</span></div>
                    <div class="mp-cell"><span :class="{ muted: !row.monCnlCount }">@{{ row.monCnlCount || '-' }}</span></div>

                    <div class="mp-cell"><span :class="{ muted: !row.yrNewCount }">@{{ row.yrNewCount || '-' }}</span></div>
                    <div class="mp-cell"><span :class="{ muted: !row.yrNewAmount }">@{{ formatAmount(row.yrNewAmount) }}</span></div>
                    <div class="mp-cell"><span :class="deltaClass(row.yrNewDelta)">@{{ formatDelta(row.yrNewDelta) }}</span></div>
                    <div class="mp-cell"><span :class="{ muted: !row.yrUpdCount }">@{{ row.yrUpdCount || '-' }}</span></div>
                    <div class="mp-cell"><span :class="{ muted: !row.yrUpdAmount }">@{{ formatAmount(row.yrUpdAmount) }}</span></div>
                    <div class="mp-cell"><span :class="deltaClass(row.yrUpdDelta)">@{{ formatDelta(row.yrUpdDelta) }}</span></div>
                    <div class="mp-cell"><span :class="{ muted: !row.yrCnlCount }">@{{ row.yrCnlCount || '-' }}</span></div>
                </div>

                {{-- Tổng row --}}
                <div class="mp-row tab-std mp-row-total" role="row">
                    <div class="mp-cell col-date">合計</div>
                    <div class="mp-cell">@{{ formatMrr(stdTotal.mrrTotal) }}</div>
                    <div class="mp-cell">@{{ formatCount(stdTotal.totalCount) }}</div>
                    <div class="mp-cell">¥@{{ formatNumber(stdTotal.dailyAvg) }}</div>
                    <div class="mp-cell">-</div>

                    <div class="mp-cell">@{{ formatCount(stdTotal.monNewCount) }}</div>
                    <div class="mp-cell">¥@{{ formatNumber(stdTotal.monNewAmount) }}</div>
                    <div class="mp-cell">-</div>
                    <div class="mp-cell">@{{ formatCount(stdTotal.monUpdCount) }}</div>
                    <div class="mp-cell">¥@{{ formatNumber(stdTotal.monUpdAmount) }}</div>
                    <div class="mp-cell">-</div>
                    <div class="mp-cell">@{{ formatCount(stdTotal.monCnlCount) }}</div>

                    <div class="mp-cell">@{{ formatCount(stdTotal.yrNewCount) }}</div>
                    <div class="mp-cell">¥@{{ formatNumber(stdTotal.yrNewAmount) }}</div>
                    <div class="mp-cell">-</div>
                    <div class="mp-cell">@{{ formatCount(stdTotal.yrUpdCount) }}</div>
                    <div class="mp-cell">¥@{{ formatNumber(stdTotal.yrUpdAmount) }}</div>
                    <div class="mp-cell">-</div>
                    <div class="mp-cell">@{{ formatCount(stdTotal.yrCnlCount) }}</div>
                </div>
            </template>

            {{-- ============================================================ --}}
            {{-- TAB: プロ (pro) — 27 cols, 3 header rows + summary             --}}
            {{-- ============================================================ --}}
            <template v-else-if="activeTab === 'pro'">
                <div class="mp-top-pro" role="rowgroup">
                    <div class="mp-cell hd-date" role="columnheader">日付</div>

                    {{-- プロ全体 group title (rows 1-2, cols 2-5) --}}
                    <div class="mp-cell hd-pro-total grp-total" role="columnheader">
                        <span class="plan plan-pro"><span class="circle"></span>プロ全体</span>
                    </div>

                    {{-- MRR累積 — merged across header-row-3 + summary-row (rows 3-4) --}}
                    <div class="mp-cell mrr-merged" role="columnheader">MRR累積</div>
                    {{-- 3 leaves under プロ全体 (row 3) --}}
                    <div class="mp-cell hd-pro-leaf grp-total" role="columnheader">決済件数</div>
                    <div class="mp-cell hd-pro-leaf grp-total" role="columnheader">日次売上</div>
                    <div class="mp-cell hd-pro-leaf grp-total" role="columnheader">30日平均比</div>

                    {{-- 月払い group + 5 sub-groups + leaves --}}
                    <div class="mp-cell hd-monthly-grp grp-monthly" role="columnheader">月払い</div>
                    <div class="mp-cell hd-mon-new grp-new" role="columnheader">新規</div>
                    <div class="mp-cell hd-mon-upd grp-update" role="columnheader">更新</div>
                    <div class="mp-cell hd-mon-upg grp-upgrade" role="columnheader">Ｓ→Ｐアップグレード 日割り</div>
                    <div class="mp-cell hd-mon-mxf grp-mxfriend" role="columnheader">従量課金</div>
                    <div class="mp-cell hd-mon-cnl grp-cancel" role="columnheader">解約</div>
                    <div class="mp-cell hd-leaf grp-new">決済件数</div>
                    <div class="mp-cell hd-leaf grp-new">決済額</div>
                    <div class="mp-cell hd-leaf grp-new">30日平均比</div>
                    <div class="mp-cell hd-leaf grp-update">決済件数</div>
                    <div class="mp-cell hd-leaf grp-update">決済額</div>
                    <div class="mp-cell hd-leaf grp-update">30日平均比</div>
                    <div class="mp-cell hd-leaf grp-upgrade">決済件数</div>
                    <div class="mp-cell hd-leaf grp-upgrade">決済額</div>
                    <div class="mp-cell hd-leaf grp-mxfriend">決済件数</div>
                    <div class="mp-cell hd-leaf grp-mxfriend">決済額</div>
                    <div class="mp-cell hd-leaf grp-cancel">件数</div>

                    {{-- 年間一括払い group + 5 sub-groups + leaves --}}
                    <div class="mp-cell hd-yearly-grp grp-yearly" role="columnheader">年間一括払い</div>
                    <div class="mp-cell hd-yr-new grp-new" role="columnheader">新規</div>
                    <div class="mp-cell hd-yr-upd grp-update" role="columnheader">更新</div>
                    <div class="mp-cell hd-yr-upg grp-upgrade" role="columnheader">Ｓ→Ｐアップグレード 日割り</div>
                    <div class="mp-cell hd-yr-mxf grp-mxfriend" role="columnheader">従量課金</div>
                    <div class="mp-cell hd-yr-cnl grp-cancel" role="columnheader">解約</div>
                    <div class="mp-cell hd-leaf grp-new">決済件数</div>
                    <div class="mp-cell hd-leaf grp-new">決済額</div>
                    <div class="mp-cell hd-leaf grp-new">30日平均比</div>
                    <div class="mp-cell hd-leaf grp-update">決済件数</div>
                    <div class="mp-cell hd-leaf grp-update">決済額</div>
                    <div class="mp-cell hd-leaf grp-update">30日平均比</div>
                    <div class="mp-cell hd-leaf grp-upgrade">決済件数</div>
                    <div class="mp-cell hd-leaf grp-upgrade">決済額</div>
                    <div class="mp-cell hd-leaf grp-mxfriend">決済件数</div>
                    <div class="mp-cell hd-leaf grp-mxfriend">決済額</div>
                    <div class="mp-cell hd-leaf grp-cancel">件数</div>

                    {{-- Row 4: 平均 summary (col 2 = mrr-merged) --}}
                    <div class="mp-cell sum-date">平均</div>
                    <div class="mp-cell sum-cell">@{{ formatCount(proSummary.totalCount) }}</div>
                    <div class="mp-cell sum-cell">¥@{{ formatNumber(proSummary.dailyAvg) }}</div>
                    <div class="mp-cell sum-cell"><span :class="deltaClass(proSummary.delta30)">@{{ formatDelta(proSummary.delta30) }}</span></div>

                    <div class="mp-cell sum-cell">@{{ formatCount(proSummary.monNewCount) }}</div>
                    <div class="mp-cell sum-cell">¥@{{ formatNumber(proSummary.monNewAmount) }}</div>
                    <div class="mp-cell sum-cell"><span :class="deltaClass(proSummary.monNewDelta)">@{{ formatDelta(proSummary.monNewDelta) }}</span></div>
                    <div class="mp-cell sum-cell">@{{ formatCount(proSummary.monUpdCount) }}</div>
                    <div class="mp-cell sum-cell">¥@{{ formatNumber(proSummary.monUpdAmount) }}</div>
                    <div class="mp-cell sum-cell"><span :class="deltaClass(proSummary.monUpdDelta)">@{{ formatDelta(proSummary.monUpdDelta) }}</span></div>
                    <div class="mp-cell sum-cell">@{{ formatCount(proSummary.monUpgCount) }}</div>
                    <div class="mp-cell sum-cell">¥@{{ formatNumber(proSummary.monUpgAmount) }}</div>
                    <div class="mp-cell sum-cell">@{{ formatCount(proSummary.monMxfCount) }}</div>
                    <div class="mp-cell sum-cell">¥@{{ formatNumber(proSummary.monMxfAmount) }}</div>
                    <div class="mp-cell sum-cell">@{{ formatCount(proSummary.monCnlCount) }}</div>

                    <div class="mp-cell sum-cell">@{{ formatCount(proSummary.yrNewCount) }}</div>
                    <div class="mp-cell sum-cell">¥@{{ formatNumber(proSummary.yrNewAmount) }}</div>
                    <div class="mp-cell sum-cell"><span :class="deltaClass(proSummary.yrNewDelta)">@{{ formatDelta(proSummary.yrNewDelta) }}</span></div>
                    <div class="mp-cell sum-cell">@{{ formatCount(proSummary.yrUpdCount) }}</div>
                    <div class="mp-cell sum-cell">¥@{{ formatNumber(proSummary.yrUpdAmount) }}</div>
                    <div class="mp-cell sum-cell"><span :class="deltaClass(proSummary.yrUpdDelta)">@{{ formatDelta(proSummary.yrUpdDelta) }}</span></div>
                    <div class="mp-cell sum-cell">@{{ formatCount(proSummary.yrUpgCount) }}</div>
                    <div class="mp-cell sum-cell">¥@{{ formatNumber(proSummary.yrUpgAmount) }}</div>
                    <div class="mp-cell sum-cell">@{{ formatCount(proSummary.yrMxfCount) }}</div>
                    <div class="mp-cell sum-cell">¥@{{ formatNumber(proSummary.yrMxfAmount) }}</div>
                    <div class="mp-cell sum-cell">@{{ formatCount(proSummary.yrCnlCount) }}</div>
                </div>

                {{-- Data rows --}}
                <div class="mp-row tab-pro mp-row-data" role="row" v-for="row in proRows" :key="row.date">
                    <div class="mp-cell col-date">@{{ row.date }}</div>
                    <div class="mp-cell">@{{ formatMrr(row.mrrTotal) }}</div>
                    <div class="mp-cell"><span :class="{ muted: !row.totalCount }">@{{ row.totalCount || '-' }}</span></div>
                    <div class="mp-cell">@{{ formatAmount(row.dailyAmount) }}</div>
                    <div class="mp-cell"><span :class="deltaClass(row.delta30)">@{{ formatDelta(row.delta30) }}</span></div>

                    <div class="mp-cell"><span :class="{ muted: !row.monNewCount }">@{{ row.monNewCount || '-' }}</span></div>
                    <div class="mp-cell"><span :class="{ muted: !row.monNewAmount }">@{{ formatAmount(row.monNewAmount) }}</span></div>
                    <div class="mp-cell"><span :class="deltaClass(row.monNewDelta)">@{{ formatDelta(row.monNewDelta) }}</span></div>
                    <div class="mp-cell"><span :class="{ muted: !row.monUpdCount }">@{{ row.monUpdCount || '-' }}</span></div>
                    <div class="mp-cell"><span :class="{ muted: !row.monUpdAmount }">@{{ formatAmount(row.monUpdAmount) }}</span></div>
                    <div class="mp-cell"><span :class="deltaClass(row.monUpdDelta)">@{{ formatDelta(row.monUpdDelta) }}</span></div>
                    <div class="mp-cell"><span :class="{ muted: !row.monUpgCount }">@{{ row.monUpgCount || '-' }}</span></div>
                    <div class="mp-cell"><span :class="{ muted: !row.monUpgAmount }">@{{ formatAmount(row.monUpgAmount) }}</span></div>
                    <div class="mp-cell"><span :class="{ muted: !row.monMxfCount }">@{{ row.monMxfCount || '-' }}</span></div>
                    <div class="mp-cell"><span :class="{ muted: !row.monMxfAmount }">@{{ formatAmount(row.monMxfAmount) }}</span></div>
                    <div class="mp-cell"><span :class="{ muted: !row.monCnlCount }">@{{ row.monCnlCount || '-' }}</span></div>

                    <div class="mp-cell"><span :class="{ muted: !row.yrNewCount }">@{{ row.yrNewCount || '-' }}</span></div>
                    <div class="mp-cell"><span :class="{ muted: !row.yrNewAmount }">@{{ formatAmount(row.yrNewAmount) }}</span></div>
                    <div class="mp-cell"><span :class="deltaClass(row.yrNewDelta)">@{{ formatDelta(row.yrNewDelta) }}</span></div>
                    <div class="mp-cell"><span :class="{ muted: !row.yrUpdCount }">@{{ row.yrUpdCount || '-' }}</span></div>
                    <div class="mp-cell"><span :class="{ muted: !row.yrUpdAmount }">@{{ formatAmount(row.yrUpdAmount) }}</span></div>
                    <div class="mp-cell"><span :class="deltaClass(row.yrUpdDelta)">@{{ formatDelta(row.yrUpdDelta) }}</span></div>
                    <div class="mp-cell"><span :class="{ muted: !row.yrUpgCount }">@{{ row.yrUpgCount || '-' }}</span></div>
                    <div class="mp-cell"><span :class="{ muted: !row.yrUpgAmount }">@{{ formatAmount(row.yrUpgAmount) }}</span></div>
                    <div class="mp-cell"><span :class="{ muted: !row.yrMxfCount }">@{{ row.yrMxfCount || '-' }}</span></div>
                    <div class="mp-cell"><span :class="{ muted: !row.yrMxfAmount }">@{{ formatAmount(row.yrMxfAmount) }}</span></div>
                    <div class="mp-cell"><span :class="{ muted: !row.yrCnlCount }">@{{ row.yrCnlCount || '-' }}</span></div>
                </div>

                {{-- Tổng row --}}
                <div class="mp-row tab-pro mp-row-total" role="row">
                    <div class="mp-cell col-date">合計</div>
                    <div class="mp-cell">@{{ formatMrr(proTotal.mrrTotal) }}</div>
                    <div class="mp-cell">@{{ formatCount(proTotal.totalCount) }}</div>
                    <div class="mp-cell">¥@{{ formatNumber(proTotal.dailyAvg) }}</div>
                    <div class="mp-cell">-</div>

                    <div class="mp-cell">@{{ formatCount(proTotal.monNewCount) }}</div>
                    <div class="mp-cell">¥@{{ formatNumber(proTotal.monNewAmount) }}</div>
                    <div class="mp-cell">-</div>
                    <div class="mp-cell">@{{ formatCount(proTotal.monUpdCount) }}</div>
                    <div class="mp-cell">¥@{{ formatNumber(proTotal.monUpdAmount) }}</div>
                    <div class="mp-cell">-</div>
                    <div class="mp-cell">@{{ formatCount(proTotal.monUpgCount) }}</div>
                    <div class="mp-cell">¥@{{ formatNumber(proTotal.monUpgAmount) }}</div>
                    <div class="mp-cell">@{{ formatCount(proTotal.monMxfCount) }}</div>
                    <div class="mp-cell">¥@{{ formatNumber(proTotal.monMxfAmount) }}</div>
                    <div class="mp-cell">@{{ formatCount(proTotal.monCnlCount) }}</div>

                    <div class="mp-cell">@{{ formatCount(proTotal.yrNewCount) }}</div>
                    <div class="mp-cell">¥@{{ formatNumber(proTotal.yrNewAmount) }}</div>
                    <div class="mp-cell">-</div>
                    <div class="mp-cell">@{{ formatCount(proTotal.yrUpdCount) }}</div>
                    <div class="mp-cell">¥@{{ formatNumber(proTotal.yrUpdAmount) }}</div>
                    <div class="mp-cell">-</div>
                    <div class="mp-cell">@{{ formatCount(proTotal.yrUpgCount) }}</div>
                    <div class="mp-cell">¥@{{ formatNumber(proTotal.yrUpgAmount) }}</div>
                    <div class="mp-cell">@{{ formatCount(proTotal.yrMxfCount) }}</div>
                    <div class="mp-cell">¥@{{ formatNumber(proTotal.yrMxfAmount) }}</div>
                    <div class="mp-cell">@{{ formatCount(proTotal.yrCnlCount) }}</div>
                </div>
            </template>
            </div>
        </div>
    </div>
</div>
@endsection

@push('script')
    <script src="/js/moment.min.js"></script>
    <script src="/lme-ui/vendor/vue.js"></script>

    <script src="/lme-ui/src/js/icon/lme-icon.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/segmented/lme-segmented.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/button/lme-button.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/button/lme-button-flat.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/date-picker/lme-date-picker.js?v={{config('sns-line.version')}}"></script>

    <script>
        window.MP_API = {
            summary: '{{ route('ajaxManagementMonthlyPayment') }}',
        };
    </script>
    <script src="/js/admin/management_monthly_payment.js?v={{config('sns-line.version')}}"></script>
@endpush