@extends('layout.v2.basic.main')
@section('title','友だち情報詳細')

@push('css')
    <link rel="stylesheet" href="/css/basic/friend-list.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/tab/tab.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/avatar/avatar.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/tag/tag.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/tag/status.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/table/table.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/input/input.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/modal/modal.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/checkbox/checkbox.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/radio/radio.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/pagination/pagination.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/tooltip/tooltip.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/popover/popover.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/date-picker/date-picker.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/drawer/drawer.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/dropdown/dropdown.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-backup/lme-alert/lme-alert.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/alert/alert.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/_assets/commons/css/components/pagination.css?v={{config('sns-line.version')}}" type="text/css">
    <link rel="stylesheet" href="/lme-ui/src/css/input/select.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/input/input-number.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/empty-view/empty-view.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/lme-ui/src/css/upload/upload.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/_assets/modules/my_page/css/parts/tag.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/_assets/modules/my_page/css/parts/product.css?v={{config('sns-line.version')}}">
    <link rel="stylesheet" href="/_assets/modules/my_page/css/parts/action-capture-preview.css?v={{config('sns-line.version')}}">
    <style>
        .fd-page {
            /*min-height: calc(100vh - 60px);*/
            max-width: 900px;
        }
        .fd-header {
            padding: 16px 16px 0;
        }
        .fd-header-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }
        .fd-header-title {
            font-size: 24px;
            font-weight: 500;
            color: #1F1F1F;
            margin: 0;
        }
        .fd-popover-fit .lme-popover-container {
            width: max-content;
        }
        .fd-user-row {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 16px;
        }
        .fd-user-row > *:first-child {
            flex-shrink: 0;
        }
        .fd-user-meta {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .fd-user-meta-row {
            display: flex;
            align-items: baseline;
            gap: 12px;
        }
        .fd-user-meta-label {
            font-size: 12px;
            font-weight: 400;
            color: #1F1F1F;
            min-width: 80px;
            white-space: nowrap;
        }
        .fd-user-meta-value {
            font-size: 16px;
            font-weight: 500;
            color: #1F1F1F;
        }
        .fd-body {
            padding: 16px;
        }

        /* Content card */
        .fd-card {
            background: #FFFFFF;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            padding: 24px;
        }
        .fd-card-title {
            font-size: 20px;
            font-weight: 500;
            color: #222222;
            margin: 0;
        }
        .fd-card-section {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }
        .fd-card-section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #F7F7F7;
            border-radius: 8px;
            padding: 12px 16px;
            height: 40px;
            box-sizing: border-box;
        }
        .fd-card-section-title {
            font-size: 16px;
            font-weight: 600;
            color: #1F1F1F;
            line-height: 1;
            margin: 0;
        }
        .fd-card-section-link {
            font-size: 12px;
            color: #878A92;
            text-decoration: underline;
            cursor: pointer;
        }
        .fd-card-section-link:hover {
            color: #878A92;
        }
        .fd-card-section-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
        }
        .fd-card-section-value {
            font-size: 14px;
            font-weight: 400;
            color: #1F1F1F;
            line-height: 20px;
        }

        /* Card with table — header row */
        .fd-card-table-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }
        .fd-card-table-header .fd-card-title {
            font-size: 20px;
            font-weight: 500;
        }
        .fd-card-pagination {
            padding: 0 24px 16px 24px;
            display: flex;
            justify-content: flex-end;
        }
        .fd-card-table-wrap {
            margin: 0;
        }

        /* Card with card-list (配信履歴) */
        .fd-history-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .fd-history-item {
            background: #F7F7F7;
            border-radius: 6px;
            padding: 12px 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            cursor: pointer;
            transition: background 0.15s;
        }
        .fd-history-item:hover {
            background: #EDEDED;
        }
        .fd-history-name {
            display: block;
            font-size: 14px;
            font-weight: 400;
            color: #000;
            line-height: 22px;
            flex: 1 1 auto;
            min-width: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .fd-history-tags {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 0 0 auto;
            flex-wrap: nowrap;
        }
        .fd-history-tags .lme-tag {
            white-space: nowrap;
        }
        .fd-history-caret {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 16px;
            transition: transform 0.2s ease;
        }
        .fd-history-caret.is-expanded {
            /*transform: rotate(180deg);*/
        }
        .fd-history-tags .fd-tag-done .lme-tag {
            background-color: #D1D1D1;
            border-color: #D1D1D1;
        }

        /* Expanded history detail */
        .fd-history-detail {
            padding: 0 8px;
            margin-top: 8px;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .fd-history-trigger-link {
            align-self: flex-end;
            font-size: 14px;
            color: #878A92;
            text-decoration: underline;
            cursor: pointer;
        }
        .fd-history-trigger-link:hover {
            color: #878A92;
        }
        .fd-history-table {
            width: 100%;
            border-radius: 6px;
            overflow: hidden;
        }
        .fd-history-row {
            display: grid;
            grid-template-columns: 180px 100px 1fr 140px;
            align-items: center;
            border-bottom: 1px solid #E7E7E7;
            background: #FFFFFF;
        }
        .fd-history-row:last-child {
            border-bottom: none;
        }
        .fd-history-row--head {
            background: #F7F7F7;
            font-weight: 600;
        }
        .fd-history-row--head .fd-history-col {
            font-size: 14px;
            line-height: 22px;
        }
        .fd-history-row.is-highlighted {
            background: #F0F5FF;
        }
        .fd-history-col {
            padding: 14px 16px;
            font-size: 14px;
            line-height: 22px;
            color: #1F1F1F;
            display: flex;
            align-items: center;
            gap: 8px;
            min-height: 46px;
            box-sizing: border-box;
        }
        .fd-history-col:last-child {
            border-right: none;
        }
        .fd-history-col--message {
            font-size: 12px;
            line-height: 16px;
            display: block;
            padding: 14px 16px;
        }
        .fd-history-col--message .is-placeholder {
            color: #878A92;
            text-decoration: underline;
        }
        .fd-status-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .fd-history-play-btn {
            width: 32px;
            height: 32px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            padding: 0;
        }
        .fd-history-play-btn:hover {
            background: #F7F7F7;
        }
        .fd-action-label {
            font-size: 14px;
            font-weight: 500;
            color: #1F1F1F;
            padding: 0 4px;
        }
        .fd-action-label.is-primary {
            color: #1677FF;
        }
        .fd-action-preview-link {
            color: #1677FF;
            font-size: 13px;
            cursor: pointer;
            text-decoration: underline;
        }
        .fd-action-preview-link:hover {
            opacity: 0.8;
        }
        .fd-history-more {
            display: flex;
            justify-content: center;
            padding: 4px 0 8px;
        }

        /* Tag tab — 現在ついているタグ (Figma 2063:17111) */
        .has_action {
            color: #1677FF;
            font-size: 14px;
            font-weight: 400;
            cursor: pointer;
        }
        .has_action:hover {
            opacity: 0.8;
        }
        .lme-table thead th {
            background: #F7F7F7 !important;
        }

        /* Richmenu filter modal */
        .fd-rm-filter {
            display: flex;
            flex-direction: column;
            gap: 30px;
            background: #fff;
            border-radius: 8px;
        }
        .fd-rm-filter-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .fd-rm-filter-title {
            font-size: 20px;
            font-weight: 700;
            color: #1F1F1F;
            line-height: 28px;
            margin: 0;
        }
        .fd-rm-filter-body {
            display: flex;
            flex-direction: column;
            gap: 20px;
            padding: 0 16px;
        }
        .fd-rm-filter-section {
            display: flex;
            flex-direction: column;
            gap: 15px;
            width: 100%;
        }
        .fd-rm-filter-section-title {
            font-size: 16px;
            font-weight: 700;
            color: #1F1F1F;
            line-height: 24px;
        }
        .fd-rm-filter-picker {
            display: flex;
            gap: 30px;
            align-items: stretch;
            max-height: calc(100vh - 290px);
            min-height: 0;
            overflow: hidden;
        }
        .fd-rm-filter-picker-left {
            display: flex;
            flex-direction: column;
            gap: 15px;
            width: 300px;
            flex-shrink: 0;
            min-height: 0;
            overflow-y: auto;
        }
        .fd-rm-filter-picker-right {
            display: flex;
            flex-direction: column;
            gap: 15px;
            width: 312px;
            flex-shrink: 0;
            min-height: 0;
            overflow-y: auto;
        }

        .fd-rm-filter-picker-left::-webkit-scrollbar, .fd-rm-filter-picker-right::-webkit-scrollbar {
            width: 3px;
        }

        .fd-rm-filter-picker-left::-webkit-scrollbar-track, .fd-rm-filter-picker-right::-webkit-scrollbar-track {
            border-radius: 10px;
        }
        .fd-rm-filter-picker-left::-webkit-scrollbar-thumb, .fd-rm-filter-picker-right::-webkit-scrollbar-thumb {
            background: #DDDDDD;
            border-radius: 10px;
        }

        .fd-rm-filter-folder-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: 100%;
        }
        .fd-rm-filter-folder {
            height: 36px;
            padding: 8px 11px;
            display: flex;
            align-items: center;
            background: #fff;
            border: 1px solid #E7E7E7;
            border-radius: 6px;
            font-size: 14px;
            color: #1F1F1F;
            cursor: pointer;
            line-height: 22px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .fd-rm-filter-folder:hover { background: #FAFAFA; }
        .fd-rm-filter-folder.is-selected {
            background: #E6F4FF;
            border-color: #4196FF;
        }
        .fd-rm-filter-item-box {
            background: #F7F7F7;
            border-radius: 4px;
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .fd-rm-filter-item {
            height: 36px;
            padding: 8px 11px;
            background: #fff;
            border: 1px solid #E7E7E7;
            border-radius: 6px;
            display: flex;
            align-items: center;
            overflow: hidden;
        }
        .fd-rm-filter-item .lme-custom-checkbox {
            width: 100%;
            min-width: 0;
        }
        .fd-rm-filter-item .lme-checkbox-box {
            flex: 0 0 auto;
        }
        .fd-rm-filter-item .lme-checkbox-label {
            flex: 1 1 auto;
            min-width: 0;
            margin-right: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .fd-rm-filter-chips-card {
            background: #F7F7F7;
            border-radius: 4px;
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .fd-rm-filter-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .fd-rm-filter-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        .fd-rm-filter-count {
            font-size: 14px;
            font-weight: 400;
            color: #878A92;
            line-height: 22px;
        }
        .fd-rm-filter-actions {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        /* Trigger modal */
        .fd-trigger-modal-wrap .lme-modal-title {
            flex: 1;
            text-align: center;
        }
        .fd-trigger-modal-wrap .lme-modal-wrap {
            background: #FAFAFA 0% 0% no-repeat padding-box;
        }
        .content-action-md {
            background: #FFFFFF 0% 0% no-repeat padding-box;
            border: 1px solid #DDDDDD;
            padding: 27px 25px;
            margin: 10px 50px;
        }
        .fd-trigger-label {
            font-size: 12px;
            color: #888888;
            font-weight: 600;
            margin-bottom: 7px;
        }
        .fd-trigger-value {
            font-size: 14px;
            color: #222222;
            font-weight: 300;
        }
        .fd-trigger-divider {
            border: 0;
            border-top: 1px dashed #888888;
            margin: 10px 0 15px;
        }
        .fd-trigger-close-wrap {
            text-align: center;
        }
        .fd-trigger-close-btn {
            width: 150px;
            height: 40px;
            margin: 10px 0;
            font-size: 16px;
            font-weight: 300;
            color: #222222;
            background: #FFFFFF;
            border: 1px solid #888888;
            border-radius: 3px;
            cursor: pointer;
        }
        .fd-trigger-close-btn:hover {
            background: #F5F5F5;
        }
        .fd-trigger-footer {
            display: flex;
            justify-content: end;
            padding-top: 8px;
        }
        .fd-tag-clickable {
            cursor: pointer;
        }

        /* Manual change modal */
        .fd-manual-modal {
            display: flex;
            flex-direction: column;
            gap: 32px;
        }
        .fd-manual-description {
            font-size: 14px;
            line-height: 22px;
            color: #1F1F1F;
            margin: 0;
        }
        .fd-manual-form {
            display: flex;
            flex-direction: column;
            gap: 24px;
            padding: 0 16px;
        }
        .fd-manual-field {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .fd-manual-field.is-disabled {
            opacity: 0.3;
            pointer-events: none;
        }
        .fd-manual-label {
            font-size: 14px;
            font-weight: 400;
            color: #1F1F1F;
            margin: 0;
        }
        .fd-manual-suffix {
            font-size: 14px;
            color: #1F1F1F;
        }
        .fd-manual-footer {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }
        input.lme-number-input {
            height: 100%;
        }

        /* Force stop confirmation modal */
        .fd-force-stop-modal {
            display: flex;
            flex-direction: column;
            gap: 16px;
            padding: 4px;
        }
        .fd-force-stop-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            width: 100%;
        }
        .fd-force-stop-title-wrap {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1;
            min-width: 0;
        }
        .fd-force-stop-title {
            font-size: 16px;
            font-weight: 700;
            line-height: 24px;
            color: #1F1F1F;
        }
        .fd-force-stop-message {
            font-size: 14px;
            font-weight: 400;
            line-height: 22px;
            color: #1F1F1F;
            margin: 0;
        }
        .fd-force-stop-footer {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }
        input[type=radio]:focus {
            outline: none;
        }

        /* Manual stop history modal */
        .fd-manual-stop-modal {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .fd-manual-stop-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            width: 100%;
        }
        .fd-manual-stop-title-wrap {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
            min-width: 0;
        }
        .fd-manual-stop-title {
            font-size: 18px;
            font-weight: 700;
            line-height: 26px;
            color: #1F1F1F;
            white-space: nowrap;
        }
        .fd-manual-stop-body {
            width: 100%;
        }
        .fd-manual-stop-footer {
            display: flex;
            justify-content: flex-end;
        }

        /* Event booking tab — 操作履歴 modal table */
        .fd-event-history-table {
            border-radius: 6px;
            overflow: hidden;
        }
        .fd-event-history-row {
            display: flex;
            align-items: stretch;
            background: #FFFFFF;
            min-height: 46px;
        }
        .fd-event-history-row:last-child {
            border-bottom: none;
        }
        .fd-event-history-row--head {
            background: #F7F7F7;
            font-weight: 600;
        }
        .fd-event-history-col {
            padding: 12px 16px;
            font-size: 14px;
            line-height: 22px;
            color: #1F1F1F;
            display: flex;
            align-items: center;
            flex-shrink: 0;
            box-sizing: border-box;
        }
        .fd-event-history-col--last {
            flex: 1;
            border-right: none;
        }
        .fd-event-history-empty {
            padding: 32px 16px;
            text-align: center;
            font-size: 14px;
            color: #878A92;
        }
        #friendDetailApp .lme-drawer-title {
            width: 100%;
            margin-right: -24px;
            text-align: center;
        }

        .lme-checkbox-box {
            flex-shrink: 0;
        }
    </style>
    <link rel="stylesheet" href="/css/basic/friend_detail/salon.css?v={{config('sns-line.version')}}">
@endpush

@section('content')
    <div class="fd-page" id="friendDetailApp" v-cloak>
        <div class="fd-header">
            {{-- Title row --}}
            <div class="fd-header-top">
                <div class="lme-flex lme-items-center" style="gap: 8px;">
                    <h1 class="fd-header-title">友だち詳細</h1>
                    <lme-popover type_popover="bc" content="URLコピー" trigger="hover" class="fd-popover-fit">
                        <lme-button-ghost size="md" :icon="true" :rounded="true" type="secondary" color="blue" @click="copyCurrentUrl">
                            <lme-icon file-name="share-outlined" size="18"></lme-icon>
                        </lme-button-ghost>
                    </lme-popover>

                    <lme-popover type_popover="bc" content="エルメユーザーIDをコピー" trigger="hover" class="fd-popover-fit">
                        <lme-button-ghost size="md" :icon="true" :rounded="true" type="secondary" color="blue"
                                          @click="copyLineId">
                            <lme-icon file-name="file-copy-outlined" size="18"></lme-icon>
                        </lme-button-ghost>
                    </lme-popover>
                </div>
                <div class="lme-flex lme-items-center" style="gap: 8px;">
                    <lme-button-default type="primary" size="lg" @click="linkToChat()">
                        <lme-icon file-name="comment-outlined" size="16"></lme-icon>
                        <span>チャット</span>
                    </lme-button-default>
                    <template v-if="isBlocked">
                        <lme-button-risk type="primary" size="lg" @click="unblockMe()">
                            <lme-icon file-name="stop1" size="16"></lme-icon>
                            <span>ブロック解除</span>
                        </lme-button-risk>
                    </template>
                    <template v-else>
                        <lme-button-risk type="primary" size="lg" @click="blockMe()">
                            <lme-icon file-name="stop1" size="16"></lme-icon>
                            <span>ブロック</span>
                        </lme-button-risk>
                    </template>
                    <lme-button-risk type="secondary" size="lg" @click="deleteLineUser()">
                        <lme-icon file-name="delete-outlined" size="16"></lme-icon>
                        <span>削除</span>
                    </lme-button-risk>
                </div>
            </div>

            {{-- User info --}}
            <div class="fd-user-row">
                <lme-avatar size="large" type="image" src="{{ isset($line_info['avatar_url']) ? $line_info['avatar_url'] : '/images/8.png' }}"></lme-avatar>
                <div class="fd-user-meta">
                    <div class="fd-user-meta-row">
                        <span class="fd-user-meta-label">LINE名</span>
                        <span class="fd-user-meta-value">{{$line_info['name_display'] ?? ''}}</span>
                    </div>
                    <div class="fd-user-meta-row">
                        <span class="fd-user-meta-label">システム表示名</span>
                        <span class="fd-user-meta-value">@{{ botInfo.view_name || '-' }}</span>
                    </div>
                </div>
            </div>

            {{-- Tabs --}}
            <lme-tab-horizontal
                v-model="activeTabId"
                :tabs="tabs"
                size="md"
                @select="onTabSelect"
                @select-option="onTabOptionSelect"
            ></lme-tab-horizontal>
        </div>

        <div class="fd-body">
            {{-- 基本情報 group --}}
            @include('basic.friend_detail.tabs.basic_info')
            @include('basic.friend_detail.tabs.friend_info')
            @include('basic.friend_detail.tabs.memo')

            {{-- 配信 group --}}
            @include('basic.friend_detail.tabs.step')
            @include('basic.friend_detail.tabs.remind')

            {{-- タグ --}}
            @include('basic.friend_detail.tabs.tag')

            {{-- 予約管理 group --}}
            @include('basic.friend_detail.tabs.salon')
            @include('basic.friend_detail.tabs.lesson')
            @include('basic.friend_detail.tabs.event')

            {{-- 商品販売 group --}}
            @include('basic.friend_detail.tabs.single')
            @include('basic.friend_detail.tabs.subscription')

            {{-- フォーム回答 --}}
            @include('basic.friend_detail.tabs.form')

            {{-- アクション履歴 group --}}
            @include('basic.friend_detail.tabs.qr')
            @include('basic.friend_detail.tabs.richmenu')
        </div>

        {{-- ステッププレビュー drawer --}}
        <lme-drawer v-model="showStepPreviewModal" width="480px" title="プレビュー">
            <div class="lme-drawer-content">
                <lme-tab-horizontal
                    v-model="stepPreviewTabId"
                    :tabs="stepPreviewTabs"
                    size="md"
                ></lme-tab-horizontal>

                <div v-if="stepPreviewTabId === 'message'"
                     style="background: #7B9DC3; border-radius: 8px; min-height: 420px; margin-top: 16px; padding: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start;">
                    <div v-if="stepPreviewMessage"
                         style="background: #FFFFFF; border-radius: 8px; padding: 8px 12px; font-size: 14px; color: #1F1F1F; max-width: 80%; line-height: 20px; word-break: break-all;">
                        @{{ stepPreviewMessage }}
                    </div>
                    <div v-else
                         style="background: #FFFFFF; border-radius: 8px; padding: 8px 12px; font-size: 14px; color: #9A9EAD; max-width: 80%; line-height: 20px;">
                        メッセージなし
                    </div>
                </div>

                <div v-if="stepPreviewTabId === 'action'"
                     style="background: #F7F7F7; border-radius: 8px; min-height: 420px; margin-top: 16px; display: flex; align-items: center; justify-content: center;">
                    <span style="color: #878A92; font-size: 14px;">アクションプレビュー</span>
                </div>

                <div style="margin-top: 16px; display: flex; justify-content: center;">
                    <lme-button-flat size="md" @click="showStepPreviewModal = false">閉じる</lme-button-flat>
                </div>
            </div>
        </lme-drawer>

{{-- ブロック確認 modal --}}
        <lme-modal v-model="showBlockModal" :header="false" :width="480">
            <div class="lme-flex lme-flex-col" style="font-size: 14px;font-weight: 400;color: #1F1F1F;gap: 16px;padding-inline: 8px">
                <div class="lme-flex lme-items-center lme-justify-between">
                    <div class="lme-flex lme-items-center" style="gap: 8px">
                        <lme-icon file_name="warn2" size="24"></lme-icon>
                        <span style="font-size: 16px;font-weight: 700;color: #1F1F1F">ブロックしてよろしいですか？</span>
                    </div>
                    <div class="lme-modal-close" @click="showBlockModal = false">
                        <lme-icon file_name="closeX"></lme-icon>
                    </div>
                </div>
                <div style="line-height: 22px;white-space: pre-wrap">・友だちからのメッセージがエルメ上に届かなくなります
・エルメからメッセージ配信が友だちに届かなくなります
・エルメ各種ページ（回答フォームや予約ページなど）を開くことができなくなります
・友だちリスト > ブロックした友だち からブロックを解除することで元の状態に戻すことができます

※エルメ側で友だちをブロックしてもLINE OFFICIAL ACCOUNT MANAGER側の表示状態は変わりません</div>
                <div class="lme-flex lme-justify-end" style="gap: 8px">
                    <lme-button-flat @click.native="showBlockModal = false" style="padding-inline: 16px !important;">キャンセル</lme-button-flat>
                    <lme-button-risk @click.native="confirmBlock" style="padding-inline: 16px !important;">ブロックする</lme-button-risk>
                </div>
            </div>
        </lme-modal>
        {{-- 削除確認 modal --}}
        <lme-modal v-model="showDeleteModal" :header="false" :width="480">
            <div class="lme-flex lme-flex-col" style="font-size: 14px;font-weight: 400;color: #1F1F1F;gap: 16px;padding-inline: 8px">
                <div class="lme-flex lme-items-center lme-justify-between">
                    <div class="lme-flex lme-items-center" style="gap: 8px">
                        <lme-icon file_name="warn2" size="24"></lme-icon>
                        <span style="font-size: 16px;font-weight: 700;color: #1F1F1F">友だちを削除してよろしいですか？</span>
                    </div>
                    <div class="lme-modal-close" @click="showDeleteModal = false">
                        <lme-icon file_name="closeX"></lme-icon>
                    </div>
                </div>
                <div style="line-height: 22px;white-space: pre-wrap">・友だちの削除は主にあいさつメッセージのテストなどに利用する機能です
・エルメ上から友だちが削除され、友だちに紐づく情報も削除されます
・LINE OFFICIAL ACCOUNT MANAGER上のデータはそのままの状態で残ります

※友だち側からLINE公式アカウントにメッセージを送るなどを行うと再度、友だちがエルメ上に表示されます</div>
                <div class="lme-flex lme-justify-end" style="gap: 8px">
                    <lme-button-flat @click.native="showDeleteModal = false" style="padding-inline: 16px !important;">キャンセル</lme-button-flat>
                    <lme-button-risk @click.native="confirmDeleteLineUser" style="padding-inline: 16px !important;">削除する</lme-button-risk>
                </div>
            </div>
        </lme-modal>

        @include('basic.friend_detail.partials.action-capture-preview-drawer')
    </div>
@endsection

@push('js')
    <script src="/js/axios.min.js"></script>

    <script src="/js/my_page/Sortable.min.js"></script>
    <script src="/js/my_page/vuedraggable.min.js"></script>
    <script src="/lme-ui/src/js/icon/lme-icon.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-default.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/button/lme-button-ghost.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/button/lme-button-risk.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/tab/lme-tab-horizontal.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/avatar/lme-avatar.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/tag/lme-tag.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/tag/lme-status.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/table/lme-table.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/input/lme-input.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/input/lme-textarea.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/modal/lme-modal.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/checkbox/lme-checkbox.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/pagination/lme-pagination.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 src="/lme-ui/src/js/date-picker/lme-range-picker.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/drawer/lme-drawer.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/tooltip/lme-tooltip.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/popover/popover.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/dropdown/dropdown.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-backup/lme-alert/lme-alert.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/alert/lme-alert.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/radio/lme-radio.js?v={{config('sns-line.version')}}"></script>
    <script src="/_assets/commons/js/lme.js?v={{config('sns-line.version')}}"></script>
    <script>Vue.prototype.formatDate = window.formatDate;</script>
    <script src="/_assets/commons/js/components/pagination.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/input/lme-select.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/input/lme-input-number.js?v={{config('sns-line.version')}}"></script>
{{--    <script src="/lme-ui/src/js/toast/lme-toast.js?v={{config('sns-line.version')}}"></script>--}}

    <script src="/lme-ui/src/js/empty-view/lme-empty-view.js?v={{config('sns-line.version')}}"></script>
    <script src="/lme-ui/src/js/upload/lme-upload.js?v={{config('sns-line.version')}}"></script>

    <script src="/js/basic/friend-list/basic-info.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/basic/friend-list/friend-info.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/basic/friend-list/memo.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/basic/friend-list/form.js?v={{config('sns-line.version')}}"></script>
    <script>
        window.FRIEND_DETAIL_LINE_ID = {{ (int) $line_id }};
    </script>

    {{-- Tab mixins --}}
    <script src="/_assets/commons/js/ajax.js?v={{config('sns-line.version')}}"></script>
    <script src="/_assets/modules/my_page/mixins/action-capture-preview-mixin.js?v={{config('sns-line.version')}}"></script>
    <script src="/_assets/modules/my_page/mixins/tag-mixin.js?v={{config('sns-line.version')}}"></script>
    <script src="/_assets/modules/my_page/mixins/broadcast-history-mixin.js?v={{config('sns-line.version')}}"></script>
    <script src="/_assets/modules/my_page/mixins/broadcast-step-preview-mixin.js?v={{config('sns-line.version')}}"></script>
    <script src="/_assets/modules/my_page/mixins/richmenu-mixin.js?v={{config('sns-line.version')}}"></script>
    <script src="/_assets/modules/my_page/mixins/product-mixin.js?v={{config('sns-line.version')}}"></script>
    <script src="/_assets/modules/my_page/mixins/qr-mixin.js?v={{config('sns-line.version')}}"></script>
    <script>
        let lineUserId = {{ Request::route('line_id') }};
        let conversationId = null;
    </script>
    <script>
        new Vue({
            el: '#friendDetailApp',
            mixins: [
                window.ActionCapturePreviewMixin,
                window.TagMixin,
                window.BroadcastHistoryMixin,
                window.BroadcastStepPreviewMixin,
                window.RichmenuMixin,
                window.ProductMixin,
                window.QrMixin,
                window.formOptions,
                window.basicInfoOptions,
                window.friendInfoOptions,
                window.memoOptions,
            ],
            data: {
                lineUserId: lineUserId,
                conversationId: conversationId,
                isBlocked: {{ ($line_info['is_blocked'] == 1 && $conversation->blocked_by == 1) ? 'true' : 'false' }},
                showBlockModal: false,
                showDeleteModal: false,
                showStopScenarioAlert: false,
                pagination: {
                    data: {},
                    total: 0,
                    per_page: 20,
                    from: 1,
                    to: 0,
                    current_page: 1,
                    last_page: 1,
                },
                botInfo: {
                    view_name: @json($line_info['view_name'] ?? '')
                },
                activeTabId: 1,
                selectedOption: { tabId: 1, value: 'basic_info', name: '基本情報' },
                tabs: [
                    {
                        id: 1, label: '基本情報', type: 'dropdown',
                        options: [
                            { id: 'basic_info', name: '基本情報' },
                            { id: 'friend_info', name: '友だち情報' },
                            { id: 'memo', name: 'メモ' },
                        ]
                    },
                    {
                        id: 2, label: '配信', type: 'dropdown',
                        options: [
                            { id: 'step', name: 'ステップ配信' },
                            { id: 'remind', name: 'リマインド配信情報' },
                        ]
                    },
                    { id: 3, label: 'タグ', key: 'tag' },
                    {
                        id: 4, label: '予約管理', type: 'dropdown',
                        options: [
                            { id: 'salon', name: 'サロン/面談予約' },
                            { id: 'lesson', name: 'レッスン予約' },
                            { id: 'event', name: 'イベント予約' },
                        ]
                    },
                    {
                        id: 5, label: '商品販売', type: 'dropdown',
                        options: [
                            { id: 'single', name: '単品商品' },
                            { id: 'subscription', name: '継続商品' },
                        ]
                    },
                    { id: 6, label: 'フォーム回答', key: 'form' },
                    {
                        id: 7, label: 'アクション履歴', type: 'dropdown',
                        options: [
                            { id: 'qr', name: 'QRコードアクション' },
                            { id: 'richmenu', name: 'リッチメニュー' },
                        ]
                    },
                ],
                /* Event booking tab */
                eventVisitCount: 0,
                eventCancelCount: 0,
                eventColumns: [
                    { key: 'datetime',        title: '予約（来店）日時', width: '290px' },
                    { key: 'store_name',      title: '店舗・ビジネス名', width: '200px', sortable: true },
                    { key: 'status',          title: 'ステータス',       width: '197px', sortable: true },
                    { key: 'course',          title: 'コース',           width: '220px', sortable: true },
                    { key: 'payment_amount',  title: '支払い金額',       width: '140px', sortable: true },
                    { key: 'payment_method',  title: '決済方法',         width: '160px', sortable: true },
                    { key: 'payment_status',  title: '決済ステータス',   width: '140px', sortable: true },
                    { key: 'action',          title: 'アクション',       width: '140px', sortable: true },
                    { key: 'operations',      title: '操作',             width: '120px' },
                ],
                eventSortKey: null,
                eventSortDir: null,
                eventBookings: [],
                eventPagination: {
                    current_page: 1,
                    per_page: 10,
                    last_page: 1,
                },
                showEventDetailModal: false,
                eventDetailHistory: [],
                eventHistoryColumns: [
                    { key: 'datetime', title: '操作日時'},
                    { key: 'operator', title: '操作者'},
                    { key: 'content',  title: '内容', width: '320px' },
                ],
                /* end event booking tab */

                showStepPreviewModal: false,
                stepPreviewTabId: 'message',
                stepPreviewTabs: [
                    { id: 'message', label: 'メッセージ' },
                    { id: 'action',  label: 'アクション' },
                ],
                stepPreviewMessage: null,
                showTriggerModal: false,
                triggerModalLoading: false,
                triggerModalData: {
                    type_name: '',
                    management_name: '',
                    detail: '',
                    triggered_at: '',
                },
                showStopTriggerModal: false,
                stopTriggerModalLoading: false,
                stopTriggerModalData: {
                    stop_type_name: '',
                    stop_management_name: '',
                    stop_detail: '',
                    stop_triggered_at: '',
                },
                showManualStopHistoryModal: false,
                manualStopHistoryLoading: false,
                manualStopHistoryScenarioName: '',
                manualStopHistoryColumns: [
                    { key: 'op_at', title: '操作日時' },
                    { key: 'operator', title: '操作者' },
                ],
                manualStopHistoryRows: [],
                showManualChangeModal: false,
                showForceStopModal: false,
                manualChangeForm: {
                    step_id: '',
                    timing: 'now',
                    days: null,
                },
                stepOptions: [],
                stepOptionsLoading: false,
                stepInfo: {
                    scenario_name: null,
                    is_following: 0,
                    current_step: null,
                    next_schedule_time: null,
                    total_sent_count: null,
                    latest_sent_step: { message_id: null, action_multi_capture_id: null },
                    nextStepMessage: null,
                    templateNextStep: null,
                    scenarioRunning: null,
                },
                stepLoading: false,
                broadcastHistoryItems: [],
                broadcastHistoryDetails: {},
                broadcastHistoryMeta: {},
                broadcastHistoryPagination: { current_page: 1, per_page: 10, last_page: 1, total: 0 },
                broadcastHistoryLoading: false,
                expandedHistoryId: null,
                /* リマインド配信情報 tab */
                remindHistoryItems: [],
                remindHistoryDetails: {},
                remindHistoryMeta: {},
                remindDetailLoading: {},
                remindHistoryPagination: { current_page: 1, per_page: 10, last_page: 1, total: 0 },
                remindHistoryLoading: false,
                expandedRemindId: null,
                showRemindStopModal: false,
                remindStopLoading: false,
                remindStopTarget: null,
                /* end リマインド配信情報 tab */
                showStepMsgPreviewDrawer: false,
                stepMsgPreviewItem: {
                    id: null,
                    preview_tab_id: 'message',
                    preview_loading: false,
                    preview: { messages: [], actions: [] },
                },
                salonVisitTotal: 0,
                salonCancelTotal: 0,
                salonActiveRowId: null,
                salonLoading: false,
                salonSort: { sort_by: 'reserved_at', sort_dir: 'desc' },
                salonColumns: [
                    { key: 'reserved_at', title: '予約（来店）日時', width: '197px' },
                    { key: 'calendar_name', title: '店舗・ビジネス名', width: '197px', sortable: true },
                    { key: 'status', title: 'ステータス', width: '197px', sortable: true },
                    { key: 'course', title: 'コース', width: '220px', sortable: true },
                    { key: 'staff', title: 'スタッフ', width: '300px', sortable: true },
                    { key: 'payment_amount', title: '支払い金額', width: '138px', sortable: true },
                    { key: 'payment_method', title: '決済方法', width: '160px', sortable: true },
                    { key: 'payment_status', title: '決済ステータス', width: '166px', sortable: true },
                    { key: 'action_setting', title: 'アクション', width: '138px', sortable: true },
                    { key: 'actions', title: '操作', width: '238px' },
                ],
                salonRows: [],
                salonPagination: {
                    current_page: 1,
                    per_page: 10,
                    last_page: 1,
                },
                salonShowOpHistoryModal: false,
                salonShowBroadcastModal: false,
                salonOpHistoryLoading: false,
                salonOpHistoryColumns: [
                    { key: 'op_at', title: '操作日時', width: '197px' },
                    { key: 'operator', title: '操作者', width: '132px' },
                    { key: 'detail', title: '内容' },
                ],
                salonOpHistoryRows: [],
                salonBroadcastTabId: 'message',
                salonBroadcastTabs: [
                    { id: 'message', label: 'メッセージ' },
                    { id: 'action', label: 'アクション' },
                ],
                salonBroadcastLoading: false,
                salonBroadcastSteps: [],
                lessonVisitTotal: 0,
                lessonCancelTotal: 0,
                lessonActiveRowId: null,
                lessonLoading: false,
                lessonSort: { sort_by: 'reserved_at', sort_dir: 'desc' },
                lessonColumns: [
                    { key: 'reserved_at', title: '予約（来店）日時', width: '197px' },
                    { key: 'calendar_name', title: '店舗・ビジネス名', width: '197px', sortable: true },
                    { key: 'status', title: 'ステータス', width: '197px', sortable: true },
                    { key: 'course', title: 'コース', width: '220px', sortable: true },
                    { key: 'payment_amount', title: '支払い金額', width: '138px', sortable: true },
                    { key: 'payment_method', title: '決済方法', width: '160px', sortable: true },
                    { key: 'payment_status', title: '決済ステータス', width: '166px', sortable: true },
                    { key: 'action_setting', title: 'アクション', width: '138px', sortable: true },
                    { key: 'actions', title: '操作', width: '238px' },
                ],
                lessonRows: [],
                lessonPagination: {
                    current_page: 1,
                    per_page: 10,
                    last_page: 1,
                },
                lessonShowOpHistoryModal: false,
                lessonShowBroadcastModal: false,
                lessonOpHistoryLoading: false,
                lessonOpHistoryColumns: [
                    { key: 'op_at', title: '操作日時', width: '197px' },
                    { key: 'operator', title: '操作者', width: '132px' },
                    { key: 'detail', title: '内容' },
                ],
                lessonOpHistoryRows: [],
                lessonBroadcastTabId: 'message',
                lessonBroadcastTabs: [
                    { id: 'message', label: 'メッセージ' },
                    { id: 'action', label: 'アクション' },
                ],
                lessonBroadcastLoading: false,
                lessonBroadcastSteps: [],
            },
            computed: {
                manualChangeSubmittable() {
                    if (!this.manualChangeForm.step_id) return false;
                    if (this.manualChangeForm.timing === 'now') return true;
                    if (this.manualChangeForm.timing === 'scheduled') {
                        return this.manualChangeForm.days !== null && this.manualChangeForm.days !== '' && Number(this.manualChangeForm.days) >= 0;
                    }
                    return false;
                },
            },
            created() {
                // if (this.selectedOption && this.selectedOption.value === 'basic_info') {
                //     this.fetchBasicInfo();
                //     this.fetchAddHistory();
                // }
            },
            mounted() {
                // Save active tab before any reload so it survives server-side redirects that strip the hash
                window.addEventListener('beforeunload', function() {
                    var h = (window.location.hash || '').replace('#', '');
                    if (h) sessionStorage.setItem('friend_detail_active_tab', h);
                });

                // Restore active tab from URL hash or sessionStorage (hash is lost when server redirects on reload)
                var hash = (window.location.hash || '').replace('#', '');
                if (!hash) {
                    hash = sessionStorage.getItem('friend_detail_active_tab') || '';
                }
                sessionStorage.removeItem('friend_detail_active_tab');
                if (hash) {
                    var self = this;
                    var tabFound = false;
                    self.tabs.forEach(function(tab) {
                        if (tabFound) return;
                        if (tab.type === 'dropdown' && tab.options) {
                            tab.options.forEach(function(opt) {
                                if (!tabFound && opt.id === hash) {
                                    self.activeTabId = tab.id;
                                    self.selectedOption = { tabId: tab.id, value: opt.id, name: opt.name };
                                    tabFound = true;
                                }
                            });
                        } else if (tab.key === hash) {
                            self.activeTabId = tab.id;
                            self.selectedOption = { tabId: tab.id, value: tab.key, name: tab.label };
                            tabFound = true;
                        }
                    });
                }

                var val = this.selectedOption ? this.selectedOption.value : 'basic_info';
                if (val === 'basic_info') {
                    this.fetchBasicInfo();
                    this.fetchAddHistory();
                }
                if (val === 'friend_info') {
                    this.fetchFriendInfo();
                    this.fetchFriendInfoHistory();
                }
                if (val === 'memo') {
                    this.fetchMemos();
                }
                if (val === 'step') {
                    this.loadDataScenarioMyPage();
                }
                if (val === 'remind') {
                    this.loadRemindHistory(1);
                }
                if (val === 'salon') {
                    this.loadSalonBookings();
                }
                if (val === 'lesson') {
                    this.loadLessonBookings();
                }
                if (val === 'event') {
                    this.fetchEventBookings(1);
                }
                if (val === 'qr') {
                    this.fetchQrHistory();
                }
                if (val === 'single') {
                    this.fetchSinglePurchases();
                }
                if (val === 'subscription') {
                    this.fetchSubscriptionPurchases();
                }
                if (val === 'form') {
                    this.fetchFormAnswers();
                }
            },
            watch: {
                showStopScenarioAlert(val) {
                    if (val) {
                        setTimeout(() => { this.showStopScenarioAlert = false; }, 3000);
                    }
                },
                'selectedOption.value'(newVal) {
                    if (newVal === 'basic_info') {
                        this.fetchBasicInfo();
                        this.fetchAddHistory();
                    }
                    if (newVal === 'friend_info') {
                        this.fetchFriendInfo();
                        this.fetchFriendInfoHistory();
                    }
                    if (newVal === 'memo') {
                        this.fetchMemos();
                    }
                    if (newVal === 'form') {
                        this.fetchFormAnswers();
                    }
                },
            },
            methods: {
                formatTriggerDate(raw) {
                    if (!raw) return '';
                    var d = new Date(String(raw).replace(' ', 'T'));
                    if (isNaN(d.getTime())) return raw;
                    var pad = function (n) { return n < 10 ? '0' + n : '' + n; };
                    var weekdays = ['日', '月', '火', '水', '木', '金', '土'];
                    return d.getFullYear() + '年'
                        + pad(d.getMonth() + 1) + '月'
                        + pad(d.getDate()) + '日'
                        + '（' + weekdays[d.getDay()] + '）'
                        + pad(d.getHours()) + ':' + pad(d.getMinutes());
                },
                formatStopHistoryDate(raw) {
                    if (!raw) return '';
                    var d = new Date(String(raw).replace(' ', 'T'));
                    if (isNaN(d.getTime())) return raw;
                    var pad = function (n) { return n < 10 ? '0' + n : '' + n; };
                    var weekdays = ['日', '月', '火', '水', '木', '金', '土'];
                    return d.getFullYear() + '/'
                        + pad(d.getMonth() + 1) + '/'
                        + pad(d.getDate())
                        + '（' + weekdays[d.getDay()] + '）'
                        + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes());
                },
                copyCurrentUrl() {
                    const text = window.location.href;
                    const onSuccess = () => this.$toast('コピーしました', 'success');
                    const onError = () => this.$toast('コピーに失敗しました', 'error');
                    if (navigator.clipboard && window.isSecureContext) {
                        navigator.clipboard.writeText(text).then(onSuccess).catch(onError);
                        return;
                    }
                    try {
                        const ta = document.createElement('textarea');
                        ta.value = text;
                        ta.style.position = 'fixed';
                        ta.style.left = '-9999px';
                        document.body.appendChild(ta);
                        ta.focus();
                        ta.select();
                        const ok = document.execCommand('copy');
                        document.body.removeChild(ta);
                        ok ? onSuccess() : onError();
                    } catch (e) {
                        onError();
                    }
                },
                copyLineId() {
                    const text = '{{ (int) $line_id }}';
                    const onSuccess = () => this.$toast('コピーしました', 'success');
                    const onError = () => this.$toast('コピーに失敗しました', 'error');
                    if (navigator.clipboard && window.isSecureContext) {
                        navigator.clipboard.writeText(text).then(onSuccess).catch(onError);
                        return;
                    }
                    try {
                        const ta = document.createElement('textarea');
                        ta.value = text;
                        ta.style.position = 'fixed';
                        ta.style.left = '-9999px';
                        document.body.appendChild(ta);
                        ta.focus();
                        ta.select();
                        const ok = document.execCommand('copy');
                        document.body.removeChild(ta);
                        ok ? onSuccess() : onError();
                    } catch (e) {
                        onError();
                    }
                },
                getEventStatusColor: function (status) {
                    var map = {
                        'キャンセルリクエスト':     '#FAAD14',
                        '変更リクエスト':           '#FAAD14',
                        '来店リクエスト':           '#FAAD14',
                        '警告':                     '#FAAD14',
                        '来店予定':                 '#52C41A',
                        '来店済み':                 '#D9D9D9',
                        'キャンセル':               '#FF4D4F',
                        '否認済':                   '#FF4D4F',
                    };
                    return map[status] || '#D9D9D9';
                },
                onEventSortChange: function (sortInfo) {
                    this.eventSortKey = sortInfo.order ? sortInfo.key : null;
                    this.eventSortDir = sortInfo.order || null;
                    this.eventPagination.current_page = 1;
                    this.fetchEventBookings(1);
                },
                fetchEventBookings: function (page, perPage) {
                    var self = this;
                    var p = page || self.eventPagination.current_page;
                    var pp = perPage || self.eventPagination.per_page;
                    var params = { type: 'event', page: p, per_page: pp };
                    if (self.eventSortKey) {
                        params.sort_by  = self.eventSortKey;
                        params.sort_dir = self.eventSortDir;
                    }
                    axios.get('/basic/friendlist/my_page/' + self.lineUserId + '/reservations', {
                        params: params
                    }).then(function (res) {
                        if (res.data.success) {
                            var d = res.data.data;
                            self.eventBookings        = d.rows;
                            self.eventVisitCount      = d.visit_count;
                            self.eventCancelCount     = d.cancel_count;
                            self.eventPagination      = {
                                current_page: d.current_page,
                                per_page:     d.per_page,
                                last_page:    d.last_page,
                            };
                        }
                    }).catch(function (err) {
                        console.error('fetchEventBookings error', err);
                    });
                },
                openEventPreview: function (record) {
                    var captureId = record && record.action_multi_capture_id ? record.action_multi_capture_id : null;
                    if (!captureId) {
                        this.$toast && this.$toast('開始トリガー情報がありません', 'warning');
                        return;
                    }
                    this.openActionCapturePreview(captureId);
                },
                openEventDetail: function (record) {
                    this.eventDetailHistory = record.history ?? [];
                    this.showEventDetailModal = true;
                },
                // Dùng chung cho các tab có lme-table + pagination.
                // lme-table không tự reset scroll nội bộ khi data-source đổi (watch chỉ theo dõi
                // isAllSelected), và window có thể đang bị ghim ở đáy sau khi cuộn. Sau khi đổi trang
                // ta reset scroll bên trong bảng về đầu + đưa bảng về đầu viewport.
                // `ref` trỏ tới div bao lme-table của section tương ứng.
                scrollFdTableToTop: function (ref) {
                    var self = this;
                    self.$nextTick(function () {
                        var el = self.$refs[ref];
                        if (Array.isArray(el)) el = el[0];
                        if (!el) return;
                        var wrappers = el.querySelectorAll ? el.querySelectorAll('.lme-table-wrapper') : [];
                        for (var i = 0; i < wrappers.length; i++) wrappers[i].scrollTop = 0;
                        if (typeof el.scrollIntoView === 'function') {
                            el.scrollIntoView({ behavior: 'smooth', block: 'start' });
                        }
                    });
                },
                onEventPageChange: function (page) {
                    this.eventPagination.current_page = page;
                    this.fetchEventBookings(page);
                    this.scrollFdTableToTop('fdEventTableTop');
                },
                onEventLimitChange: function (limit) {
                    this.eventPagination.current_page = 1;
                    this.eventPagination.per_page = limit;
                    this.fetchEventBookings(1, limit);
                },
                onTabSelect(tabId) {
                    this.activeTabId = tabId;
                    let tab = this.tabs.find(t => t.id === tabId);
                    if (!tab) return;
                    if (tab.type === 'dropdown' && tab.options && tab.options.length) {
                        // Default to first option when clicking dropdown tab header
                        let first = tab.options[0];
                        // this.selectedOption = { tabId: tabId, value: first.id, name: first.name };
                        // if (first.id === 'salon') {
                        //     this.loadSalonBookings();
                        // }
                        this.onTabOptionSelect({tabId: tabId, option: first});
                    } else {
                        // Non-dropdown tab — use tab.key as view key
                        if (tab.key === 'tag') {
                            this.refreshFilterTag()
                        }
                        this.selectedOption = { tabId: tabId, value: tab.key, name: tab.label };
                        history.replaceState(null, '', '#' + tab.key);
                    }
                },
                onTabOptionSelect(payload) {
                    this.activeTabId = payload.tabId;
                    this.selectedOption = {
                        tabId: payload.tabId,
                        value: payload.option.id,
                        name: payload.option.name,
                    };
                    history.replaceState(null, '', '#' + payload.option.id);

                    if (payload.option.id === 'step') {
                        this.loadDataScenarioMyPage();
                    }
                    if (payload.option.id === 'remind') {
                        this.loadRemindHistory(1);
                    }
                    if (payload.option.id === 'salon') {
                        this.loadSalonBookings();
                    }
                    if (payload.option.id === 'lesson') {
                        this.loadLessonBookings();
                    }
                    if (payload.option.id === 'event') {
                        this.fetchEventBookings(1);
                    }
                    if (payload.option.id === 'qr') {
                        this.refreshFilterQr()
                        this.fetchQrHistory();
                    }
                    if (payload.option.id === 'single') {
                        this.fetchSinglePurchases();
                    }
                    if (payload.option.id === 'subscription') {
                        this.fetchSubscriptionPurchases();
                    }
                },
                onBroadcastPlayAction: function (row) {
                    var self = this;
                    if (!row || !row.step_message_id) return;
                    self.$set(self.stepMsgPreviewItem, 'id', row.step_message_id);
                    self.$set(self.stepMsgPreviewItem, 'preview_tab_id', 'action');
                    self.$set(self.stepMsgPreviewItem, 'preview_loading', true);
                    self.$set(self.stepMsgPreviewItem, 'preview', { messages: [], actions: [] });
                    self.showStepMsgPreviewDrawer = true;

                    $.ajax({
                        url: '/basic/friendlist/my_page/' + self.lineUserId + '/step-message-preview/' + row.step_message_id,
                        method: 'GET',
                        dataType: 'json',
                    }).done(function (res) {
                        if (res && res.success && res.data) {
                            self.$set(self.stepMsgPreviewItem, 'preview', {
                                messages: res.data.messages || [],
                                actions:  res.data.actions  || [],
                            });
                        }
                    }).always(function () {
                        self.$set(self.stepMsgPreviewItem, 'preview_loading', false);
                    });
                },
                onBroadcastPlay: function (row) {
                    var self = this;
                    if (row && row.status_type === 'scheduled' && row.step_message_id) {
                        self.$set(self.stepMsgPreviewItem, 'id', row.step_message_id);
                        self.$set(self.stepMsgPreviewItem, 'preview_tab_id', 'message');
                        self.$set(self.stepMsgPreviewItem, 'preview_loading', true);
                        self.$set(self.stepMsgPreviewItem, 'preview', { messages: [], actions: [] });
                        self.showStepMsgPreviewDrawer = true;

                        $.ajax({
                            url: '/basic/friendlist/my_page/' + self.lineUserId + '/step-message-preview/' + row.step_message_id,
                            method: 'GET',
                            dataType: 'json',
                        }).done(function (res) {
                            if (res && res.success && res.data) {
                                self.$set(self.stepMsgPreviewItem, 'preview', {
                                    messages: res.data.messages || [],
                                    actions:  res.data.actions  || [],
                                });
                            }
                        }).always(function () {
                            self.$set(self.stepMsgPreviewItem, 'preview_loading', false);
                        });
                        return;
                    }
                    // Fallback: existing action-capture preview for sent rows
                    if (typeof this.openActionCapturePreview !== 'function') return;
                    var captureId  = row && row.action_multi_capture_id ? row.action_multi_capture_id : null;
                    var messageIds = row && row.message_id ? [row.message_id] : null;
                    if (!captureId && !messageIds) {
                        this.$toast && this.$toast('開始トリガー情報がありません', 'warning');
                        return;
                    }
                    this.openActionCapturePreview(captureId, messageIds);
                },
                openStepPreview() {
                    var step = this.stepInfo.latest_sent_step || {};
                    var captureId = step.action_multi_capture_id || null;
                    var messageIds = step.message_id ? [step.message_id] : null;
                    if (!captureId && !messageIds) {
                        this.$toast && this.$toast('プレビュー情報がありません', 'warning');
                        return;
                    }
                    this.openActionCapturePreview(captureId, messageIds);
                },
                openTriggerModal() {
                    // ステップ配信情報 — dùng message_id từ scenario_lineuser (scenario hiện đang chạy)
                    let messageId = this.stepInfo
                        && this.stepInfo.scenarioRunning
                        && this.stepInfo.scenarioRunning.message_id;
                    this.fetchTriggerDetail(messageId);
                },
                openTriggerModalHistory(historyItem) {
                    // 配信履歴 — dùng message_id từ step_message_history (step bắt đầu của scenario run)
                    let messageId = historyItem && historyItem.message_id;
                    this.fetchTriggerDetail(messageId);
                },
                fetchTriggerDetail(messageId) {
                    let self = this;
                    if (!messageId) {
                        self.$toast && self.$toast('開始トリガー情報がありません', 'warning');
                        return;
                    }
                    self.triggerModalData = {
                        type_name: '', management_name: '', detail: '', triggered_at: '',
                    };
                    self.triggerModalLoading = true;
                    self.showTriggerModal = true;
                    $.ajax({
                        type: 'POST',
                        url: '/ajax/get-detail-action-trigger',
                        data: { id_message: messageId, _token: $('meta[name="csrf-token"]').attr('content') },
                    }).done(function (res) {
                        if (res && res.detailMessAction) {
                            var d = res.detailMessAction;
                            self.triggerModalData = {
                                type_name:       d.action_from_name || '',
                                management_name: d.management_name || '',
                                detail:          d.detail_action || '',
                                triggered_at:    d.time_trigger || '',
                            };
                        } else if (res && res.msg) {
                            self.$toast && self.$toast(res.msg, 'error');
                        }
                    }).fail(function () {
                        self.$toast && self.$toast('読み込みに失敗しました', 'error');
                    }).always(function () {
                        self.triggerModalLoading = false;
                    });
                },
                isStopBadge(historyItem) {
                    // Badge 停止 (手動停止 / アクションによる停止) mới clickable để mở stop trigger modal.
                    // 配信中 (đang chạy) và 配信完了 (chạy hết step tự nhiên) không có stop trigger.
                    return historyItem
                        && historyItem.status !== 'sending'
                        && historyItem.stop_status_label !== '配信完了';
                },
                openStopTriggerModal(historyItem) {
                    // 配信履歴 — khi click vào status 停止 của scenario đã dừng.
                    // 手動停止 -> modal「手動停止履歴」; アクションによる停止 -> modal「このステップの停止トリガー」.
                    if (historyItem && historyItem.stop_status_label === '手動停止') {
                        this.openManualStopHistoryModal(historyItem);
                        return;
                    }
                    // Case scenario bị dừng do step khác bắt đầu (không có stop trigger riêng): message_stop_id = NULL.
                    // 種類名/管理名 hiện '-', 詳細 hiện '他のステップの開始時アクション', không gọi endpoint.
                    if (!historyItem || !historyItem.message_stop_id) {
                        this.stopTriggerModalData = {
                            stop_type_name:       '-',
                            stop_management_name: '-',
                            stop_detail:          '他のステップの開始時アクション',
                            stop_triggered_at:    (historyItem && historyItem.stop_datetime) || '',
                        };
                        this.stopTriggerModalLoading = false;
                        this.showStopTriggerModal = true;
                        return;
                    }
                    this.fetchStopTriggerDetail(historyItem.message_stop_id);
                },
                openManualStopHistoryModal(historyItem) {
                    let self = this;
                    self.manualStopHistoryScenarioName = (historyItem && historyItem.name) || '';
                    self.manualStopHistoryRows = [];
                    self.showManualStopHistoryModal = true;
                    let messageId = (historyItem && historyItem.message_stop_id)
                        ? historyItem.message_stop_id
                        : (historyItem && historyItem.message_id);
                    if (!messageId) {
                        return;
                    }
                    self.manualStopHistoryLoading = true;
                    $.ajax({
                        type: 'POST',
                        url: '/ajax/get-detail-action-trigger',
                        data: { id_message: messageId, _token: $('meta[name="csrf-token"]').attr('content') },
                    }).done(function (res) {
                        if (res && res.detailMessAction) {
                            var d = res.detailMessAction;
                            self.manualStopHistoryRows = [{
                                id: messageId,
                                op_at: self.formatStopHistoryDate(d.time_trigger || ''),
                                operator: d.detail_action || '-',
                            }];
                        } else if (res && res.msg) {
                            self.$toast && self.$toast(res.msg, 'error');
                        }
                    }).fail(function () {
                        self.$toast && self.$toast('読み込みに失敗しました', 'error');
                    }).always(function () {
                        self.manualStopHistoryLoading = false;
                    });
                },
                fetchStopTriggerDetail(messageId) {
                    let self = this;
                    if (!messageId) {
                        self.$toast && self.$toast('停止トリガー情報がありません', 'warning');
                        return;
                    }
                    self.stopTriggerModalData = {
                        stop_type_name: '', stop_management_name: '', stop_detail: '', stop_triggered_at: '',
                    };
                    self.stopTriggerModalLoading = true;
                    self.showStopTriggerModal = true;
                    $.ajax({
                        type: 'POST',
                        url: '/ajax/get-detail-action-trigger',
                        data: { id_message: messageId, _token: $('meta[name="csrf-token"]').attr('content') },
                    }).done(function (res) {
                        if (res && res.detailMessAction) {
                            var d = res.detailMessAction;
                            self.stopTriggerModalData = {
                                stop_type_name:       d.action_from_name || '',
                                stop_management_name: d.management_name || '',
                                stop_detail:          d.detail_action || '',
                                stop_triggered_at:    d.time_trigger || '',
                            };
                        } else if (res && res.msg) {
                            self.$toast && self.$toast(res.msg, 'error');
                        }
                    }).fail(function () {
                        self.$toast && self.$toast('読み込みに失敗しました', 'error');
                    }).always(function () {
                        self.stopTriggerModalLoading = false;
                    });
                },
                openManualChangeModal() {
                    this.manualChangeForm = { step_id: '', timing: 'now', days: null };
                    this.showManualChangeModal = true;
                    this.loadStepOptions();
                },
                loadStepOptions() {
                    let self = this;
                    self.stepOptionsLoading = true;
                    $.ajax({
                        url: '/basic/friendlist/my_page/' + self.lineUserId + '/step-options',
                        method: 'GET',
                        dataType: 'json',
                    }).done(function (res) {
                        if (res.success) {
                            self.stepOptions = res.data || [];
                        }
                    }).always(function () {
                        self.stepOptionsLoading = false;
                    });
                },
                onManualStepChange() {
                    // When step is selected, default timing to 'now'
                    if (this.manualChangeForm.step_id) {
                        this.manualChangeForm.timing = 'now';
                        this.manualChangeForm.days = null;
                    }
                },
                openForceStopModal() {
                    this.showForceStopModal = true;
                },
                onForceStopConfirm() {
                    // TODO: call force-stop API
                    this.showForceStopModal = false;
                    this.cancelScenario();
                },
                onManualChangeSubmit() {
                    this.saveChangeScenario();
                    this.showManualChangeModal = false;
                },
                linkToChat() {
                    let self = this;
                    localStorage.setItem('isHideTop',0);
                    console.log('lineUserId',lineUserId);
                    console.log(lineUserId);
                    $.ajax({
                        url: "/ajax/remove-hide-friend",
                        method: "post",
                        data: {
                            lineUserId: self.lineUserId,
                        },
                        beforeSend: function () {
                            $.LoadingOverlay("show");
                        },
                    })
                        .done(function (response) {
                            $.LoadingOverlay("hide");
                            if (response.success) {
                                window.location.href = '/basic/chat-v3?friend_id='+lineUserId;
                            }
                        })
                        .fail(function (a, b, c) {
                            $.LoadingOverlay("hide");
                        });
                },
                blockMe() {
                    this.showBlockModal = true;
                },
                confirmBlock() {
                    let self = this;
                    self.showBlockModal = false;

                    $.ajaxSetup({
                        headers: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content") },
                    });
                    $.ajax({
                        url: "/basic/line_user/update",
                        data: {
                            line_id: self.lineUserId,
                            type: 'block',
                        },
                        method: "post",
                        dataType: "json",
                        statusCode: {
                            404: function () {
                                alert("page not found");
                            },
                            400: function () {
                                window.location.href = "/";
                            },
                        },
                    }).done(function (response) {
                        let now = moment();
                        let newTime = now.add(15, 'minutes').unix();
                        localStorage.setItem('lastTimeUpdateFriend', newTime);
                        if (response.success) window.location.href = "/basic/friendlist";
                    }).fail(function () { })
                },
                unblockMe() {
                    let self = this;

                    $.ajaxSetup({
                        headers: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content") },
                    });
                    $.ajax({
                        url: "/basic/friendlist/unblock-friend",
                        data: {
                            listLineId: [self.lineUserId],
                        },
                        method: "post",
                        dataType: "json",
                        statusCode: {
                            404: function () {
                                alert("page not found");
                            },
                            400: function () {
                                window.location.href = "/";
                            },
                        },
                    }).done(function (response) {
                        if (response.success) {
                            self.isBlocked = false;
                            // unblock ghi thêm 1 bản ghi vào lịch sử kết bạn → refresh bảng nếu đang ở tab 基本情報
                            if (self.selectedOption && self.selectedOption.value === 'basic_info') {
                                self.fetchAddHistory();
                            }
                        }
                    }).fail(function () { })
                },
                deleteLineUser() {
                    this.showDeleteModal = true;
                },
                confirmDeleteLineUser() {
                    let self = this;
                    self.showDeleteModal = false;

                    $.ajaxSetup({
                        headers: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content") },
                    });
                    $.ajax({
                        url: "/basic/line_user/update",
                        data: {
                            line_id: self.lineUserId,
                            type: 'deleteLineUser'
                        },
                        method: "post",
                        dataType: "json",
                        statusCode: {
                            404: function () {
                                alert("page not found");
                            },
                            400: function () {
                                window.location.href = "/";
                            },
                        },
                        beforeSend: function () {
                            $.LoadingOverlay("show");
                        },
                    }).done(function (response) {
                        if (response.success) {
                            let now = moment();
                            let newTime = now.add(15, 'minutes').unix();
                            localStorage.setItem('lastTimeUpdateFriend', newTime);
                            window.location.href = "/basic/friendlist?line_user_id_deleted="+response.line_user_id;
                            $.LoadingOverlay("hide");
                        } else {
                            $.LoadingOverlay("hide");
                        }
                    }).fail(function () {
                        $.LoadingOverlay("hide");
                    });
                },
                cancelScenario: function () {
                    var self = this;
                    $.ajax({
                        url: "/ajax/action_scenario_my_page",
                        method: "post",
                        data: {
                            line_user_id: self.lineUserId,
                            action: "cancel",
                            conversation_id: self.conversationId,
                        },
                        beforeSend: function () {
                            $.LoadingOverlay("show");
                        },
                    }).done(function (response) {
                        $.LoadingOverlay("hide");
                        if (response.success) {
                            self.showStopScenarioAlert = true;
                            window.location.reload();
                        }
                    }).fail(function () {
                        $.LoadingOverlay("hide");
                    });
                },
                loadDataScenarioMyPage() {
                    let self = this;
                    self.stepLoading = true;
                    $.ajax({
                        url: '/basic/friendlist/my_page/' + self.lineUserId + '/step-delivery',
                        method: 'GET',
                        dataType: 'json',
                    }).done(function (res) {
                        if (res.success) {
                            self.stepInfo = res.data;
                        }
                    }).always(function () {
                        self.stepLoading = false;
                    });
                    self.loadBroadcastHistory(1);
                },
                loadBroadcastHistory: function (page) {
                    var self = this;
                    var perPage = self.broadcastHistoryPagination.per_page || 10;
                    self.broadcastHistoryLoading = true;
                    $.ajax({
                        url: '/basic/friendlist/my_page/' + self.lineUserId + '/step-history',
                        method: 'GET',
                        dataType: 'json',
                        data: { page: page, per_page: perPage },
                    }).done(function (res) {
                        if (res && res.success && res.data) {
                            var data = res.data;
                            self.broadcastHistoryItems = data.items || [];
                            self.broadcastHistoryPagination.current_page = data.current_page || 1;
                            self.broadcastHistoryPagination.last_page = data.last_page || 1;
                            self.broadcastHistoryPagination.per_page = data.per_page || perPage;
                            self.broadcastHistoryPagination.total = data.total || 0;
                        }
                    }).always(function () {
                        self.broadcastHistoryLoading = false;
                    });
                },
                onBroadcastHistoryToggle: function (item) {
                    if (this.expandedHistoryId === item.id) {
                        this.expandedHistoryId = null;
                        return;
                    }
                    this.expandedHistoryId = item.id;
                    if (!this.broadcastHistoryDetails[item.id]) {
                        this.loadScenarioRunHistory(item, 0, false);
                    }
                },
                onBroadcastHistoryLoadMore: function (item) {
                    var meta = this.broadcastHistoryMeta[item.id];
                    if (!meta || meta.loading || !meta.has_more) {
                        return;
                    }
                    this.loadScenarioRunHistory(item, meta.offset + meta.limit, true);
                },
                loadScenarioRunHistory: function (item, offset, append) {
                    var self = this;
                    if (!item || !item.id) {
                        return;
                    }
                    var existingMeta = self.broadcastHistoryMeta[item.id] || {};
                    self.$set(self.broadcastHistoryMeta, item.id, Object.assign({}, existingMeta, { loading: true }));
                    $.ajax({
                        url: '/basic/friendlist/my_page/' + self.lineUserId + '/scenario-run-history',
                        method: 'GET',
                        dataType: 'json',
                        data: { history_id: item.id, offset: offset, limit: 10 },
                    }).done(function (res) {
                        if (!res || !res.success || !res.data) {
                            return;
                        }
                        var rows = res.data.rows || [];
                        var current = self.broadcastHistoryDetails[item.id] || [];
                        var next = append ? current.concat(rows) : rows;
                        self.$set(self.broadcastHistoryDetails, item.id, next);
                        self.$set(self.broadcastHistoryMeta, item.id, {
                            offset: res.data.offset || 0,
                            limit: res.data.limit || 10,
                            total: res.data.total || 0,
                            has_more: !!res.data.has_more,
                            loading: false,
                        });
                    }).fail(function () {
                        var m = self.broadcastHistoryMeta[item.id] || {};
                        m.loading = false;
                        self.$set(self.broadcastHistoryMeta, item.id, m);
                    });
                },
                onBroadcastHistoryPageChange: function (page) {
                    this.expandedHistoryId = null;
                    this.broadcastHistoryDetails = {};
                    this.broadcastHistoryMeta = {};
                    this.loadBroadcastHistory(page);
                },
                onBroadcastHistoryLimitChange: function (limit) {
                    this.broadcastHistoryPagination.per_page = limit;
                    this.expandedHistoryId = null;
                    this.broadcastHistoryDetails = {};
                    this.broadcastHistoryMeta = {};
                    this.loadBroadcastHistory(1);
                },
                loadRemindHistory: function (page) {
                    var self = this;
                    var perPage = self.remindHistoryPagination.per_page || 10;
                    self.remindHistoryLoading = true;
                    $.ajax({
                        url: '/basic/friendlist/my_page/' + self.lineUserId + '/remind-list',
                        method: 'GET',
                        dataType: 'json',
                        data: { page: page, per_page: perPage },
                    }).done(function (res) {
                        if (res && res.success && res.data) {
                            var data = res.data;
                            self.remindHistoryItems = data.items || [];
                            self.remindHistoryPagination.current_page = data.current_page || 1;
                            self.remindHistoryPagination.last_page = data.last_page || 1;
                            self.remindHistoryPagination.per_page = data.per_page || perPage;
                            self.remindHistoryPagination.total = data.total || 0;
                        }
                    }).always(function () {
                        self.remindHistoryLoading = false;
                    });
                },
                onRemindHistoryToggle: function (item) {
                    if (this.expandedRemindId === item.id) {
                        this.expandedRemindId = null;
                        return;
                    }
                    this.expandedRemindId = item.id;
                    if (!this.remindHistoryDetails[item.id]) {
                        this.loadRemindSteps(item, 0, false);
                    }
                },
                onRemindHistoryLoadMore: function (item) {
                    var meta = this.remindHistoryMeta[item.id];
                    if (!meta || meta.loading || !meta.has_more) {
                        return;
                    }
                    this.loadRemindSteps(item, meta.offset + meta.limit, true);
                },
                loadRemindSteps: function (item, offset, append) {
                    var self = this;
                    if (!item || !item.id) {
                        return;
                    }
                    if (!append) {
                        self.$set(self.remindDetailLoading, item.id, true);
                    }
                    var existingMeta = self.remindHistoryMeta[item.id] || {};
                    self.$set(self.remindHistoryMeta, item.id, Object.assign({}, existingMeta, { loading: true }));
                    $.ajax({
                        url: '/basic/friendlist/my_page/' + self.lineUserId + '/remind-steps',
                        method: 'GET',
                        dataType: 'json',
                        data: { event_id: item.event_id, event_time_id: item.event_time_id, offset: offset, limit: 10 },
                    }).done(function (res) {
                        if (res && res.success && res.data) {
                            var rows = res.data.rows || [];
                            var current = self.remindHistoryDetails[item.id] || [];
                            var next = append ? current.concat(rows) : rows;
                            self.$set(self.remindHistoryDetails, item.id, next);
                            self.$set(self.remindHistoryMeta, item.id, {
                                offset: res.data.offset || 0,
                                limit: res.data.limit || 10,
                                total: res.data.total || 0,
                                has_more: !!res.data.has_more,
                                loading: false,
                            });
                        } else {
                            var m = self.remindHistoryMeta[item.id] || {};
                            m.loading = false;
                            self.$set(self.remindHistoryMeta, item.id, m);
                        }
                    }).fail(function () {
                        var m = self.remindHistoryMeta[item.id] || {};
                        m.loading = false;
                        self.$set(self.remindHistoryMeta, item.id, m);
                    }).always(function () {
                        self.$set(self.remindDetailLoading, item.id, false);
                    });
                },
                onRemindHistoryPageChange: function (page) {
                    this.expandedRemindId = null;
                    this.remindHistoryDetails = {};
                    this.remindHistoryMeta = {};
                    this.remindDetailLoading = {};
                    this.loadRemindHistory(page);
                },
                onRemindHistoryLimitChange: function (limit) {
                    this.remindHistoryPagination.per_page = limit;
                    this.expandedRemindId = null;
                    this.remindHistoryDetails = {};
                    this.remindHistoryMeta = {};
                    this.remindDetailLoading = {};
                    this.loadRemindHistory(1);
                },
                openRemindStopModal: function (item) {
                    this.remindStopTarget = item;
                    this.showRemindStopModal = true;
                },
                onRemindStopConfirm: function () {
                    var self = this;
                    var item = self.remindStopTarget;
                    if (!item) {
                        self.showRemindStopModal = false;
                        return;
                    }
                    self.remindStopLoading = true;
                    $.ajax({
                        url: '/basic/friendlist/my_page/' + self.lineUserId + '/remind-stop',
                        method: 'POST',
                        dataType: 'json',
                        data: {
                            event_id: item.event_id,
                            event_time_id: item.event_time_id,
                            _token: $('meta[name="csrf-token"]').attr('content'),
                        },
                    }).done(function (res) {
                        if (res && res.success) {
                            self.showRemindStopModal = false;
                            self.remindStopTarget = null;
                            self.expandedRemindId = null;
                            self.remindHistoryDetails = {};
                            self.remindHistoryMeta = {};
                            self.remindDetailLoading = {};
                            self.loadRemindHistory(self.remindHistoryPagination.current_page || 1);
                        } else {
                            self.$toast && self.$toast((res && res.message) || '停止に失敗しました', 'error');
                        }
                    }).fail(function () {
                        self.$toast && self.$toast('停止に失敗しました', 'error');
                    }).always(function () {
                        self.remindStopLoading = false;
                    });
                },
                loadSalonBookings: function () {
                    var self = this;
                    self.salonLoading = true;
                    $.ajax({
                        url: '/basic/friendlist/my_page/' + self.lineUserId + '/salon/bookings',
                        method: 'GET',
                        dataType: 'json',
                        data: {
                            page: self.salonPagination.current_page,
                            per_page: self.salonPagination.per_page,
                            sort_by: self.salonSort.sort_by,
                            sort_dir: self.salonSort.sort_dir,
                        },
                    }).done(function (res) {
                        if (res && res.success && res.data) {
                            self.salonRows = res.data.rows || [];
                            self.salonVisitTotal = (res.data.stats && res.data.stats.visit_total) || 0;
                            self.salonCancelTotal = (res.data.stats && res.data.stats.cancel_total) || 0;
                            if (res.data.pagination) {
                                self.salonPagination.current_page = res.data.pagination.current_page;
                                self.salonPagination.per_page = res.data.pagination.per_page;
                                self.salonPagination.last_page = res.data.pagination.last_page;
                            }
                        }
                    }).always(function () {
                        self.salonLoading = false;
                    });
                },
                loadSalonBroadcastSchedule: function (bookingId) {
                    var self = this;
                    self.salonBroadcastLoading = true;
                    self.salonBroadcastSteps = [];
                    $.ajax({
                        url: '/basic/friendlist/my_page/' + self.lineUserId + '/salon/' + bookingId + '/schedule',
                        method: 'GET',
                        dataType: 'json',
                    }).done(function (res) {
                        if (res && res.success && res.data) {
                            self.salonBroadcastSteps = res.data.steps || [];
                            self.loadBroadcastStepPreviews(self.salonBroadcastSteps, function (eventStepId) {
                                return '/basic/friendlist/my_page/' + self.lineUserId + '/salon/' + bookingId + '/step-preview/' + eventStepId;
                            });
                        }
                    }).always(function () {
                        self.salonBroadcastLoading = false;
                    });
                },
                loadSalonOpHistory: function (bookingId) {
                    var self = this;
                    self.salonOpHistoryLoading = true;
                    self.salonOpHistoryRows = [];
                    $.ajax({
                        url: '/basic/friendlist/my_page/' + self.lineUserId + '/salon/' + bookingId + '/history',
                        method: 'GET',
                        dataType: 'json',
                    }).done(function (res) {
                        if (res && res.success && res.data) {
                            self.salonOpHistoryRows = res.data.rows || [];
                        }
                    }).always(function () {
                        self.salonOpHistoryLoading = false;
                    });
                },
                onSalonSortChange: function (sortInfo) {
                    if (!sortInfo) return;
                    this.salonSort.sort_by = sortInfo.key || sortInfo.sort_by || 'reserved_at';
                    this.salonSort.sort_dir = sortInfo.order || sortInfo.sort_dir || 'desc';
                    this.salonPagination.current_page = 1;
                    this.loadSalonBookings();
                },
                onSalonPreview: function (record) {
                    this.salonActiveRowId = record.id;
                    this.salonBroadcastTabId = 'message';
                    this.salonShowBroadcastModal = true;
                    this.loadSalonBroadcastSchedule(record.id);
                },
                onSalonSchedule: function (record) {
                    this.salonActiveRowId = record.id;
                    this.salonBroadcastTabId = 'message';
                    this.salonShowBroadcastModal = true;
                    this.loadSalonBroadcastSchedule(record.id);
                },
                onSalonDetail: function (record) {
                    this.salonActiveRowId = record.id;
                    this.salonShowOpHistoryModal = true;
                    this.loadSalonOpHistory(record.id);
                },
                onSalonPageChange: function (page) {
                    this.salonPagination.current_page = page;
                    this.loadSalonBookings();
                    this.scrollFdTableToTop('fdSalonTableTop');
                },
                onSalonLimitChange: function (limit) {
                    this.salonPagination.current_page = 1;
                    this.salonPagination.per_page = limit;
                    this.loadSalonBookings();
                },
                loadLessonBookings: function () {
                    var self = this;
                    self.lessonLoading = true;
                    $.ajax({
                        url: '/basic/friendlist/my_page/' + self.lineUserId + '/lesson/bookings',
                        method: 'GET',
                        dataType: 'json',
                        data: {
                            page: self.lessonPagination.current_page,
                            per_page: self.lessonPagination.per_page,
                            sort_by: self.lessonSort.sort_by,
                            sort_dir: self.lessonSort.sort_dir,
                        },
                    }).done(function (res) {
                        if (res && res.success && res.data) {
                            self.lessonRows = res.data.rows || [];
                            self.lessonVisitTotal = (res.data.stats && res.data.stats.visit_total) || 0;
                            self.lessonCancelTotal = (res.data.stats && res.data.stats.cancel_total) || 0;
                            if (res.data.pagination) {
                                self.lessonPagination.current_page = res.data.pagination.current_page;
                                self.lessonPagination.per_page = res.data.pagination.per_page;
                                self.lessonPagination.last_page = res.data.pagination.last_page;
                            }
                        }
                    }).always(function () {
                        self.lessonLoading = false;
                    });
                },
                loadLessonBroadcastSchedule: function (bookingId) {
                    var self = this;
                    self.lessonBroadcastLoading = true;
                    self.lessonBroadcastSteps = [];
                    $.ajax({
                        url: '/basic/friendlist/my_page/' + self.lineUserId + '/lesson/' + bookingId + '/schedule',
                        method: 'GET',
                        dataType: 'json',
                    }).done(function (res) {
                        if (res && res.success && res.data) {
                            self.lessonBroadcastSteps = res.data.steps || [];
                            self.loadBroadcastStepPreviews(self.lessonBroadcastSteps, function (eventStepId) {
                                return '/basic/friendlist/my_page/' + self.lineUserId + '/lesson/' + bookingId + '/step-preview/' + eventStepId;
                            });
                        }
                    }).always(function () {
                        self.lessonBroadcastLoading = false;
                    });
                },
                loadLessonOpHistory: function (bookingId) {
                    var self = this;
                    self.lessonOpHistoryLoading = true;
                    self.lessonOpHistoryRows = [];
                    $.ajax({
                        url: '/basic/friendlist/my_page/' + self.lineUserId + '/lesson/' + bookingId + '/history',
                        method: 'GET',
                        dataType: 'json',
                    }).done(function (res) {
                        if (res && res.success && res.data) {
                            self.lessonOpHistoryRows = res.data.rows || [];
                        }
                    }).always(function () {
                        self.lessonOpHistoryLoading = false;
                    });
                },
                onLessonSortChange: function (sortInfo) {
                    if (!sortInfo) return;
                    this.lessonSort.sort_by = sortInfo.key || sortInfo.sort_by || 'reserved_at';
                    this.lessonSort.sort_dir = sortInfo.order || sortInfo.sort_dir || 'desc';
                    this.lessonPagination.current_page = 1;
                    this.loadLessonBookings();
                },
                onLessonPreview: function (record) {
                    this.lessonActiveRowId = record.id;
                    this.lessonBroadcastTabId = 'message';
                    this.lessonShowBroadcastModal = true;
                    this.loadLessonBroadcastSchedule(record.id);
                },
                onLessonSchedule: function (record) {
                    this.lessonActiveRowId = record.id;
                    this.lessonBroadcastTabId = 'message';
                    this.lessonShowBroadcastModal = true;
                    this.loadLessonBroadcastSchedule(record.id);
                },
                onLessonDetail: function (record) {
                    this.lessonActiveRowId = record.id;
                    this.lessonShowOpHistoryModal = true;
                    this.loadLessonOpHistory(record.id);
                },
                onLessonPageChange: function (page) {
                    this.lessonPagination.current_page = page;
                    this.loadLessonBookings();
                    this.scrollFdTableToTop('fdLessonTableTop');
                },
                onLessonLimitChange: function (limit) {
                    this.lessonPagination.current_page = 1;
                    this.lessonPagination.per_page = limit;
                    this.loadLessonBookings();
                },
                saveChangeScenario: function () {
                    let self = this;
                    let stepSelection = self.manualChangeForm.timing === 'now' ? 0 : 1;
                    let days = self.manualChangeForm.days;
                    if (days == null || days == "") {
                        days = 0;
                    }

                    if(self.manualChangeForm.step_id == null || self.manualChangeForm.step_id == 0){
                        return self.error.message_require_scenario = "ステップを選択してください。";
                    }

                    $.ajax({
                        url: "/ajax/action_scenario_my_page",
                        method: "post",
                        data: {
                            line_user_id: self.lineUserId,
                            action: "change",
                            scenario_id: self.manualChangeForm.step_id,
                            type: stepSelection,
                            start_day: days,
                            start_time: "00:00",
                        },
                        beforeSend: function () {
                            $.LoadingOverlay("show");
                        },
                    })
                        .done(function (response) {
                            $.LoadingOverlay("hide");
                            if (response.success) {
                                self.loadDataScenarioMyPage("scenario");
                            } else if (response.msg) {
                                // [ai-fixbug #40222] Hien loi tu server (vd ban be da chan bot -> khong duoc bat dau step).
                                alert(response.msg);
                            }
                        })
                        .fail(function () {
                            $.LoadingOverlay("hide");
                        });
                },
            },
        });
    </script>
@endpush